Storybook addon-controls 사용하기!

🤔 Addon-controls 란?

공식문서를 해석해보면, 따로 코드화 작성 없이 동적으로 상호 작용할 수 있는 그래픽 UI를 제공한다고 정의되어 있습니다.

현재 최신 storybook을 설치하면 예제에는 있지만 사용하려면 다운을 받아야 합니다.

해당 글은 react + typescript 기준으로 작성됩니다.

🔨 설치하기

npm i -D @storybook/addon-controls

설치가 끝나면 .storybook/main.js에 addon을 추가해줍니다.

//main.js

module.exports = {
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/preset-create-react-app',
        '@storybook/addon-actions/register',
        '@storybook/addon-controls' // 추가
    ]
};

🧰 Storybook Control 준비하기

먼저 코드를 준비합시다!

// index.tsx

import React from 'react';
import * as S from './style';

export interface BtnProps {
    children: React.ReactElement | string;
    styletype?: string;
    disabled?: boolean;
}

export function Btn({
    children,
    styletype = 'primary',
    ...props
}: BtnProps): React.ReactElement {
    return (
        <S.StyledBtn styletype={styletype} {...props}>
            {children}
        </S.StyledBtn>
    );
}

스토리북 코드도 추가합시다!

// index.stories.tsx

import React from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';

import { Btn, BtnProps } from './index';

export default {
    title: 'Atoms/Test',
    // component: Btn,
    argTypes: {
        styletype: {
            control: {
                type: 'select',
                options: [
                    'primary',
                    'secondary',
                    'danger',
                    'alert',
                    'success',
                    'transparent',
                    'transparent-border'
                ]
            }
        }
    }
} as Meta;

// interface를 불러온다.
const Template: Story<BtnProps> = (args) => <Btn {...args} />;

export const general = Template.bind({});
general.args = {
    styletype: 'primary',
    disabled: false,
    children: 'button',
};

일단 풀코드입니다. 자세한 코드 설명은 아래에서 설명하겠습니다.

🔧 control을 설정하기

방법은 2가지가 있습니다.

1. 첫 번째는 모든 스토리에 컨트롤 적용하기
2. 각 스토리에 직접 적용하기

1번 방법을 이용하려면

// index.stories.tsx

export default {
    title: 'Atoms/Test',
    component: Btn, // 이것
} as Meta;

export const general = Template.bind({});

// 삭제
// general.args = {
//     styletype: 'primary',
//     disabled: false,
//     children: 'button',
// };

위 코드에 component: 불러올 함수명을 이용하면 모든 컴포넌트에 interface에 있는 설정을 기준으로 control이 생성됩니다.


2번 방법은 직접 설정인데

// index.stories.tsx

export default {
    title: 'Atoms/Test',
    argTypes: {
        styletype: {
            control: {
                type: 'select',
                options: [
                    'primary',
                    'secondary',
                ]
            }
        }
    }
} as Meta;

argTypes 코드는 control에 select를 사용할 수 있게 해주는 코드입니다.

export const general = Template.bind({});

// 컨트롤 설정
general.args = {
    styletype: 'primary', // select default값
    disabled: false, // button disabled on/off
    children: 'button', // 내용
};

주석 안에 내용처럼 control를 설정할 수 있습니다.


이렇게 코드를 작성을 완료하면

사진처럼 control이 생성된 것을 볼 수 있습니다.