[Storybook] 스토리북 argTypes로 control 조작하기

argTypes

Storybook의 Control을 꾸밀 수 있도록 도와주는 argTypes에 대해서 알아보자!

링크텍스트

적용시키기

예시)

const meta: Meta<typeof AccordionHeader> = {
  title: 'UI/Accordion',
  component: AccordionHeader,
  argTypes: {
    label: {
      control: 'text',
      description: '라벨을 설정해주는 역할을 합니다.',
    },
  },
  args: { label: '' },
};

argTypes를 설명하기 전, 적용하는 방법이다.

title로 스토리북의 어느 곳에 이 스토리가 위치할지 설정해주고, componenet에는 적용할 컴포넌트를 입력해준다.

argTypes

argTypes의 type이다.

-> 코드 안에서는 간략한 설명만 적고, 디테일한 예시들은 옆의 탭을 이용하여 확인해주세요!

{
  [key: string]: {
    // ControlType은 하단의 사진 참고
    // control의 타입을 정의
    control?: ControlType | {
    		type: ControlType,
    		accept?: string;
    		labels?: { [option: string]: string };
    		max?: number;
    		min?: number;
    		presetColors?: string[];
    		step?: number;
  		}
           
    // 컨트롤의 설명을 적음
    description?: string;
    
    // 조건문 추가 가능
    if?: {
  			[predicateType: 'arg' | 'global']: string;
      		eq?: any;
  			exists?: boolean;
  			neq?: any;
  			truthy?: boolean;
     	 };
    
    // 이름을 정해두고, 그 이름이 클릭되면 mapping 된 명령어를 실행
    mapping?: { [key: string]: { [option: string]: any } };
  
    // 컨트롤의 이름 변경
    name?: string;
    
    // 컨트롤에 들어갈 옵션 정의
    options?: string[];
  
    // control 패널에 들어갈 내용 정함
    table?: {
      category?: string;
      defaultValue?: { summary: string; detail?: string };
      subcategory?: string;
      type?: { summary?: string; detail?: string };
    },
    type?: SBType | SBScalarType['name'];
  }
}

ControlType type

조건문 사용 방법

const meta: Meta<typeof Example> = {
  component: Example,
  argTypes: {
    parent: { control: 'select', options: ['one', 'two', 'three'] },

    // 👇 parentExists 속성은 parent가 존재할 때만 control이 보여짐
    parentExists: { if: { arg: 'parent', exists: true } },

    // 👇 parentDoesNotExist 속성은 parent가 존재하지 않을 때 보여짐
    parentDoesNotExist: { if: { arg: 'parent', exists: false } },

    // 👇 parent가 true일 때만 보여짐
    parentIsTruthy: { if: { arg: 'parent' } },
    parentIsTruthyVerbose: { if: { arg: 'parent', truthy: true } },

    // 👇 parent가 false일 때만 보여짐
    parentIsNotTruthy: { if: { arg: 'parent', truthy: false } },

    // 👇 parent가 three일 때만 보여짐
    parentIsEqToValue: { if: { arg: 'parent', eq: 'three' } },

    // 👇 parent가 three가 아닐 때만 보여짐
    parentIsNotEqToValue: { if: { arg: 'parent', neq: 'three' } },


	  // 글로벌 타입에서도 적용이 가능하다
    // 👇 theme가 true일 때만 보여짐
    parentExists: { if: { global: 'theme', exists: true } },
  },
};

Mapping, Options 사용방법

const meta: Meta<typeof Example> = {
  component: Example,
  argTypes: {
    label: {
      options: ['Normal', 'Bold', 'Italic'],
      mapping: {
        Bold: <b>Bold</b>,
        Italic: <i>Italic</i>,
      },
    },
  },
};

export default meta;

name 사용방법

const meta: Meta<typeof Example> = {
  component: Example,
  argTypes: {
    label: {
      name: '라벨',
    },
  },
};

table 사용 방법

const meta: Meta<typeof Example> = {
  component: Example,
  argTypes: {
    label: {
      table: {
   		category: 'category',
        subcategory: 'subcategory',
        defaultValue: { summary: 0, detail: '세부사항 적음' },
        type: { summary: 'number', detail: 'type에 대한 세부사항 적음' },
      },
    },
  },
  args: { label: '' },
};