feat(storybook): Co-habitating/Upgrading Storybooks to v7 (dependency…

… madness ensues) (apache#26907)

.github/workflows/dependency-review.yml

@@ -23,3 +23,5 @@ jobs:
           # compatible/incompatible licenses addressed here: https://www.apache.org/legal/resolved.html
           # find SPDX identifiers here: https://spdx.org/licenses/
           deny-licenses: MS-LPL, BUSL-1.1, QPL-1.0, Sleepycat, SSPL-1.0, CPOL-1.02, AGPL-3.0, GPL-1.0+, BSD-4-Clause-UC, NPL-1.0, NPL-1.1, JSON
+          # adding an exception for an ambigious license on store2, which has been resolved in the latest version. It's MIT: https://github.com/nbubna/store/blob/master/LICENSE-MIT
+          allow-dependencies-licenses: 'pkg:npm/store2@2.14.2'

.gitignore

@@ -71,6 +71,7 @@ superset/static/version_info.json
 superset-frontend/**/esm/*
 superset-frontend/**/lib/*
 superset-frontend/**/storybook-static/*
+superset-frontend/migration-storybook.log
 yarn-error.log
 *.map
 *.min.js

.pre-commit-config.yaml

@@ -78,7 +78,7 @@ repos:
       - id: black
         language_version: python3
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v2.4.1 # Use the sha or tag you want to point at
+    rev: v3.1.0 # Use the sha or tag you want to point at
     hooks:
       - id: prettier
         args: ["--ignore-path=./superset-frontend/.prettierignore"]

superset-frontend/.eslintrc.js

@@ -43,6 +43,7 @@ module.exports = {
     'prettier/react',
     'plugin:react-hooks/recommended',
     'plugin:react-prefer-function-component/recommended',
+    'plugin:storybook/recommended',
   ],
   parser: '@babel/eslint-parser',
   parserOptions: {
@@ -69,13 +70,13 @@ module.exports = {
     },
   },
   plugins: [
-    'prettier',
     'react',
     'file-progress',
     'lodash',
     'theme-colors',
     'translation-vars',
     'react-prefer-function-component',
+    'prettier',
   ],
   overrides: [
     {
@@ -88,7 +89,7 @@ module.exports = {
         'prettier/@typescript-eslint',
         'prettier/react',
       ],
-      plugins: ['@typescript-eslint/eslint-plugin', 'prettier', 'react'],
+      plugins: ['@typescript-eslint/eslint-plugin', 'react', 'prettier'],
       rules: {
         '@typescript-eslint/ban-ts-ignore': 0,
         '@typescript-eslint/ban-ts-comment': 0, // disabled temporarily
@@ -161,6 +162,28 @@ module.exports = {
         'react/static-property-placement': 0, // re-enable up for discussion
         'prettier/prettier': 'error',
         'file-progress/activate': 1,
+        // delete me later: temporary rules to help with migration
+        'jsx-no-useless-fragment': 0,
+        'react/function-component-definition': [
+          0,
+          {
+            namedComponents: 'arrow-function',
+          },
+        ],
+        'default-param-last': 0,
+        'react/no-unstable-nested-components': 0,
+        'react/jsx-no-useless-fragment': 0,
+        'react/no-unknown-property': 0,
+        'no-restricted-exports': 0,
+        'react/default-props-match-prop-types': 0,
+        'no-unsafe-optional-chaining': 0,
+        'react/state-in-constructor': 0,
+        'import/no-import-module-exports': 0,
+        'no-promise-executor-return': 0,
+        'prefer-regex-literals': 0,
+        'react/no-unused-class-component-methods': 0,
+        'import/no-relative-packages': 0,
+        'prefer-exponentiation-operator': 0,
       },
       settings: {
         'import/resolver': {
@@ -203,6 +226,22 @@ module.exports = {
         ],
         'no-only-tests/no-only-tests': 'error',
         'max-classes-per-file': 0,
+        // temporary rules to help with migration - please re-enable!
+        'testing-library/await-async-queries': 0,
+        'testing-library/await-async-utils': 0,
+        'testing-library/no-await-sync-events': 0,
+        'testing-library/no-render-in-lifecycle': 0,
+        'testing-library/no-unnecessary-act': 0,
+        'testing-library/no-wait-for-multiple-assertions': 0,
+        'testing-library/prefer-screen-queries': 0,
+        'testing-library/await-async-events': 0,
+        'testing-library/no-node-access': 0,
+        'testing-library/no-wait-for-side-effects': 0,
+        'testing-library/prefer-presence-queries': 0,
+        'testing-library/render-result-naming-convention': 0,
+        'testing-library/no-container': 0,
+        'testing-library/prefer-find-by': 0,
+        'testing-library/no-manual-cleanup': 0,
       },
     },
     {
@@ -222,6 +261,8 @@ module.exports = {
         'theme-colors/no-literal-colors': 0,
         'translation-vars/no-template-vars': 0,
         'no-restricted-imports': 0,
+        'jest/no-alias-methods': 0,
+        'react/no-void-elements': 0,
       },
     },
   ],
@@ -310,6 +351,24 @@ module.exports = {
     'react/static-property-placement': 0, // disabled temporarily
     'react-prefer-function-component/react-prefer-function-component': 1,
     'prettier/prettier': 'error',
+    // disabling some things that come with the eslint 7->8 upgrade. Will address these in a separate PR
+    'jest/no-alias-methods': 0,
+    'react/no-unknown-property': 0,
+    'react/no-void-elements': 0,
+    'react/function-component-definition': [
+      0,
+      {
+        namedComponents: 'arrow-function',
+      },
+    ],
+    'react/no-unstable-nested-components': 0,
+    'react/jsx-no-useless-fragment': 0,
+    'default-param-last': 0,
+    'no-import-assign': 0,
+    'import/no-relative-packages': 0,
+    'default-case-last': 0,
+    'no-promise-executor-return': 0,
+    'react/no-unused-class-component-methods': 0,
   },
   ignorePatterns,
 };

superset-frontend/.storybook/main.js

@@ -1,3 +1,4 @@
+import { dirname, join } from 'path';
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -20,21 +21,21 @@
 const customConfig = require('../webpack.config.js');
 
 module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
   stories: [
     '../src/@(components|common|filters|explore|views|dashboard|features)/**/*.stories.@(tsx|jsx)',
-    '../src/@(components|common|filters|explore|views|dashboard|features)/**/*.*.@(mdx)',
+    '../packages/superset-ui-demo/storybook/stories/**/*.*.@(tsx|jsx)',
   ],
+
   addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-links',
-    'storybook-addon-jsx',
-    '@storybook/addon-knobs',
-    'storybook-addon-paddings',
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('storybook-addon-jsx'),
+    getAbsolutePath('@storybook/addon-controls'),
+    getAbsolutePath('@storybook/addon-mdx-gfm'),
   ],
+
   staticDirs: ['../src/assets/images'],
+
   webpackFinal: config => ({
     ...config,
     module: {
@@ -47,7 +48,21 @@ module.exports = {
     },
     plugins: [...config.plugins, ...customConfig.plugins],
   }),
+
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },
+
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {},
+  },
+
+  docs: {
+    autodocs: false,
+  },
 };
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

superset-frontend/.storybook/preview.jsx

@@ -17,10 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { addDecorator } from '@storybook/react';
 import { jsxDecorator } from 'storybook-addon-jsx';
-import { addParameters } from '@storybook/react';
-import WithPaddings from 'storybook-addon-paddings';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import { combineReducers, createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
@@ -52,12 +49,9 @@ const providerDecorator = Story => (
   </Provider>
 );
 
-addDecorator(jsxDecorator);
-addDecorator(themeDecorator);
-addDecorator(providerDecorator);
-addDecorator(WithPaddings);
+export const decorators = [jsxDecorator, themeDecorator, providerDecorator];
 
-addParameters({
+export const parameters = {
   paddings: {
     values: [
       { name: 'None', value: '0px' },
@@ -88,4 +82,4 @@ addParameters({
     },
   },
   controls: { expanded: true, sort: 'alpha' },
-});
+};