📙

solidjs のプロジェクトでstorybookを使う

3 min read

はじめに

solidjs は公式で storybook フレームワークが提供されていません。
ですが、 config などを設定することによって Solidjs を storybook で使えるのでそのセットアップ手順を書いてきます。

完成品

https://github.com/mochi-sann/solid-js-storybook

手順

プロジェクトセットアップ

npx degit solidjs/templates/ts solid-js-app
cd solid-js-app
yarn i
yarn dev

storybook で表示するコンポーネントを作成

storybook で表示するためにここではボタン Component としてsrc/components/myButton.tsxと storybook 用のファイルのsrc/components/MyButton.stories.tsxを作成します。

src/components/myButton.tsx
import { Component } from "solid-js";
export type MyButtonProps = {
  name: string;
};
const MyButton: Component<MyButtonProps> = (props) => {
  return (
    <button
      style={{
        "background-color": "#0000FF",
        color: "#FFFFFF",
      }}
    >
      ボタン : {props.name}
    </button>
  );
};
export default MyButton;

ここではボタンを分かりやすくするためにボタンを青色にしています。

src/components/MyButton.stories.tsx
import MyButton from "./MyButton";
export default {
  title: "MyButton",
};
export const Default = () => <MyButton name={"NAME"} />;

storybook 用のファイルを作成。

storybook をインストール

npx sb init

を入力したら

? Do you want to manually choose a Storybook project type to install? › (y/N)

と手動でインストールするか聞かれるのでyを押します

? Please choose a project type from the following list: › - Use arrow-keys. Return to submit.

と storybook のプロジェクトタイプを聞かれるので下にスクロールしてhtmlを選択します。

storybook の設定をカスタマイズ

いまの設定のままでは Solidjs の Component ファイルは動作しないので設定を修正します。
最初は、Storybook をインストールしたときに生成されたファイルがあるsrc/storiesを削除します。
つぎに.storybook/main.jsを次のように修正します。

.storybook/main.js
module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
-  "framework": "@storybook/html"
};

.storybook/preview.jsも修正。

.storybook/preview.js
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}

+import { createRoot } from "solid-js";
+import { insert, template, createComponent } from "solid-js/web";
+import { GLobalStyle } from "../src/components/system/global";
+export const decorators = [
+  (Story) =>
+    createRoot(() => {
+      // Wrap the component in a <div> tag.
+      GLobalStyle;
+      const el = template(`<div></div>`, 2).cloneNode(true);
+      insert(el, createComponent(Story, {}));
+      return el;
+    }),
+];

Babel の設定

storybook に使われる bable.js に Solid プリセットも追加します

yarn add -D babel-preset-solid

.babelrcを作成して下の様に書きます

.babelrc
{
  "presets": ["solid"]
}

完成

これで

yarn run storybook

を実行したら画像の様に Component が storybook に表示されます。
storybookの画像

参考にしたサイトなど

https://github.com/Launch-AI/launch-solid-ui

https://github.com/solidjs/solid/pull/81/commits/34c6a188d045ebd65b7deecc9c7b861c14687315
GitHubで編集を提案

Discussion

ログインするとコメントできます