diff --git a/CLAUDE.md b/CLAUDE.md index e684bdf6..ec1f0517 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -43,7 +43,12 @@ src/ ├── patterns/ # APG パターン実装 │ └── button/ # 例: button パターン │ ├── meta.ts # パターンメタデータ（単一の真実源） -│ ├── DemoSection.astro # 全フレームワーク統合デモ +│ ├── DemoSection.astro # 全フレームワーク統合デモ（legacy） +│ │ # ↓ または framework 別に分割（後述） +│ ├── DemoSection.react.astro # React 用デモ（split 後） +│ ├── DemoSection.vue.astro # Vue 用デモ（split 後） +│ ├── DemoSection.svelte.astro # Svelte 用デモ（split 後） +│ ├── DemoSection.web-component.astro # Astro Web Component 用（split 後） │ ├── TestingDocs.astro # テストドキュメント │ ├── Button.tsx # React 実装 │ ├── Button.vue # Vue 実装 @@ -78,8 +83,9 @@ src/ 各パターンの `meta.ts` が単一の真実源（Single Source of Truth）となる。1つの `meta.ts` から 4フレームワーク × 2言語 = 8ページが動的に生成される。 - **`meta.ts`**: タイトル、説明、TOC、リソース、フレームワーク別メタデータ（ソースファイル、API Props/Events/Slots）を `PatternMeta` 型で定義。全テキストは `Record` で i18n 対応 -- **`DemoSection.astro`**: 4フレームワークの実装を静的 import し、`framework` prop で切り替えて表示 -- **動的ルーティング**: `[pattern]/[framework]/index.astro` が `import.meta.glob()` で全パターンの `meta.ts` を検出し、`getStaticPaths()` でビルド時にページ生成 +- **`DemoSection.*.astro`** (推奨): framework ごとに分割した薄い Astro。`DemoSection.{react,vue,svelte,web-component}.astro` が、それぞれ自分の framework の実装ファイルだけを静的 import する。ページ側 dispatcher が `framework` から該当ファイルを選んで呼ぶ +- **`DemoSection.astro`** (legacy): 4 framework の実装を 1 ファイルで静的 import する旧形式。dispatcher にフォールバックとして残してあり、まだ移行していない pattern で使われている。**注意**: legacy 形式は `@vitejs/plugin-react v6` + Vite 8 + Vue SFC ` diff --git a/src/patterns/toolbar/DemoSection.react.astro b/src/patterns/toolbar/DemoSection.react.astro new file mode 100644 index 00000000..f51dabcf --- /dev/null +++ b/src/patterns/toolbar/DemoSection.react.astro @@ -0,0 +1,93 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import { + ToolbarToggleDemo as ToolbarToggleDemoReact, + ToolbarToggleDefaultDemo as ToolbarToggleDefaultDemoReact, + TextFormattingToolbarDemo as TextFormattingToolbarDemoReact, + VerticalToolbarDemo as VerticalToolbarDemoReact, + DisabledItemsToolbarDemo as DisabledItemsToolbarDemoReact, +} from './ToolbarToggleDemo'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+

+ {isJa ? 'テキスト書式ツールバー' : 'Text Formatting Toolbar'} +

+

+ { + isJa + ? 'トグルボタンと通常のボタンを持つ水平ツールバー。' + : 'A horizontal toolbar with toggle buttons and regular buttons.' + } +

+
+ +
+
+ +
+

{isJa ? '垂直ツールバー' : 'Vertical Toolbar'}

+

+ {isJa ? '上下矢印キーで操作します。' : 'Use arrow up/down keys to navigate.'} +

+
+ +
+
+ +
+

{isJa ? '無効な項目付き' : 'With Disabled Items'}

+

+ { + isJa + ? '無効な項目はキーボードナビゲーション中にスキップされます。' + : 'Disabled items are skipped during keyboard navigation.' + } +

+
+ +
+
+ +
+

+ {isJa ? '制御されたトグルボタン' : 'Controlled Toggle Buttons'} +

+

+ { + isJa + ? '制御された状態を持つトグルボタン。現在の状態が表示され、サンプルテキストに適用されます。' + : 'Toggle buttons with controlled state. The current state is displayed and applied to the sample text.' + } +

+
+ +
+
+ +
+

+ {isJa ? 'デフォルトの押下状態' : 'Default Pressed States'} +

+

+ {isJa ? '初期状態に' : 'Toggle buttons with'} + defaultPressed{' '} + { + isJa + ? 'を使用したトグルボタン。無効状態を含みます。' + : 'for initial state, including disabled states.' + } +

+
+ +
+
diff --git a/src/patterns/toolbar/DemoSection.svelte.astro b/src/patterns/toolbar/DemoSection.svelte.astro new file mode 100644 index 00000000..365f0a98 --- /dev/null +++ b/src/patterns/toolbar/DemoSection.svelte.astro @@ -0,0 +1,91 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import TextFormattingToolbarDemoSvelte from './TextFormattingToolbarDemo.svelte'; +import VerticalToolbarDemoSvelte from './VerticalToolbarDemo.svelte'; +import DisabledItemsToolbarDemoSvelte from './DisabledItemsToolbarDemo.svelte'; +import ToolbarToggleDemoSvelte from './ToolbarToggleDemo.svelte'; +import ToolbarToggleDefaultDemoSvelte from './ToolbarToggleDefaultDemo.svelte'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+

+ {isJa ? 'テキスト書式ツールバー' : 'Text Formatting Toolbar'} +

+

+ { + isJa + ? 'トグルボタンと通常のボタンを持つ水平ツールバー。' + : 'A horizontal toolbar with toggle buttons and regular buttons.' + } +

+
+ +
+
+ +
+

{isJa ? '垂直ツールバー' : 'Vertical Toolbar'}

+

+ {isJa ? '上下矢印キーで操作します。' : 'Use arrow up/down keys to navigate.'} +

+
+ +
+
+ +
+

{isJa ? '無効な項目付き' : 'With Disabled Items'}

+

+ { + isJa + ? '無効な項目はキーボードナビゲーション中にスキップされます。' + : 'Disabled items are skipped during keyboard navigation.' + } +

+
+ +
+
+ +
+

+ {isJa ? '制御されたトグルボタン' : 'Controlled Toggle Buttons'} +

+

+ { + isJa + ? '制御された状態を持つトグルボタン。現在の状態が表示され、サンプルテキストに適用されます。' + : 'Toggle buttons with controlled state. The current state is displayed and applied to the sample text.' + } +

+
+ +
+
+ +
+

+ {isJa ? 'デフォルトの押下状態' : 'Default Pressed States'} +

+

+ {isJa ? '初期状態に' : 'Toggle buttons with'} + defaultPressed{' '} + { + isJa + ? 'を使用したトグルボタン。無効状態を含みます。' + : 'for initial state, including disabled states.' + } +

+
+ +
+
diff --git a/src/patterns/toolbar/DemoSection.vue.astro b/src/patterns/toolbar/DemoSection.vue.astro new file mode 100644 index 00000000..909098a6 --- /dev/null +++ b/src/patterns/toolbar/DemoSection.vue.astro @@ -0,0 +1,91 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import TextFormattingToolbarDemoVue from './TextFormattingToolbarDemo.vue'; +import VerticalToolbarDemoVue from './VerticalToolbarDemo.vue'; +import DisabledItemsToolbarDemoVue from './DisabledItemsToolbarDemo.vue'; +import ToolbarToggleDemoVue from './ToolbarToggleDemo.vue'; +import ToolbarToggleDefaultDemoVue from './ToolbarToggleDefaultDemo.vue'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+

+ {isJa ? 'テキスト書式ツールバー' : 'Text Formatting Toolbar'} +

+

+ { + isJa + ? 'トグルボタンと通常のボタンを持つ水平ツールバー。' + : 'A horizontal toolbar with toggle buttons and regular buttons.' + } +

+
+ +
+
+ +
+

{isJa ? '垂直ツールバー' : 'Vertical Toolbar'}

+

+ {isJa ? '上下矢印キーで操作します。' : 'Use arrow up/down keys to navigate.'} +

+
+ +
+
+ +
+

{isJa ? '無効な項目付き' : 'With Disabled Items'}

+

+ { + isJa + ? '無効な項目はキーボードナビゲーション中にスキップされます。' + : 'Disabled items are skipped during keyboard navigation.' + } +

+
+ +
+
+ +
+

+ {isJa ? '制御されたトグルボタン' : 'Controlled Toggle Buttons'} +

+

+ { + isJa + ? 'v-model を使用した制御された状態を持つトグルボタン。現在の状態が表示され、サンプルテキストに適用されます。' + : 'Toggle buttons with controlled state using v-model. The current state is displayed and applied to the sample text.' + } +

+
+ +
+
+ +
+

+ {isJa ? 'デフォルトの押下状態' : 'Default Pressed States'} +

+

+ {isJa ? '初期状態に' : 'Toggle buttons with'} + default-pressed{' '} + { + isJa + ? 'を使用したトグルボタン。無効状態を含みます。' + : 'for initial state, including disabled states.' + } +

+
+ +
+
diff --git a/src/patterns/toolbar/DemoSection.web-component.astro b/src/patterns/toolbar/DemoSection.web-component.astro new file mode 100644 index 00000000..d63abdea --- /dev/null +++ b/src/patterns/toolbar/DemoSection.web-component.astro @@ -0,0 +1,163 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import Toolbar from './Toolbar.astro'; +import ToolbarButton from './ToolbarButton.astro'; +import ToolbarToggleButton from './ToolbarToggleButton.astro'; +import ToolbarSeparator from './ToolbarSeparator.astro'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+

+ {isJa ? 'テキスト書式ツールバー' : 'Text Formatting Toolbar'} +

+

+ { + isJa + ? 'トグルボタンと通常のボタンを持つ水平ツールバー。' + : 'A horizontal toolbar with toggle buttons and regular buttons.' + } +

+
+ + Bold + Italic + Underline + + Align Left + Center + Align Right + + Copy + Cut + Paste + +
+
+ +
+

{isJa ? '垂直ツールバー' : 'Vertical Toolbar'}

+

+ {isJa ? '上下矢印キーで操作します。' : 'Use arrow up/down keys to navigate.'} +

+
+ + New + Open + Save + + Print + +
+
+ +
+

{isJa ? '無効な項目付き' : 'With Disabled Items'}

+

+ { + isJa + ? '無効な項目はキーボードナビゲーション中にスキップされます。' + : 'Disabled items are skipped during keyboard navigation.' + } +

+
+ + Undo + Redo + + Cut + Copy + Paste + +
+
+ +
+

+ {isJa ? 'イベント処理付きトグルボタン' : 'Toggle Buttons with Event Handling'} +

+

+ {isJa ? '' : 'Toggle buttons that emit'} + pressed-change{' '} + { + isJa + ? 'イベントを発行するトグルボタン。現在の状態がログに記録され表示されます。' + : 'events. The current state is logged and displayed.' + } +

+
+ + Bold + Italic + Underline + +
+

+ Current state:{' '} + + {'{ bold: false, italic: false, underline: false }'} + +

+
+
+ Sample text with applied formatting +
+
+
+ +
+

+ {isJa ? 'デフォルトの押下状態' : 'Default Pressed States'} +

+

+ {isJa ? '初期状態に' : 'Toggle buttons with'} + defaultPressed{' '} + { + isJa + ? 'を使用したトグルボタン。無効状態を含みます。' + : 'for initial state, including disabled states.' + } +

+
+ + Bold (default on) + Italic (default off) + + Disabled (pressed) + Disabled (not pressed) + +
+
+ +