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 :

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

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

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

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

the result will be like this:

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

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

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

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