React용 스토리북 — 배경 및 전역

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

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

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

이 기사에서는 Storybook을 사용하여 전역과 작업하는 방법을 살펴보겠습니다.

배경

배경 도구 모음 항목을 설정하여 배경 설정을 위한 선택 항목을 추가할 수 있습니다.
.storybook/preview.js 파일에 옵션을 추가하여 전역적으로 이 작업을 수행할 수 있습니다.

export const parameters = {
  backgrounds: {
    default: 'twitter',
    values: [
      {
        name: 'twitter',
        value: '#00aced'
      },
      {
        name: 'facebook',
        value: '#3b5998'
      },
    ],
  }
}

backgrounds 속성을 설정하여 배경색 설정을 위한 선택 항목을 설정합니다.
values에는 우리가 설정할 수 있는 선택의 배열이 있습니다.
name는 드롭다운에 표시되는 이름이고 value는 배경색 값입니다.
default는 표시할 선택 항목의 이름입니다.

한 세트의 이야기에 대한 선택을 설정할 수도 있습니다.

이를 위해 다음과 같이 작성합니다.
src/stories/Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  parameters: {
    backgrounds: {
      default: 'twitter',
      values: [
        {
          name: 'twitter',
          value: '#00aced'
        },
        {
          name: 'facebook',
          value: '#3b5998'
        },
      ],
    }
  }
};

Button 속성에 설정된 parameters 스토리에서 배경색을 설정했습니다.

또한 하나의 스토리에 대해서만 배경색 드롭다운을 설정할 수 있습니다.

이를 위해 다음과 같이 작성합니다.
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',
};

Primary.parameters = {
  backgrounds: {
    default: 'twitter',
    values: [
      {
        name: 'twitter',
        value: '#00aced'
      },
      {
        name: 'facebook',
        value: '#3b5998'
      },
    ],
  }
};

disable 속성을 true로 설정하여 배경을 비활성화할 수도 있습니다.  :

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

Primary.parameters = {
  backgrounds: { disable: true }
};

Primary 스토리로 배경 드롭다운을 비활성화합니다.

툴바 및 전역

특별한 전역 변수를 제어하기 위해 고유한 스토리북 도구 모음 항목을 만들 수 있습니다.

전역은 스토리 렌더링에 대한 비 스토리 특정 입력입니다.

그것들은 args로 스토리에 전달되지 않습니다.
.storybook/preview.js 파일에 일부 속성을 넣어 자체 툴바를 추가할 수 있습니다.

export const globalTypes = {
  theme: {
    name: 'Theme',
    description: 'Global theme for components',
    defaultValue: 'light',
    toolbar: {
      icon: 'circlehollow',
      items: ['light', 'dark'],
    },
  },
};

일부 속성이 있는 theme 속성이 있습니다.
toolbar 속성에는 드롭다운 선택 항목에 대한 아이콘을 설정하는 icon 속성이 있습니다.
items 선택할 수 있는 항목의 배열이 있습니다.

데코레이터 만들기

데코레이터를 사용하여 theme 전역을 사용할 수 있습니다.

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

import React from 'react';
import { ThemeProvider } from 'styled-components';

export const globalTypes = {
  theme: {
    name: 'Theme',
    description: 'Global theme for components',
    defaultValue: 'palevioletred',
    toolbar: {
      icon: 'circlehollow',
      items: ['palevioletred', 'white'],
    },
  },
};

const withThemeProvider = (Story, context) => {
  return (
    <ThemeProvider theme={{ main: context.globals.theme }}>
      <Story {...context} />
    </ThemeProvider>
  )
}
export const decorators = [withThemeProvider];

toolbar 속성으로 몇 가지 테마 선택을 추가했습니다.

그리고 context.globals.theme 속성으로 선택된 값을 얻습니다.

우리는 ThemeProvider를 Story 구성 요소로 감쌌습니다. 이는 우리가 스토리에 표시하는 구성 요소입니다.

그런 다음 우리가 생성한 withThemeProvider 배열을 내보냅니다.

이제 드롭다운에서 테마를 선택하여 설정할 수 있습니다.

결론

배경에 대한 선택을 추가하고 데코레이터와 함께 사용하는 전역을 설정할 수 있습니다.