스토리북

mkdir storybook-tutorial
cd storybook-tutorial
npm init -y
npx -p @storybook/cli sb init --type react

npm i react react-dom

npm run storybook

//.storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
}

// src/Hello/Hello.js
import React from 'react'

function Hello({ name, big }) {
  if (big) {
    return <h1>안녕하세요, {name}</h1>
  }
  return <p>안녕하세요, {name}</p>
}

export default Hello

// src/Hello/Hello.stories.js
import React from 'react'
import Hello from './Hello'

export default {
  // 스토리북에서 보여질 그룹과 경로
  title: 'components/basic/Hello',
  // 어떤 컴포넌트를 문서화 할지
  component: Hello,
}

export const standard = () => <Hello name="재영스토리북" />
export const big = () => <Hello name="재영스토리북" big />

npm i --save-dev @storybook/addon-knobs

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-knobs',
  ],
}

// Hello/Hello.stories.js
...
import { withKnobs } from '@storybook/addon-knobs';
export default {
  title: 'components/basic/Hello', // 스토리북에서 보여질 그룹과 경로
  component: Hello, // 어떤 컴포넌트를 문서화 할지
  decorators: [withKnobs], // 애드온 적용
};

// Hello/Hello.stories.js
...
import { boolean, text, withKnobs } from '@storybook/addon-knobs';

export const hello = () => {
  // knobs 만들기
  const big = boolean('big', false);
  const name = text('name', '재영스토리북');
  return <Hello name={name} big={big} />;
};

hello.story = {
  name: 'Default',
};

const big = boolean('big', false, 'Group 1')

// Hello/Hello.js
function Hello({ name, big, onHello, onBye }) {
  return (
    <div>
      {big ? <h1>안녕하세요, {name}</h1> : <p>안녕하세요, {name}</p>}
      <div>
        <button onClick={onHello}>Hello</button>
        <button onClick={onBye}>Bye</button>
      </div>
    </div>
  )
}

export default Hello

// Hello/Hello.stories.js
...
import { action } from '@storybook/addon-actions';
...
export const hello = () => {
  // knobs 만들기
  const big = boolean('big', false);
  const name = text('name', '재영스토리북');
  return (
    <Hello
      name={name}
      big={big}
      onHello={action('onHello')}
      onBye={action('onBye')}
    />
  );
};

npm install --save-dev @storybook/addon-docs

module.exports = {
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-knobs',
    '@storybook/addon-docs',
  ],
}

import PropTypes from 'prop-types';
...
Hello.propTypes = {
  // 보여주고 싶은 이름
  name: PropTypes.string.isRequired,
  // 값이 true면 h1태그로 렌더링
  big: PropTypes.bool,
  // Hello 버튼 클릭 시 호출 함수
  onHello: PropTypes.func,
  // Bye 버튼 클릭 시 호출 함수
  onBye: PropTypes.func,
};

Hello.defaultProps = {
  big: false,
};

/** 내용 */

// Hello/Hello.stories.js
export default {
  title: 'components/basic/Hello', // 스토리북에서 보여질 그룹과 경로
  component: Hello, // 어떤 컴포넌트를 문서화 할지
  decorators: [withKnobs], // 애드온 적용
  parameters: {
    componentSubtitle: '"안녕하세요" 컴포넌트',
  },
}

// Hello/Hello.js
/**
 * 안녕하세요 라고 보여주고 싶을 땐 `Hello` 컴포넌트를 사용하세요.
 *
 * - `big` 값을 `true`로 설정하면 **크게** 나타납니다.
 * - `onHello` 와 `onBye` props로 설정하여 버튼이 클릭했을 때 호출 할 함수를 지정 할 수 있습니다.
 */

function Hello({ name, big, onHello, onBye }) {
  ...

// Hello/Hello.mdx
import Hello from './Hello';
import {
  Story,
  Props,
  Description,
  Preview,
} from '@storybook/addon-docs/blocks';

# Hello

<Hello name="MDX" big={true} />
<Description of={Hello} />

## Props

이 컴포넌트에서 사용되는 Props들

<Props of={Hello} />

## 작은 Helllo

<Preview>
  <Story id="components-basic-hello--standard" />
</Preview>

작은 Hello 입니다.

## 커다란 Hello

'big' props를 true로 설정하면 커다란 Hello가 됩니다.

<Preview>
  <Story id="components-basic-hello--big" />
</Preview>

// Hello/Hello.stories.js
...
import mdx from './Hello.mdx';

export default {
  title: 'components/basic/Hello', // 스토리북에서 보여질 그룹과 경로
  component: Hello, // 어떤 컴포넌트를 문서화 할지
  decorators: [withKnobs], // 애드온 적용
  parameters: {
    componentSubtitle: '"안녕하세요" 컴포넌트',
    docs: {
      page: mdx,
    },
  },
};

// Bye/Bye.js

import React from 'react'
import PropTypes from 'prop-types'

const Bye = ({ name }) => {
  return <p>안녕히 가세요, {name}</p>
}

Bye.propTypes = {
  name: PropTypes.string,
}

export default Bye

// Bye/Bye.stories.mdx

import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import Bye from './Bye';
import { withKnobs, text, boolean } from '@storybook/addon-knobs';

<Meta title="components|basic/Bye" component={Bye} decorators={[withKnobs]} />

# Button

<Preview>
  <Story name="Default">
    <Bye name={text('name', 'stories.js')} />
  </Story>
</Preview>

## Props

<Props of={Bye} />

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

// .storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-knobs',
    '@storybook/addon-docs',
  ],
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: prop =>
        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
    },
  },
}

// src/typings.d.ts

declare module '*.mdx';

/// src/Hello/Hello.tsx

import React from 'react'

type HelloProps = {
  /** 보여주고 싶은 이름 */
  name: string
  /** 이 값을 `true` 로 설정하면 h1 태그로 렌더링합니다. */
  big?: boolean
  /** Hello 버튼 누를 때 호출 할 함수 */
  onHello?: () => void
  /** Bye 버튼 누를 때 호출 할 함수 */
  onBye?: () => void
}

function Hello({ name, big, onHello, onBye }: HelloProps) {
  return (
    <div>
      {big ? <h1>안녕하세요, {name}</h1> : <p>안녕하세요, {name}</p>}
      <div>
        <button onClick={onHello}>Hello</button>
        <button onClick={onBye}>Bye</button>
      </div>
    </div>
  )
}

Hello.defaultProps = {
  big: false,
}

export default Hello