@storybook/docs-tools

What is @storybook/docs-tools?

The @storybook/docs-tools package is a part of the Storybook ecosystem, designed to enhance the documentation capabilities within Storybook. It provides tools and utilities to help developers create better documentation for their UI components, integrating seamlessly with Storybook's UI component development environment.

What are @storybook/docs-tools's main functionalities?

MDX Support

Enables writing documentation using MDX (Markdown for JSX), which allows for rich and interactive documentation. This feature lets you embed live examples and props tables directly in your markdown files.

import { Meta, Story, ArgsTable, Primary } from '@storybook/addon-docs/blocks';
<Meta title='Your Component Title' />
<Story name='Default View' height='400px'>
  <YourComponent />
</Story>
<ArgsTable of={YourComponent} />

Component Props Table

Automatically generates and displays a table of properties (props) for your components. This is useful for documenting the different props that can be used with a component, including types, default values, and descriptions.

import { ArgsTable } from '@storybook/addon-docs/blocks';
<ArgsTable of={YourComponent} />

Custom Doc Blocks

Allows the creation of custom documentation blocks within MDX files, enabling more structured and styled documentation. This feature supports various blocks like Title, Subtitle, Description, and more.

import { Title, Subtitle, Description, Primary } from '@storybook/addon-docs/blocks';
<Title>My Custom Component</Title>
<Subtitle>Component Subtitle</Subtitle>
<Description>{`This is a detailed description of the custom component.`}</Description>
<Primary>/* Render your component here */</Primary>

Other packages similar to @storybook/docs-tools

react-docgen

React Docgen automatically parses React component files to extract prop types and descriptions. It's similar to @storybook/docs-tools in that it helps generate documentation for components, but it does not integrate directly with Storybook or support MDX.

docusaurus

Docusaurus is a static site generator that can be used for creating project documentation. Unlike @storybook/docs-tools, which is specifically tailored for Storybook and UI components, Docusaurus provides a more general approach to documentation across different frameworks and libraries.

README

Storybook Docs Utils

Shared utility functions for frameworks to implement docs:

• ArgType extraction
• Dynamic snippet generation
• Is the user using docs or controls?

This library is used by most framework packages so it and its dependencies should be minimized

Changelog

7.0.0-alpha.30 (September 6, 2022)

Bug Fixes

• CLI: Fix include rendererAssets in npm bundle #19115

Maintenance

• CLI: remove outdated comment in Angular starter #19097

Dependency Upgrades

• Remove deprecated stable dependency #19103
• Svelte: Update sveltedoc dependencies #19111
• Deps: Remove core-js from most packages #19098
• Deps: Upgrade react-element-to-jsx-string and react-inspector for React 18 #19104