인수, 컨트롤과 Actions 애드온

Args란 무엇인가요?

Args 정의하기

export const Primary: Story = {
  args: {
    label: 'Click me',
    variant: 'primary',
    size: 'medium',
    disabled: false,
  },
};

컨트롤 패널

컨트롤 사용자 지정을 위한 ArgTypes

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger'],
      description: 'Visual style of the button',
    },
    size: {
      control: { type: 'radio' },
      options: ['small', 'medium', 'large'],
    },
    disabled: { control: 'boolean' },
    label: { control: 'text' },
  },
};

컨트롤에서 Args 숨기기

argTypes: {
  onClick: { control: false },
  className: { table: { disable: true } },
},

작업 애드온

import { fn } from '@storybook/test';

const meta: Meta<typeof Button> = {
  component: Button,
  args: {
    onClick: fn(),     // click events appear in Actions panel
    onHover: fn(),
  },
};

argTypes로 작업 자동 연결하기

const meta: Meta<typeof Select> = {
  component: Select,
  argTypes: {
    onChange: { action: 'changed' },
    onBlur: { action: 'blurred' },
  },
};

전역 Args

// .storybook/preview.ts
export const globalTypes = {
  locale: {
    description: 'Internationalization locale',
    defaultValue: 'en',
    toolbar: {
      icon: 'globe',
      items: ['en', 'fr', 'de'],
    },
  },
};

스토리북 도구 모음

Args 조합하기

export const Primary: Story = {
  args: { label: 'Save', variant: 'primary' },
};

export const PrimaryLoading: Story = {
  args: { ...Primary.args, loading: true },
};

export const PrimaryDisabled: Story = {
  args: { ...Primary.args, disabled: true },
};

컨트롤 값 매핑하기

argTypes: {
  icon: {
    options: ['Star', 'Heart', 'None'],
    mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
    control: { type: 'select' },
  },
},

빠른 확인

복습