# Addons और Stories को बेहतर बनाना — Storybook: Component-Driven UI Development

Source: https://www.skillbyai.com/hi/storybook/sb-addons

> Docs, actions, interactions और accessibility के addons से Storybook बढ़ाएँ, और build करते समय callbacks log करें।

## लोकप्रिय addons

Storybook का addon ecosystem समृद्ध है, जिसमें Docs, Controls, Interactions और A11y (Accessibility) शामिल हैं। अधिकांश `@storybook/addon-essentials` (Storybook 8) में bundled हैं।

## Actions addon का use करना

`@storybook/test` का `fn()` callback calls record करता है, उन्हें Actions panel में दिखाता है और उन पर assert करने देता है।

```tsx
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { Button } from './Button';

const meta = { component: Button, title: 'Components/Button' } satisfies Meta<typeof Button>;
export default meta;

// fn() logs calls in the Actions panel and can be asserted in play functions
export const Clickable: StoryObj<typeof meta> = {
  args: { children: 'Click me', onClick: fn() },
};
```

## Auto-generated docs के लिए Docs addon

Docs addon स्वचालित रूप से आपकी stories और JSDoc comments से component documentation generate करता है, एक living style guide बनाता है।