@stoplight/mosaic

Mosaic Design System

!WIP! :)

Much of the foundational architecture is in place, but only a few components are ready for use.

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 when embedded into 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 core library size. Target GZIP bundle size less than 50kb, including CSS
• Core icons are included with the bundle, no need for consumers to manage separate font awesome css / loading. That said, other font awesome icons can easily be used by loading a kit or the css in context of consuming application.

Primary Deps

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

Getting Started

Intall deps: yarn

Basic Usage

Just import and use. No context providers or wrapping components required.

import { Box, Button } from '@stoplight/mosaic';

const MyComponent = () => {
  return (
    <Box>
      <Button appearance="primary" onClick={() => alert('hello')}>
        Click Me
      </Button>
    </Box>
  );
};

Currently there are 4 packages managed in this repository:

• @stoplight/mosaic: The core components - think button, input, panel, etc.
• @stoplight/mosaic-code-viewer: Read only code viewer component.
• @stoplight/mosaic-code-editor: Simple code editor component.
• @stoplight/mosaic-live-code: Code editor component with react live for previewing.

Playground

Visit http://localhost:4200 after starting. Most of the components in the left sidebar are semi-transparent - these are placeholders for future work.

See the Try It article in the playground for a pretty comprehensive example.

# In terminal 1
yarn start playground

# In terminal 2
yarn start playground-api

Building

All libraries: yarn build:libs

Specific lib: yarn build core --prod --with-deps

Built apps and libs are put in the dist folder.

Bundle Size

Bundle size is important. Run yarn size-limit after yarn build:libs 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