@stoplight/mosaic

Stoplight Design System

!WIP! :)

Features

• Theme-able at runtime
• Good dx during development, typed throughout
• Good dx in browser devtools
• Supports SSR
• Scoped classes, won't clash with existing styles if embedded into existing site
• Downstream consumers do not have to separately manage CSS build pipline (css is included in JS bundle)
• "Invert-able" component theme. E.g. a "dark" panel can be rendered in context of "light" rest of screen
• Great accessibility
• Sane main library size. Target GZIP bundle size less than 150kb, including CSS
• Core icons are included with the bundle

Primary Deps

• React
• Tailwind CSS
• Font awesome for icons
• NX for repo management

Getting Started

Intall deps: yarn

Run dev playground:

# In terminal 1
yarn start playground

# In terminal 2
yarn start playground-api

Building

All: yarn build --prod

Lib: yarn build blocks --prod --with-deps

Built apps and libs are put in the dist folder.

We suggest using yalc to pull into downstream packages until this package is more stable.

Bundle Size

Bundle size is important. Run yarn size-limit after yarn build --prod to check end user bundle size for the libraries. Run yarn size-limit --why to open webpack visualizer for the libraries.

Important Files

• libs/core/src/componets/Icon/index.ts: The icons that are bundled with the library. Other icons can be used by loading font awesome in the consuming application
• libs/core/src/theme.css: Css variables for the built in themes (light, dark)
• libs/core/tailwind.config.js: Primary tailwind config, important!
• libs/core/src/utils/*: Utility functions that translate react props -> tailwind classes

Generating

See NX_README.md for more details on nx commands.

New Library

Change --importPath to the appropriate package name.

yarn nx g @nrwl/react:library --publishable --importPath @stoplight/mosaic --buildable

New App

Change the final argument to the appropriate app name.

yarn nx generate @nrwl/express:application playground-api