🧱 Storybook Doc Blocks customization cheatsheet
Recently, I’ve been digging into Storybook and the design system ecosystem 🤩 This article is a summary and cheatsheet of my personal notes related with Storybook autodocs and doc blocks customization.
🤔 How to customize doc blocks according to its scope
We can define parameters at the component (or meta) level or at the story level. This flexibility allows us to customize Doc Blocks exactly as we need, at the desired scope.
🧱 Customizable blocks
🎨 Styles
ColorPalette
Documentation of all color-related items used throughout the project.
Full API docs: https://storybook.js.org/docs/api/doc-block-colorpalette
IconGallery
Documentation of the icons library used on the project.
Full API docs: https://storybook.js.org/docs/api/doc-block-icongallery
Typeset
The Typeset block helps document the fonts used throughout your project.
Full API docs: https://storybook.js.org/docs/api/doc-block-typeset
Unstyled
The Unstyled block is a unique block that disables Storybook's default styling in MDX docs wherever it is added.
Full API docs: https://storybook.js.org/docs/api/doc-block-unstyled
⚛ Atoms
🟣 Headings & information related
Title
Full API docs: https://storybook.js.org/docs/api/doc-block-title
Subtitle
Full API docs: https://storybook.js.org/docs/api/doc-block-subtitle
Description
Full API docs: https://storybook.js.org/docs/api/doc-block-description
🟣 Component interface related
ArgTypes
Component documentation interface with a static table of arg types.
Full API link: https://storybook.js.org/docs/api/arg-types
Controls
Component documentation interface with a dynamic table of arg types. We can play with the args controls.
Full API link: https://storybook.js.org/docs/api/doc-block-controls
☝️ This API configures Controls blocks used within docs pages.
- To configure the Controls addon panel, see the Controls addon docs.
- To configure individual controls, you can specify argTypes for each.
🔗 All the available options for Controls API
We can define argTypes as well as args on the story level or on the default meta stories definition level.
For example, the arg property label for a button. If it always has the same text, it can be defined once on the stories button file meta definition instead of on each button story.
🟣 Stories feature related
Stories
The Stories block renders the full collection of stories in a stories file.
Full API link: https://storybook.js.org/docs/api/doc-block-stories
Primary
The Primary block displays the primary (first defined in the stories file) story in a Story block. It is typically rendered immediately under the title in a docs entry.
Full API link: https://storybook.js.org/docs/api/doc-block-primary
Story
Stories (component tests) are Storybook’s fundamental building blocks.
Full API link: https://storybook.js.org/docs/api/doc-block-story
Canvas
Wrapper around a Story, featuring a toolbar that allows you to interact with its content while automatically providing the required Source snippets.
Full API link: https://storybook.js.org/docs/api/doc-block-canvas
🟣 Extra features
Markdown
The Markdown block allows you to import and include plain markdown in your MDX files.
Full API link: https://storybook.js.org/docs/api/doc-block-markdown
Source
The Source block is used to render a snippet of source code directly.
Full API link: https://storybook.js.org/docs/api/doc-block-source
Meta
The Meta block is used to attach a custom MDX docs page alongside a component’s list of stories. The Meta block doesn’t render anything visible.
Just for .mdx files.
Full API link: https://storybook.js.org/docs/api/doc-block-meta
useOf
Make your own doc blocks: Storybook also provides a useOf hook to make it easier to create your own blocks that function like the built-in blocks.
Full API link: https://storybook.js.org/docs/api/doc-block-useof
Source
