Whiting Story

Decorators

Center.js

import React from 'react'
import './Center.sass'

const Center = ({ children, ...restProps }) => {
  return <div className="center">{children}</div>
}

export default Center

Center.sass

.center 
  display: flex
  justify-content: center

컨테이너 역할을 하는 Center 컴포넌트를 생성 후 버튼 스토리 컴포넌트에 적용한다.

export const RedButton = () => (
  <Center>
    <Button2 red>Red</Button2>
  </Center>
)

위의 방법처럼 직접적으로 추가할 수 있고 아래 처럼 Decorators을 사용해서 한번에 적용할 수 있다.

import React from 'react'
import Button2 from './Button2'
import Center from '../Center/Center'

export default {
  title: 'Form/Button2',
  component: Button2,
  decorators: [(story) => <Center>{story()}</Center>],
}

export const Primary = () => <Button2 primary>Primary</Button2>

가운데 정렬이 된다.

Args

args 를 사용해서 전달하려는 속성을 객체로 한 번에 전달 할 수있다.

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

export const SmallA = Template.bind({})
SmallA.args = {
  size: 'small',
  placeholder: 'SmallA',
}

import React from 'react'
import Input from './Input'

export default {
  title: 'Form/Input',
  component: Input,
}

export const Small = () => <Input size="small" placeholder="Small size" />
export const Medium = () => <Input size="medium" placeholder="Medium size" />
export const Large = () => <Input size="large" placeholder="Large size" />

// Storybook에 보여지는 파일 이름 변경
Small.storyName = 'Small Input'

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

export const SmallA = Template.bind({})
SmallA.args = {
  size: 'small',
  placeholder: 'SmallA',
}

export const SmallB = Template.bind({})
SmallB.args = {
  ...SmallA.args,
  placeholder: 'SmallB',
}

export const mediumA = Template.bind({})
mediumA.args = {
  size: 'medium',
  placeholder: 'mediumA',
}

스토리 묶기

Button 컴포넌트와 Input 컴포넌트를 같이 사용한다.

생성한 컴포넌트를 같이 사용할 수 있다.

import React from 'react'
import { Primary } from '../Button2/Button2.stories'
import { Medium } from '../Input/Input.stories'

export default {
  title: 'Form/container/Subscription',
}

export const PrimarySubscription = () => {
  return (
    <>
      <Primary />
      <Medium />
    </>
  )
}