feat(build): uplift Storybook to v8 (#29408)

Signed-off-by: hainenber <dotronghai96@gmail.com>

superset-frontend/.storybook/main.js

@@ -29,7 +29,7 @@ module.exports = {
   addons: [
     getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('storybook-addon-jsx'),
+    '@mihkeleidast/storybook-addon-source',
     getAbsolutePath('@storybook/addon-controls'),
     getAbsolutePath('@storybook/addon-mdx-gfm'),
   ],

superset-frontend/.storybook/preview.jsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { jsxDecorator } from 'storybook-addon-jsx';
+import { withJsx } from '@mihkeleidast/storybook-addon-source';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import { combineReducers, createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
@@ -48,7 +48,7 @@ const providerDecorator = Story => (
   </Provider>
 );
 
-export const decorators = [jsxDecorator, themeDecorator, providerDecorator];
+export const decorators = [withJsx, themeDecorator, providerDecorator];
 
 export const parameters = {
   paddings: {

superset-frontend/package.json

@@ -228,17 +228,15 @@
     "@emotion/jest": "^11.11.0",
     "@hot-loader/react-dom": "^16.14.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.1",
-    "@storybook/addon-actions": "^7.6.13",
+    "@storybook/addon-actions": "^8.1.11",
-    "@storybook/addon-controls": "^7.6.13",
+    "@storybook/addon-controls": "^8.1.11",
-    "@storybook/addon-docs": "^7.6.13",
+    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-essentials": "^7.6.13",
+    "@storybook/addon-links": "^8.1.11",
-    "@storybook/addon-links": "^7.6.13",
+    "@storybook/addon-mdx-gfm": "^8.1.11",
-    "@storybook/addon-mdx-gfm": "^7.6.15",
+    "@storybook/preview-api": "^8.1.11",
-    "@storybook/addons": "^7.6.13",
+    "@storybook/components": "^8.1.11",
-    "@storybook/client-api": "^7.6.13",
+    "@storybook/react": "^8.1.11",
-    "@storybook/components": "^7.6.13",
+    "@storybook/react-webpack5": "^8.1.11",
-    "@storybook/react": "^7.6.13",
-    "@storybook/react-webpack5": "^7.6.13",
     "@svgr/webpack": "^8.0.1",
     "@testing-library/dom": "^7.29.4",
     "@testing-library/jest-dom": "^5.11.6",
@@ -341,8 +339,8 @@
     "source-map": "^0.7.4",
     "source-map-support": "^0.5.21",
     "speed-measure-webpack-plugin": "^1.5.0",
-    "storybook": "^7.6.13",
+    "storybook": "^8.1.11",
-    "storybook-addon-jsx": "^7.3.14",
+    "@mihkeleidast/storybook-addon-source": "^1.0.1",
     "style-loader": "^3.3.4",
     "thread-loader": "^3.0.4",
     "transform-loader": "^0.2.4",

superset-frontend/packages/superset-ui-demo/.storybook/main.js

@@ -4,7 +4,7 @@ const customConfig = require('../../../webpack.config.js');
 module.exports = {
   addons: [
     getAbsolutePath('@storybook/addon-controls'),
-    getAbsolutePath('storybook-addon-jsx'),
+    '@mihkeleidast/storybook-addon-source',
     getAbsolutePath('@storybook/addon-actions'),
     getAbsolutePath('@storybook/addon-links'),
   ],

superset-frontend/packages/superset-ui-demo/.storybook/preview.js

@@ -1,4 +1,4 @@
-import { jsxDecorator } from 'storybook-addon-jsx';
+import { withJsx } from '@mihkeleidast/storybook-addon-source';
 import {
   configure,
   getTimeFormatterRegistry,
@@ -15,7 +15,7 @@ import themeDecorator from './themeDecorator';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './storybook.css';
 
-export const decorators = [jsxDecorator, themeDecorator];
+export const decorators = [withJsx, themeDecorator];
 
 export const parameters = {
   passArgsFirst: false,

superset-frontend/packages/superset-ui-demo/package.json

@@ -36,12 +36,11 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@react-icons/all-files": "^4.1.0",
-    "@storybook/addon-actions": "^7.6.13",
+    "@storybook/addon-actions": "^8.1.11",
-    "@storybook/addon-controls": "^7.6.13",
+    "@storybook/addon-controls": "^8.1.11",
-    "@storybook/addon-links": "^7.6.13",
+    "@storybook/addon-links": "^8.1.11",
-    "@storybook/addons": "^7.6.13",
+    "@storybook/react": "^8.1.11",
-    "@storybook/react": "^7.6.13",
+    "@storybook/types": "^8.1.11",
-    "@storybook/types": "^7.6.19",
     "@types/react-loadable": "^5.5.3",
     "antd": "4.10.3",
     "bootstrap": "^3.4.1",
@@ -53,14 +52,14 @@
     "react-dom": "^16.13.1",
     "react-loadable": "^5.5.0",
     "react-resizable": "^3.0.5",
-    "storybook-addon-jsx": "^7.3.14"
+    "@mihkeleidast/storybook-addon-source": "^1.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@storybook/react-webpack5": "^7.6.13",
+    "@storybook/react-webpack5": "^8.1.11",
     "babel-loader": "^9.1.3",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "ts-loader": "^7.0.4",

superset-frontend/packages/superset-ui-demo/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "preserve",
     "outDir": "../../build/lib",
     "rootDir": "../../",
     "emitDeclarationOnly": false,

superset-frontend/src/components/Checkbox/Checkbox.stories.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import Checkbox, { CheckboxProps } from '.';
 
 export default {

superset-frontend/src/components/DropdownContainer/Overview.stories.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-// import { Meta, Source } from '@storybook/addon-docs';
 import Markdown from 'markdown-to-jsx';
 
 export default {

superset-frontend/src/components/MetadataBar/MetadataBarOverview.stories.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import { Source, Story } from '@storybook/addon-docs';
 import Markdown from 'markdown-to-jsx';
 
 export default {
@@ -41,10 +40,9 @@ Some of the common applications in Superset are:
 - Display the database's metadata in a drill to detail modal to help the user understand what data they are looking
   at while accessing the feature in the dashboard
 
-## Basic example
+## [Basic example]((./?path=/docs/design-system-components-metadatabar-examples--basic)
 `}
     </Markdown>
-    <Story id="design-system-components-metadatabar-examples--basic" />
     <Markdown>
       {`
 ## Variations
@@ -65,112 +63,122 @@ To check each content type in detail and its interactions, check the [MetadataBa
 Below you can find the configurations for each content type:
     `}
     </Markdown>
-    <Source
-      language="jsx"
-      format
-      code={`
-      export enum MetadataType {
-        Dashboards = 'dashboards',
-        Description = 'description',
-        LastModified = 'lastModified',
-        Owner = 'owner',
-        Rows = 'rows',
-        Sql = 'sql',
-        Table = 'table',
-        Tags = 'tags',
-      }`}
-    />
 
-    <Source
+    <Markdown>
-      language="jsx"
+      {`
-      format
+\`\`\`
-      code={`
+export enum MetadataType {
-      export type Dashboards = {
+  Dashboards = 'dashboards',
-        type: MetadataType.Dashboards;
+  Description = 'description',
-        title: string;
+  LastModified = 'lastModified',
-        description?: string;
+  Owner = 'owner',
-        onClick?: (type: string) => void;
+  Rows = 'rows',
-      };`}
+  Sql = 'sql',
-    />
+  Table = 'table',
+  Tags = 'tags',
+};
+\`\`\`
+      `}
+    </Markdown>
 
-    <Source
+    <Markdown>
-      language="jsx"
+      {`
-      format
+\`\`\`
-      code={`
+export type Dashboards = {
-      export type Description = {
+  type: MetadataType.Dashboards;
-        type: MetadataType.Description;
+  title: string;
-        value: string;
+  description?: string;
-        onClick?: (type: string) => void;
+  onClick?: (type: string) => void;
-      };`}
+};
-    />
+\`\`\`
+      `}
+    </Markdown>
 
-    <Source
+    <Markdown>
-      language="jsx"
+      {`
-      format
+\`\`\`
-      code={`
+export type Description = {
-      export type LastModified = {
+  type: MetadataType.Description;
-        type: MetadataType.LastModified;
+  value: string;
-        value: Date;
+  onClick?: (type: string) => void;
-        modifiedBy: string;
+};
-        onClick?: (type: string) => void;
+\`\`\`
-      };`}
+      `}
-    />
+    </Markdown>
 
-    <Source
+    <Markdown>
-      language="jsx"
+      {`
-      format
+\`\`\`
-      code={`
+export type LastModified = {
-      export type Owner = {
+  type: MetadataType.LastModified;
-        type: MetadataType.Owner;
+  value: Date;
-        createdBy: string;
+  modifiedBy: string;
-        owners: string[];
+  onClick?: (type: string) => void;
-        createdOn: Date;
+};
-        onClick?: (type: string) => void;
+\`\`\`
-      };`}
+      `}
-    />
+    </Markdown>
 
-    <Source
+    <Markdown>
-      language="jsx"
+      {`
-      format
+\`\`\`
-      code={`
+export type Owner = {
-      export type Rows = {
+  type: MetadataType.Owner;
-        type: MetadataType.Rows;
+  createdBy: string;
-        title: string;
+  owners: string[];
-        onClick?: (type: string) => void;
+  createdOn: Date;
-      };`}
+  onClick?: (type: string) => void;
-    />
+};
+\`\`\`
+      `}
+    </Markdown>
 
-    <Source
+    <Markdown>
-      language="jsx"
+      {`
-      format
+\`\`\`
-      code={`
+export type Rows = {
-      export type Sql = {
+  type: MetadataType.Rows;
-        type: MetadataType.Sql;
+  title: string;
-        title: string;
+  onClick?: (type: string) => void;
-        onClick?: (type: string) => void;
+};
-      };`}
+\`\`\`
-    />
+      `}
+    </Markdown>
 
-    <Source
+    <Markdown>
-      language="jsx"
+      {`
-      format
+\`\`\`
-      code={`
+export type Sql = {
-      export type Table = {
+  type: MetadataType.Sql;
-        type: MetadataType.Table;
+  title: string;
-        title: string;
+  onClick?: (type: string) => void;
-        onClick?: (type: string) => void;
+};
-      };`}
+\`\`\`
-    />
+      `}
+    </Markdown>
 
-    <Source
+    <Markdown>
-      language="jsx"
+      {`
-      format
+\`\`\`
-      code={`
+export type Table = {
-      export type Tags = {
+  type: MetadataType.Table;
-        type: MetadataType.Tags;
+  title: string;
-        values: string[];
+  onClick?: (type: string) => void;
-        onClick?: (type: string) => void;
+};
-      };`}
+\`\`\`
-    />
+      `}
+    </Markdown>
+
+    <Markdown>
+      {`
+\`\`\`
+export type Tags = {
+  type: MetadataType.Tags;
+  values: string[];
+  onClick?: (type: string) => void;
+};
+\`\`\`
+      `}
+    </Markdown>
   </>
 );

superset-frontend/src/components/PopoverDropdown/PopoverDropdown.stories.tsx

@@ -19,12 +19,7 @@
 import { useState } from 'react';
 import PopoverDropdown, { PopoverDropdownProps, OptionProps } from '.';
 
-export default {
+const OPTIONS: OptionProps[] = [
-  title: 'PopoverDropdown',
-  includeStories: ['InteractivePopoverDropdown'],
-};
-
-export const OPTIONS: OptionProps[] = [
   { label: 'Option A', value: 'A' },
   { label: 'Option B', value: 'B' },
   { label: 'Option C', value: 'C' },
@@ -77,11 +72,18 @@ InteractivePopoverDropdown.argTypes = {
     options: ['default', 'button'],
   },
   value: {
-    defaultValue: OPTIONS[0].value,
     table: { disable: true },
   },
   options: {
-    defaultValue: OPTIONS,
     table: { disable: true },
   },
 };
+
+export default {
+  title: 'PopoverDropdown',
+  includeStories: ['InteractivePopoverDropdown'],
+  args: {
+    value: OPTIONS[0].value,
+    options: OPTIONS,
+  },
+};

superset-frontend/src/components/Radio/Radio.stories.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Radio } from './index';
 
 export default {

superset-frontend/src/components/Switch/Switch.stories.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Switch, SwitchProps } from '.';
 
 export default {

superset-frontend/src/components/Table/Table.stories.tsx

@@ -18,7 +18,7 @@
  */
 import { useState, DragEvent } from 'react';
 
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import {
   ColumnsType,
@@ -44,7 +44,7 @@ export default {
   title: 'Design System/Components/Table/Examples',
   component: Table,
   argTypes: { onClick: { action: 'clicked' } },
-} as ComponentMeta<typeof Table>;
+} as Meta<typeof Table>;
 
 export interface BasicData {
   name: string;
@@ -306,7 +306,7 @@ for (let i = 0; i < recordCount; i += 1) {
   });
 }
 
-export const Basic: ComponentStory<typeof Table> = args => <Table {...args} />;
+export const Basic: StoryFn<typeof Table> = args => <Table {...args} />;
 
 function handlers(record: object, rowIndex: number) {
   return {
@@ -332,9 +332,7 @@ Basic.args = {
   usePagination: false,
 };
 
-export const Pagination: ComponentStory<typeof Table> = args => (
+export const Pagination: StoryFn<typeof Table> = args => <Table {...args} />;
-  <Table {...args} />
-);
 
 Pagination.args = {
   data: basicData,
@@ -401,7 +399,7 @@ const paginationColumns: ColumnsType<BasicData> = [
   },
 ];
 
-export const ServerPagination: ComponentStory<typeof Table> = args => {
+export const ServerPagination: StoryFn<typeof Table> = args => {
   const [data, setData] = useState(generateData(0, 5));
   const [loading, setLoading] = useState(false);
 
@@ -456,7 +454,7 @@ ServerPagination.args = {
   defaultPageSize: 5,
 };
 
-export const VirtualizedPerformance: ComponentStory<typeof Table> = args => (
+export const VirtualizedPerformance: StoryFn<typeof Table> = args => (
   <Table {...args} />
 );
 
@@ -471,9 +469,7 @@ VirtualizedPerformance.args = {
   usePagination: false,
 };
 
-export const Loading: ComponentStory<typeof Table> = args => (
+export const Loading: StoryFn<typeof Table> = args => <Table {...args} />;
-  <Table {...args} />
-);
 
 Loading.args = {
   data: basicData,
@@ -482,7 +478,7 @@ Loading.args = {
   loading: true,
 };
 
-export const ResizableColumns: ComponentStory<typeof Table> = args => (
+export const ResizableColumns: StoryFn<typeof Table> = args => (
   <Table {...args} />
 );
 
@@ -493,7 +489,7 @@ ResizableColumns.args = {
   resizable: true,
 };
 
-export const ReorderableColumns: ComponentStory<typeof Table> = args => {
+export const ReorderableColumns: StoryFn<typeof Table> = args => {
   const [droppedItem, setDroppedItem] = useState<string | undefined>();
   const dragOver = (ev: DragEvent<HTMLDivElement>) => {
     ev.preventDefault();
@@ -572,9 +568,7 @@ const rendererData: RendererData[] = [
   },
 ];
 
-export const CellRenderers: ComponentStory<typeof Table> = args => (
+export const CellRenderers: StoryFn<typeof Table> = args => <Table {...args} />;
-  <Table {...args} />
-);
 
 CellRenderers.args = {
   data: rendererData,
@@ -611,7 +605,7 @@ const shoppingData: ShoppingData[] = [
   },
 ];
 
-export const HeaderRenderers: ComponentStory<typeof Table> = () => {
+export const HeaderRenderers: StoryFn<typeof Table> = () => {
   const [orderDateFormatting, setOrderDateFormatting] = useState('formatted');
   const [priceLocale, setPriceLocale] = useState(LocaleCode.en_US);
   const shoppingColumns: ColumnsType<ShoppingData> = [

superset-frontend/src/components/Table/TableOverview.stories.tsx

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Story } from '@storybook/addon-docs';
 import Markdown from 'markdown-to-jsx';
 
 export default {
@@ -47,8 +46,6 @@ This component provides a general use Table.
 `}
     </Markdown>
 
-    <Story id="design-system-components-table-examples--basic" />
-
     <Markdown>
       {`
 ### Data and Columns
@@ -166,14 +163,13 @@ If a different sort option is needed, consider adding it as a reusable sort func
 
 ---
 
-### Cell Content Renderers
+### [Cell Content Renderers](./?path=/docs/design-system-components-table-examples--cell-renderers)
 
 By default, each column will render the value as simple text. Often you will want to show formatted values, such as a numeric column showing as currency, or a more complex component such as a button or action menu as a cell value.
 Cell Renderers are React components provided to the optional \`render\` attribute on a column definition that enables injecting a specific React component to enable this.
 
 `}
     </Markdown>
-    <Story id="design-system-components-table-examples--cell-renderers" />
     <Markdown>
       {`
 
@@ -192,26 +188,23 @@ The following data types can be displayed in table cells.
 
 ---
 
-### Loading
+### [Loading](./?path=/docs/design-system-components-table-examples--loading)
 
 The table can be set to a loading state simply by setting the loading prop to true | false
 
   `}
     </Markdown>
-
-    <Story id="design-system-components-table-examples--loading" />
     <Markdown>
       {`
 ---
 
-### Pagination
+### [Pagination](./?path=/docs/design-system-components-table-examples--pagination)
 
 The table displays a set number of rows at a time, the user navigates the table via pagination. Use in scenarios where the user is searching for a specific piece of content.
 The default page size and page size options for the menu are configurable via the \`pageSizeOptions\` and \`defaultPageSize\` props.
 NOTE: Pagination controls will only display when the data for the table has more records than the default page size.
 `}
     </Markdown>
-    <Story id="design-system-components-table-examples--pagination" />
     <Markdown>
       {`
 
@@ -221,7 +214,7 @@ NOTE: Pagination controls will only display when the data for the table has more
 
 ---
 
-### Server Pagination
+### [Server Pagination](./?path=/docs/design-system-components-table-examples--server-pagination)
 
 The table can be configured for async data fetching to get partial data sets while showing pagination controls that let the user navigate through data.
 To override the default paging, which uses \`data.length\` to determine the record count, populate the \`recordCount\` prop with the total number of records
@@ -230,7 +223,6 @@ function enabling data fetching to occur when the user changes the page.
 
 `}
     </Markdown>
-    <Story id="design-system-components-table-examples--server-pagination" />
     <Markdown>
       {`
 
@@ -292,7 +284,7 @@ const ServerPaginationTable = () => {
 
 ---
 
-### Virtualization for Performance
+### [Virtualization for Performance](./?path=/docs/design-system-components-table-examples--virtualized-performance)
 
 Table virtualization can enable viewing data with many columns and/or rows.
 Virtualization can be enabled via the \`virtualize\` prop.
@@ -302,7 +294,6 @@ Support for row event handlers may be added in future versions of the Table.
 
 `}
     </Markdown>
-    <Story id="design-system-components-table-examples--virtualized-performance" />
     <Markdown>
       {`
 
@@ -351,18 +342,17 @@ The following specifications are required every time a table is used. These choi
 The Table component has features that are still experimental and can be used at your own risk.
 These features are intended to be made fully stable in future releases.
 
-### Resizable Columns
+### [Resizable Columns](./?path=/docs/design-system-components-table-examples--resizable-columns)
 
 The prop \`resizable\` enables table columns to be resized by the user dragging from the right edge of each
 column to increase or decrease the columns' width
 
 `}
     </Markdown>
-    <Story id="design-system-components-table-examples--resizable-columns" />
     <Markdown>
       {`
 
-### Drag & Drop Columns
+### [Drag & Drop Columns](./?path=/docs/design-system-components-table-examples--reorderable-columns)
 
 The prop \`reorderable\` can enable column drag and drop reordering as well as dragging a column to another component. If you want to accept the drop event of a Table Column
 you can register \`onDragOver\` and \`onDragDrop\` event handlers on the destination component. In the \`onDragDrop\` handler you can check for \`SUPERSET_TABLE_COLUMN\`
@@ -379,6 +369,5 @@ const handleDrop = (ev:Event) => {
 \`\`\`
 `}
     </Markdown>
-    <Story id="design-system-components-table-examples--reorderable-columns" />
   </>
 );

superset-frontend/src/components/Table/cell-renderers/ActionCell/ActionCell.overview.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-// import { Meta, Source, Story, ArgsTable } from '@storybook/addon-docs';
 import Markdown from 'markdown-to-jsx';
 
 export default {

superset-frontend/src/components/Table/cell-renderers/ActionCell/ActionCell.stories.tsx

@@ -16,16 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import ActionCell from './index';
 import { exampleMenuOptions, exampleRow } from './fixtures';
 
 export default {
   title: 'Design System/Components/Table/Cell Renderers/ActionCell',
   component: ActionCell,
-} as ComponentMeta<typeof ActionCell>;
+} as Meta<typeof ActionCell>;
 
-export const Basic: ComponentStory<typeof ActionCell> = args => (
+export const Basic: StoryFn<typeof ActionCell> = args => (
   <ActionCell {...args} />
 );
 

superset-frontend/src/components/Table/cell-renderers/BooleanCell/BooleanCell.stories.tsx

@@ -16,15 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import BooleanCell from '.';
 
 export default {
   title: 'Design System/Components/Table/Cell Renderers/BooleanCell',
   component: BooleanCell,
-} as ComponentMeta<typeof BooleanCell>;
+} as Meta<typeof BooleanCell>;
 
-export const Basic: ComponentStory<typeof BooleanCell> = args => (
+export const Basic: StoryFn<typeof BooleanCell> = args => (
   <BooleanCell {...args} />
 );
 

superset-frontend/src/components/Table/cell-renderers/ButtonCell/ButtonCell.stories.tsx

@@ -16,18 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { ButtonCell } from './index';
 
 export default {
   title: 'Design System/Components/Table/Cell Renderers/ButtonCell',
   component: ButtonCell,
-} as ComponentMeta<typeof ButtonCell>;
+} as Meta<typeof ButtonCell>;
 
 const clickHandler = action('button cell onClick');
 
-export const Basic: ComponentStory<typeof ButtonCell> = args => (
+export const Basic: StoryFn<typeof ButtonCell> = args => (
   <ButtonCell {...args} />
 );
 
@@ -43,7 +43,7 @@ Basic.args = {
   },
 };
 
-export const Secondary: ComponentStory<typeof ButtonCell> = args => (
+export const Secondary: StoryFn<typeof ButtonCell> = args => (
   <ButtonCell {...args} />
 );
 

superset-frontend/src/components/Table/cell-renderers/NullCell/NullCell.stories.tsx

@@ -16,12 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import NullCell from '.';
 
 export default {
   title: 'Design System/Components/Table/Cell Renderers/NullCell',
   component: NullCell,
-} as ComponentMeta<typeof NullCell>;
+} as Meta<typeof NullCell>;
 
-export const Basic: ComponentStory<typeof NullCell> = () => <NullCell />;
+export const Basic: StoryFn<typeof NullCell> = () => <NullCell />;

superset-frontend/src/components/Table/cell-renderers/NumericCell/NumericCell.stories.tsx

@@ -16,15 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { CurrencyCode, NumericCell, LocaleCode, Style } from './index';
 
 export default {
   title: 'Design System/Components/Table/Cell Renderers/NumericCell',
   component: NumericCell,
-} as ComponentMeta<typeof NumericCell>;
+} as Meta<typeof NumericCell>;
 
-export const Basic: ComponentStory<typeof NumericCell> = args => (
+export const Basic: StoryFn<typeof NumericCell> = args => (
   <NumericCell {...args} />
 );
 
@@ -32,7 +32,7 @@ Basic.args = {
   value: 5678943,
 };
 
-export const FrenchLocale: ComponentStory<typeof NumericCell> = args => (
+export const FrenchLocale: StoryFn<typeof NumericCell> = args => (
   <NumericCell {...args} />
 );
 

superset-frontend/src/components/Table/cell-renderers/TimeCell/TimeCell.stories.tsx

@@ -16,18 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { TimeFormats } from '@superset-ui/core';
 import TimeCell from '.';
 
 export default {
   title: 'Design System/Components/Table/Cell Renderers/TimeCell',
   component: TimeCell,
-} as ComponentMeta<typeof TimeCell>;
+} as Meta<typeof TimeCell>;
 
-export const Basic: ComponentStory<typeof TimeCell> = args => (
+export const Basic: StoryFn<typeof TimeCell> = args => <TimeCell {...args} />;
-  <TimeCell {...args} />
-);
 
 Basic.args = {
   value: new Date('2015-07-02T16:16:00Z').getTime(),

superset-frontend/src/components/TimezoneSelector/TimezoneSelector.stories.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import TimezoneSelector, { TimezoneSelectorProps } from './index';
 
 export default {

superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.stories.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import DatasetPanel from './DatasetPanel';
 import { exampleColumns } from './fixtures';
@@ -25,9 +25,9 @@ import { exampleColumns } from './fixtures';
 export default {
   title: 'Superset App/views/CRUD/data/dataset/DatasetPanel',
   component: DatasetPanel,
-} as ComponentMeta<typeof DatasetPanel>;
+} as Meta<typeof DatasetPanel>;
 
-export const Basic: ComponentStory<typeof DatasetPanel> = args => (
+export const Basic: StoryFn<typeof DatasetPanel> = args => (
   <ThemeProvider theme={supersetTheme}>
     <div style={{ height: '350px' }}>
       <DatasetPanel {...args} />

superset-frontend/webpack.config.js

@@ -309,7 +309,7 @@ const config = {
     // resolve modules from `/superset_frontend/node_modules` and `/superset_frontend`
     modules: ['node_modules', APP_DIR],
     alias: {
-      // TODO: remove aliases once React has been upgraded to v. 17 and
+      // TODO: remove aliases once React has been upgraded to v17 and
       //  AntD version conflict has been resolved
       antd: path.resolve(path.join(APP_DIR, './node_modules/antd')),
       react: path.resolve(path.join(APP_DIR, './node_modules/react')),
@@ -322,6 +322,14 @@ const config = {
       This prevents "Module not found" errors for moment locale files.
       */
       'moment/min/moment-with-locales': false,
+      // Temporary workaround to allow Storybook 8 to work with existing React v16-compatible stories.
+      // Remove below alias once React has been upgreade to v18.
+      '@storybook/react-dom-shim': path.resolve(
+        path.join(
+          APP_DIR,
+          './node_modules/@storybook/react-dom-shim/dist/react-16',
+        ),
+      ),
     },
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.yml'],
     fallback: {