Props और Controls

Controls addon

Controls addon आपको Storybook UI में component props को real-time में edit करने देता है। यह आपको test करने में मदद करता है कि component विभिन्न prop values के लिए कैसे respond करता है बिना नई stories लिखे।

Controls के साथ Button

Prop types define करें और Storybook में automatic controls देखें।

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

const meta = {
  component: Button,
  title: 'Components/Button',
  argTypes: {
    variant: {
      options: ['primary', 'secondary', 'danger'],
      control: { type: 'radio' },
    },
    size: {
      options: ['small', 'medium', 'large'],
      control: { type: 'select' },
    },
    disabled: { control: 'boolean' },
  },
} satisfies Meta<typeof Button>;
export default meta;

export const Interactive: StoryObj<typeof meta> = {
  args: { variant: 'primary', size: 'medium', children: 'Click me' },
};

Args और argTypes

args आपके component को pass किए जाने वाले props हैं, और argTypes define करते हैं कि controls कैसे render होने चाहिए। एक साथ वे interactive story development को enable करते हैं।

Advanced control types

Complex prop values के लिए date pickers, color pickers, और array inputs जैसे specialized control types का use करें।

argTypes: {
  backgroundColor: { control: 'color' },
  date: { control: 'date' },
  tags: { control: 'object' },
}