Moshe Kerbel
FED
2 years in Wix
<Components/>
React Components
for Developers
Write React Application
Editor Elements
for Wix Users
Create a Wix site
tl;dr - Quality, Consistency and Velocity
A Kit of reusable, Interconnected React components that conform to the UX Backoffice Design System
Our design system offers
Visual style, accessible UI components, UX patterns
Released as
React components via npm and Sketch symbols
Documented at
https://wix-style-react.com
Produced by
A system team and community contributors
In order to serve
Wix dashboard and complimentary products (tens of products)
1. Foundation
2. Layout
3. Inputs
4. Selection
5. Buttons
6. Navigation
7. Tooltips
8. Notification Bars
9. Modals
10. Tables
11. Other
12. Content Widgets
heading, text
inputs, selection, buttons...
notifications, helpers, modals
Table
12 column Grid with Cards
Learn about:
- Layout
- Cards
- Basic inputs
Single Entry (Tree-shakable)
import {Button, Layout, Card} from 'wix-style-react';
Compound components
import {Card} from 'wix-style-react';
render(<Card.Header/>)
Use Page and Grid of Cards for consistent UI layouts
Confused about all the layout possibilities?
This doc will help you
Not everything sits on the outer Grid components
However, the design system is 6px based system
Need to space two items? use margins
6px 12px 18px
6*1px 6*2px 6*3px
<Box/> component for the rescue!
But that's not enough...
Which component is 5.1 Button - Medium?
5.1 Button Medium is <Button size="medium"/> !
<Page/>
<Page.Header/>
<Breadcrumbs/> <PopoverMenu/> <Button/>
<Layout/>
<Cell/>
<Card/>
<Card.Header/>
<Card.Content/>
<FormField/>
<Input/>
Zeplin Specs (App, Web) | Exercise and Solution | Demo
Drivers are Interfaces to interact with the component in a testing environment
Without Driver
document.querySelector('#email').value = 'my-email@wix.com';
document.querySelector('#passowrd').value = '12345';
document.querySelector('#submit-button').click();
With driver
const driver = new SignUpDriver();
driver.typeEmail('my-email@wix.com')
driver.typePasword('12345')
driver.submitFrom();
Example:
Select the 3rd item from a dropdown list:
Bad:
- click()
- pressKeyDown()
- pressKeyDown()
- pressKeyDown()
- pressKey('Enter')
Good:
- selectOption(index)
More Examples:
- getValue()
- isDisabled()
- getSelectedId()
<Input dataHook="my-input"/>
const inputDriver = inputTestkitFactory({
wrapper: baseElement,
dataHook: 'my-input',
});
Use the driver to interact with the component
await inputDriver.enterText('hello world');
We support enzyme Puppeteer and dom
import { inputTestkit } from 'wix-style-react/dist/testkit/enzyme';
import { inputTestkit } from 'wix-style-react/dist/testkit/puppeteer';
import { inputTestkit } from 'wix-style-react/dist/testkit'
This wide platform support is achieved using Unidriver
Driver functions are asynchronous
await buttonDriver.isButtonDisabled();
Some drivers return other drivers
const {driver, inputDriver} = dropdownTestkitFactory({
wrapper: baseElement,
dataHook: 'my-dropdown',
});
Some testkit docs might be missing in the storybook - See the actual implementation in the source code
Test using vanilla drivers (in JSDOM env)
You can fork wsr-form and use the "for-tests branch"
🙆♀️ 🙆♂️
For UX issues or requests, ask your UX guy to fill this form:
https://docs.google.com/forms/d/e/1FAIpQLSfmdWT7dZDq2joLArVYeKSLYa2P9OkpwLJ-59OMsw6uphgjMA/viewform
For React components issues and discussions:
slack: #wix-style-react
The Editor panels components and controls
The ADI panels components and controls
TPAs and Out-of-Iframe components
The ecosystem for integrating React components to Wix Editor/Viewer/Corvid
✍🏻 Design
🤔 Code
💪🏻 Use
Team, components, workflow, contribution...
Shlomi Toussia-Cohen
FED
5 years in Wix
<Components/> R&D Manager
Formerly a Guild Master
Kickstart 4.0 FED Course Manager