fix(stories): avoid 'Show undefined' when expandableWhat is omitted

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
fix(stories): address bot review findings
2026-05-13 11:55:16 +00:00 · 2026-04-20 08:51:53 -07:00 · 2026-04-20 08:51:11 -07:00 · 2026-04-20 08:50:55 -07:00 · 2026-04-20 08:50:55 -07:00 · 2026-04-20 08:50:35 -07:00
43 changed files with 378 additions and 308 deletions
--- a/superset-frontend/.storybook/shared/Expandable.tsx
+++ b/superset-frontend/.storybook/shared/Expandable.tsx
@@ -17,45 +17,38 @@
 * under the License.
 */

-import { Component, ReactNode } from 'react';
+import { useState, useCallback, ReactNode } from 'react';

 export type Props = {
  children: ReactNode;
  expandableWhat?: string;
 };

-type State = {
-  open: boolean;
-};
+export default function Expandable({ children, expandableWhat }: Props) {
+  const [open, setOpen] = useState(false);

-export default class Expandable extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { open: false };
-    this.handleToggle = this.handleToggle.bind(this);
-  }
+  const handleToggle = useCallback(() => {
+    setOpen(prevOpen => !prevOpen);
+  }, []);

-  handleToggle() {
-    this.setState(({ open }) => ({ open: !open }));
-  }
+  const label = expandableWhat
+    ? `${open ? 'Hide' : 'Show'} ${expandableWhat}`
+    : open
+      ? 'Hide'
+      : 'Show';

-  render() {
-    const { open } = this.state;
-    const { children, expandableWhat } = this.props;
-
-    return (
-      <div>
-        <button
-          type="button"
-          className="btn btn-primary btn-sm"
-          onClick={this.handleToggle}
-        >
-          {`${open ? 'Hide' : 'Show'} ${expandableWhat}`}
-        </button>
-        <br />
-        <br />
-        {open ? children : null}
-      </div>
-    );
-  }
+  return (
+    <div>
+      <button
+        type="button"
+        className="btn btn-primary btn-sm"
+        onClick={handleToggle}
+      >
+        {label}
+      </button>
+      <br />
+      <br />
+      {open ? children : null}
+    </div>
+  );
 }
--- a/superset-frontend/.storybook/shared/VerifyCORS.tsx
+++ b/superset-frontend/.storybook/shared/VerifyCORS.tsx
@@ -17,7 +17,7 @@
 * under the License.
 */

-import { Component, ReactNode } from 'react';
+import { useState, useEffect, useCallback, useRef, ReactNode } from 'react';
 import { t } from '@apache-superset/core/translation';
 import {
  SupersetClient,
@@ -36,12 +36,6 @@ export type Props = {
  postPayload?: string;
 };

-type State = {
-  didVerify: boolean;
-  error?: Error | SupersetApiError;
-  payload?: object;
-};
-
 export const renderError = (error: Error) => (
  <div>
    The following error occurred, make sure you have <br />
@@ -54,29 +48,37 @@ export const renderError = (error: Error) => (
  </div>
 );

-export default class VerifyCORS extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { didVerify: false };
-    this.handleVerify = this.handleVerify.bind(this);
-  }
+export default function VerifyCORS({
+  children,
+  endpoint,
+  host,
+  method,
+  postPayload,
+}: Props): JSX.Element {
+  const [didVerify, setDidVerify] = useState(false);
+  const [error, setError] = useState<Error | SupersetApiError | undefined>(
+    undefined,
+  );
+  const [payload, setPayload] = useState<object | undefined>(undefined);

-  componentDidUpdate(prevProps: Props) {
-    const { endpoint, host, postPayload, method } = this.props;
+  const prevPropsRef = useRef({ endpoint, host, postPayload, method });
+
+  useEffect(() => {
+    const prevProps = prevPropsRef.current;
    if (
-      (this.state.didVerify || this.state.error) &&
+      (didVerify || error) &&
      (prevProps.endpoint !== endpoint ||
        prevProps.host !== host ||
        prevProps.postPayload !== postPayload ||
        prevProps.method !== method)
    ) {
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({ didVerify: false, error: undefined });
+      setDidVerify(false);
+      setError(undefined);
    }
-  }
+    prevPropsRef.current = { endpoint, host, postPayload, method };
+  }, [endpoint, host, postPayload, method, didVerify, error]);

-  handleVerify() {
-    const { endpoint, host, postPayload, method } = this.props;
+  const handleVerify = useCallback(() => {
    SupersetClient.reset();
    SupersetClient.configure({
      credentials: 'include',
@@ -94,43 +96,40 @@ export default class VerifyCORS extends Component<Props, State> {
        }
        return { error: 'Must provide valid endpoint and payload.' };
      })
-      .then(result =>
-        this.setState({ didVerify: true, error: undefined, payload: result }),
-      )
-      .catch(error => this.setState({ error }));
-  }
+      .then(result => {
+        setDidVerify(true);
+        setError(undefined);
+        setPayload(result);
+      })
+      .catch(err => setError(err));
+  }, [endpoint, host, method, postPayload]);

-  render() {
-    const { didVerify, error, payload } = this.state;
-    const { children } = this.props;
-
-    return didVerify ? (
-      children({ payload })
-    ) : (
-      <div className="row">
-        <div className="col-md-10">
-          This example requires CORS requests from this domain. <br />
-          <br />
-          1) enable CORS requests in your Superset App from{' '}
-          {`${window.location.origin}`}
-          <br />
-          2) configure your Superset App host name below <br />
-          3) click below to verify authentication. You may debug CORS further
-          using the `@superset-ui/connection` story. <br />
-          <br />
-          <Button type="primary" size="small" onClick={this.handleVerify}>
-            {t('Verify')}
-          </Button>
-          <br />
-          <br />
-        </div>
-
-        {error && (
-          <div className="col-md-8">
-            <ErrorMessage error={error} />
-          </div>
-        )}
+  return didVerify ? (
+    <>{children({ payload })}</>
+  ) : (
+    <div className="row">
+      <div className="col-md-10">
+        This example requires CORS requests from this domain. <br />
+        <br />
+        1) enable CORS requests in your Superset App from{' '}
+        {`${window.location.origin}`}
+        <br />
+        2) configure your Superset App host name below <br />
+        3) click below to verify authentication. You may debug CORS further
+        using the `@superset-ui/connection` story. <br />
+        <br />
+        <Button type="primary" size="small" onClick={handleVerify}>
+          {t('Verify')}
+        </Button>
+        <br />
+        <br />
      </div>
-    );
-  }
+
+      {error && (
+        <div className="col-md-8">
+          <ErrorMessage error={error} />
+        </div>
+      )}
+    </div>
+  );
 }
--- a/superset-frontend/.storybook/shared/createQueryStory.tsx
+++ b/superset-frontend/.storybook/shared/createQueryStory.tsx
@@ -22,6 +22,7 @@ import {
  ChartDataProvider,
  SupersetClient,
 } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import Expandable from './Expandable';
 import VerifyCORS, { renderError } from './VerifyCORS';

@@ -64,6 +65,7 @@ export default function createQueryStory({
                  return (
                    <>
                      <SuperChart
+                        theme={supersetTheme}
                        chartType={chartType}
                        width={width}
                        height={height}
--- a/superset-frontend/packages/superset-ui-core/src/chart/stories/ChartDataProvider.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/chart/stories/ChartDataProvider.stories.tsx
@@ -22,6 +22,7 @@ import {
  ChartDataProvider,
  SupersetClient,
 } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import { BigNumberChartPlugin } from '@superset-ui/plugin-chart-echarts';
 import { WordCloudChartPlugin } from '@superset-ui/plugin-chart-word-cloud';

@@ -88,6 +89,7 @@ export const dataProvider = ({
              return (
                <>
                  <SuperChart
+                    theme={supersetTheme}
                    chartType={visType}
                    formData={payload.formData}
                    height={Number(height)}
--- a/superset-frontend/packages/superset-ui-core/src/chart/stories/SuperChart.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/chart/stories/SuperChart.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import {
  DiligentChartPlugin,
  BuggyChartPlugin,
@@ -37,6 +38,7 @@ export default {

 export const basic = ({ width, height }: { width: string; height: string }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={ChartKeys.DILIGENT}
    width={width}
    height={height}
@@ -61,6 +63,7 @@ export const container50pct = ({
  height: string;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={ChartKeys.DILIGENT}
    width={width}
    height={height}
@@ -83,6 +86,7 @@ export const Resizable = () => (
  <ResizableChartDemo>
    {size => (
      <SuperChart
+        theme={supersetTheme}
        chartType={ChartKeys.DILIGENT}
        width={size.width}
        height={size.height}
@@ -100,6 +104,7 @@ export const fixedWidth100height = ({
  height: string;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={ChartKeys.DILIGENT}
    height={height}
    width={width}
@@ -125,6 +130,7 @@ export const fixedHeight100Width = ({
  height: string;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={ChartKeys.DILIGENT}
    height={height}
    width={width}
@@ -149,6 +155,7 @@ export const withErrorBoundary = ({
  height: string;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={ChartKeys.BUGGY}
    height={height}
    width={width}
@@ -173,6 +180,7 @@ export const withWrapper = ({
  height: string;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={ChartKeys.DILIGENT}
    width={width}
    height={height}
@@ -202,7 +210,12 @@ export const withNoResults = ({
  width: string;
  height: string;
 }) => (
-  <SuperChart chartType={ChartKeys.DILIGENT} width={width} height={height} />
+  <SuperChart
+    theme={supersetTheme}
+    chartType={ChartKeys.DILIGENT}
+    width={width}
+    height={height}
+  />
 );
 withNoResults.storyName = 'With no results';
 withNoResults.args = {
@@ -221,7 +234,12 @@ export const withNoResultsAndMedium = ({
  width: string;
  height: string;
 }) => (
-  <SuperChart chartType={ChartKeys.DILIGENT} width={width} height={height} />
+  <SuperChart
+    theme={supersetTheme}
+    chartType={ChartKeys.DILIGENT}
+    width={width}
+    height={height}
+  />
 );

 withNoResultsAndMedium.storyName = 'With no results and medium';
@@ -241,7 +259,12 @@ export const withNoResultsAndSmall = ({
  width: string;
  height: string;
 }) => (
-  <SuperChart chartType={ChartKeys.DILIGENT} width={width} height={height} />
+  <SuperChart
+    theme={supersetTheme}
+    chartType={ChartKeys.DILIGENT}
+    width={width}
+    height={height}
+  />
 );
 withNoResultsAndSmall.storyName = 'With no results and small';
 withNoResultsAndSmall.args = {
--- a/superset-frontend/packages/superset-ui-core/src/number-format/stories/NumberFormat.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/number-format/stories/NumberFormat.stories.tsx
@@ -17,126 +17,108 @@
 * under the License.
 */

-import { PureComponent } from 'react';
+import { useState, useCallback } from 'react';
 import { formatNumber } from '@superset-ui/core';

-interface NumberFormatValidatorState {
-  formatString: string;
-  testValues: (number | null | undefined)[];
-}
+const testValues: (number | null | undefined)[] = [
+  987654321,
+  12345.6789,
+  3000,
+  400.14,
+  70.00002,
+  1,
+  0,
+  -1,
+  -70.00002,
+  -400.14,
+  -3000,
+  -12345.6789,
+  -987654321,
+  Number.POSITIVE_INFINITY,
+  Number.NEGATIVE_INFINITY,
+  NaN,
+  null,
+  undefined,
+];

-class NumberFormatValidator extends PureComponent<
-  Record<string, never>,
-  NumberFormatValidatorState
-> {
-  state: NumberFormatValidatorState = {
-    formatString: '.3~s',
-    testValues: [
-      987654321,
-      12345.6789,
-      3000,
-      400.14,
-      70.00002,
-      1,
-      0,
-      -1,
-      -70.00002,
-      -400.14,
-      -3000,
-      -12345.6789,
-      -987654321,
-      Number.POSITIVE_INFINITY,
-      Number.NEGATIVE_INFINITY,
-      NaN,
-      null,
-      undefined,
-    ],
-  };
+function NumberFormatValidator() {
+  const [formatString, setFormatString] = useState('.3~s');

-  constructor(props: Record<string, never>) {
-    super(props);
+  const handleFormatChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setFormatString(event.target.value);
+    },
+    [],
+  );

-    this.handleFormatChange = this.handleFormatChange.bind(this);
-  }
-
-  handleFormatChange(event: React.ChangeEvent<HTMLInputElement>) {
-    this.setState({
-      formatString: event.target.value,
-    });
-  }
-
-  render() {
-    const { formatString, testValues } = this.state;
-
-    return (
-      <div className="container">
-        <div className="row" style={{ margin: '40px 20px 0 20px' }}>
-          <div className="col-sm">
-            <p>
-              This <code>@superset-ui/number-format</code> package enriches{' '}
-              <code>d3-format</code>
-              to handle invalid formats as well as edge case values. Use the
-              validator below to preview outputs from the specified format
-              string. See
-              <a
-                href="https://github.com/d3/d3-format#locale_format"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                D3 Format Reference
-              </a>
-              for how to write a D3 format string.
-            </p>
-          </div>
-        </div>
-        <div className="row" style={{ margin: '10px 0 30px 0' }}>
-          <div className="col-sm" />
-          <div className="col-sm-8">
-            <div className="form">
-              <div className="form-group">
-                {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-                <label>
-                  Enter D3 format string:
-                  <input
-                    id="formatString"
-                    className="form-control form-control-lg"
-                    type="text"
-                    value={formatString}
-                    onChange={this.handleFormatChange}
-                  />
-                </label>
-              </div>
-            </div>
-          </div>
-          <div className="col-sm" />
-        </div>
-        <div className="row">
-          <div className="col-sm">
-            <table className="table table-striped table-sm">
-              <thead>
-                <tr>
-                  <th>Input (number)</th>
-                  <th>Formatted output (string)</th>
-                </tr>
-              </thead>
-              <tbody>
-                {testValues.map((v, index) => (
-                  <tr key={index}>
-                    <td>
-                      <code>{`${v}`}</code>
-                    </td>
-                    <td>
-                      <code>&quot;{formatNumber(formatString, v)}&quot;</code>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
+  return (
+    <div className="container">
+      <div className="row" style={{ margin: '40px 20px 0 20px' }}>
+        <div className="col-sm">
+          <p>
+            This <code>@superset-ui/number-format</code> package enriches{' '}
+            <code>d3-format</code>
+            to handle invalid formats as well as edge case values. Use the
+            validator below to preview outputs from the specified format string.
+            See
+            <a
+              href="https://github.com/d3/d3-format#locale_format"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              D3 Format Reference
+            </a>
+            for how to write a D3 format string.
+          </p>
        </div>
      </div>
-    );
-  }
+      <div className="row" style={{ margin: '10px 0 30px 0' }}>
+        <div className="col-sm" />
+        <div className="col-sm-8">
+          <div className="form">
+            <div className="form-group">
+              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+              <label>
+                Enter D3 format string:
+                <input
+                  id="formatString"
+                  className="form-control form-control-lg"
+                  type="text"
+                  value={formatString}
+                  onChange={handleFormatChange}
+                />
+              </label>
+            </div>
+          </div>
+        </div>
+        <div className="col-sm" />
+      </div>
+      <div className="row">
+        <div className="col-sm">
+          <table className="table table-striped table-sm">
+            <thead>
+              <tr>
+                <th>Input (number)</th>
+                <th>Formatted output (string)</th>
+              </tr>
+            </thead>
+            <tbody>
+              {testValues.map((v, index) => (
+                <tr key={index}>
+                  <td>
+                    <code>{`${v}`}</code>
+                  </td>
+                  <td>
+                    <code>&quot;{formatNumber(formatString, v)}&quot;</code>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
 }

 export default {
--- a/superset-frontend/packages/superset-ui-core/src/time-format/stories/TimeFormat.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/time-format/stories/TimeFormat.stories.tsx
@@ -17,115 +17,96 @@
 * under the License.
 */

-import { PureComponent } from 'react';
+import { useState, useCallback } from 'react';
 import { formatTime } from '@superset-ui/core';

-interface TimeFormatValidatorState {
-  formatString: string;
-  testValues: (Date | number | null | undefined)[];
-}
+const testValues: (Date | number | null | undefined)[] = [
+  new Date(Date.UTC(1986, 5, 14, 8, 30, 53)),
+  new Date(Date.UTC(2001, 9, 27, 13, 45, 2, 678)),
+  new Date(Date.UTC(2009, 1, 1, 0, 0, 0)),
+  new Date(Date.UTC(2018, 1, 1, 10, 20, 33)),
+  0,
+  null,
+  undefined,
+];

-class TimeFormatValidator extends PureComponent<
-  Record<string, never>,
-  TimeFormatValidatorState
-> {
-  state: TimeFormatValidatorState = {
-    formatString: '%Y-%m-%d %H:%M:%S',
-    testValues: [
-      new Date(Date.UTC(1986, 5, 14, 8, 30, 53)),
-      new Date(Date.UTC(2001, 9, 27, 13, 45, 2, 678)),
-      new Date(Date.UTC(2009, 1, 1, 0, 0, 0)),
-      new Date(Date.UTC(2018, 1, 1, 10, 20, 33)),
-      0,
-      null,
-      undefined,
-    ],
-  };
+function TimeFormatValidator() {
+  const [formatString, setFormatString] = useState('%Y-%m-%d %H:%M:%S');

-  constructor(props: Record<string, never>) {
-    super(props);
-    this.handleFormatChange = this.handleFormatChange.bind(this);
-  }
+  const handleFormatChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setFormatString(event.target.value);
+    },
+    [],
+  );

-  handleFormatChange(event: React.ChangeEvent<HTMLInputElement>) {
-    this.setState({
-      formatString: event.target.value,
-    });
-  }
-
-  render() {
-    const { formatString, testValues } = this.state;
-
-    return (
-      <div className="container">
-        <div className="row" style={{ margin: '40px 20px 0 20px' }}>
-          <div className="col-sm">
-            <p>
-              This <code>@superset-ui/time-format</code> package enriches
-              <code>d3-time-format</code> to handle invalid formats as well as
-              edge case values. Use the validator below to preview outputs from
-              the specified format string. See &nbsp;
-              <a
-                href="https://github.com/d3/d3-time-format#locale_format"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                D3 Time Format Reference
-              </a>
-              &nbsp;for how to write a D3 time format string.
-            </p>
-          </div>
-        </div>
-        <div className="row" style={{ margin: '10px 0 30px 0' }}>
-          <div className="col-sm" />
-          <div className="col-sm-8">
-            <div className="form">
-              <div className="form-group">
-                {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-                <label>
-                  Enter D3 time format string:
-                  <input
-                    id="formatString"
-                    className="form-control form-control-lg"
-                    type="text"
-                    value={formatString}
-                    onChange={this.handleFormatChange}
-                  />
-                </label>
-              </div>
-            </div>
-          </div>
-          <div className="col-sm" />
-        </div>
-        <div className="row">
-          <div className="col-sm">
-            <table className="table table-striped table-sm">
-              <thead>
-                <tr>
-                  <th>Input (time)</th>
-                  <th>Formatted output (string)</th>
-                </tr>
-              </thead>
-              <tbody>
-                {testValues.map((v, index) => (
-                  <tr key={index}>
-                    <td>
-                      <code>
-                        {v instanceof Date ? v.toUTCString() : `${v}`}
-                      </code>
-                    </td>
-                    <td>
-                      <code>&quot;{formatTime(formatString, v)}&quot;</code>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
+  return (
+    <div className="container">
+      <div className="row" style={{ margin: '40px 20px 0 20px' }}>
+        <div className="col-sm">
+          <p>
+            This <code>@superset-ui/time-format</code> package enriches
+            <code>d3-time-format</code> to handle invalid formats as well as
+            edge case values. Use the validator below to preview outputs from
+            the specified format string. See &nbsp;
+            <a
+              href="https://github.com/d3/d3-time-format#locale_format"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              D3 Time Format Reference
+            </a>
+            &nbsp;for how to write a D3 time format string.
+          </p>
        </div>
      </div>
-    );
-  }
+      <div className="row" style={{ margin: '10px 0 30px 0' }}>
+        <div className="col-sm" />
+        <div className="col-sm-8">
+          <div className="form">
+            <div className="form-group">
+              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+              <label>
+                Enter D3 time format string:
+                <input
+                  id="formatString"
+                  className="form-control form-control-lg"
+                  type="text"
+                  value={formatString}
+                  onChange={handleFormatChange}
+                />
+              </label>
+            </div>
+          </div>
+        </div>
+        <div className="col-sm" />
+      </div>
+      <div className="row">
+        <div className="col-sm">
+          <table className="table table-striped table-sm">
+            <thead>
+              <tr>
+                <th>Input (time)</th>
+                <th>Formatted output (string)</th>
+              </tr>
+            </thead>
+            <tbody>
+              {testValues.map((v, index) => (
+                <tr key={index}>
+                  <td>
+                    <code>{v instanceof Date ? v.toUTCString() : `${v}`}</code>
+                  </td>
+                  <td>
+                    <code>&quot;{formatTime(formatString, v)}&quot;</code>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
 }

 export default {
--- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/stories/LegacyPluginChartCalendar.stories.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/stories/LegacyPluginChartCalendar.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import CalendarChartPlugin from '@superset-ui/legacy-plugin-chart-calendar';
 import data from './data';
 import { dummyDatasource, withResizableChartDemo } from '@storybook-shared';
@@ -100,6 +101,7 @@ export const Basic = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="calendar"
    width={width}
    height={height}
--- a/superset-frontend/plugins/legacy-plugin-chart-chord/src/stories/LegacyPluginChartChord.stories.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-chord/src/stories/LegacyPluginChartChord.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, VizType } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import ChordChartPlugin from '@superset-ui/legacy-plugin-chart-chord';
 import data from './data';
 import { withResizableChartDemo } from '@storybook-shared';
@@ -67,6 +68,7 @@ export const Basic = ({
  sortByMetric: boolean;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VizType.Chord}
    width={width}
    height={height}
--- a/superset-frontend/plugins/legacy-plugin-chart-horizon/src/stories/Horizon.stories.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-horizon/src/stories/Horizon.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, VizType } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import HorizonChartPlugin from '@superset-ui/legacy-plugin-chart-horizon';
 import { withResizableChartDemo } from '@storybook-shared';
 import data from './data';
@@ -55,6 +56,7 @@ export const Basic = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VizType.Horizon}
    width={width}
    height={height}
--- a/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/stories/TTest.stories.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/stories/TTest.stories.tsx
@@ -19,6 +19,7 @@

 /* eslint-disable no-magic-numbers */
 import { SuperChart } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import PairedTTestChartPlugin from '@superset-ui/legacy-plugin-chart-paired-t-test';
 import { withResizableChartDemo } from '@storybook-shared';
 import data from './data';
@@ -63,6 +64,7 @@ export const Basic = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="paired-t-test"
    width={width}
    height={height}
--- a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/stories/ParallelCoordinates.stories.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/stories/ParallelCoordinates.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import ParallelCoordinatesChartPlugin from '@superset-ui/legacy-plugin-chart-parallel-coordinates';
 import { withResizableChartDemo } from '@storybook-shared';
 import data from './data';
@@ -70,6 +71,7 @@ export const Basic = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="parallel-coordinates"
    width={width}
    height={height}
--- a/superset-frontend/plugins/legacy-plugin-chart-partition/src/stories/Partition.stories.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-partition/src/stories/Partition.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, VizType } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import PartitionChartPlugin from '@superset-ui/legacy-plugin-chart-partition';
 import data from './data';
 import { dummyDatasource, withResizableChartDemo } from '@storybook-shared';
@@ -79,6 +80,7 @@ export const Basic = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VizType.Partition}
    width={width}
    height={height}
--- a/superset-frontend/plugins/legacy-plugin-chart-rose/src/stories/Rose.stories.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-rose/src/stories/Rose.stories.tsx
@@ -19,6 +19,7 @@

 /* eslint-disable no-magic-numbers, sort-keys */
 import { SuperChart, VizType } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import RoseChartPlugin from '@superset-ui/legacy-plugin-chart-rose';
 import data from './data';
 import { withResizableChartDemo } from '@storybook-shared';
@@ -80,6 +81,7 @@ export const Basic = ({
  roseAreaProportion: boolean;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VizType.Rose}
    width={width}
    height={height}
--- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/stories/WorldMap.stories.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/stories/WorldMap.stories.tsx
@@ -19,6 +19,7 @@

 /* eslint-disable no-magic-numbers, sort-keys */
 import { SuperChart } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import WorldMapChartPlugin from '@superset-ui/legacy-plugin-chart-world-map';
 import { withResizableChartDemo } from '@storybook-shared';
 import data from './data';
@@ -53,6 +54,7 @@ export const Basic = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="world-map"
    width={width}
    height={height}
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/BoxPlot/stories/NVD3BoxPlot.stories.tsx
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/BoxPlot/stories/NVD3BoxPlot.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, VizType } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import { EchartsBoxPlotChartPlugin } from '@superset-ui/plugin-chart-echarts';
 import { dummyDatasource, withResizableChartDemo } from '@storybook-shared';
 import data from './data';
@@ -65,6 +66,7 @@ export const Basic = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="box-plot"
    width={width}
    height={height}
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/stories/NVD3Bubble.stories.tsx
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/stories/NVD3Bubble.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, VizType } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import { BubbleChartPlugin } from '@superset-ui/legacy-preset-chart-nvd3';
 import { dummyDatasource, withResizableChartDemo } from '@storybook-shared';
 import data from './data';
@@ -71,6 +72,7 @@ export const Basic = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VizType.LegacyBubble}
    width={width}
    height={height}
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/stories/NVD3Bullet.stories.tsx
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/stories/NVD3Bullet.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, VizType } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import { BulletChartPlugin } from '@superset-ui/legacy-preset-chart-nvd3';
 import { dummyDatasource, withResizableChartDemo } from '@storybook-shared';
 import data from './data';
@@ -69,6 +70,7 @@ export const Basic = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VizType.Bullet}
    width={width}
    height={height}
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/stories/NVD3Compare.stories.tsx
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/stories/NVD3Compare.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, VizType } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import { CompareChartPlugin } from '@superset-ui/legacy-preset-chart-nvd3';
 import { dummyDatasource, withResizableChartDemo } from '@storybook-shared';
 import data from './data';
@@ -64,6 +65,7 @@ export const Basic = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="compare"
    width={width}
    height={height}
@@ -160,6 +162,7 @@ const timeFormatData = [

 export const timeFormat = () => (
  <SuperChart
+    theme={supersetTheme}
    chartType="compare"
    width={400}
    height={400}
--- a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/stories/AgGridTable.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/stories/AgGridTable.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import AgGridTableChartPlugin from '../index';
 import transformProps from '../transformProps';
 import { basicFormData, basicData } from './data';
@@ -74,6 +75,7 @@ export const Basic = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VIZ_TYPE}
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-cartodiagram/src/stories/Cartodiagram.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-cartodiagram/src/stories/Cartodiagram.stories.tsx
@@ -22,6 +22,7 @@ import {
  VizType,
  getChartTransformPropsRegistry,
 } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import { CartodiagramPlugin } from '@superset-ui/plugin-chart-cartodiagram';
 import {
  EchartsPieChartPlugin,
@@ -145,6 +146,7 @@ export const BasicMap = ({
  borderRadius: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VIZ_TYPE}
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/stories/BigNumberTotal.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/stories/BigNumberTotal.stories.tsx
@@ -17,6 +17,7 @@
 * under the License.
 */
 import { SuperChart, VizType } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import { BigNumberTotalChartPlugin } from '@superset-ui/plugin-chart-echarts';
 import { withResizableChartDemo } from '@storybook-shared';
 import data from './data';
@@ -57,6 +58,7 @@ export const TotalBasic = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="big-number-total"
    width={width}
    height={height}
@@ -79,6 +81,7 @@ export const TotalNoData = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="big-number-total"
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/stories/BigNumber.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/stories/BigNumber.stories.tsx
@@ -17,6 +17,7 @@
 * under the License.
 */
 import { SuperChart, VizType } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import { BigNumberChartPlugin } from '@superset-ui/plugin-chart-echarts';
 import { withResizableChartDemo } from '@storybook-shared';
 import testData from './data';
@@ -99,6 +100,7 @@ export const BasicWithTrendline = ({
  yAxisFormat: string;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="big-number"
    width={width}
    height={height}
@@ -116,6 +118,7 @@ export const BasicWithTrendline = ({

 export const weeklyTimeGranularity = () => (
  <SuperChart
+    theme={supersetTheme}
    chartType="big-number"
    width={400}
    height={400}
@@ -129,6 +132,7 @@ export const weeklyTimeGranularity = () => (

 export const nullInTheMiddle = () => (
  <SuperChart
+    theme={supersetTheme}
    chartType="big-number"
    width={400}
    height={400}
@@ -139,6 +143,7 @@ export const nullInTheMiddle = () => (

 export const fixedRange = () => (
  <SuperChart
+    theme={supersetTheme}
    chartType="big-number"
    width={400}
    height={400}
@@ -158,6 +163,7 @@ export const fixedRange = () => (

 export const noFixedRange = () => (
  <SuperChart
+    theme={supersetTheme}
    chartType="big-number"
    width={400}
    height={400}
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/stories/BoxPlot.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/stories/BoxPlot.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import {
  EchartsBoxPlotChartPlugin,
  BoxPlotTransformProps,
@@ -59,6 +60,7 @@ export const BoxPlot = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="echarts-boxplot"
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/stories/BubbleChart.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/stories/BubbleChart.stories.tsx
@@ -25,6 +25,7 @@ import {
  VizType,
  getChartTransformPropsRegistry,
 } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import { simpleBubbleData } from './data';
 import { withResizableChartDemo } from '@storybook-shared';

@@ -109,6 +110,7 @@ export const BubbleChart = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VizType.Bubble}
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/stories/Funnel.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/stories/Funnel.stories.tsx
@@ -22,6 +22,7 @@ import {
  VizType,
  getChartTransformPropsRegistry,
 } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import {
  EchartsFunnelChartPlugin,
  FunnelTransformProps,
@@ -93,6 +94,7 @@ export const Funnel = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VizType.Funnel}
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/stories/Gauge.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/stories/Gauge.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import {
  EchartsGaugeChartPlugin,
  GaugeTransformProps,
@@ -96,6 +97,7 @@ export const Gauge = ({
  endAngle: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="echarts-gauge"
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/stories/Graph.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/stories/Graph.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import {
  EchartsGraphChartPlugin,
  GraphTransformProps,
@@ -114,6 +115,7 @@ export const Graph = ({
  showSymbolThreshold: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="echarts-graph"
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/stories/MixedSeries.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/stories/MixedSeries.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import {
  EchartsTimeseriesChartPlugin,
  MixedTimeseriesTransformProps,
@@ -108,6 +109,7 @@ export const Timeseries = ({
  ];
  return (
    <SuperChart
+      theme={supersetTheme}
      chartType="mixed-timeseries"
      width={width}
      height={height}
@@ -260,6 +262,7 @@ export const WithNegativeNumbers = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="mixed-timeseries"
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/stories/Pie.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/stories/Pie.stories.tsx
@@ -22,6 +22,7 @@ import {
  VizType,
  getChartTransformPropsRegistry,
 } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import {
  EchartsPieChartPlugin,
  PieTransformProps,
@@ -62,6 +63,7 @@ export const WeekdayPie = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VizType.Pie}
    width={width}
    height={height}
@@ -141,6 +143,7 @@ export const PopulationPie = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VizType.Pie}
    width={width}
    height={height}
@@ -222,6 +225,7 @@ export const SalesPie = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VizType.Pie}
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/stories/Radar.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/stories/Radar.stories.tsx
@@ -22,6 +22,7 @@ import {
  VizType,
  getChartTransformPropsRegistry,
 } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import {
  EchartsRadarChartPlugin,
  RadarTransformProps,
@@ -94,6 +95,7 @@ export const Radar = ({
  numberFormat: string;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VizType.Radar}
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/stories/Sunburst.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/stories/Sunburst.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import {
  EchartsSunburstChartPlugin,
  SunburstTransformProps,
@@ -51,6 +52,7 @@ export const Sunburst = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="echarts-sunburst"
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/stories/AreaSeries/AreaSeries.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/stories/AreaSeries/AreaSeries.stories.tsx
@@ -22,6 +22,7 @@ import {
  getChartTransformPropsRegistry,
  VizType,
 } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import {
  EchartsAreaChartPlugin,
  TimeseriesTransformProps,
@@ -174,6 +175,7 @@ export const AreaSeries = ({
    .filter(row => forecastEnabled || !!row.Boston);
  return (
    <SuperChart
+      theme={supersetTheme}
      chartType={VizType.Area}
      width={width}
      height={height}
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/stories/Timeseries.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/stories/Timeseries.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import {
  EchartsTimeseriesChartPlugin,
  TimeseriesTransformProps,
@@ -90,6 +91,7 @@ export const Timeseries = ({
    .filter(row => forecastEnabled || !!row.Boston);
  return (
    <SuperChart
+      theme={supersetTheme}
      chartType="echarts-timeseries"
      width={width}
      height={height}
@@ -169,6 +171,7 @@ export const WithNegativeNumbers = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="echarts-timeseries"
    width={width}
    height={height}
@@ -213,6 +216,7 @@ export const ConfidenceBand = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="echarts-timeseries"
    width={width}
    height={height}
@@ -245,6 +249,7 @@ export const StackWithNulls = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="echarts-timeseries"
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/stories/Tree.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/stories/Tree.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import {
  EchartsTreeChartPlugin,
  TreeTransformProps,
@@ -106,6 +107,7 @@ export const Tree = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="echarts-tree"
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/stories/Treemap.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/stories/Treemap.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import {
  EchartsTreemapChartPlugin,
  TreemapTransformProps,
@@ -53,6 +54,7 @@ export const Treemap = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="echarts-treemap"
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/stories/Waterfall.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/stories/Waterfall.stories.tsx
@@ -21,6 +21,7 @@ import {
  VizType,
  getChartTransformPropsRegistry,
 } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import {
  EchartsWaterfallChartPlugin,
  WaterfallTransformProps,
@@ -80,6 +81,7 @@ export const Waterfall = ({
  yAxisFormat: string;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VizType.Waterfall}
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-handlebars/src/stories/Handlebars.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-handlebars/src/stories/Handlebars.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import { HandlebarsChartPlugin } from '@superset-ui/plugin-chart-handlebars';
 import { kpiData, leaderboardData, timelineData } from './data';
 import { withResizableChartDemo } from '@storybook-shared';
@@ -150,6 +151,7 @@ export const InteractiveHandlebars = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VIZ_TYPE}
    width={width}
    height={height}
@@ -194,6 +196,7 @@ export const KPIDashboard = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VIZ_TYPE}
    width={width}
    height={height}
@@ -221,6 +224,7 @@ export const Leaderboard = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VIZ_TYPE}
    width={width}
    height={height}
@@ -248,6 +252,7 @@ export const Timeline = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VIZ_TYPE}
    width={width}
    height={height}
--- a/superset-frontend/plugins/plugin-chart-pivot-table/src/stories/PivotTable.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/stories/PivotTable.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart, VizType } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import { PivotTableChartPlugin } from '@superset-ui/plugin-chart-pivot-table';
 import { basicFormData, basicData } from './testData';
 import { withResizableChartDemo } from '@storybook-shared';
@@ -92,6 +93,7 @@ export const Basic = ({
  colSubtotalPosition: string;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VizType.PivotTable}
    datasource={{
      columnFormats: {},
--- a/superset-frontend/plugins/plugin-chart-table/src/stories/Table.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/stories/Table.stories.tsx
@@ -19,6 +19,7 @@

 import memoizeOne from 'memoize-one';
 import { DataRecord, SuperChart, VizType } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import TableChartPlugin, {
  TableChartProps,
 } from '@superset-ui/plugin-chart-table';
@@ -144,6 +145,7 @@ function loadData(

 export const Basic = ({ width, height }: { width: number; height: number }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType={VizType.Table}
    datasource={{
      columnFormats: {},
@@ -195,6 +197,7 @@ export const BigTable = ({
    <SuperChart
      chartType={VizType.Table}
      {...chartProps}
+      theme={supersetTheme}
      width={width}
      height={height}
    />
--- a/superset-frontend/plugins/plugin-chart-word-cloud/src/stories/WordCloud.stories.tsx
+++ b/superset-frontend/plugins/plugin-chart-word-cloud/src/stories/WordCloud.stories.tsx
@@ -18,6 +18,7 @@
 */

 import { SuperChart } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import { WordCloudChartPlugin } from '@superset-ui/plugin-chart-word-cloud';
 import { withResizableChartDemo } from '@storybook-shared';
 import data from './data';
@@ -74,6 +75,7 @@ export const Basic = ({
  height: number;
 }) => (
  <SuperChart
+    theme={supersetTheme}
    chartType="word-cloud2"
    width={width}
    height={height}
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.stories.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.stories.tsx
@@ -19,6 +19,7 @@
 import { action } from '@storybook/addon-actions';
 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
 import { GenericDataType } from '@apache-superset/core/common';
+import { supersetTheme } from '@apache-superset/core/theme';
 import RangeFilterPlugin from './index';
 import transformProps from './transformProps';

@@ -35,6 +36,7 @@ export const range = ({ width, height }: { width: number; height: number }) => (
    chartType="filter_range"
    width={width}
    height={height}
+    theme={supersetTheme}
    queriesData={[{ data: [{ min: 10, max: 100 }] }]}
    filterState={{ value: [10, 70] }}
    formData={{
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.stories.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.stories.tsx
@@ -19,6 +19,7 @@
 import { action } from '@storybook/addon-actions';
 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
 import { mockQueryDataForCountries } from 'spec/fixtures/mockNativeFilters';
+import { supersetTheme } from '@apache-superset/core/theme';
 import SelectFilterPlugin from './index';
 import transformProps from './transformProps';

@@ -52,6 +53,7 @@ export const Select = ({
    chartType="filter_select"
    width={width}
    height={height}
+    theme={supersetTheme}
    queriesData={[{ data: mockQueryDataForCountries }]}
    formData={{
      adhoc_filters: [],
Author	SHA1	Message	Date
Evan Rusackas	39ae06496a	fix(stories): avoid 'Show undefined' when expandableWhat is omitted Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-04-20 08:51:53 -07:00
Evan Rusackas	4b53793d0e	fix(stories): address bot review findings - CountryMap.stories: drop spurious theme={supersetTheme} prop and unused supersetTheme import (let SuperChart use active theme). - Path.stories: merge duplicate @apache-superset/core/theme imports.	2026-04-20 08:51:11 -07:00
Evan Rusackas	d905b594fb	fix(imports): rewrite stale @apache-superset/core bare and api/core imports to correct subpaths	2026-04-20 08:50:55 -07:00
Evan Rusackas	d2122014a1	fix(imports): rewrite stale @apache-superset/core/ui to current subpaths Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-20 08:50:55 -07:00
Evan Rusackas	8a0945f4fb	chore(lint): convert Storybook stories and shared utils to function components Converts all .stories.tsx files across plugins and packages, plus shared .storybook/shared utilities, from class components to function components. No functional changes — purely structural cleanup. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-20 08:50:35 -07:00