----
-
-## 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\`:
@@ -1332,6 +1335,147 @@ ${sections}
`;
}
+/**
+ * Build metadata for a component (for JSON output)
+ */
+function buildComponentMetadata(component, storyContent) {
+ const { componentName, description, category, sourceConfig, resolvedImportPath, extensionCompatible } = component;
+ const { args, controls, gallery, liveExample } = extractArgsAndControls(storyContent, componentName);
+ const labels = CATEGORY_LABELS[category] || {
+ title: category.charAt(0).toUpperCase() + category.slice(1).replace(/-/g, ' '),
+ };
+
+ return {
+ name: componentName,
+ category,
+ categoryLabel: labels.title || category,
+ description: description || '',
+ importPath: resolvedImportPath || sourceConfig.importPrefix,
+ package: sourceConfig.docImportPrefix,
+ extensionCompatible: Boolean(extensionCompatible),
+ propsCount: Object.keys(args).length,
+ controlsCount: controls.length,
+ hasGallery: Boolean(gallery && gallery.sizes && gallery.styles),
+ hasLiveExample: Boolean(liveExample),
+ docPath: `developer-docs/components/${category}/${componentName.toLowerCase()}`,
+ storyFile: component.relativePath,
+ };
+}
+
+/**
+ * Extract type and component export declarations from a component source file.
+ * Used to generate .d.ts type declarations for extension-compatible components.
+ */
+function extractComponentTypes(componentPath) {
+ if (!fs.existsSync(componentPath)) return null;
+ const content = fs.readFileSync(componentPath, 'utf-8');
+
+ const types = [];
+ // Match "export type Name =
+ {/* Statistics Cards */}
{/* Statistics Cards */}
= {
+ ui: 'blue',
+ 'design-system': 'green',
+ extension: 'purple',
+};
+
+const CATEGORY_LABELS: Record = {
+ ui: 'Core',
+ 'design-system': 'Layout',
+ extension: 'Extension',
+};
+
+const ComponentIndex: React.FC = ({ data }) => {
+ const [searchText, setSearchText] = useState('');
+ const [categoryFilter, setCategoryFilter] = useState(null);
+
+ const { statistics, components } = data;
+
+ const filteredComponents = useMemo(() => {
+ return components
+ .filter((comp) => {
+ const matchesSearch =
+ !searchText ||
+ comp.name.toLowerCase().includes(searchText.toLowerCase()) ||
+ comp.description.toLowerCase().includes(searchText.toLowerCase()) ||
+ comp.package.toLowerCase().includes(searchText.toLowerCase());
+ const matchesCategory =
+ !categoryFilter || comp.category === categoryFilter;
+ return matchesSearch && matchesCategory;
+ })
+ .sort((a, b) => a.name.localeCompare(b.name));
+ }, [components, searchText, categoryFilter]);
+
+ const { categories, categoryCounts } = useMemo(() => {
+ const counts: Record = {};
+ components.forEach((comp) => {
+ counts[comp.category] = (counts[comp.category] || 0) + 1;
+ });
+ return {
+ categories: Object.keys(counts).sort(),
+ categoryCounts: counts,
+ };
+ }, [components]);
+
+ const columns = [
+ {
+ title: 'Component',
+ dataIndex: 'name',
+ key: 'name',
+ sorter: (a: ComponentEntry, b: ComponentEntry) =>
+ a.name.localeCompare(b.name),
+ defaultSortOrder: 'ascend' as const,
+ render: (name: string, record: ComponentEntry) => (
+
+ {CATEGORY_LABELS[cat] || cat}
+
+ ),
+ },
+ {
+ title: 'Package',
+ dataIndex: 'package',
+ key: 'package',
+ width: 220,
+ render: (pkg: string) => (
+
+
+ {name}
+
+ {record.description && (
+
+ ),
+ },
+ {
+ title: 'Category',
+ dataIndex: 'category',
+ key: 'category',
+ width: 120,
+ filters: categories.map((cat) => ({
+ text: CATEGORY_LABELS[cat] || cat,
+ value: cat,
+ })),
+ onFilter: (value: React.Key | boolean, record: ComponentEntry) =>
+ record.category === value,
+ render: (cat: string) => (
+
+ {record.description.slice(0, 100)}
+ {record.description.length > 100 ? '...' : ''}
+
+ )}
+ {pkg}
+ ),
+ },
+ {
+ title: 'Tags',
+ key: 'tags',
+ width: 280,
+ filters: [
+ { text: 'Extension Compatible', value: 'extension' },
+ { text: 'Gallery', value: 'gallery' },
+ { text: 'Live Demo', value: 'demo' },
+ ],
+ onFilter: (value: React.Key | boolean, record: ComponentEntry) => {
+ switch (value) {
+ case 'extension':
+ return record.extensionCompatible;
+ case 'gallery':
+ return record.hasGallery;
+ case 'demo':
+ return record.hasLiveExample;
+ default:
+ return true;
+ }
+ },
+ render: (_: unknown, record: ComponentEntry) => (
+
+ {record.extensionCompatible && (
+ Extension Compatible
+ )}
+ {record.hasGallery && Gallery }
+ {record.hasLiveExample && Demo }
+
+ ),
+ },
+ {
+ title: 'Props',
+ dataIndex: 'propsCount',
+ key: 'propsCount',
+ width: 80,
+ sorter: (a: ComponentEntry, b: ComponentEntry) =>
+ a.propsCount - b.propsCount,
+ render: (count: number) => (
+ 0 ? '#1890ff' : '#999' }}>{count}
+ ),
+ },
+ ];
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `${total} components`,
+ }}
+ size="middle"
+ />
+
+ );
+};
+
+export default ComponentIndex;
diff --git a/docs/babel.config.js b/docs/src/components/ui-components/index.ts
similarity index 75%
rename from docs/babel.config.js
rename to docs/src/components/ui-components/index.ts
index 61032e678a4..2081775d7dc 100644
--- a/docs/babel.config.js
+++ b/docs/src/components/ui-components/index.ts
@@ -1,4 +1,3 @@
-/* eslint-env node */
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
@@ -18,15 +17,5 @@
* under the License.
*/
-module.exports = {
- presets: [
- [
- require.resolve('@docusaurus/core/lib/babel/preset'),
- {
- runtime: 'automatic',
- importSource: '@emotion/react',
- },
- ],
- ],
- plugins: ['@emotion/babel-plugin'],
-};
+export { default as ComponentIndex } from './ComponentIndex';
+export * from './types';
diff --git a/docs/src/components/ui-components/types.ts b/docs/src/components/ui-components/types.ts
new file mode 100644
index 00000000000..f4fb082b065
--- /dev/null
+++ b/docs/src/components/ui-components/types.ts
@@ -0,0 +1,48 @@
+/**
+ * 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.
+ */
+
+export interface ComponentEntry {
+ name: string;
+ category: string;
+ categoryLabel: string;
+ description: string;
+ importPath: string;
+ package: string;
+ extensionCompatible: boolean;
+ propsCount: number;
+ controlsCount: number;
+ hasGallery: boolean;
+ hasLiveExample: boolean;
+ docPath: string;
+ storyFile: string;
+}
+
+export interface ComponentStatistics {
+ totalComponents: number;
+ byCategory: Record