Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@stoplight/mosaic

Package Overview
Dependencies
Maintainers
23
Versions
193
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@stoplight/mosaic

!WIP! :)

  • 1.0.0-beta.1
  • npm
  • Socket score

Version published
Weekly downloads
40K
increased by24.63%
Maintainers
23
Weekly downloads
 
Created
Source

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

FAQs

Package last updated on 13 Nov 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc