CI - add metamaskbot comment "highlights" section for showing relevant storybook changes (#12095)

* ci/announce/highlight - add bot announcement section for "highlights" showing off important diffs + storybook highlights

* ci/announce/highlight - fix announcement message

* Update index.js

* xxx tmp xxx

* ci/announce/highlight - fix dirty file calculation

* ci/announce/highlight - try/catch wrap highlight generation for build stability

* ui - put fox emojis in the mascot component

* ci/announce/highlight - start storybook permalinks

* ci/announce/highlight - fix storybook permalink util

* ci/announce/highlight - fix storybook permalink util

* ci/announce/highlight - small styling fix

* storybook - use any easily predictable story id

* ci/announce/highlight - revert sample commit

* ci/announce/highlight - minimal documentation

.storybook/main.js

@@ -12,6 +12,10 @@ module.exports = {
     './i18n-party-addon/register.js',
   ],
   webpackFinal: async (config) => {
+    config.context = process.cwd()
+    config.node = {
+      __filename: true
+    }
     config.module.strictExportPresence = true;
     config.module.rules.push({
       test: /\.scss$/,

development/highlights/README.md

@@ -0,0 +1,3 @@
+### highlights
+
+the purpose of this directory is to house utilities for generating "highlight" messages for the metamaskbot comment based on changes included in the PR

development/highlights/index.js

@@ -0,0 +1,31 @@
+const { promisify } = require('util');
+const exec = promisify(require('child_process').exec);
+const storybook = require('./storybook.js');
+
+module.exports = { getHighlights };
+
+async function getHighlights({ artifactBase }) {
+  let highlights = '';
+  // here we assume the PR base branch ("target") is `develop` in lieu of doing
+  // a query against the github api which requires an access token
+  // see https://discuss.circleci.com/t/how-to-retrieve-a-pull-requests-base-branch-name-github/36911
+  const changedFiles = await getChangedFiles({ target: 'develop' });
+  console.log(`detected changed files vs develop:`);
+  for (const filename of changedFiles) {
+    console.log(`  ${filename}`);
+  }
+  const announcement = await storybook.getHighlightAnnouncement({
+    changedFiles,
+    artifactBase,
+  });
+  if (announcement) {
+    highlights += announcement;
+  }
+  return highlights;
+}
+
+async function getChangedFiles({ target }) {
+  const { stdout } = await exec(`git diff --name-only ${target}...HEAD`);
+  const changedFiles = stdout.split('\n').slice(0, -1);
+  return changedFiles;
+}

development/highlights/storybook.js

@@ -0,0 +1,86 @@
+const path = require('path');
+const { promisify } = require('util');
+const exec = promisify(require('child_process').exec);
+const dependencyTree = require('dependency-tree');
+
+const cwd = process.cwd();
+const resolutionCache = {};
+
+// 1. load stories
+// 2. load list per story
+// 3. filter against files
+module.exports = {
+  getHighlights,
+  getHighlightAnnouncement,
+};
+
+async function getHighlightAnnouncement({ changedFiles, artifactBase }) {
+  const highlights = await getHighlights({ changedFiles });
+  if (!highlights.length) return null;
+  const highlightsBody = highlights
+    .map((entry) => `\n- [${entry}](${urlForStoryFile(entry, artifactBase)})`)
+    .join('');
+  const announcement = `<details>
+    <summary>storybook</summary>
+    ${highlightsBody}
+  </details>\n\n`;
+  return announcement;
+}
+
+async function getHighlights({ changedFiles }) {
+  const highlights = [];
+  const storyFiles = await getAllStories();
+  // check each story file for dep graph overlap with changed files
+  for (const storyFile of storyFiles) {
+    const list = await getLocalDependencyList(storyFile);
+    if (list.some((entry) => changedFiles.includes(entry))) {
+      highlights.push(storyFile);
+    }
+  }
+  return highlights;
+}
+
+async function getAllStories() {
+  const { stdout } = await exec('find ui -name "*.stories.js"');
+  const matches = stdout.split('\n').slice(0, -1);
+  return matches;
+}
+
+async function getLocalDependencyList(filename) {
+  const list = dependencyTree
+    .toList({
+      filename,
+      // not sure what this does but its mandatory
+      directory: cwd,
+      webpackConfig: `.storybook/main.js`,
+      // skip all dependencies
+      filter: (entry) => !entry.includes('node_modules'),
+      // for memoization across trees: 30s -> 5s
+      visited: resolutionCache,
+    })
+    .map((entry) => path.relative(cwd, entry));
+  return list;
+}
+
+function urlForStoryFile(filename, artifactBase) {
+  const storyId = sanitize(filename);
+  return `${artifactBase}/storybook/index.html?path=/story/${storyId}`;
+}
+
+/**
+ * Remove punctuation and illegal characters from a story ID.
+ * See:
+ * https://gist.github.com/davidjrice/9d2af51100e41c6c4b4a
+ * https://github.com/ComponentDriven/csf/blame/7ac941eee85816a4c567ca85460731acb5360f50/src/index.ts
+ */
+function sanitize(string) {
+  return (
+    string
+      .toLowerCase()
+      // eslint-disable-next-line no-useless-escape
+      .replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/giu, '-')
+      .replace(/-+/gu, '-')
+      .replace(/^-+/u, '')
+      .replace(/-+$/u, '')
+  );
+}

development/metamaskbot-build-announce.js

@@ -4,6 +4,7 @@ const path = require('path');
 const fetch = require('node-fetch');
 const glob = require('fast-glob');
 const VERSION = require('../dist/chrome/manifest.json').version; // eslint-disable-line import/no-unresolved
+const { getHighlights } = require('./highlights');
 
 start().catch(console.error);
 
@@ -98,7 +99,7 @@ async function start() {
     .map((row) => `<li>${row}</li>`)
     .join('\n')}</ul>`;
   const exposedContent = `Builds ready [${SHORT_SHA1}]`;
-  const artifactsBody = `<details><summary>${exposedContent}</summary>${hiddenContent}</details>`;
+  const artifactsBody = `<details><summary>${exposedContent}</summary>${hiddenContent}</details>\n\n`;
 
   const benchmarkResults = {};
   for (const platform of platforms) {
@@ -124,7 +125,7 @@ async function start() {
 
   const summaryPlatform = 'chrome';
   const summaryPage = 'home';
-  let commentBody;
+  let commentBody = artifactsBody;
   if (benchmarkResults[summaryPlatform]) {
     try {
       const summaryPageLoad = Math.round(
@@ -196,15 +197,23 @@ async function start() {
         .join('')}</tr></thead>`;
       const benchmarkTableBody = `<tbody>${tableRows.join('')}</tbody>`;
       const benchmarkTable = `<table>${benchmarkTableHeader}${benchmarkTableBody}</table>`;
-      const benchmarkBody = `<details><summary>${benchmarkSummary}</summary>${benchmarkTable}</details>`;
+      const benchmarkBody = `<details><summary>${benchmarkSummary}</summary>${benchmarkTable}</details>\n\n`;
-      commentBody = `${artifactsBody}${benchmarkBody}`;
+      commentBody += `${benchmarkBody}`;
     } catch (error) {
       console.error(`Error constructing benchmark results: '${error}'`);
-      commentBody = artifactsBody;
     }
   } else {
     console.log(`No results for ${summaryPlatform} found; skipping benchmark`);
-    commentBody = artifactsBody;
+  }
+
+  try {
+    const highlights = await getHighlights({ artifactBase: BUILD_LINK_BASE });
+    if (highlights) {
+      const highlightsBody = `### highlights:\n${highlights}\n`;
+      commentBody += highlightsBody;
+    }
+  } catch (error) {
+    console.error(`Error constructing highlight results: '${error}'`);
   }
 
   const JSON_PAYLOAD = JSON.stringify({ body: commentBody });

package.json

@@ -252,6 +252,7 @@
     "css-to-xpath": "^0.1.0",
     "del": "^3.0.0",
     "depcheck": "^1.4.2",
+    "dependency-tree": "^8.1.1",
     "duplexify": "^4.1.1",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",

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

@@ -3,6 +3,7 @@ import AccountListItem from './account-list-item';
 
 export default {
   title: 'AccountListItem',
+  id: __filename,
 };
 
 export const AccountListItemComponent = () => {

ui/components/app/advanced-gas-controls/advanced-gas-controls.stories.js

@@ -4,6 +4,7 @@ import AdvancedGasControls from '.';
 
 export default {
   title: 'Advanced Gas Controls',
+  id: __filename,
 };
 
 export const simple = () => {

ui/components/app/edit-gas-display-education/edit-gas-display-education.stories.js

@@ -3,6 +3,7 @@ import EditGasDisplayEducation from '.';
 
 export default {
   title: 'Edit Gas Display',
+  id: __filename,
 };
 
 export const basic = () => {

ui/components/app/edit-gas-display/edit-gas-display.stories.js

@@ -3,6 +3,7 @@ import EditGasDisplay from '.';
 
 export default {
   title: 'Edit Gas Display',
+  id: __filename,
 };
 
 export const basic = () => {

ui/components/app/edit-gas-popover/edit-gas-popover.stories.js

@@ -3,6 +3,7 @@ import EditGasPopover from '.';
 
 export default {
   title: 'Edit Gas Display Popover',
+  id: __filename,
 };
 
 export const basic = () => {

ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js

@@ -5,6 +5,7 @@ import MetaMaskTemplateRenderer from '.';
 
 export default {
   title: 'MetaMask Template Renderer',
+  id: __filename,
 };
 
 const SECTIONS = {

ui/components/app/metamask-translation/metamask-translation.stories.js

@@ -6,6 +6,7 @@ import MetaMaskTranslation from './metamask-translation';
 
 export default {
   title: 'MetaMaskTranslation',
+  id: __filename,
 };
 
 const { keysWithSubstitution, keysWithoutSubstitution } = groupBy(

ui/components/app/signature-request/signature-request.stories.js

@@ -10,6 +10,7 @@ const containerStyle = {
 
 export default {
   title: 'Signature Request',
+  id: __filename,
 };
 
 export const FirstLook = () => {

ui/components/app/transaction-detail-item/transaction-detail-item.stories.js

@@ -5,6 +5,7 @@ import TransactionDetailItem from '.';
 
 export default {
   title: 'Transaction Detail Item',
+  id: __filename,
 };
 
 export const basic = () => {

ui/components/app/transaction-detail/transaction-detail.stories.js

@@ -6,6 +6,7 @@ import TransactionDetail from '.';
 
 export default {
   title: 'Transaction Detail',
+  id: __filename,
 };
 
 const rows = [

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

@@ -4,6 +4,7 @@ import TransactionList from '.';
 
 export default {
   title: 'Transaction List',
+  id: __filename,
 };
 
 const PageSet = ({ children }) => {

ui/components/app/transaction-total-banner/transaction-total-banner.stories.js

@@ -3,6 +3,7 @@ import TransactionTotalBanner from '.';
 
 export default {
   title: 'Transaction Total Banner',
+  id: __filename,
 };
 
 export const basic = () => {

ui/components/ui/actionable-message/actionable-message.stories.js

@@ -5,6 +5,7 @@ import ActionableMessage from '.';
 
 export default {
   title: 'ActionableMessage',
+  id: __filename,
 };
 
 export const NoAction = () => (

ui/components/ui/alert-circle-icon/alert-circle-icon.stories.js

@@ -3,6 +3,7 @@ import AlertCircleIcon from './alert-circle-icon.component';
 
 export default {
   title: 'AlertCircleIcon',
+  id: __filename,
 };
 
 export const dangerCircleIcon = () => <AlertCircleIcon type="danger" />;

ui/components/ui/box/box.stories.js

@@ -13,6 +13,7 @@ import Box from './box';
 
 export default {
   title: 'Box',
+  id: __filename,
 };
 
 const sizeKnobOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

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

@@ -7,6 +7,7 @@ import ButtonGroup from '.';
 
 export default {
   title: 'ButtonGroup',
+  id: __filename,
 };
 
 export const withButtons = () => (

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

@@ -5,6 +5,7 @@ import Button from '.';
 
 export default {
   title: 'Button',
+  id: __filename,
 };
 
 export const primaryType = () => (

ui/components/ui/callout/callout.stories.js

@@ -11,6 +11,7 @@ import Callout from './callout';
 
 export default {
   title: 'Callout',
+  id: __filename,
 };
 
 export const persistentCallout = () => (

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

@@ -9,6 +9,7 @@ import CheckBox, {
 
 export default {
   title: 'Check Box',
+  id: __filename,
 };
 
 const checkboxOptions = {

ui/components/ui/chip/chip.stories.js

@@ -10,6 +10,7 @@ import Chip from '.';
 
 export default {
   title: 'Chip',
+  id: __filename,
 };
 
 export const Plain = ({

ui/components/ui/circle-icon/circle-icon.stories.js

@@ -3,6 +3,7 @@ import CircleIcon from './circle-icon.component';
 
 export default {
   title: 'CircleIcon',
+  id: __filename,
 };
 
 export const basicCircleIcon = () => (

ui/components/ui/color-indicator/color-indicator.stories.js

@@ -5,6 +5,7 @@ import ColorIndicator from './color-indicator';
 
 export default {
   title: 'ColorIndicator',
+  id: __filename,
 };
 
 export const colorIndicator = () => (

ui/components/ui/definition-list/definition-list.stories.js

@@ -9,6 +9,7 @@ import DefinitionList from './definition-list';
 
 export default {
   title: 'Definition List',
+  id: __filename,
 };
 
 const basic = {

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

@@ -5,6 +5,7 @@ import Dropdown from '.';
 
 export default {
   title: 'Dropdown',
+  id: __filename,
 };
 
 const unnamedOptions = [...Array(10).keys()].map((index) => {

ui/components/ui/error-message/error-message.stories.js

@@ -4,6 +4,7 @@ import ErrorMessage from '.';
 
 export default {
   title: 'ErrorMessage',
+  id: __filename,
 };
 
 export const primaryType = () => (

ui/components/ui/form-field/form-field.stories.js

@@ -6,6 +6,7 @@ import FormField from '.';
 
 export default {
   title: 'FormField',
+  id: __filename,
 };
 
 export const Plain = ({ ...props }) => {

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

@@ -12,6 +12,7 @@ import InfoIconInverted from './info-icon-inverted.component';
 
 export default {
   title: 'Icon',
+  id: __filename,
 };
 
 export const copy = () => (

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

@@ -2,7 +2,10 @@ import React from 'react';
 import { text, boolean, number } from '@storybook/addon-knobs';
 import Identicon from './identicon.component';
 
-export default { title: 'Identicon' };
+export default {
+  title: 'Identicon',
+  id: __filename,
+};
 
 const diameterOptions = {
   range: true,

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

@@ -4,6 +4,7 @@ import InfoTooltip from './info-tooltip';
 
 export default {
   title: 'InfoTooltip',
+  id: __filename,
 };
 
 export const Top = () => (

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

@@ -11,6 +11,7 @@ import ListItem from './list-item.component';
 
 export default {
   title: 'ListItem',
+  id: __filename,
 };
 
 function Currencies({ primary, secondary }) {

ui/components/ui/mascot/mascot.stories.js

@@ -22,6 +22,7 @@ const buttonStyle = {
 
 export default {
   title: 'Mascot',
+  id: __filename,
 };
 
 export function Demo() {

ui/components/ui/menu/menu.stories.js

@@ -4,6 +4,7 @@ import { Menu, MenuItem } from '.';
 
 export default {
   title: 'Menu',
+  id: __filename,
 };
 
 export const Basic = () => {

ui/components/ui/numeric-input/numeric-input.stories.js

@@ -3,6 +3,7 @@ import NumericInput from '.';
 
 export default {
   title: 'NumericInput',
+  id: __filename,
 };
 
 const onChange = (e) => console.log('changed value: ', e.target.value);

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

@@ -16,6 +16,7 @@ const mainWrapperStyle = {
 
 export default {
   title: 'Popover',
+  id: __filename,
 };
 
 export const approve = () => (

ui/components/ui/pulse-loader/pulse-loader.stories.js

@@ -3,6 +3,7 @@ import PulseLoader from '.';
 
 export default {
   title: 'PulseLoader',
+  id: __filename,
 };
 
 export const common = () => <PulseLoader />;

ui/components/ui/radio-group/radio-group.stories.js

@@ -3,6 +3,7 @@ import RadioGroup from '.';
 
 export default {
   title: 'RadioGroup',
+  id: __filename,
 };
 
 export const radioGroup = () => {

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

@@ -5,6 +5,7 @@ import Tabs from './tabs.component';
 
 export default {
   title: 'Tabs',
+  id: __filename,
 };
 
 function renderTab(id) {

ui/components/ui/text-field/text-field.stories.js

@@ -3,6 +3,7 @@ import TextField from '.';
 
 export default {
   title: 'TextField',
+  id: __filename,
 };
 
 export const text = () => <TextField label="Text" type="text" />;

ui/components/ui/truncated-definition-list/truncated-definition-list.stories.js

@@ -5,6 +5,7 @@ import TruncatedDefinitionList from './truncated-definition-list';
 
 export default {
   title: 'Truncated Definition List',
+  id: __filename,
 };
 
 const basic = {

ui/components/ui/typography/typography.stories.js

@@ -10,6 +10,7 @@ import Typography from '.';
 
 export default {
   title: 'Typography',
+  id: __filename,
 };
 
 export const list = () => (

ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js

@@ -8,6 +8,7 @@ import ConfirmAddSuggestedToken from '.';
 
 export default {
   title: 'Confirmation Screens',
+  id: __filename,
 };
 
 const PageSet = ({ children }) => {

ui/pages/confirm-approve/confirm-approve.stories.js

@@ -12,6 +12,7 @@ import ConfirmApprove from '.';
 
 export default {
   title: 'Confirmation Screens',
+  id: __filename,
 };
 
 // transaction ID, maps to entry in state.metamask.currentNetworkTxList

ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories.js

@@ -8,6 +8,7 @@ import ConfirmDeployContract from '.';
 
 export default {
   title: 'Confirmation Screens',
+  id: __filename,
 };
 
 // transaction ID

ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.stories.js

@@ -7,6 +7,7 @@ import ConfirmEncryptionPublicKey from '.';
 
 export default {
   title: 'Confirmation Screens',
+  id: __filename,
 };
 
 const PageSet = ({ children }) => {

ui/pages/confirm-import-token/confirm-import-token.stories.js

@@ -10,6 +10,7 @@ import ConfirmAddToken from '.';
 
 export default {
   title: 'Confirmation Screens',
+  id: __filename,
 };
 
 const history = createBrowserHistory();

ui/pages/confirm-send-ether/confirm-send-ether.stories.js

@@ -7,6 +7,7 @@ import ConfirmSendEther from '.';
 
 export default {
   title: 'Confirmation Screens',
+  id: __filename,
 };
 
 // transaction id for redux dispatcher

ui/pages/confirm-send-token/confirm-send-token.stories.js

@@ -3,6 +3,7 @@ import ConfirmSendToken from './confirm-send-token.component';
 
 export default {
   title: 'Confirmation Screens',
+  id: __filename,
 };
 
 const PageSet = ({ children }) => {

ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js

@@ -4,6 +4,7 @@ import ConfirmTokenTransactionBase from './confirm-token-transaction-base.compon
 
 export default {
   title: 'Confirmation Screens',
+  id: __filename,
 };
 
 const state = store.getState();

ui/pages/confirm-transaction-base/confirm-transaction-base.stories.js

@@ -4,6 +4,7 @@ import ConfirmTransactionBase from '.';
 
 export default {
   title: 'Confirmation Screens',
+  id: __filename,
 };
 
 const PageSet = ({ children }) => {

ui/pages/connected-accounts/connected-accounts.stories.js

@@ -4,6 +4,7 @@ import ConnectedAccounts from './connected-accounts.component';
 
 export default {
   title: 'Connected Accounts',
+  id: __filename,
 };
 
 const account = [

ui/pages/connected-sites/connected-sites.stories.js

@@ -4,6 +4,7 @@ import ConnectedSites from '.';
 
 export default {
   title: 'Connected Sites',
+  id: __filename,
 };
 
 const PageSet = ({ children }) => {

ui/pages/create-account/new-account.stories.js

@@ -4,6 +4,7 @@ import NewAccountCreateForm from './new-account.component';
 
 export default {
   title: 'New Account',
+  id: __filename,
 };
 
 export const NewAccountComponent = () => {

ui/pages/first-time-flow/create-password/create-password.stories.js

@@ -5,6 +5,7 @@ import NewAccount from './new-account';
 
 export default {
   title: 'Create Password',
+  id: __filename,
 };
 
 export const ImportWithSeedPhraseComponent = () => {

ui/pages/first-time-flow/end-of-flow/end-of-flow.stories.js

@@ -3,6 +3,7 @@ import EndOfFlowScreen from './end-of-flow.component';
 
 export default {
   title: 'First Time Flow',
+  id: __filename,
 };
 
 export const EndOfFlowComponent = () => {

ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.stories.js

@@ -4,6 +4,7 @@ import MetaMetricsOptIn from './metametrics-opt-in.component';
 
 export default {
   title: 'First Time Flow',
+  id: __filename,
 };
 
 export const MetaMetricsOptInComponent = () => {

ui/pages/first-time-flow/select-action/select-action.stories.js

@@ -3,6 +3,7 @@ import SelectAction from './select-action.component';
 
 export default {
   title: 'First Time Flow',
+  id: __filename,
 };
 
 export const SelectActionComponent = () => {

ui/pages/first-time-flow/welcome/welcome.stories.js

@@ -3,6 +3,7 @@ import Welcome from './welcome.component';
 
 export default {
   title: 'First Time Flow',
+  id: __filename,
 };
 
 export const WelcomeComponent = () => {

ui/pages/import-token/import-token.stories.js

@@ -5,6 +5,7 @@ import ImportToken from './import-token.component';
 
 export default {
   title: 'Import Token',
+  id: __filename,
 };
 
 export const ImportTokenComponent = () => {

ui/pages/import-token/token-list/token-list-placeholder/token-list-placeholder.stories.js

@@ -3,6 +3,7 @@ import TokenListPlaceholder from './token-list-placeholder.component';
 
 export default {
   title: 'TokenListPlaceholder',
+  id: __filename,
 };
 
 export const TokenListPlaceholderComponent = () => {

ui/pages/import-token/token-search/token-search.stories.js

@@ -3,6 +3,7 @@ import TokenSearch from './token-search.component';
 
 export default {
   title: 'TokenSearch',
+  id: __filename,
 };
 
 export const TokenSearchComponent = () => {

ui/pages/mobile-sync/mobile-sync.stories.js

@@ -4,6 +4,7 @@ import MobileSyncPage from './mobile-sync.component';
 
 export default {
   title: 'Mobile Sync',
+  id: __filename,
 };
 
 export const MobileSyncComponent = () => {

ui/pages/permissions-connect/permissions-connect.stories.js

@@ -7,6 +7,7 @@ import ChooseAccount from './choose-account';
 
 export default {
   title: 'Permissions Connect',
+  id: __filename,
 };
 
 export const ChooseAccountComponent = () => {

ui/pages/send/send-content/send-content.stories.js

@@ -5,6 +5,7 @@ import SendContent from './send-content.component';
 
 export default {
   title: 'SendContent',
+  id: __filename,
 };
 
 export const SendContentComponent = () => {

ui/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.stories.js

@@ -5,6 +5,7 @@ import GasFeeDisplay from './gas-fee-display.component';
 
 export default {
   title: 'GasFeeDisplay',
+  id: __filename,
 };
 
 export const GasFeeDisplayComponent = () => {

ui/pages/send/send-content/send-gas-row/send-gas-row.stories.js

@@ -15,6 +15,7 @@ const store = configureStore(testData);
 
 export default {
   title: 'SendGasRow',
+  id: __filename,
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
 };
 

ui/pages/send/send-footer/send-footer.stories.js

@@ -6,6 +6,7 @@ import SendFooter from './send-footer.component';
 
 export default {
   title: 'SendFooter',
+  id: __filename,
 };
 
 export const SendFooterComponent = () => {

ui/pages/settings/advanced-tab/advanced-tab.stories.js

@@ -4,6 +4,7 @@ import AdvancedTab from './advanced-tab.component';
 
 export default {
   title: 'AdvancedTab',
+  id: __filename,
 };
 
 export const AdvancedTabComponent = () => {

ui/pages/settings/contact-list-tab/contact-list-tab.stories.js

@@ -11,6 +11,7 @@ const store = configureStore(testData);
 
 export default {
   title: 'ContactListTab',
+  id: __filename,
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
 };
 

ui/pages/swaps/awaiting-signatures/awaiting-signatures.stories.js

@@ -3,6 +3,7 @@ import AwaitingSignatures from './awaiting-signatures';
 
 export default {
   title: 'Signatures',
+  id: __filename,
 };
 
 export const AwaitingSignaturesComponent = () => {

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

@@ -127,6 +127,7 @@ const tokensToSearch = tokens.map((token) => ({
 
 export default {
   title: 'BuildQuote',
+  id: __filename,
 };
 
 export const Default = () => {

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

@@ -4,6 +4,7 @@ import CountdownTimer from './countdown-timer';
 
 export default {
   title: 'CountdownTimer',
+  id: __filename,
 };
 
 const getTimeStartedFromDecrimentSeconds = (seconds) =>

ui/pages/swaps/dropdown-input-pair/dropdown-input-pair.stories.js

@@ -114,6 +114,7 @@ const tokens = [
 
 export default {
   title: 'DropdownInputPair',
+  id: __filename,
 };
 
 const tokensToSearch = tokens.map((token) => ({

ui/pages/swaps/dropdown-search-list/dropdown-search-list.stories.js

@@ -114,6 +114,7 @@ const tokens = [
 
 export default {
   title: 'DropdownSearchList',
+  id: __filename,
 };
 
 const tokensToSearch = tokens.map((token) => ({

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

@@ -4,6 +4,7 @@ import ExchangeRateDisplay from './exchange-rate-display';
 
 export default {
   title: 'ExchangeRateDisplay',
+  id: __filename,
 };
 
 export const Default = () => {

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

@@ -15,6 +15,7 @@ const containerStyle = {
 
 export default {
   title: 'FeeCard',
+  id: __filename,
 };
 
 export const WithAllProps = () => {

ui/pages/swaps/import-token/import-token.stories.js

@@ -4,6 +4,7 @@ import ImportToken from './import-token';
 
 export default {
   title: 'Import Token',
+  id: __filename,
 };
 
 export const ImportTokenComponent = () => {

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

@@ -4,6 +4,7 @@ import MainQuoteSummary from './main-quote-summary';
 
 export default {
   title: 'MainQuoteSummary',
+  id: __filename,
 };
 
 export const BestQuote = () => {

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

@@ -7,6 +7,7 @@ import SelectQuotePopover from '.';
 
 export default {
   title: 'SelectQuotePopover',
+  id: __filename,
 };
 
 export const Default = () => {

ui/pages/swaps/slippage-buttons/slippage-buttons.stories.js

@@ -4,6 +4,7 @@ import SlippageButtons from '.';
 
 export default {
   title: 'SlippageButtons',
+  id: __filename,
 };
 
 export const Default = () => (

ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.stories.js

@@ -20,6 +20,7 @@ const store = configureStore(testData);
 
 export default {
   title: 'Swap',
+  id: __filename,
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
 };
 

ui/pages/unlock-page/unlock-page.stories.js

@@ -4,6 +4,7 @@ import UnlockPage from './unlock-page.component';
 
 export default {
   title: 'UnlockPage',
+  id: __filename,
 };
 
 export const UnlockPageComponent = () => {

yarn.lock

@@ -519,6 +519,11 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/parser@^7.0.0":
+  version "7.15.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.6.tgz#043b9aa3c303c0722e5377fef9197f4cf1796549"
+  integrity sha512-S/TSCcsRuCkmpUuoWijua0Snt+f3ewU/8spLo+4AXJCZfT0bVCzLD5MuOKdrx0mlAptbKzn5AdgEIIKXxXkz9Q==
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.13.13":
   version "7.13.13"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.13.tgz#42f03862f4aed50461e543270916b47dd501f0df"
@@ -4351,6 +4356,11 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.21.0.tgz#abdc3463bda5d31156984fa5bc316789c960edef"
   integrity sha512-+OQaupjGVVc8iXbt6M1oZMwyKQNehAfLYJJ3SdvnofK2qcjfor9pEM62rVjBknhowTkh+2HF+/KdRAc/wGBN2w==
 
+"@typescript-eslint/types@4.31.1":
+  version "4.31.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.31.1.tgz#5f255b695627a13401d2fdba5f7138bc79450d66"
+  integrity sha512-kixltt51ZJGKENNW88IY5MYqTBA8FR0Md8QdGbJD2pKZ+D5IvxjTYDNtJPDxFBiXmka2aJsITdB1BtO1fsgmsQ==
+
 "@typescript-eslint/typescript-estree@4.21.0":
   version "4.21.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.21.0.tgz#3817bd91857beeaeff90f69f1f112ea58d350b0a"
@@ -4364,6 +4374,19 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
+"@typescript-eslint/typescript-estree@^4.8.2":
+  version "4.31.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.31.1.tgz#4a04d5232cf1031232b7124a9c0310b577a62d17"
+  integrity sha512-EGHkbsUvjFrvRnusk6yFGqrqMBTue5E5ROnS5puj3laGQPasVUgwhrxfcgkdHNFECHAewpvELE1Gjv0XO3mdWg==
+  dependencies:
+    "@typescript-eslint/types" "4.31.1"
+    "@typescript-eslint/visitor-keys" "4.31.1"
+    debug "^4.3.1"
+    globby "^11.0.3"
+    is-glob "^4.0.1"
+    semver "^7.3.5"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/visitor-keys@4.21.0":
   version "4.21.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.21.0.tgz#990a9acdc124331f5863c2cf21c88ba65233cd8d"
@@ -4372,6 +4395,14 @@
     "@typescript-eslint/types" "4.21.0"
     eslint-visitor-keys "^2.0.0"
 
+"@typescript-eslint/visitor-keys@4.31.1":
+  version "4.31.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.31.1.tgz#f2e7a14c7f20c4ae07d7fc3c5878c4441a1da9cc"
+  integrity sha512-PCncP8hEqKw6SOJY+3St4LVtoZpPPn+Zlpm7KW5xnviMhdqcsBty4Lsg4J/VECpJjw1CkROaZhH4B8M1OfnXTQ==
+  dependencies:
+    "@typescript-eslint/types" "4.31.1"
+    eslint-visitor-keys "^2.0.0"
+
 "@vue/compiler-core@3.1.4":
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.1.4.tgz#a3a74cf52e8f01af386d364ac8a099cbeb260424"
@@ -5198,6 +5229,11 @@ anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+app-module-path@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/app-module-path/-/app-module-path-2.2.0.tgz#641aa55dfb7d6a6f0a8141c4b9c0aa50b6c24dd5"
+  integrity sha1-ZBqlXft9am8KgUHEucCqULbCTdU=
+
 app-root-dir@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/app-root-dir/-/app-root-dir-1.0.2.tgz#38187ec2dea7577fff033ffcb12172692ff6e118"
@@ -5567,6 +5603,11 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
+ast-module-types@^2.3.2, ast-module-types@^2.4.0, ast-module-types@^2.7.0, ast-module-types@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/ast-module-types/-/ast-module-types-2.7.1.tgz#3f7989ef8dfa1fdb82dfe0ab02bdfc7c77a57dd3"
+  integrity sha512-Rnnx/4Dus6fn7fTqdeLEAn5vUll5w7/vts0RN608yFa6si/rDOUonlIIiwugHBFWjylHjxm9owoSZn71KwG4gw==
+
 ast-types@0.x.x, ast-types@^0.14.2:
   version "0.14.2"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.14.2.tgz#600b882df8583e3cd4f2df5fa20fa83759d4bdfd"
@@ -8400,7 +8441,7 @@ comma-separated-tokens@^1.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.7.tgz#419cd7fb3258b1ed838dc0953167a25e152f5b59"
   integrity sha512-Jrx3xsP4pPv4AwJUDWY9wOXGtwPXARej6Xd99h4TUGotmf8APuquKMpK+dnD3UgyxK7OEWaisjZz+3b5jtL6xQ==
 
-commander@^2.15.0, commander@^2.15.1, commander@^2.19.0, commander@^2.20.0, commander@^2.6.0:
+commander@^2.15.0, commander@^2.15.1, commander@^2.16.0, commander@^2.19.0, commander@^2.20.0, commander@^2.20.3, commander@^2.6.0, commander@^2.8.1:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -9258,7 +9299,7 @@ debug@4.1.0:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.2.0:
+debug@^4.0.0, debug@^4.2.0, debug@^4.3.1:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
   integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
@@ -9300,6 +9341,13 @@ decode-uri-component@^0.2.0:
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
   integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
+decomment@^0.9.3:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/decomment/-/decomment-0.9.4.tgz#fa40335bd90e3826d5c1984276e390525ff856d5"
+  integrity sha512-8eNlhyI5cSU4UbBlrtagWpR03dqXcE5IR9zpe7PnO6UzReXDskucsD8usgrzUmQ6qJ3N82aws/p/mu/jqbURWw==
+  dependencies:
+    esprima "4.0.1"
+
 decompress-response@^3.2.0, decompress-response@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-3.3.0.tgz#80a4dd323748384bfa248083622aedec982adff3"
@@ -9561,6 +9609,17 @@ depd@~2.0.0:
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
   integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
 
+dependency-tree@^8.1.1:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/dependency-tree/-/dependency-tree-8.1.1.tgz#1a309f5a860b3285f7b1638c98ce48c8906ae6e6"
+  integrity sha512-bl5U16VQpaYxD0xvcnCH/dTctCiWnsVWymh9dNjbm4T00Hm21flu1VLnNueKCj7+3uusbcJhKKKtiWrpU0I+Nw==
+  dependencies:
+    commander "^2.20.3"
+    debug "^4.3.1"
+    filing-cabinet "^3.0.0"
+    precinct "^8.0.0"
+    typescript "^3.9.7"
+
 deps-regex@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/deps-regex/-/deps-regex-0.1.4.tgz#518667b7691460a5e7e0a341be76eb7ce8090184"
@@ -9642,6 +9701,83 @@ detect-port@^1.3.0:
     address "^1.0.1"
     debug "^2.6.0"
 
+detective-amd@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/detective-amd/-/detective-amd-3.1.0.tgz#92daee3214a0ca4522646cf333cac90a3fca6373"
+  integrity sha512-G7wGWT6f0VErjUkE2utCm7IUshT7nBh7aBBH2VBOiY9Dqy2DMens5iiOvYCuhstoIxRKLrnOvVAz4/EyPIAjnw==
+  dependencies:
+    ast-module-types "^2.7.0"
+    escodegen "^2.0.0"
+    get-amd-module-type "^3.0.0"
+    node-source-walk "^4.0.0"
+
+detective-cjs@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/detective-cjs/-/detective-cjs-3.1.1.tgz#18da3e39a002d2098a1123d45ce1de1b0d9045a0"
+  integrity sha512-JQtNTBgFY6h8uT6pgph5QpV3IyxDv+z3qPk/FZRDT9TlFfm5dnRtpH39WtQEr1khqsUxVqXzKjZHpdoQvQbllg==
+  dependencies:
+    ast-module-types "^2.4.0"
+    node-source-walk "^4.0.0"
+
+detective-es6@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/detective-es6/-/detective-es6-2.2.0.tgz#8f2baba3f8cd90a5cfd748f5ac436f0158ed2585"
+  integrity sha512-fSpNY0SLER7/sVgQZ1NxJPwmc9uCTzNgdkQDhAaj8NPYwr7Qji9QBcmbNvtMCnuuOGMuKn3O7jv0An+/WRWJZQ==
+  dependencies:
+    node-source-walk "^4.0.0"
+
+detective-less@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/detective-less/-/detective-less-1.0.2.tgz#a68af9ca5f69d74b7d0aa190218b211d83b4f7e3"
+  integrity sha512-Rps1xDkEEBSq3kLdsdnHZL1x2S4NGDcbrjmd4q+PykK5aJwDdP5MBgrJw1Xo+kyUHuv3JEzPqxr+Dj9ryeDRTA==
+  dependencies:
+    debug "^4.0.0"
+    gonzales-pe "^4.2.3"
+    node-source-walk "^4.0.0"
+
+detective-postcss@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detective-postcss/-/detective-postcss-4.0.0.tgz#24e69b465e5fefe7a6afd05f7e894e34595dbf51"
+  integrity sha512-Fwc/g9VcrowODIAeKRWZfVA/EufxYL7XfuqJQFroBKGikKX83d2G7NFw6kDlSYGG3LNQIyVa+eWv1mqre+v4+A==
+  dependencies:
+    debug "^4.1.1"
+    is-url "^1.2.4"
+    postcss "^8.1.7"
+    postcss-values-parser "^2.0.1"
+
+detective-sass@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/detective-sass/-/detective-sass-3.0.1.tgz#496b819efd1f5c4dd3f0e19b43a8634bdd6927c4"
+  integrity sha512-oSbrBozRjJ+QFF4WJFbjPQKeakoaY1GiR380NPqwdbWYd5wfl5cLWv0l6LsJVqrgWfFN1bjFqSeo32Nxza8Lbw==
+  dependencies:
+    debug "^4.1.1"
+    gonzales-pe "^4.2.3"
+    node-source-walk "^4.0.0"
+
+detective-scss@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/detective-scss/-/detective-scss-2.0.1.tgz#06f8c21ae6dedad1fccc26d544892d968083eaf8"
+  integrity sha512-VveyXW4WQE04s05KlJ8K0bG34jtHQVgTc9InspqoQxvnelj/rdgSAy7i2DXAazyQNFKlWSWbS+Ro2DWKFOKTPQ==
+  dependencies:
+    debug "^4.1.1"
+    gonzales-pe "^4.2.3"
+    node-source-walk "^4.0.0"
+
+detective-stylus@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/detective-stylus/-/detective-stylus-1.0.0.tgz#50aee7db8babb990381f010c63fabba5b58e54cd"
+  integrity sha1-UK7n24uruZA4HwEMY/q7pbWOVM0=
+
+detective-typescript@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/detective-typescript/-/detective-typescript-7.0.0.tgz#8c8917f2e51d9e4ee49821abf759ff512dd897f2"
+  integrity sha512-y/Ev98AleGvl43YKTNcA2Q+lyFmsmCfTTNWy4cjEJxoLkbobcXtRS0Kvx06daCgr2GdtlwLfNzL553BkktfJoA==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "^4.8.2"
+    ast-module-types "^2.7.1"
+    node-source-walk "^4.2.0"
+    typescript "^3.9.7"
+
 detective@^5.0.2:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/detective/-/detective-5.1.0.tgz#7a20d89236d7b331ccea65832e7123b5551bb7cb"
@@ -10226,6 +10362,14 @@ enhanced-resolve@^4.3.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
+enhanced-resolve@^5.3.2:
+  version "5.8.2"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.8.2.tgz#15ddc779345cbb73e97c611cd00c01c1e7bf4d8b"
+  integrity sha512-F27oB3WuHDzvR2DOGNTaYy0D5o0cnrv8TeI482VM4kYgQd/FT9lUQwuNsJ0oOHtBUq7eiW5ytqzp7nBFknL+GA==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
 enquirer@^2.3.5:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
@@ -12379,6 +12523,25 @@ filesize@^3.6.1:
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
   integrity sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==
 
+filing-cabinet@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/filing-cabinet/-/filing-cabinet-3.0.0.tgz#08f9ceec5134f4a662926dd45b8a26eca1b5f622"
+  integrity sha512-o8Qac5qxZ1uVidR4Sd7ZQbbqObFZlqXU4xu1suAYg9PQPcQFNTzOmxQa/MehIDMgIvXHTb42mWPNV9l3eHBPSw==
+  dependencies:
+    app-module-path "^2.2.0"
+    commander "^2.20.3"
+    debug "^4.3.1"
+    decomment "^0.9.3"
+    enhanced-resolve "^5.3.2"
+    is-relative-path "^1.0.2"
+    module-definition "^3.3.1"
+    module-lookup-amd "^7.0.0"
+    resolve "^1.19.0"
+    resolve-dependency-path "^2.0.0"
+    sass-lookup "^3.0.0"
+    stylus-lookup "^3.0.1"
+    typescript "^3.9.7"
+
 fill-keys@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/fill-keys/-/fill-keys-1.0.2.tgz#9a8fa36f4e8ad634e3bf6b4f3c8882551452eb20"
@@ -12598,6 +12761,11 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.1.tgz#c4b489e80096d9df1dfc97c79871aea7c617c469"
   integrity sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==
 
+flatten@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
+  integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
+
 flow-stoplight@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/flow-stoplight/-/flow-stoplight-1.0.0.tgz#4a292c5bcff8b39fa6cc0cb1a853d86f27eeff7b"
@@ -13055,6 +13223,14 @@ gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
+get-amd-module-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-amd-module-type/-/get-amd-module-type-3.0.0.tgz#bb334662fa04427018c937774570de495845c288"
+  integrity sha512-99Q7COuACPfVt18zH9N4VAMyb81S6TUgJm2NgV6ERtkh9VIkAaByZkW530wl3lLN5KTtSrK9jVLxYsoP5hQKsw==
+  dependencies:
+    ast-module-types "^2.3.2"
+    node-source-walk "^4.0.0"
+
 get-assigned-identifiers@^1.1.0, get-assigned-identifiers@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/get-assigned-identifiers/-/get-assigned-identifiers-1.2.0.tgz#6dbf411de648cbaf8d9169ebb0d2d576191e2ff1"
@@ -13097,6 +13273,11 @@ get-iterator@^1.0.2:
   resolved "https://registry.yarnpkg.com/get-iterator/-/get-iterator-1.0.2.tgz#cd747c02b4c084461fac14f48f6b45a80ed25c82"
   integrity sha512-v+dm9bNVfOYsY1OrhaCrmyOcYoSeVvbt+hHZ0Au+T+p1y+0Uyj9aMaGIeUTT6xdpRbWzDeYKvfOslPhggQMcsg==
 
+get-own-enumerable-property-symbols@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
+  integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
+
 get-params@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/get-params/-/get-params-0.1.2.tgz#bae0dfaba588a0c60d7834c0d8dc2ff60eeef2fe"
@@ -13438,6 +13619,18 @@ globby@^11.0.1:
     merge2 "^1.3.0"
     slash "^3.0.0"
 
+globby@^11.0.3:
+  version "11.0.4"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5"
+  integrity sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.1.1"
+    ignore "^5.1.4"
+    merge2 "^1.3.0"
+    slash "^3.0.0"
+
 globby@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
@@ -13487,7 +13680,7 @@ glogg@^1.0.0:
   dependencies:
     sparkles "^1.0.0"
 
-gonzales-pe@^4.3.0:
+gonzales-pe@^4.2.3, gonzales-pe@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/gonzales-pe/-/gonzales-pe-4.3.0.tgz#fe9dec5f3c557eead09ff868c65826be54d067b3"
   integrity sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==
@@ -15667,6 +15860,11 @@ is-number@^7.0.0:
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
+is-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+  integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
+
 is-obj@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
@@ -15785,11 +15983,21 @@ is-regex@^1.1.2:
     call-bind "^1.0.2"
     has-symbols "^1.0.1"
 
+is-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
+  integrity sha1-/S2INUXEa6xaYz57mgnof6LLUGk=
+
 is-regexp@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-2.1.0.tgz#cd734a56864e23b956bf4e7c66c396a4c0b22c2d"
   integrity sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA==
 
+is-relative-path@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-relative-path/-/is-relative-path-1.0.2.tgz#091b46a0d67c1ed0fe85f1f8cfdde006bb251d46"
+  integrity sha1-CRtGoNZ8HtD+hfH4z93gBrslHUY=
+
 is-relative@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-1.0.0.tgz#a1bb6935ce8c5dba1e8b9754b9b2dcc020e2260d"
@@ -15869,7 +16077,7 @@ is-unc-path@^1.0.0:
   dependencies:
     unc-path-regex "^0.1.2"
 
-is-url@^1.2.2:
+is-url@^1.2.2, is-url@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52"
   integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==
@@ -19075,6 +19283,14 @@ mock-fs@^4.1.0:
   resolved "https://registry.yarnpkg.com/mock-fs/-/mock-fs-4.10.1.tgz#50a07a20114a6cdb119f35762f61f46266a1e323"
   integrity sha512-w22rOL5ZYu6HbUehB5deurghGM0hS/xBVyHMGKOuQctkk93J9z9VEOhDsiWrXOprVNQpP9uzGKdl8v9mFspKuw==
 
+module-definition@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/module-definition/-/module-definition-3.3.1.tgz#fedef71667713e36988b93d0626a4fe7b35aebfc"
+  integrity sha512-kLidGPwQ2yq484nSD+D3JoJp4Etc0Ox9P0L34Pu/cU4X4HcG7k7p62XI5BBuvURWMRX3RPyuhOcBHbKus+UH4A==
+  dependencies:
+    ast-module-types "^2.7.1"
+    node-source-walk "^4.0.0"
+
 module-deps@^6.0.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/module-deps/-/module-deps-6.2.0.tgz#d41a2e790245ce319171e4e7c4d8c73993ba3cd5"
@@ -19096,6 +19312,17 @@ module-deps@^6.0.0:
     through2 "^2.0.0"
     xtend "^4.0.0"
 
+module-lookup-amd@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/module-lookup-amd/-/module-lookup-amd-7.0.1.tgz#d67c1a93f2ff8e38b8774b99a638e9a4395774b2"
+  integrity sha512-w9mCNlj0S8qviuHzpakaLVc+/7q50jl9a/kmJ/n8bmXQZgDPkQHnPBb8MUOYh3WpAYkXuNc2c+khsozhIp/amQ==
+  dependencies:
+    commander "^2.8.1"
+    debug "^4.1.0"
+    glob "^7.1.6"
+    requirejs "^2.3.5"
+    requirejs-config-file "^4.0.0"
+
 "module-name-from-path@git+https://git@github.com/kumavis/module-name-from-path.git":
   version "1.0.4"
   resolved "git+https://git@github.com/kumavis/module-name-from-path.git#fd9c592663a1af6cc48b1be7b8045ea547fca79a"
@@ -19753,6 +19980,13 @@ node-releases@^1.1.52, node-releases@^1.1.66:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.67.tgz#28ebfcccd0baa6aad8e8d4d8fe4cbc49ae239c12"
   integrity sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==
 
+node-source-walk@^4.0.0, node-source-walk@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/node-source-walk/-/node-source-walk-4.2.0.tgz#c2efe731ea8ba9c03c562aa0a9d984e54f27bc2c"
+  integrity sha512-hPs/QMe6zS94f5+jG3kk9E7TNm4P2SulrKiLWMzKszBfNZvL/V6wseHlTd7IvfW0NZWqPtK3+9yYNr+3USGteA==
+  dependencies:
+    "@babel/parser" "^7.0.0"
+
 node-status-codes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f"
@@ -21631,6 +21865,15 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
+postcss-values-parser@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
+  integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss@7.0.18:
   version "7.0.18"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.18.tgz#4b9cda95ae6c069c67a4d933029eddd4838ac233"
@@ -21676,6 +21919,15 @@ postcss@^8.1.10:
     nanoid "^3.1.23"
     source-map-js "^0.6.2"
 
+postcss@^8.1.7:
+  version "8.3.6"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.6.tgz#2730dd76a97969f37f53b9a6096197be311cc4ea"
+  integrity sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==
+  dependencies:
+    colorette "^1.2.2"
+    nanoid "^3.1.23"
+    source-map-js "^0.6.2"
+
 postmsg-rpc@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/postmsg-rpc/-/postmsg-rpc-2.4.0.tgz#4e2daf6851852364696debd5d6bf6936d1424cdf"
@@ -21683,6 +21935,25 @@ postmsg-rpc@^2.4.0:
   dependencies:
     shortid "^2.2.8"
 
+precinct@^8.0.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/precinct/-/precinct-8.1.0.tgz#6b8f2389ba2ca61c466731390b0d7e25da3fd996"
+  integrity sha512-oeZBR9IdER42Ef6Rz11z1oOUqicsI5J1Qffj6tYghKLhxN2UnHy7uE1axxNr0VZRevPK2HWkROk36uXrbJwHFA==
+  dependencies:
+    commander "^2.20.3"
+    debug "^4.3.1"
+    detective-amd "^3.0.1"
+    detective-cjs "^3.1.1"
+    detective-es6 "^2.2.0"
+    detective-less "^1.0.2"
+    detective-postcss "^4.0.0"
+    detective-sass "^3.0.1"
+    detective-scss "^2.0.1"
+    detective-stylus "^1.0.0"
+    detective-typescript "^7.0.0"
+    module-definition "^3.3.1"
+    node-source-walk "^4.2.0"
+
 precond@0.2:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/precond/-/precond-0.2.3.tgz#aa9591bcaa24923f1e0f4849d240f47efc1075ac"
@@ -23668,6 +23939,19 @@ require-uncached@^1.0.2:
     caller-path "^0.1.0"
     resolve-from "^1.0.0"
 
+requirejs-config-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/requirejs-config-file/-/requirejs-config-file-4.0.0.tgz#4244da5dd1f59874038cc1091d078d620abb6ebc"
+  integrity sha512-jnIre8cbWOyvr8a5F2KuqBnY+SDA4NXr/hzEZJG79Mxm2WiFQz2dzhC8ibtPJS7zkmBEl1mxSwp5HhC1W4qpxw==
+  dependencies:
+    esprima "^4.0.0"
+    stringify-object "^3.2.1"
+
+requirejs@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/requirejs/-/requirejs-2.3.6.tgz#e5093d9601c2829251258c0b9445d4d19fa9e7c9"
+  integrity sha512-ipEzlWQe6RK3jkzikgCupiTbTvm4S0/CAU5GlgptkN5SO6F3u0UD0K18wy6ErDqiCyP4J4YYe1HuAShvsxePLg==
+
 reselect@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
@@ -23685,6 +23969,11 @@ resolve-cwd@^3.0.0:
   dependencies:
     resolve-from "^5.0.0"
 
+resolve-dependency-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-dependency-path/-/resolve-dependency-path-2.0.0.tgz#11700e340717b865d216c66cabeb4a2a3c696736"
+  integrity sha512-DIgu+0Dv+6v2XwRaNWnumKu7GPufBBOr5I1gRPJHkvghrfCGOooJODFvgFimX/KRxk9j0whD2MnKHzM1jYvk9w==
+
 resolve-dir@^1.0.0, resolve-dir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
@@ -23775,7 +24064,7 @@ resolve@^1.15.1:
     is-core-module "^2.1.0"
     path-parse "^1.0.6"
 
-resolve@^1.18.1, resolve@^1.20.0:
+resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -24150,6 +24439,13 @@ sass-loader@^10.1.1:
     schema-utils "^3.0.0"
     semver "^7.3.2"
 
+sass-lookup@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/sass-lookup/-/sass-lookup-3.0.0.tgz#3b395fa40569738ce857bc258e04df2617c48cac"
+  integrity sha512-TTsus8CfFRn1N44bvdEai1no6PqdmDiQUiqW5DlpmtT+tYnIt1tXtDIph5KA1efC+LmioJXSnCtUVpcK9gaKIg==
+  dependencies:
+    commander "^2.16.0"
+
 sass@^1.26.3:
   version "1.32.8"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.8.tgz#f16a9abd8dc530add8834e506878a2808c037bdc"
@@ -25508,6 +25804,15 @@ stringify-entities@^3.0.0:
     is-decimal "^1.0.2"
     is-hexadecimal "^1.0.0"
 
+stringify-object@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
+  integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
+  dependencies:
+    get-own-enumerable-property-symbols "^3.0.0"
+    is-obj "^1.0.1"
+    is-regexp "^1.0.0"
+
 strip-ansi@6.0.0, strip-ansi@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
@@ -25702,6 +26007,14 @@ stylelint@^13.6.1:
     v8-compile-cache "^2.1.1"
     write-file-atomic "^3.0.3"
 
+stylus-lookup@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/stylus-lookup/-/stylus-lookup-3.0.2.tgz#c9eca3ff799691020f30b382260a67355fefdddd"
+  integrity sha512-oEQGHSjg/AMaWlKe7gqsnYzan8DLcGIHe0dUaFkucZZ14z4zjENRlQMCHT4FNsiWnJf17YN9OvrCfCoi7VvOyg==
+  dependencies:
+    commander "^2.8.1"
+    debug "^4.1.0"
+
 subarg@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"
@@ -25907,6 +26220,11 @@ tapable@^1.0.0, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
+tapable@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
 tape@^4.6.3, tape@^4.8.0:
   version "4.11.0"
   resolved "https://registry.yarnpkg.com/tape/-/tape-4.11.0.tgz#63d41accd95e45a23a874473051c57fdbc58edc1"
@@ -26553,7 +26871,7 @@ tsscmp@1.0.6:
   resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"
   integrity sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==
 
-tsutils@^3.17.1:
+tsutils@^3.17.1, tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
   integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
@@ -26684,6 +27002,11 @@ typeforce@^1.11.3, typeforce@^1.11.5:
   resolved "https://registry.yarnpkg.com/typeforce/-/typeforce-1.18.0.tgz#d7416a2c5845e085034d70fcc5b6cc4a90edbfdc"
   integrity sha512-7uc1O8h1M1g0rArakJdf0uLRSSgFcYexrVoKo+bzJd32gd4gDy2L/Z+8/FjPnU9ydY3pEnVPtr9FyscYY60K1g==
 
+typescript@^3.9.7:
+  version "3.9.10"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8"
+  integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==
+
 typewise-core@^1.2, typewise-core@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/typewise-core/-/typewise-core-1.2.0.tgz#97eb91805c7f55d2f941748fa50d315d991ef195"