Storybook is the most popular UI component explorer! This is the website for https://storybook.js.org/.
Note: This is not the docs, those are located here.
Contributions welcome! If itβs something small like grammar or punctuation, open up a pull request. If itβs a bigger change or new feature, add an issue for discussion.
Workflow
- Feature idea or bugfix?
- Build new UI or tweak existing UI in Storybook first
- Integrate with Gatsby
- Ensure tests pass in Circle CI storybooks/frontpage
- Ensure site works and is QAed via Netlify previews
- Ensure no visual bugs in Chromatic storybooks/frontpage
- Pull request
The Storybook for Storybook contains every UI component. The UI is built following Component-Driven Development, a process that builds UIs from the βbottom upβ starting with components and ending with screens. That means contributors should compose UIs in Storybook before integration with the Gatsby app.
- yarn install
- yarn build
- yarn run storybook
Gatsby is used for basic routing and static site generation.
-
yarn start
to run the entire site -
yarn start:skip-addons
to skip building the addon catalog
The content for the documentation section is in the docs/
subdirectory of the Storybook monorepo: https://github.com/storybookjs/storybook/tree/next/docs.
To run this app while editing those files, checkout both this repository and the monorepo, and link them from this app:
yarn link-monorepo-docs path/to/monorepo
Alternatively, if you just want to serve the current content, run:
yarn extract-monorepo-docs $branch
Release notes are stored in the src/content/releases directory as .md
files. The name of the file corresponds with the version (major.minor) of the release and will be used to populate the link to the specific release from the releases page.
Within the release's .md
file, frontmatter is used to create a page title, while the rest of the content is parsed using gatsby-transformer-remark
and styled with selectors in src/styles/formatting.js
.
Search within the docs is powered by DocSearch. In order for this to work, an environment variable is required:
GATSBY_ALGOLIA_API_KEY
In development and with local production builds, that environment variable can be configured with .env
files as explaned here. The GATSBY_
prefix ensures that the variable is available in client-side code.
How to setup on your machine:
- Create a .env.development file locally
- Get the key here: https://app.netlify.com/sites/storybook-frontpage/settings/deploys#environment
- Add
GATSBY_ALGOLIA_API_KEY=key
to the file from step 1
In deploy previews and production deploys, that variable is set with Netlify's build variables.
The site is crawled every 24 hours so any updates will be reflected in that amount of time.
This project uses these tools to make our job easier.
π« Deploys by Netlify
Master and branches are automatically deployed by Netlify every commit.
πΌ Visual testing by Chromatic
All stories in the Storybook are automatically visual tested on desktop and mobile each commit. Ensure all baselines are β accepted before merging.
π¦ Continuous integration by Circle CI
Every build a test suite runs. Ensure there are no errors before merging.