Storybook 초기 셋팅하기

지난번에 Storybook 을 셋팅했었는데, 다시 해보려니 잘 안되서 다시 작성해보는 스토리북 셋팅

설정버전: 6.5.13

참고

• 스토리북 공식 페이지
• Storybook-StoryBook을-이용한-컴포넌트-단위-개발-기본세팅 <- 2020년 6월 이후로 그대로 따라하기엔 부적절함

1. 기본상태

• npx create-react-app 으로 프로젝트 생성
• Styled-component 설치함 npm install styled-components
• 전체적으로 yarn 아닌 npm 으로만 프로젝트 셋팅

2. 설치

npx storybook init --type react --use-npm

3. addon 설치

다른 글들을 보면 main.js에 에드온을 설정하는 내용이 있으나, 직접 수행해 본 결과, 일일이 추가하지 않아도 프리뷰에 적용되는 것을 확인함

3.1 addon-viewport: 뷰포트를 자유롭게 변경

npm i -D @storybook/addon-viewport

3.2 addon-a11y: 웹 접근성 추가

npm i -D @storybook/addon-a11y

4. 중간확인 1차

에러 없이 잘 동작하는지 확인
npm run storybook

5. preview.js 수정

아래 내용을 복붙 (프리뷰 설정 및 styled-components 가 적용됨)

import React from "react";
import { ThemeProvider } from "styled-components";
import {
  INITIAL_VIEWPORTS,
  MINIMAL_VIEWPORTS,
} from "@storybook/addon-viewport";
const theme = {
  fonts: ["sans-serif", "Roboto"],
};

export const decorators = [
  (Story) => (
    <ThemeProvider theme={theme}>
      <Story />
    </ThemeProvider>
  ),
];

const customViewports = {
  GalaxyNote20Ultra: {
    name: "Galaxy Note S20 Ultra",
    styles: {
      width: "412px",
      height: "883px",
    },
  },
  browser1024: {
    name: "Browser 1024px",
    styles: {
      width: "1024px",
      height: "100%",
    },
  },
  browser768: {
    name: "Browser 768px",
    styles: {
      width: "768px",
      height: "100%",
    },
  },
  browser500: {
    name: "Browser 500px",
    styles: {
      width: "500px",
      height: "100%",
    },
  },
};

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  viewport: {
    viewports: {
      ...customViewports,
      ...INITIAL_VIEWPORTS,
      ...MINIMAL_VIEWPORTS,
    }, // newViewports would be an ViewportMap. (see below for examples)
    defaultViewport: "GalaxyNote20Ultra",
  },
};

6. 최초 예제 생성

6.1 컴포넌트 생성

src > components > TimeBox > TimeBox.jsx 생성

import styled from "styled-components";
import PropTypes from "prop-types";

const TimeBoxStyle = styled.div`
  display: flex;
  background-color: #f1f;
`;

const TimeBox = ({ time }) => {
  return (
    <TimeBoxStyle>
      <div>{time}</div>
    </TimeBoxStyle>
  );
};

export { TimeBox };

TimeBox.propTypes = {
  time: PropTypes.string.isRequired,
};

TimeBox.defaultProps = {
  time: "2022-11-05T07:49:03.613Z",
};

6.2 stories 파일 생성

src > components > TimeBox > TimeBox.stories.js 생성

import React from "react";
import { TimeBox } from ".";

export default {
  title: "components/TimeBox",
  component: TimeBox,
};

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

const now = new Date();

export const Now = Template.bind({});
Now.args = {
  time: now.toISOString(),
};

export const Old = Template.bind({});
Old.args = {
  time: "2000-11-05T07:49:03.613Z",
};

export const Future = Template.bind({});
Future.args = {
  time: "2200-11-05T07:49:03.613Z",
};

6.3 index.js 생성

src > components > TimeBox > index.js 생성

import { TimeBox } from "./TimeBox";

export { TimeBox };

7. 확인

npm run storybook 실행
터미널 결과

결과화면