wix-style-react
FED for BED
About Me 🙋♂️
Shlomi Toussia-Cohen
FED
3 years in Wix
<UI Infra/> Team Leader
Formerly a Guild Master
Kickstart 4.0 FED Course Manager
🏍 ⛷ 😴
Agenda
- The Team
- What are component libraries?
- wix-style-react introduction
- Learn the basics
- Tips and Tricks
- Create an app using wix-style-react
The <UI Infra/> group
Our Misson:
Build components and empower others, in order to improve dev velocity and maintain standards
(React) Components Libraries
A cloud-based folder that consists of all the designed/styled parts of a website or piece of software. (aka NPM module)
Why do we need component libraries?
- Prevent repeated development
- Keep consistent designs and behavior
- Accessibility
- Create new products fast
wix-style-react
A Kit of reusable, Interconnected React components that conform to the UX Backoffice Design System
Slack: #wix-style-react
wix-style-react
Our design system offers
Visual style, accessible UI components, UX patterns
Released as
React components via npm and Sketch symbols
Documented at
https://wix-wix-style-react.surge.sh
Produced by
A system team and community contributors
In order to serve
Wix dashboard and complimentary products (tens of products)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/554796/images/6178478/pasted-from-clipboard.png)
History and statistics
![](https://s3.amazonaws.com/media-p.slid.es/uploads/554796/images/4573767/pasted-from-clipboard.png)
- ~80 components
- > 3000 commits
- > 3000 PRs
- ~200 contributors
- >4000 releases
-
1. Foundation
-
2. Layout
-
3. Inputs
-
4. Selection
-
5. Buttons
-
6. Navigation
-
7. Tooltips
-
8. Notification Bars
-
9. Modals
-
10. Tables
Components Families
Typography
heading, text
![](https://s3.amazonaws.com/media-p.slid.es/uploads/554796/images/5633174/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/554796/images/5633175/pasted-from-clipboard.png)
Basic Building Blocks
inputs, selection, buttons...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/554796/images/6178522/pasted-from-clipboard.png)
Notifications
notifications, helpers, modals
![](https://s3.amazonaws.com/media-p.slid.es/uploads/554796/images/6178552/pasted-from-clipboard.png)
Data and Content
Table
![](https://s3.amazonaws.com/media-p.slid.es/uploads/554796/images/6178588/pasted-from-clipboard.png)
Grid System
12 column Grid with Cards
![](https://s3.amazonaws.com/media-p.slid.es/uploads/554796/images/5633173/pasted-from-clipboard.png)
Page Layout
![](https://s3.amazonaws.com/media-p.slid.es/uploads/554796/images/6178596/pasted-from-clipboard.png)
Testing
- Components are throughly tested (functionality and visual)
- The library supplies Testkit drivers for the consumers of the components to interact with
Documentation
Real use cases
Business Manager
![](https://s3.amazonaws.com/media-p.slid.es/uploads/554796/images/6128044/pasted-from-clipboard.png)
Guineapig
![](https://s3.amazonaws.com/media-p.slid.es/uploads/554796/images/4678280/pasted-from-clipboard.png)
Start a FED project in Wix like a boss
FED-Handbook
your one stop shop for all FED projects
https://github.com/wix-private/fed-handbook
- Installations guide
- Generate a new project
- Deploy to production
- Conduct experiments
- Debugging
- ...
Slack: #fed-infra
Getting Started Tutorial
FAQ
How to import
Cherrypicking (most of the components)
import Button from 'wix-style-react/Button';
Named exported components (few components)
import {Container, Row, Col} from 'wix-style-react/Grid';
Compound components
import Card from 'wix-style-react/Card';
render(<Card.Header/>)
Tree-shakable (works, but we don't suggest it yet on our docs)
import {Button, Row, Card} from 'wix-style-react';
UX Tip
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/554796/images/5637536/pasted-from-clipboard.png)
<Box/> component for the rescue!
Typography
Text typographies are predefined in the following components
<Text/>
<Heading/>
Find out more about these components here
Custom CSS
Create custom CSS Using SCSS and CSSModules
import styles from './App.scss'; ... const App = () => ( <div className={styles.root}></div> );
Asynchronous API
making asynchronous network requests in the wix stack
import axios from 'axios'; const res = await axios.get('/my-endpoint'); const data = res.data;
Task - Create a form page
![](https://s3.amazonaws.com/media-p.slid.es/uploads/554796/images/5640720/pasted-from-clipboard.png)
Suggested steps
- Create the layout first
- Place all From components in place
- Implement clear submit logic
Components to look for
In the header
1. Page (a bit tricky)
2. Button
In the content
1. Grid
2. Card
3. FormField
4. Input
5. InputArea
6. Dropdown
7. Checkbox
8. Text
Pitfalls
1. Make sure
2. Page need an extra custom div (with sizes) on top of it
3. Create the margins between the buttons with some span.
4. Make sure you're familiar with the Controlled/Uncontrolled pattern
Bonus: add a server api
making asynchronous network requests in the wix stack
/** src/server.js */ const colors = [ { id: 'Red', value: 'Red' }, ]; app.get('/colors', (req, res) => { res.send(colors); });
Solution
Thank you!
WSR for BED
By Shlomi Toussia Cohen
WSR for BED
- 605