wix-style-react

A collection of React components that conform to Wix Style.

https://wix-style-react.com

Support Channel: #wix-style-react

📦 Install

npm install wix-style-react

yarn add wix-style-react

🔨 Setup

wix-style-react is built with Stylable, therefore we recommend you build your project using a Stylable compatible template in order to save some configurations. Take a look at our usage guide Create Stylable App to create a new Stylable project from a boilerplate.

Requirements

wix-style-react requires react version 16.14.0 and up.
For typescript users version ^3.9.7 is required.

Browsers support

• Google Chrome (version 92 and above)
• Safari for Mac (version 14 and above)
• Microsoft Edge (version 100 and above)
• Firefox (version 91 and above)

Setting up your app

All wix-style-rect applications start with a WixStyleReactProvider. The Provider injects MadeFor font and enables font smoothing.

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

const App = () => (
  <WixStyleReactProvider>
    <Button>Hello World!</Button>
  </WixStyleReactProvider>
);

💫 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.

🙋 Support

Check out our support guide

📝 License

This project is offered under MIT License.