devDeps: storybook@7 (#19092)

* devDeps: pin @babel/core and @babel/runtime in resulotions Without this: misses patch, lavamoat error * storybook 6 to 7 migration * devDeps: add @storybook/addon-mdx-gfm * fix lint deps * devDeps: remove unused require-from-string * devDeps/resolutions: @types/react@^16.9.53 * devDeps: add @storybook/cli * storybook: new-frameworks migration * iyarc: remove resolved dependency advisory * deps: set [email protected] in resolutions This is required since a file is copied over from a set path in the dist package subdirectory as of d13aabd (#10014). A future update should either vendor the shim, or update to compatibility with a maintained upstream version. * mdx2 migration fixes * chore: bump ljharb packages * devDeps: @storybook/*@^7.0.10->^7.0.11 * storybook: update preview.js to use v7 addon api * ci/test/storybook: echo between storybook build&test * ci/circleci: resources tweak * info-tab: handle undefined global.platform * update lavamoat build policy * update lavamoat browserify policies
MetaMask · May 18, 2023 · 8675c78 · 8675c78
1 parent 9ef9327
commit 8675c78
Show file tree

Hide file tree

Showing 16 changed files with 5,033 additions and 4,750 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,6 +10,12 @@ executors:
     resource_class: medium+
     environment:
       NODE_OPTIONS: --max_old_space_size=2048
+  node-browsers-large:
+    docker:
+      - image: cimg/node:16.20-browsers
+    resource_class: large
+    environment:
+      NODE_OPTIONS: --max_old_space_size=2048
   shellcheck:
     docker:
       - image: koalaman/shellcheck-alpine@sha256:dfaf08fab58c158549d3be64fb101c626abc5f16f341b569092577ae207db199
@@ -500,7 +506,7 @@ jobs:
             - builds-test
 
   prep-build-storybook:
-    executor: node-browsers-medium-plus
+    executor: node-browsers-large
     steps:
       - checkout
       - attach_workspace:
@@ -551,7 +557,7 @@ jobs:
           command: yarn verify-locales --quiet
 
   test-storybook:
-    executor: node-browsers-medium-plus
+    executor: node-browsers-large
     steps:
       - checkout
       - attach_workspace:

diff --git a/.depcheckrc.yml b/.depcheckrc.yml
@@ -48,11 +48,14 @@ ignores:
   - 'improved-yarn-audit'
   - 'nyc'
   # storybook
+  - '@storybook/cli'
   - '@storybook/core'
   - '@storybook/addon-essentials'
   - '@storybook/addon-a11y'
+  - '@storybook/addon-mdx-gfm'
   - '@storybook/builder-webpack5'
   - '@storybook/manager-webpack5'
+  - '@storybook/react-webpack5'
   - 'storybook-dark-mode'
   - '@whitespace/storybook-addon-html'
   - 'react-syntax-highlighter'

diff --git a/.iyarc b/.iyarc
@@ -1,11 +1,6 @@
 # improved-yarn-audit advisory exclusions
 GHSA-257v-vj4p-3w2h
 
-# yarn berry's `yarn npm audit` script reports the following vulnerability but
-# it is a false positive. The offending version of 'ws' that is installed is
-# 7.1.1 and is included only via remote-redux-devtools which is a devDependency
-GHSA-6fc8-4gx4-v693
-
 # request library is subject to SSRF.
 # addressed by temporary patch in .yarn/patches/request-npm-2.88.2-f4a57c72c4.patch
 GHSA-p8p7-x288-28g6
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,49 +1,39 @@
 const path = require('path');
-
-const { ProvidePlugin } = require('webpack');
+const {
+  ProvidePlugin
+} = require('webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-
-const { generateIconNames } = require('../development/generate-icon-names');
-
+const {
+  generateIconNames
+} = require('../development/generate-icon-names');
 module.exports = {
   core: {
-    builder: 'webpack5',
+    disableTelemetry: true
   },
-  features: { buildStoriesJson: true },
-  stories: [
-    '../ui/**/*.stories.js',
-    '../ui/**/*.stories.tsx',
-    '../ui/**/*.stories.mdx',
-    './*.stories.mdx',
-  ],
-  addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-actions',
-    '@storybook/addon-a11y',
-    '@storybook/addon-knobs',
-    './i18n-party-addon/register.js',
-    'storybook-dark-mode',
-    '@whitespace/storybook-addon-html'
-  ],
+  features: {
+    buildStoriesJson: true
+  },
+  stories: ['../ui/**/*.stories.js', '../ui/**/*.stories.tsx', '../ui/**/*.stories.mdx', './*.stories.mdx'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-actions', '@storybook/addon-a11y', '@storybook/addon-knobs', './i18n-party-addon/register.js', 'storybook-dark-mode', '@whitespace/storybook-addon-html', '@storybook/addon-mdx-gfm'],
   staticDirs: ['../app', './images'],
   // Uses babel.config.js settings and prevents "Missing class properties transform" error
-  babel: async (options) => ({ overrides: options.overrides }),
+  babel: async options => ({
+    overrides: options.overrides
+  }),
   // Sets env variables https://storybook.js.org/docs/react/configure/environment-variables/
-  env: async (config) => {
+  env: async config => {
     return {
       ...config,
       // Creates the icon names environment variable for the component-library/icon/icon.js component
-      ICON_NAMES: generateIconNames(),
+      ICON_NAMES: generateIconNames()
     };
   },
-  webpackFinal: async (config) => {
+  webpackFinal: async config => {
     config.context = process.cwd();
     config.node = {
-      __filename: true,
+      __filename: true
     };
-    config.resolve.alias['webextension-polyfill'] = require.resolve(
-      '../ui/__mocks__/webextension-polyfill.js',
-    );
+    config.resolve.alias['webextension-polyfill'] = require.resolve('../ui/__mocks__/webextension-polyfill.js');
     config.resolve.fallback = {
       child_process: false,
       constants: false,
@@ -54,53 +44,45 @@ module.exports = {
       os: false,
       path: false,
       stream: require.resolve('stream-browserify'),
-      _stream_transform: require.resolve('readable-stream/lib/_stream_transform.js'),
       zlib: false,
+      _stream_transform: require.resolve('readable-stream/lib/_stream_transform.js'),
     };
     config.module.strictExportPresence = true;
     config.module.rules.push({
       test: /\.scss$/,
-      use: [
-        'style-loader',
-        {
-          loader: 'css-loader',
-          options: {
-            import: false,
-            url: false,
-          },
-        },
-        {
-          loader: 'sass-loader',
-          options: {
-            sourceMap: true,
-            implementation: require('sass'),
-            sassOptions: {
-              includePaths: ['ui/css/'],
-            },
-          },
-        },
-      ],
+      use: ['style-loader', {
+        loader: 'css-loader',
+        options: {
+          import: false,
+          url: false
+        }
+      }, {
+        loader: 'sass-loader',
+        options: {
+          sourceMap: true,
+          implementation: require('sass'),
+          sassOptions: {
+            includePaths: ['ui/css/']
+          }
+        }
+      }]
     });
-    config.plugins.push(
-      new CopyWebpackPlugin({
-        patterns: [
-          {
-            from: path.join(
-              'node_modules',
-              '@fortawesome',
-              'fontawesome-free',
-              'webfonts',
-            ),
-            to: path.join('fonts', 'fontawesome'),
-          },
-        ],
-      }),
-    );
-    config.plugins.push(
-      new ProvidePlugin({
-        Buffer: ['buffer', 'Buffer'],
-      }),
-    );
+    config.plugins.push(new CopyWebpackPlugin({
+      patterns: [{
+        from: path.join('node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'),
+        to: path.join('fonts', 'fontawesome')
+      }]
+    }));
+    config.plugins.push(new ProvidePlugin({
+      Buffer: ['buffer', 'Buffer']
+    }));
     return config;
   },
+  docs: {
+    autodocs: true
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  }
 };
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,5 +1,9 @@
+/*
+  * The addParameters and addDecorator APIs to add global decorators and parameters, exported by the various frameworks (e.g. @storybook/react) and @storybook/client were deprecated in 6.0 and have been removed in 7.0.
+
+Instead, use export const parameters = {}; and export const decorators = []; in your .storybook/preview.js. Addon authors similarly should use such an export in a preview entry file (see Preview entries).
+  * */
 import React, { useEffect, useState } from 'react';
-import { addDecorator, addParameters } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Provider } from 'react-redux';
 import configureStore from '../ui/store/store';
@@ -13,9 +17,9 @@ import { Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 import { _setBackgroundConnection } from '../ui/store/action-queue';
 import MetaMaskStorybookTheme from './metamask-storybook-theme';
-import addons from '@storybook/addons';
+import { addons } from '@storybook/addons';
 
-addParameters({
+export const parameters = {
   backgrounds: {
     default: 'default',
     values: [
@@ -41,7 +45,7 @@ addParameters({
   controls: {
     expanded: true,
   },
-});
+};
 
 export const globalTypes = {
   locale: {
@@ -117,4 +121,6 @@ const metamaskDecorator = (story, context) => {
   );
 };
 
-addDecorator(metamaskDecorator);
+export const decorators = [
+  metamaskDecorator,
+];