storybook

스토리북 시작

1. npx -p @storybook/cli sb init 으로 스토리북 생성

2. .storybook ⇒ 스토리북 설정파일들
stories ⇒ 만든 스토리북 파일들

export default 객체에서 가질 수 있는 속성들

• argTypes : 객체 형태 (key는 args 이름 / value는 control, actions 등을 담은 객체)
1. control : 변수를 동적으로 설정 가능
데이터 타입 종류

Data Type	Control	Description
boolean	boolean	Provides a toggle for switching between possible states.argTypes: { active: { control: 'boolean' }}
number	number	Provides a numeric input to include the range of all possible values.argTypes: { even: { control: { type: 'number', min:1, max:30, step: 2 } }}
ㅤ	range	Provides a range slider component to include all possible values.argTypes: { odd: { control: { type: 'range', min: 1, max: 30, step: 3 } }}
object	object	Provides a JSON-based editor component to handle the object's values.Also allows edition in raw mode.argTypes: { user: { control: 'object' }}
array	object	Provides a JSON-based editor component to handle the values of the array.Also allows edition in raw mode.argTypes: { odd: { control: 'object' }}
ㅤ	file	Provides a file input component that returns an array of URLs.Can be further customized to accept specific file types.argTypes: { avatar: { control: { type: 'file', accept: '.png' } }}
enum	radio	Provides a set of radio buttons based on the available options.argTypes: { contact: { control: 'radio', options: ['email', 'phone', 'mail'] }}
ㅤ	inline-radio	Provides a set of inlined radio buttons based on the available options.argTypes: { contact: { control: 'inline-radio', options: ['email', 'phone', 'mail'] }}
ㅤ	check	Provides a set of checkbox components for selecting multiple options.argTypes: { contact: { control: 'check', options: ['email', 'phone', 'mail'] }}
ㅤ	inline-check	Provides a set of inlined checkbox components for selecting multiple options.argTypes: { contact: { control: 'inline-check', options: ['email', 'phone', 'mail'] }}
ㅤ	select	Provides a drop-down list component to handle single value selection. argTypes: { age: { control: 'select', options: [20, 30, 40, 50] }}
ㅤ	multi-select	Provides a drop-down list that allows multiple selected values. argTypes: { countries: { control: 'multi-select', options: ['USA', 'Canada', 'Mexico'] }}
string	text	Provides a freeform text input.argTypes: { label: { control: 'text' }}
ㅤ	color	Provides a color picker component to handle color values.Can be additionally configured to include a set of color presets.argTypes: { color: { control: { type: 'color', presetColors: ['red', 'green']} }}
ㅤ	date	Provides a datepicker component to handle date selection. argTypes: { startDate: { control: 'date' }}

• 컴포넌트에서 propTypes를 지정해주면 컨트롤을 주지 않아도 같은 역할을 한다
control 예제)

export default {
  component: CardForm,
  title: "Component/CardForm",
  argTypes: {
    canRotate: {
      control: 'boolean',
    },
    width: {
      control: { type: 'number', min: 400, max: 1200, step: 50 },
    },
    height: {
      control: { type: 'range', min: 200, max: 1500, step: 50 },
    },
    rawData: {
      control: 'object',
    },
    coordinates: {
      control: 'object',
    },
    texture: {
      control: {
        type: 'file',
        accept: '.png',
      },
    },
    position: {
      control: 'radio',
      options: ['left', 'right', 'center'],
    },
    rotationAxis: {
      control: 'check',
      options: ['x', 'y', 'z'],
    },
    scaling: {
      control: 'select',
      options: [10, 50, 75, 100, 200],
    },
    label: {
      control: 'text',
    },
    meshColors: {
      control: {
        type: 'color',
        presetColors: ['#ff0000', '#00ff00', '#0000ff'],
      },
    },
    revisionDate: {
      control: 'date',
    },
  },
};

2. action : 콘솔에 데이터 표시 ( https://storybook.js.org/docs/essentials/actions )
• action: 값 ⇒ 에서 값이 name의 속성의 값으로 해서 찍힘

export default {
  component: CardForm,
  title: "Component/CardForm",
  argTypes: {
    onClick: { action: "onClick!" },
  },
};

3. type

type: {name: "string", require: true }

4. defaultValue

defaultValue: "httsp:.."

5. options : 값 선택지

options: ["cover", "fill", "contain"]

• parameters : https://storybook.js.org/docs/writing-stories/parameters
• layout : https://storybook.js.org/docs/configure/story-layout ⇒ 레이아웃의 유형 정의

• tags: ['autodocs'] : docs를 자동 생성

스토리북에서 export 하는 두가지 방법

export const Default = (args) => {
  return <CardForm {...args} width=20 />;
};

export const Default = {
  args: {
    width: 20,
    color: "black",
  },
};

• 여러개의 복사본을 만들 수 있음

import React from 'react';

import Task from './Task';

export default {
  component: Task,
  title: 'Task',
};

const Template = (args) => <Task {...args} />;

export const Default = Template.bind({});
Default.args = {
  task: {
    id: '1',
    title: 'Test Task',
    state: 'TASK_INBOX',
    updatedAt: new Date(2021, 0, 1, 9, 0),
  },
};

export const Pinned = Template.bind({});
Pinned.args = {
  task: {
    ...Default.args.task,
    state: 'TASK_PINNED',
  },
};

export const Archived = Template.bind({});
Archived.args = {
  task: {
    ...Default.args.task,
    state: 'TASK_ARCHIVED',
  },
};



 



 
• bind하는 과정은,, 함수(컴포넌트 생성)의 복사본을 만들 필요가 없으면 안 거쳐도 되는 듯. ⇒ 대신 Template을 export 해줘야 함