How to document components with storybook
Tags: webdev, typescript, react, tutorial
Published: 2023-06-18 14:07:37


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qe9wbv089lfxat9bj55o.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bm5ilfwjbum9mmb4fjx.png)
Next, we move on to the main part of the process.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctjjeohx6wt5d9m0x32z.png)


**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tbu7g6sc8nj1t5gncf7.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8tqrx6no68ay9urkcuz.png)

the result will be like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gh3qp1uc2ap808q09gh.png)

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,
  },
};

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/daq6zau9shoqfn52f7e4.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mit0sck64e3v8mxgv28.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/luyun2pak7derdo1l2gg.png)



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