From 09d29ef00d8f0e763952243e65a471b8b733da4f Mon Sep 17 00:00:00 2001 From: George Marshall Date: Thu, 15 Dec 2022 14:46:30 -0800 Subject: [PATCH] Renaming broken stories to clean up console (#16905) * Renaming broken stories. Fixing deprecated default arg syntax for stories using defaultValue * Fixing imports --- .storybook/main.js | 4 +- .../avatar-base/avatar-base.stories.js | 1 - .../avatar-icon/avatar-icon.js | 4 +- ui/components/component-library/icon/icon.js | 4 +- ui/components/ui/box/box.stories.js | 28 +++-- .../color-indicator.stories.js | 9 +- .../ui/list-item/list-item.stories.js | 7 +- .../truncated-definition-list.stories.js | 46 ++++--- .../update-nickname-popover.stories.js | 6 +- ...es.js => confirm-approve.stories-to-do.js} | 1 + ... confirm-deploy-contract.stories-to-do.js} | 1 + ...js => confirm-send-ether.stories-to-do.js} | 1 + ...js => confirm-send-token.stories-to-do.js} | 1 + ...m-token-transaction-base.stories-to-do.js} | 1 + ...confirm-transaction-base.stories-to-do.js} | 1 + .../add-recipient/add-recipient.stories.js | 20 ++- .../send-gas-row/send-gas-row.stories.js | 5 +- .../exchange-rate-display.stories.js | 116 +++++++----------- 18 files changed, 119 insertions(+), 137 deletions(-) rename ui/pages/confirm-approve/{confirm-approve.stories.js => confirm-approve.stories-to-do.js} (97%) rename ui/pages/confirm-deploy-contract/{confirm-deploy-contract.stories.js => confirm-deploy-contract.stories-to-do.js} (87%) rename ui/pages/confirm-send-ether/{confirm-send-ether.stories.js => confirm-send-ether.stories-to-do.js} (88%) rename ui/pages/confirm-send-token/{confirm-send-token.stories.js => confirm-send-token.stories-to-do.js} (85%) rename ui/pages/confirm-token-transaction-base/{confirm-token-transaction-base.stories.js => confirm-token-transaction-base.stories-to-do.js} (91%) rename ui/pages/confirm-transaction-base/{confirm-transaction-base.stories.js => confirm-transaction-base.stories-to-do.js} (85%) diff --git a/.storybook/main.js b/.storybook/main.js index 5e728be1b..a9a5579b9 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -30,7 +30,7 @@ module.exports = { return { ...config, // Creates the icon names environment variable for the component-library/icon/icon.js component - ICON_NAMES: await generateIconNames(), + ICON_NAMES: generateIconNames(), }; }, webpackFinal: async (config) => { @@ -96,7 +96,7 @@ module.exports = { new ProvidePlugin({ Buffer: ['buffer', 'Buffer'], }), - ) + ); return config; }, }; diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.js b/ui/components/component-library/avatar-base/avatar-base.stories.js index 4fe763551..f736889a9 100644 --- a/ui/components/component-library/avatar-base/avatar-base.stories.js +++ b/ui/components/component-library/avatar-base/avatar-base.stories.js @@ -60,7 +60,6 @@ export default { display: { options: Object.values(DISPLAY), control: 'select', - defaultValue: DISPLAY.FLEX, table: { category: 'box props' }, }, marginTop: { diff --git a/ui/components/component-library/avatar-icon/avatar-icon.js b/ui/components/component-library/avatar-icon/avatar-icon.js index b362e0174..57ccb32c8 100644 --- a/ui/components/component-library/avatar-icon/avatar-icon.js +++ b/ui/components/component-library/avatar-icon/avatar-icon.js @@ -12,7 +12,7 @@ import { import Box from '../../ui/box/box'; -import { Icon } from '../icon'; +import { Icon, ICON_NAMES } from '../icon'; import { AvatarBase } from '../avatar-base'; import { AVATAR_ICON_SIZES } from './avatar-icon.constants'; @@ -48,7 +48,7 @@ AvatarIcon.propTypes = { * * The name of the icon to display. Should be one of ICON_NAMES */ - iconName: PropTypes.string.isRequired, // Can't set PropTypes.oneOf(ICON_NAMES) because ICON_NAMES is an environment variable + iconName: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired, /** * Props for the icon inside AvatarIcon. All Icon props can be used */ diff --git a/ui/components/component-library/icon/icon.js b/ui/components/component-library/icon/icon.js index 37c2c83a0..531f4d10c 100644 --- a/ui/components/component-library/icon/icon.js +++ b/ui/components/component-library/icon/icon.js @@ -10,7 +10,7 @@ import { ICON_COLORS, } from '../../../helpers/constants/design-system'; -import { ICON_SIZES } from './icon.constants'; +import { ICON_SIZES, ICON_NAMES } from './icon.constants'; export const Icon = ({ name, @@ -43,7 +43,7 @@ Icon.propTypes = { /** * The name of the icon to display. Should be one of ICON_NAMES */ - name: PropTypes.string.isRequired, // Can't set PropTypes.oneOf(ICON_NAMES) because ICON_NAMES is an environment variable + name: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired, /** * The size of the Icon. * Possible values could be SIZES.XXS (10px), SIZES.XS (12px), SIZES.SM (16px), SIZES.MD (20px), SIZES.LG (24px), SIZES.XL (32px), diff --git a/ui/components/ui/box/box.stories.js b/ui/components/ui/box/box.stories.js index 25006c743..1da6384e8 100644 --- a/ui/components/ui/box/box.stories.js +++ b/ui/components/ui/box/box.stories.js @@ -55,29 +55,24 @@ export default { size: { control: { type: 'range', min: 50, max: 500, step: 10 }, table: { category: 'children' }, - defaultValue: 100, }, items: { control: 'number', table: { category: 'children' }, - defaultValue: 1, }, display: { options: Object.values(DISPLAY), control: 'select', - defaultValue: DISPLAY.BLOCK, table: { category: 'display' }, }, width: { options: Object.values(BLOCK_SIZES), control: 'select', - defaultValue: BLOCK_SIZES.HALF, table: { category: 'display' }, }, height: { options: Object.values(BLOCK_SIZES), control: 'select', - defaultValue: BLOCK_SIZES.HALF, table: { category: 'display' }, }, gap: { @@ -100,7 +95,6 @@ export default { borderStyle: { options: Object.values(BORDER_STYLE), control: 'select', - defaultValue: BORDER_STYLE.DASHED, table: { category: 'border' }, }, borderWidth: { @@ -111,7 +105,6 @@ export default { borderColor: { options: Object.values(BORDER_COLORS), control: 'select', - defaultValue: COLORS.BORDER_DEFAULT, table: { category: 'border' }, }, borderRadius: { @@ -132,19 +125,16 @@ export default { justifyContent: { options: Object.values(JUSTIFY_CONTENT), control: 'select', - defaultValue: JUSTIFY_CONTENT.FLEX_START, table: { category: 'display' }, }, alignItems: { options: Object.values(ALIGN_ITEMS), control: 'select', - defaultValue: ALIGN_ITEMS.FLEX_START, table: { category: 'display' }, }, textAlign: { options: Object.values(TEXT_ALIGN), control: 'select', - defaultValue: TEXT_ALIGN.LEFT, table: { category: 'text' }, }, margin: { @@ -203,6 +193,18 @@ export default { table: { category: 'as (root html element)' }, }, }, + args: { + size: 100, + items: 1, + display: DISPLAY.BLOCK, + width: BLOCK_SIZES.HALF, + height: BLOCK_SIZES.HALF, + borderStyle: BORDER_STYLE.DASHED, + borderColor: COLORS.BORDER_DEFAULT, + justifyContent: JUSTIFY_CONTENT.FLEX_START, + alignItems: ALIGN_ITEMS.FLEX_START, + textAlign: TEXT_ALIGN.LEFT, + }, }; export const DefaultStory = (args) => { @@ -220,7 +222,11 @@ export const DefaultStory = (args) => { />, ); } - return {children}; + return ( + + {children} + + ); }; DefaultStory.storyName = 'Default'; diff --git a/ui/components/ui/color-indicator/color-indicator.stories.js b/ui/components/ui/color-indicator/color-indicator.stories.js index a0f87c535..43c71d69b 100644 --- a/ui/components/ui/color-indicator/color-indicator.stories.js +++ b/ui/components/ui/color-indicator/color-indicator.stories.js @@ -11,30 +11,31 @@ export default { type: 'select', }, options: SIZES, - defaultValue: SIZES.LG, }, type: { control: { type: 'select', }, options: ColorIndicator.TYPES, - defaultValue: ColorIndicator.TYPES.FILLED, }, color: { control: { type: 'select', }, options: COLORS, - defaultValue: COLORS.PRIMARY_DEFAULT, }, borderColor: { control: { type: 'select', }, options: { NONE: undefined, ...COLORS }, - defaultValue: undefined, }, }, + args: { + size: SIZES.LG, + type: ColorIndicator.TYPES.FILLED, + color: COLORS.PRIMARY_DEFAULT, + }, }; export const DefaultStory = (args) => ( diff --git a/ui/components/ui/list-item/list-item.stories.js b/ui/components/ui/list-item/list-item.stories.js index 545e46279..f614d2bd7 100644 --- a/ui/components/ui/list-item/list-item.stories.js +++ b/ui/components/ui/list-item/list-item.stories.js @@ -79,14 +79,17 @@ export const SendComponent = (args) => ( SendComponent.argTypes = { secondaryButtonText: { control: 'text', - defaultValue: 'Speed up', }, cancelButtonText: { control: 'text', - defaultValue: 'Cancel', }, }; +SendComponent.args = { + secondaryButtonText: 'Speed up', + cancelButtonText: 'Cancel', +}; + export const PendingComponent = (args) => ( ; -DefaultStory.argTypes = { - dictionary: { - control: 'object', - defaultValue: basic, - }, - prefaceKeys: { - control: 'object', - defaultValue: ['term', 'definition'], - }, -}; - DefaultStory.storyName = 'Default'; +DefaultStory.args = { + dictionary: basic, + prefaceKeys: ['term', 'definition'], +}; + export const WithTooltips = (args) => ; -WithTooltips.argTypes = { - dictionary: { - control: 'object', - defaultValue: advanced, - }, - tooltips: { - control: 'object', - defaultValue: tooltips, - }, - prefaceKeys: { - control: 'array', - defaultValue: ['Chain ID'], - }, +WithTooltips.args = { + dictionary: advanced, + tooltips, + prefaceKeys: ['Chain ID'], }; diff --git a/ui/components/ui/update-nickname-popover/update-nickname-popover.stories.js b/ui/components/ui/update-nickname-popover/update-nickname-popover.stories.js index fa8973298..8905c24dd 100644 --- a/ui/components/ui/update-nickname-popover/update-nickname-popover.stories.js +++ b/ui/components/ui/update-nickname-popover/update-nickname-popover.stories.js @@ -15,15 +15,17 @@ export default { argTypes: { address: { control: { type: 'text' }, - defaultValue: '0xdeDbcA0156308960E3bBa2f5a273E72179940788', }, showPopover: { control: { type: 'boolean' }, - defaultValue: false, }, onAdd: { action: 'onAdd' }, onClose: { action: 'onClose' }, }, + args: { + address: '0xdeDbcA0156308960E3bBa2f5a273E72179940788', + showPopover: false, + }, }; export const DefaultStory = (args) => { diff --git a/ui/pages/confirm-approve/confirm-approve.stories.js b/ui/pages/confirm-approve/confirm-approve.stories-to-do.js similarity index 97% rename from ui/pages/confirm-approve/confirm-approve.stories.js rename to ui/pages/confirm-approve/confirm-approve.stories-to-do.js index d7b3648b3..12da75ae7 100644 --- a/ui/pages/confirm-approve/confirm-approve.stories.js +++ b/ui/pages/confirm-approve/confirm-approve.stories-to-do.js @@ -10,6 +10,7 @@ import { store, getNewState } from '../../../.storybook/preview'; import { subjectMetadata } from '../../../.storybook/initial-states/approval-screens/token-approval'; import ConfirmApprove from '.'; +// eslint-disable-next-line import/no-anonymous-default-export export default { title: 'Pages/ConfirmApprove', id: __filename, diff --git a/ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories.js b/ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories-to-do.js similarity index 87% rename from ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories.js rename to ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories-to-do.js index b2112a6e2..712a7e765 100644 --- a/ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories.js +++ b/ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories-to-do.js @@ -2,6 +2,7 @@ import React from 'react'; import ConfirmDeployContract from '.'; +// eslint-disable-next-line import/no-anonymous-default-export export default { title: 'Pages/ConfirmDeployContract', id: __filename, diff --git a/ui/pages/confirm-send-ether/confirm-send-ether.stories.js b/ui/pages/confirm-send-ether/confirm-send-ether.stories-to-do.js similarity index 88% rename from ui/pages/confirm-send-ether/confirm-send-ether.stories.js rename to ui/pages/confirm-send-ether/confirm-send-ether.stories-to-do.js index b4029f6e3..37751b346 100644 --- a/ui/pages/confirm-send-ether/confirm-send-ether.stories.js +++ b/ui/pages/confirm-send-ether/confirm-send-ether.stories-to-do.js @@ -1,6 +1,7 @@ import React from 'react'; import ConfirmSendEther from '.'; +// eslint-disable-next-line import/no-anonymous-default-export export default { title: 'Pages/ConfirmSendEther', id: __filename, diff --git a/ui/pages/confirm-send-token/confirm-send-token.stories.js b/ui/pages/confirm-send-token/confirm-send-token.stories-to-do.js similarity index 85% rename from ui/pages/confirm-send-token/confirm-send-token.stories.js rename to ui/pages/confirm-send-token/confirm-send-token.stories-to-do.js index e40951504..ac0363213 100644 --- a/ui/pages/confirm-send-token/confirm-send-token.stories.js +++ b/ui/pages/confirm-send-token/confirm-send-token.stories-to-do.js @@ -1,6 +1,7 @@ import React from 'react'; import ConfirmSendToken from './confirm-send-token.component'; +// eslint-disable-next-line import/no-anonymous-default-export export default { title: 'Pages/ConfirmSendToken', id: __filename, diff --git a/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js b/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories-to-do.js similarity index 91% rename from ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js rename to ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories-to-do.js index b1d5cf9f3..34e2d5ad5 100644 --- a/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js +++ b/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories-to-do.js @@ -2,6 +2,7 @@ import React from 'react'; import { store } from '../../../.storybook/preview'; import ConfirmTokenTransactionBase from './confirm-token-transaction-base'; +// eslint-disable-next-line import/no-anonymous-default-export export default { title: 'Pages/ConfirmTokenTransactionBase', id: __filename, diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.stories.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.stories-to-do.js similarity index 85% rename from ui/pages/confirm-transaction-base/confirm-transaction-base.stories.js rename to ui/pages/confirm-transaction-base/confirm-transaction-base.stories-to-do.js index cf275193f..f22d75eb9 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.stories.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.stories-to-do.js @@ -2,6 +2,7 @@ import React from 'react'; import ConfirmTransactionBase from '.'; +// eslint-disable-next-line import/no-anonymous-default-export export default { title: 'Pages/ConfirmTransactionBase', id: __filename, diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.stories.js b/ui/pages/send/send-content/add-recipient/add-recipient.stories.js index 4d2d7cddc..b17266b09 100644 --- a/ui/pages/send/send-content/add-recipient/add-recipient.stories.js +++ b/ui/pages/send/send-content/add-recipient/add-recipient.stories.js @@ -94,13 +94,11 @@ export const ErrorStory = (args) => { ); }; - -ErrorStory.argTypes = { - // domainError must be the key for a translation - domainError: { type: 'text', defaultValue: 'loading' }, -}; - ErrorStory.storyName = 'Error'; +ErrorStory.args = { + // domainError must be the key for a translation + domainError: 'loading', +}; export const WarningStory = (args) => { return ( @@ -113,10 +111,8 @@ export const WarningStory = (args) => { ); }; - -WarningStory.argTypes = { - // domainWarning must be the key for a translation - domainWarning: { type: 'text', defaultValue: 'loading' }, -}; - WarningStory.storyName = 'Warning'; +WarningStory.args = { + // domainWarning must be the key for a translation + domainWarning: 'loading', +}; diff --git a/ui/pages/send/send-content/send-gas-row/send-gas-row.stories.js b/ui/pages/send/send-content/send-gas-row/send-gas-row.stories.js index 7d33033f2..89eca3413 100644 --- a/ui/pages/send/send-content/send-gas-row/send-gas-row.stories.js +++ b/ui/pages/send/send-content/send-gas-row/send-gas-row.stories.js @@ -23,11 +23,12 @@ export default { }, argTypes: { insufficientBalance: { - name: 'Is Insufficient Balance', control: { type: 'boolean' }, - defaultValue: false, }, }, + args: { + insufficientBalance: false, + }, }; export const DefaultStory = (args) => { diff --git a/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js b/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js index 36e9f773c..16d84ebad 100644 --- a/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js +++ b/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js @@ -4,6 +4,36 @@ import ExchangeRateDisplay from './exchange-rate-display'; export default { title: 'Pages/Swaps/ExchangeRateDisplay', id: __filename, + argTypes: { + primaryTokenValue: { + control: { + type: 'text', + }, + }, + primaryTokenDecimals: { + control: { + type: 'number', + }, + }, + primaryTokenSymbol: { + control: { + type: 'text', + }, + }, + secondaryTokenValue: { + control: { + type: 'text', + }, + }, + secondaryTokenDecimals: { + control: 'number', + }, + secondaryTokenSymbol: { + control: { + type: 'text', + }, + }, + }, }; export const DefaultStory = (args) => { @@ -12,41 +42,13 @@ export const DefaultStory = (args) => { DefaultStory.storyName = 'Default'; -DefaultStory.argTypes = { - primaryTokenValue: { - control: { - type: 'text', - }, - defaultValue: '2000000000000000000', - }, - primaryTokenDecimals: { - control: { - type: 'number', - }, - defaultValue: 18, - }, - primaryTokenSymbol: { - control: { - type: 'text', - }, - defaultValue: 'ETH', - }, - secondaryTokenValue: { - control: { - type: 'text', - }, - defaultValue: '200000000000000000', - }, - secondaryTokenDecimals: { - control: 'number', - defaultValue: 18, - }, - secondaryTokenSymbol: { - control: { - type: 'text', - }, - defaultValue: 'ABC', - }, +DefaultStory.args = { + primaryTokenValue: '2000000000000000000', + primaryTokenDecimals: 18, + primaryTokenSymbol: 'ETH', + secondaryTokenValue: '200000000000000000', + secondaryTokenDecimals: 18, + secondaryTokenSymbol: 'ABC', }; export const WhiteOnBlue = (args) => { @@ -68,41 +70,11 @@ export const WhiteOnBlue = (args) => { ); }; -WhiteOnBlue.argTypes = { - primaryTokenValue: { - control: { - type: 'text', - }, - defaultValue: '2000000000000000000', - }, - primaryTokenDecimals: { - control: { - type: 'number', - }, - defaultValue: 18, - }, - primaryTokenSymbol: { - control: { - type: 'text', - }, - defaultValue: 'ETH', - }, - secondaryTokenValue: { - control: { - type: 'text', - }, - defaultValue: '200000000000000000', - }, - secondaryTokenDecimals: { - control: { - type: 'number', - }, - defaultValue: 18, - }, - secondaryTokenSymbol: { - control: { - type: 'text', - }, - defaultValue: 'ABC', - }, +WhiteOnBlue.args = { + primaryTokenValue: '2000000000000000000', + primaryTokenDecimals: 18, + primaryTokenSymbol: 'ETH', + secondaryTokenValue: '200000000000000000', + secondaryTokenDecimals: 18, + secondaryTokenSymbol: 'ABC', };