STATE OF PLAY

素材感と動きを備えたUIパーツを、実際に操作して選べるライブラリです。現在のバージョンは 4.16.0。ReactとVanillaの実装、使い方、AI用プロンプト、個別ZIPを提供します。

DEPLOYMENT

https://lye-0.github.io/STATE-OF-PLAY/

パーツ一覧

37種類・1,850パーツを収録しています。Aは素材感と動きを楽しむ「表現重視」、Bは落ち着きと読みやすさを優先する「実用重視」です。Liquid Glassの70パーツも、それぞれの通常カテゴリに含まれます。全カテゴリでA・B合計50種類以上、A・Bそれぞれ5種類以上を収録しています。

種類	合計	A	B
トグル	50	38	12
ブロック	50	36	14
装飾	50	37	13
スクロールバー	50	40	10
プルダウン	50	40	10
アコーディオン	50	36	14
テキストボックス	50	35	15
ボタン	50	37	13
リンク	50	36	14
タブ	50	37	13
セグメント	50	38	12
チェックボックス	50	37	13
ポップアップ	50	37	13
スライダー	50	38	12
ラジオ／選択カード	50	38	12
コンボボックス	50	38	12
通知	50	40	10
ツールチップ／ポップオーバー	50	38	12
進捗表示	50	36	14
ローダー	50	34	16
ファイル選択	50	38	12
日時選択	50	38	12
ページ送り	50	37	13
パンくず	50	38	12
タグ／チップ	50	38	12
数値入力	50	38	12
アバター／ユーザーチップ	50	38	12
評価	50	38	12
カラーピッカー	50	38	12
スケルトン	50	37	13
タイムライン	50	38	12
ステップ／ウィザード	50	38	12
検索バー	50	38	12
コマンドパレット	50	38	12
右クリックメニュー	50	38	12
ナビゲーション	50	36	14
テーブル／データグリッド	50	38	12
合計	1850	1388	462

件数は src/catalog/registry.json に登録された各パーツの meta.json から集計しています。同じパーツのTSX / JSX / TS / JS版は、合わせて1件として数えます。

展示と詳細

展示は各パーツの代表値です。詳細では、変更に適したパーツの主要な色を1〜2項目だけ調整できます。色見本・自由な色選択・カラーコードに対応し、変更した配色をコード・AI用プロンプト・ZIPへ反映します。展示の色は変わりません。Liquid Glassの透明度・背景ぼかしとも併用できます。

• カテゴリとA/Bフィルターでデザインを比較し、各パーツを直接操作できます。初期表示はトグル。「すべて」は24件ずつ表示します。
• カードの余白または「CODE」から詳細を開き、コード・使い方・プロンプトを確認できます。
• 詳細では実装形式と配置を選び、ファイルのコピー・保存やパーツZIPの取得ができます。プロンプトはコード込み／文章のみを選択できます。
• Liquid Glassは詳細の「透明度」と「背景のぼかし」で調整できます。面・持ち手・展開パネルの濃淡を保ち、プレビュー、配布コード、プロンプト、ZIPへ反映します。展示のテンプレートは変更しません。

開発を始める

Node.js 22.12.0以上とnpmを使用します。

npm ci
npm run dev

ターミナルに表示されたURLを開いてください。

npm run build
npm run preview

dist/ に本番用の静的サイトを生成します。相対パスで配信できる構成です。

GitHub Pagesで公開する

1. リポジトリの Settings → Pages → Build and deployment → Source を GitHub Actions に設定します。
2. mainへpushすると、公開ワークフローが自動で起動します。
3. 完了後、デプロイジョブに表示されるURLを開きます。通常の公開先は https://lye-0.github.io/STATE-OF-PLAY/ です。

公開ワークフロー はmainへのpushで起動します。型チェック・本番ビルド・静的配信のブラウザー検証が成功した場合に、dist/ を公開します。手動で再公開する場合は Actions → Deploy GitHub Pages → Run workflow → main を選んで実行できます。Pages設定から配信パスを取得するため、プロジェクト用のサブパスと独自ドメインの両方に対応します。初回のPages有効化は上記の設定画面で行ってください。

公開用と同じサブパスでローカル確認する場合は、次を実行します。

npm run build -- --base /STATE-OF-PLAY/
npm run test:pages

ブラウザー検証には、検証手順にあるChromiumのインストールが必要です。リポジトリ名や独自ドメインを変更した場合、test:pages の PAGES_BASE_PATH 環境変数を配信パスに合わせます（独自ドメイン直下は空文字）。この検証はSPAのフォールバックを使わず、37カテゴリ、詳細への直接リンクと再読み込み、コードとプロンプト、ファイルとZIP保存を確認します。

パーツを持ち出す

形式	内容
TSX	React + TypeScript
JSX	React + JavaScript
TS	HTML + TypeScript
JS	HTML + JavaScript（ES Modules）

配置は、必要な依存を本体フォルダー内へまとめる 導入向け（portable） と、src/parts/・src/shared/ の階層を保つ 元の構成（original） を選べます。React版は利用先のReact環境が必要です。Vanilla版に実行時の外部ライブラリ依存はありません。

既存アプリへの組み込みは 導入ガイド を参照してください。個別のAPIは各パーツの詳細画面と src/parts/<category>/<id>/usage.md に記載しています。

CLIでパーツZIPを生成することもできます。

npm run export:parts -- --part chrome --format tsx --layout portable

release/parts/ に出力します。--part を省略すると全パーツ、--format を省略すると4形式、--layout all で両配置を生成します。

リポジトリ全体のソースZIPは次のコマンドで生成します。

npm run package

release/STATE-OF-PLAY-v4.16.0-full-repository.zip にソース・設定・テスト・文書と RELEASE-MANIFEST.json を収録し、CRCとSHA-256を検証します。node_modules/・dist/・検証生成物は含みません。

検証

npm run typecheck
npm test
npx playwright install chromium
npm run verify

verify は型チェック、単体テスト、本番ビルド、ブラウザー操作、配布後の独立動作までを順番に確認します。Linuxでブラウザーのシステム依存も必要な場合は npx playwright install --with-deps chromium を使います。

GitHub ActionsはUbuntu / Windowsの各環境で、preflight・gallery・relocation・controls・features・glassの6グループに分けて検証します。個別のテストコマンドは package.json を参照してください。

ソースと文書

場所	役割
src/parts/	各パーツの実装・メタデータ・使い方・プロンプト
src/shared/	共通コントローラー、React View、素材と動きの処理
src/app/	展示・詳細画面
src/catalog/	登録一覧、カテゴリ、配布データの共通モデル
scripts/	カタログ生成、参照変換、Vite連携、ZIP生成
tests/	単体・ブラウザー・配布後の検証とフィクスチャー

• 導入ガイド：既存プロジェクトへの組み込みと素材の調整
• 内部構成：正本、遅延読み込み、配布生成、検証
• パーツ追加：ファイル構成、登録、依存と操作の契約

パーツのライセンス

配布パーツは英語の STATE OF PLAY Parts License 1.0 に従って利用できます。商用利用・改変は自由です。完成したサイト・アプリへ組み込む場合は、画面のクレジットだけでなく、作者名・リンク・ライセンス文の掲載や保持も不要です。完成品のソース公開やブラウザーへのコード配信も、この扱いに含まれます。

パーツや改変版を、UIライブラリ・素材集・再利用用テンプレートなどとして再配布する場合は、著作権表示・STATE OF PLAYの名称・入手元URL・ライセンス全文を残してください。個別ZIPには PARTS-LICENSE を同梱し、使い方と両形式のプロンプトにも全文を含めます。

この許諾はパーツと必要な自作の共有処理・使用例などが対象です。リポジトリ全体・展示サイト・生成ツールへ利用ライセンスを付けるものではなく、第三者の素材や依存の条件も変更しません。

展示サイトとZIP生成ツールに同梱する外部コードの著作権・ライセンス全文は THIRD-PARTY-NOTICES.md にまとめています。本番サイトと全体ソースZIPにも同じ文書を含めます。