React용 스토리북 — 이름 지정 및 계층 구조

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

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

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

이 기사에서는 Storybook으로 이야기의 이름을 지정하는 방법을 살펴보겠습니다.

구성 요소 및 계층 이름 지정

title 속성은 스토리에서 기본 내보내기로 내보내는 개체에 있습니다.

예를 들어 다음이 있습니다.
src/stories/Button.stories.js

import React from 'react';

import { Button } from './Button';

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

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',
};

title는 맨 위에 있는 개체에 있습니다.

우리는 그것들을 Example 가 있는 Example/ 그룹에 넣습니다.

슬래시는 그룹을 그룹 트리로 구분합니다.

이것은 스토리북 화면의 왼쪽에 트리 보기로 표시되어 그룹을 확장 및 축소할 수 있습니다.

뿌리

그룹 이름을 지정하지 않은 경우 기본 그룹은 루트 그룹입니다.

스토리 정렬

storySort 메서드 parameters를 .storybook/preview.js에서 내보내는 개체를 추가하여 스토리를 정렬할 수 있습니다.

import React from 'react';

export const parameters = {
  options: {
    storySort: (a, b) => a[0].localeCompare(b[0])
  },
};

우리는 storySort 메서드를 앱에 추가하고 스토리를 알파벳순으로 정렬하는 비교기 기능을 제공합니다.
a[0]에는 스토리의 ID 문자열이 있습니다.
storySort 속성은 객체 리터럴도 허용할 수 있습니다.
.storybook/preview.js

import React from 'react';

export const parameters = {
  options: {
    storySort: {
      method: 'alphabetical',
      order: [],
      locales: 'en-US',
    }
  },
};

method는 Storybook에 이야기를 정렬하는 방법을 알려주는 문자열입니다.
order는 배열에 나타나는 순서대로 표시할 수 있는 스토리 이름의 배열입니다.
locales는 정렬에 사용되는 로케일이 있는 문자열입니다.
order 배열을 중첩하여 스토리 그룹을 정렬할 수 있습니다.

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

import React from 'react';

export const parameters = {
  options: {
    storySort: {
      order: ['Introduction', 'Button'],
    }
  },
};

나열된 순서대로 스토리를 정렬합니다.

문서 구성 요소

다양한 방법으로 구성 요소를 문서화할 수 있습니다.

스토리 파일에서 title 및 component 속성을 사용하여 객체를 기본 내보내기로 내보냅니다.
title는 우리가 화면에 표시하는 것입니다.

그리고 component는 우리가 미리 보고 있는 구성 요소입니다.

소품은 구성 요소에서 자동으로 추출되어 자체 값으로 설정할 수 있습니다.

하위 구성 요소 매개변수

여러 구성 요소를 함께 문서화할 수 있습니다.

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

import React from 'react';

export const ButtonGroup = ({ children }) => {
  return <div>{children}</div>
}

src/stories/ButtonGroup.stories.js

import React from 'react';
import { Button } from './Button';
import { ButtonGroup } from './ButtonGroup';

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

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

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

스토리가 있는 ButtonGroup 컴포넌트가 있습니다.

스토리 파일의 기본 내보내기에는 subcomponents 구성 요소의 하위 구성 요소인 속성과 함께 ButtonGroup 속성이 있습니다.

결론

Storybook으로 이름을 지정하여 구성 요소를 문서화할 수 있습니다.