/wix-style-react

Common React UI components for all Wix verticals developing in React

Primary LanguageJavaScriptMIT LicenseMIT

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.