Addons और Stories को बेहतर बनाना

लोकप्रिय 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 करने देता है।

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 बनाता है।