From 014abf1a2ce2aadb349dc4034841d227149fa6cc Mon Sep 17 00:00:00 2001 From: masuP9 Date: Mon, 11 May 2026 20:04:14 +0900 Subject: [PATCH 1/6] refactor(patterns): split 7 alias-style patterns into framework-specific files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Migrate the alias-style patterns (button, link, meter, spinbutton, switch, toggle-button, tooltip) — those whose framework branches are mostly just component invocations with little ceremony — to the framework-split format. No shared demo data is extracted; each pattern's per-framework file just calls its respective component. Verified: 7 patterns × 4 frameworks = 28 pages return 200. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/patterns/button/DemoSection.astro | 67 ------ src/patterns/button/DemoSection.react.astro | 17 ++ src/patterns/button/DemoSection.svelte.astro | 17 ++ src/patterns/button/DemoSection.vue.astro | 15 ++ .../button/DemoSection.web-component.astro | 15 ++ src/patterns/link/DemoSection.astro | 86 ------- src/patterns/link/DemoSection.react.astro | 23 ++ src/patterns/link/DemoSection.svelte.astro | 20 ++ src/patterns/link/DemoSection.vue.astro | 20 ++ .../link/DemoSection.web-component.astro | 18 ++ src/patterns/meter/DemoSection.astro | 97 -------- src/patterns/meter/DemoSection.react.astro | 17 ++ src/patterns/meter/DemoSection.svelte.astro | 19 ++ src/patterns/meter/DemoSection.vue.astro | 17 ++ .../meter/DemoSection.web-component.astro | 19 ++ src/patterns/spinbutton/DemoSection.astro | 211 ------------------ .../spinbutton/DemoSection.react.astro | 34 +++ .../spinbutton/DemoSection.svelte.astro | 43 ++++ src/patterns/spinbutton/DemoSection.vue.astro | 34 +++ .../DemoSection.web-component.astro | 25 +++ src/patterns/switch/DemoSection.astro | 73 ------ src/patterns/switch/DemoSection.react.astro | 16 ++ src/patterns/switch/DemoSection.svelte.astro | 16 ++ src/patterns/switch/DemoSection.vue.astro | 16 ++ .../switch/DemoSection.web-component.astro | 16 ++ src/patterns/toggle-button/DemoSection.astro | 54 ----- .../toggle-button/DemoSection.react.astro | 16 ++ .../toggle-button/DemoSection.svelte.astro | 12 + .../toggle-button/DemoSection.vue.astro | 12 + .../DemoSection.web-component.astro | 29 +++ src/patterns/tooltip/DemoSection.astro | 115 ---------- src/patterns/tooltip/DemoSection.react.astro | 38 ++++ src/patterns/tooltip/DemoSection.svelte.astro | 12 + src/patterns/tooltip/DemoSection.vue.astro | 38 ++++ .../tooltip/DemoSection.web-component.astro | 38 ++++ 35 files changed, 612 insertions(+), 703 deletions(-) delete mode 100644 src/patterns/button/DemoSection.astro create mode 100644 src/patterns/button/DemoSection.react.astro create mode 100644 src/patterns/button/DemoSection.svelte.astro create mode 100644 src/patterns/button/DemoSection.vue.astro create mode 100644 src/patterns/button/DemoSection.web-component.astro delete mode 100644 src/patterns/link/DemoSection.astro create mode 100644 src/patterns/link/DemoSection.react.astro create mode 100644 src/patterns/link/DemoSection.svelte.astro create mode 100644 src/patterns/link/DemoSection.vue.astro create mode 100644 src/patterns/link/DemoSection.web-component.astro delete mode 100644 src/patterns/meter/DemoSection.astro create mode 100644 src/patterns/meter/DemoSection.react.astro create mode 100644 src/patterns/meter/DemoSection.svelte.astro create mode 100644 src/patterns/meter/DemoSection.vue.astro create mode 100644 src/patterns/meter/DemoSection.web-component.astro delete mode 100644 src/patterns/spinbutton/DemoSection.astro create mode 100644 src/patterns/spinbutton/DemoSection.react.astro create mode 100644 src/patterns/spinbutton/DemoSection.svelte.astro create mode 100644 src/patterns/spinbutton/DemoSection.vue.astro create mode 100644 src/patterns/spinbutton/DemoSection.web-component.astro delete mode 100644 src/patterns/switch/DemoSection.astro create mode 100644 src/patterns/switch/DemoSection.react.astro create mode 100644 src/patterns/switch/DemoSection.svelte.astro create mode 100644 src/patterns/switch/DemoSection.vue.astro create mode 100644 src/patterns/switch/DemoSection.web-component.astro delete mode 100644 src/patterns/toggle-button/DemoSection.astro create mode 100644 src/patterns/toggle-button/DemoSection.react.astro create mode 100644 src/patterns/toggle-button/DemoSection.svelte.astro create mode 100644 src/patterns/toggle-button/DemoSection.vue.astro create mode 100644 src/patterns/toggle-button/DemoSection.web-component.astro delete mode 100644 src/patterns/tooltip/DemoSection.astro create mode 100644 src/patterns/tooltip/DemoSection.react.astro create mode 100644 src/patterns/tooltip/DemoSection.svelte.astro create mode 100644 src/patterns/tooltip/DemoSection.vue.astro create mode 100644 src/patterns/tooltip/DemoSection.web-component.astro diff --git a/src/patterns/button/DemoSection.astro b/src/patterns/button/DemoSection.astro deleted file mode 100644 index fbbf5567..00000000 --- a/src/patterns/button/DemoSection.astro +++ /dev/null @@ -1,67 +0,0 @@ ---- -/** - * Button Demo Section - * - * Renders the button demo for each framework variant. - * Each framework's component is statically imported to support - * Astro's client:load directive for hydration. - */ -import type { Framework } from '@/lib/frameworks'; -import { Button as ButtonReact } from './Button'; -import ButtonVue from './Button.vue'; -import ButtonSvelte from './Button.svelte'; -import ButtonAstro from './Button.astro'; - -interface Props { - framework: Framework; -} - -const { framework } = Astro.props; ---- - -
-
- { - framework === 'react' && ( - <> - alert('Clicked!')}> - Click me - - alert('This should not fire!')}> - Disabled Button - - - ) - } - { - framework === 'vue' && ( - <> - Click me - - Disabled Button - - - ) - } - { - framework === 'svelte' && ( - <> - alert('Clicked!')}> - Click me - - alert('This should not fire!')}> - Disabled Button - - - ) - } - { - framework === 'astro' && ( - <> - Click me - Disabled Button - - ) - } -
-
diff --git a/src/patterns/button/DemoSection.react.astro b/src/patterns/button/DemoSection.react.astro new file mode 100644 index 00000000..1fe0e9b9 --- /dev/null +++ b/src/patterns/button/DemoSection.react.astro @@ -0,0 +1,17 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import { Button as ButtonReact } from './Button'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ alert('Clicked!')}>Click me + alert('This should not fire!')}> + Disabled Button + +
+
diff --git a/src/patterns/button/DemoSection.svelte.astro b/src/patterns/button/DemoSection.svelte.astro new file mode 100644 index 00000000..aa8b972a --- /dev/null +++ b/src/patterns/button/DemoSection.svelte.astro @@ -0,0 +1,17 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import ButtonSvelte from './Button.svelte'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ alert('Clicked!')}>Click me + alert('This should not fire!')}> + Disabled Button + +
+
diff --git a/src/patterns/button/DemoSection.vue.astro b/src/patterns/button/DemoSection.vue.astro new file mode 100644 index 00000000..d933ac37 --- /dev/null +++ b/src/patterns/button/DemoSection.vue.astro @@ -0,0 +1,15 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import ButtonVue from './Button.vue'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ Click me + Disabled Button +
+
diff --git a/src/patterns/button/DemoSection.web-component.astro b/src/patterns/button/DemoSection.web-component.astro new file mode 100644 index 00000000..1e2c6e33 --- /dev/null +++ b/src/patterns/button/DemoSection.web-component.astro @@ -0,0 +1,15 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import ButtonAstro from './Button.astro'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ Click me + Disabled Button +
+
diff --git a/src/patterns/link/DemoSection.astro b/src/patterns/link/DemoSection.astro deleted file mode 100644 index 6270dafd..00000000 --- a/src/patterns/link/DemoSection.astro +++ /dev/null @@ -1,86 +0,0 @@ ---- -/** - * Link Demo Section - * - * Renders the link demo for each framework variant. - * Each framework's component is statically imported to support - * Astro's client:load directive for hydration. - */ -import type { Framework } from '@/lib/frameworks'; -import { Link as LinkReact } from './Link'; -import LinkVue from './Link.vue'; -import LinkSvelte from './Link.svelte'; -import LinkAstro from './Link.astro'; - -interface Props { - framework: Framework; -} - -const { framework } = Astro.props; ---- - -
-
- { - framework === 'react' && ( - <> - - WAI-ARIA APG Documentation - - - External Link (opens in new tab) - - alert('Link clicked!')}> - Link with onClick handler - - - Disabled Link - - - ) - } - { - framework === 'vue' && ( - <> - - WAI-ARIA APG Documentation - - - External Link (opens in new tab) - - - Disabled Link - - - ) - } - { - framework === 'svelte' && ( - <> - - WAI-ARIA APG Documentation - - - External Link (opens in new tab) - - - Disabled Link - - - ) - } - { - framework === 'astro' && ( - <> - WAI-ARIA APG Documentation - - External Link (opens in new tab) - - - Disabled Link - - - ) - } -
-
diff --git a/src/patterns/link/DemoSection.react.astro b/src/patterns/link/DemoSection.react.astro new file mode 100644 index 00000000..ff9a9337 --- /dev/null +++ b/src/patterns/link/DemoSection.react.astro @@ -0,0 +1,23 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import { Link as LinkReact } from './Link'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ + WAI-ARIA APG Documentation + + + External Link (opens in new tab) + + alert('Link clicked!')}> + Link with onClick handler + + Disabled Link +
+
diff --git a/src/patterns/link/DemoSection.svelte.astro b/src/patterns/link/DemoSection.svelte.astro new file mode 100644 index 00000000..efe66b3f --- /dev/null +++ b/src/patterns/link/DemoSection.svelte.astro @@ -0,0 +1,20 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import LinkSvelte from './Link.svelte'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ + WAI-ARIA APG Documentation + + + External Link (opens in new tab) + + Disabled Link +
+
diff --git a/src/patterns/link/DemoSection.vue.astro b/src/patterns/link/DemoSection.vue.astro new file mode 100644 index 00000000..6b4f0e8d --- /dev/null +++ b/src/patterns/link/DemoSection.vue.astro @@ -0,0 +1,20 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import LinkVue from './Link.vue'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ + WAI-ARIA APG Documentation + + + External Link (opens in new tab) + + Disabled Link +
+
diff --git a/src/patterns/link/DemoSection.web-component.astro b/src/patterns/link/DemoSection.web-component.astro new file mode 100644 index 00000000..88225381 --- /dev/null +++ b/src/patterns/link/DemoSection.web-component.astro @@ -0,0 +1,18 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import LinkAstro from './Link.astro'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ WAI-ARIA APG Documentation + + External Link (opens in new tab) + + Disabled Link +
+
diff --git a/src/patterns/meter/DemoSection.astro b/src/patterns/meter/DemoSection.astro deleted file mode 100644 index b8e7f748..00000000 --- a/src/patterns/meter/DemoSection.astro +++ /dev/null @@ -1,97 +0,0 @@ ---- -/** - * Meter Demo Section - * - * Renders the meter demo for each framework variant. - * Each framework's component is statically imported to support - * Astro's client:load directive for hydration. - */ -import type { Framework } from '@/lib/frameworks'; -import { Meter as MeterReact } from './Meter'; -import MeterVue from './Meter.vue'; -import MeterSvelte from './Meter.svelte'; -import MeterAstro from './Meter.astro'; - -interface Props { - framework: Framework; -} - -const { framework } = Astro.props; ---- - -
-
- { - framework === 'react' && ( - <> -
- -
-
- -
-
- -
-
- -
- - ) - } - { - framework === 'vue' && ( - <> -
- -
-
- -
-
- -
-
- -
- - ) - } - { - framework === 'svelte' && ( - <> -
- -
-
- -
-
- -
-
- -
- - ) - } - { - framework === 'astro' && ( - <> -
- -
-
- -
-
- -
-
- -
- - ) - } -
-
diff --git a/src/patterns/meter/DemoSection.react.astro b/src/patterns/meter/DemoSection.react.astro new file mode 100644 index 00000000..39adcab7 --- /dev/null +++ b/src/patterns/meter/DemoSection.react.astro @@ -0,0 +1,17 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import { Meter as MeterReact } from './Meter'; + +interface Props { + framework?: Framework; +} +--- + +
+
+
+
+
+
+
+
diff --git a/src/patterns/meter/DemoSection.svelte.astro b/src/patterns/meter/DemoSection.svelte.astro new file mode 100644 index 00000000..adae5cec --- /dev/null +++ b/src/patterns/meter/DemoSection.svelte.astro @@ -0,0 +1,19 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import MeterSvelte from './Meter.svelte'; + +interface Props { + framework?: Framework; +} +--- + +
+
+
+
+
+ +
+
+
+
diff --git a/src/patterns/meter/DemoSection.vue.astro b/src/patterns/meter/DemoSection.vue.astro new file mode 100644 index 00000000..f6da490a --- /dev/null +++ b/src/patterns/meter/DemoSection.vue.astro @@ -0,0 +1,17 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import MeterVue from './Meter.vue'; + +interface Props { + framework?: Framework; +} +--- + +
+
+
+
+
+
+
+
diff --git a/src/patterns/meter/DemoSection.web-component.astro b/src/patterns/meter/DemoSection.web-component.astro new file mode 100644 index 00000000..8a8906f9 --- /dev/null +++ b/src/patterns/meter/DemoSection.web-component.astro @@ -0,0 +1,19 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import MeterAstro from './Meter.astro'; + +interface Props { + framework?: Framework; +} +--- + +
+
+
+
+
+ +
+
+
+
diff --git a/src/patterns/spinbutton/DemoSection.astro b/src/patterns/spinbutton/DemoSection.astro deleted file mode 100644 index 831034d7..00000000 --- a/src/patterns/spinbutton/DemoSection.astro +++ /dev/null @@ -1,211 +0,0 @@ ---- -/** - * Spinbutton Demo Section - * - * Renders the spinbutton demo for each framework variant. - * Each framework's component is statically imported to support - * Astro's client:load directive for hydration. - */ -import type { Framework } from '@/lib/frameworks'; -import { Spinbutton as SpinbuttonReact } from './Spinbutton'; -import SpinbuttonVue from './Spinbutton.vue'; -import SpinbuttonSvelte from './Spinbutton.svelte'; -import SpinbuttonAstro from './Spinbutton.astro'; - -interface Props { - framework: Framework; -} - -const { framework } = Astro.props; ---- - -
-
- { - framework === 'react' && ( - <> -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- - ) - } - { - framework === 'vue' && ( - <> -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- - ) - } - { - framework === 'svelte' && ( - <> -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- - ) - } - { - framework === 'astro' && ( - <> -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- - ) - } -
-
diff --git a/src/patterns/spinbutton/DemoSection.react.astro b/src/patterns/spinbutton/DemoSection.react.astro new file mode 100644 index 00000000..98fd9c4d --- /dev/null +++ b/src/patterns/spinbutton/DemoSection.react.astro @@ -0,0 +1,34 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import { Spinbutton as SpinbuttonReact } from './Spinbutton'; + +interface Props { + framework?: Framework; +} +--- + +
+
+
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
diff --git a/src/patterns/spinbutton/DemoSection.svelte.astro b/src/patterns/spinbutton/DemoSection.svelte.astro new file mode 100644 index 00000000..d6916ed8 --- /dev/null +++ b/src/patterns/spinbutton/DemoSection.svelte.astro @@ -0,0 +1,43 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import SpinbuttonSvelte from './Spinbutton.svelte'; + +interface Props { + framework?: Framework; +} +--- + +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
diff --git a/src/patterns/spinbutton/DemoSection.vue.astro b/src/patterns/spinbutton/DemoSection.vue.astro new file mode 100644 index 00000000..5782bb8f --- /dev/null +++ b/src/patterns/spinbutton/DemoSection.vue.astro @@ -0,0 +1,34 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import SpinbuttonVue from './Spinbutton.vue'; + +interface Props { + framework?: Framework; +} +--- + +
+
+
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
diff --git a/src/patterns/spinbutton/DemoSection.web-component.astro b/src/patterns/spinbutton/DemoSection.web-component.astro new file mode 100644 index 00000000..7d0acdcb --- /dev/null +++ b/src/patterns/spinbutton/DemoSection.web-component.astro @@ -0,0 +1,25 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import SpinbuttonAstro from './Spinbutton.astro'; + +interface Props { + framework?: Framework; +} +--- + +
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
diff --git a/src/patterns/switch/DemoSection.astro b/src/patterns/switch/DemoSection.astro deleted file mode 100644 index 2616bcd1..00000000 --- a/src/patterns/switch/DemoSection.astro +++ /dev/null @@ -1,73 +0,0 @@ ---- -/** - * Switch Demo Section - * - * Renders the switch demo for each framework variant. - * Each framework's component is statically imported to support - * Astro's client:load directive for hydration. - */ -import type { Framework } from '@/lib/frameworks'; -import { Switch as SwitchReact } from './Switch'; -import SwitchVue from './Switch.vue'; -import SwitchSvelte from './Switch.svelte'; -import SwitchAstro from './Switch.astro'; - -interface Props { - framework: Framework; -} - -const { framework } = Astro.props; ---- - -
-
- { - framework === 'react' && ( - <> - Wi-Fi - - Bluetooth - - - Airplane Mode (disabled) - - - ) - } - { - framework === 'vue' && ( - <> - Wi-Fi - - Bluetooth - - - Airplane Mode (disabled) - - - ) - } - { - framework === 'svelte' && ( - <> - Wi-Fi - - Bluetooth - - - Airplane Mode (disabled) - - - ) - } - { - framework === 'astro' && ( - <> - Wi-Fi - Bluetooth - Airplane Mode (disabled) - - ) - } -
-
diff --git a/src/patterns/switch/DemoSection.react.astro b/src/patterns/switch/DemoSection.react.astro new file mode 100644 index 00000000..b900e807 --- /dev/null +++ b/src/patterns/switch/DemoSection.react.astro @@ -0,0 +1,16 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import { Switch as SwitchReact } from './Switch'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ Wi-Fi + Bluetooth + Airplane Mode (disabled) +
+
diff --git a/src/patterns/switch/DemoSection.svelte.astro b/src/patterns/switch/DemoSection.svelte.astro new file mode 100644 index 00000000..5bb863a0 --- /dev/null +++ b/src/patterns/switch/DemoSection.svelte.astro @@ -0,0 +1,16 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import SwitchSvelte from './Switch.svelte'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ Wi-Fi + Bluetooth + Airplane Mode (disabled) +
+
diff --git a/src/patterns/switch/DemoSection.vue.astro b/src/patterns/switch/DemoSection.vue.astro new file mode 100644 index 00000000..3dc0dc8d --- /dev/null +++ b/src/patterns/switch/DemoSection.vue.astro @@ -0,0 +1,16 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import SwitchVue from './Switch.vue'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ Wi-Fi + Bluetooth + Airplane Mode (disabled) +
+
diff --git a/src/patterns/switch/DemoSection.web-component.astro b/src/patterns/switch/DemoSection.web-component.astro new file mode 100644 index 00000000..34c1d62e --- /dev/null +++ b/src/patterns/switch/DemoSection.web-component.astro @@ -0,0 +1,16 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import SwitchAstro from './Switch.astro'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ Wi-Fi + Bluetooth + Airplane Mode (disabled) +
+
diff --git a/src/patterns/toggle-button/DemoSection.astro b/src/patterns/toggle-button/DemoSection.astro deleted file mode 100644 index d887bfbe..00000000 --- a/src/patterns/toggle-button/DemoSection.astro +++ /dev/null @@ -1,54 +0,0 @@ ---- -/** - * Toggle Button Demo Section - * - * Renders the toggle button demo for each framework variant. - */ -import type { Framework } from '@/lib/frameworks'; -import { MuteDemo, DarkModeDemo, NotificationsDemo } from './ToggleButtonDemo'; -import ToggleButtonDemoVue from './ToggleButtonDemo.vue'; -import ToggleButtonDemoSvelte from './ToggleButtonDemo.svelte'; -import ToggleButton from './ToggleButton.astro'; -import Icon from '@/components/ui/icon/icon.astro'; - -interface Props { - framework: Framework; -} - -const { framework } = Astro.props; ---- - -
- { - framework === 'react' && ( -
- - - -
- ) - } - {framework === 'vue' && } - {framework === 'svelte' && } - { - framework === 'astro' && ( -
- - - - Mute - - - - - Dark Mode - - - - - Notifications - -
- ) - } -
diff --git a/src/patterns/toggle-button/DemoSection.react.astro b/src/patterns/toggle-button/DemoSection.react.astro new file mode 100644 index 00000000..99e40b3a --- /dev/null +++ b/src/patterns/toggle-button/DemoSection.react.astro @@ -0,0 +1,16 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import { MuteDemo, DarkModeDemo, NotificationsDemo } from './ToggleButtonDemo'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ + + +
+
diff --git a/src/patterns/toggle-button/DemoSection.svelte.astro b/src/patterns/toggle-button/DemoSection.svelte.astro new file mode 100644 index 00000000..f8efdd1c --- /dev/null +++ b/src/patterns/toggle-button/DemoSection.svelte.astro @@ -0,0 +1,12 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import ToggleButtonDemoSvelte from './ToggleButtonDemo.svelte'; + +interface Props { + framework?: Framework; +} +--- + +
+ +
diff --git a/src/patterns/toggle-button/DemoSection.vue.astro b/src/patterns/toggle-button/DemoSection.vue.astro new file mode 100644 index 00000000..496d131f --- /dev/null +++ b/src/patterns/toggle-button/DemoSection.vue.astro @@ -0,0 +1,12 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import ToggleButtonDemoVue from './ToggleButtonDemo.vue'; + +interface Props { + framework?: Framework; +} +--- + +
+ +
diff --git a/src/patterns/toggle-button/DemoSection.web-component.astro b/src/patterns/toggle-button/DemoSection.web-component.astro new file mode 100644 index 00000000..a0fdcbec --- /dev/null +++ b/src/patterns/toggle-button/DemoSection.web-component.astro @@ -0,0 +1,29 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import ToggleButton from './ToggleButton.astro'; +import Icon from '@/components/ui/icon/icon.astro'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ + + + Mute + + + + + Dark Mode + + + + + Notifications + +
+
diff --git a/src/patterns/tooltip/DemoSection.astro b/src/patterns/tooltip/DemoSection.astro deleted file mode 100644 index e83443c0..00000000 --- a/src/patterns/tooltip/DemoSection.astro +++ /dev/null @@ -1,115 +0,0 @@ ---- -/** - * Tooltip Demo Section - * - * Renders the tooltip demo for each framework variant. - * React and Vue use inline Tooltip components with client:load. - * Svelte uses a dedicated TooltipDemo component with client:only. - * Astro uses static Tooltip components (Web Component handles interactivity). - */ -import type { Framework } from '@/lib/frameworks'; -import { Tooltip as TooltipReact } from './Tooltip'; -import TooltipVue from './Tooltip.vue'; -import TooltipDemoSvelte from './TooltipDemo.svelte'; -import TooltipAstro from './Tooltip.astro'; - -interface Props { - framework: Framework; -} - -const { framework } = Astro.props; ---- - -
- { - framework === 'react' && ( -
- - - - - - - - - - - - - - - -
- ) - } - - { - framework === 'vue' && ( -
- - - - - - - - - - - - - - - -
- ) - } - - {framework === 'svelte' && } - - { - framework === 'astro' && ( -
- - - - - - - - - - - - - - - -
- ) - } -
diff --git a/src/patterns/tooltip/DemoSection.react.astro b/src/patterns/tooltip/DemoSection.react.astro new file mode 100644 index 00000000..020f5964 --- /dev/null +++ b/src/patterns/tooltip/DemoSection.react.astro @@ -0,0 +1,38 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import { Tooltip as TooltipReact } from './Tooltip'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ + + + + + + + + + + + + + + +
+
diff --git a/src/patterns/tooltip/DemoSection.svelte.astro b/src/patterns/tooltip/DemoSection.svelte.astro new file mode 100644 index 00000000..faa56f24 --- /dev/null +++ b/src/patterns/tooltip/DemoSection.svelte.astro @@ -0,0 +1,12 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import TooltipDemoSvelte from './TooltipDemo.svelte'; + +interface Props { + framework?: Framework; +} +--- + +
+ +
diff --git a/src/patterns/tooltip/DemoSection.vue.astro b/src/patterns/tooltip/DemoSection.vue.astro new file mode 100644 index 00000000..604404cc --- /dev/null +++ b/src/patterns/tooltip/DemoSection.vue.astro @@ -0,0 +1,38 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import TooltipVue from './Tooltip.vue'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ + + + + + + + + + + + + + + +
+
diff --git a/src/patterns/tooltip/DemoSection.web-component.astro b/src/patterns/tooltip/DemoSection.web-component.astro new file mode 100644 index 00000000..d9332cb1 --- /dev/null +++ b/src/patterns/tooltip/DemoSection.web-component.astro @@ -0,0 +1,38 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import TooltipAstro from './Tooltip.astro'; + +interface Props { + framework?: Framework; +} +--- + +
+
+ + + + + + + + + + + + + + + +
+
From 634341ad638a49a291824aca954ed5e87a63e28d Mon Sep 17 00:00:00 2001 From: masuP9 Date: Mon, 11 May 2026 20:09:52 +0900 Subject: [PATCH 2/6] refactor(patterns): split 6 mid-size patterns into framework-specific files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Migrate alert-dialog, breadcrumb, carousel, feed, landmarks, and window-splitter to the framework-split format. Per-pattern notes: - breadcrumb: \`basicItems\` / \`longPathItems\` (~10 line each) are duplicated across the four files. Below the 8-line threshold for data extraction in spirit but moreover the items are short literal arrays that read cleanly inline; no \`*-demo-data.ts\` is added. - carousel: \`import.meta.env.BASE_URL\` reference is kept in all four files (not extracted to a data module, per the plan). - feed: each framework file picks \`FeedDemoJa\` / \`FeedDemo\` from the \`locale\` prop, replacing the prior \`Astro.url.pathname\` check. - alert-dialog: React/Vue/Svelte each delegate to their wrapper Demo component with \`client:only\`; only the Astro Web Component file contains the inline AlertDialog markup. - landmarks / window-splitter: straightforward delegation to wrapper Demo components. Verified: 6 patterns × 4 frameworks × 2 locales = 48 pages return 200. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/patterns/alert-dialog/DemoSection.astro | 95 ------------------- .../alert-dialog/DemoSection.react.astro | 12 +++ .../alert-dialog/DemoSection.svelte.astro | 12 +++ .../alert-dialog/DemoSection.vue.astro | 12 +++ .../DemoSection.web-component.astro | 76 +++++++++++++++ ...oSection.astro => DemoSection.react.astro} | 24 +---- .../breadcrumb/DemoSection.svelte.astro | 58 +++++++++++ src/patterns/breadcrumb/DemoSection.vue.astro | 58 +++++++++++ .../DemoSection.web-component.astro | 58 +++++++++++ ...oSection.astro => DemoSection.react.astro} | 37 +------- .../carousel/DemoSection.svelte.astro | 42 ++++++++ src/patterns/carousel/DemoSection.vue.astro | 42 ++++++++ .../carousel/DemoSection.web-component.astro | 41 ++++++++ src/patterns/feed/DemoSection.astro | 38 -------- src/patterns/feed/DemoSection.react.astro | 18 ++++ src/patterns/feed/DemoSection.svelte.astro | 18 ++++ src/patterns/feed/DemoSection.vue.astro | 18 ++++ .../feed/DemoSection.web-component.astro | 18 ++++ src/patterns/landmarks/DemoSection.astro | 27 ------ .../landmarks/DemoSection.react.astro | 12 +++ .../landmarks/DemoSection.svelte.astro | 12 +++ src/patterns/landmarks/DemoSection.vue.astro | 12 +++ .../landmarks/DemoSection.web-component.astro | 12 +++ ...oSection.astro => DemoSection.react.astro} | 19 +--- .../window-splitter/DemoSection.svelte.astro | 24 +++++ .../window-splitter/DemoSection.vue.astro | 24 +++++ .../DemoSection.web-component.astro | 24 +++++ 27 files changed, 614 insertions(+), 229 deletions(-) delete mode 100644 src/patterns/alert-dialog/DemoSection.astro create mode 100644 src/patterns/alert-dialog/DemoSection.react.astro create mode 100644 src/patterns/alert-dialog/DemoSection.svelte.astro create mode 100644 src/patterns/alert-dialog/DemoSection.vue.astro create mode 100644 src/patterns/alert-dialog/DemoSection.web-component.astro rename src/patterns/breadcrumb/{DemoSection.astro => DemoSection.react.astro} (59%) create mode 100644 src/patterns/breadcrumb/DemoSection.svelte.astro create mode 100644 src/patterns/breadcrumb/DemoSection.vue.astro create mode 100644 src/patterns/breadcrumb/DemoSection.web-component.astro rename src/patterns/carousel/{DemoSection.astro => DemoSection.react.astro} (53%) create mode 100644 src/patterns/carousel/DemoSection.svelte.astro create mode 100644 src/patterns/carousel/DemoSection.vue.astro create mode 100644 src/patterns/carousel/DemoSection.web-component.astro delete mode 100644 src/patterns/feed/DemoSection.astro create mode 100644 src/patterns/feed/DemoSection.react.astro create mode 100644 src/patterns/feed/DemoSection.svelte.astro create mode 100644 src/patterns/feed/DemoSection.vue.astro create mode 100644 src/patterns/feed/DemoSection.web-component.astro delete mode 100644 src/patterns/landmarks/DemoSection.astro create mode 100644 src/patterns/landmarks/DemoSection.react.astro create mode 100644 src/patterns/landmarks/DemoSection.svelte.astro create mode 100644 src/patterns/landmarks/DemoSection.vue.astro create mode 100644 src/patterns/landmarks/DemoSection.web-component.astro rename src/patterns/window-splitter/{DemoSection.astro => DemoSection.react.astro} (51%) create mode 100644 src/patterns/window-splitter/DemoSection.svelte.astro create mode 100644 src/patterns/window-splitter/DemoSection.vue.astro create mode 100644 src/patterns/window-splitter/DemoSection.web-component.astro diff --git a/src/patterns/alert-dialog/DemoSection.astro b/src/patterns/alert-dialog/DemoSection.astro deleted file mode 100644 index 2032b3b4..00000000 --- a/src/patterns/alert-dialog/DemoSection.astro +++ /dev/null @@ -1,95 +0,0 @@ ---- -/** - * Alert Dialog Demo Section - * - * Renders the alert dialog demo for each framework variant. - * React/Vue/Svelte use wrapper Demo components with client:only - * since they require browser-only APIs (portals, teleport). - * Astro renders multiple AlertDialog instances directly. - */ -import type { Framework } from '@/lib/frameworks'; -import type { Locale } from '@/i18n/ui'; -import AlertDialogDemoReact from './AlertDialogDemo'; -import AlertDialogDemoVue from './AlertDialogDemo.vue'; -import AlertDialogDemoSvelte from './AlertDialogDemo.svelte'; -import AlertDialog from './AlertDialog.astro'; - -interface Props { - framework: Framework; - locale?: Locale; -} - -const { framework, locale = 'en' } = Astro.props; -const isJa = locale === 'ja'; ---- - -{framework === 'react' && } -{framework === 'vue' && } -{framework === 'svelte' && } -{ - framework === 'astro' && ( -
- {/* Delete Confirmation */} -
-

{isJa ? '削除の確認' : 'Delete Confirmation'}

-

- {isJa - ? '明示的な確認が必要な破壊的アクションです。Escapeキーは無効です。' - : 'A destructive action that requires explicit confirmation. Escape key is disabled.'} -

-
- -
-
- - {/* Discard Changes */} -
-

{isJa ? '変更の破棄' : 'Discard Changes'}

-

- {isJa ? '未保存の変更を失う前に確認します。' : 'Confirm before losing unsaved changes.'} -

-
- -
-
- - {/* Information Acknowledgment */} -
-

- {isJa ? '情報の確認' : 'Information Acknowledgment'} -

-

- {isJa - ? 'Escapeキーが有効な非破壊的アラートです。' - : 'Non-destructive alert with Escape key enabled.'} -

-
- -
-
-
- ) -} diff --git a/src/patterns/alert-dialog/DemoSection.react.astro b/src/patterns/alert-dialog/DemoSection.react.astro new file mode 100644 index 00000000..d6ef181e --- /dev/null +++ b/src/patterns/alert-dialog/DemoSection.react.astro @@ -0,0 +1,12 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import AlertDialogDemoReact from './AlertDialogDemo'; + +interface Props { + framework?: Framework; + locale?: Locale; +} +--- + + diff --git a/src/patterns/alert-dialog/DemoSection.svelte.astro b/src/patterns/alert-dialog/DemoSection.svelte.astro new file mode 100644 index 00000000..f0a6af43 --- /dev/null +++ b/src/patterns/alert-dialog/DemoSection.svelte.astro @@ -0,0 +1,12 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import AlertDialogDemoSvelte from './AlertDialogDemo.svelte'; + +interface Props { + framework?: Framework; + locale?: Locale; +} +--- + + diff --git a/src/patterns/alert-dialog/DemoSection.vue.astro b/src/patterns/alert-dialog/DemoSection.vue.astro new file mode 100644 index 00000000..093bb743 --- /dev/null +++ b/src/patterns/alert-dialog/DemoSection.vue.astro @@ -0,0 +1,12 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import AlertDialogDemoVue from './AlertDialogDemo.vue'; + +interface Props { + framework?: Framework; + locale?: Locale; +} +--- + + diff --git a/src/patterns/alert-dialog/DemoSection.web-component.astro b/src/patterns/alert-dialog/DemoSection.web-component.astro new file mode 100644 index 00000000..c6ad13a3 --- /dev/null +++ b/src/patterns/alert-dialog/DemoSection.web-component.astro @@ -0,0 +1,76 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import AlertDialog from './AlertDialog.astro'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+
+

{isJa ? '削除の確認' : 'Delete Confirmation'}

+

+ { + isJa + ? '明示的な確認が必要な破壊的アクションです。Escapeキーは無効です。' + : 'A destructive action that requires explicit confirmation. Escape key is disabled.' + } +

+
+ +
+
+ +
+

{isJa ? '変更の破棄' : 'Discard Changes'}

+

+ {isJa ? '未保存の変更を失う前に確認します。' : 'Confirm before losing unsaved changes.'} +

+
+ +
+
+ +
+

{isJa ? '情報の確認' : 'Information Acknowledgment'}

+

+ { + isJa + ? 'Escapeキーが有効な非破壊的アラートです。' + : 'Non-destructive alert with Escape key enabled.' + } +

+
+ +
+
+
diff --git a/src/patterns/breadcrumb/DemoSection.astro b/src/patterns/breadcrumb/DemoSection.react.astro similarity index 59% rename from src/patterns/breadcrumb/DemoSection.astro rename to src/patterns/breadcrumb/DemoSection.react.astro index 01827a45..cee2bf4c 100644 --- a/src/patterns/breadcrumb/DemoSection.astro +++ b/src/patterns/breadcrumb/DemoSection.react.astro @@ -1,24 +1,14 @@ --- -/** - * Breadcrumb Demo Section - * - * Renders the breadcrumb demo for each framework variant. - * Each framework's component is statically imported to support - * Astro's client:load directive for hydration. - */ import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { Breadcrumb as BreadcrumbReact } from './Breadcrumb'; -import BreadcrumbVue from './Breadcrumb.vue'; -import BreadcrumbSvelte from './Breadcrumb.svelte'; -import BreadcrumbAstro from './Breadcrumb.astro'; interface Props { - framework: Framework; + framework?: Framework; locale?: Locale; } -const { framework, locale = 'en' } = Astro.props; +const { locale = 'en' } = Astro.props; const isJa = locale === 'ja'; const basicItems = [ @@ -50,10 +40,7 @@ const longPathItems = [ : 'A simple breadcrumb trail showing the path to the current page.' }

- {framework === 'react' && } - {framework === 'vue' && } - {framework === 'svelte' && } - {framework === 'astro' && } +
@@ -65,10 +52,7 @@ const longPathItems = [ : 'A deeper navigation path with multiple levels of hierarchy.' }

- {framework === 'react' && } - {framework === 'vue' && } - {framework === 'svelte' && } - {framework === 'astro' && } +
diff --git a/src/patterns/breadcrumb/DemoSection.svelte.astro b/src/patterns/breadcrumb/DemoSection.svelte.astro new file mode 100644 index 00000000..a1bbf3b3 --- /dev/null +++ b/src/patterns/breadcrumb/DemoSection.svelte.astro @@ -0,0 +1,58 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import BreadcrumbSvelte from './Breadcrumb.svelte'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; + +const basicItems = [ + { label: 'Home', href: '/' }, + { label: 'Patterns', href: '/patterns/' }, + { label: 'Breadcrumb' }, +]; + +const longPathItems = [ + { label: 'Home', href: '/' }, + { label: 'Products', href: '/products/' }, + { label: 'Electronics', href: '/products/electronics/' }, + { label: 'Computers', href: '/products/electronics/computers/' }, + { label: 'Laptops', href: '/products/electronics/computers/laptops/' }, + { label: 'MacBook Pro' }, +]; +--- + +
+
+
+

+ {isJa ? '基本的なパンくずリスト' : 'Basic Breadcrumb'} +

+

+ { + isJa + ? '現在のページまでのパスを表示するシンプルなパンくずリストです。' + : 'A simple breadcrumb trail showing the path to the current page.' + } +

+ +
+ +
+

{isJa ? '深い階層のパス' : 'Long Path'}

+

+ { + isJa + ? '複数の階層レベルを持つ深いナビゲーションパスです。' + : 'A deeper navigation path with multiple levels of hierarchy.' + } +

+ +
+
+
diff --git a/src/patterns/breadcrumb/DemoSection.vue.astro b/src/patterns/breadcrumb/DemoSection.vue.astro new file mode 100644 index 00000000..144a24d5 --- /dev/null +++ b/src/patterns/breadcrumb/DemoSection.vue.astro @@ -0,0 +1,58 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import BreadcrumbVue from './Breadcrumb.vue'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; + +const basicItems = [ + { label: 'Home', href: '/' }, + { label: 'Patterns', href: '/patterns/' }, + { label: 'Breadcrumb' }, +]; + +const longPathItems = [ + { label: 'Home', href: '/' }, + { label: 'Products', href: '/products/' }, + { label: 'Electronics', href: '/products/electronics/' }, + { label: 'Computers', href: '/products/electronics/computers/' }, + { label: 'Laptops', href: '/products/electronics/computers/laptops/' }, + { label: 'MacBook Pro' }, +]; +--- + +
+
+
+

+ {isJa ? '基本的なパンくずリスト' : 'Basic Breadcrumb'} +

+

+ { + isJa + ? '現在のページまでのパスを表示するシンプルなパンくずリストです。' + : 'A simple breadcrumb trail showing the path to the current page.' + } +

+ +
+ +
+

{isJa ? '深い階層のパス' : 'Long Path'}

+

+ { + isJa + ? '複数の階層レベルを持つ深いナビゲーションパスです。' + : 'A deeper navigation path with multiple levels of hierarchy.' + } +

+ +
+
+
diff --git a/src/patterns/breadcrumb/DemoSection.web-component.astro b/src/patterns/breadcrumb/DemoSection.web-component.astro new file mode 100644 index 00000000..a8c7dbbd --- /dev/null +++ b/src/patterns/breadcrumb/DemoSection.web-component.astro @@ -0,0 +1,58 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import BreadcrumbAstro from './Breadcrumb.astro'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; + +const basicItems = [ + { label: 'Home', href: '/' }, + { label: 'Patterns', href: '/patterns/' }, + { label: 'Breadcrumb' }, +]; + +const longPathItems = [ + { label: 'Home', href: '/' }, + { label: 'Products', href: '/products/' }, + { label: 'Electronics', href: '/products/electronics/' }, + { label: 'Computers', href: '/products/electronics/computers/' }, + { label: 'Laptops', href: '/products/electronics/computers/laptops/' }, + { label: 'MacBook Pro' }, +]; +--- + +
+
+
+

+ {isJa ? '基本的なパンくずリスト' : 'Basic Breadcrumb'} +

+

+ { + isJa + ? '現在のページまでのパスを表示するシンプルなパンくずリストです。' + : 'A simple breadcrumb trail showing the path to the current page.' + } +

+ +
+ +
+

{isJa ? '深い階層のパス' : 'Long Path'}

+

+ { + isJa + ? '複数の階層レベルを持つ深いナビゲーションパスです。' + : 'A deeper navigation path with multiple levels of hierarchy.' + } +

+ +
+
+
diff --git a/src/patterns/carousel/DemoSection.astro b/src/patterns/carousel/DemoSection.react.astro similarity index 53% rename from src/patterns/carousel/DemoSection.astro rename to src/patterns/carousel/DemoSection.react.astro index b9a949eb..93ca35ba 100644 --- a/src/patterns/carousel/DemoSection.astro +++ b/src/patterns/carousel/DemoSection.react.astro @@ -1,28 +1,18 @@ --- -/** - * Carousel Demo Section - * - * Renders carousel demos for each framework variant. - * Includes both manual navigation and auto-rotation demos. - */ import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { CarouselDemo as CarouselDemoReact } from './CarouselDemo'; -import CarouselDemoVue from './CarouselDemo.vue'; -import CarouselDemoSvelte from './CarouselDemo.svelte'; -import CarouselDemoAstro from './CarouselDemo.astro'; interface Props { - framework: Framework; + framework?: Framework; locale?: Locale; } -const { framework, locale = 'en' } = Astro.props; +const { locale = 'en' } = Astro.props; const isJa = locale === 'ja'; const basePath = import.meta.env.BASE_URL; --- -

{isJa ? '手動ナビゲーション' : 'Manual Navigation'}

@@ -33,14 +23,10 @@ const basePath = import.meta.env.BASE_URL; }

- {framework === 'react' && } - {framework === 'vue' && } - {framework === 'svelte' && } - {framework === 'astro' && } +
-

{isJa ? '自動回転' : 'Auto-Rotation'}

@@ -51,21 +37,6 @@ const basePath = import.meta.env.BASE_URL; }

- { - framework === 'react' && ( - - ) - } - { - framework === 'vue' && ( - - ) - } - { - framework === 'svelte' && ( - - ) - } - {framework === 'astro' && } +
diff --git a/src/patterns/carousel/DemoSection.svelte.astro b/src/patterns/carousel/DemoSection.svelte.astro new file mode 100644 index 00000000..08cd7052 --- /dev/null +++ b/src/patterns/carousel/DemoSection.svelte.astro @@ -0,0 +1,42 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import CarouselDemoSvelte from './CarouselDemo.svelte'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +const basePath = import.meta.env.BASE_URL; +--- + +
+

{isJa ? '手動ナビゲーション' : 'Manual Navigation'}

+

+ { + isJa + ? 'タブインジケーター、前へ/次へボタン、またはキーボードの矢印キーで操作できます。' + : 'Navigate using the tab indicators, previous/next buttons, or keyboard arrows.' + } +

+
+ +
+
+ +
+

{isJa ? '自動回転' : 'Auto-Rotation'}

+

+ { + isJa + ? 'スライドを自動的に切り替えます。ホバー、フォーカス、または一時停止ボタンのクリックで停止します。prefers-reduced-motion を尊重します。' + : 'Automatically rotates through slides. Pauses on hover, focus, or when the user clicks the pause button. Respects prefers-reduced-motion.' + } +

+
+ +
+
diff --git a/src/patterns/carousel/DemoSection.vue.astro b/src/patterns/carousel/DemoSection.vue.astro new file mode 100644 index 00000000..e68abd9f --- /dev/null +++ b/src/patterns/carousel/DemoSection.vue.astro @@ -0,0 +1,42 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import CarouselDemoVue from './CarouselDemo.vue'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +const basePath = import.meta.env.BASE_URL; +--- + +
+

{isJa ? '手動ナビゲーション' : 'Manual Navigation'}

+

+ { + isJa + ? 'タブインジケーター、前へ/次へボタン、またはキーボードの矢印キーで操作できます。' + : 'Navigate using the tab indicators, previous/next buttons, or keyboard arrows.' + } +

+
+ +
+
+ +
+

{isJa ? '自動回転' : 'Auto-Rotation'}

+

+ { + isJa + ? 'スライドを自動的に切り替えます。ホバー、フォーカス、または一時停止ボタンのクリックで停止します。prefers-reduced-motion を尊重します。' + : 'Automatically rotates through slides. Pauses on hover, focus, or when the user clicks the pause button. Respects prefers-reduced-motion.' + } +

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

{isJa ? '手動ナビゲーション' : 'Manual Navigation'}

+

+ { + isJa + ? 'タブインジケーター、前へ/次へボタン、またはキーボードの矢印キーで操作できます。' + : 'Navigate using the tab indicators, previous/next buttons, or keyboard arrows.' + } +

+
+ +
+
+ +
+

{isJa ? '自動回転' : 'Auto-Rotation'}

+

+ { + isJa + ? 'スライドを自動的に切り替えます。ホバー、フォーカス、または一時停止ボタンのクリックで停止します。prefers-reduced-motion を尊重します。' + : 'Automatically rotates through slides. Pauses on hover, focus, or when the user clicks the pause button. Respects prefers-reduced-motion.' + } +

+
+ +
+
diff --git a/src/patterns/feed/DemoSection.astro b/src/patterns/feed/DemoSection.astro deleted file mode 100644 index bd81fcd1..00000000 --- a/src/patterns/feed/DemoSection.astro +++ /dev/null @@ -1,38 +0,0 @@ ---- -/** - * Feed Demo Section - * - * Renders the feed demo for each framework variant. - * Uses locale-specific demo components (FeedDemo / FeedDemoJa) - * to display articles in the appropriate language. - */ -import type { Framework } from '@/lib/frameworks'; -import { FeedDemo as FeedDemoReact } from './FeedDemo'; -import FeedDemoVue from './FeedDemo.vue'; -import FeedDemoSvelte from './FeedDemo.svelte'; -import FeedDemoAstro from './FeedDemo.astro'; -import { FeedDemoJa as FeedDemoJaReact } from './FeedDemoJa'; -import FeedDemoJaVue from './FeedDemoJa.vue'; -import FeedDemoJaSvelte from './FeedDemoJa.svelte'; -import FeedDemoJaAstro from './FeedDemoJa.astro'; - -interface Props { - framework: Framework; -} - -const { framework } = Astro.props; -const isJa = Astro.url.pathname.startsWith('/ja/'); ---- - -
- { - framework === 'react' && - (isJa ? : ) - } - {framework === 'vue' && (isJa ? : )} - { - framework === 'svelte' && - (isJa ? : ) - } - {framework === 'astro' && (isJa ? : )} -
diff --git a/src/patterns/feed/DemoSection.react.astro b/src/patterns/feed/DemoSection.react.astro new file mode 100644 index 00000000..2104ad37 --- /dev/null +++ b/src/patterns/feed/DemoSection.react.astro @@ -0,0 +1,18 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import { FeedDemo as FeedDemoReact } from './FeedDemo'; +import { FeedDemoJa as FeedDemoJaReact } from './FeedDemoJa'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+ {isJa ? : } +
diff --git a/src/patterns/feed/DemoSection.svelte.astro b/src/patterns/feed/DemoSection.svelte.astro new file mode 100644 index 00000000..7a8d5f0e --- /dev/null +++ b/src/patterns/feed/DemoSection.svelte.astro @@ -0,0 +1,18 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import FeedDemoSvelte from './FeedDemo.svelte'; +import FeedDemoJaSvelte from './FeedDemoJa.svelte'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+ {isJa ? : } +
diff --git a/src/patterns/feed/DemoSection.vue.astro b/src/patterns/feed/DemoSection.vue.astro new file mode 100644 index 00000000..81438ef4 --- /dev/null +++ b/src/patterns/feed/DemoSection.vue.astro @@ -0,0 +1,18 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import FeedDemoVue from './FeedDemo.vue'; +import FeedDemoJaVue from './FeedDemoJa.vue'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+ {isJa ? : } +
diff --git a/src/patterns/feed/DemoSection.web-component.astro b/src/patterns/feed/DemoSection.web-component.astro new file mode 100644 index 00000000..045a029c --- /dev/null +++ b/src/patterns/feed/DemoSection.web-component.astro @@ -0,0 +1,18 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import FeedDemoAstro from './FeedDemo.astro'; +import FeedDemoJaAstro from './FeedDemoJa.astro'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+ {isJa ? : } +
diff --git a/src/patterns/landmarks/DemoSection.astro b/src/patterns/landmarks/DemoSection.astro deleted file mode 100644 index 898e6bb1..00000000 --- a/src/patterns/landmarks/DemoSection.astro +++ /dev/null @@ -1,27 +0,0 @@ ---- -/** - * Landmarks Demo Section - * - * Renders the landmark demo for each framework variant. - * Each framework's component is statically imported to support - * Astro's client:load directive for hydration. - */ -import type { Framework } from '@/lib/frameworks'; -import { LandmarkDemo as LandmarkDemoReact } from './LandmarkDemo'; -import LandmarkDemoVue from './LandmarkDemo.vue'; -import LandmarkDemoSvelte from './LandmarkDemo.svelte'; -import LandmarkDemoAstro from './LandmarkDemo.astro'; - -interface Props { - framework: Framework; -} - -const { framework } = Astro.props; ---- - -
- {framework === 'react' && } - {framework === 'vue' && } - {framework === 'svelte' && } - {framework === 'astro' && } -
diff --git a/src/patterns/landmarks/DemoSection.react.astro b/src/patterns/landmarks/DemoSection.react.astro new file mode 100644 index 00000000..dcbe9b69 --- /dev/null +++ b/src/patterns/landmarks/DemoSection.react.astro @@ -0,0 +1,12 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import { LandmarkDemo as LandmarkDemoReact } from './LandmarkDemo'; + +interface Props { + framework?: Framework; +} +--- + +
+ +
diff --git a/src/patterns/landmarks/DemoSection.svelte.astro b/src/patterns/landmarks/DemoSection.svelte.astro new file mode 100644 index 00000000..59e8b042 --- /dev/null +++ b/src/patterns/landmarks/DemoSection.svelte.astro @@ -0,0 +1,12 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import LandmarkDemoSvelte from './LandmarkDemo.svelte'; + +interface Props { + framework?: Framework; +} +--- + +
+ +
diff --git a/src/patterns/landmarks/DemoSection.vue.astro b/src/patterns/landmarks/DemoSection.vue.astro new file mode 100644 index 00000000..0d255a4d --- /dev/null +++ b/src/patterns/landmarks/DemoSection.vue.astro @@ -0,0 +1,12 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import LandmarkDemoVue from './LandmarkDemo.vue'; + +interface Props { + framework?: Framework; +} +--- + +
+ +
diff --git a/src/patterns/landmarks/DemoSection.web-component.astro b/src/patterns/landmarks/DemoSection.web-component.astro new file mode 100644 index 00000000..c6d40785 --- /dev/null +++ b/src/patterns/landmarks/DemoSection.web-component.astro @@ -0,0 +1,12 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import LandmarkDemoAstro from './LandmarkDemo.astro'; + +interface Props { + framework?: Framework; +} +--- + +
+ +
diff --git a/src/patterns/window-splitter/DemoSection.astro b/src/patterns/window-splitter/DemoSection.react.astro similarity index 51% rename from src/patterns/window-splitter/DemoSection.astro rename to src/patterns/window-splitter/DemoSection.react.astro index 5cbca353..1cbf5658 100644 --- a/src/patterns/window-splitter/DemoSection.astro +++ b/src/patterns/window-splitter/DemoSection.react.astro @@ -1,24 +1,14 @@ --- -/** - * Window Splitter Demo Section - * - * Renders the window splitter demo for each framework variant. - * Each framework's component is statically imported to support - * Astro's client:load directive for hydration. - */ import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { WindowSplitterDemo as WindowSplitterDemoReact } from './WindowSplitterDemo'; -import WindowSplitterDemoVue from './WindowSplitterDemo.vue'; -import WindowSplitterDemoSvelte from './WindowSplitterDemo.svelte'; -import WindowSplitterDemoAstro from './WindowSplitterDemo.astro'; interface Props { - framework: Framework; + framework?: Framework; locale?: Locale; } -const { framework, locale = 'en' } = Astro.props; +const { locale = 'en' } = Astro.props; const isJa = locale === 'ja'; --- @@ -30,8 +20,5 @@ const isJa = locale === 'ja'; : 'Use Arrow keys to move the splitter. Press Enter to collapse/expand. Shift+Arrow moves by a larger step. Home/End moves to min/max position.' }

- {framework === 'react' && } - {framework === 'vue' && } - {framework === 'svelte' && } - {framework === 'astro' && } + diff --git a/src/patterns/window-splitter/DemoSection.svelte.astro b/src/patterns/window-splitter/DemoSection.svelte.astro new file mode 100644 index 00000000..c9aea06b --- /dev/null +++ b/src/patterns/window-splitter/DemoSection.svelte.astro @@ -0,0 +1,24 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import WindowSplitterDemoSvelte from './WindowSplitterDemo.svelte'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+

+ { + isJa + ? '矢印キーでスプリッターを移動します。Enter キーで折りたたみ/展開します。Shift+矢印キーで大きなステップで移動します。Home/End キーで最小/最大位置に移動します。' + : 'Use Arrow keys to move the splitter. Press Enter to collapse/expand. Shift+Arrow moves by a larger step. Home/End moves to min/max position.' + } +

+ +
diff --git a/src/patterns/window-splitter/DemoSection.vue.astro b/src/patterns/window-splitter/DemoSection.vue.astro new file mode 100644 index 00000000..6714819d --- /dev/null +++ b/src/patterns/window-splitter/DemoSection.vue.astro @@ -0,0 +1,24 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import WindowSplitterDemoVue from './WindowSplitterDemo.vue'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+

+ { + isJa + ? '矢印キーでスプリッターを移動します。Enter キーで折りたたみ/展開します。Shift+矢印キーで大きなステップで移動します。Home/End キーで最小/最大位置に移動します。' + : 'Use Arrow keys to move the splitter. Press Enter to collapse/expand. Shift+Arrow moves by a larger step. Home/End moves to min/max position.' + } +

+ +
diff --git a/src/patterns/window-splitter/DemoSection.web-component.astro b/src/patterns/window-splitter/DemoSection.web-component.astro new file mode 100644 index 00000000..2a7a4b0b --- /dev/null +++ b/src/patterns/window-splitter/DemoSection.web-component.astro @@ -0,0 +1,24 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import WindowSplitterDemoAstro from './WindowSplitterDemo.astro'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+

+ { + isJa + ? '矢印キーでスプリッターを移動します。Enter キーで折りたたみ/展開します。Shift+矢印キーで大きなステップで移動します。Home/End キーで最小/最大位置に移動します。' + : 'Use Arrow keys to move the splitter. Press Enter to collapse/expand. Shift+Arrow moves by a larger step. Home/End moves to min/max position.' + } +

+ +
From 2e04f84ae780d17dbb93295c89bba926f6048c79 Mon Sep 17 00:00:00 2001 From: masuP9 Date: Mon, 11 May 2026 20:12:57 +0900 Subject: [PATCH 3/6] refactor(patterns): split 3 large patterns (data-grid / dialog / grid) into framework files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - data-grid: React/Vue/Svelte each delegate to their wrapper DataGridDemo component with \`client:load\`; the Astro Web Component file contains the inline columns/rows data and full \`\` invocation. Data is not extracted to a \`*-demo-data.ts\` because only the Astro variant uses it (per the migration rules for renderCell-bearing patterns). - dialog: hydration directives are preserved per framework — React/Vue use \`client:only\`, Svelte uses \`client:load\` with \`contentHtml\` prop (slots cannot cross islands), Astro renders the dialog SSR. Each per-framework file holds the directive verbatim. - grid: same shape as data-grid — Astro Web Component file owns columns, rows, and \`renderCell\` function; the React/Vue/Svelte files delegate. Verified: 3 patterns × 4 frameworks × 2 locales = 24 pages return 200. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../data-grid/DemoSection.react.astro | 12 + .../data-grid/DemoSection.svelte.astro | 12 + src/patterns/data-grid/DemoSection.vue.astro | 12 + ....astro => DemoSection.web-component.astro} | 40 +--- src/patterns/dialog/DemoSection.astro | 219 ------------------ src/patterns/dialog/DemoSection.react.astro | 59 +++++ src/patterns/dialog/DemoSection.svelte.astro | 50 ++++ src/patterns/dialog/DemoSection.vue.astro | 59 +++++ .../dialog/DemoSection.web-component.astro | 57 +++++ src/patterns/grid/DemoSection.react.astro | 24 ++ src/patterns/grid/DemoSection.svelte.astro | 24 ++ src/patterns/grid/DemoSection.vue.astro | 24 ++ ....astro => DemoSection.web-component.astro} | 37 +-- 13 files changed, 353 insertions(+), 276 deletions(-) create mode 100644 src/patterns/data-grid/DemoSection.react.astro create mode 100644 src/patterns/data-grid/DemoSection.svelte.astro create mode 100644 src/patterns/data-grid/DemoSection.vue.astro rename src/patterns/data-grid/{DemoSection.astro => DemoSection.web-component.astro} (54%) delete mode 100644 src/patterns/dialog/DemoSection.astro create mode 100644 src/patterns/dialog/DemoSection.react.astro create mode 100644 src/patterns/dialog/DemoSection.svelte.astro create mode 100644 src/patterns/dialog/DemoSection.vue.astro create mode 100644 src/patterns/dialog/DemoSection.web-component.astro create mode 100644 src/patterns/grid/DemoSection.react.astro create mode 100644 src/patterns/grid/DemoSection.svelte.astro create mode 100644 src/patterns/grid/DemoSection.vue.astro rename src/patterns/grid/{DemoSection.astro => DemoSection.web-component.astro} (72%) diff --git a/src/patterns/data-grid/DemoSection.react.astro b/src/patterns/data-grid/DemoSection.react.astro new file mode 100644 index 00000000..2c1c605c --- /dev/null +++ b/src/patterns/data-grid/DemoSection.react.astro @@ -0,0 +1,12 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import { DataGridDemo as DataGridDemoReact } from './DataGridDemo'; + +interface Props { + framework?: Framework; +} +--- + +
+ +
diff --git a/src/patterns/data-grid/DemoSection.svelte.astro b/src/patterns/data-grid/DemoSection.svelte.astro new file mode 100644 index 00000000..eeea4309 --- /dev/null +++ b/src/patterns/data-grid/DemoSection.svelte.astro @@ -0,0 +1,12 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import DataGridDemoSvelte from './DataGridDemo.svelte'; + +interface Props { + framework?: Framework; +} +--- + +
+ +
diff --git a/src/patterns/data-grid/DemoSection.vue.astro b/src/patterns/data-grid/DemoSection.vue.astro new file mode 100644 index 00000000..80c879ef --- /dev/null +++ b/src/patterns/data-grid/DemoSection.vue.astro @@ -0,0 +1,12 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import DataGridDemoVue from './DataGridDemo.vue'; + +interface Props { + framework?: Framework; +} +--- + +
+ +
diff --git a/src/patterns/data-grid/DemoSection.astro b/src/patterns/data-grid/DemoSection.web-component.astro similarity index 54% rename from src/patterns/data-grid/DemoSection.astro rename to src/patterns/data-grid/DemoSection.web-component.astro index 39580038..31378532 100644 --- a/src/patterns/data-grid/DemoSection.astro +++ b/src/patterns/data-grid/DemoSection.web-component.astro @@ -1,24 +1,11 @@ --- -/** - * Data Grid Demo Section - * - * Renders the data grid demo for each framework variant. - * React, Vue, and Svelte use dedicated Demo wrapper components. - * Astro uses the DataGrid component directly with inline demo data. - */ import type { Framework } from '@/lib/frameworks'; -import { DataGridDemo as DataGridDemoReact } from './DataGridDemo'; -import DataGridDemoVue from './DataGridDemo.vue'; -import DataGridDemoSvelte from './DataGridDemo.svelte'; import DataGrid from './DataGrid.astro'; interface Props { - framework: Framework; + framework?: Framework; } -const { framework } = Astro.props; - -// Demo data for Astro variant const columns = [ { id: 'name', header: 'Name', sortable: true, sortDirection: 'ascending' as const }, { id: 'email', header: 'Email', sortable: true }, @@ -54,20 +41,13 @@ const rows = [ ---
- {framework === 'react' && } - {framework === 'vue' && } - {framework === 'svelte' && } - { - framework === 'astro' && ( - - ) - } +
diff --git a/src/patterns/dialog/DemoSection.astro b/src/patterns/dialog/DemoSection.astro deleted file mode 100644 index 0cb2c43e..00000000 --- a/src/patterns/dialog/DemoSection.astro +++ /dev/null @@ -1,219 +0,0 @@ ---- -/** - * Dialog Demo Section - * - * Renders the dialog demo for each framework variant. - * React and Vue use client:only for proper portal/overlay handling. - * Svelte uses client:load with contentHtml prop since it cannot use slots across islands. - * Astro renders server-side with Web Component interactivity. - */ -import type { Framework } from '@/lib/frameworks'; -import type { Locale } from '@/i18n/ui'; -import DialogDemoReact from './DialogDemo'; -import DialogDemoVue from './DialogDemo.vue'; -import DialogDemoSvelte from './DialogDemo.svelte'; -import Dialog from './Dialog.astro'; - -interface Props { - framework: Framework; - locale?: Locale; -} - -const { framework, locale = 'en' } = Astro.props; -const isJa = locale === 'ja'; ---- - -
- { - framework === 'react' && ( - <> -
-

{isJa ? '基本ダイアログ' : 'Basic Dialog'}

-

- {isJa - ? 'タイトル、説明、閉じる機能を備えたシンプルなモーダルダイアログ。' - : 'A simple modal dialog with title, description, and close functionality.'} -

-
- -

- This is the main content of the dialog. You can place any content here, such as - text, forms, or other components. -

-

- Press{' '} - Escape or - click outside to close. -

- -
-
-
-

{isJa ? '説明なし' : 'Without Description'}

-

- {isJa - ? 'タイトルとコンテンツのみのダイアログ。' - : 'A dialog with only a title and content.'} -

-
- -

This dialog has no description, only a title and content.

- -
-
- - ) - } - { - framework === 'vue' && ( - <> -
-

{isJa ? '基本ダイアログ' : 'Basic Dialog'}

-

- {isJa - ? 'タイトル、説明、閉じる機能を備えたシンプルなモーダルダイアログ。' - : 'A simple modal dialog with title, description, and close functionality.'} -

-
- -

- This is the main content of the dialog. You can place any content here, such as - text, forms, or other components. -

-

- Press{' '} - Escape or - click outside to close. -

- -
-
-
-

{isJa ? '説明なし' : 'Without Description'}

-

- {isJa - ? 'タイトルとコンテンツのみのダイアログ。' - : 'A dialog with only a title and content.'} -

-
- -

This dialog has no description, only a title and content.

- -
-
- - ) - } - { - framework === 'svelte' && ( - <> -
-

{isJa ? '基本ダイアログ' : 'Basic Dialog'}

-

- {isJa - ? 'タイトル、説明、閉じる機能を備えたシンプルなモーダルダイアログ。' - : 'A simple modal dialog with title, description, and close functionality.'} -

-
- This is the main content of the dialog. You can place any content here, such as text, forms, or other components.

Press Escape or click outside to close.

`} - /> -
-
-
-

{isJa ? '説明なし' : 'Without Description'}

-

- {isJa - ? 'タイトルとコンテンツのみのダイアログ。' - : 'A dialog with only a title and content.'} -

-
- -
-
- - ) - } - { - framework === 'astro' && ( - <> -
-

{isJa ? '基本ダイアログ' : 'Basic Dialog'}

-

- {isJa - ? 'タイトル、説明、閉じる機能を備えたシンプルなモーダルダイアログ。' - : 'A simple modal dialog with title, description, and close functionality.'} -

-
- -

- This is the main content of the dialog. You can place any content here, such as - text, forms, or other components. -

-

- Press{' '} - Escape or - click outside to close. -

- -
-
-
-

{isJa ? '説明なし' : 'Without Description'}

-

- {isJa - ? 'タイトルとコンテンツのみのダイアログ。' - : 'A dialog with only a title and content.'} -

-
- -

This dialog has no description, only a title and content.

- -
-
- - ) - } -
diff --git a/src/patterns/dialog/DemoSection.react.astro b/src/patterns/dialog/DemoSection.react.astro new file mode 100644 index 00000000..38bb56f7 --- /dev/null +++ b/src/patterns/dialog/DemoSection.react.astro @@ -0,0 +1,59 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import DialogDemoReact from './DialogDemo'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+

{isJa ? '基本ダイアログ' : 'Basic Dialog'}

+

+ { + isJa + ? 'タイトル、説明、閉じる機能を備えたシンプルなモーダルダイアログ。' + : 'A simple modal dialog with title, description, and close functionality.' + } +

+
+ +

+ This is the main content of the dialog. You can place any content here, such as text, forms, + or other components. +

+

+ Press Escape or click + outside to close. +

+ +
+
+ +
+

{isJa ? '説明なし' : 'Without Description'}

+

+ {isJa ? 'タイトルとコンテンツのみのダイアログ。' : 'A dialog with only a title and content.'} +

+
+ +

This dialog has no description, only a title and content.

+ +
+
diff --git a/src/patterns/dialog/DemoSection.svelte.astro b/src/patterns/dialog/DemoSection.svelte.astro new file mode 100644 index 00000000..d6facfe6 --- /dev/null +++ b/src/patterns/dialog/DemoSection.svelte.astro @@ -0,0 +1,50 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import DialogDemoSvelte from './DialogDemo.svelte'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+

{isJa ? '基本ダイアログ' : 'Basic Dialog'}

+

+ { + isJa + ? 'タイトル、説明、閉じる機能を備えたシンプルなモーダルダイアログ。' + : 'A simple modal dialog with title, description, and close functionality.' + } +

+
+ This is the main content of the dialog. You can place any content here, such as text, forms, or other components.

Press Escape or click outside to close.

`} + /> +
+
+ +
+

{isJa ? '説明なし' : 'Without Description'}

+

+ {isJa ? 'タイトルとコンテンツのみのダイアログ。' : 'A dialog with only a title and content.'} +

+
+ +
+
diff --git a/src/patterns/dialog/DemoSection.vue.astro b/src/patterns/dialog/DemoSection.vue.astro new file mode 100644 index 00000000..00781dfd --- /dev/null +++ b/src/patterns/dialog/DemoSection.vue.astro @@ -0,0 +1,59 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import DialogDemoVue from './DialogDemo.vue'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+

{isJa ? '基本ダイアログ' : 'Basic Dialog'}

+

+ { + isJa + ? 'タイトル、説明、閉じる機能を備えたシンプルなモーダルダイアログ。' + : 'A simple modal dialog with title, description, and close functionality.' + } +

+
+ +

+ This is the main content of the dialog. You can place any content here, such as text, forms, + or other components. +

+

+ Press Escape or click + outside to close. +

+ +
+
+ +
+

{isJa ? '説明なし' : 'Without Description'}

+

+ {isJa ? 'タイトルとコンテンツのみのダイアログ。' : 'A dialog with only a title and content.'} +

+
+ +

This dialog has no description, only a title and content.

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

{isJa ? '基本ダイアログ' : 'Basic Dialog'}

+

+ { + isJa + ? 'タイトル、説明、閉じる機能を備えたシンプルなモーダルダイアログ。' + : 'A simple modal dialog with title, description, and close functionality.' + } +

+
+ +

+ This is the main content of the dialog. You can place any content here, such as text, forms, + or other components. +

+

+ Press Escape or click + outside to close. +

+ +
+
+ +
+

{isJa ? '説明なし' : 'Without Description'}

+

+ {isJa ? 'タイトルとコンテンツのみのダイアログ。' : 'A dialog with only a title and content.'} +

+
+ +

This dialog has no description, only a title and content.

+ +
+
diff --git a/src/patterns/grid/DemoSection.react.astro b/src/patterns/grid/DemoSection.react.astro new file mode 100644 index 00000000..69c91e45 --- /dev/null +++ b/src/patterns/grid/DemoSection.react.astro @@ -0,0 +1,24 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import { GridDemo as GridDemoReact } from './GridDemo'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+

+ { + isJa + ? '矢印キーで移動します。スペースキーでセルを選択します。Enterキーでアクティブにします。' + : 'Navigate with arrow keys. Press Space to select cells. Press Enter to activate.' + } +

+ +
diff --git a/src/patterns/grid/DemoSection.svelte.astro b/src/patterns/grid/DemoSection.svelte.astro new file mode 100644 index 00000000..cf9d1b03 --- /dev/null +++ b/src/patterns/grid/DemoSection.svelte.astro @@ -0,0 +1,24 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import GridDemoSvelte from './GridDemo.svelte'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+

+ { + isJa + ? '矢印キーで移動します。スペースキーでセルを選択します。Enterキーでアクティブにします。' + : 'Navigate with arrow keys. Press Space to select cells. Press Enter to activate.' + } +

+ +
diff --git a/src/patterns/grid/DemoSection.vue.astro b/src/patterns/grid/DemoSection.vue.astro new file mode 100644 index 00000000..4a98637f --- /dev/null +++ b/src/patterns/grid/DemoSection.vue.astro @@ -0,0 +1,24 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import GridDemoVue from './GridDemo.vue'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+

+ { + isJa + ? '矢印キーで移動します。スペースキーでセルを選択します。Enterキーでアクティブにします。' + : 'Navigate with arrow keys. Press Space to select cells. Press Enter to activate.' + } +

+ +
diff --git a/src/patterns/grid/DemoSection.astro b/src/patterns/grid/DemoSection.web-component.astro similarity index 72% rename from src/patterns/grid/DemoSection.astro rename to src/patterns/grid/DemoSection.web-component.astro index dc76401f..f279be06 100644 --- a/src/patterns/grid/DemoSection.astro +++ b/src/patterns/grid/DemoSection.web-component.astro @@ -1,24 +1,14 @@ --- -/** - * Grid Demo Section - * - * Renders the grid demo for each framework variant. - * React, Vue, and Svelte use their respective GridDemo wrapper components. - * Astro uses the Grid component directly with inline data. - */ import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; -import { GridDemo as GridDemoReact } from './GridDemo'; -import GridDemoVue from './GridDemo.vue'; -import GridDemoSvelte from './GridDemo.svelte'; import Grid, { type GridCellData } from './Grid.astro'; interface Props { - framework: Framework; + framework?: Framework; locale?: Locale; } -const { framework, locale = 'en' } = Astro.props; +const { locale = 'en' } = Astro.props; const isJa = locale === 'ja'; const columns = [ @@ -92,19 +82,12 @@ const renderCell = (cell: GridCellData, rowId: string, colId: string) => { : 'Navigate with arrow keys. Press Space to select cells. Press Enter to activate.' }

- {framework === 'react' && } - {framework === 'vue' && } - {framework === 'svelte' && } - { - framework === 'astro' && ( - - ) - } + From 20dbda78f18dd5b523a08b265cc23e9c0406f96b Mon Sep 17 00:00:00 2001 From: masuP9 Date: Tue, 12 May 2026 01:53:17 +0900 Subject: [PATCH 4/6] refactor(pages): drop legacy DemoSection.astro dispatcher fallback After all 32 patterns are migrated to the framework-split format, the legacy unified \`DemoSection.astro\` is gone from the repo. Remove the dispatcher's fallback path: - Drop the \`demoModules\` glob for \`/src/patterns/*/DemoSection.astro\` - Replace the new-then-legacy ternary with a single lookup that throws if the framework-specific file is missing (build-time invariant: the \`getStaticPaths\` only produces valid (pattern, framework) pairs, so a missing loader means an implementation mistake) - Remove the now-unused \`framework\` prop from all per-framework DemoSection files (Astro.props receives only \`locale\`) - Simplify the page invocation from \`{DemoSection && }\` to \`\` Applied with a bulk sed across the 128 \`DemoSection.{react,vue,svelte, web-component}.astro\` files for the prop removal. Verified: - 238/256 pages return 200 in dev (the 18 BAD are all Issue #170 known- failing Vue pages; no new regressions) - npm run lint: 0 errors - npm run build: success (553 pages) Co-Authored-By: Claude Opus 4.7 (1M context) --- .../[pattern]/[framework]/index.astro | 19 +++++++------------ .../[pattern]/[framework]/index.astro | 19 +++++++------------ .../accordion/DemoSection.react.astro | 2 -- .../accordion/DemoSection.svelte.astro | 2 -- src/patterns/accordion/DemoSection.vue.astro | 2 -- .../accordion/DemoSection.web-component.astro | 2 -- .../alert-dialog/DemoSection.react.astro | 2 -- .../alert-dialog/DemoSection.svelte.astro | 2 -- .../alert-dialog/DemoSection.vue.astro | 2 -- .../DemoSection.web-component.astro | 2 -- src/patterns/alert/DemoSection.react.astro | 2 -- src/patterns/alert/DemoSection.svelte.astro | 2 -- src/patterns/alert/DemoSection.vue.astro | 2 -- .../alert/DemoSection.web-component.astro | 2 -- .../breadcrumb/DemoSection.react.astro | 2 -- .../breadcrumb/DemoSection.svelte.astro | 2 -- src/patterns/breadcrumb/DemoSection.vue.astro | 2 -- .../DemoSection.web-component.astro | 2 -- src/patterns/button/DemoSection.react.astro | 2 -- src/patterns/button/DemoSection.svelte.astro | 2 -- src/patterns/button/DemoSection.vue.astro | 2 -- .../button/DemoSection.web-component.astro | 2 -- src/patterns/carousel/DemoSection.react.astro | 2 -- .../carousel/DemoSection.svelte.astro | 2 -- src/patterns/carousel/DemoSection.vue.astro | 2 -- .../carousel/DemoSection.web-component.astro | 2 -- src/patterns/checkbox/DemoSection.react.astro | 2 -- .../checkbox/DemoSection.svelte.astro | 2 -- src/patterns/checkbox/DemoSection.vue.astro | 2 -- .../checkbox/DemoSection.web-component.astro | 2 -- src/patterns/combobox/DemoSection.react.astro | 2 -- .../combobox/DemoSection.svelte.astro | 2 -- src/patterns/combobox/DemoSection.vue.astro | 2 -- .../combobox/DemoSection.web-component.astro | 2 -- .../data-grid/DemoSection.react.astro | 2 -- .../data-grid/DemoSection.svelte.astro | 2 -- src/patterns/data-grid/DemoSection.vue.astro | 2 -- .../data-grid/DemoSection.web-component.astro | 2 -- src/patterns/dialog/DemoSection.react.astro | 2 -- src/patterns/dialog/DemoSection.svelte.astro | 2 -- src/patterns/dialog/DemoSection.vue.astro | 2 -- .../dialog/DemoSection.web-component.astro | 2 -- .../disclosure/DemoSection.react.astro | 2 -- .../disclosure/DemoSection.svelte.astro | 2 -- src/patterns/disclosure/DemoSection.vue.astro | 2 -- .../DemoSection.web-component.astro | 2 -- src/patterns/feed/DemoSection.react.astro | 2 -- src/patterns/feed/DemoSection.svelte.astro | 2 -- src/patterns/feed/DemoSection.vue.astro | 2 -- .../feed/DemoSection.web-component.astro | 2 -- src/patterns/grid/DemoSection.react.astro | 2 -- src/patterns/grid/DemoSection.svelte.astro | 2 -- src/patterns/grid/DemoSection.vue.astro | 2 -- .../grid/DemoSection.web-component.astro | 2 -- .../landmarks/DemoSection.react.astro | 2 -- .../landmarks/DemoSection.svelte.astro | 2 -- src/patterns/landmarks/DemoSection.vue.astro | 2 -- .../landmarks/DemoSection.web-component.astro | 2 -- src/patterns/link/DemoSection.react.astro | 2 -- src/patterns/link/DemoSection.svelte.astro | 2 -- src/patterns/link/DemoSection.vue.astro | 2 -- .../link/DemoSection.web-component.astro | 2 -- src/patterns/listbox/DemoSection.react.astro | 2 -- src/patterns/listbox/DemoSection.svelte.astro | 2 -- src/patterns/listbox/DemoSection.vue.astro | 2 -- .../listbox/DemoSection.web-component.astro | 2 -- .../menu-button/DemoSection.react.astro | 2 -- .../menu-button/DemoSection.svelte.astro | 2 -- .../menu-button/DemoSection.vue.astro | 2 -- .../DemoSection.web-component.astro | 2 -- src/patterns/menubar/DemoSection.react.astro | 2 -- src/patterns/menubar/DemoSection.svelte.astro | 2 -- src/patterns/menubar/DemoSection.vue.astro | 2 -- .../menubar/DemoSection.web-component.astro | 2 -- src/patterns/meter/DemoSection.react.astro | 2 -- src/patterns/meter/DemoSection.svelte.astro | 2 -- src/patterns/meter/DemoSection.vue.astro | 2 -- .../meter/DemoSection.web-component.astro | 2 -- .../radio-group/DemoSection.react.astro | 2 -- .../radio-group/DemoSection.svelte.astro | 2 -- .../radio-group/DemoSection.vue.astro | 2 -- .../DemoSection.web-component.astro | 2 -- .../slider-multithumb/DemoSection.react.astro | 2 -- .../DemoSection.svelte.astro | 2 -- .../slider-multithumb/DemoSection.vue.astro | 2 -- .../DemoSection.web-component.astro | 2 -- src/patterns/slider/DemoSection.react.astro | 2 -- src/patterns/slider/DemoSection.svelte.astro | 2 -- src/patterns/slider/DemoSection.vue.astro | 2 -- .../slider/DemoSection.web-component.astro | 2 -- .../spinbutton/DemoSection.react.astro | 2 -- .../spinbutton/DemoSection.svelte.astro | 2 -- src/patterns/spinbutton/DemoSection.vue.astro | 2 -- .../DemoSection.web-component.astro | 2 -- src/patterns/switch/DemoSection.react.astro | 2 -- src/patterns/switch/DemoSection.svelte.astro | 2 -- src/patterns/switch/DemoSection.vue.astro | 2 -- .../switch/DemoSection.web-component.astro | 2 -- src/patterns/table/DemoSection.react.astro | 2 -- src/patterns/table/DemoSection.svelte.astro | 2 -- src/patterns/table/DemoSection.vue.astro | 2 -- .../table/DemoSection.web-component.astro | 2 -- src/patterns/tabs/DemoSection.react.astro | 2 -- src/patterns/tabs/DemoSection.svelte.astro | 2 -- src/patterns/tabs/DemoSection.vue.astro | 2 -- .../tabs/DemoSection.web-component.astro | 2 -- .../toggle-button/DemoSection.react.astro | 2 -- .../toggle-button/DemoSection.svelte.astro | 2 -- .../toggle-button/DemoSection.vue.astro | 2 -- .../DemoSection.web-component.astro | 2 -- src/patterns/toolbar/DemoSection.react.astro | 2 -- src/patterns/toolbar/DemoSection.svelte.astro | 2 -- src/patterns/toolbar/DemoSection.vue.astro | 2 -- .../toolbar/DemoSection.web-component.astro | 2 -- src/patterns/tooltip/DemoSection.react.astro | 2 -- src/patterns/tooltip/DemoSection.svelte.astro | 2 -- src/patterns/tooltip/DemoSection.vue.astro | 2 -- .../tooltip/DemoSection.web-component.astro | 2 -- .../tree-view/DemoSection.react.astro | 2 -- .../tree-view/DemoSection.svelte.astro | 2 -- src/patterns/tree-view/DemoSection.vue.astro | 2 -- .../tree-view/DemoSection.web-component.astro | 2 -- src/patterns/treegrid/DemoSection.react.astro | 2 -- .../treegrid/DemoSection.svelte.astro | 2 -- src/patterns/treegrid/DemoSection.vue.astro | 2 -- .../treegrid/DemoSection.web-component.astro | 2 -- .../window-splitter/DemoSection.react.astro | 2 -- .../window-splitter/DemoSection.svelte.astro | 2 -- .../window-splitter/DemoSection.vue.astro | 2 -- .../DemoSection.web-component.astro | 2 -- 130 files changed, 14 insertions(+), 280 deletions(-) diff --git a/src/pages/ja/patterns/[pattern]/[framework]/index.astro b/src/pages/ja/patterns/[pattern]/[framework]/index.astro index b6c5857e..fb5ee127 100644 --- a/src/pages/ja/patterns/[pattern]/[framework]/index.astro +++ b/src/pages/ja/patterns/[pattern]/[framework]/index.astro @@ -24,7 +24,6 @@ import { useTranslation } from '@/i18n'; import type { PatternMeta } from '@/lib/pattern-meta-types'; // Glob imports for dynamic content loading -const demoModules = import.meta.glob<{ default: any }>('/src/patterns/*/DemoSection.astro'); const demoReactModules = import.meta.glob<{ default: any }>( '/src/patterns/*/DemoSection.react.astro' ); @@ -100,16 +99,12 @@ if (!fwMeta) { const fwInfo = FRAMEWORK_INFO[framework]; // Load dynamic components -// Prefer framework-specific DemoSection (DemoSection.{framework}.astro) if present, -// fall back to the legacy unified DemoSection.astro during migration. -const newDemoLoader = - frameworkDemoModules[framework][ - `/src/patterns/${pattern}/DemoSection.${frameworkDemoKey[framework]}.astro` - ]; -const legacyDemoLoader = demoModules[`/src/patterns/${pattern}/DemoSection.astro`]; -const DemoSection = newDemoLoader - ? ((await newDemoLoader()).default as any) - : ((await legacyDemoLoader?.())?.default as any); +const demoLoaderPath = `/src/patterns/${pattern}/DemoSection.${frameworkDemoKey[framework]}.astro`; +const demoLoader = frameworkDemoModules[framework][demoLoaderPath]; +if (!demoLoader) { + throw new Error(`DemoSection not found: ${demoLoaderPath}`); +} +const DemoSection = (await demoLoader()).default as any; const TestingDocs = (await testingModules[`/src/patterns/${pattern}/TestingDocs.astro`]?.()) ?.default as any; const NativeHtmlNotice = meta.hasNativeHtmlNotice @@ -166,7 +161,7 @@ const { Content: AccessibilityContent } = await getAccessibilityContent(pattern,
{t('pattern.demo')} - {DemoSection && } +

デモのみ表示 →

diff --git a/src/pages/patterns/[pattern]/[framework]/index.astro b/src/pages/patterns/[pattern]/[framework]/index.astro index c2314eee..aba05e01 100644 --- a/src/pages/patterns/[pattern]/[framework]/index.astro +++ b/src/pages/patterns/[pattern]/[framework]/index.astro @@ -26,7 +26,6 @@ import { getPatterns } from '@/lib/patterns'; import type { PatternMeta } from '@/lib/pattern-meta-types'; // Glob imports for dynamic content loading -const demoModules = import.meta.glob<{ default: any }>('/src/patterns/*/DemoSection.astro'); const demoReactModules = import.meta.glob<{ default: any }>( '/src/patterns/*/DemoSection.react.astro' ); @@ -101,16 +100,12 @@ if (!fwMeta) { const fwInfo = FRAMEWORK_INFO[framework]; // Load dynamic components -// Prefer framework-specific DemoSection (DemoSection.{framework}.astro) if present, -// fall back to the legacy unified DemoSection.astro during migration. -const newDemoLoader = - frameworkDemoModules[framework][ - `/src/patterns/${pattern}/DemoSection.${frameworkDemoKey[framework]}.astro` - ]; -const legacyDemoLoader = demoModules[`/src/patterns/${pattern}/DemoSection.astro`]; -const DemoSection = newDemoLoader - ? ((await newDemoLoader()).default as any) - : ((await legacyDemoLoader?.())?.default as any); +const demoLoaderPath = `/src/patterns/${pattern}/DemoSection.${frameworkDemoKey[framework]}.astro`; +const demoLoader = frameworkDemoModules[framework][demoLoaderPath]; +if (!demoLoader) { + throw new Error(`DemoSection not found: ${demoLoaderPath}`); +} +const DemoSection = (await demoLoader()).default as any; const TestingDocs = (await testingModules[`/src/patterns/${pattern}/TestingDocs.astro`]?.()) ?.default as any; const NativeHtmlNotice = meta.hasNativeHtmlNotice @@ -166,7 +161,7 @@ const { Content: AccessibilityContent } = await getAccessibilityContent(pattern,
Demo - {DemoSection && } +

Open demo only →

diff --git a/src/patterns/accordion/DemoSection.react.astro b/src/patterns/accordion/DemoSection.react.astro index 3a26500a..c8448985 100644 --- a/src/patterns/accordion/DemoSection.react.astro +++ b/src/patterns/accordion/DemoSection.react.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { Accordion as AccordionReact } from './Accordion'; import { defaultItems, multipleItems, disabledItems } from './accordion-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/accordion/DemoSection.svelte.astro b/src/patterns/accordion/DemoSection.svelte.astro index 9a108bf7..cfc738eb 100644 --- a/src/patterns/accordion/DemoSection.svelte.astro +++ b/src/patterns/accordion/DemoSection.svelte.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import AccordionSvelte from './Accordion.svelte'; import { defaultItems, multipleItems, disabledItems } from './accordion-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/accordion/DemoSection.vue.astro b/src/patterns/accordion/DemoSection.vue.astro index 4ec734e9..39405959 100644 --- a/src/patterns/accordion/DemoSection.vue.astro +++ b/src/patterns/accordion/DemoSection.vue.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import AccordionVue from './Accordion.vue'; import { defaultItems, multipleItems, disabledItems } from './accordion-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/accordion/DemoSection.web-component.astro b/src/patterns/accordion/DemoSection.web-component.astro index 6caf6371..8b5f7289 100644 --- a/src/patterns/accordion/DemoSection.web-component.astro +++ b/src/patterns/accordion/DemoSection.web-component.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import AccordionAstro from './Accordion.astro'; import { defaultItems, multipleItems, disabledItems } from './accordion-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/alert-dialog/DemoSection.react.astro b/src/patterns/alert-dialog/DemoSection.react.astro index d6ef181e..6edbd726 100644 --- a/src/patterns/alert-dialog/DemoSection.react.astro +++ b/src/patterns/alert-dialog/DemoSection.react.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import AlertDialogDemoReact from './AlertDialogDemo'; interface Props { - framework?: Framework; locale?: Locale; } --- diff --git a/src/patterns/alert-dialog/DemoSection.svelte.astro b/src/patterns/alert-dialog/DemoSection.svelte.astro index f0a6af43..45cb477a 100644 --- a/src/patterns/alert-dialog/DemoSection.svelte.astro +++ b/src/patterns/alert-dialog/DemoSection.svelte.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import AlertDialogDemoSvelte from './AlertDialogDemo.svelte'; interface Props { - framework?: Framework; locale?: Locale; } --- diff --git a/src/patterns/alert-dialog/DemoSection.vue.astro b/src/patterns/alert-dialog/DemoSection.vue.astro index 093bb743..250fd24d 100644 --- a/src/patterns/alert-dialog/DemoSection.vue.astro +++ b/src/patterns/alert-dialog/DemoSection.vue.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import AlertDialogDemoVue from './AlertDialogDemo.vue'; interface Props { - framework?: Framework; locale?: Locale; } --- diff --git a/src/patterns/alert-dialog/DemoSection.web-component.astro b/src/patterns/alert-dialog/DemoSection.web-component.astro index c6ad13a3..5d706f41 100644 --- a/src/patterns/alert-dialog/DemoSection.web-component.astro +++ b/src/patterns/alert-dialog/DemoSection.web-component.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import AlertDialog from './AlertDialog.astro'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/alert/DemoSection.react.astro b/src/patterns/alert/DemoSection.react.astro index 71a4812f..32c93e95 100644 --- a/src/patterns/alert/DemoSection.react.astro +++ b/src/patterns/alert/DemoSection.react.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { AlertDemo as AlertDemoReact } from './AlertDemo'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/alert/DemoSection.svelte.astro b/src/patterns/alert/DemoSection.svelte.astro index 3d639251..a146cbee 100644 --- a/src/patterns/alert/DemoSection.svelte.astro +++ b/src/patterns/alert/DemoSection.svelte.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import AlertDemoSvelte from './AlertDemo.svelte'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/alert/DemoSection.vue.astro b/src/patterns/alert/DemoSection.vue.astro index 25d44ee1..606d32c8 100644 --- a/src/patterns/alert/DemoSection.vue.astro +++ b/src/patterns/alert/DemoSection.vue.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import AlertDemoVue from './AlertDemo.vue'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/alert/DemoSection.web-component.astro b/src/patterns/alert/DemoSection.web-component.astro index a4fce13c..e454d643 100644 --- a/src/patterns/alert/DemoSection.web-component.astro +++ b/src/patterns/alert/DemoSection.web-component.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import Alert from './Alert.astro'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/breadcrumb/DemoSection.react.astro b/src/patterns/breadcrumb/DemoSection.react.astro index cee2bf4c..905a8546 100644 --- a/src/patterns/breadcrumb/DemoSection.react.astro +++ b/src/patterns/breadcrumb/DemoSection.react.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { Breadcrumb as BreadcrumbReact } from './Breadcrumb'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/breadcrumb/DemoSection.svelte.astro b/src/patterns/breadcrumb/DemoSection.svelte.astro index a1bbf3b3..b5ae717c 100644 --- a/src/patterns/breadcrumb/DemoSection.svelte.astro +++ b/src/patterns/breadcrumb/DemoSection.svelte.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import BreadcrumbSvelte from './Breadcrumb.svelte'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/breadcrumb/DemoSection.vue.astro b/src/patterns/breadcrumb/DemoSection.vue.astro index 144a24d5..911da853 100644 --- a/src/patterns/breadcrumb/DemoSection.vue.astro +++ b/src/patterns/breadcrumb/DemoSection.vue.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import BreadcrumbVue from './Breadcrumb.vue'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/breadcrumb/DemoSection.web-component.astro b/src/patterns/breadcrumb/DemoSection.web-component.astro index a8c7dbbd..4e537fc4 100644 --- a/src/patterns/breadcrumb/DemoSection.web-component.astro +++ b/src/patterns/breadcrumb/DemoSection.web-component.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import BreadcrumbAstro from './Breadcrumb.astro'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/button/DemoSection.react.astro b/src/patterns/button/DemoSection.react.astro index 1fe0e9b9..b2bb6278 100644 --- a/src/patterns/button/DemoSection.react.astro +++ b/src/patterns/button/DemoSection.react.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import { Button as ButtonReact } from './Button'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/button/DemoSection.svelte.astro b/src/patterns/button/DemoSection.svelte.astro index aa8b972a..e7995cca 100644 --- a/src/patterns/button/DemoSection.svelte.astro +++ b/src/patterns/button/DemoSection.svelte.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import ButtonSvelte from './Button.svelte'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/button/DemoSection.vue.astro b/src/patterns/button/DemoSection.vue.astro index d933ac37..74f3c0c9 100644 --- a/src/patterns/button/DemoSection.vue.astro +++ b/src/patterns/button/DemoSection.vue.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import ButtonVue from './Button.vue'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/button/DemoSection.web-component.astro b/src/patterns/button/DemoSection.web-component.astro index 1e2c6e33..c8de5f24 100644 --- a/src/patterns/button/DemoSection.web-component.astro +++ b/src/patterns/button/DemoSection.web-component.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import ButtonAstro from './Button.astro'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/carousel/DemoSection.react.astro b/src/patterns/carousel/DemoSection.react.astro index 93ca35ba..47275d15 100644 --- a/src/patterns/carousel/DemoSection.react.astro +++ b/src/patterns/carousel/DemoSection.react.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { CarouselDemo as CarouselDemoReact } from './CarouselDemo'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/carousel/DemoSection.svelte.astro b/src/patterns/carousel/DemoSection.svelte.astro index 08cd7052..85cb07c5 100644 --- a/src/patterns/carousel/DemoSection.svelte.astro +++ b/src/patterns/carousel/DemoSection.svelte.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import CarouselDemoSvelte from './CarouselDemo.svelte'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/carousel/DemoSection.vue.astro b/src/patterns/carousel/DemoSection.vue.astro index e68abd9f..99a95b1c 100644 --- a/src/patterns/carousel/DemoSection.vue.astro +++ b/src/patterns/carousel/DemoSection.vue.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import CarouselDemoVue from './CarouselDemo.vue'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/carousel/DemoSection.web-component.astro b/src/patterns/carousel/DemoSection.web-component.astro index d047fea7..ca16ca38 100644 --- a/src/patterns/carousel/DemoSection.web-component.astro +++ b/src/patterns/carousel/DemoSection.web-component.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import CarouselDemoAstro from './CarouselDemo.astro'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/checkbox/DemoSection.react.astro b/src/patterns/checkbox/DemoSection.react.astro index b0323cc0..58fba7e1 100644 --- a/src/patterns/checkbox/DemoSection.react.astro +++ b/src/patterns/checkbox/DemoSection.react.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import { Checkbox as CheckboxReact } from './Checkbox'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/checkbox/DemoSection.svelte.astro b/src/patterns/checkbox/DemoSection.svelte.astro index 93586023..9939a168 100644 --- a/src/patterns/checkbox/DemoSection.svelte.astro +++ b/src/patterns/checkbox/DemoSection.svelte.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import CheckboxSvelte from './Checkbox.svelte'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/checkbox/DemoSection.vue.astro b/src/patterns/checkbox/DemoSection.vue.astro index 600d76dd..6476029e 100644 --- a/src/patterns/checkbox/DemoSection.vue.astro +++ b/src/patterns/checkbox/DemoSection.vue.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import CheckboxVue from './Checkbox.vue'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/checkbox/DemoSection.web-component.astro b/src/patterns/checkbox/DemoSection.web-component.astro index 2ff5f737..14a9a3a8 100644 --- a/src/patterns/checkbox/DemoSection.web-component.astro +++ b/src/patterns/checkbox/DemoSection.web-component.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import CheckboxAstro from './Checkbox.astro'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/combobox/DemoSection.react.astro b/src/patterns/combobox/DemoSection.react.astro index 47bfa83f..0c34f923 100644 --- a/src/patterns/combobox/DemoSection.react.astro +++ b/src/patterns/combobox/DemoSection.react.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { Combobox as ComboboxReact } from './Combobox'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/combobox/DemoSection.svelte.astro b/src/patterns/combobox/DemoSection.svelte.astro index 19911814..0d9968d0 100644 --- a/src/patterns/combobox/DemoSection.svelte.astro +++ b/src/patterns/combobox/DemoSection.svelte.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import ComboboxSvelte from './Combobox.svelte'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/combobox/DemoSection.vue.astro b/src/patterns/combobox/DemoSection.vue.astro index ec422c07..9f61a810 100644 --- a/src/patterns/combobox/DemoSection.vue.astro +++ b/src/patterns/combobox/DemoSection.vue.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import ComboboxVue from './Combobox.vue'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/combobox/DemoSection.web-component.astro b/src/patterns/combobox/DemoSection.web-component.astro index d2622d8a..02ea76dd 100644 --- a/src/patterns/combobox/DemoSection.web-component.astro +++ b/src/patterns/combobox/DemoSection.web-component.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import ComboboxAstro from './Combobox.astro'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/data-grid/DemoSection.react.astro b/src/patterns/data-grid/DemoSection.react.astro index 2c1c605c..f96f1dae 100644 --- a/src/patterns/data-grid/DemoSection.react.astro +++ b/src/patterns/data-grid/DemoSection.react.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import { DataGridDemo as DataGridDemoReact } from './DataGridDemo'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/data-grid/DemoSection.svelte.astro b/src/patterns/data-grid/DemoSection.svelte.astro index eeea4309..ae1c1d7b 100644 --- a/src/patterns/data-grid/DemoSection.svelte.astro +++ b/src/patterns/data-grid/DemoSection.svelte.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import DataGridDemoSvelte from './DataGridDemo.svelte'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/data-grid/DemoSection.vue.astro b/src/patterns/data-grid/DemoSection.vue.astro index 80c879ef..75ba9a0e 100644 --- a/src/patterns/data-grid/DemoSection.vue.astro +++ b/src/patterns/data-grid/DemoSection.vue.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import DataGridDemoVue from './DataGridDemo.vue'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/data-grid/DemoSection.web-component.astro b/src/patterns/data-grid/DemoSection.web-component.astro index 31378532..5fdb519a 100644 --- a/src/patterns/data-grid/DemoSection.web-component.astro +++ b/src/patterns/data-grid/DemoSection.web-component.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import DataGrid from './DataGrid.astro'; interface Props { - framework?: Framework; } const columns = [ diff --git a/src/patterns/dialog/DemoSection.react.astro b/src/patterns/dialog/DemoSection.react.astro index 38bb56f7..fad151fd 100644 --- a/src/patterns/dialog/DemoSection.react.astro +++ b/src/patterns/dialog/DemoSection.react.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import DialogDemoReact from './DialogDemo'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/dialog/DemoSection.svelte.astro b/src/patterns/dialog/DemoSection.svelte.astro index d6facfe6..212b1799 100644 --- a/src/patterns/dialog/DemoSection.svelte.astro +++ b/src/patterns/dialog/DemoSection.svelte.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import DialogDemoSvelte from './DialogDemo.svelte'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/dialog/DemoSection.vue.astro b/src/patterns/dialog/DemoSection.vue.astro index 00781dfd..e1fa726b 100644 --- a/src/patterns/dialog/DemoSection.vue.astro +++ b/src/patterns/dialog/DemoSection.vue.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import DialogDemoVue from './DialogDemo.vue'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/dialog/DemoSection.web-component.astro b/src/patterns/dialog/DemoSection.web-component.astro index b45937dd..5a44cc6f 100644 --- a/src/patterns/dialog/DemoSection.web-component.astro +++ b/src/patterns/dialog/DemoSection.web-component.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import Dialog from './Dialog.astro'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/disclosure/DemoSection.react.astro b/src/patterns/disclosure/DemoSection.react.astro index 6f77f44a..9094afe5 100644 --- a/src/patterns/disclosure/DemoSection.react.astro +++ b/src/patterns/disclosure/DemoSection.react.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { Disclosure as DisclosureReact } from './Disclosure'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/disclosure/DemoSection.svelte.astro b/src/patterns/disclosure/DemoSection.svelte.astro index 3f9fd169..41ffb898 100644 --- a/src/patterns/disclosure/DemoSection.svelte.astro +++ b/src/patterns/disclosure/DemoSection.svelte.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import DisclosureSvelte from './Disclosure.svelte'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/disclosure/DemoSection.vue.astro b/src/patterns/disclosure/DemoSection.vue.astro index ad20fafd..f7265e5b 100644 --- a/src/patterns/disclosure/DemoSection.vue.astro +++ b/src/patterns/disclosure/DemoSection.vue.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import DisclosureVue from './Disclosure.vue'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/disclosure/DemoSection.web-component.astro b/src/patterns/disclosure/DemoSection.web-component.astro index 2cf30a65..582ea966 100644 --- a/src/patterns/disclosure/DemoSection.web-component.astro +++ b/src/patterns/disclosure/DemoSection.web-component.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import DisclosureAstro from './Disclosure.astro'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/feed/DemoSection.react.astro b/src/patterns/feed/DemoSection.react.astro index 2104ad37..774bf06e 100644 --- a/src/patterns/feed/DemoSection.react.astro +++ b/src/patterns/feed/DemoSection.react.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { FeedDemo as FeedDemoReact } from './FeedDemo'; import { FeedDemoJa as FeedDemoJaReact } from './FeedDemoJa'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/feed/DemoSection.svelte.astro b/src/patterns/feed/DemoSection.svelte.astro index 7a8d5f0e..6794ed24 100644 --- a/src/patterns/feed/DemoSection.svelte.astro +++ b/src/patterns/feed/DemoSection.svelte.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import FeedDemoSvelte from './FeedDemo.svelte'; import FeedDemoJaSvelte from './FeedDemoJa.svelte'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/feed/DemoSection.vue.astro b/src/patterns/feed/DemoSection.vue.astro index 81438ef4..aa69da3d 100644 --- a/src/patterns/feed/DemoSection.vue.astro +++ b/src/patterns/feed/DemoSection.vue.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import FeedDemoVue from './FeedDemo.vue'; import FeedDemoJaVue from './FeedDemoJa.vue'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/feed/DemoSection.web-component.astro b/src/patterns/feed/DemoSection.web-component.astro index 045a029c..5f4fc5bc 100644 --- a/src/patterns/feed/DemoSection.web-component.astro +++ b/src/patterns/feed/DemoSection.web-component.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import FeedDemoAstro from './FeedDemo.astro'; import FeedDemoJaAstro from './FeedDemoJa.astro'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/grid/DemoSection.react.astro b/src/patterns/grid/DemoSection.react.astro index 69c91e45..ee417f2e 100644 --- a/src/patterns/grid/DemoSection.react.astro +++ b/src/patterns/grid/DemoSection.react.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { GridDemo as GridDemoReact } from './GridDemo'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/grid/DemoSection.svelte.astro b/src/patterns/grid/DemoSection.svelte.astro index cf9d1b03..f7487ad1 100644 --- a/src/patterns/grid/DemoSection.svelte.astro +++ b/src/patterns/grid/DemoSection.svelte.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import GridDemoSvelte from './GridDemo.svelte'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/grid/DemoSection.vue.astro b/src/patterns/grid/DemoSection.vue.astro index 4a98637f..c1462206 100644 --- a/src/patterns/grid/DemoSection.vue.astro +++ b/src/patterns/grid/DemoSection.vue.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import GridDemoVue from './GridDemo.vue'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/grid/DemoSection.web-component.astro b/src/patterns/grid/DemoSection.web-component.astro index f279be06..682331fa 100644 --- a/src/patterns/grid/DemoSection.web-component.astro +++ b/src/patterns/grid/DemoSection.web-component.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import Grid, { type GridCellData } from './Grid.astro'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/landmarks/DemoSection.react.astro b/src/patterns/landmarks/DemoSection.react.astro index dcbe9b69..996f137a 100644 --- a/src/patterns/landmarks/DemoSection.react.astro +++ b/src/patterns/landmarks/DemoSection.react.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import { LandmarkDemo as LandmarkDemoReact } from './LandmarkDemo'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/landmarks/DemoSection.svelte.astro b/src/patterns/landmarks/DemoSection.svelte.astro index 59e8b042..0f32e253 100644 --- a/src/patterns/landmarks/DemoSection.svelte.astro +++ b/src/patterns/landmarks/DemoSection.svelte.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import LandmarkDemoSvelte from './LandmarkDemo.svelte'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/landmarks/DemoSection.vue.astro b/src/patterns/landmarks/DemoSection.vue.astro index 0d255a4d..c6fe33dc 100644 --- a/src/patterns/landmarks/DemoSection.vue.astro +++ b/src/patterns/landmarks/DemoSection.vue.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import LandmarkDemoVue from './LandmarkDemo.vue'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/landmarks/DemoSection.web-component.astro b/src/patterns/landmarks/DemoSection.web-component.astro index c6d40785..a3a61107 100644 --- a/src/patterns/landmarks/DemoSection.web-component.astro +++ b/src/patterns/landmarks/DemoSection.web-component.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import LandmarkDemoAstro from './LandmarkDemo.astro'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/link/DemoSection.react.astro b/src/patterns/link/DemoSection.react.astro index ff9a9337..6d2fa845 100644 --- a/src/patterns/link/DemoSection.react.astro +++ b/src/patterns/link/DemoSection.react.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import { Link as LinkReact } from './Link'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/link/DemoSection.svelte.astro b/src/patterns/link/DemoSection.svelte.astro index efe66b3f..165826e6 100644 --- a/src/patterns/link/DemoSection.svelte.astro +++ b/src/patterns/link/DemoSection.svelte.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import LinkSvelte from './Link.svelte'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/link/DemoSection.vue.astro b/src/patterns/link/DemoSection.vue.astro index 6b4f0e8d..6b0d6243 100644 --- a/src/patterns/link/DemoSection.vue.astro +++ b/src/patterns/link/DemoSection.vue.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import LinkVue from './Link.vue'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/link/DemoSection.web-component.astro b/src/patterns/link/DemoSection.web-component.astro index 88225381..6672a782 100644 --- a/src/patterns/link/DemoSection.web-component.astro +++ b/src/patterns/link/DemoSection.web-component.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import LinkAstro from './Link.astro'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/listbox/DemoSection.react.astro b/src/patterns/listbox/DemoSection.react.astro index 6b9efb0a..42adbc4d 100644 --- a/src/patterns/listbox/DemoSection.react.astro +++ b/src/patterns/listbox/DemoSection.react.astro @@ -1,5 +1,4 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { SingleSelectListboxDemo, @@ -8,7 +7,6 @@ import { } from './ListboxDemo'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/listbox/DemoSection.svelte.astro b/src/patterns/listbox/DemoSection.svelte.astro index 328a591d..a7b6725e 100644 --- a/src/patterns/listbox/DemoSection.svelte.astro +++ b/src/patterns/listbox/DemoSection.svelte.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import ListboxDemoSvelte from './ListboxDemo.svelte'; import { fruitOptions, colorOptions } from './listbox-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/listbox/DemoSection.vue.astro b/src/patterns/listbox/DemoSection.vue.astro index cbe5cc39..051caafa 100644 --- a/src/patterns/listbox/DemoSection.vue.astro +++ b/src/patterns/listbox/DemoSection.vue.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import ListboxDemoVue from './ListboxDemo.vue'; import { fruitOptions, colorOptions } from './listbox-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/listbox/DemoSection.web-component.astro b/src/patterns/listbox/DemoSection.web-component.astro index 615eeb68..031ef95c 100644 --- a/src/patterns/listbox/DemoSection.web-component.astro +++ b/src/patterns/listbox/DemoSection.web-component.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import Listbox from './Listbox.astro'; import { fruitOptions, colorOptions } from './listbox-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/menu-button/DemoSection.react.astro b/src/patterns/menu-button/DemoSection.react.astro index 10e2c1f4..0164253c 100644 --- a/src/patterns/menu-button/DemoSection.react.astro +++ b/src/patterns/menu-button/DemoSection.react.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { BasicMenuButtonDemo, DisabledItemsMenuButtonDemo } from './MenuButtonDemo'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/menu-button/DemoSection.svelte.astro b/src/patterns/menu-button/DemoSection.svelte.astro index b0d2299c..753f29a1 100644 --- a/src/patterns/menu-button/DemoSection.svelte.astro +++ b/src/patterns/menu-button/DemoSection.svelte.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import MenuButtonDemoSvelte from './MenuButtonDemo.svelte'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/menu-button/DemoSection.vue.astro b/src/patterns/menu-button/DemoSection.vue.astro index 294823f8..b0b16fed 100644 --- a/src/patterns/menu-button/DemoSection.vue.astro +++ b/src/patterns/menu-button/DemoSection.vue.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import MenuButtonDemoVue from './MenuButtonDemo.vue'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/menu-button/DemoSection.web-component.astro b/src/patterns/menu-button/DemoSection.web-component.astro index 12c9ab95..41d07a08 100644 --- a/src/patterns/menu-button/DemoSection.web-component.astro +++ b/src/patterns/menu-button/DemoSection.web-component.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import MenuButton from './MenuButton.astro'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/menubar/DemoSection.react.astro b/src/patterns/menubar/DemoSection.react.astro index 0780bd90..abd931a8 100644 --- a/src/patterns/menubar/DemoSection.react.astro +++ b/src/patterns/menubar/DemoSection.react.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import { BasicMenubarDemo } from './MenubarDemo'; import '@patterns/menubar/menubar.css'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/menubar/DemoSection.svelte.astro b/src/patterns/menubar/DemoSection.svelte.astro index aa1d3c2d..7a2e4af8 100644 --- a/src/patterns/menubar/DemoSection.svelte.astro +++ b/src/patterns/menubar/DemoSection.svelte.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import MenubarDemoSvelte from './MenubarDemo.svelte'; import '@patterns/menubar/menubar.css'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/menubar/DemoSection.vue.astro b/src/patterns/menubar/DemoSection.vue.astro index 90b59e65..51f2904c 100644 --- a/src/patterns/menubar/DemoSection.vue.astro +++ b/src/patterns/menubar/DemoSection.vue.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import MenubarDemoVue from './MenubarDemo.vue'; import '@patterns/menubar/menubar.css'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/menubar/DemoSection.web-component.astro b/src/patterns/menubar/DemoSection.web-component.astro index 7d5630bc..092b01c1 100644 --- a/src/patterns/menubar/DemoSection.web-component.astro +++ b/src/patterns/menubar/DemoSection.web-component.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import Menubar, { type MenubarItem } from './Menubar.astro'; import '@patterns/menubar/menubar.css'; interface Props { - framework?: Framework; } const menubarItems: MenubarItem[] = [ diff --git a/src/patterns/meter/DemoSection.react.astro b/src/patterns/meter/DemoSection.react.astro index 39adcab7..a5cc48d4 100644 --- a/src/patterns/meter/DemoSection.react.astro +++ b/src/patterns/meter/DemoSection.react.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import { Meter as MeterReact } from './Meter'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/meter/DemoSection.svelte.astro b/src/patterns/meter/DemoSection.svelte.astro index adae5cec..8d5c4968 100644 --- a/src/patterns/meter/DemoSection.svelte.astro +++ b/src/patterns/meter/DemoSection.svelte.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import MeterSvelte from './Meter.svelte'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/meter/DemoSection.vue.astro b/src/patterns/meter/DemoSection.vue.astro index f6da490a..91ac1d36 100644 --- a/src/patterns/meter/DemoSection.vue.astro +++ b/src/patterns/meter/DemoSection.vue.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import MeterVue from './Meter.vue'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/meter/DemoSection.web-component.astro b/src/patterns/meter/DemoSection.web-component.astro index 8a8906f9..b9aec9a4 100644 --- a/src/patterns/meter/DemoSection.web-component.astro +++ b/src/patterns/meter/DemoSection.web-component.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import MeterAstro from './Meter.astro'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/radio-group/DemoSection.react.astro b/src/patterns/radio-group/DemoSection.react.astro index 55f2da77..1287607c 100644 --- a/src/patterns/radio-group/DemoSection.react.astro +++ b/src/patterns/radio-group/DemoSection.react.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { RadioGroup as RadioGroupReact } from './RadioGroup'; import { colorOptions, sizeOptions, planOptions, ratingOptions } from './radio-group-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/radio-group/DemoSection.svelte.astro b/src/patterns/radio-group/DemoSection.svelte.astro index 585fb8a8..2e7612c9 100644 --- a/src/patterns/radio-group/DemoSection.svelte.astro +++ b/src/patterns/radio-group/DemoSection.svelte.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import RadioGroupSvelte from './RadioGroup.svelte'; import { colorOptions, sizeOptions, planOptions, ratingOptions } from './radio-group-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/radio-group/DemoSection.vue.astro b/src/patterns/radio-group/DemoSection.vue.astro index 270e9d1e..0db07119 100644 --- a/src/patterns/radio-group/DemoSection.vue.astro +++ b/src/patterns/radio-group/DemoSection.vue.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import RadioGroupVue from './RadioGroup.vue'; import { colorOptions, sizeOptions, planOptions, ratingOptions } from './radio-group-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/radio-group/DemoSection.web-component.astro b/src/patterns/radio-group/DemoSection.web-component.astro index c8fed468..12a7e661 100644 --- a/src/patterns/radio-group/DemoSection.web-component.astro +++ b/src/patterns/radio-group/DemoSection.web-component.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import RadioGroupAstro from './RadioGroup.astro'; import { colorOptions, sizeOptions, planOptions, ratingOptions } from './radio-group-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/slider-multithumb/DemoSection.react.astro b/src/patterns/slider-multithumb/DemoSection.react.astro index 083534f1..fe87714d 100644 --- a/src/patterns/slider-multithumb/DemoSection.react.astro +++ b/src/patterns/slider-multithumb/DemoSection.react.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import { MultiThumbSlider as MultiThumbSliderReact } from './MultiThumbSlider'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/slider-multithumb/DemoSection.svelte.astro b/src/patterns/slider-multithumb/DemoSection.svelte.astro index c5050616..a3570013 100644 --- a/src/patterns/slider-multithumb/DemoSection.svelte.astro +++ b/src/patterns/slider-multithumb/DemoSection.svelte.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import MultiThumbSliderSvelte from './MultiThumbSlider.svelte'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/slider-multithumb/DemoSection.vue.astro b/src/patterns/slider-multithumb/DemoSection.vue.astro index c569bf1f..62d2d562 100644 --- a/src/patterns/slider-multithumb/DemoSection.vue.astro +++ b/src/patterns/slider-multithumb/DemoSection.vue.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import MultiThumbSliderVue from './MultiThumbSlider.vue'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/slider-multithumb/DemoSection.web-component.astro b/src/patterns/slider-multithumb/DemoSection.web-component.astro index fc349e71..5200fd16 100644 --- a/src/patterns/slider-multithumb/DemoSection.web-component.astro +++ b/src/patterns/slider-multithumb/DemoSection.web-component.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import MultiThumbSliderAstro from './MultiThumbSlider.astro'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/slider/DemoSection.react.astro b/src/patterns/slider/DemoSection.react.astro index c14b2f60..e250f4c8 100644 --- a/src/patterns/slider/DemoSection.react.astro +++ b/src/patterns/slider/DemoSection.react.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import { Slider as SliderReact } from './Slider'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/slider/DemoSection.svelte.astro b/src/patterns/slider/DemoSection.svelte.astro index aaac4599..4b5ed89b 100644 --- a/src/patterns/slider/DemoSection.svelte.astro +++ b/src/patterns/slider/DemoSection.svelte.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import SliderSvelte from './Slider.svelte'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/slider/DemoSection.vue.astro b/src/patterns/slider/DemoSection.vue.astro index 05c0ba81..5c817aa0 100644 --- a/src/patterns/slider/DemoSection.vue.astro +++ b/src/patterns/slider/DemoSection.vue.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import SliderVue from './Slider.vue'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/slider/DemoSection.web-component.astro b/src/patterns/slider/DemoSection.web-component.astro index 634746ab..608b1d4b 100644 --- a/src/patterns/slider/DemoSection.web-component.astro +++ b/src/patterns/slider/DemoSection.web-component.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import SliderAstro from './Slider.astro'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/spinbutton/DemoSection.react.astro b/src/patterns/spinbutton/DemoSection.react.astro index 98fd9c4d..c7fe68f9 100644 --- a/src/patterns/spinbutton/DemoSection.react.astro +++ b/src/patterns/spinbutton/DemoSection.react.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import { Spinbutton as SpinbuttonReact } from './Spinbutton'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/spinbutton/DemoSection.svelte.astro b/src/patterns/spinbutton/DemoSection.svelte.astro index d6916ed8..e78c6c02 100644 --- a/src/patterns/spinbutton/DemoSection.svelte.astro +++ b/src/patterns/spinbutton/DemoSection.svelte.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import SpinbuttonSvelte from './Spinbutton.svelte'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/spinbutton/DemoSection.vue.astro b/src/patterns/spinbutton/DemoSection.vue.astro index 5782bb8f..06541600 100644 --- a/src/patterns/spinbutton/DemoSection.vue.astro +++ b/src/patterns/spinbutton/DemoSection.vue.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import SpinbuttonVue from './Spinbutton.vue'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/spinbutton/DemoSection.web-component.astro b/src/patterns/spinbutton/DemoSection.web-component.astro index 7d0acdcb..cb033ec8 100644 --- a/src/patterns/spinbutton/DemoSection.web-component.astro +++ b/src/patterns/spinbutton/DemoSection.web-component.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import SpinbuttonAstro from './Spinbutton.astro'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/switch/DemoSection.react.astro b/src/patterns/switch/DemoSection.react.astro index b900e807..f7eaa5e8 100644 --- a/src/patterns/switch/DemoSection.react.astro +++ b/src/patterns/switch/DemoSection.react.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import { Switch as SwitchReact } from './Switch'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/switch/DemoSection.svelte.astro b/src/patterns/switch/DemoSection.svelte.astro index 5bb863a0..fa6b9e5d 100644 --- a/src/patterns/switch/DemoSection.svelte.astro +++ b/src/patterns/switch/DemoSection.svelte.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import SwitchSvelte from './Switch.svelte'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/switch/DemoSection.vue.astro b/src/patterns/switch/DemoSection.vue.astro index 3dc0dc8d..ae6116bd 100644 --- a/src/patterns/switch/DemoSection.vue.astro +++ b/src/patterns/switch/DemoSection.vue.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import SwitchVue from './Switch.vue'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/switch/DemoSection.web-component.astro b/src/patterns/switch/DemoSection.web-component.astro index 34c1d62e..7ded88ae 100644 --- a/src/patterns/switch/DemoSection.web-component.astro +++ b/src/patterns/switch/DemoSection.web-component.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import SwitchAstro from './Switch.astro'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/table/DemoSection.react.astro b/src/patterns/table/DemoSection.react.astro index c7a44a4e..17a320e6 100644 --- a/src/patterns/table/DemoSection.react.astro +++ b/src/patterns/table/DemoSection.react.astro @@ -1,5 +1,4 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { BasicTableDemo, @@ -10,7 +9,6 @@ import { } from './TableDemo'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/table/DemoSection.svelte.astro b/src/patterns/table/DemoSection.svelte.astro index 6d130932..aa97f418 100644 --- a/src/patterns/table/DemoSection.svelte.astro +++ b/src/patterns/table/DemoSection.svelte.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import TableDemoSvelte from './TableDemo.svelte'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/table/DemoSection.vue.astro b/src/patterns/table/DemoSection.vue.astro index e7160734..c89b2225 100644 --- a/src/patterns/table/DemoSection.vue.astro +++ b/src/patterns/table/DemoSection.vue.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import TableDemoVue from './TableDemo.vue'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/table/DemoSection.web-component.astro b/src/patterns/table/DemoSection.web-component.astro index 62cfb726..d90479e6 100644 --- a/src/patterns/table/DemoSection.web-component.astro +++ b/src/patterns/table/DemoSection.web-component.astro @@ -1,5 +1,4 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { SortableTableDemo } from './TableDemo'; import Table from './Table.astro'; @@ -13,7 +12,6 @@ import { } from './table-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/tabs/DemoSection.react.astro b/src/patterns/tabs/DemoSection.react.astro index b2cac468..2cd94dd1 100644 --- a/src/patterns/tabs/DemoSection.react.astro +++ b/src/patterns/tabs/DemoSection.react.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import TabsReact from './Tabs'; import { demoTabs, manualTabs, verticalTabs } from './tabs-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/tabs/DemoSection.svelte.astro b/src/patterns/tabs/DemoSection.svelte.astro index f922ef25..d96217f4 100644 --- a/src/patterns/tabs/DemoSection.svelte.astro +++ b/src/patterns/tabs/DemoSection.svelte.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import TabsSvelte from './Tabs.svelte'; import { demoTabs, manualTabs, verticalTabs } from './tabs-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/tabs/DemoSection.vue.astro b/src/patterns/tabs/DemoSection.vue.astro index ee1648e9..fbc4e5b2 100644 --- a/src/patterns/tabs/DemoSection.vue.astro +++ b/src/patterns/tabs/DemoSection.vue.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import TabsVue from './Tabs.vue'; import { demoTabs, manualTabs, verticalTabs } from './tabs-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/tabs/DemoSection.web-component.astro b/src/patterns/tabs/DemoSection.web-component.astro index 6357a3ae..3d45545a 100644 --- a/src/patterns/tabs/DemoSection.web-component.astro +++ b/src/patterns/tabs/DemoSection.web-component.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import TabsAstro from './Tabs.astro'; import { demoTabs, manualTabs, verticalTabs } from './tabs-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/toggle-button/DemoSection.react.astro b/src/patterns/toggle-button/DemoSection.react.astro index 99e40b3a..1b2dbfc3 100644 --- a/src/patterns/toggle-button/DemoSection.react.astro +++ b/src/patterns/toggle-button/DemoSection.react.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import { MuteDemo, DarkModeDemo, NotificationsDemo } from './ToggleButtonDemo'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/toggle-button/DemoSection.svelte.astro b/src/patterns/toggle-button/DemoSection.svelte.astro index f8efdd1c..e97597c4 100644 --- a/src/patterns/toggle-button/DemoSection.svelte.astro +++ b/src/patterns/toggle-button/DemoSection.svelte.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import ToggleButtonDemoSvelte from './ToggleButtonDemo.svelte'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/toggle-button/DemoSection.vue.astro b/src/patterns/toggle-button/DemoSection.vue.astro index 496d131f..68fc2740 100644 --- a/src/patterns/toggle-button/DemoSection.vue.astro +++ b/src/patterns/toggle-button/DemoSection.vue.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import ToggleButtonDemoVue from './ToggleButtonDemo.vue'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/toggle-button/DemoSection.web-component.astro b/src/patterns/toggle-button/DemoSection.web-component.astro index a0fdcbec..c1e5da4a 100644 --- a/src/patterns/toggle-button/DemoSection.web-component.astro +++ b/src/patterns/toggle-button/DemoSection.web-component.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import ToggleButton from './ToggleButton.astro'; import Icon from '@/components/ui/icon/icon.astro'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/toolbar/DemoSection.react.astro b/src/patterns/toolbar/DemoSection.react.astro index f51dabcf..224725d5 100644 --- a/src/patterns/toolbar/DemoSection.react.astro +++ b/src/patterns/toolbar/DemoSection.react.astro @@ -1,5 +1,4 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { ToolbarToggleDemo as ToolbarToggleDemoReact, @@ -10,7 +9,6 @@ import { } from './ToolbarToggleDemo'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/toolbar/DemoSection.svelte.astro b/src/patterns/toolbar/DemoSection.svelte.astro index 365f0a98..e683ff21 100644 --- a/src/patterns/toolbar/DemoSection.svelte.astro +++ b/src/patterns/toolbar/DemoSection.svelte.astro @@ -1,5 +1,4 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import TextFormattingToolbarDemoSvelte from './TextFormattingToolbarDemo.svelte'; import VerticalToolbarDemoSvelte from './VerticalToolbarDemo.svelte'; @@ -8,7 +7,6 @@ import ToolbarToggleDemoSvelte from './ToolbarToggleDemo.svelte'; import ToolbarToggleDefaultDemoSvelte from './ToolbarToggleDefaultDemo.svelte'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/toolbar/DemoSection.vue.astro b/src/patterns/toolbar/DemoSection.vue.astro index 909098a6..e8f96166 100644 --- a/src/patterns/toolbar/DemoSection.vue.astro +++ b/src/patterns/toolbar/DemoSection.vue.astro @@ -1,5 +1,4 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import TextFormattingToolbarDemoVue from './TextFormattingToolbarDemo.vue'; import VerticalToolbarDemoVue from './VerticalToolbarDemo.vue'; @@ -8,7 +7,6 @@ import ToolbarToggleDemoVue from './ToolbarToggleDemo.vue'; import ToolbarToggleDefaultDemoVue from './ToolbarToggleDefaultDemo.vue'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/toolbar/DemoSection.web-component.astro b/src/patterns/toolbar/DemoSection.web-component.astro index d63abdea..3238c075 100644 --- a/src/patterns/toolbar/DemoSection.web-component.astro +++ b/src/patterns/toolbar/DemoSection.web-component.astro @@ -1,5 +1,4 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import Toolbar from './Toolbar.astro'; import ToolbarButton from './ToolbarButton.astro'; @@ -7,7 +6,6 @@ import ToolbarToggleButton from './ToolbarToggleButton.astro'; import ToolbarSeparator from './ToolbarSeparator.astro'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/tooltip/DemoSection.react.astro b/src/patterns/tooltip/DemoSection.react.astro index 020f5964..14b03bd4 100644 --- a/src/patterns/tooltip/DemoSection.react.astro +++ b/src/patterns/tooltip/DemoSection.react.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import { Tooltip as TooltipReact } from './Tooltip'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/tooltip/DemoSection.svelte.astro b/src/patterns/tooltip/DemoSection.svelte.astro index faa56f24..92a4467a 100644 --- a/src/patterns/tooltip/DemoSection.svelte.astro +++ b/src/patterns/tooltip/DemoSection.svelte.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import TooltipDemoSvelte from './TooltipDemo.svelte'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/tooltip/DemoSection.vue.astro b/src/patterns/tooltip/DemoSection.vue.astro index 604404cc..4074977d 100644 --- a/src/patterns/tooltip/DemoSection.vue.astro +++ b/src/patterns/tooltip/DemoSection.vue.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import TooltipVue from './Tooltip.vue'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/tooltip/DemoSection.web-component.astro b/src/patterns/tooltip/DemoSection.web-component.astro index d9332cb1..563cf8c3 100644 --- a/src/patterns/tooltip/DemoSection.web-component.astro +++ b/src/patterns/tooltip/DemoSection.web-component.astro @@ -1,9 +1,7 @@ --- -import type { Framework } from '@/lib/frameworks'; import TooltipAstro from './Tooltip.astro'; interface Props { - framework?: Framework; } --- diff --git a/src/patterns/tree-view/DemoSection.react.astro b/src/patterns/tree-view/DemoSection.react.astro index eb7fa332..df490e67 100644 --- a/src/patterns/tree-view/DemoSection.react.astro +++ b/src/patterns/tree-view/DemoSection.react.astro @@ -1,12 +1,10 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { TreeView as TreeViewReact } from './TreeView'; import { TreeViewActivationDemo as TreeViewActivationDemoReact } from './TreeViewActivationDemo'; import { fileSystemNodes, disabledNodes } from './tree-view-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/tree-view/DemoSection.svelte.astro b/src/patterns/tree-view/DemoSection.svelte.astro index 5d9f8643..1b19c9f1 100644 --- a/src/patterns/tree-view/DemoSection.svelte.astro +++ b/src/patterns/tree-view/DemoSection.svelte.astro @@ -1,12 +1,10 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import TreeViewSvelte from './TreeView.svelte'; import TreeViewActivationDemoSvelte from './TreeViewActivationDemo.svelte'; import { fileSystemNodes, disabledNodes } from './tree-view-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/tree-view/DemoSection.vue.astro b/src/patterns/tree-view/DemoSection.vue.astro index a9bcf7d1..fa95513f 100644 --- a/src/patterns/tree-view/DemoSection.vue.astro +++ b/src/patterns/tree-view/DemoSection.vue.astro @@ -1,12 +1,10 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import TreeViewVue from './TreeView.vue'; import TreeViewActivationDemoVue from './TreeViewActivationDemo.vue'; import { fileSystemNodes, disabledNodes } from './tree-view-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/tree-view/DemoSection.web-component.astro b/src/patterns/tree-view/DemoSection.web-component.astro index 9f203a97..414cc139 100644 --- a/src/patterns/tree-view/DemoSection.web-component.astro +++ b/src/patterns/tree-view/DemoSection.web-component.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import TreeViewAstro from './TreeView.astro'; import { fileSystemNodes, disabledNodes } from './tree-view-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/treegrid/DemoSection.react.astro b/src/patterns/treegrid/DemoSection.react.astro index 7d6e3b7f..96853289 100644 --- a/src/patterns/treegrid/DemoSection.react.astro +++ b/src/patterns/treegrid/DemoSection.react.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import TreeGridDemoReact from './TreeGridDemo'; import { TreeGridDemoJa as TreeGridDemoJaReact } from './TreeGridDemoJa'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/treegrid/DemoSection.svelte.astro b/src/patterns/treegrid/DemoSection.svelte.astro index 59f8c9c3..3630624d 100644 --- a/src/patterns/treegrid/DemoSection.svelte.astro +++ b/src/patterns/treegrid/DemoSection.svelte.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import TreeGridDemoSvelte from './TreeGridDemo.svelte'; import TreeGridDemoJaSvelte from './TreeGridDemoJa.svelte'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/treegrid/DemoSection.vue.astro b/src/patterns/treegrid/DemoSection.vue.astro index b874463f..bdb082f5 100644 --- a/src/patterns/treegrid/DemoSection.vue.astro +++ b/src/patterns/treegrid/DemoSection.vue.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import TreeGridDemoVue from './TreeGridDemo.vue'; import TreeGridDemoJaVue from './TreeGridDemoJa.vue'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/treegrid/DemoSection.web-component.astro b/src/patterns/treegrid/DemoSection.web-component.astro index e78a0071..64a0390f 100644 --- a/src/patterns/treegrid/DemoSection.web-component.astro +++ b/src/patterns/treegrid/DemoSection.web-component.astro @@ -1,11 +1,9 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import TreeGridAstro from './TreeGrid.astro'; import { columnsEn, columnsJa, nodesEn, nodesJa } from './treegrid-demo-data'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/window-splitter/DemoSection.react.astro b/src/patterns/window-splitter/DemoSection.react.astro index 1cbf5658..a8d802b3 100644 --- a/src/patterns/window-splitter/DemoSection.react.astro +++ b/src/patterns/window-splitter/DemoSection.react.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import { WindowSplitterDemo as WindowSplitterDemoReact } from './WindowSplitterDemo'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/window-splitter/DemoSection.svelte.astro b/src/patterns/window-splitter/DemoSection.svelte.astro index c9aea06b..67231a4a 100644 --- a/src/patterns/window-splitter/DemoSection.svelte.astro +++ b/src/patterns/window-splitter/DemoSection.svelte.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import WindowSplitterDemoSvelte from './WindowSplitterDemo.svelte'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/window-splitter/DemoSection.vue.astro b/src/patterns/window-splitter/DemoSection.vue.astro index 6714819d..a4e6e2d2 100644 --- a/src/patterns/window-splitter/DemoSection.vue.astro +++ b/src/patterns/window-splitter/DemoSection.vue.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import WindowSplitterDemoVue from './WindowSplitterDemo.vue'; interface Props { - framework?: Framework; locale?: Locale; } diff --git a/src/patterns/window-splitter/DemoSection.web-component.astro b/src/patterns/window-splitter/DemoSection.web-component.astro index 2a7a4b0b..642b45e2 100644 --- a/src/patterns/window-splitter/DemoSection.web-component.astro +++ b/src/patterns/window-splitter/DemoSection.web-component.astro @@ -1,10 +1,8 @@ --- -import type { Framework } from '@/lib/frameworks'; import type { Locale } from '@/i18n/ui'; import WindowSplitterDemoAstro from './WindowSplitterDemo.astro'; interface Props { - framework?: Framework; locale?: Locale; } From b6885d22ea3a86f95e1fdb76671f7b22a1c4fec3 Mon Sep 17 00:00:00 2001 From: masuP9 Date: Tue, 12 May 2026 01:58:09 +0900 Subject: [PATCH 5/6] docs: finalize framework-split DemoSection as the canonical format After PR-B completes the migration of all 32 patterns, the legacy unified \`DemoSection.astro\` is gone. Update CLAUDE.md, CONTRIBUTING.md, and the .internal docs to describe the new convention as the canonical format rather than as a transitional state: - Directory listing examples show 4 framework-specific files and the optional \`{pattern}-demo-data.ts\` - Architecture description drops the legacy fallback note - Pattern planning checklist enumerates the 4 DemoSection files - New file detection command (\`ls -la DemoSection.{react,vue,svelte, web-component}.astro\`) replaces the single \`DemoSection.astro\` check Co-Authored-By: Claude Opus 4.7 (1M context) --- .internal/page-template.md | 15 +++++++++++---- .internal/pattern-planning-prompt.md | 13 +++++++++---- .internal/site-specification.md | 9 +++++++-- CLAUDE.md | 19 ++++++++----------- CONTRIBUTING.md | 10 +++++++--- 5 files changed, 42 insertions(+), 24 deletions(-) diff --git a/.internal/page-template.md b/.internal/page-template.md index f503de6f..afc543cc 100644 --- a/.internal/page-template.md +++ b/.internal/page-template.md @@ -2,7 +2,7 @@ このテンプレートは、APG パターンページの構成を統一するためのガイドラインです。 -> **Note**: ページは動的ルーティング（`[pattern]/[framework]/index.astro`）で自動生成される。個別のページファイル作成は不要。新しいパターンを追加するには `meta.ts` と `DemoSection.astro` を作成すればよい。 +> **Note**: ページは動的ルーティング（`[pattern]/[framework]/index.astro`）で自動生成される。個別のページファイル作成は不要。新しいパターンを追加するには `meta.ts` と framework 別の `DemoSection.{react,vue,svelte,web-component}.astro` 4 ファイルを作成すればよい。 ## 章構成 (tocItems) @@ -49,7 +49,8 @@ const tocItems = [ | ファイル | 役割 | 検出パターン | |---------|------|-------------| | `meta.ts` | メタデータ定義 | `/src/patterns/*/meta.ts` | -| `DemoSection.astro` | デモ表示 | `/src/patterns/*/DemoSection.astro` | +| `DemoSection.{react,vue,svelte,web-component}.astro` | framework 別デモ表示 | `/src/patterns/*/DemoSection.{react,vue,svelte,web-component}.astro` | +| `{pattern}-demo-data.ts` | 共通 demo data（任意） | `/src/patterns/{pattern}/{pattern}-demo-data.ts` | | `TestingDocs.astro` | テスト解説 | `/src/patterns/*/TestingDocs.astro` | | `{Component}.{tsx,vue,svelte,astro}` | ソースコード表示 | `/src/patterns/**/*.{tsx,vue,svelte,astro}` (`?raw`) | | `{Component}.test.*` | テストコード表示 | `/src/patterns/**/*.test.*` (`?raw`) | @@ -58,7 +59,9 @@ const tocItems = [ ## 章の説明 ### 1. Demo -- `DemoSection.astro` コンポーネントが `framework` prop に基づいて適切なフレームワーク実装を表示 +- ページ側 dispatcher が `framework` 値から `DemoSection.{react,vue,svelte,web-component}.astro` の該当ファイルを動的 import して呼ぶ（`Astro Web Component` は `web-component` キー） +- 各 framework 別ファイルは `locale` prop だけを受け取り、自分の framework の実装ファイルだけを静的 import する +- 4 framework で内容が完全に同一かつ概ね 8 行以上の純 data は `{pattern}-demo-data.ts` に切り出して全 4 ファイルから import する - 複数のバリエーションがある場合は DemoSection 内で `

` 小見出しで分割 ### 2. Native HTML（条件付き） @@ -108,7 +111,10 @@ const tocItems = [ ### 必須ファイル - [ ] `src/patterns/{pattern}/meta.ts` - パターンメタデータ（`PatternMeta` 型） -- [ ] `src/patterns/{pattern}/DemoSection.astro` - 全フレームワーク統合デモ +- [ ] `src/patterns/{pattern}/DemoSection.react.astro` - React 用デモ +- [ ] `src/patterns/{pattern}/DemoSection.vue.astro` - Vue 用デモ +- [ ] `src/patterns/{pattern}/DemoSection.svelte.astro` - Svelte 用デモ +- [ ] `src/patterns/{pattern}/DemoSection.web-component.astro` - Astro Web Component 用デモ - [ ] `src/patterns/{pattern}/{Component}.tsx` - React 実装 - [ ] `src/patterns/{pattern}/{Component}.vue` - Vue 実装 - [ ] `src/patterns/{pattern}/{Component}.svelte` - Svelte 実装 @@ -119,6 +125,7 @@ const tocItems = [ - [ ] `src/content/accessibility-docs/{pattern}/ja.mdx` - アクセシビリティ解説（日本語） - [ ] `src/patterns/{pattern}/{pattern}.md` - AI 向けガイド - [ ] `src/patterns/{pattern}/NativeHtmlNotice.astro` - Native HTML 説明（該当パターンのみ） +- [ ] `src/patterns/{pattern}/{pattern}-demo-data.ts` - 共通 demo data（4 framework で完全一致する 8 行以上の純 data がある場合のみ） ### meta.ts 構成確認 - [ ] `PatternMeta` 型に準拠している diff --git a/.internal/pattern-planning-prompt.md b/.internal/pattern-planning-prompt.md index 44905c6c..6606379f 100644 --- a/.internal/pattern-planning-prompt.md +++ b/.internal/pattern-planning-prompt.md @@ -137,7 +137,8 @@ Phase 1 で llm.md とテストを先に作成し、その後実装に進みま ### Phase 3: メタデータ・ドキュメント - [ ] `meta.ts` - パターンメタデータ（`PatternMeta` 型） -- [ ] `DemoSection.astro` - 全フレームワーク統合デモ +- [ ] `DemoSection.react.astro` / `DemoSection.vue.astro` / `DemoSection.svelte.astro` / `DemoSection.web-component.astro` - framework 別デモ +- [ ] `{pattern}-demo-data.ts` - 共通 demo data（4 framework で完全一致する 8 行以上の純 data がある場合のみ） - [ ] `TestingDocs.astro` - テスト解説 ※ `.internal/TestingDocs-template.astro` を参照 - [ ] `NativeHtmlNotice.astro` - ネイティブ HTML 注記（該当パターンのみ） - [ ] `src/content/accessibility-docs/{pattern}/en.mdx` - ARIA 仕様解説（英語） @@ -689,8 +690,8 @@ export interface {ComponentName}Props extends Omit< # meta.ts の存在確認 ls -la src/patterns/{pattern}/meta.ts - # DemoSection の存在確認 - ls -la src/patterns/{pattern}/DemoSection.astro + # DemoSection の存在確認（framework 別 4 ファイル） + ls -la src/patterns/{pattern}/DemoSection.{react,vue,svelte,web-component}.astro # アクセシビリティドキュメントの確認 ls -la src/content/accessibility-docs/{pattern}/en.mdx @@ -713,7 +714,11 @@ export interface {ComponentName}Props extends Omit< ### メタデータ・デモ - [ ] meta.ts（PatternMeta 型） - - [ ] DemoSection.astro + - [ ] DemoSection.react.astro + - [ ] DemoSection.vue.astro + - [ ] DemoSection.svelte.astro + - [ ] DemoSection.web-component.astro + - [ ] {pattern}-demo-data.ts（共通 data がある場合のみ） ### ドキュメント - [ ] src/content/accessibility-docs/{pattern}/en.mdx diff --git a/.internal/site-specification.md b/.internal/site-specification.md index 64163ffb..74289a00 100644 --- a/.internal/site-specification.md +++ b/.internal/site-specification.md @@ -221,7 +221,11 @@ src/ ├── patterns/ # APG パターン実装 │ └── button/ # 例: button パターン │ ├── meta.ts # パターンメタデータ（単一の真実源） -│ ├── DemoSection.astro # 全フレームワーク統合デモ +│ ├── DemoSection.react.astro # React 用デモ +│ ├── DemoSection.vue.astro # Vue 用デモ +│ ├── DemoSection.svelte.astro # Svelte 用デモ +│ ├── DemoSection.web-component.astro # Astro Web Component 用デモ +│ ├── {pattern}-demo-data.ts # 共通 demo data（必要なときのみ） │ ├── TestingDocs.astro # テストドキュメント │ ├── Button.tsx # React 実装 │ ├── Button.vue # Vue 実装 @@ -266,7 +270,8 @@ src/ 各パターンの `meta.ts` が `PatternMeta` 型でメタデータを一元定義する。動的ルーティング（`[pattern]/[framework]/index.astro`）が `import.meta.glob()` で全パターンの `meta.ts` を検出し、`getStaticPaths()` で 4フレームワーク × 2言語 のページをビルド時に生成する。 - **`meta.ts`**: タイトル、説明、TOC、リソース、フレームワーク別 API ドキュメント。全テキストは `Record` で i18n 対応 -- **`DemoSection.astro`**: 4フレームワークの実装を静的 import し、`framework` prop で切り替え表示 +- **`DemoSection.{react,vue,svelte,web-component}.astro`**: framework ごとに分割した薄い Astro。それぞれ自分の framework の実装ファイルだけを静的 import する。ページ側 dispatcher が `framework` から該当ファイルを選んで動的 import で呼ぶ +- **`{pattern}-demo-data.ts`** (任意): 4 framework で内容が完全に同一かつ概ね 8 行以上の純 data を切り出した共通ファイル - **`content/accessibility-docs/`**: MDX でアクセシビリティ解説を記述。frontmatter は `pattern` と `locale` のみ --- diff --git a/CLAUDE.md b/CLAUDE.md index 4f0ff45f..80f0961e 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -43,12 +43,11 @@ src/ ├── patterns/ # APG パターン実装 │ └── button/ # 例: button パターン │ ├── meta.ts # パターンメタデータ（単一の真実源） -│ ├── 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 後） +│ ├── DemoSection.react.astro # React 用デモ +│ ├── DemoSection.vue.astro # Vue 用デモ +│ ├── DemoSection.svelte.astro # Svelte 用デモ +│ ├── DemoSection.web-component.astro # Astro Web Component 用デモ +│ ├── {pattern}-demo-data.ts # 共通 demo data（必要なときのみ。後述） │ ├── TestingDocs.astro # テストドキュメント │ ├── Button.tsx # React 実装 │ ├── Button.vue # Vue 実装 @@ -83,11 +82,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`** (推奨): framework ごとに分割した薄い Astro。`DemoSection.{react,vue,svelte,web-component}.astro` が、それぞれ自分の framework の実装ファイルだけを静的 import する。ページ側 dispatcher が `framework` から該当ファイルを選んで呼ぶ -- **`{pattern}-demo-data.ts`** (任意): 4 framework で内容が完全に同一かつ概ね 8 行以上の純 data (配列/オブジェクトリテラル) を切り出した共通ファイル。framework 固有の prop 名 (Vue `ariaLabel` ↔ React/Astro `aria-label`) や関数 (`renderCell` など) は含めず、各 `DemoSection.{framework}.astro` 側で吸収する -- **`DemoSection.astro`** (legacy): 4 framework の実装を 1 ファイルで静的 import する旧形式。dispatcher にフォールバックとして残してあり、まだ移行していない pattern で使われている。**注意**: legacy 形式は `@vitejs/plugin-react v6` + Vite 8 + Vue SFC `