bt4R9 / wix-style-react

Common React UI components for all Wix verticals developing in React

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

Demo | Source | Playground

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

• Refer to Stylable Docs regarding Typescript configuration

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.

Test drivers

All of wix-style-react components are 100% tested and supplies test drivers for easy interactions in your tests. Read more about Components Drivers

Contributing

Please refer to the Contributing page

License

This project is offered under MIT License.