Add storybook to repo

[tinydinosaurs]

Adds an integrated Storybook instance directly inside vsc-ui-react so component documentation lives alongside source code, eliminating the need for the separate vsc-ui-react-storybook repo.

What's included

Storybook infrastructure (.storybook/)

• Storybook 10 with @storybook/react-vite framework
• @storybook/addon-a11y and @storybook/addon-docs addons
• Dark/light theme switching via toolbar toggle — syncs across canvas, docs, and sidebar
• Fluent theme composition with VS Code CSS variable overrides (themes.ts)
• Dynamic docs container that switches docs chrome theme on toggle (DocsContainer.tsx)
• Manager-level theme switcher for sidebar/toolbar (manager.ts)
• Minimal, targeted CSS overrides for docs chrome (preview-head.html)

Component stories (src/components/<Name>/<Name>.stories.tsx)

• Stories for all 10 component groups: Button, Input, Textarea, Dropdown, Field, SearchBox, TabList, Menu, Checkbox, Label
• Every story meta uses tags: ['autodocs'] for automatic docs page generation
• Component descriptions on every meta via parameters.docs.description.component
• Button uses the args pattern for interactive controls in docs; other components use gallery-style stories

Design language pages (src/stories/)

• Introduction page with install/usage guide
• Typography reference (type scale, VS Code font tokens)
• Colors reference (VS Code color token swatches)

Composed example (src/stories/SettingsPanel.stories.tsx)

• A realistic VS Code settings panel composing Field, Input, Textarea, Dropdown, Checkbox, TabList, SearchBox, and Button
• Interactive tab switching between Editor, Terminal, and Files tabs
• Demonstrates how the components work together in a real-world layout

Story helpers (src/stories/helpers/)

• helpers.tsx — shared layout components (Section, Row, Inline) used across all stories
• design-language-helpers.tsx — helper components for Typography and Colors pages

Build & packaging

• Stories excluded from library build via tsconfig.build.json exclude
• .storybook/ excluded from npm package via inclusion-only files field in package.json
• storybook-static/ and debug-storybook.log added to .gitignore
• npm run storybook (dev) and npm run build-storybook (static) scripts

Button component refinements

• VscButtonProps refactored to curated Pick pattern with JSDoc on each prop
• Removed redundant manual icon color overrides from useButtonStyles.ts — icon colors now handled natively by Fluent's token system via theme composition in themes.ts

Button as the reference implementation

The Button component received the most attention and is the best example of what this POC is illustrating. When reviewing, start there.

What we did to Button specifically:

The button previously accepted every possible HTML and Fluent UI property, which meant autodocs couldn't generate a useful props table — it would have been hundreds of items long. We refactored VscButtonProps to declare exactly which properties the button supports:

Property	What it controls
appearance	Visual style — primary, secondary, outline, subtle, or transparent
size	How big the button is — small, medium, large, or compact
icon	An optional icon displayed inside the button
iconPosition	Whether the icon appears before or after the label
disabled	Greys out the button and prevents interaction
disabledFocusable	Keeps the button focusable via keyboard even when disabled (for accessibility)
children	The button's label text
onClick	What happens when someone clicks the button

What this looks like in Storybook:

1. A description at the top explaining what the component is and its variants
2. A properties table — so you can see at a glance what the button accepts, with descriptions from JSDoc
3. Args-driven stories (Default, Primary) with interactive controls — tweak values directly in the docs page
4. Gallery stories (All Appearances, Sizes, With Icons, etc.) showing the full range of options side by side

Why this matters:

• Discoverability — Designers can see exactly what options are available without reading code
• Consistency — The properties table acts as a single source of truth for what the button supports
• Interactivity — The args-driven stories let you change values and see the result in real time

The same pattern can be applied to the other components (Input, Dropdown, etc.) once the team is happy with the approach.

Docs updates

• README.md — added Storybook section with run/build instructions
• CONTRIBUTING.md — expanded with dev setup, Storybook development guide, and theming architecture reference
• AGENTS.md — updated directory structure to include .storybook/ and co-located stories, added Storybook section with story conventions, theming architecture, and CSS override rules

About the MDX files in src/stories/docs/

The docs/ folder contains three MDX files (Colors.mdx, Typography.mdx, Overview.mdx) that are intentionally kept as reference examples of an alternative approach to documentation.

MDX vs. stories for documentation pages:

	MDX (.mdx)	Stories (.stories.tsx)
Prose-heavy content	Natural — write markdown directly	Awkward — JSX strings for paragraphs
Interactive examples	Can embed story references	Native
Type safety	Limited — no TS checking in markdown	Full TypeScript
Hot reload	Supported	Supported
Autodocs integration	Separate from component docs	Integrated with controls/args
Maintenance	Extra file format to know	Same TSX the team already writes

The Typography and Colors pages exist as both .stories.tsx and .mdx versions. The .stories.tsx versions are what Storybook renders — the .mdx files are kept for comparison. A team could choose either approach depending on whether they prefer markdown authoring or want everything in TypeScript.

How to test

cd vsc-ui-react
npm install
npm run storybook

Then toggle the dark/light switch in the toolbar to verify theme switching works across all views.