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);

他のストーリーを追加すると、以下のようにストーリーブックに表示されます.
스토리 자동으로 스토리북에 추가되도록 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
イベント送信時に出力して確認する方法
installyarn add --dev @storybook/[email protected] @storybook/[email protected]addons.jsを使用すると、StoryBookで拡張ツールを識別できます.

./storybook/addons.js

import '@storybook/addon-actions/register'

addon-jsx
ストレージマニュアルでJSXコードを直接表示できるツールです.
installyarn 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

Airbe&Bで公開されているスタイル要素ライブラリです.
注文部品の形で体現する.

使用方法

設定

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

テーマファイル

必要に応じてトピックファイルを作成し、スタイルとして使用できます.
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;

コンポーネント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);