styleguide-v2

styleguide-v2

zudo-doc ベースのコンポーネントスタイルガイド。Preact compat モードで動作。

概要

• ポート: 44323
• コマンド: pnpm styleguide-v2:dev
• 場所: sub-packages/styleguide-v2/
• デプロイ: /styleguide-v2/ サブパス

主な機能

CodeMirror ライブコード編集

HtmlPreview コンポーネントのコードブロック (HTML/CSS/JS) が CodeMirror エディタで編集可能。変更はブラウザ内のみで、iframe プレビューがリアルタイムに更新される。

• 300ms デバウンスで iframe 再ビルド
• Reset ボタンで元のコードに復元
• Copy ボタンでクリップボードにコピー

ストーリーソースビューア

各ストーリーページで .stories.tsx のソースコードを CodeMirror で表示。ビルド時に ?raw インポートでソースを取得。

• 「Show source」トグルで展開
• Copy ボタンで AI 通信ワークフロー用にコピー

Tailwind クラス補完

CodeMirror エディタ内で class="..." や className="..." を入力中に、プロジェクトの Tailwind ユーティリティクラスを自動補完。

• @theme トークンからビルド時に 3,494 クラスを生成
• scripts/generate-tw-classes.ts でクラスリスト更新
• spacing, color, typography, border, sizing, shadow 全カテゴリ対応
• CSS 値を detail として表示

Token Tweak Panel

3 つのトークンシステム (zd-, zaudio-, styleguide) のライブ編集パネル。

サイドバー

• zudo-doc のサイドバーツリー
• ストーリーカテゴリの自動検出
• フィルター機能

技術詳細

デザインシステム統合

@takazudo-modular/design-system パッケージを使用。Tight Token Strategy に従い、Tailwind デフォルトを無効化。

CodeMirror 構成

• editable-code.tsx: HTML/CSS/JS 用（遅延読み込み）
• story-source-editor-setup.ts: TSX 用
• tw-completion.ts: Tailwind 補完ソース
• すべて @codemirror/* の選択的インポート（basicSetup 不使用）

ストーリー検出

import.meta.glob で components/**/*.stories.tsx を自動検出。?raw クエリで生ソースも取得。

コマンド

pnpm styleguide-v2:dev          # 開発サーバー (port 44323)
pnpm styleguide-v2:build        # プロダクションビルド
pnpm --filter @zmod/styleguide-v2 generate:tw-classes  # Tailwind クラスリスト再生成