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

github.com/storybookjs/design-system

Package Overview

Dependencies

Alerts

File Explorer

Install Socket

Detect and block malicious and high-risk dependencies

Install

github.com/storybookjs/design-system

v7.15.16+incompatible
Source
Go

Version published: 12 months ago

Created: 6 years ago

Source

Storybook Design System

Used by

Note: this design system is not used in Storybook's UI. The stack is different and theming requirements of Storybook add complexity beyond the scope of this project. However, Storybook's visual design is identical to what's here.

Tech stack

Building components

📚 Storybook for UI component development and auto-generated docs
👩‍🎤 Storybook theming | for component-scoped styling
⚛️ React declarative component-centric UI

Maintaining the system

📦 NPM for packaging and distribution
✅ Chromatic to prevent UI bugs in components (by Storybook maintainers)
🚥 CircleCI Continuous integration

Why

The Storybook design system codifies existing UI components into a central, well-maintained repository. It is built to address having to paste the same components into multiple projects again and again. This simplifies building UI's with Storybook's design patterns.

What we're doing

Build and maintain a design system in the open
Share UI components between multiple apps
Dogfood upcoming Storybook features
Welcome contributors of all levels and backgrounds

What we're not doing

Rewrite all new components from scratch
Overhaul the visual design of components
Typescript (the consumer apps don't use it)
Compete with more general design systems like ANT or Material.

Install

npm install --save @storybook/design-system

Global Styles

Components within the design system assume that a set of global styles have been configured. Depending upon the needs of the application, this can be done several ways:

Option 1: Render the `GlobalStyle` component

Useful when you don't need any custom body styling in the application, typically this would be placed in a layout component that wraps all pages, or a top-level App component.

import { global } from '@storybook/design-system';
const { GlobalStyle } = global;

/* Render the global styles once per page */
<GlobalStyle />

Option 2: Use the `bodyStyles` to apply styling

Useful when you want build upon the shared global styling.

import { Global, css } from '@storybook/theming';
import { global } from '@storybook/design-system';
const { bodyStyles } = global;

const customGlobalStyle = css`
  body {
    ${bodyStyles}// Custom body styling for the app
  }
`;

const CustomGlobalStyle = () => <Global styles={customGlobalStyle} />;

/* Render the global styles once per page */
<CustomGlobalStyle />

Font Loading

Rather than @import fonts in the GlobalStyle component, the design system's font URL is exported with the intention of using it in a <link> tag as the href. Different frameworks and environments handle component re-renders in their own way (a re-render would cause the font to be re-fetched), so this approach allows the design system consumers to choose the font loading method that is most appropriate for their environment.

Option 1: Build the link tag manually

import { global } from '@storybook/design-system';

const fontLink = document.createElement('link');

fontLink.href = global.fontUrl;
fontLink.rel = 'stylesheet';

document.head.appendChild(fontLink);

Option 2: Render the link tag in a component

import React from 'react';
import { global } from '@storybook/design-system';

const Layout = ({ children }) => (
  <html>
    <head>
      <link href={global.fontUrl} rel="stylesheet" />
    </head>

    <body>{children}</body>
  </html>
);

export default Layout;

Development Scripts

`yarn release`

Bump the version

Push a release to GitHub and npm

Push a changelog to GitHub

Notes:

Requires authentication with npm adduser
auto is used to generate a changelog and push it to GitHub. In order for this to work correctly, environment variables called GH_TOKEN and NPM_TOKEN are needed that reference a GitHub personal access token and a NPM "Publish" token with the appropriate permissions to update the repo.

License

MIT © shilman

FAQs

What is github.com/storybookjs/design-system?

Package last updated on 22 Dec 2023

Did you know?

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

github.com/storybookjs/design-system

Storybook Design System

Used by

Tech stack

Why

What we're doing

What we're not doing

Install

Global Styles

Option 1: Render the GlobalStyle component

Option 2: Use the bodyStyles to apply styling

Font Loading

Option 1: Build the link tag manually

Option 2: Render the link tag in a component

Development Scripts

yarn release

License

Related posts

Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft

Weekly Downloads Now Available in npm Package Search Results

Option 1: Render the `GlobalStyle` component

Option 2: Use the `bodyStyles` to apply styling

`yarn release`