+
+---
+
+## Component Library
+
+Interactive documentation for Superset's UI component library. **${totalComponents} components** documented across ${Object.keys(categories).filter(k => categories[k].length > 0).length} categories.
+
+${categoryList}
+
+## Usage
+
+All components are exported from \`@superset-ui/core/components\`:
+
+\`\`\`tsx
+import { Button, Modal, Select } from '@superset-ui/core/components';
+\`\`\`
+
+## Contributing
+
+This documentation is auto-generated from Storybook stories. To add or update component documentation:
+
+1. Create or update the component's \`.stories.tsx\` file
+2. Add a descriptive \`title\` and \`description\` in the story meta
+3. Export an interactive story with \`args\` for configurable props
+4. Run \`yarn generate:superset-components\` in the \`docs/\` directory
+
+:::info Work in Progress
+This component library is actively being documented. See the [Components TODO](./TODO) page for a list of components awaiting documentation.
+:::
+
+---
+
+*Auto-generated from Storybook stories in the [Design System/Introduction](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/DesignSystem.stories.tsx) story.*
+`;
+}
+
+/**
+ * Generate TODO.md tracking skipped components
+ */
+function generateTodoMd(skippedFiles) {
+ const disabledSources = SOURCES.filter(s => !s.enabled);
+ const grouped = {};
+ for (const file of skippedFiles) {
+ const source = disabledSources.find(s => file.includes(s.path));
+ const sourceName = source ? source.name : 'unknown';
+ if (!grouped[sourceName]) grouped[sourceName] = [];
+ grouped[sourceName].push(file);
+ }
+
+ const sections = Object.entries(grouped)
+ .map(([source, files]) => {
+ const fileList = files.map(f => `- [ ] \`${path.relative(ROOT_DIR, f)}\``).join('\n');
+ return `### ${source}\n\n${files.length} components\n\n${fileList}`;
+ })
+ .join('\n\n');
+
+ return `---
+title: Components TODO
+sidebar_class_name: hidden
+---
+
+# Components TODO
+
+These components were found but not yet supported for documentation generation.
+Future phases will add support for these sources.
+
+## Summary
+
+- **Total skipped:** ${skippedFiles.length} story files
+- **Reason:** Import path resolution not yet implemented
+
+## Skipped by Source
+
+${sections}
+
+## How to Add Support
+
+1. Determine the correct import path for the source
+2. Update \`generate-superset-components.mjs\` to handle the source
+3. Add source to \`SUPPORTED_SOURCES\` array
+4. Re-run the generator
+
+---
+
+*Auto-generated by generate-superset-components.mjs*
+`;
+}
+
+/**
+ * Main function
+ */
+async function main() {
+ console.log('Generating Superset Components documentation...\n');
+
+ // Find enabled story files
+ const enabledFiles = findEnabledStoryFiles();
+ console.log(`Found ${enabledFiles.length} story files from enabled sources\n`);
+
+ // Find disabled story files (for tracking)
+ const disabledFiles = findDisabledStoryFiles();
+ console.log(`Found ${disabledFiles.length} story files from disabled sources (tracking only)\n`);
+
+ // Parse enabled files
+ const components = [];
+ for (const { file, source } of enabledFiles) {
+ const parsed = parseStoryFile(file, source);
+ if (parsed && parsed.componentName) {
+ components.push(parsed);
+ }
+ }
+
+ console.log(`Parsed ${components.length} components\n`);
+
+ // Group by category
+ const categories = {};
+ for (const component of components) {
+ if (!categories[component.category]) {
+ categories[component.category] = [];
+ }
+ categories[component.category].push(component);
+ }
+
+ // Ensure output directory exists
+ if (!fs.existsSync(OUTPUT_DIR)) {
+ fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+ }
+
+ // Generate MDX files by category
+ let generatedCount = 0;
+ for (const [category, categoryComponents] of Object.entries(categories)) {
+ const categoryDir = path.join(OUTPUT_DIR, category);
+ if (!fs.existsSync(categoryDir)) {
+ fs.mkdirSync(categoryDir, { recursive: true });
+ }
+
+ // Generate component pages
+ for (const component of categoryComponents) {
+ const storyContent = fs.readFileSync(component.filePath, 'utf-8');
+ const mdxContent = generateMDX(component, storyContent);
+ const outputPath = path.join(categoryDir, `${component.componentName.toLowerCase()}.mdx`);
+ fs.writeFileSync(outputPath, mdxContent);
+ console.log(` ✓ ${category}/${component.componentName}`);
+ generatedCount++;
+ }
+
+ // Generate category index
+ const indexContent = generateCategoryIndex(category, categoryComponents);
+ const indexPath = path.join(categoryDir, 'index.mdx');
+ fs.writeFileSync(indexPath, indexContent);
+ console.log(` ✓ ${category}/index`);
+ }
+
+ // Generate main overview
+ const overviewContent = generateOverviewIndex(categories);
+ const overviewPath = path.join(OUTPUT_DIR, 'index.mdx');
+ fs.writeFileSync(overviewPath, overviewContent);
+ console.log(` ✓ index (overview)`);
+
+ // Generate TODO.md
+ const todoContent = generateTodoMd(disabledFiles);
+ const todoPath = path.join(OUTPUT_DIR, 'TODO.md');
+ fs.writeFileSync(todoPath, todoContent);
+ console.log(` ✓ TODO.md`);
+
+ console.log(`\nDone! Generated ${generatedCount} component pages.`);
+ console.log(`Tracked ${disabledFiles.length} components for future implementation.`);
+}
+
+main().catch(console.error);
diff --git a/docs/sidebarTutorials.js b/docs/sidebarTutorials.js
index 6e0eff12247..b527517a954 100644
--- a/docs/sidebarTutorials.js
+++ b/docs/sidebarTutorials.js
@@ -110,9 +110,21 @@ const sidebars = {
'testing/frontend-testing',
'testing/backend-testing',
'testing/e2e-testing',
+ 'testing/storybook',
'testing/ci-cd',
],
},
+ {
+ type: 'category',
+ label: 'UI Components',
+ collapsed: true,
+ items: [
+ {
+ type: 'autogenerated',
+ dirName: 'components',
+ },
+ ],
+ },
{
type: 'link',
label: 'API Reference',
diff --git a/docs/src/components/BlurredSection.tsx b/docs/src/components/BlurredSection.tsx
index d502cadcb3d..712a36fa8c5 100644
--- a/docs/src/components/BlurredSection.tsx
+++ b/docs/src/components/BlurredSection.tsx
@@ -39,11 +39,12 @@ const StyledBlurredSection = styled('section')`
interface BlurredSectionProps {
children: ReactNode;
+ id?: string;
}
-const BlurredSection = ({ children }: BlurredSectionProps) => {
+const BlurredSection = ({ children, id }: BlurredSectionProps) => {
return (
- 
- {Component &&
-
+ Loading component...
+
);
}
-// A simple component to display a story with controls
-export function StoryWithControls({
- component: Component,
- props = {},
- controls = [],
-}) {
+// A simple component to display a story example
+export function StoryExample({ component, props = {} }) {
+ return (
+
+ {Component ? (
+ {children}
+ ) : (
+
+
+ Component "{String(component)}" not found
+
+ )}
+ {item.props?.children || `Unknown: ${item.component}`}
;
+ }
+ // Simple string
+ return (
+
+ {item}
+
+ );
+ });
+ }
+
+ // If it's a number, generate that many sample items
+ if (typeof sampleChildren === 'number') {
+ return new Array(sampleChildren).fill(null).map((_, i) => (
+
+ Item {i + 1}
+
+ ));
+ }
+
+ // If it's a string, treat as literal content
+ if (typeof sampleChildren === 'string') {
+ return sampleChildren;
+ }
+
+ return sampleChildren;
+}
+
+// Inner component for StoryWithControls (browser-only)
+// renderComponent allows overriding which component to actually render (useful when the named
+// component is a namespace object like Icons, not a React component)
+// triggerProp: for components like Modal that need a trigger, specify the boolean prop that controls visibility
+function StoryWithControlsInner({ component, renderComponent, props, controls, sampleChildren, sampleChildrenStyle, triggerProp, onHideProp }) {
+ // Use renderComponent if provided, otherwise use the main component name
+ const componentToRender = renderComponent || component;
+ const Component = resolveComponent(componentToRender);
+ const Providers = getProviders();
const [stateProps, setStateProps] = React.useState(props);
const updateProp = (key, value) => {
@@ -54,8 +266,77 @@ export function StoryWithControls({
}));
};
+ // Extract children from props (label, children, text, content)
+ // When sampleChildren is explicitly provided, skip extraction so all props
+ // (like 'content') stay as component props rather than becoming children
+ const { children: propsChildren, restProps } = sampleChildren
+ ? { children: null, restProps: stateProps }
+ : extractChildren(stateProps);
+ // Filter out undefined values so they don't override component defaults
+ const filteredProps = Object.fromEntries(
+ Object.entries(restProps).filter(([, v]) => v !== undefined)
+ );
+
+ // Resolve any prop values that are component descriptors
+ // e.g., { component: 'Button', props: { children: 'Click' } }
+ // Also resolves descriptors nested inside array items:
+ // e.g., items: [{ id: 'x', element: { component: 'div', props: { children: 'text' } } }]
+ Object.keys(filteredProps).forEach(key => {
+ const value = filteredProps[key];
+ if (value && typeof value === 'object' && !Array.isArray(value) && value.component) {
+ const PropComponent = resolveComponent(value.component);
+ if (PropComponent) {
+ filteredProps[key] =
- {Component && updateProp(triggerProp, true)}>
+ Open {component}
+
+ )}
+ {children}
+
+ ) : (
+
{controls.length > 0 && (
@@ -87,26 +383,64 @@ export function StoryWithControls({
{control.type === 'select' ? (
+ ) : control.type === 'inline-radio' || control.type === 'radio' ? (
+
+ Component "{String(componentToRender)}" not found
+
+ )}
+ {control.options?.map(option => (
+
+ ))}
+
) : control.type === 'boolean' ? (
updateProp(control.name, e.target.checked)}
/>
+ ) : control.type === 'number' ? (
+ updateProp(control.name, Number(e.target.value))}
+ style={{ width: '100%', padding: '5px' }}
+ />
+ ) : control.type === 'color' ? (
+ updateProp(control.name, e.target.value)}
+ style={{
+ width: '50px',
+ height: '30px',
+ padding: '2px',
+ cursor: 'pointer',
+ }}
+ />
) : (
updateProp(control.name, e.target.value)}
style={{ width: '100%', padding: '5px' }}
/>
@@ -116,6 +450,81 @@ export function StoryWithControls({
+ Component "{String(component)}" not found
+
+ );
+ }
+
+ return (
+
+ {sizes.map(size => (
+
+
+
+ ))}
+ {size}
+
+ {styles.map(style => (
+
+ {style}
+
+ ))}
+
+ Loading...
;
+}
+
+function ThemedLivePreview(): ReactNode {
+ const ThemeWrapper = getThemeWrapper();
+ return (
+
+
+
+ );
+}
diff --git a/docs/src/theme/Playground/Preview/styles.module.css b/docs/src/theme/Playground/Preview/styles.module.css
new file mode 100644
index 00000000000..178361045f7
--- /dev/null
+++ b/docs/src/theme/Playground/Preview/styles.module.css
@@ -0,0 +1,23 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.playgroundPreview {
+ padding: 1rem;
+ background-color: var(--ifm-pre-background);
+}
diff --git a/docs/src/theme/ReactLiveScope/index.tsx b/docs/src/theme/ReactLiveScope/index.tsx
index 9675a65dd48..27d35cd6052 100644
--- a/docs/src/theme/ReactLiveScope/index.tsx
+++ b/docs/src/theme/ReactLiveScope/index.tsx
@@ -18,36 +18,49 @@
*/
import React from 'react';
-import { Button, Card, Input, Space, Tag, Tooltip } from 'antd';
-// Import extension components from @apache-superset/core/ui
-// This matches the established pattern used throughout the Superset codebase
-// Resolved via webpack alias to superset-frontend/packages/superset-core/src/ui/components
-import { Alert } from '@apache-superset/core/ui';
+// Browser-only check for SSR safety
+const isBrowser = typeof window !== 'undefined';
/**
* ReactLiveScope provides the scope for live code blocks.
* Any component added here will be available in ```tsx live blocks.
*
- * To add more components:
- * 1. Import the component from @apache-superset/core above
- * 2. Add it to the scope object below
+ * Components are conditionally loaded only in the browser to avoid
+ * SSG issues with Emotion CSS-in-JS jsx runtime.
+ *
+ * Components are available by name, e.g.:
+ *
+ *
-
),
+ parameters: {
+ docs: {
+ disable: true, // Hide from docs, it's a Storybook-specific demo
+ },
+ },
};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Avatar/Avatar.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Avatar/Avatar.stories.tsx
index 5122cd8b51a..43ba70c755e 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Avatar/Avatar.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Avatar/Avatar.stories.tsx
@@ -27,6 +27,7 @@ export default {
export const InteractiveAvatar = (args: AvatarProps) =>
+ {statuses.map(status => (
+
+ );
+}`,
+ },
+ {
+ title: 'Color Gallery',
+ code: `function ColorGallery() {
+ const colors = ['pink', 'red', 'orange', 'green', 'cyan', 'blue', 'purple'];
+ return (
+
+ {colors.map(color => (
+
+ );
+}`,
+ },
+ ],
+ },
+};
+
+// Status Badge - shows a status dot with text
+export const StatusBadge = (args: BadgeProps) => {size}
- {COLORS.options.map(color => ( -
+ {COLORS.options.map(color => (
+
+
+ Default card content.
+
+
+ Hover over this card.
+
+
+ This content is hidden while loading.
+
+
+ Borderless card.
+
+
+ );
+}`,
+ },
+ ],
},
};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Checkbox/Checkbox.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Checkbox/Checkbox.stories.tsx
index afa3c211555..cae77987c5f 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Checkbox/Checkbox.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Checkbox/Checkbox.stories.tsx
@@ -67,6 +67,75 @@ InteractiveCheckbox.args = {
indeterminate: false,
};
+InteractiveCheckbox.argTypes = {
+ checked: {
+ control: { type: 'boolean' },
+ description: 'Whether the checkbox is checked.',
+ },
+ indeterminate: {
+ control: { type: 'boolean' },
+ description:
+ 'Whether the checkbox is in indeterminate state (partially selected).',
+ },
+};
+
+InteractiveCheckbox.parameters = {
+ docs: {
+ examples: [
+ {
+ title: 'All Checkbox States',
+ code: `function AllStates() {
+ return (
+
+ Unchecked
+ Checked
+ Indeterminate
+ Disabled unchecked
+ Disabled checked
+
+ );
+}`,
+ },
+ {
+ title: 'Select All Pattern',
+ code: `function SelectAllDemo() {
+ const [selected, setSelected] = React.useState([]);
+ const options = ['Option A', 'Option B', 'Option C'];
+
+ const allSelected = selected.length === options.length;
+ const indeterminate = selected.length > 0 && !allSelected;
+
+ return (
+
+ setSelected(e.target.checked ? [...options] : [])}
+ >
+ Select All
+
+
+ );
+}`,
+ },
+ ],
+ },
+};
+
// All checkbox states including indeterminate
const STATES = [
{
diff --git a/superset-frontend/packages/superset-ui-core/src/components/DatePicker/DatePicker.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/DatePicker/DatePicker.stories.tsx
index 6043effffb5..1168ae69a9a 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/DatePicker/DatePicker.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/DatePicker/DatePicker.stories.tsx
@@ -80,11 +80,51 @@ export const InteractiveDatePicker: any = (args: DatePickerProps) => (
InteractiveDatePicker.args = {
...commonArgs,
placeholder: 'Placeholder',
- showToday: true,
+ showNow: true,
showTime: { format: 'hh:mm a', needConfirm: false },
};
-InteractiveDatePicker.argTypes = interactiveTypes;
+InteractiveDatePicker.argTypes = {
+ ...interactiveTypes,
+ showNow: {
+ description: 'Show "Now" button to select current date and time.',
+ control: 'boolean',
+ },
+};
+
+InteractiveDatePicker.parameters = {
+ actions: {
+ disable: true,
+ },
+ docs: {
+ description: {
+ story: 'A date picker component with time selection support.',
+ },
+ staticProps: {
+ allowClear: false,
+ autoFocus: true,
+ disabled: false,
+ format: 'YYYY-MM-DD hh:mm a',
+ inputReadOnly: false,
+ picker: 'date',
+ placement: 'bottomLeft',
+ size: 'middle',
+ showNow: true,
+ placeholder: 'Select date',
+ showTime: { format: 'hh:mm a', needConfirm: false },
+ },
+ liveExample: `function Demo() {
+ return (
+
+ {options.map(opt => (
+
+
+ setSelected(prev =>
+ prev.includes(opt) ? prev.filter(x => x !== opt) : [...prev, opt]
+ )}
+ >
+ {opt}
+
+
+ ))}
+ Horizontal divider with title (orientationMargin applies here):
+Vertical divider (use container gap for spacing):
+
+ Link
+
+
+ );
+}`,
},
};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.stories.tsx
index 7a92df392df..663436ba8fe 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.stories.tsx
@@ -27,6 +27,14 @@ import { DropdownContainer } from '.';
export default {
title: 'Design System/Components/DropdownContainer',
component: DropdownContainer,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'DropdownContainer arranges items horizontally and moves overflowing items into a dropdown popover. Resize the container to see the overflow behavior.',
+ },
+ },
+ },
};
const ITEMS_COUNT = 6;
@@ -108,3 +116,134 @@ export const Component = (props: DropdownContainerProps) => {
);
};
+
+// Interactive story for docs generation
+export const InteractiveDropdownContainer = (args: DropdownContainerProps) => {
+ const simpleItems = Array.from({ length: 6 }, (_, i) => ({
+ id: `item-${i}`,
+ element: (
+
+ Filter {i + 1}
+
+ ),
+ }));
+ return (
+
+
+ );
+};
+
+InteractiveDropdownContainer.args = {};
+
+InteractiveDropdownContainer.argTypes = {};
+
+InteractiveDropdownContainer.parameters = {
+ docs: {
+ staticProps: {
+ style: { maxWidth: 360 },
+ items: [
+ {
+ id: 'item-0',
+ element: {
+ component: 'Tag',
+ props: { children: 'Region', color: 'blue' },
+ },
+ },
+ {
+ id: 'item-1',
+ element: {
+ component: 'Tag',
+ props: { children: 'Category', color: 'blue' },
+ },
+ },
+ {
+ id: 'item-2',
+ element: {
+ component: 'Tag',
+ props: { children: 'Date Range', color: 'blue' },
+ },
+ },
+ {
+ id: 'item-3',
+ element: {
+ component: 'Tag',
+ props: { children: 'Status', color: 'blue' },
+ },
+ },
+ {
+ id: 'item-4',
+ element: {
+ component: 'Tag',
+ props: { children: 'Owner', color: 'blue' },
+ },
+ },
+ {
+ id: 'item-5',
+ element: {
+ component: 'Tag',
+ props: { children: 'Priority', color: 'blue' },
+ },
+ },
+ ],
+ },
+ liveExample: `function Demo() {
+ const items = Array.from({ length: 6 }, (_, i) => ({
+ id: 'item-' + i,
+ element: React.createElement('div', {
+ style: {
+ minWidth: 120,
+ padding: '4px 12px',
+ background: '#e6f4ff',
+ border: '1px solid #91caff',
+ borderRadius: 4,
+ },
+ }, 'Filter ' + (i + 1)),
+ }));
+ return (
+
+
+ );
+}`,
+ examples: [
+ {
+ title: 'With Select Filters',
+ code: `function SelectFilters() {
+ const items = ['Region', 'Category', 'Date Range', 'Status', 'Owner'].map(
+ (label, i) => ({
+ id: 'filter-' + i,
+ element: React.createElement('div', {
+ style: { minWidth: 150, padding: '4px 12px', background: '#f5f5f5', border: '1px solid #d9d9d9', borderRadius: 4 },
+ }, label + ': All'),
+ })
+ );
+ return (
+
+ Drag the right edge to resize and see items overflow into a dropdown
+
+
+
+ );
+}`,
+ },
+ ],
+ },
+};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/EditableTitle.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/EditableTitle.stories.tsx
index e778e71ed4e..bcadf53679d 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/EditableTitle.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/EditableTitle.stories.tsx
@@ -37,10 +37,71 @@ InteractiveEditableTitle.args = {
title: 'Title',
defaultTitle: 'Default title',
placeholder: 'Placeholder',
+ certifiedBy: '',
+ certificationDetails: '',
maxWidth: 100,
autoSize: true,
};
InteractiveEditableTitle.argTypes = {
+ canEdit: {
+ description: 'Whether the title can be edited.',
+ },
+ editing: {
+ description: 'Whether the title is currently in edit mode.',
+ },
+ emptyText: {
+ description: 'Text to display when title is empty.',
+ },
+ noPermitTooltip: {
+ description: 'Tooltip shown when user lacks edit permission.',
+ },
+ showTooltip: {
+ description: 'Whether to show tooltip on hover.',
+ },
+ title: {
+ description: 'The title text to display.',
+ },
+ defaultTitle: {
+ description: 'Default title when none is provided.',
+ },
+ placeholder: {
+ description: 'Placeholder text when editing.',
+ },
+ certifiedBy: {
+ description: 'Name of person/team who certified this item.',
+ },
+ certificationDetails: {
+ description: 'Additional certification details or description.',
+ },
+ maxWidth: {
+ description: 'Maximum width of the title in pixels.',
+ },
+ autoSize: {
+ description: 'Whether to auto-size based on content.',
+ },
onSaveTitle: { action: 'onSaveTitle' },
};
+
+InteractiveEditableTitle.parameters = {
+ actions: {
+ disable: true,
+ },
+ docs: {
+ description: {
+ story: 'An editable title component with optional certification badge.',
+ },
+ liveExample: `function Demo() {
+ return (
+ Item
+ {SAMPLE_ITEMS.map((item, i) => ( +
+ {item}
+
))}
+ {item}
+
+ ))}
+
+ {['flex-start', 'center', 'flex-end', 'space-between', 'space-around'].map(justify => (
+
+ );
+}`,
+ },
+ ],
+ },
+};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Grid/Grid.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Grid/Grid.stories.tsx
index 0a09f703ddb..e08ff73f6b0 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Grid/Grid.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Grid/Grid.stories.tsx
@@ -26,172 +26,6 @@ export default {
title: 'Design System/Components/Grid',
component: Row,
subcomponents: { Col },
- argTypes: {
- // Row properties
- align: {
- control: 'select',
- options: ['top', 'middle', 'bottom', 'stretch'],
- description: 'Vertical alignment of flex items.',
- defaultValue: 'top',
- table: {
- category: 'Row',
- type: { summary: 'string' },
- defaultValue: { summary: 'top' },
- },
- },
- justify: {
- control: 'select',
- options: [
- 'start',
- 'end',
- 'center',
- 'space-around',
- 'space-between',
- 'space-evenly',
- ],
- description: 'Horizontal arrangement of flex items.',
- defaultValue: undefined,
- table: {
- category: 'Row',
- type: { summary: 'string' },
- defaultValue: { summary: 'start' },
- },
- },
- gutter: {
- control: false,
- description: 'Spacing between grids (horizontal and vertical).',
- defaultValue: 0,
- table: {
- category: 'Row',
- type: { summary: 'number | object | array' },
- defaultValue: { summary: '0' },
- },
- },
- wrap: {
- control: 'boolean',
- description: 'Whether the flex container is allowed to wrap its items.',
- defaultValue: true,
- table: {
- category: 'Row',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'true' },
- },
- },
- // Col properties
- span: {
- control: 'number',
- description: 'Number of grid columns to span.',
- defaultValue: 24,
- table: {
- category: 'Col',
- type: { summary: 'number' },
- defaultValue: { summary: 24 },
- },
- },
- offset: {
- control: 'number',
- description: 'Number of grid columns to offset from the left.',
- defaultValue: 0,
- table: {
- category: 'Col',
- type: { summary: 'number' },
- defaultValue: { summary: 0 },
- },
- },
- order: {
- control: 'number',
- description: 'Flex order style of the grid column.',
- defaultValue: 0,
- table: {
- category: 'Col',
- type: { summary: 'number' },
- defaultValue: { summary: 0 },
- },
- },
- pull: {
- control: 'number',
- description: 'Number of grid columns to pull to the left.',
- defaultValue: 0,
- table: {
- category: 'Col',
- type: { summary: 'number' },
- defaultValue: { summary: 0 },
- },
- },
- push: {
- control: 'number',
- description: 'Number of grid columns to push to the right.',
- defaultValue: 0,
- table: {
- category: 'Col',
- type: { summary: 'number' },
- defaultValue: { summary: 0 },
- },
- },
- flex: {
- control: 'text',
- description: 'Flex layout style for the column.',
- table: {
- category: 'Col',
- type: { summary: 'string | number' },
- },
- },
- // Responsive properties (xs, sm, md, etc.)
- xs: {
- control: 'number',
- description:
- 'Settings for extra small screens (< 576px). Can be a number (span) or object.',
- table: {
- category: 'Col',
- type: { summary: 'number | object' },
- },
- },
- sm: {
- control: 'number',
- description:
- 'Settings for small screens (≥ 576px). Can be a number (span) or object.',
- table: {
- category: 'Col',
- type: { summary: 'number | object' },
- },
- },
- md: {
- control: 'number',
- description:
- 'Settings for medium screens (≥ 768px). Can be a number (span) or object.',
- table: {
- category: 'Col',
- type: { summary: 'number | object' },
- },
- },
- lg: {
- control: 'number',
- description:
- 'Settings for large screens (≥ 992px). Can be a number (span) or object.',
- table: {
- category: 'Col',
- type: { summary: 'number | object' },
- },
- },
- xl: {
- control: 'number',
- description:
- 'Settings for extra-large screens (≥ 1200px). Can be a number (span) or object.',
- table: {
- category: 'Col',
- type: { summary: 'number | object' },
- },
- },
- xxl: {
- control: 'number',
- description:
- 'Settings for extra-extra-large screens (≥ 1600px). Can be a number (span) or object.',
- table: {
- category: 'Col',
- type: { summary: 'number | object' },
- },
- },
- },
parameters: {
docs: {
description: {
@@ -204,6 +38,230 @@ export default {
type Story = StoryObj
+ {justify}
+
+
+
+
+
+
+ ))}
+
+
+ {cols}
+
+
+ );
+ },
+};
+
+InteractiveGrid.parameters = {
+ docs: {
+ renderComponent: 'Row',
+ sampleChildren: [
+ {
+ component: 'Col',
+ props: {
+ span: 4,
+ children: 'col-4',
+ style: {
+ background: '#e6f4ff',
+ padding: '8px',
+ border: '1px solid #91caff',
+ textAlign: 'center',
+ },
+ },
+ },
+ {
+ component: 'Col',
+ props: {
+ span: 4,
+ children: 'col-4 (tall)',
+ style: {
+ background: '#e6f4ff',
+ padding: '24px 8px',
+ border: '1px solid #91caff',
+ textAlign: 'center',
+ },
+ },
+ },
+ {
+ component: 'Col',
+ props: {
+ span: 4,
+ children: 'col-4',
+ style: {
+ background: '#e6f4ff',
+ padding: '8px',
+ border: '1px solid #91caff',
+ textAlign: 'center',
+ },
+ },
+ },
+ ],
+ description: {
+ story:
+ 'Grid layout system based on 24 columns with configurable gutters.',
+ },
+ liveExample: `function Demo() {
+ return (
+
+ Horizontal Gutter:
+
+
+ Vertical Gutter:
+
+
+ Column Count:
+
+ col-12
+
+ col-12
+
+ col-8
+
+ col-8
+
+ col-8
+
+
+ Responsive
+
+
+
+ Responsive
+
+
+
+ Responsive
+
+
+
+ Responsive
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}`,
+ },
+ ],
+ },
+};
+
+// Keep original for backwards compatibility
export const GridStory: Story = {
render: ({ align, justify, wrap, ...rest }: RowProps & ColProps) => {
const [gutter, setGutter] = useState(24);
diff --git a/superset-frontend/packages/superset-ui-core/src/components/IconButton/IconButton.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/IconButton/IconButton.stories.tsx
index acf1085b3e3..d667a28c929 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/IconButton/IconButton.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/IconButton/IconButton.stories.tsx
@@ -22,38 +22,6 @@ import { IconButton } from '.';
export default {
title: 'Components/IconButton',
component: IconButton,
- argTypes: {
- altText: {
- control: 'text',
- description:
- 'The alt text for the button. If not provided, the button text is used as the alt text by default.',
- table: {
- type: { summary: 'string' },
- },
- },
- buttonText: {
- control: 'text',
- description: 'The text inside the button',
- table: {
- type: { summary: 'string' },
- },
- },
- icon: {
- control: false,
- description: 'Icon inside the button',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: 'string' },
- },
- },
- padded: {
- control: 'boolean',
- description: 'add padding between icon and button text',
- table: {
- type: { summary: 'boolean' },
- },
- },
- },
parameters: {
docs: {
description: {
@@ -69,6 +37,63 @@ export default {
type Story = StoryObjstart
+ start
+ center
+ center
+ end
+ end
+ between
+ between
+
+
+ );
+}`,
+ examples: [
+ {
+ title: 'Icon Sizes',
+ code: `function IconSizes() {
+ const sizes = ['s', 'm', 'l', 'xl', 'xxl'];
+ return (
+
+ {sizes.map(size => (
+
+ );
+}`,
+ },
+ {
+ title: 'Icon Gallery',
+ code: `function IconGallery() {
+ const Section = ({ title, children }) => (
+
+
+ ))}
+ {size}
+
+
+ );
+ return (
+ {title}
+ {children}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}`,
+ },
+ {
+ title: 'Icon with Text',
+ code: `function IconWithText() {
+ return (
+
+
+ );
+}`,
+ },
+ ],
+ },
+};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Input/Input.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Input/Input.stories.tsx
index 0d0ce36eb92..e452dc90e9d 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Input/Input.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Input/Input.stories.tsx
@@ -16,17 +16,15 @@
* specific language governing permissions and limitations
* under the License.
*/
-import type { Meta, StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react';
import { Input, InputNumber } from '.';
import type { InputProps, InputNumberProps, TextAreaProps } from './types';
-const meta: Meta
+
+
+
+
+
+
+
+ Sidebar
+ Right Sidebar
+
+ {['normal', 'floating', 'inline'].map(position => (
+
+ );
+}`,
+ examples: [
+ {
+ title: 'Size and Opacity Showcase',
+ code: `function SizeShowcase() {
+ const sizes = ['s', 'm', 'l'];
+ return (
+
+
+ ))}
+ {position}
+
+
+ );
+}`,
+ },
+ {
+ title: 'Contextual Examples',
+ code: `function ContextualDemo() {
+ return (
+
+
+
+ ))}
+
+ Size
+ Normal
+ Muted
+ Usage
+ {sizes.map(size => (
+
+ {size.toUpperCase()} ({size === 's' ? '40px' : size === 'm' ? '70px' : '100px'})
+
+
+
+
+
+
+ {size === 's' && 'Filter bars, inline'}
+ {size === 'm' && 'Explore pages'}
+ {size === 'l' && 'Full page loading'}
+
+
+
+ );
+}`,
+ },
+ ],
},
};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Menu/Menu.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Menu/Menu.stories.tsx
index b7bf895a2f4..2789edf4dd7 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Menu/Menu.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Menu/Menu.stories.tsx
@@ -21,6 +21,14 @@ import { Menu, MainNav } from '.';
export default {
title: 'Components/Menu',
component: Menu as React.FC,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'Navigation menu component supporting horizontal, vertical, and inline modes. Based on Ant Design Menu with Superset styling.',
+ },
+ },
+ },
};
export const MainNavigation = (args: any) => (
@@ -47,18 +55,97 @@ export const InteractiveMenu = (args: any) => (
);
InteractiveMenu.args = {
- defaultSelectedKeys: ['1'],
- inlineCollapsed: false,
mode: 'horizontal',
- multiple: false,
selectable: true,
};
InteractiveMenu.argTypes = {
mode: {
- control: {
- type: 'select',
- },
+ control: 'select',
options: ['horizontal', 'vertical', 'inline'],
+ description:
+ 'Menu display mode: horizontal navbar, vertical sidebar, or inline collapsible.',
+ },
+ selectable: {
+ control: 'boolean',
+ description: 'Whether menu items can be selected.',
+ },
+ multiple: {
+ control: 'boolean',
+ description: 'Allow multiple items to be selected.',
+ },
+ inlineCollapsed: {
+ control: 'boolean',
+ description:
+ 'Whether the inline menu is collapsed (only applies to inline mode).',
+ },
+};
+
+InteractiveMenu.parameters = {
+ docs: {
+ staticProps: {
+ items: [
+ { label: 'Dashboards', key: 'dashboards' },
+ { label: 'Charts', key: 'charts' },
+ { label: 'Datasets', key: 'datasets' },
+ { label: 'SQL Lab', key: 'sqllab' },
+ ],
+ },
+ liveExample: `function Demo() {
+ return (
+
+ );
+}`,
+ examples: [
+ {
+ title: 'Vertical Menu',
+ code: `function VerticalMenu() {
+ return (
+
+ );
+}`,
+ },
+ {
+ title: 'Menu with Icons',
+ code: `function MenuWithIcons() {
+ return (
+ Filter Bar (size="s", muted)
+
+ Filter 1:
+
+
+ Dashboard Grid (size="s", muted)
+
+ {[1, 2, 3].map(i => (
+
+
+
+
+ ))}
+ Main Loading (size="l")
+
+
+