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
を実行すれば良い。
画像の様にブラウザが立ち上がり、表示されればOK。
おまけ
styled-componentsの導入は下記コマンドでOK。
$ yarn install --dev styled-components
まとめ
今回はReactでStorybookを導入した。
Storybookよりもstyled-components使ってComponent作るほうが大変だった。。。
Angular,ReactとやったのでそのうちVueもやってみようかな。