feat(build): uplift Storybook to v8

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-controls": "^7.6.13",
-    "@storybook/addon-docs": "^7.6.13",
-    "@storybook/addon-essentials": "^7.6.13",
-    "@storybook/addon-links": "^7.6.13",
-    "@storybook/addon-mdx-gfm": "^7.6.15",
-    "@storybook/addons": "^7.6.13",
-    "@storybook/client-api": "^7.6.13",
-    "@storybook/components": "^7.6.13",
-    "@storybook/react": "^7.6.13",
-    "@storybook/react-webpack5": "^7.6.13",
+    "@storybook/addon-actions": "^8.1.11",
+    "@storybook/addon-controls": "^8.1.11",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/addon-mdx-gfm": "^8.1.11",
+    "@storybook/preview-api": "^8.1.11",
+    "@storybook/components": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/react-webpack5": "^8.1.11",
     "@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-addon-jsx": "^7.3.14",
+    "storybook": "^8.1.11",
+    "@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-controls": "^7.6.13",
-    "@storybook/addon-links": "^7.6.13",
-    "@storybook/addons": "^7.6.13",
-    "@storybook/react": "^7.6.13",
-    "@storybook/types": "^7.6.19",
+    "@storybook/addon-actions": "^8.1.11",
+    "@storybook/addon-controls": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/types": "^8.1.11",
     "@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
-      language="jsx"
-      format
-      code={`
-      export type Dashboards = {
-        type: MetadataType.Dashboards;
-        title: string;
-        description?: string;
-        onClick?: (type: string) => void;
-      };`}
-    />
-
-    <Source
-      language="jsx"
-      format
-      code={`
-      export type Description = {
-        type: MetadataType.Description;
-        value: string;
-        onClick?: (type: string) => void;
-      };`}
-    />
-
-    <Source
-      language="jsx"
-      format
-      code={`
-      export type LastModified = {
-        type: MetadataType.LastModified;
-        value: Date;
-        modifiedBy: string;
-        onClick?: (type: string) => void;
-      };`}
-    />
-
-    <Source
-      language="jsx"
-      format
-      code={`
-      export type Owner = {
-        type: MetadataType.Owner;
-        createdBy: string;
-        owners: string[];
-        createdOn: Date;
-        onClick?: (type: string) => void;
-      };`}
-    />
-
-    <Source
-      language="jsx"
-      format
-      code={`
-      export type Rows = {
-        type: MetadataType.Rows;
-        title: string;
-        onClick?: (type: string) => void;
-      };`}
-    />
-
-    <Source
-      language="jsx"
-      format
-      code={`
-      export type Sql = {
-        type: MetadataType.Sql;
-        title: string;
-        onClick?: (type: string) => void;
-      };`}
-    />
-
-    <Source
-      language="jsx"
-      format
-      code={`
-      export type Table = {
-        type: MetadataType.Table;
-        title: string;
-        onClick?: (type: string) => void;
-      };`}
-    />
-
-    <Source
-      language="jsx"
-      format
-      code={`
-      export type Tags = {
-        type: MetadataType.Tags;
-        values: string[];
-        onClick?: (type: string) => void;
-      };`}
-    />
+
+    <Markdown>
+      {`
+\`\`\`
+export enum MetadataType {
+  Dashboards = 'dashboards',
+  Description = 'description',
+  LastModified = 'lastModified',
+  Owner = 'owner',
+  Rows = 'rows',
+  Sql = 'sql',
+  Table = 'table',
+  Tags = 'tags',
+};
+\`\`\`
+      `}
+    </Markdown>
+
+    <Markdown>
+      {`
+\`\`\`
+export type Dashboards = {
+  type: MetadataType.Dashboards;
+  title: string;
+  description?: string;
+  onClick?: (type: string) => void;
+};
+\`\`\`
+      `}
+    </Markdown>
+
+    <Markdown>
+      {`
+\`\`\`
+export type Description = {
+  type: MetadataType.Description;
+  value: string;
+  onClick?: (type: string) => void;
+};
+\`\`\`
+      `}
+    </Markdown>
+
+    <Markdown>
+      {`
+\`\`\`
+export type LastModified = {
+  type: MetadataType.LastModified;
+  value: Date;
+  modifiedBy: string;
+  onClick?: (type: string) => void;
+};
+\`\`\`
+      `}
+    </Markdown>
+
+    <Markdown>
+      {`
+\`\`\`
+export type Owner = {
+  type: MetadataType.Owner;
+  createdBy: string;
+  owners: string[];
+  createdOn: Date;
+  onClick?: (type: string) => void;
+};
+\`\`\`
+      `}
+    </Markdown>
+
+    <Markdown>
+      {`
+\`\`\`
+export type Rows = {
+  type: MetadataType.Rows;
+  title: string;
+  onClick?: (type: string) => void;
+};
+\`\`\`
+      `}
+    </Markdown>
+
+    <Markdown>
+      {`
+\`\`\`
+export type Sql = {
+  type: MetadataType.Sql;
+  title: string;
+  onClick?: (type: string) => void;
+};
+\`\`\`
+      `}
+    </Markdown>
+
+    <Markdown>
+      {`
+\`\`\`
+export type Table = {
+  type: MetadataType.Table;
+  title: string;
+  onClick?: (type: string) => void;
+};
+\`\`\`
+      `}
+    </Markdown>
+
+    <Markdown>
+      {`
+\`\`\`
+export type Tags = {
+  type: MetadataType.Tags;
+  values: string[];
+  onClick?: (type: string) => void;
+};
+\`\`\`
+      `}
+    </Markdown>
   </>
 );