docs & autodocs

43 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

prepareForInline function for Vue inline stories

Vue inline stories can be rendered inline using a prepareForInline function that converts Vue story content into React-renderable content. Example: addParameters({ docs: { prepareForInline: (storyFn, { args }) => { const Story = toReact(storyFn()); return <Story {...args} />; } } }). This allows stories to render inline either globally with docs.story.inline parameter or per-story using the inline prop on the Story doc block.

Show or hide code blocks in DocsPage

By default, code blocks under the Preview are collapsed and require clicking 'Show code' to reveal them. This can be changed in .storybook/preview.js by setting export const parameters = { docs: { canvas: { sourceState: 'shown' } } } to show all code blocks open by default.

DocsPage replaces addon-info

DocsPage is the successor to the addon-info addon. It provides sensible defaults and adds documentation to existing Storybook without requiring additional work. DocsPage improves upon addon-info by supporting all Storybook frameworks, generating better documentation for standalone docs sites, offering better configuration, and working with MDX for more control.

Remixing DocsPage with custom doc blocks

DocsPage can be rebuilt by defining a custom React component in the docs.page parameter. The component can use doc blocks like Title, Subtitle, Description, Primary, ArgsTable, and Stories in custom order, and interleave custom components to customize the auto-generated contents.

DocsPage is the default zero-config documentation

DocsPage is the default documentation automatically provided to all stories when the Storybook Docs addon is installed. It aggregates stories, text descriptions, docgen comments, props tables, and code examples into a single page for each component without requiring additional configuration.

DocsPage component parameter

DocsPage pulls information from many sources, with the component parameter being one of the main ones. The component parameter should be set in the default export of a story file using Component Story Format (CSF). It enables Storybook to extract the component's description and props. Example: export default { title: 'Path/to/Badge', component: Badge }

Disable DocsPage at multiple levels

DocsPage can be disabled by setting the docs.page parameter to null. This can be done globally in preview.js using addParameters({ docs: { page: null } }), at the component-level in the default export, or at the story-level in individual story parameters.

Main doc blocks available for remixing DocsPage

The main doc blocks available for remixing DocsPage are: Title, Subtitle, Description, Primary, ArgsTable, and Stories. These blocks can be imported from @storybook/addon-docs and used to rebuild DocsPage with custom ordering and interleaved custom components.

Inline stories vs iframe stories in docs

Stories in DocsPage are typically rendered within an iframe element, which provides clean context separation but requires explicit height configuration. The docs configuration supports inlineStories and prepareForInline options to remove stories from iframes. Setting inlineStories to true stops stories from being wrapped in iframes. The prepareForInline parameter accepts a function that transforms story content into something React can render. Vue inline stories are provided by default in the Vue docs config.

Docs addon hides addons panel

When the Docs addon is visible, it hides the addons panel. This is because all addons assume only one story is currently visible, but in docs there are potentially many stories visible at once.

Debugging MDX stories in Canvas

To debug MDX stories that render in docs but not as expected in Canvas, inspect the compiled JavaScript in browser dev tools. The MDX is compiled to JavaScript and can be found in the webpack dev server output under the `webpack > > . > path/to/your/stories` folder. The compiled code is in Component Story Format (CSF), which can be copied into a `.stories.js` file for lower-level debugging.

MDX story compilation example

An MDX story using `<Story name="solo story"><Button onClick={action('clicked')}>solo</Button></Story>` is compiled to Component Story Format (CSF) JavaScript that can be inspected and copied for debugging purposes.

MDX doc blocks available in Angular

In Angular MDX files, the following doc blocks are available: Meta, Story, and ArgsTable, imported from '@storybook/addon-docs'.

React dependency needed for MDX in Angular

MDX support for Angular documentation requires react as a peer dependency. Install it with: yarn add -D react

Install addon-docs for Angular documentation

Install @storybook/addon-docs package and add it to the addons array in .storybook/main.js with the entry '@storybook/addon-docs'. This enables DocsPage auto-generated documentation for all stories.

Compodoc integration for Angular props tables

Props tables for Angular components rely on Compodoc, an API documentation tool that supports inputs, outputs, properties, methods, and view/content child/children as first class prop types.

Automatic Compodoc setup during sb init

During sb init setup, you will be asked whether you want to setup Compodoc for your project. Answering yes automatically sets up Compodoc for use.

Manual Compodoc setup in preview.ts

To manually set up Compodoc, import setCompodocJson from '@storybook/addon-docs/angular' and the documentation.json file in .storybook/preview.ts, then call setCompodocJson(docJson) to register Compodoc's documentation.

Install @compodoc/compodoc package

Compodoc must be installed as a dev dependency using: yarn add -D @compodoc/compodoc

Configure Compodoc in angular.json

In angular.json, add compodoc: true and compodocArgs array to the storybook and build-storybook architect targets. The compodocArgs should include ['-e', 'json', '-d', '.'] to generate documentation.json in the project root. This creates metadata each time storybook runs.

Component field required in story metadata for props

To display props tables in Angular stories, the component field must be filled in the story metadata (default export), specifying the component class being documented.

MDX support for Angular documentation

MDX is supported for Angular documentation, allowing you to write stories in Markdown and embed documentation components like stories and props tables inline. MDX support requires react as a peer dependency.

Configure stories glob patterns to load MDX files

To load MDX files, update the stories array in .storybook/main.js to include MDX file patterns, such as: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)']

MDX Story element with template and props

In MDX files, the Story element accepts a name attribute and height attribute. The story body is an object with component, template, props, and moduleMetadata fields. The template field contains inline Angular template code.

MDX Meta with decorators for module metadata

In MDX Meta blocks, decorators can be applied using moduleMetadata to declare components needed for stories, with the syntax: decorators={[moduleMetadata({ declarations: [ComponentName] })]}

Default iframe height for Angular stories

Storybook Docs renders all Angular stories inside IFrames with a default height of 60px. This default can be overridden globally or per story.

Angular stories render inline by default in Docs

Storybook Docs renders all Angular stories inline by default. This can be changed using the docs.story.inline parameter.

Disable inline stories rendering in preview.js

To render Angular stories in an iframe instead of inline, set the global parameter in .storybook/preview.js: export const parameters = { docs: { story: { inline: false } } };. The iframe default height is 100px and is configurable using docs.story.iframeHeight.

Basic MDX story file structure

MDX files can contain Meta blocks for configuration and Story elements for embedding components. Example structure: <Meta title='App Component' /> followed by markdown content and <Story> elements.

Docs addon supports all web frameworks in Storybook

The Docs addon supports all web frameworks that Storybook supports, including React, Vue 3, Angular, Ember, and Web components, with framework-specific optimizations available for popular frameworks.

Install addon-docs for common framework setup

To add Storybook Docs to frameworks without framework-specific optimizations, install @storybook/addon-docs using yarn add -D @storybook/addon-docs. Ensure all @storybook/* package versions match.

Default iframe height for Docs stories

In the common setup, Storybook Docs renders stories inside iframes with a default height of 60px.

MDX requires react peer dependency

To write stories in MDX, the addon-docs has a peer dependency on react. Install react using yarn add -D react to enable MDX support.

DocsPage is automatically available after addon-docs installation

After installing the addon-docs package, DocsPage documentation is automatically available for all stories in the Docs tab of the Storybook UI.

MDX imports for documentation components

Import documentation components from @storybook/addon-docs when writing MDX: import { Meta, Story, ArgsTable } from '@storybook/addon-docs'

MDX example for Ember with Meta, Story, and ArgsTable

MDX files for Ember Storybook can import Meta, Story, and ArgsTable from '@storybook/addon-docs' and use hbs from 'ember-cli-htmlbars'. Example: import { Meta, Story, ArgsTable } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; <Meta title='App Component' component='AppComponent' /> <Story name='basic' height='400px'>{{ template: hbs`<AppComponent @title={{title}} />`, context: { title: "Title" }, }}</Story> <ArgsTable of='AppComponent' />

MDX support in Ember Storybook requires React peer dependency

To write stories in MDX format with Ember Storybook, install react as a development dependency with yarn add -D react.

Default iframe height for Ember stories in Docs is 60px

Storybook Docs renders all Ember stories inside iframes with a default height of 60px.

Set iframe height per story in DocsPage with story parameters

For DocsPage, modify iframe height locally in a story by setting story.parameters = { docs: { story: { iframeHeight: '400px' } } }

Set iframe height in MDX Story element with height attribute

In MDX files, modify iframe height by adding the height attribute to the Story element, for example: <Story name='basic' height='400px'>{...}</Story>

DocsPage automatic generation for Ember stories

When @storybook/addon-docs is installed, DocsPage documentation is automatically generated for all Ember stories and available in the Docs tab of the Storybook UI.

Enable ember-cli-storybook addon for props table extraction

To get Props tables for Ember components, add a configuration block in ember-cli-build.js to enable the @storybook/ember-cli-storybook addon. Set enableAddonDocsIntegration to true within the 'ember-cli-storybook' object.

ember-cli-storybook generates storybook-docgen JSON file

When enableAddonDocsIntegration is enabled, running the ember-cli server generates a JSON documentation file at /storybook-docgen/index.json. This file is regenerated every time component files are saved.

Give your agent this brain