StoryBook

StoryBook이란?

비주얼 테스트를 위한 도구를 도입했는데, 화면을 구성하는 컴포넌트들을 독립적으로 관리하고
변화를 살펴볼수있는 방법

StoryBook 사용법

1. install

yarn add --dev @storybook/[email protected]

2. package.json에 명령어 추가

"scripts" : {
	"storybook" : "start-storybook -p 9001 -c .storybook",
    	 ...
  }

3. 스토리 파일 만들기

스토리는 컴포넌트의 여러 출력 형태를 구성한 페이지이다.
아래의 addWithJSX를 사용하기위해서는 5번의 라이브러리를 설치해야한다.

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import Input from '../03/Input';

storiesOf('Input', module)
  .addWithJSX('기본 설정', () => <Input name="name" />)
  .addWithJSX('label 예제', () => <Input name="name" label="이름" />)
  .addWithJSX('onChange 예제', () => <Input name="name" onChange={action('onChange 이벤트 발생')} />)
  .addWithJSX('value 예제', () => <Input name="name" label="이름" value="두잇"/>)
  .addWithJSX('errorMessage 예제', () => <Input name="name" label="이름" errorMessage="이름을 입력해주세요" />)
  .addWithJSX('autoFocus 예제', () => <Input name="name" label="이름" autoFocus />);

4. config.js에 연결하기

스토리를 스토리북에 연결하려면 프로젝트 루트폴더에 './storybook'이라는 이름의 폴더가
필요하다.

./storybook/config.js

import {configure} from '@storybook/react';

function loadStores(){
	require('../src/stories/InputStory');
    //스토리 파일을 추가 할수있다
}

configure(loadStories, module);

위의 과정을 거치고나면 Storybook에 아래와 같은 트리가 나타나게된다.

새로운 스토리를 추가하고싶을때에는

./stories/NewCounterStory.jsx
import React from 'react';
import { storiesOf } from '@storybook/react';

import NewCounter from '../03/NewCounter';

storiesOf('NewCounter', module).addWithJSX('기본 설정', () => <NewCounter count={0} />);

./storybook/config.js

import {configure} from '@storybook/react';

function loadStores(){
	require('../src/stories/InputStory');
    //스토리 파일을 추가 할수있다
    require('../src/stoires/NewCounterStory');
}

configure(loadStories, module);

다른 스토리들을 추가하면 아래와 같이 storybook에 나타나게된다.

스토리 자동으로 스토리북에 추가되도록 config.js 설정

import { configure, setAddon } from '@storybook/react';
import interopRequireDefault from 'babel-runtime/helpers/interopRequireDefault';


function loadStories() {
  const context = require.context('../src/stories', true, /Story\.jsx$/);
  context.keys().forEach(srcFile => {
    interopRequireDefault(context(srcFile));
  });
}

configure(loadStories, module);

5. storybook 확장도구 설치 및 사용

addon-actions
이벤트를 걸었을때 출력하여서 확인할수있는 방법
install
yarn add --dev @storybook/[email protected] @storybook/[email protected]

addons.js로 스토리북에 확장도구를 인식할수있도록 도와준다.

./storybook/addons.js

import '@storybook/addon-actions/register'

addon-jsx
스토리북에서 바로 JSX 코드를 확인할수있는 도구
install
yarn add --dev [email protected]

./storybook/addons.js

import '@storybook/addon-actions/register';
import 'storybook/addon-jsx/register';

addon-jsx는 addWithJSX를 사용하기때문에 config.js에 추가해주어야한다

import { configure, setAddon } from '@storybook/react';
import interopRequireDefault from 'babel-runtime/helpers/interopRequireDefault';
import JSXAddon from 'storybook-addon-jsx';

function loadStories() {
  const context = require.context('../src/stories', true, /Story\.jsx$/);
  context.keys().forEach(srcFile => {
    interopRequireDefault(context(srcFile));
  });
}

setAddon(JSXAddon);
configure(loadStories, module);

React-with-styles

에어비앤비에서 공개한 스타일 컴포넌트 라이브러리이다.
하이어오더 컴포넌트 형태로 구현되어 있다.

사용 방법

설치

yarn add react-with-styles aphrodite react-with-styles-interface-aphrodite

테마파일

자신이 원하는대로 테마파일을 만들어서 Styles로 사용할수있다.
ex)

//Theme.js

export default {
  // 색상
  color: {
    primary: '#03a9f4', // 주 색상
    secondary: '#795548', // 부 색상
    white: '#FFFFFF',
    gray: '#CCCCCC',
    default: '#999999', // 기본 문자 색상
    error: '#FF0000', // 오류 색상
  },
  // 폰트 사이즈
  size: {
    xg: 24,
    lg: 18,
    md: 14,
    sm: 12,
    xs: 10,
  },
  lineHeight: {
    xg: '60px',
    lg: '54px',
    md: '36px',
    sm: '24px',
    xs: '18px',
  },
  // 길이 단위
  unit: 4,
  // 반응형 미디어 속성
  responsive,
};

공용 스타일 컴포넌트 함수 만들기

//withStyles.js

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
import Theme from './Theme';

ThemedStyleSheet.registerTheme(Theme);
ThemedStyleSheet.registerInterface(aphroditeInterface);

export { css, withStyles, withStylesPropTypes, ThemedStyleSheet };
export default withStyles;

Component 사용 ex)

withStyles를 사용하여서 테마파일에 있는 값들을
가지고와서 내가 원하는 css와 테마파일에서 가져올수있는 값들을
조합하여서 css로 사용. props로 해당 값이 넘어온다면 true로
그 css가 사용이되게된다.
//Text.jsx

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import withStyles, { css } from './withStyles';

class Text extends PureComponent {
  render() {
    const {
      children,
      styles,
      large,
      xlarge,
      small,
      xsmall,
      primary,
      secondary,
    } = this.props;
    return (
      <span
        {...css(
          styles.default,
          xsmall && styles.xsmall,
          small && styles.small,
          large && styles.large,
          xlarge && styles.xlarge,
          secondary && styles.secondary,
          primary && styles.primary,
        )}
      >
        {children}
      </span>
    );
  }
}

Text.propTypes = {
  children: PropTypes.node.isRequired,
  xsmall: PropTypes.bool,
  small: PropTypes.bool,
  large: PropTypes.bool,
  xlarge: PropTypes.bool,
  secondary: PropTypes.bool,
  primary: PropTypes.bool,
};

export default withStyles(({ color, size, responsive }) => ({
  default: {
    color: color.default,
    fontSize: size.md,
  },
  xlarge: {
    fontSize: size.xg,
  },
  large: {
    fontSize: size.lg,
  },
  small: {
    fontSize: size.sm,
  },
  xsmall: {
    fontSize: size.xs,
  },
  primary: {
    color: color.primary,
  },
  secondary: {
    color: color.secondary,
  },
}))(Text);