Storybook Decorator, Parameter

데코레이터는 기능적으로 추가적인 내용을 렌더링을 통해서 감쌀 수 있는 방법이다.

기본적으로 storybook에서는 위의 그림처럼 나타내어진다.
여기서 이 위치를 바꾸고 싶거나, 다른 style을 주고 싶을 때 사용하는 것이 이 Decorator인 것이다.
=> 밑의 예시에서는 marginLeft를 주는 방법을 사용하였다.

Decorator

Decorator에는 크게 세 가지 방식이 존재한다.

1. Story decorators(Button.stories.tsx)
   -> 스토리에만 적용되는 것이다.
   

   export const Variant = (Variants.decorators = [
    (Story) => (
      <div style={{ margin: "3em" }}>
        <Story />
      </div>
    ),
   ]);

   
   

2. Component decorators(Button.stories.tsx)
   -> 컴포넌트 모두에게 적용되는 것이다.
   

   export default {
    title: "Example/Button",
    component: Button,
    decorators: [
      (Story) => (
        <div style={{ marginLeft: "10%" }}>
          <Story />
        </div>
      ),
    ],
   } as ComponentMeta<typeof Button>;

3. Global decorators(.storybook/previes.js)
   -> 모든 stories.tsx에 적용된다.

   import React from 'react';
   
   import { ThemeProvider } from 'styled-components';
   
   export const decorators = [
    (Story) => (
      <ThemeProvider theme="default">
        <Story />
      </ThemeProvider>
    ),
   ];

   
   

---

Parameter

정적인 메타데이터를 뜻하며, 주로 storybook의 feature와 addon을 조작한다.

background의 addon을 parameter를 통해 적용해보자!

1. Story Parameters(Button.stories.tsx)
   -> story에만 parameter가 적용된다.

   const Template: ComponentStory<typeof Button> = (args) =>  <Button {...args} />;
   
   export const Playground = Template.bind({});
   Playground.args = {
    size: "small",
    label: "Click me!",
   };
   Playground.parameters = {
    backgrounds: {
      values: [
        { name: "red", value: "#f00" },
        { name: "green", value: "#0f0" },
      ],
    },
   };

   

   
   

2. Component Parameters(Button.stories.tsx)
   -> 컴포넌트에 해당하는 모든 story에 parameter가 적용된다.

   export default {
    title: "Example/Button",
    component: Button,
    parameters: {
      backgrounds: {
        values: [
          { name: 'red', value: '#f00' },
          { name: 'green', value: '#0f0' },
        ],
      },
    },
   } as ComponentMeta<typeof Button>;

   
   

3. Global parameters(preview.js)
   -> 모든 파일에 적용된다

   export const parameters = {
    backgrounds: {
      values: [
        { name: 'red', value: '#f00' },
        { name: 'green', value: '#0f0' },
      ],
    },
   };