Security News
TC39 Advances 10+ ECMAScript Proposals: Key Features to Watch
TC39 is meeting in Tokyo this week and they have approved nearly a dozen proposals to advance to the next stages.
@storybook/addon-docs
Advanced tools
The @storybook/addon-docs package is a Storybook addon that allows developers to write documentation alongside their stories. It uses MDX (Markdown with JSX) to let you document components in a rich, interactive way. It can generate documentation automatically based on your stories and supports a wide range of component frameworks.
MDX Documentation
Allows writing documentation using MDX, which can include both Markdown and JSX. You can define metadata, write narrative documentation, and showcase live examples and prop tables.
import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
<Meta title='MyComponent' />
# MyComponent
This is a **custom documentation** for `MyComponent`.
<Canvas>
<Story name='Basic' args={{ label: 'Hello World' }}>
{args => <MyComponent {...args} />}
</Story>
</Canvas>
<ArgsTable story='Basic' />
Automatic Props Table
Generates a table of the component's props automatically. This table includes the prop names, types, default values, and descriptions if they are specified in the component's propTypes or TypeScript definitions.
import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
<Meta title='MyComponent' />
<Story name='Basic'>
<MyComponent />
</Story>
<ArgsTable of={MyComponent} />
Embedding Stories
Allows embedding live Storybook stories within the documentation. This provides an interactive example of the component in use.
import { Meta, Story } from '@storybook/addon-docs/blocks';
<Meta title='MyComponent' />
<Story name='Basic'>
<MyComponent />
</Story>
React Styleguidist is a component development environment with a living style guide. It allows developers to document components with Markdown and showcase usage examples. It differs from @storybook/addon-docs in that it is a standalone tool rather than an addon to Storybook, and it focuses more on the style guide aspect.
Docz leverages MDX to allow developers to write documentation and demos for their components. It is similar to @storybook/addon-docs in its use of MDX, but it is a standalone documentation tool that provides its own UI and does not require Storybook.
Docusaurus is a static site generator that can be used to create documentation websites. It supports Markdown and MDX and can be used to document React components, but it is not specifically tied to component stories like @storybook/addon-docs. It is more general-purpose and can be used for a wide range of documentation needs.
Living documentation for your components.
Docs supports all view layers that Storybook supports except for React Native (currently). There are some view-layer specific features as well. This chart captures the current state of support
React | Vue | Angular | Polymer | Mithril | HTML | Marko | Svelte | Riot | Ember | Preact | |
---|---|---|---|---|---|---|---|---|---|---|---|
MDX stories | + | + | + | + | + | + | + | + | + | + | + |
Module stories | + | + | + | + | + | + | + | + | + | + | + |
Legacy stories | + | + | + | + | + | + | + | + | + | + | + |
Source * | + | + | + | + | + | + | + | + | + | + | + |
Notes / Info | + | + | + | + | + | + | + | + | + | + | + |
Props table | + | # | # | ||||||||
Docgen | + | # | # | ||||||||
Inline stories | + | # |
Notes:
#
denotes planned/WIP supportJS storiesOf
and MDX
stories. Typescript
and new module format
support is WIPFirst add the package. Make sure that the versions for your @storybook/*
packages match:
yarn add -D @storybook/addon-docs
The add the following line to your .storybook/presets.js
file:
module.exports = ['@storybook/addon-docs/react/preset'];
Finally, import your stories and MDX files in .storybook/config.js
:
import { load } from '@storybook/react';
// standard configuration here
// ...
// wherever your story files are located
load(require.context('../src', true, /\.stories\.js$/), module);
load(require.context('../src', true, /\.stories\.mdx$/), module);
Docs uses Storybook presets as a configuration shortcut. To configure "the long way", first register the addon in .storybook/addons.js
:
import '@storybook/addon-docs/register';
Then configure Storybook's webpack loader to understand MDX files in .storybook/webpack.config.js
:
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
module.exports = async ({ config }) => {
config.module.rules.push({
test: /\.mdx$/,
use: [
{
loader: 'babel-loader',
// may or may not need this line depending on your app's setup
plugins: ['@babel/plugin-transform-react-jsx'],
},
{
loader: '@mdx-js/loader',
options: {
compilers: [createCompiler({})],
},
},
],
});
return config;
};
FAQs
Document component usage and properties in Markdown
The npm package @storybook/addon-docs receives a total of 4,299,866 weekly downloads. As such, @storybook/addon-docs popularity was classified as popular.
We found that @storybook/addon-docs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39 is meeting in Tokyo this week and they have approved nearly a dozen proposals to advance to the next stages.
Security News
Our threat research team breaks down two malicious npm packages designed to exploit developer trust, steal your data, and destroy data on your machine.
Security News
A senior white house official is urging insurers to stop covering ransomware payments, indicating possible stricter regulations to deter cybercrime.