Modernize Storybook component docs

[fredvisser]

Summary

Modernize the Nimble Storybook component documentation pages with a repository-owned responsive layout, explicit table of contents, reusable previews/showcases/guidance blocks, and token-backed light/dark styling.

The Button docs now include the cropped, inline theme-aware anatomy SVG and stable section metadata. Select and related docs use the same layout conventions. Storybook's public Docs blocks remain responsible for Canvas, Controls, Title, and Meta; custom table-descendant styling was removed to keep the API surface on stock Storybook behavior. The private syntax-highlighter API and unused dependency were removed, and generated Storybook selector workarounds were not expanded.

Validation

• npm run lint -w @ni-private/storybook
• npm run build -w @ni-private/storybook
• git diff --cached --check
• Visual smoke checks for Button in dark mode and Select at a narrow viewport; both rendered without horizontal overflow.

The existing generated-selector loading-skeleton workaround in packages/storybook/.storybook/preview.css is unchanged and remains outside this PR's staged payload.

[Copilot]

Pull request overview

This pull request modernizes the Storybook documentation experience in packages/storybook by introducing a repository-owned responsive docs layout (page wrapper, table of contents, previews/showcases/guidance blocks) and aligning docs styling with Nimble design tokens (light/dark), while removing reliance on Storybook’s private syntax-highlighter API and its dependency chain.

Changes:

• Add new Storybook docs layout utilities (StoryPage, StoryTableOfContents, StoryPreview, StoryShowcase, guidance blocks, etc.) with token-backed styling.
• Update Button and Select MDX docs to use the new layout conventions, including stable section metadata and a theme-aware inline anatomy SVG for Button.
• Remove SyntaxHighlighter registration and the react-syntax-highlighter dependency; convert certain cs fences to text to avoid relying on custom highlighting.

Reviewed changes

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

Show a summary per file

File	Description
packages/storybook/src/vite-env.d.ts	Adds TS module typing for *.svg?raw imports used by Vite.
packages/storybook/src/utilities/story-layout.tsx	Introduces the new token-styled Storybook docs layout components and ToC behavior.
packages/storybook/src/ok/ts/icon-dynamic/ts-icon-dynamic.mdx	Switches a Blazor snippet fence from cs to text.
packages/storybook/src/nimble/table/table.mdx	Switches a C# snippet fence from cs to text.
packages/storybook/src/nimble/select/select.stories.ts	Disables Storybook’s built-in docs ToC for Select to avoid duplication with custom ToC.
packages/storybook/src/nimble/select/select.mdx	Refactors Select docs to use StoryPage + section metadata + previews/API wrappers.
packages/storybook/src/nimble/patterns/button/button-styling-docs.mdx	Updates Button styling docs to use StoryShowcase and shared section metadata.
packages/storybook/src/nimble/dialog/dialog.mdx	Switches a C# snippet fence from cs to text.
packages/storybook/src/nimble/button/images/button-anatomy.svg	Adds the anatomy SVG asset used for inline themed docs rendering.
packages/storybook/src/nimble/button/button.stories.ts	Disables Storybook’s built-in docs ToC for Button to avoid duplication with custom ToC.
packages/storybook/src/nimble/button/button.mdx	Rebuilds Button docs around the new layout primitives, ToC, and guidance blocks.
packages/storybook/src/nimble/button/button-sections.ts	Adds reusable, stable section metadata for Button docs + ToC items.
packages/storybook/src/nimble/button/button-anatomy.tsx	Adds a component that renders the anatomy SVG inline and theme-aware via tokens.
packages/storybook/package.json	Removes react-syntax-highlighter dependency.
packages/storybook/.storybook/theme.js	Aligns Storybook theme base font to Nimble’s token font family.
packages/storybook/.storybook/preview.js	Removes private SyntaxHighlighter registration usage.
package-lock.json	Updates lockfile to reflect dependency removal and resulting tree changes.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.