From 112851ad24612d8ad84cd1b93f7b102410aef421 Mon Sep 17 00:00:00 2001 From: masuP9 Date: Mon, 11 May 2026 18:26:36 +0900 Subject: [PATCH] fix(dev): split DemoSection.astro per-framework to avoid plugin-react v6 $RefreshSig$ regression MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Astro 7 alpha upgrade (165e32b) bumped @vitejs/plugin-react from v5 (Babel-based) to v6 (Oxc-based). v6's default include regex `/\.[tj]sx?$/` matches Vue SFC ` diff --git a/src/patterns/toolbar/DemoSection.react.astro b/src/patterns/toolbar/DemoSection.react.astro new file mode 100644 index 00000000..f51dabcf --- /dev/null +++ b/src/patterns/toolbar/DemoSection.react.astro @@ -0,0 +1,93 @@ +--- +import type { Framework } from '@/lib/frameworks'; +import type { Locale } from '@/i18n/ui'; +import { + ToolbarToggleDemo as ToolbarToggleDemoReact, + ToolbarToggleDefaultDemo as ToolbarToggleDefaultDemoReact, + TextFormattingToolbarDemo as TextFormattingToolbarDemoReact, + VerticalToolbarDemo as VerticalToolbarDemoReact, + DisabledItemsToolbarDemo as DisabledItemsToolbarDemoReact, +} from './ToolbarToggleDemo'; + +interface Props { + framework?: Framework; + locale?: Locale; +} + +const { locale = 'en' } = Astro.props; +const isJa = locale === 'ja'; +--- + +
+

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

+

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

+
+ +
+
+ +
+

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

+

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

+
+ +
+
+ +
+

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

+

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

+
+ +
+
+ +
+

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

+

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

+
+ +
+
+ +
+

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

+

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

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

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

+

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

+
+ +
+
+ +
+

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

+

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

+
+ +
+
+ +
+

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

+

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

+
+ +
+
+ +
+

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

+

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

+
+ +
+
+ +
+

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

+

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

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

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

+

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

+
+ +
+
+ +
+

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

+

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

+
+ +
+
+ +
+

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

+

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

+
+ +
+
+ +
+

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

+

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

+
+ +
+
+ +
+

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

+

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

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

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

+

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

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

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

+

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

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

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

+

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

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

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

+

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

+
+ + Bold + Italic + Underline + +
+

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

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

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

+

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

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