goodwin64 / wix-style-react

A collection of React components that conform to Wix Style.

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:

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

wix-style-react v6.x migration note:

If you're using wix-style-react 6.x and want to shift to 7.x version then read our migration guide.

Previous version documentation: https://wix-wix-style-react-v6.surge.sh/

🚀 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
await inputDriver.enterText('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. Not all components have types defined, but it is ongoing process to make it so.

Additional type interfaces are added in a separate repo called: wsr-types in order not to break our existing users. Read more on the repo description: https://github.com/wix/wix-ui/tree/master/packages/wsr-types

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