A collection of React components that conform to Wix Style.

https://wix-style-react.now.sh/

📦 Install

npm install wix-style-react

yarn add wix-style-react

🔨 Setup

If 🐉yoshi build runner is used for your application then all required loaders are already defined. If you'd rather set up your project manually, take a look at our webpack guide.

Minimal Yoshi version to be used with wix-style-react:

Version 4 - ^4.1.0

Version 3 - ^3.31.2

Load Wix fonts from CDN:

• For Madefor font please visit wix-fonts.
• For Helvetica Neue:

  <link
    rel="stylesheet"
    href="//static.parastorage.com/services/third-party/fonts/Helvetica/fontFace.css"
  />

Enable font smoothing with browser specific css properties:

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Make sure that react and react-dom versions are not higher then:

  //package.json
 .
 .
 "react":"16.8.3",
 "react-dom":"16.8.3"
 .
 .

Upgrade from older versions

Read and follow our migration guides:

• From 7.x to 8.x read V8 migration guide
• From 6.x to 7.x read V7 migration guide
• From 5.x to 6.x read V6 migration guide
• From 4.x to 5.x read V5 migration guide

Older version Storybook:

• V7 Storybook
• V6 Storybook

🚀 Usage

import { Button } from 'wix-style-react';

const App = () => (
  <Button>
    Click me!
  </Button>
);

💫 Testkits

All our components are provided with testkits that help our users test them.

A component testkit provides an interface to the component, enabling automated tests to access component functions without needing to know precise details of the technology being used.

//  Here is an example

// 1. import
import { inputTestkitFactory } from 'wix-style-react/dist/testkit';

// 2. initialize
const inputDriver = inputTestkitFactory({
  wrapper: document.body,
  dataHook: 'name-input',
});

// 3. interact
it('test', async () => {
    await inputDriver.enterText('hello world');
    expect(await inputDriver.getText()).toBe('hello world');
});

All methods are documented in our storybook components stories and some can be viewed through typescript interface.

Our testkits currently support four major testing frameworks: react-jsdom, protractor, puppeteer and selenium. Read our testing guidelines

⌨️ Typescript

The library is javascript based but types are supported with d.ts files. You should get the types automatically when installing wix-style-react. For any issues, check out our types FAQ

🤝 Contributing

We welcome contributions to Wix-Style-React!

Read our contributing guide and help us build or improve our components.

📝 License

This project is offered under MIT License.