Skip to content
Common React UI components for all Wix verticals developing in React
JavaScript CSS Other
Branch: master
Clone or download
Latest commit ed53d4e Oct 23, 2019
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 FEATURE_REQUEST.md Oct 22, 2019
.storybook Separate storybook for e2e (#4187) Oct 21, 2019
.wuf <AutoCompleteWithLabel/> - create the component (#4052) Oct 22, 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 <SidebarSectionItem /> add prop alwaysDisplayChevron (#4379) Oct 23, 2019
stories Rearrange stories alphabetically (#4369) Oct 23, 2019
test-runtime/imports EllipsisHoc - universal hoc for components that need to shrink if pro… Oct 21, 2019
test <Calendar/> - Fix types (#4366) Oct 22, 2019
testkit <AutoCompleteWithLabel/> - create the component (#4052) Oct 22, 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 to version 7.10.0 (#4383) Oct 23, 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 restoring tests Oct 23, 2019
perfer.config.js Increase perfer thresholds} (#4372) Oct 22, 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.