Upgrade storybook

Author: dmt0

.storybook/main.js

@@ -1,6 +1,13 @@
 module.exports = {
+  stories: ['../src/__stories__/*.stories.js'],
   core: {
-    builder: 'webpack5',
+    disableTelemetry: true, // Disables telemetry
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: false,
   },
-  stories: ['../src/__stories__/index.js'],
 };

.storybook/webpack.config.js

@@ -1,6 +1,6 @@
 const path = require('path');
 
-module.exports = async ({config, mode}) => {
+module.exports = async ({config}) => {
   config.module.rules.push({
     test: /\.scss$/,
     use: ['style-loader', 'css-loader', 'sass-loader'],

dev/App.js

@@ -11,7 +11,7 @@ import dataSources from './dataSources';
 // https://github.com/plotly/react-chart-editor#mapbox-access-tokens
 import ACCESS_TOKENS from '../accessTokens';
 
-// import {customConfigTest} from '../src/__stories__';
+// import {customConfigTest} from './customConfigTest';
 
 const dataSourceOptions = Object.keys(dataSources).map((name) => ({
   value: name,

src/__stories__/index.js renamed to dev/customConfigTest.js

@@ -1,17 +1,3 @@
-import {TestEditor, setupGraphDiv, fixtures} from 'lib/test-utils';
-import plotly from 'plotly.js/dist/plotly';
-
-import {PanelMenuWrapper} from '../components';
-
-import * as mocks from '../../dev/percy';
-import * as panels from '../default_panels/';
-
-import '../../dev/styles.css';
-import '../styles/main.scss';
-import './stories.css';
-
-import React from 'react';
-import {storiesOf} from '@storybook/react';
 export const customConfigTest = {
   visibility_rules: {
     blacklist: [
@@ -78,68 +64,3 @@ export const customConfigTest = {
     ],
   },
 };
-
-/**
- * To add more Percy tests - add a mock file to /dev/percy, add it to /dev/percy/index.js
- * To specify which panels to test with the mock, add entry to panelsToTest, else all panels will be tested
- */
-const panelsToTest = {
-  bar: ['GraphCreatePanel', 'StyleTracesPanel'],
-  box: ['GraphCreatePanel', 'StyleTracesPanel'],
-  pie: ['GraphCreatePanel', 'StyleTracesPanel'],
-  histogram: ['GraphCreatePanel', 'StyleTracesPanel'],
-  histogram2d: ['GraphCreatePanel', 'StyleTracesPanel'],
-  violin: ['GraphCreatePanel', 'StyleTracesPanel'],
-  waterfall: ['GraphCreatePanel', 'StyleTracesPanel'],
-  sunburst: ['GraphCreatePanel', 'StyleTracesPanel'],
-  sankey: ['GraphCreatePanel', 'StyleTracesPanel'],
-  geoTest: ['GraphCreatePanel', 'StyleMapsPanel', 'StyleTracesPanel'],
-  funnel: ['GraphCreatePanel', 'StyleTracesPanel'],
-  funnelarea: ['GraphCreatePanel', 'StyleTracesPanel'],
-};
-
-window.URL.createObjectURL = function () {
-  return null;
-};
-
-const panelFixture = (Panel, group, name, figure, customConfig) => {
-  const gd = setupGraphDiv(figure, plotly);
-  gd._context = plotly.setPlotConfig();
-  gd._context.setBackground = () => {
-    return null;
-  };
-
-  return (
-    <div className="plotly_editor">
-      <TestEditor
-        plotly={plotly}
-        graphDiv={gd}
-        dataSources={fixtures.scatter().dataSources}
-        dataSourceOptions={fixtures.scatter().dataSourceOptions}
-        customConfig={customConfig || {}}
-      >
-        <PanelMenuWrapper>
-          <Panel group={group} name={name} />
-        </PanelMenuWrapper>
-      </TestEditor>
-    </div>
-  );
-};
-
-let stories = storiesOf('Panels', module);
-
-Object.keys(mocks).forEach((m) => {
-  const selectedPanels = panelsToTest[m] ? panelsToTest[m] : Object.keys(panels);
-
-  selectedPanels.forEach((p) => {
-    const words = p.split(/(?=[A-Z])/);
-    const panelGroup = words[0];
-    const panelName = words.slice(1, -1).join(' ');
-
-    stories = stories
-      .add(`${m}_${p}`, () => panelFixture(panels[p], panelGroup, panelName, mocks[m]))
-      .add(`${m}_${p}_withCustomConfig`, () =>
-        panelFixture(panels[p], panelGroup, panelName, mocks[m], customConfigTest)
-      );
-  });
-});

package.json

@@ -16,13 +16,13 @@
     "build": "BABEL_ENV=production rimraf lib && mkdir lib && npm run build:js && npm run build:css && npm run build:combined-translation-keys",
     "watch": "webpack serve --hot --mode development",
     "prepublishOnly": "npm run build",
-    "storybook": "start-storybook -p 9001 -c .storybook",
+    "storybook": "storybook dev -p 9001 -c .storybook",
     "test": "npm run test:lint && npm run test:pretty && npm run test:js",
     "test:js": "jest --setupTestFrameworkScriptFile=raf/polyfill --maxWorkers=2",
     "test:lint": "eslint \"src/**/*.js\" \"dev/**/*.js\" \"examples/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
     "test:pretty": "prettier -l \"src/**/*.{js,scss}\" \"dev/**/*.{js,scss}\" \"examples/**/*.{js,scss}\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
-    "test:percy": "node --max-old-space-size=4096 $(npm bin)/build-storybook && percy storybook ./storybook-static",
-    "test:percy-local": "node --max-old-space-size=4096 $(npm bin)/build-storybook",
+    "test:percy": "storybook build && percy storybook ./storybook-static",
+    "test:percy-local": "storybook build",
     "test:watch": "jest --watch"
   },
   "dependencies": {
@@ -60,9 +60,10 @@
     "@hot-loader/react-dom": "16.14.0",
     "@percy/cli": "1.27.1",
     "@percy/storybook": "4.3.6",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/manager-webpack5": "^6.5.14",
-    "@storybook/react": "6.5.16",
+    "@storybook/blocks": "7.4.1",
+    "@storybook/react": "7.4.1",
+    "@storybook/react-webpack5": "7.4.1",
+    "@storybook/source-loader": "^7.4.1",
     "autoprefixer": "10.4.15",
     "babel-jest": "26.6.3",
     "babel-loader": "9.1.3",
@@ -99,6 +100,7 @@
     "rimraf": "5.0.1",
     "sass": "1.66.1",
     "sass-loader": "13.3.2",
+    "storybook": "7.4.1",
     "style-loader": "3.3.3",
     "webpack": "5.88.2",
     "webpack-cli": "5.1.4",
@@ -109,6 +111,9 @@
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0"
   },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  },
   "engines": {
     "node": ">=12.13.0"
   },