Skip to content
Common React UI components for all Wix verticals developing in React
JavaScript CSS Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.autotools Infra - use ui-autotools for ssr sanity tests (#3666) Jul 3, 2019
.github Update issue templates Mar 5, 2019
.storybook Separate storybook for e2e (#4187) Oct 21, 2019
.wuf Migration - remove dependency in backoffice (#4324) Oct 17, 2019
beta <PopoverMenu/> - Beta (#3485) Jun 3, 2019
docs Separate storybook for e2e (#4187) Oct 21, 2019
scripts Modify perfer config and externalise some libraries for bundles analy… Oct 21, 2019
src Separate storybook for e2e (#4187) Oct 21, 2019
stories <LiveCodeExample/> - decouple helper function from component for unit… Oct 21, 2019
test-runtime/imports EllipsisHoc - universal hoc for components that need to shrink if pro… Oct 21, 2019
test Separate storybook for e2e (#4187) Oct 21, 2019
testkit chore(.wuf/testkits/definitions.js): refactor to not require entries … Oct 11, 2019
.ci_config release(7.8.1) Oct 16, 2019
.editorconfig New loader (#1203) Dec 3, 2017
.gitignore Separate storybook for e2e (#4187) Oct 21, 2019
.npmrc add npmrc file to block package-lock generation (#2266) Sep 26, 2018
.nvmrc chore(.nvmrc): use node 10 (#2721) Jan 9, 2019
.prettierrc.js chore: add .prettierrc.js with settings from "eslint-config-yoshi-bas… Aug 20, 2019
CHANGELOG-V3-V6.md docs(CHANGELOG): split into different files Sep 18, 2019
CHANGELOG.md Update CHANGELOG.md Oct 21, 2019
CONTRIBUTING.md docs: explain how to write drivers APIs and improve testing docs (#3504) Jun 2, 2019
LICENSE First version of the new wix-style-react. With Button, Checkbox, Input, Nov 14, 2016
README.md update v6 docs Sep 18, 2019
applitools.config.js fix(applitools.config.js): use original config (#4263) Oct 10, 2019
babel.config.js infra: Improve build process. Migrate to babel@7. (#2868) Feb 19, 2019
depmonkey.ignore chore: add depmonkey.ignore Dec 4, 2017
package.json Release/7.9.0 (#4353) Oct 21, 2019
perfer.config.js Modify perfer config and externalise some libraries for bundles analy… Oct 21, 2019
pom.xml Update pom.xml Jul 2, 2018
protractor.conf.js Separate storybook for e2e (#4187) Oct 21, 2019
protractor1.conf.js Separate storybook for e2e (#4187) Oct 21, 2019
protractor2.conf.js Separate storybook for e2e (#4187) Oct 21, 2019
tsconfig.declarations.json Add component type definitions (#1) (#3349) May 12, 2019
wallaby.js Run lint --fix Nov 26, 2018

README.md

Wix Style React

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

Docs | V6 Docs | Source

Installation

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

Usage

Requirements

  • Load Wix fonts from CDN
    <link rel="stylesheet" href="//static.parastorage.com/services/third-party/fonts/Helvetica/fontFace.css">
  • Enable font smoothing with browser specific css properties, for example:
    html {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

Example

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

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

Build Configuration 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. Use Yoshi as build tool to avoid configuration. Otherwise, you should configure it on your own.

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    
    const {StylableWebpackPlugin} = require('@stylable/webpack-plugin');
    //...
    {
      //...
      module: {
        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

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

Troubleshooting

Please refer to the Troubleshooting page

Contributing

Please refer to the Contributing page

License

This project is offered under MIT License.

You can’t perform that action at this time.