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?

wix-style-react

A Kit of reusable, Interconnected React components that conform to the UX Backoffice Design System

https://wix-wix-style-react.surge.sh

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)

History and statistics

• ~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

Basic Building Blocks

inputs, selection, buttons...

Notifications

notifications, helpers, modals

Data and Content

 

Table

Grid System

12 column Grid with Cards

Page Layout

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

Guineapig

https://bo.wix.com/petri

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

Start here

FAQ

1.  controlled pattern (value + onChange)
   1. read more here
2. render prop
   1. read more here
3. import, export, default, *, named
   1. read more here
4. conditional render (if ? then : else)
   1. read more here

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

 

 

<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>
);

read more here

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;

 

 

See full API here

Task - Create a form page

Zeplin Specs | Demo

Suggested steps

 

1. Create the layout first
2. Place all From components in place
3. 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 Container is applied on the entire Page

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

Here

Thank you!