storybook導入

[kappakun17]

概要

ReactFlowのコンポーネントをStorybookで利用できるよう環境設定

使用方法

ファイル追加はせず、ただStorybookの動作チェックがしたい場合、[2]から進んでください。

1. src/compornents/配下に、3点のファイルをそれぞれ用意

ファイル名	説明
コンポーネント.tsx	Applicationで使用するコンポーネント定義
コンポーネント.stories.ts	Storybookで利用するための設定
コンポーネント.css	コンポーネント.tsxのスタイル定義

2. storybookを実行

   npm run storybook

レビュー

@KagenoMoheji @yuta0193

• [ ] storybookを立ち上げ、DemoNodeが確認できること
• [ ] (興味があれば)自分でオリジナルコンポーネントを作り vite+react, storybookどちらでも表示できること

ひとまず上記が通ればOKかなと思います🙌

共有

今回のために、テスト用ReactFlowのカスタムノードを用意

名前: DemoNode DIR : src/components/DemoNode.tsx Vite + React, Storybook. どちらでも表示可能であることを確認済み。

StorybookをReactFlow-hook対応するように設定

輪読会で、ReactFlowのライブラリを勉強した時に出てきた、ReactFlowが用意するhooksを使用するため、 何もしない場合、Storybookでは対応ができず、コンポーネントが表示されない。

StorybookもReactFlowのhooksをラッパーするように .storybook/preview でデコレーターを設定した。

export const decorators = [
  (Story) => (
    // ReactFlowのhookがラッパーされている
    <ReactFlowProvider>
      <Story />
    </ReactFlowProvider>
  )
]

懸念

• おそらく、今後、実装を進めていく上で何か詰まるかもしれないが、一旦しばらくは実装なさそう
• 状態管理(react-redux, zustand)などを使ってNodes, Edgesを管理する場合、storybookのProviderも同様設定が必要そう

  
  // .storybook/preview/
  import { create } from 'zustand';
  import { ReactFlowProvider } from 'reactflow';
  import createContext from 'zustand/context'
  import React from 'react';
  // カスタムプロバイダーを用意
  const { Provider, useStore } = createContext()
  // 状態管理を用意
  const createStore = () => create((set) =>({
  nodes: [],
  edges: [],
  addNode: (node) => set((state) => ({ nodes: [...state.nodes, node] })),
  // 同様
  addEdge: (edge) => set((state) => ({ edges: [...state.edges, edge] })),
  // 同様
  }))

// Storybook の設定ファイル（.storybook/preview.js など） export const decorators = [ (Story) => ( // Storybookで状態管理にアクセスできるようにする必要がある（Storybookのデータテストなど）

) ]

close #4 

[KagenoMoheji]

@kappakun17 あ，また別ブランチでいいのでstorybookの簡単なdoc欲しいかも