UI components for the Storybook marketing, docs, addons, blog and showcase sites.
Note: these components are not used in Storybook's UI.
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
npm install --save @storybook/components-marketingInstall peer dependencies:
npm install --save @docsearch/css @storybook/theming framer-motion@7.0.0The page header comprises of three parts: Eyerbrow, Nav, and SubNav
Eyebrow, Nav, and Footer usually live at the shared layout level whereas the SubNav is specific to each page. The SubNav can be configured in several different ways, check out its stories file for examples.
All these components support an inverse variant.
Source shared DX data from https://storybook-dx.netlify.app/.netlify/functions/dx-data
- Eyerbrow requires
latestPost - Footer requires
subscriberCount
The Nav and Footer links are configured via the LinksContextProvider. It comes with a default set of links
https://storybook-dx.netlify.app/.netlify/functions/dx-data
Eyebrow contains a Search component which depends on @docsearch/css. You need to load these styles in your app, probably at the top-most, global, level:
import '@docsearch/css';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 © storybookjs