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
- 💅 Styled-components 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-systemUsage
import React, { Component } from 'react';
import MyComponent from '@storybook/design-system';
class Example extends Component {
render() {
return <MyComponent />;
}
}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 autois used to generate a changelog and push it to GitHub. In order for this to work correctly, an environment variable calledGH_TOKENis needed that references a GitHub personal access token with the appropriate permissions to update the repo.
License
MIT © shilman