@stoplight/mosaic v1.53.1
Mosaic 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 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 main library size. Target GZIP bundle size less than 150kb, including CSS
- Core icons are included with the bundle, but consuming libraries can easily load in their own icons
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>
);
};
Playground
Visit http://localhost:4200
after starting. Most of the components in the left sidebar are semi-transparent - these
are placeholders for future work.
# 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 applicationlibs/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
9 days ago
9 days ago
9 days ago
1 month ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
7 months ago
7 months ago
7 months ago
6 months ago
7 months ago
6 months ago
10 months ago
6 months ago
5 months ago
8 months ago
8 months ago
8 months ago
5 months ago
11 months ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago