[web] Fix Storybook (#6803)

* Move deprecated CLI option to config
* Reduce custom Storybook webpack config
* Upgrade Storybook
* Update package-lock.json

GitOrigin-RevId: e480aa0298e481d3e78a62b91c067b62c05bdeaf

services/web/.storybook/main.js

@@ -10,41 +10,27 @@ process.env.SHARELATEX_CONFIG = path.resolve(
 const customConfig = require('../webpack.config.dev')
 
 module.exports = {
+  staticDirs: ['../public'],
   stories: [
     '../frontend/stories/**/*.stories.js',
     '../modules/**/stories/**/*.stories.js',
   ],
   addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
   webpackFinal: storybookConfig => {
-    // Combine Storybook's webpack loaders with our webpack loaders
     const rules = [
-      // Filter out the Storybook font file loader, which overrides our font
-      // file loader causing the font to fail to load
-      ...storybookConfig.module.rules.filter(
-        rule => !rule.test.toString().includes('woff')
-      ),
-      // Replace the LESS rule, and the CSS rule which conflicts with the built-in CSS loader
-      ...customConfig.module.rules.filter(
-        rule =>
-          !rule.test.toString().includes('less') &&
-          !rule.test.toString().includes('css')
-      ),
+      ...storybookConfig.module.rules,
       {
-        test: /\.less$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
+        test: /\.worker\.js$/,
+        use: 'worker-loader',
       },
     ]
 
-    // Combine Storybook's webpack plugins with our webpack plugins
-    const plugins = [...storybookConfig.plugins, ...customConfig.plugins]
-
     return {
       ...storybookConfig,
       module: {
         ...storybookConfig.module,
         rules,
       },
-      plugins,
     }
   },
 }

services/web/package.json

@@ -29,7 +29,7 @@
     "lint:fix": "eslint --fix .",
     "extract-translations": "i18next-scanner",
     "migrations": "east",
-    "storybook": "start-storybook -p 6006 -s ./public",
+    "storybook": "start-storybook -p 6006",
     "convert-themes": "node modules/source-editor/frontend/js/themes/convert.js",
     "routes": "bin/routes"
   },
@@ -206,9 +206,9 @@
   "devDependencies": {
     "@babel/register": "^7.14.5",
     "@juggle/resize-observer": "^3.3.1",
-    "@storybook/addon-a11y": "^6.4.10",
-    "@storybook/addon-essentials": "^6.4.10",
-    "@storybook/react": "^6.4.10",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/react": "^6.4.19",
     "@testing-library/dom": "^7.31.2",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^7.0.0",