wix-style-react: A JavaScript repository from user-tony

A collection of React components that conform to Wix Style.

📦 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:

🚀 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 { InputTestkit } from 'wix-style-react/dist/testkit';

// 2. initialize
const inputDriver = InputTestkit({
  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.

user-tony/wix-style-react