DEV Community

Cover image for How to document components with storybook
Chafroud Tarek
Chafroud Tarek

Posted on

3

How to document components with storybook

After covering the setup process for Storybook, let's move on to the next topic: documenting components using this tool.

So first, we need to set up the paths from which Storybook will learn the files. In my case, I'm using the following setup:

▶️ .storybook/main.js

stories: [
// '../stories/**/*.mdx',
// '../stories/**/*.stories.@(js|jsx|ts|tsx)'
'../components/**/*.mdx',
//this the main part for learn stories from components folder
'../components/**/*.stories.@(js|jsx|ts|tsx)',
'../app/**/*.stories.@(js|jsx|ts|tsx)',
],

by the way .mdx : for writing structured documentation and composing it with interactive JSX elements.

Second, we need to create a file with this extension : .stories.tsx
on my case :

Image description

To add the necessary imports, include the following lines of code:

Image description
Next, we move on to the main part of the process.

Image description

*The tags: ['autodocs'] * property will automatically generate a section that contains all the information about the props and the values they should take.

Image description

The last part is to create the stories based on the arguments (props) that each story should take.

Image description

the result will be like this:

Image description

another example of spinner component



import type { Meta, StoryObj } from '@storybook/react';
import Spinner, { sizetype } from './index';
import { action } from '@storybook/addon-actions';

const meta: Meta<typeof Spinner> = {
  title: 'Spinner',
  component: Spinner,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof Spinner>;

export const DefaultSpinner: Story = {
  args: {
    size: sizetype?.default,
  },
};

export const SmallSpinner: Story = {
  args: {
    size: sizetype?.small,
  },
};

export const LargeSpinner: Story = {
  args: {
    size: sizetype?.large,
  },
};



Enter fullscreen mode Exit fullscreen mode

Image description

let take a more complicated case on like login form :
Here is the code with comments for explanations :

Image description

And this is very impressive as it showcases the powerful capabilities of Storybook, including simulating and testing components in an interactive manner.

Image description

We have reached the end of the process. If you have any further questions or need more tips, feel free to contact me. 👋

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up