wix-style-react
wix-ui

Current status and future plans

The Team

Arijus

Shlomi

Lior

Erez

Ben

(60%)

Domas

Tel-Aviv

Vilnius

3 developer, 1 TL, 2UX

Topics

• wix-style-react current status
• wix-ui component library
• Open questions to discuss

wix-style-react

A collection of React components that conform to the UX design system

History

• Created on 14.11.2016
• First components taken from Restaurants
• Next components built as part of Guineapig 2 (FED infra team)
• More components created during Guild Weeks

Statistics

• 60 components              (30)
• 1702 commits               (478)
• 1418 PRs                        (104)
• 130 contributors
• 4300 releases

Today                             (1 year ago)

Our Users

• Business Manager
• Media Platform
• Premium

What the library offers

Button

Auto Complete

Tooltip

Notification Bars

Common Components

Complex Components

Data Table

Complex Components

n-level drill Side Menu

Complex Components

Page Header

Testing

• Throughly tested
  (component tests + E2E + visual comparison)
   
• Supplies Testkit drivers for the users
  (component + browser)

Documentation

AutoDocs

Storybook structure according to Zeplin

https://zpl.io/bAAgN8x

Next Tasks

Backlog

• More than 100 issues in the backlog
  1. Bug fixes
  2. Missing features
  3. Code refactor
  4. Documentation improvement
  5. Infrastructure tasks

New components

• Forms
• Advanced Data Table
• Thumbnails Picker
• Global Helper
• Badge Group
• Modals layouts
• Editable Selectors
• Empty States
• Premium Cards
• Onboard Flow

Audits

• Make an audit for each company's projects
• Get feedback regarding existing components
• Add new components to the design system
• Prioritize tasks

Main Challenges

• Support users requests and demands
• UX Gap between companies and design system
  • developers make CSS hacks in their code
  • developers create components only for their apps
• Low contribution rate to the library
• Maintaining the library and keep growing

wix-ui

Create a single UI component library for all Wix needs

wix-ui-core

• Common layer for reusable components
• Written in Typescript
• Themable components, powered by Stylable

wix-ui-core

wix-ui-backoffice

wix-ui-santa

wix-ui-tpa

wix-ui-adi

• Answers
• DeviantArt
• ...

wix-ui-editor

Themes created during GW

wix-ui-tpa

wix-ui-adi

Adding components to wix-ui-core

1. Reuse existing components from existing libraries:
   1. wix-style-react
   2. stylable-components
   3. base-ui
       
2. Create new only if missing or none of the implementations suffice
    
3. Go through strict code review

Migration path, gradual process, backward compatibility

wix-style-react

wix-ui-backoffice

wix-ui-core

Users' projects

create the core component

create a theme for the component according to UX design

proxy the WUB component

(proxy / create an adapter / release major version with breaking changes)

Main Challenges

1. Technical difficulties:
   1. stylable integration
   2. missing knowledge in TypeScript
   3. documentation tools doesn't fully support wix-ui
2. PRs are much more strict as components use Santa as well as other libraries
3. Taking the right decisions for architecture
4. Supervising and mentoring new libraries

Open Questions

1. Who owns each library?
   The component infra team vs. many teams (core3, adi)
    
2. UX and product relation with the group
   Are they part of the library effort? or just interacting with the UX guild based on need?
    
3. Operations - who can help to gather requirements and needs? make audits to teams, prioritize companies needs.
    
4. Association - is the team part of the FED Guild? is it a new company?