React용 스토리북 — 데코레이터 및 다중 구성요소

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Storybook을 사용하면 다양한 매개변수를 사용하여 구성 요소의 프로토타입을 쉽게 만들 수 있습니다.

이 기사에서는 Storybook으로 스토리를 작성하고 탐색하는 방법을 살펴보겠습니다.

데코레이터

decorators 속성으로 데코레이터를 추가할 수 있습니다.

구성 요소를 자체 마크업으로 래핑하는 데 사용됩니다.

예를 들어 다음과 같이 작성할 수 있습니다.
src/stories/Button.js

import React from 'react';
import PropTypes from 'prop-types';
import './button.css';

export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
  const mode = primary ? 'button-primary' : 'button-secondary';
  return (
    <button
      type="button"
      className={['button', `button-${size}`, mode].join(' ')}
      style={backgroundColor && { backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

Button.propTypes = {
  primary: PropTypes.bool,
  backgroundColor: PropTypes.string,
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
};

Button.defaultProps = {
  backgroundColor: null,
  primary: false,
  size: 'medium',
  onClick: undefined,
};

src/stories/Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  decorators: [(Story) => <div style={{ margin: '20px' }}><Story /></div>]

};

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

export const Primary = Template.bind({});
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',
};

decorators 속성으로 데코레이터를 추가합니다.

컴포넌트를 렌더링하는 기능이 있는 배열입니다.
Story는 구성 요소를 래핑할 구성 요소입니다.

버튼을 테스트 중이므로 버튼이어야 합니다.

둘 이상의 구성 요소에 대한 이야기

2개 이상의 구성 요소가 있는 경우 동일한 폴더에 넣습니다.

예를 들어 다음과 같이 작성할 수 있습니다.
src/stories/ListItem.js

import React from 'react';

export const ListItem = ({ text }) => {
  return (
    <li>
      {text}
    </li>
  );
};

src/stories/List.js

import React from 'react';
import PropTypes from 'prop-types';

export const List = ({ children, backgroundColor }) => {
  return (
    <ul style={{ backgroundColor }}>
      {children}
    </ul>
  );
};

List.propTypes = {
  backgroundColor: PropTypes.string
}

src/stories/List.stories.js

import React from 'react';
import { List } from './List';
import { ListItem } from './ListItem';

export default {
  component: List,
  title: 'List',
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

export const Empty = (args) => <List {...args} />;

export const OneItem = (args) => (
  <List {...args}>
    <ListItem text='foo' />
  </List>
);

export const ManyItems = (args) => (
  <List {...args}>
    <ListItem text='foo' />
    <ListItem text='bar' />
    <ListItem text='baz' />
  </List>
);

우리는 이야기에서 함께 사용한 ListItem 및 List 구성 요소를 만들었습니다.
List 구성 요소는 backgroundColor 소품을 허용하고 argTypes 속성을 설정하여 해당 구성 요소에 대한 컨트롤을 색상 선택기로 설정합니다.

이런 식으로 색상을 설정할 수 있습니다.

결론

Storybook으로 다양한 구성 요소를 구성하고 하나의 스토리 내에서 함께 테스트할 수 있습니다.