Astro · React · Vue · Svelte · Solid · Angular · Lit · Preact
1 つのドキュメントを、8 つのフレームワークで。
storybook-sandbox は、屋号 .&-(Dot_and_Dash) の LP を構成する 13 コンポーネントを、 8 種のフレームワークの Storybook として構築し、1 サイトにまとめて公開するサンドボックスです。 フレームワーク間での「書き味・ビルド速度・ドキュメント(autodocs)品質」を、同じ UI を横並びに観察することで比較できます。
同じ 13 コンポーネントを独立したディレクトリごとに実装。Storybook 8.x / 10.x で一括ビルドします。
フルアプリ・ルーティングなし。コンポーネント集とドキュメントに集中したシンプル構成です。
全フレームワークで DocPage を自動生成。docgen の当たり具合を横並びで比較できます。
共通 CSS をコピー配布し、Storybook UI 全体を屋号 .&- のネオ・ブルータリズムで統一しています。
全 Storybook に、OKF の知識バンドル入門(okf-seedling)を特集ページとして収録。
各 Storybook の全コンテンツを OKF 風・機械可読な bundle.json として発行。情報バンドルツールとしても利用できます。
各フレームワークの Storybook を開けます。Storybook の中で 13 コンポーネントと特集コーナーを実際に触ってみてください。
Storybook特集 / okf-seedling(OKF の知識バンドル入門)を収録しています。
また、13 LP コンポーネント + 特集の全コンテンツは bundle.json(OKF 風・機械可読な知識バンドル)として
フレームワークごとに発行され、ルートの bundle.json が全フレームワークの索引(index)として機能します。
npm run build(ルート)で全フレームワークを一括ビルドし、
npx serve storybook-static で管理ページを開くと、各 Storybook へ移動できます。
単体で試す場合は各アプリで npm run build-storybook を実行します。