chore(spindle-ui,spindle-hooks): optimize Storybook for AI

packages/spindle-hooks/.storybook/main.js

@@ -17,6 +17,6 @@ module.exports = {
   },
 
   typescript: {
-    reactDocgen: false,
+    reactDocgen: 'react-docgen-typescript',
   },
 };

packages/spindle-hooks/src/useCarousel/useCarousel.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as useCarouselStories from './useCarousel.stories';
 
-<Meta of={useCarouselStories} />
+<Meta of={useCarouselStories} summary="カルーセル機能を提供するHooks。自動再生の停止/再開、前後スライド移動、キーボード/マウス操作時の自動停止、reduced motion対応。" />
 
 # useCarousel
 

packages/spindle-hooks/src/useTimeDistance/useTimeDistance.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as useTimeDistanceStories from './useTimeDistance.stories';
 
-<Meta of={useTimeDistanceStories} />
+<Meta of={useTimeDistanceStories} summary="相対時間表示を提供するHooks。「たった今」「○秒前」「○分前」などの自動フォーマットとカスタムフォーマットに対応。" />
 
 # useTimeDistance
 

packages/spindle-ui/.storybook/main.js

@@ -21,6 +21,6 @@ module.exports = {
     name: '@storybook/react-webpack5',
   },
   typescript: {
-    reactDocgen: false,
+    reactDocgen: 'react-docgen-typescript',
   },
 };

packages/spindle-ui/src/BottomButton/BottomButton.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as BottomButtonStories from './BottomButton.stories';
 
-<Meta of={BottomButtonStories} />
+<Meta of={BottomButtonStories} summary="画面下部に固定表示するボタンコンポーネント。主要アクションへの常時アクセスを提供。" />
 
 # BottomButton
 

packages/spindle-ui/src/BottomButton/BottomButton.stories.tsx

@@ -5,6 +5,7 @@ import { BottomButton } from './BottomButton';
 
 const meta: Meta<typeof BottomButton> = {
   title: 'BottomButton',
+  component: BottomButton,
 };
 
 export default meta;

packages/spindle-ui/src/Breadcrumb/Breadcrumb.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as BreadcrumbStories from './Breadcrumb.stories';
 
-<Meta of={BreadcrumbStories} />
+<Meta of={BreadcrumbStories} summary="パンくずリストナビゲーションコンポーネント。現在のページ階層を表示し、上位ページへの遷移を提供。" />
 
 # Breadcrumb
 

packages/spindle-ui/src/Breadcrumb/Breadcrumb.stories.tsx

@@ -5,6 +5,7 @@ import { BreadcrumbList as BreadcrumbListComponent } from './BreadcrumbList';
 
 const meta: Meta<typeof BreadcrumbListComponent> = {
   title: 'Breadcrumb',
+  component: BreadcrumbListComponent,
 };
 
 export default meta;

packages/spindle-ui/src/Button/Button.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as ButtonStories from './Button.stories';
 
-<Meta of={ButtonStories} />
+<Meta of={ButtonStories} summary="ユーザーインタラクション用のボタン。サイズ（large/medium/small）、バリアント（contained/outlined/neutral/danger/lighted）、アイコン付き、全幅レイアウトに対応。ナビゲーションにはLinkを使用。" />
 
 # Button
 

packages/spindle-ui/src/Button/Button.stories.tsx

@@ -6,6 +6,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   title: 'Button',
+  component: Button,
   args: {
     onClick: action('clicked'),
     onMouseOver: action('mouse-over'),

packages/spindle-ui/src/ButtonGroup/ButtonGroup.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as ButtonGroupStories from './ButtonGroup.stories';
 
-<Meta of={ButtonGroupStories} />
+<Meta of={ButtonGroupStories} summary="複数ボタンを横並び・縦並びにグループ化するレイアウトコンポーネント。Dialog内のボタン配置にも使用。" />
 
 # ButtonGroup
 

packages/spindle-ui/src/ButtonGroup/ButtonGroup.stories.tsx

@@ -6,6 +6,7 @@ import { ButtonGroup } from './ButtonGroup';
 
 const meta: Meta<typeof ButtonGroup> = {
   title: 'ButtonGroup',
+  component: ButtonGroup,
 };
 
 export default meta;

packages/spindle-ui/src/Dialog/Dialog.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as DialogStories from './Dialog.stories';
 
-<Meta of={DialogStories} />
+<Meta of={DialogStories} summary="重要な意思決定を促すモーダルダイアログ。HTMLDialogElementベースで、open/onClose/onCancelによる開閉制御、ButtonGroupによるボタン配置（横並び・縦並び）をサポート。StyleOnlyバリアントで独自の動作定義も可能。" />
 
 # Dialog
 

packages/spindle-ui/src/Dialog/Dialog.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import type { Dialog } from './Dialog';
+import { Dialog } from './Dialog';
 import {
   ButtonColumn as ButtonColumnComponent,
   ButtonColumnWithSubtleButton as ButtonColumnWithSubtleButtonComponent,
@@ -12,6 +12,7 @@ import {
 
 const meta: Meta<typeof Dialog.Frame> = {
   title: 'Dialog',
+  component: Dialog.Frame,
 };
 
 export default meta;

packages/spindle-ui/src/DropdownMenu/DropdownMenu.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as DropdownMenuStories from './DropdownMenu.stories';
 
-<Meta of={DropdownMenuStories} />
+<Meta of={DropdownMenuStories} summary="コンテキストメニューやアクションリストを表示するドロップダウンメニューコンポーネント。" />
 
 # DropdownMenu
 

packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import type { DropdownMenu } from './DropdownMenu';
+import { DropdownMenu } from './DropdownMenu';
 import {
   HeadWithIconAndCaption as HeadWithIconAndCaptionExample,
   HeadWithIcon as HeadWithIconExample,
@@ -11,6 +11,7 @@ import {
 
 const meta: Meta<typeof DropdownMenu.Frame> = {
   title: 'DropdownMenu',
+  component: DropdownMenu.Frame,
 };
 
 export default meta;

packages/spindle-ui/src/Form/ButtonSwitch/ButtonSwitch.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as ButtonSwitchStories from './ButtonSwitch.stories';
 
-<Meta of={ButtonSwitchStories} />
+<Meta of={ButtonSwitchStories} summary="2つの選択肢から1つを選ぶスイッチ型コンポーネント。どちらも選択していないニュートラル状態も持てることがRadioやToggleSwitchとの違い。" />
 
 # ButtonSwitch
 

packages/spindle-ui/src/Form/Checkbox/Checkbox.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as CheckboxStories from './Checkbox.stories';
 
-<Meta of={CheckboxStories} />
+<Meta of={CheckboxStories} summary="チェックボックス入力コンポーネント。テキスト付き、inverse表示、disabled状態に対応。" />
 
 # Form/Checkbox
 

packages/spindle-ui/src/Form/DropDown/DropDown.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as DropDownStories from './DropDown.stories';
 
-<Meta of={DropDownStories} />
+<Meta of={DropDownStories} summary="フォーム用ドロップダウン選択コンポーネント。一般的なフォーム画面でのオプション選択に使用。" />
 
 # Form/DropDown
 

packages/spindle-ui/src/Form/DropDown/DropDown.stories.tsx

@@ -5,6 +5,7 @@ import { DropDown as DropDownComponent } from './DropDown';
 
 const meta: Meta<typeof DropDownComponent> = {
   title: 'Form/DropDown',
+  component: DropDownComponent,
   args: {
     onClick: action('clicked'),
     onChange: action('changed'),

packages/spindle-ui/src/Form/InlineDropDown/InlineDropDown.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as InlineDropDownStories from './InlineDropDown.stories';
 
-<Meta of={InlineDropDownStories} />
+<Meta of={InlineDropDownStories} summary="並び替え等で利用するインラインドロップダウン。一般的なフォーム画面の選択UIではなくアイテム一覧の並び替え用途を想定。試験的コンポーネント。" />
 
 # Form/InlineDropDown
 

packages/spindle-ui/src/Form/InlineDropDown/InlineDropDown.stories.tsx

@@ -5,6 +5,7 @@ import { InlineDropDown } from './InlineDropDown';
 
 const meta: Meta<typeof InlineDropDown> = {
   title: 'Form/InlineDropDown',
+  component: InlineDropDown,
   args: {
     onClick: action('clicked'),
     onChange: action('changed'),

packages/spindle-ui/src/Form/InputLabel/InputLabel.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as InputLabelStories from './InputLabel.stories';
 
-<Meta of={InputLabelStories} />
+<Meta of={InputLabelStories} summary="フォーム入力要素に対応するラベルコンポーネント。必須/任意の表示に対応。" />
 
 # Form/InputLabel
 

packages/spindle-ui/src/Form/InvalidMessage/InvalidMessage.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as InvalidMessageStories from './InvalidMessage.stories';
 
-<Meta of={InvalidMessageStories} />
+<Meta of={InvalidMessageStories} summary="フォームバリデーションエラーメッセージ表示コンポーネント。フォーム入力に紐づくエラー表示に使用。" />
 
 # Form/InvalidMessage
 

packages/spindle-ui/src/Form/Radio/Radio.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as RadioStories from './Radio.stories';
 
-<Meta of={RadioStories} />
+<Meta of={RadioStories} summary="ラジオボタン入力コンポーネント。単一選択用。checked、unchecked、disabled状態に対応。" />
 
 # Form/Radio
 

packages/spindle-ui/src/Form/TextArea/TextArea.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as TextAreaStories from './TextArea.stories';
 
-<Meta of={TextAreaStories} />
+<Meta of={TextAreaStories} summary="複数行テキスト入力コンポーネント。サイズバリエーションとエラー状態表示に対応。" />
 
 # Form/TextArea
 

packages/spindle-ui/src/Form/TextArea/TextArea.stories.tsx

@@ -5,6 +5,7 @@ import { TextArea as TextAreaComponent } from './TextArea';
 
 const meta: Meta<typeof TextAreaComponent> = {
   title: 'Form/TextArea',
+  component: TextAreaComponent,
   args: {
     onClick: action('clicked'),
     onChange: action('changed'),

packages/spindle-ui/src/Form/TextField/TextField.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as TextFieldStories from './TextField.stories';
 
-<Meta of={TextFieldStories} />
+<Meta of={TextFieldStories} summary="テキスト入力フィールド。large/mediumサイズ、hasErrorによるエラー状態表示に対応。:user-invalid擬似クラスによる自動エラー表示もサポート。" />
 
 # Form/TextField
 

packages/spindle-ui/src/Form/TextField/TextField.stories.tsx

@@ -5,6 +5,7 @@ import { TextField } from './TextField';
 
 const meta: Meta<typeof TextField> = {
   title: 'Form/TextField',
+  component: TextField,
   args: {
     onClick: action('clicked'),
     onChange: action('changed'),

packages/spindle-ui/src/Form/ToggleSwitch/ToggleSwitch.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as ToggleSwitchStories from './ToggleSwitch.stories';
 
-<Meta of={ToggleSwitchStories} />
+<Meta of={ToggleSwitchStories} summary="ON/OFFを切り替えるトグルスイッチコンポーネント。即座に設定を反映する用途に使用。" />
 
 # Form/ToggleSwitch
 

packages/spindle-ui/src/HeroCarousel/HeroCarousel.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as HeroCarouselStories from './HeroCarousel.stories';
 
-<Meta of={HeroCarouselStories} />
+<Meta of={HeroCarouselStories} summary="ヒーローエリア向けカルーセルコンポーネント。useCarousel Hooksと組み合わせて使用。" />
 
 # HeroCarousel
 

packages/spindle-ui/src/HeroCarousel/HeroCarousel.stories.tsx

@@ -5,6 +5,7 @@ import type { CarouselItem } from './HeroCarouselItem';
 
 const meta: Meta<typeof HeroCarousel> = {
   title: 'HeroCarousel',
+  component: HeroCarousel,
 };
 
 export default meta;

packages/spindle-ui/src/Icon/index.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as indexStories from './index.stories';
 
-<Meta of={indexStories} />
+<Meta of={indexStories} summary="SVGアイコンコンポーネント。色はCSS colorの継承、サイズはwidth/height属性で変更可能。単体利用時はaria-label、装飾時はaria-hidden='true'を指定。" />
 
 # Icon
 

packages/spindle-ui/src/Icon/index.stories.tsx

@@ -4,6 +4,7 @@ import { Clock } from './index';
 
 const meta: Meta<typeof Clock> = {
   title: 'Icon',
+  component: Clock,
 };
 
 export default meta;

packages/spindle-ui/src/IconButton/IconButton.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as IconButtonStories from './IconButton.stories';
 
-<Meta of={IconButtonStories} />
+<Meta of={IconButtonStories} summary="アイコン単体でボタンとするコンポーネント。ひと目でアクションが想起される理解しやすいアイコンを選択して使用。" />
 
 # IconButton
 

packages/spindle-ui/src/IconButton/IconButton.stories.tsx

@@ -6,6 +6,7 @@ import { IconButton } from './IconButton';
 
 const meta: Meta<typeof IconButton> = {
   title: 'IconButton',
+  component: IconButton,
   args: {
     onClick: action('clicked'),
     onMouseOver: action('mouse-over'),

packages/spindle-ui/src/InlineNotification/InlineNotification.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as InlineNotificationStories from './InlineNotification.stories';
 
-<Meta of={InlineNotificationStories} />
+<Meta of={InlineNotificationStories} summary="ページ内に埋め込むインライン通知コンポーネント。操作を中断せずシステム/UI状態をユーザーに伝達。自動消滅せず、追加アクション付きの通知に適する。Toast/SnackBarとは異なりレイアウトに影響する。" />
 
 # InlineNotification
 

packages/spindle-ui/src/InlineNotification/InlineNotification.stories.tsx

@@ -6,6 +6,7 @@ import { VisiblePropsSample } from './InlineNotification.stories.example';
 
 const meta: Meta<typeof InlineNotification.Frame> = {
   title: 'InlineNotification',
+  component: InlineNotification.Frame,
 };
 
 export default meta;

packages/spindle-ui/src/LinkButton/LinkButton.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as LinkButtonStories from './LinkButton.stories';
 
-<Meta of={LinkButtonStories} />
+<Meta of={LinkButtonStories} summary="リンクとして機能するボタンスタイルのコンポーネント。ナビゲーションを伴うアクションに使用。" />
 
 # LinkButton
 

packages/spindle-ui/src/LinkButton/LinkButton.stories.tsx

@@ -6,6 +6,7 @@ import { LinkButton } from './LinkButton';
 
 const meta: Meta<typeof LinkButton> = {
   title: 'LinkButton',
+  component: LinkButton,
   args: {
     onClick: action('clicked'),
     onMouseOver: action('mouse-over'),

packages/spindle-ui/src/List/MoreLink.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as MoreLinkStories from './MoreLink.stories';
 
-<Meta of={MoreLinkStories} />
+<Meta of={MoreLinkStories} summary="リスト末尾に配置する「もっと見る」リンクコンポーネント。追加コンテンツへの誘導に使用。" />
 
 # List/MoreLink
 

packages/spindle-ui/src/List/MoreLink.stories.tsx

@@ -5,6 +5,7 @@ import { MoreLink } from './MoreLink';
 
 const meta: Meta<typeof MoreLink> = {
   title: 'List/MoreLink',
+  component: MoreLink,
   args: {
     onClick: action('clicked'),
     onMouseOver: action('action'),

packages/spindle-ui/src/Modal/AppealModal/AppealModal.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as AppealModalStories from './AppealModal.stories';
 
-<Meta of={AppealModalStories} />
+<Meta of={AppealModalStories} summary="アピール用モーダルコンポーネント。プロモーションや特別なお知らせの訴求に使用。" />
 
 # Modal/AppealModal