React용 스토리북 — Controls 및 argTypes

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

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

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

이 기사에서는 Storybook용 애드온을 사용하는 방법을 살펴보겠습니다.

통제 수단

Storybook 컨트롤을 사용하면 코드를 변경하지 않고도 구성 요소의 인수와 동적으로 상호 작용할 수 있습니다.

그들은 편리하고 휴대 가능합니다.

예를 들어 argTypes 속성을 사용하여 arg에 대한 컨트롤을 설정할 수 있습니다.
src/stores/Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

우리는 backgroundColor 속성이 control으로 설정된 색상 선택기로 'color'을 설정했습니다.

또한 type을 'range'으로 설정하여 범위 슬라이더를 설정할 수 있습니다.

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

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

export const Button = ({ primary, backgroundColor, borderRadius, size, label, ...props }) => {
  const mode = primary ? 'button-primary' : 'button-secondary';
  return (
    <button
      type="button"
      style={{ backgroundColor, borderRadius }}
      {...props}
    >
      {label}
    </button>
  );
};

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

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

Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    borderRadius: {
      control: { type: 'range', min: 0, max: 50, step: 1 },
    },
  },
};

borderRadius prop을 레인지 슬라이드로 변경하고 type을 'range'으로 설정했습니다.

NoControls 경고 숨기기

스토리에 컨트롤을 추가할 계획이 없다면 hideNoControlWarning을 true으로 설정하여 숨길 수 있습니다.

우리는 쓴다:
src/stories/Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
};

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

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

Primary.parameters = {
  controls: { hideNoControlsWarning: true },
}

컨트롤 경고를 숨깁니다.

행위

액션 애드온을 사용하면 스토리에 대한 이벤트 핸들러 인수가 수신한 데이터를 표시할 수 있습니다.

arg가 액션이어야 한다고 Storybook에 알리도록 argType을 설정할 수 있습니다.

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

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: { onClick: { action: 'clicked' } },
};

argTypes.onClick 속성을 설정하여 action을 'clicked'으로 설정했습니다.

그런 다음 버튼을 클릭하면 표시됩니다.

자동으로 일치하는 인수

argTypes를 특정 패턴과 자동으로 일치시킬 수도 있습니다.

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

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: { actions: { argTypesRegex: '^on.*' } },
};

이벤트를 소품 이름과 일치시키도록 argTypesRegex 속성을 설정했습니다.

따라서 click 작업은 onClick 핸들러와 일치하므로 버튼을 클릭하면 onClick이 실행됩니다.

결론

Storybook을 사용하여 이벤트 핸들러에 대한 컨트롤과 argType을 설정할 수 있습니다.