Skip to content

Common React UI components for all Wix verticals developing in React

License

Notifications You must be signed in to change notification settings

Oripi/wix-style-react

 
 

Repository files navigation

wix-style-react is a collection of React components that conform to Wix Style created by Wix UX guild.

Installation

  • Install with npm or yarn:
npm i wix-style-react
# OR
yarn add wix-style-react

Prerequisites

wix-style-react uses Stylable, SASS and CSS Modules configuration by default. in order to use wix-style-react, your module bundler should be configured accordingly.

Example of create-react-app configuration

  • Run

    $ npm run eject
    $ npm i -D node-sass stylable @stylable/webpack-plugin @stylable/core
  • Enhance webpack configuration

    // config/webpack.config.js
    {
      //...
      modules: {
        rules: [
          {
            exclude: /\.st.css$/, //This must appear before the "oneOf" property
            oneOf: [
              //...
              {
                test: sassRegex,
                include: [
                  path.join(__dirname, '../node_modules/wix-animations'),
                  path.join(__dirname, '../node_modules/wix-style-react'),
                  path.join(__dirname, '../node_modules/bootstrap-sass')
                ],
                exclude: sassModuleRegex,
                use: getStyleLoaders(
                  {
                    modules: true,
                    importLoaders: 2,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                    camelCase: true,
                    localIdentName:'[name]__[local]___[hash:base64:5]',
                  },
                  'sass-loader'
                ),
                sideEffects: true,
              },
            ]
          },
        ],
        plugins: [
          //...
          new StylableWebpackPlugin({
             experimentalHMR: true,
             useEntryModuleInjection: true
           }),
        ]
      //...
      }
    }

Typescript support

Usage

Requirements

  • Load Wix fonts from CDN
    <link rel="stylesheet" href="//static.parastorage.com/services/third-party/fonts/Helvetica/fontFace.css">

Usage

import React from 'react';
import Button from 'wix-style-react/Button';

const App = () => (
    <Button onClick={() => console.log('thanks for clicking :)')}>
      Click me!
    </Button>
);

Tips

  • Use Yoshi as build tool to avoid configuration. Otherwise follow webpack setup instructions here
  • Enable font smoothing with browser specific css properties, for example:
    html {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  • Use demo pages to find all available components with examples.

Contributing

Please refer to the Contributing page

License

This project is offered under MIT License.

About

Common React UI components for all Wix verticals developing in React

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 93.3%
  • CSS 6.7%