nomasgrim / 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.

Contributing

Please refer to the Contributing page

License

This project is offered under MIT License.