chore(spindle-ui,spindle-hooks): optimize Storybook for AI by herablog · Pull Request #1975 · openameba/spindle

herablog · 2026-03-25T10:11:40Z

概要

Storybook AI Best Practices に基づき、AIエージェント（addon-mcp経由）へのコンテキスト提供を最適化しました。

reactDocgen を react-docgen-typescript に変更し、プロップ情報をマニフェストに反映
全MDXファイルの <Meta> タグに summary を追加
全ストーリーの meta に component を追加し、プロップ抽出を有効化

確認方法

pnpm install && pnpm --filter spindle-ui storybook:start
Storybook MCP経由でコンポーネント情報を取得し、Props情報やsummaryが返ることを確認
```
mcp__storybook__get-documentation({ id: "button" })
```
VRT（Visual Regression Test）に影響がないことを確認
- 見た目の変更は含まれないため、スナップショットの差分は出ない想定

今回未対応の項目（別PRで対応予定）

コンポーネント・プロップへのJSDocコメント追加（Props情報の説明文を充実させる）
ストーリーレベルの description 追加（各ストーリーに「なぜ・いつ使うか」を記述）
!manifest タグによるマニフェストのキュレーション（VRT用ストーリーの除外など）

changeset-bot · 2026-03-25T10:11:45Z

⚠️ No Changeset found

Latest commit: ce8a94e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2026-03-25T10:12:50Z

Visit the preview URL for this PR (updated for commit ce8a94e):

https://ameba-spindle-hooks--pr1975-chore-optimize-story-mjkyke6l.web.app

_{(expires Fri, 24 Apr 2026 10:17:50 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 7dd86a3c25a55dbb81dd4fa259473bf50648140b}

github-actions · 2026-03-25T10:13:23Z

Visit the preview URL for this PR (updated for commit ce8a94e):

https://ameba-spindle--pr1975-chore-optimize-story-omeiuujx.web.app

_{(expires Fri, 24 Apr 2026 10:18:18 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: e7521619a2dd5c653490c8246e81ec2a5c8f1435}

- reactDocgenをreact-docgen-typescriptに変更し、プロップ情報をマニフェストに反映 - 全MDXファイルのMetaタグにsummaryを追加し、AIエージェントへのコンテキスト提供を強化 - 全ストーリーのmetaにcomponentを追加し、プロップ抽出を有効化

Copilot

Pull request overview

Storybook AI Best Practices に沿って、Storybook（addon-mcp 経由）から取得できるコンポーネント/ドキュメントのメタ情報（Props 抽出・summary）を増やし、AI エージェント向けコンテキストを充実させるPRです。

Changes:

Storybook の TypeScript docgen を react-docgen-typescript に切り替え
各コンポーネントの MDX <Meta> に summary を追加
各 story の meta に component を追加して Props 抽出を有効化

Reviewed changes

Copilot reviewed 64 out of 64 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/spindle-ui/.storybook/main.js	`reactDocgen` を `react-docgen-typescript` に変更
packages/spindle-ui/storybook/UserNotificationTypes.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Toast/Toast.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/Toast/Toast.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/TextLink/TextLink.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/TextButton/TextButton.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Table/Table.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/Table/Table.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/SubtleButton/SubtleButton.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/StackNotificationManager/StackNotificationManager.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/StackNotificationManager/StackNotificationManager.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/SnackBar/SnackBar.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/SnackBar/SnackBar.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/SegmentedControl/SegmentedControl.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Rating/Rating.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Pagination/Pagination.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/Pagination/Pagination.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/NavigationTab/UnderlineTab/UnderlineTab.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/NavigationTab/UnderlineTab/UnderlineTab.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Modal/SemiModal/SemiModal.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/Modal/SemiModal/SemiModal.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Modal/AppealModal/AppealModal.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/Modal/AppealModal/AppealModal.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/List/MoreLink.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/List/MoreLink.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/LinkButton/LinkButton.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/LinkButton/LinkButton.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/InlineNotification/InlineNotification.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/InlineNotification/InlineNotification.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/IconButton/IconButton.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/IconButton/IconButton.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Icon/index.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/Icon/index.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/HeroCarousel/HeroCarousel.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/HeroCarousel/HeroCarousel.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Form/ToggleSwitch/ToggleSwitch.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Form/TextField/TextField.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/Form/TextField/TextField.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Form/TextArea/TextArea.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/Form/TextArea/TextArea.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Form/Radio/Radio.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Form/InvalidMessage/InvalidMessage.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Form/InputLabel/InputLabel.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Form/InlineDropDown/InlineDropDown.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/Form/InlineDropDown/InlineDropDown.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Form/DropDown/DropDown.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/Form/DropDown/DropDown.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Form/Checkbox/Checkbox.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Form/ButtonSwitch/ButtonSwitch.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/DropdownMenu/DropdownMenu.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Dialog/Dialog.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/Dialog/Dialog.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/ButtonGroup/ButtonGroup.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/ButtonGroup/ButtonGroup.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Button/Button.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/Button/Button.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/Breadcrumb/Breadcrumb.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/Breadcrumb/Breadcrumb.mdx	`<Meta>` に `summary` を追加
packages/spindle-ui/src/BottomButton/BottomButton.stories.tsx	story meta に `component` を追加
packages/spindle-ui/src/BottomButton/BottomButton.mdx	`<Meta>` に `summary` を追加
packages/spindle-hooks/.storybook/main.js	`reactDocgen` を `react-docgen-typescript` に変更
packages/spindle-hooks/src/useTimeDistance/useTimeDistance.mdx	`<Meta>` に `summary` を追加
packages/spindle-hooks/src/useCarousel/useCarousel.mdx	`<Meta>` に `summary` を追加

reg-suit · 2026-03-25T10:19:26Z

reg-suit detected visual differences.

Check this report, and review them.

🔴 Changed	🔵 Passing
2	256

How can I change the check status?

If reviewers approve this PR, the reg context status will be green automatically.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: ce8a94eb2d

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

yasuda-shin · 2026-03-27T05:20:16Z


 const meta: Meta<typeof SemiModal.Frame> = {
  title: 'Modal/SemiModal',
+  component: SemiModal.Frame,


copilotの指摘にもあるように react-docgen-typescript に変更したことによってコンポーネントを解決できずPropsが取得されないケースあるんですかね？

herablog requested a review from Copilot March 25, 2026 10:11

herablog self-assigned this Mar 25, 2026

Copilot started reviewing on behalf of herablog March 25, 2026 10:12 View session

herablog force-pushed the chore/optimize-story branch from 1cd1262 to ce8a94e Compare March 25, 2026 10:16

Copilot AI reviewed Mar 25, 2026

View reviewed changes

herablog requested a review from yasuda-shin March 25, 2026 10:22

herablog marked this pull request as ready for review March 25, 2026 10:22

herablog enabled auto-merge March 25, 2026 10:23

chatgpt-codex-connector Bot reviewed Mar 25, 2026

View reviewed changes

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

yasuda-shin reviewed Mar 27, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

chore(spindle-ui,spindle-hooks): optimize Storybook for AI#1975
herablog wants to merge 1 commit intomainfrom
chore/optimize-story

herablog commented Mar 25, 2026

Uh oh!

changeset-bot Bot commented Mar 25, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 25, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 25, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

reg-suit Bot commented Mar 25, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

Uh oh!

yasuda-shin Mar 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

herablog commented Mar 25, 2026

概要

確認方法

今回未対応の項目（別PRで対応予定）

Uh oh!

changeset-bot Bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions Bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

reg-suit Bot commented Mar 25, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

yasuda-shin Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot Bot commented Mar 25, 2026 •

edited

Loading

github-actions Bot commented Mar 25, 2026 •

edited

Loading

github-actions Bot commented Mar 25, 2026 •

edited

Loading