feat(frontend): upgrade Storybook and add extension component documentation

[rusackas]

Summary

This PR upgrades Storybook and introduces an automated documentation system for extension-compatible UI components.

Storybook Upgrade (8.1.11 → 8.6.14)

• Updated 10 Storybook packages in superset-frontend/package.json
• Updated 6 Storybook packages in packages/superset-ui-demo/package.json
• Added @storybook/test-runner to validate all stories compile and render without errors
• Fixed several pre-existing broken stories discovered by the test runner

Story Fixes

• DesignSystem.stories.tsx: Converted markdown table to HTML (markdown-to-jsx doesn't support GFM tables)
• AlteredSliceTag.stories.tsx: Fixed props - component expects diffs, not currentFormData
• ExampleApp.stories.jsx: Imported Alert and Table from antd (not exported from components wrapper)
• ListViewCard.stories.tsx: Simplified story to avoid infinite recursion / stack overflow

CI Integration

• Added test-storybook job to GitHub Actions that builds Storybook and runs the test runner
• Documented Storybook testing in contributing docs

Extension Component Documentation System

Added infrastructure for documenting components available to extension developers:

• Location-based detection: Any component in superset-core/src/ui/components/ with a story is automatically documented
• Auto-generation script (docs/scripts/generate-extension-components.mjs) that:
  • Scans superset-core for story files
  • Generates interactive MDX documentation pages
  • Extracts controls from story argTypes
  • Auto-generates props tables from story args
• Live code playground: Added @docusaurus/theme-live-codeblock for editable examples
• Webpack/TypeScript aliasing: @apache-superset/core resolves to superset-core components
• Runs automatically on yarn start and yarn build in docs/
• New Components section in Developer Portal under Extensions

How to Add a New Extension Component

1. Create the component in superset-frontend/packages/superset-core/src/ui/components/
2. Export it from the package's index.ts
3. Create a Storybook story with an Interactive export:

export default { title: 'Extension Components/MyComponent', component: MyComponent, parameters: { docs: { description: { component: 'Description of the component...', }, }, }, }; export const InteractiveMyComponent = (args) => <MyComponent {...args} />; InteractiveMyComponent.args = { variant: 'primary', disabled: false, }; InteractiveMyComponent.argTypes = { variant: { control: { type: 'select' }, options: ['primary', 'secondary'], }, disabled: { control: { type: 'boolean' }, }, };

4. Run yarn start in docs/ - the page generates automatically!

Test plan

• Storybook builds successfully (npm run build-storybook)
• All stories render without errors (npm run test-storybook)
• Extension component docs generate correctly
• CI passes (frontend build, jest tests, new test-storybook job)

🤖 Generated with Claude Code

[codeant-ai-for-open-source]

CodeAnt AI is reviewing your PR.

[bito-code-review]

Bito Automatic Review Skipped - Files Excluded

Bito didn't auto-review this change because all changed files are in the exclusion list for automatic reviews. No action is needed if you didn't intend for the agent to review it. Otherwise, to manually trigger a review, type /review in a comment and save.
You can change the excluded files settings here, or contact your Bito workspace admin at evan@preset.io.

[codeant-ai-for-open-source]

CodeAnt AI finished reviewing your PR.

[codeant-ai-for-open-source]

💡 Enhance Your PR Reviews

We noticed that 3 feature(s) are not configured for this repository. Enabling these features can help improve your code quality and workflow:

🚦 Quality Gates

Status: Quality Gates are not enabled at the organization level
Learn more about Quality Gates

🎫 Jira Ticket Compliance

Status: Jira credentials file not found. Please configure Jira integration in your settings
Learn more about Jira Integration

⚙️ Custom Rules

Status: No custom rules configured. Add rules via organization settings or .codeant/review.json in your repository
Learn more about Custom Rules

---

Want to enable these features? Contact your organization admin or check our documentation for setup instructions.

[codeant-ai-for-open-source]

CodeAnt AI is running Incremental review

[rusackas]

PR Review Feedback Addressed

Rebased on master and addressed the following review feedback:

1. Script Comment Mismatch ✅

Fixed misleading header comment that claimed the script scans for extension-compatible tags. The comment now accurately states it processes all stories in superset-core/src.

2. Hardcoded "Sample alert message" ✅

The MDX generator is now story-driven - it extracts actual args and controls from Storybook stories instead of generating hardcoded Alert-specific code. This means:

• Props like message and description are pulled from InteractiveX.args
• Text controls are automatically added for string props
• Prop descriptions come from argTypes metadata
• The generated code works for any component, not just Alert

3. Alert-like Component Structure Assumption ✅

Fixed - same as above. Live examples now use actual story props.

4. Webpack/TypeScript Alias Mismatch ✅

Added clarifying comments to both webpack.extend.ts and tsconfig.json explaining the intentional split:

• Webpack resolves actual component source for runtime
• TypeScript uses simplified generated types for IDE support

5. Inconsistent Import Path ✅

Updated all imports from @apache-superset/core to @apache-superset/core/ui to match the established pattern used throughout the Superset codebase.

6. Components Section Sidebar Position ✅

Moved Components from the end of the Extensions sidebar to after "Contribution Types" - following the logical learning path: understand the toolkit → learn extension points → build.

---

All changes are purely programmatic (regex parsing + string templates) with no AI involved in the doc generation itself.