HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
💌
JJong’s Archive
/
📕
storybook
📕

storybook

Study Date
Dec 11, 2023 08:12 AM
Status
In progress
Tags

스토리북 시작

  1. npx -p @storybook/cli sb init 으로 스토리북 생성
  1. .storybook ⇒ 스토리북 설정파일들
    1. stories ⇒ 만든 스토리북 파일들
 

 

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

  • argTypes : 객체 형태 (key는 args 이름 / value는 control, actions 등을 담은 객체)
      1. control : 변수를 동적으로 설정 가능
        1. 데이터 타입 종류
          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 예제)
      1. action : 콘솔에 데이터 표시 ( https://storybook.js.org/docs/essentials/actions )
          • action: 값 ⇒ 에서 값이 name의 속성의 값으로 해서 찍힘
      1. type
      1. defaultValue
      1. options : 값 선택지
 
  • parameters : https://storybook.js.org/docs/writing-stories/parameters
    • layout : https://storybook.js.org/docs/configure/story-layout ⇒ 레이아웃의 유형 정의
 
  • tags: ['autodocs'] : docs를 자동 생성
 

 

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

1) 함수 컴포넌트를 할당하기
2) 객체 할당하기 ⇒ 초기값을 줄 수 있음
 

 
  • 여러개의 복사본을 만들 수 있음
    • notion image
       
      notion image
       
    • bind하는 과정은,, 함수(컴포넌트 생성)의 복사본을 만들 필요가 없으면 안 거쳐도 되는 듯. ⇒ 대신 Template을 export 해줘야 함
    •  
       
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', }, }, };
export default { component: CardForm, title: "Component/CardForm", argTypes: { onClick: { action: "onClick!" }, }, };
type: {name: "string", require: true }
defaultValue: "httsp:.."
options: ["cover", "fill", "contain"]
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', }, };