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.
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
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.
- 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
- 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.
npm install --save @storybook/design-systemComponents 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:
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 />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 />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.
import { global } from '@storybook/design-system';
const fontLink = document.createElement('link');
fontLink.href = global.fontUrl;
fontLink.rel = 'stylesheet';
document.head.appendChild(fontLink);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;Bump the version
Push a release to GitHub and npm
Push a changelog to GitHub
Notes:
- Requires authentication with
npm adduser autois used to generate a changelog and push it to GitHub. In order for this to work correctly, environment variables calledGH_TOKENandNPM_TOKENare needed that reference a GitHub personal access token and a NPM "Publish" token with the appropriate permissions to update the repo.
MIT © shilman