水無瀬のプログラミング日記

プログラムの勉強した時のメモ

ReactでStorybookを導入する

はじめに

前回、AngularでStorybookを導入したので、今回はReactでやってみる。
ついでに前から気になってたstyled-omponentsも試してみる。

TL;DR.

ソースコード

Reactプロジェクト作成

create-react-appを使ってサクッと作る。

$ npx create-react-app react-component --typescript

Storybook導入

Reactについても公式に手順があるので参考にしながら進める。

# create-react-appを使っている場合こっち
$ npx -p @storybook/cli sb init --type react_scripts

# 使わなかった場合は
$ npx -p @storybook/cli sb init --type react

TypeScriptに対応させる

上記手順で導入した場合、js向けに作成されるのでtsに対応させる。

main.jsを修正する

初期状態だとstories: ['../src/**/*.stories.js']となっているので、
stories: ['../src/**/*.stories.ts']と修正しておく。

module.exports = {
  stories: ['../src/**/*.stories.ts'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
};

tsconfig.jsonの追加

ざっくり対象になるよう./storybook配下に追加。

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "types": [
      "node"
    ]
  },
  "exclude": [
    "../src/test.ts",
    "../src/**/*.test.tsx"
  ],
  "include": [
    "../src/**/*"
  ]
}

Storyを作成する

src/stories配下にButton.stories.ts(ファイル名は任意)を作成。
公式のサンプルとはちょっと違うが動いているので一旦これで良しとする。
※元のComponentは後述

import { ButtonComponent } from '../component/Button';

export default {
  title: 'Button',
  component: ButtonComponent
};

export const ButtonDefault = () => ButtonComponent({text: 'default'});
export const ButtonSmall = () => ButtonComponent({text: 'small', size: 'small'});
export const ButtonLarge = () => ButtonComponent({text: 'default', size: 'large'});
export const ButtonPrimary = () => ButtonComponent({text: 'primary', types: 'primary'});

作成したComponent

Button.tsx

内容はAngularでやったものと同じ。

import React from 'react';
import styled, { css } from 'styled-components';

type ButtonProps = {
  text: string,
  size?: 'small' | 'large',
  types?: 'primary' | 'error' | 'warning'
};

const Button = styled.button<Pick<ButtonProps, 'types' | 'size'>>`
  ${({size}) => getSize(size)}
  ${({types}) => getColor(types)}
`;

const getSize = (size: ButtonProps['size']) => {
  switch (size) {
    case 'small':
      return css`
        width: 72px;
        height: 30px;
        font-size: 10px;
      `;
    case 'large':
      return css`
        width: 300px;
        height: 100px;
        font-size: 24px;
      `;
    default:
      return css`
        width: 150px;
        height: 50px;
        font-size: 16px;
      `;
  }
}
const getColor = (type?: ButtonProps['types']) => {
  switch(type) {
    case 'primary':
      return css`
        background-color: #007bff;
        border: 1px solid #007bff;
        border-radius: 5px;
        color: #fff;
      `;
    default:
      return css`
        background-color: #fff;
        border: 1px solid #000;
        color: #333;
      `;
  }
}

export const ButtonComponent = (props: ButtonProps) => <Button size={props.size} types={props.types}>{props.text}</Button>;

実行してみる

今回も追加されたscriptがあるので、yarn storybookを実行すれば良い。

f:id:minase_mira:20200309212707p:plain 画像の様にブラウザが立ち上がり、表示されればOK。

おまけ

styled-componentsの導入は下記コマンドでOK。

$ yarn install --dev styled-components

まとめ

今回はReactでStorybookを導入した。
Storybookよりもstyled-components使ってComponent作るほうが大変だった。。。
Angular,ReactとやったのでそのうちVueもやってみようかな。

参考リンク