DEV Community

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

Posted on

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. 👋

Top comments (0)