참고자료

[10회-1]Say Hello to Storybook: 스토리북을 통한 React UI 컴포넌트 개발

설치

npx sb init

Install Storybook

실행

yarn storybook

index.stories.tsx 생성

import React from 'react';

import { Meta, Story } from '@storybook/react';
import Button, { Props } from './index';

export default {
	title: 'common/Button',
	component: Button,
} as Meta;

const Template: Story<Props> = (args) => <Button {...args} />;

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

export const Primary = Template.bind({});
// More on args: <https://storybook.js.org/docs/react/writing-stories/args>
Primary.args = {
	primary: true,
	label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
	label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
	size: 'large',
	label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
	size: 'small',
	label: 'Button',
};

이런식으로 args를 이용하여 여러 버전 만들기 가능

스토리북 설치후 바벨 오류 해결

Yarn Build - Babel-loader issues with Storybook

Decorator

테스트 환경에서 컴포넌트의 부모를 지정할 수 있음