Upgrade to Storybook 7 (#1302)

assets/.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
     'plugin:react/recommended',
     'airbnb',
     'prettier',
+    'plugin:storybook/recommended',
   ],
   overrides: [],
   parserOptions: {
@@ -41,15 +42,23 @@ module.exports = {
   plugins: ['react', 'jest'],
   rules: {
     'no-console': 'error',
-    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    'no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+      },
+    ],
     'react/prop-types': 'off',
     camelcase: 'off',
     'import/no-cycle': 'off',
     'import/prefer-default-export': 'off',
     'react/jsx-props-no-spreading': 'off',
     'no-unused-expressions': [
       'error',
-      { allowShortCircuit: true, allowTernary: true },
+      {
+        allowShortCircuit: true,
+        allowTernary: true,
+      },
     ],
   },
 };

assets/.storybook/main.js

@@ -1,22 +1,28 @@
 const path = require('path');
-
 module.exports = {
-  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../js/**/*.stories.mdx', '../js/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-actions',
     '@storybook/addon-interactions',
   ],
-  framework: '@storybook/react',
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
   webpackFinal: async (config) => {
     config.resolve.alias = {
       ...config.resolve.alias,
       '@components': path.resolve(__dirname, '../js/components'),
       '@lib': path.resolve(__dirname, '../js/lib'),
       '@hooks': path.resolve(__dirname, '../js/hooks'),
       '@state': path.resolve(__dirname, '../js/state'),
+      '@static': path.resolve(__dirname, '../static'),
     };
     return config;
   },
+  docs: {
+    autodocs: true,
+  },
 };