[pull] master from apache:master

.rat-excludes

@@ -75,6 +75,7 @@ logos/*
 erd.puml
 erd.svg
 intro_header.txt
+TODO.md
 
 # for LLMs
 llm-context.md

AGENTS.md

@@ -101,6 +101,30 @@ superset/
 - **UPDATING.md**: Add breaking changes here
 - **Docstrings**: Required for new functions/classes
 
+## Developer Portal: Storybook-to-MDX Documentation
+
+The Developer Portal auto-generates MDX documentation from Storybook stories. **Stories are the single source of truth.**
+
+### Core Philosophy
+- **Fix issues in the STORY, not the generator** - When something doesn't render correctly, update the story file first
+- **Generator should be lightweight** - It extracts and passes through data; avoid special cases
+- **Stories define everything** - Props, controls, galleries, examples all come from story metadata
+
+### Story Requirements for Docs Generation
+- Use `export default { title: '...' }` (inline), not `const meta = ...; export default meta;`
+- Name interactive stories `Interactive${ComponentName}` (e.g., `InteractiveButton`)
+- Define `args` for default prop values
+- Define `argTypes` at the story level (not meta level) with control types and descriptions
+- Use `parameters.docs.gallery` for size×style variant grids
+- Use `parameters.docs.sampleChildren` for components that need children
+- Use `parameters.docs.liveExample` for custom live code blocks
+- Use `parameters.docs.staticProps` for complex object props that can't be parsed inline
+
+### Generator Location
+- Script: `docs/scripts/generate-superset-components.mjs`
+- Wrapper: `docs/src/components/StorybookWrapper.jsx`
+- Output: `docs/developer_portal/components/`
+
 ## Architecture Patterns
 
 ### Security & Features

docs/.claude/instructions.md

@@ -0,0 +1,115 @@
+# Developer Portal Documentation Instructions
+
+## Core Principle: Stories Are the Single Source of Truth
+
+When working on the Storybook-to-MDX documentation system:
+
+**ALWAYS fix the story first. NEVER add workarounds to the generator.**
+
+## Why This Matters
+
+The generator (`scripts/generate-superset-components.mjs`) should be lightweight - it extracts data from stories and passes it through. When you add special cases to the generator:
+- It becomes harder to maintain
+- Stories diverge from their docs representation
+- Future stories need to know about generator quirks
+
+When you fix stories to match the expected patterns:
+- Stories work identically in Storybook and Docs
+- The generator stays simple and predictable
+- Patterns are consistent and learnable
+
+## Story Patterns for Docs Generation
+
+### Required Structure
+```tsx
+// Use inline export default (NOT const meta = ...; export default meta)
+export default {
+  title: 'Components/MyComponent',
+  component: MyComponent,
+};
+
+// Name interactive stories with Interactive prefix
+export const InteractiveMyComponent: Story = {
+  args: {
+    // Default prop values
+  },
+  argTypes: {
+    // Control definitions - MUST be at story level, not meta level
+    propName: {
+      control: { type: 'select' },
+      options: ['a', 'b', 'c'],
+      description: 'What this prop does',
+    },
+  },
+};
+```
+
+### For Components with Variants (size × style grids)
+```tsx
+const sizes = ['small', 'medium', 'large'];
+const variants = ['primary', 'secondary', 'danger'];
+
+InteractiveButton.parameters = {
+  docs: {
+    gallery: {
+      component: 'Button',
+      sizes,
+      styles: variants,
+      sizeProp: 'size',
+      styleProp: 'variant',
+    },
+  },
+};
+```
+
+### For Components Requiring Children
+```tsx
+InteractiveIconTooltip.parameters = {
+  docs: {
+    // Component descriptors with dot notation for nested components
+    sampleChildren: [{ component: 'Icons.InfoCircleOutlined', props: { iconSize: 'l' } }],
+  },
+};
+```
+
+### For Custom Live Code Examples
+```tsx
+InteractiveMyComponent.parameters = {
+  docs: {
+    liveExample: `function Demo() {
+  return <MyComponent prop="value">Content</MyComponent>;
+}`,
+  },
+};
+```
+
+### For Complex Props (objects, arrays)
+```tsx
+InteractiveMenu.parameters = {
+  docs: {
+    staticProps: {
+      items: [
+        { key: '1', label: 'Item 1' },
+        { key: '2', label: 'Item 2' },
+      ],
+    },
+  },
+};
+```
+
+## Common Issues and How to Fix Them (in the Story)
+
+| Issue | Wrong Approach | Right Approach |
+|-------|---------------|----------------|
+| Component not generated | Add pattern to generator | Change story to use inline `export default` |
+| Control shows as text instead of select | Add special case in generator | Add `argTypes` with `control: { type: 'select' }` |
+| Missing children/content | Modify StorybookWrapper | Add `parameters.docs.sampleChildren` |
+| Gallery not showing | Add to generator output | Add `parameters.docs.gallery` config |
+| Wrong live example | Hardcode in generator | Add `parameters.docs.liveExample` |
+
+## Files
+
+- **Generator**: `docs/scripts/generate-superset-components.mjs`
+- **Wrapper**: `docs/src/components/StorybookWrapper.jsx`
+- **Output**: `docs/developer_portal/components/`
+- **Stories**: `superset-frontend/packages/superset-ui-core/src/components/*/`

docs/.gitignore

@@ -35,5 +35,12 @@ docs/databases/
 # Source of truth is static/resources/openapi.json
 docs/api/
 
+# Generated component documentation MDX files (regenerated at build time)
+# Source of truth is Storybook stories in superset-frontend/packages/superset-ui-core/src/components/
+developer_portal/components/
+
+# Generated extension component documentation (regenerated at build time)
+developer_portal/extensions/components/
+
 # Note: src/data/databases.json is COMMITTED (not ignored) to preserve feature diagnostics
 # that require Flask context to generate. Update it locally with: npm run gen-db-docs

docs/babel.config.js

@@ -19,5 +19,14 @@
  */
 
 module.exports = {
-  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+  presets: [
+    [
+      require.resolve('@docusaurus/core/lib/babel/preset'),
+      {
+        runtime: 'automatic',
+        importSource: '@emotion/react',
+      },
+    ],
+  ],
+  plugins: ['@emotion/babel-plugin'],
 };

docs/developer_portal/contributing/howtos.md

@@ -258,19 +258,7 @@ For debugging the Flask backend:
 
 ### Storybook
 
-Storybook is used for developing and testing UI components in isolation:
-
-```bash
-cd superset-frontend
-
-# Start Storybook
-npm run storybook
-
-# Build static Storybook
-npm run build-storybook
-```
-
-Access Storybook at http://localhost:6006
+See the dedicated [Storybook documentation](../testing/storybook) for information on running Storybook locally and adding new stories.
 
 ## Contributing Translations