docs(spindle-ui): Button に story description と Props テーブルを追加

[herablog]

概要

Storybook の AI ベストプラクティス に基づき、Button コンポーネントをサンプルとして story description と Props テーブルを追加しました。AI エージェント (storybook-mcp) と開発者の両方がコンポーネントの用途を理解しやすくすることが目的です。

変更内容

• main.js: reactDocgen を false → 'react-docgen-typescript' に変更し、Props テーブルを有効化
• Button.tsx: Props interface に JSDoc コメントを追加 (layout, size, variant, icon, iconPosition)
• Button.stories.tsx: Meta と全 Story に JSDoc description を追加、component: Button を指定
• Button.mdx: <ArgTypes> で Props テーブル、<Description> で JSDoc の description を表示

確認方法

1. pnpm --filter spindle-ui dev で Storybook を起動
2. Button ページの Docs タブで Props テーブルと各 Story の description が表示されることを確認
3. storybook-mcp の get-documentation で Props / Story description が取得できることを確認

備考

サンプルとして Button のみ対応しています。レビュー後、同じパターンで他のコンポーネントにも順次展開予定です。

[changeset-bot]

⚠️ No Changeset found

Latest commit: 55b5a06

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]

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

https://ameba-spindle--pr1981-docs-story-descripti-69f0uoli.web.app

_{(expires Sun, 26 Apr 2026 02:41:48 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: e7521619a2dd5c653490c8246e81ec2a5c8f1435}

[reg-suit]

reg-suit detected visual differences.

Check this report, and review them.

🔴 Changed	🔵 Passing
1	257

How can I change the check status?

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

[Copilot]

Pull request overview

Storybook の Docs 体験を改善するため、Button をサンプルに story description と Props テーブル表示を追加し、あわせて Storybook 側で React Docgen(TypeScript) を有効化する PR です。

Changes:

• Storybook 設定で react-docgen-typescript を有効化し、Props テーブル生成を可能に
• Button の Props に JSDoc を追加して Docs 側の説明文を補強
• Button の stories / MDX に Description と ArgTypes を追加して Docs 表示を拡充

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
packages/spindle-ui/.storybook/main.js	Docgen 設定を変更し Props テーブル生成を有効化
packages/spindle-ui/src/Button/Button.tsx	Props に JSDoc を追加し、Docs の説明ソースを提供
packages/spindle-ui/src/Button/Button.stories.tsx	Meta/Stories に description を追加し component を指定
packages/spindle-ui/src/Button/Button.mdx	<Description> と <ArgTypes> を追加して Docs を強化

[Copilot]

reactDocgen を有効化すると、Button のように React.*HTMLAttributes を継承しているコンポーネントでは Props テーブルに HTML 属性が大量に出てしまい、Docs の可読性低下や Storybook 起動/ビルド時間の悪化につながりやすいです。reactDocgenTypescriptOptions の propFilter で node_modules 由来の props を除外する等、抽出対象を絞る設定を追加するか、今回 Button のみが目的なら影響範囲を限定する方法を検討してください。

Suggested change

	reactDocgen: 'react-docgen-typescript',
	reactDocgen: 'react-docgen-typescript',
	reactDocgenTypescriptOptions: {
	propFilter: (prop) => {
	if (prop.parent && prop.parent.fileName) {
	return !prop.parent.fileName.includes('node_modules');
	}
	return true;
	},
	},