📙
solidjs のプロジェクトでstorybookを使う
はじめに
solidjs は公式で storybook フレームワークが提供されていません。
ですが、 config などを設定することによって Solidjs を 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 に表示されます。
参考にしたサイトなど
Discussion