스토리북 인자 타입 정리

2 minute read

2024-07-19

argTypes

{
  [key: string]: {
    control?: ControlType | { type: ControlType; /* See below for more */ } | false;
    description?: string;
    if?: Conditional;
    mapping?: { [key: string]: { [option: string]: any } };
    name?: string;
    options?: string[];
    table?: {
      category?: string;
      defaultValue?: { summary: string; detail?: string };
      disable?: boolean;
      subcategory?: string;
      type?: { summary?: string; detail?: string };
    },
    type?: SBType | SBScalarType['name'];
  }
}

모든 스토리북에 적용하려면 meta 에 추가

MyComponent.stories.ts

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    label: {
      control: 'text',
      description: 'Overwritten description',
    },
  },
};

하나의 스토리에만 적용하려면 Story 에 추가

Specific Story ArgTypes

export const Base: Story = {
  argTypes: {
    label: {
      control: 'text',
      description: 'Overwritten description',
    },
  },
};

control

| ControlType
| {
    type: ControlType,
    accept?: string;
    labels?: { [option: string]: string };
    max?: number;
    min?: number;
    presetColors?: string[];
    step?: number;
  }
| false

type 으로 여기에 타입은 아래 목록들로 다양하게 있다.

Control Type

'boolean' | 'function' | 'number' | 'string' | 'symbol' | SBType

공식 문서