React: How to integrate Storybook for documenting React components?

1npx storybook@latest init

1// Button.stories.tsx
2import type { Meta, StoryObj } from "@storybook/react";
3import { fn } from "@storybook/test";
4import { Button } from "./Button";
5
6const meta: Meta<typeof Button> = {
7  title: "UI/Button",
8  component: Button,
9  tags: ["autodocs"],
10  parameters: {
11    layout: "centered",
12    docs: {
13      description: {
14        component: "A versatile button component with multiple variants and sizes."
15      }
16    }
17  },
18  argTypes: {
19    variant: {
20      control: "select",
21      options: ["primary", "secondary", "ghost", "danger", "outline"],
22      description: "Visual style of the button"
23    },
24    size: {
25      control: "select",
26      options: ["sm", "md", "lg", "icon"],
27      description: "Button size"
28    },
29    isLoading: { control: "boolean" },
30    disabled: { control: "boolean" },
31    fullWidth: { control: "boolean" }
32  },
33  args: {
34    onClick: fn()
35  }
36};
37export default meta;
38type Story = StoryObj<typeof meta>;
39
40export const Primary: Story = {
41  args: {
42    variant: "primary",
43    children: "Primary Button"
44  }
45};
46
47export const Secondary: Story = {
48  args: {
49    variant: "secondary",
50    children: "Secondary"
51  }
52};
53
54export const Loading: Story = {
55  args: {
56    isLoading: true,
57    children: "Loading..."
58  }
59};
60
61export const Disabled: Story = {
62  args: {
63    disabled: true,
64    children: "Cannot click"
65  }
66};
67
68export const AllVariants: Story = {
69  render: () => (
70    <div className="flex flex-wrap gap-2 items-center">
71      <Button variant="primary">Primary</Button>
72      <Button variant="secondary">Secondary</Button>
73      <Button variant="ghost">Ghost</Button>
74      <Button variant="danger">Danger</Button>
75      <Button variant="outline">Outline</Button>
76    </div>
77  )
78};
79
80// Story with dark mode decorator
81export const DarkMode: Story = {
82  parameters: {
83    backgrounds: { default: "dark" }
84  },
85  decorators: [
86    (Story) => (
87      <div className="dark bg-gray-900 p-4">
88        <Story />
89      </div>
90    )
91  ]
92};