4 tutorial - heirarchy, story, args

source: categories/study/react-storybook/react-storybook4.md

4.1 Story Heirarchy (스토리 계층)

4.1.1 Input component 만들기

// Input.js
import React from "react";
import './Input.css';

function Input(props) {
    const { size = 'medium', ...rest } = props;
    return (
        <input className={`input ${size}`} {...rest}/>
    )
}

export default Input
  

// Input.stories.js
import React from "react";
import Input from './Input';

export default {
    title: 'Input',
    component: Input
}

export const Small = () => <Input size='small' placeholder='Small size'/>
export const Medium = () => <Input size='medium' placeholder='Medium size'/>
export const Large = () => <Input size='large' placeholder='Large size'/>
  

/* Input.css */
.input {
    display: block;
    width: 400px;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0.25rem;
    border: 1px solid;
    border-color: inherit;
    background-color: #fff;
}

.small {
    height: 2rem;
    font-size: 0.875rem;
}

.medium {
    height: 2.5rem;
    font-size: 1rem;
}

.large {
    height: 3rem;
    font-size: 1.25rem;
}
  

위와 같이 Button, Input과 같은 계층구조가 생깁니다.
하지만 컴포넌트가 더 많아지고 양이 많아질 수록 같은 종류끼리 묶어야될 수도 있습니다.
예를 들면 form 요소들말입니다.

직접 해보도록 하겠습니다.

위와 같이 title 부분을 Form/Button, Form/Input으로 바꿉니다.

그럼 위와 같이 Form 안에 Button과 Input이 들어가는 계층구조로 만들 수 있습니다.

4.2 Renaming & Sorting Stories in V6

이전 강의에선 스토리북을 그룹화하는 방법을 배웠습니다.
스토리북 버전 5.3에서 코드는 동일하게 유지되지만 버전 6의 UI는 약간 다릅니다.

목록 순서 정하기

// .storybook/preview.js

export const parameters = {
  options: {
    storySort: (a, b) =>
      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
  },
};
  