Update to @storybook/*@6 (#9956)

Our Storybook dependencies have been updated to v6.1.9, from v5. This
was done to address a security vulnerability in a transitive dependency
of these packages (`highlight.js`).

The primary changes required by this Storybook update were the change
in import path for the `withKnobs` hook, the change in background
config format, and the webpack configuration. Storybook seems to work
correctly.

The migration was guided by the Storybook changelog[1] and the
Storybook v6 migration guide[2].

There is one Storybook error remaining; it fails to load the Euclid
font. This is a pre-existing error though, so we can fix it in a later
PR.

The `yarn.lock` file was deduplicated in this PR as well, as it was
required to fix various install warnings that were introduced with this
update.

[1]: https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md
[2]: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md

.storybook/main.js

@@ -1,3 +1,7 @@
+const path = require('path')
+
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+
 module.exports = {
   stories: ['../ui/app/**/*.stories.js'],
   addons: [
@@ -5,4 +9,36 @@ module.exports = {
     '@storybook/addon-actions',
     '@storybook/addon-backgrounds'
   ],
+  webpackFinal: async (config) => {
+    config.module.strictExportPresence = true
+    config.module.rules.push({
+      test: /\.scss$/,
+      loaders: [
+        'style-loader',
+        {
+          loader: 'css-loader',
+          options: {
+            import: false,
+            url: false,
+          },
+        },
+        'resolve-url-loader',
+        {
+          loader: 'sass-loader',
+          options: {
+            sourceMap: true,
+          },
+        },
+      ],
+    })
+    config.plugins.push(new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: path.join('node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'),
+          to: path.join('fonts', 'fontawesome'),
+        },
+      ],
+    }))
+    return config
+  },
 }

.storybook/preview.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { addDecorator, addParameters } from '@storybook/react'
-import { withKnobs } from '@storybook/addon-knobs/react'
+import { withKnobs } from '@storybook/addon-knobs'
 import { I18nProvider, LegacyI18nProvider } from '../ui/app/contexts/i18n'
 import { Provider } from 'react-redux'
 import configureStore from '../ui/app/store/store'
@@ -8,10 +8,13 @@ import '../ui/app/css/index.scss'
 import en from '../app/_locales/en/messages'
 
 addParameters({
-  backgrounds: [
+  backgrounds: {
-    { name: 'light', value: '#FFFFFF'},
+    default: 'light',
-    { name: 'dark', value: '#333333' },
+    values: [
-  ],
+      { name: 'light', value: '#FFFFFF'},
+      { name: 'dark', value: '#333333' },
+    ],
+  }
 })
 
 const styles = {

.storybook/webpack.config.js

@@ -1,41 +0,0 @@
-const path = require('path')
-
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-
-module.exports = {
-  module: {
-    strictExportPresence: true,
-    rules: [
-      {
-        test: /\.scss$/,
-        loaders: [
-          'style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              import: false,
-              url: false,
-            },
-          },
-          'resolve-url-loader',
-          {
-            loader: 'sass-loader',
-            options: {
-              sourceMap: true,
-            },
-          },
-        ],
-      },
-    ],
-  },
-  plugins: [
-    new CopyWebpackPlugin({
-      patterns: [
-        {
-          from: path.join('node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'),
-          to: path.join('fonts', 'fontawesome'),
-        },
-      ],
-    }),
-  ],
-}

package.json

@@ -192,11 +192,11 @@
     "@metamask/forwarder": "^1.1.0",
     "@metamask/test-dapp": "^4.0.1",
     "@sentry/cli": "^1.58.0",
-    "@storybook/addon-actions": "^5.3.14",
+    "@storybook/addon-actions": "^6.1.9",
-    "@storybook/addon-backgrounds": "^5.3.14",
+    "@storybook/addon-backgrounds": "^6.1.9",
-    "@storybook/addon-knobs": "^5.3.14",
+    "@storybook/addon-knobs": "^6.1.9",
-    "@storybook/core": "^5.3.14",
+    "@storybook/core": "^6.1.9",
-    "@storybook/react": "^5.3.14",
+    "@storybook/react": "^6.1.9",
     "@storybook/storybook-deployer": "^2.8.6",
     "@testing-library/react": "^10.4.8",
     "@testing-library/react-hooks": "^3.2.1",

ui/app/components/ui/button-group/button-group.stories.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
 import classnames from 'classnames'
-import { text, boolean } from '@storybook/addon-knobs/react'
+import { text, boolean } from '@storybook/addon-knobs'
 import Button from '../button'
 import ButtonGroup from '.'
 

ui/app/components/ui/button/button.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
-import { text, boolean } from '@storybook/addon-knobs/react'
+import { text, boolean } from '@storybook/addon-knobs'
 import Button from '.'
 
 export default {

ui/app/components/ui/check-box/check-box.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
-import { boolean, select, text } from '@storybook/addon-knobs/react'
+import { boolean, select, text } from '@storybook/addon-knobs'
 import CheckBox, {
   CHECKED,
   INDETERMINATE,

ui/app/components/ui/dropdown/dropdown.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
-import { boolean, select, text } from '@storybook/addon-knobs/react'
+import { boolean, select, text } from '@storybook/addon-knobs'
 import Dropdown from '.'
 
 export default {

ui/app/components/ui/icon/icon.stories.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { color, number } from '@storybook/addon-knobs/react'
+import { color, number } from '@storybook/addon-knobs'
 import Approve from './approve-icon.component'
 import Copy from './copy-icon.component'
 import Interaction from './interaction-icon.component'

ui/app/components/ui/identicon/identicon.stories.js

@@ -1,6 +1,5 @@
 import React from 'react'
-import { text, boolean } from '@storybook/addon-knobs/react'
+import { text, boolean, number } from '@storybook/addon-knobs'
-import { number } from '@storybook/addon-knobs'
 import Identicon from './identicon.component'
 
 export default { title: 'Identicon' }

ui/app/components/ui/info-tooltip/info-tooltip.stories.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { text } from '@storybook/addon-knobs/react'
+import { text } from '@storybook/addon-knobs'
 import InfoTooltip from './info-tooltip'
 
 export default {

ui/app/components/ui/list-item/list-item.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { text } from '@storybook/addon-knobs/react'
+import { text } from '@storybook/addon-knobs'
 import Send from '../icon/send-icon.component'
 import Interaction from '../icon/interaction-icon.component'
 import Approve from '../icon/approve-icon.component'

ui/app/components/ui/popover/popover.stories.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { text } from '@storybook/addon-knobs/react'
+import { text } from '@storybook/addon-knobs'
 import { action } from '@storybook/addon-actions'
 import Popover from './popover.component'
 

ui/app/components/ui/tabs/tabs.stories.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { text } from '@storybook/addon-knobs/react'
+import { text } from '@storybook/addon-knobs'
 import Tab from './tab/tab.component'
 import Tabs from './tabs.component'
 

ui/app/pages/swaps/actionable-message/actionable-message.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
-import { text } from '@storybook/addon-knobs/react'
+import { text } from '@storybook/addon-knobs'
 import ActionableMessage from '.'
 
 export default {

ui/app/pages/swaps/build-quote/build-quote.stories.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { action } from '@storybook/addon-actions'
-import { boolean } from '@storybook/addon-knobs/react'
+import { boolean } from '@storybook/addon-knobs'
 import DropdownInputPair from '../dropdown-input-pair'
 import DropdownSearchList from '../dropdown-search-list'
 

ui/app/pages/swaps/countdown-timer/countdown-timer.stories.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { number } from '@storybook/addon-knobs/react'
+import { number } from '@storybook/addon-knobs'
 import CountdownTimer from './countdown-timer'
 
 export default {

ui/app/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { text, number } from '@storybook/addon-knobs/react'
+import { text, number } from '@storybook/addon-knobs'
 import ExchangeRateDisplay from './exchange-rate-display'
 
 export default {

ui/app/pages/swaps/fee-card/fee-card.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
-import { text } from '@storybook/addon-knobs/react'
+import { text } from '@storybook/addon-knobs'
 import FeeCard from './fee-card'
 
 const tokenApprovalTextComponent = (

ui/app/pages/swaps/main-quote-summary/main-quote-summary.stories.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { text, number, boolean } from '@storybook/addon-knobs/react'
+import { text, number, boolean } from '@storybook/addon-knobs'
 import MainQuoteSummary from './main-quote-summary'
 
 export default {

ui/app/pages/swaps/select-quote-popover/select-quote-popover.stories.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { action } from '@storybook/addon-actions'
-import { object } from '@storybook/addon-knobs/react'
+import { object } from '@storybook/addon-knobs'
 import Button from '../../../components/ui/button'
 import mockQuoteData from './mock-quote-data'
 import SelectQuotePopover from '.'