docs(components): federate Storybook stories into Developer Portal MDX (#37502)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

docs/src/theme/Playground/Preview/index.tsx

@@ -0,0 +1,107 @@
+/**
+ * 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.
+ */
+
+import React, { type ReactNode } from 'react';
+import { LiveError, LivePreview } from 'react-live';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import { ErrorBoundaryErrorMessageFallback } from '@docusaurus/theme-common';
+import ErrorBoundary from '@docusaurus/ErrorBoundary';
+import Translate from '@docusaurus/Translate';
+import PlaygroundHeader from '@theme/Playground/Header';
+
+import styles from './styles.module.css';
+
+// Get the theme wrapper for Superset components
+function getThemeWrapper() {
+  if (typeof window === 'undefined') {
+    return ({ children }: { children: React.ReactNode }) => <>{children}</>;
+  }
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { themeObject } = require('@apache-superset/core/ui');
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { App } = require('antd');
+
+    if (!themeObject?.SupersetThemeProvider) {
+      return ({ children }: { children: React.ReactNode }) => <>{children}</>;
+    }
+
+    return ({ children }: { children: React.ReactNode }) => (
+      <themeObject.SupersetThemeProvider>
+        <App>{children}</App>
+      </themeObject.SupersetThemeProvider>
+    );
+  } catch (e) {
+    console.error('[PlaygroundPreview] Failed to load theme provider:', e);
+    return ({ children }: { children: React.ReactNode }) => <>{children}</>;
+  }
+}
+
+function Loader() {
+  return <div>Loading...</div>;
+}
+
+function ThemedLivePreview(): ReactNode {
+  const ThemeWrapper = getThemeWrapper();
+  return (
+    <ThemeWrapper>
+      <LivePreview />
+    </ThemeWrapper>
+  );
+}
+
+function PlaygroundLivePreview(): ReactNode {
+  // No SSR for the live preview
+  // See https://github.com/facebook/docusaurus/issues/5747
+  return (
+    <BrowserOnly fallback={<Loader />}>
+      {() => (
+        <>
+          <ErrorBoundary
+            fallback={(params) => (
+              <ErrorBoundaryErrorMessageFallback {...params} />
+            )}
+          >
+            <ThemedLivePreview />
+          </ErrorBoundary>
+          <LiveError />
+        </>
+      )}
+    </BrowserOnly>
+  );
+}
+
+export default function PlaygroundPreview(): ReactNode {
+  return (
+    <>
+      <PlaygroundHeader>
+        <Translate
+          id="theme.Playground.result"
+          description="The result label of the live codeblocks"
+        >
+          Result
+        </Translate>
+      </PlaygroundHeader>
+      <div className={styles.playgroundPreview}>
+        <PlaygroundLivePreview />
+      </div>
+    </>
+  );
+}

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);
+}

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.:
+ *   <Button>Click me</Button>
+ *   <Avatar size="large" />
+ *   <Badge count={5} />
  */
-const ReactLiveScope = {
+
+// Base scope with React (always available)
+const ReactLiveScope: Record<string, unknown> = {
   // React core
   React,
   ...React,
-
-  // Extension components from @apache-superset/core
-  Alert,
-
-  // Common Ant Design components (for demos)
-  Button,
-  Card,
-  Input,
-  Space,
-  Tag,
-  Tooltip,
 };
 
+// Only load Superset components in browser context
+// This prevents SSG errors from Emotion CSS-in-JS
+if (isBrowser) {
+  try {
+    // Dynamic require for browser-only execution
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const SupersetComponents = require('@superset/components');
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { Alert } = require('@apache-superset/core/ui');
+
+    console.log('[ReactLiveScope] SupersetComponents keys:', Object.keys(SupersetComponents || {}).slice(0, 10));
+    console.log('[ReactLiveScope] Has Button?', 'Button' in (SupersetComponents || {}));
+
+    Object.assign(ReactLiveScope, SupersetComponents, { Alert });
+
+    console.log('[ReactLiveScope] Final scope keys:', Object.keys(ReactLiveScope).slice(0, 20));
+  } catch (e) {
+    console.error('[ReactLiveScope] Failed to load Superset components:', e);
+  }
+}
+
 export default ReactLiveScope;