Astro · React · Vue · Svelte · Solid · Angular · Lit · Preact

1 つのドキュメントを、8 つのフレームワークで。

storybook-sandbox は、屋号 .&-(Dot_and_Dash) の LP を構成する 13 コンポーネントを、 8 種のフレームワークの Storybook として構築し、1 サイトにまとめて公開するサンドボックスです。 フレームワーク間での「書き味・ビルド速度・ドキュメント(autodocs)品質」を、同じ UI を横並びに観察することで比較できます。

このサンドボックスの特徴

🗂️

8 フレームワーク横断

Astro · React · Vue · Svelte · Solid · Angular · Lit · Preact

同じ 13 コンポーネントを独立したディレクトリごとに実装。Storybook 8.x / 10.x で一括ビルドします。

📄

Storybook のみ構成

UI-Library Sandbox

フルアプリ・ルーティングなし。コンポーネント集とドキュメントに集中したシンプル構成です。

📚

autodocs 自動生成

Docs

全フレームワークで DocPage を自動生成。docgen の当たり具合を横並びで比較できます。

🎨

Neo Brutalism

Design System

共通 CSS をコピー配布し、Storybook UI 全体を屋号 .&- のネオ・ブルータリズムで統一しています。

🧩

特集コーナー

Storybook特集 / okf-seedling

全 Storybook に、OKF の知識バンドル入門(okf-seedling)を特集ページとして収録。

📦

bundle.json 発行

Knowledge Bundle

各 Storybook の全コンテンツを OKF 風・機械可読な bundle.json として発行。情報バンドルツールとしても利用できます。

Storybook を見る

各フレームワークの Storybook を開けます。Storybook の中で 13 コンポーネントと特集コーナーを実際に触ってみてください。

🌠

Astro

Astro 4 + React
available
⚛️

React

React 18 + Vite
available
💚

Vue

Vue 3 + Vite
available
🧡

Svelte

Svelte 5 + Vite
available
🔷

Solid

Solid 1.9 + Vite (Storybook 10)
available
🔺

Angular

Angular 17 + Webpack5
available
🧩

Lit

Lit 3 (Web Components) + Vite
available
💠

Preact

Preact 10 + Vite
available

特集コーナー + 知識バンドル(OKF)

Storybook を「情報バンドルツール」として。 各 Storybook に Storybook特集 / okf-seedling(OKF の知識バンドル入門)を収録しています。 また、13 LP コンポーネント + 特集の全コンテンツは bundle.json(OKF 風・機械可読な知識バンドル)として フレームワークごとに発行され、ルートの bundle.json が全フレームワークの索引(index)として機能します。
ローカルでの確認方法: npm run build(ルート)で全フレームワークを一括ビルドし、 npx serve storybook-static で管理ページを開くと、各 Storybook へ移動できます。 単体で試す場合は各アプリで npm run build-storybook を実行します。
React の Storybook を見る →