diff --git a/projects/js-packages/components/components/admin-page/stories/index.stories.tsx b/projects/js-packages/components/components/admin-page/stories/index.stories.tsx index 9547e06333d47..0ad40291a7818 100644 --- a/projects/js-packages/components/components/admin-page/stories/index.stories.tsx +++ b/projects/js-packages/components/components/admin-page/stories/index.stories.tsx @@ -5,7 +5,7 @@ import AdminPage from '../index.js'; import styles from './style.module.scss'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof AdminPage > = { title: 'JS Packages/Components/Admin Page', component: AdminPage, argTypes: { @@ -14,7 +14,9 @@ export default { showFooter: { control: 'boolean', defaultValue: true }, showBackground: { control: 'boolean', defaultValue: true }, }, -} as Meta< typeof AdminPage >; +}; + +export default meta; // Export additional stories using pre-defined values const Template: StoryFn< typeof AdminPage > = args => ; diff --git a/projects/js-packages/components/components/admin-section/stories/index.stories.tsx b/projects/js-packages/components/components/admin-section/stories/index.stories.tsx index 6e2b7134784c6..4df55e0024584 100644 --- a/projects/js-packages/components/components/admin-section/stories/index.stories.tsx +++ b/projects/js-packages/components/components/admin-section/stories/index.stories.tsx @@ -5,9 +5,11 @@ import AdminSection from '../basic/index.js'; import AdminSectionHero from '../hero/index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof AdminSection > = { title: 'JS Packages/Components/Admin Sections', -} as Meta< typeof AdminSection >; +}; + +export default meta; // Export additional stories using pre-defined values // eslint-disable-next-line @typescript-eslint/no-unused-vars diff --git a/projects/js-packages/components/components/automattic-byline-logo/stories/index.stories.tsx b/projects/js-packages/components/components/automattic-byline-logo/stories/index.stories.tsx index 33705e5d5110d..69b277e49a95f 100644 --- a/projects/js-packages/components/components/automattic-byline-logo/stories/index.stories.tsx +++ b/projects/js-packages/components/components/automattic-byline-logo/stories/index.stories.tsx @@ -1,10 +1,12 @@ import AutomatticBylineLogo from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof AutomatticBylineLogo > = { title: 'JS Packages/Components/Automattic Byline Logo', component: AutomatticBylineLogo, -} as Meta< typeof AutomatticBylineLogo >; +}; + +export default meta; const Template: StoryFn< typeof AutomatticBylineLogo > = args => ( diff --git a/projects/js-packages/components/components/copy-to-clipboard/stories/index.stories.tsx b/projects/js-packages/components/components/copy-to-clipboard/stories/index.stories.tsx index 43b76164ce950..5f462c2ad3cd7 100644 --- a/projects/js-packages/components/components/copy-to-clipboard/stories/index.stories.tsx +++ b/projects/js-packages/components/components/copy-to-clipboard/stories/index.stories.tsx @@ -1,10 +1,12 @@ import CopyToClipboard from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof CopyToClipboard > = { title: 'JS Packages/Components/CopyToClipboard', component: CopyToClipboard, -} as Meta< typeof CopyToClipboard >; +}; + +export default meta; const Template: StoryFn< typeof CopyToClipboard > = args => ; export const _default = Template.bind( {} ); diff --git a/projects/js-packages/components/components/decorative-card/stories/index.stories.tsx b/projects/js-packages/components/components/decorative-card/stories/index.stories.tsx index f81dc751cd400..9fbdfc8623876 100644 --- a/projects/js-packages/components/components/decorative-card/stories/index.stories.tsx +++ b/projects/js-packages/components/components/decorative-card/stories/index.stories.tsx @@ -1,10 +1,12 @@ import DecorativeCard from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof DecorativeCard > = { title: 'JS Packages/Components/Decorative Card', component: DecorativeCard, -} as Meta< typeof DecorativeCard >; +}; + +export default meta; // Export additional stories using pre-defined values const Template: StoryFn< typeof DecorativeCard > = args => ; diff --git a/projects/js-packages/components/components/global-notices/stories/index.stories.tsx b/projects/js-packages/components/components/global-notices/stories/index.stories.tsx index de3afbec38861..2cf627b4af486 100644 --- a/projects/js-packages/components/components/global-notices/stories/index.stories.tsx +++ b/projects/js-packages/components/components/global-notices/stories/index.stories.tsx @@ -3,11 +3,13 @@ import Button from '../../button/index.js'; import { GlobalNotices, useGlobalNotices } from '../index.js'; import type { Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof GlobalNotices > = { title: 'JS Packages/Components/GlobalNotices', component: GlobalNotices, decorators: [ story =>
{ story() }
], -} satisfies Meta< typeof GlobalNotices >; +}; + +export default meta; const Template = args => { const { createErrorNotice, createSuccessNotice, createInfoNotice, createWarningNotice } = diff --git a/projects/js-packages/components/components/gridicon/stories/index.stories.tsx b/projects/js-packages/components/components/gridicon/stories/index.stories.tsx index 9238e1f7a4a01..252a1353988a9 100644 --- a/projects/js-packages/components/components/gridicon/stories/index.stories.tsx +++ b/projects/js-packages/components/components/gridicon/stories/index.stories.tsx @@ -1,10 +1,12 @@ import Gridicon from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof Gridicon > = { title: 'JS Packages/Components/Gridicon', component: Gridicon, -} as Meta< typeof Gridicon >; +}; + +export default meta; // Export additional stories using pre-defined values const Template: StoryFn< typeof Gridicon > = args => ; diff --git a/projects/js-packages/components/components/icons/stories/index.stories.tsx b/projects/js-packages/components/components/icons/stories/index.stories.tsx index e733d70880924..0611c7c085f1d 100644 --- a/projects/js-packages/components/components/icons/stories/index.stories.tsx +++ b/projects/js-packages/components/components/icons/stories/index.stories.tsx @@ -2,11 +2,13 @@ import * as allIcons from '../index.js'; import styles from './style.module.scss'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof allIcons > = { title: 'JS Packages/Components/Icons', component: allIcons, parameters: {}, -} as Meta< typeof allIcons >; +}; + +export default meta; const sizes = [ { diff --git a/projects/js-packages/components/components/indeterminate-progress-bar/stories/index.stories.tsx b/projects/js-packages/components/components/indeterminate-progress-bar/stories/index.stories.tsx index fc727276eb39d..94945362a1913 100644 --- a/projects/js-packages/components/components/indeterminate-progress-bar/stories/index.stories.tsx +++ b/projects/js-packages/components/components/indeterminate-progress-bar/stories/index.stories.tsx @@ -1,10 +1,12 @@ import IndeterminateProgressBar from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof IndeterminateProgressBar > = { title: 'JS Packages/Components/Indeterminate Progress Bar', component: IndeterminateProgressBar, -} as Meta< typeof IndeterminateProgressBar >; +}; + +export default meta; const Template: StoryFn< typeof IndeterminateProgressBar > = args => { return ; diff --git a/projects/js-packages/components/components/jetpack-footer/stories/index.stories.tsx b/projects/js-packages/components/components/jetpack-footer/stories/index.stories.tsx index b96b1b7d7f794..bbb8a55b1fb0e 100644 --- a/projects/js-packages/components/components/jetpack-footer/stories/index.stories.tsx +++ b/projects/js-packages/components/components/jetpack-footer/stories/index.stories.tsx @@ -1,10 +1,12 @@ import JetpackFooter from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof JetpackFooter > = { title: 'JS Packages/Components/Jetpack Footer', component: JetpackFooter, -} as Meta< typeof JetpackFooter >; +}; + +export default meta; const Template: StoryFn< typeof JetpackFooter > = args => ; diff --git a/projects/js-packages/components/components/jetpack-logo/stories/index.stories.tsx b/projects/js-packages/components/components/jetpack-logo/stories/index.stories.tsx index 9691b0f3ef809..68dd6eee00a56 100644 --- a/projects/js-packages/components/components/jetpack-logo/stories/index.stories.tsx +++ b/projects/js-packages/components/components/jetpack-logo/stories/index.stories.tsx @@ -1,13 +1,15 @@ import JetpackLogo from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof JetpackLogo > = { title: 'JS Packages/Components/Jetpack Logo', component: JetpackLogo, argTypes: { logoColor: { control: 'color' }, }, -} as Meta< typeof JetpackLogo >; +}; + +export default meta; const Template: StoryFn< typeof JetpackLogo > = args => ; diff --git a/projects/js-packages/components/components/jetpack-protect-logo/stories/index.stories.tsx b/projects/js-packages/components/components/jetpack-protect-logo/stories/index.stories.tsx index 7e32baa0e1656..6ea5afcbe9820 100644 --- a/projects/js-packages/components/components/jetpack-protect-logo/stories/index.stories.tsx +++ b/projects/js-packages/components/components/jetpack-protect-logo/stories/index.stories.tsx @@ -1,13 +1,15 @@ import JetpackProtectLogo from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof JetpackProtectLogo > = { title: 'JS Packages/Components/Jetpack Protect Logo', component: JetpackProtectLogo, argTypes: { logoColor: { control: 'color' }, }, -} as Meta< typeof JetpackProtectLogo >; +}; + +export default meta; const Template: StoryFn< typeof JetpackProtectLogo > = args => ; diff --git a/projects/js-packages/components/components/jetpack-search-logo/stories/index.stories.tsx b/projects/js-packages/components/components/jetpack-search-logo/stories/index.stories.tsx index 250d296c003fb..c66838240422a 100644 --- a/projects/js-packages/components/components/jetpack-search-logo/stories/index.stories.tsx +++ b/projects/js-packages/components/components/jetpack-search-logo/stories/index.stories.tsx @@ -1,13 +1,15 @@ import JetpackSearchLogo from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof JetpackSearchLogo > = { title: 'JS Packages/Components/Jetpack Search Logo', component: JetpackSearchLogo, argTypes: { logoColor: { control: 'color' }, }, -} as Meta< typeof JetpackSearchLogo >; +}; + +export default meta; const Template: StoryFn< typeof JetpackSearchLogo > = args => ; diff --git a/projects/js-packages/components/components/jetpack-vaultpress-backup-logo/stories/index.stories.tsx b/projects/js-packages/components/components/jetpack-vaultpress-backup-logo/stories/index.stories.tsx index c8207f84fe60a..35b9e62c1f0eb 100644 --- a/projects/js-packages/components/components/jetpack-vaultpress-backup-logo/stories/index.stories.tsx +++ b/projects/js-packages/components/components/jetpack-vaultpress-backup-logo/stories/index.stories.tsx @@ -1,11 +1,13 @@ import JetpackVaultPressBackupLogo from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof JetpackVaultPressBackupLogo > = { title: 'JS Packages/Components/Jetpack VaultPress Backup Logo', component: JetpackVaultPressBackupLogo, argTypes: {}, -} as Meta< typeof JetpackVaultPressBackupLogo >; +}; + +export default meta; const Template: StoryFn< typeof JetpackVaultPressBackupLogo > = args => ( diff --git a/projects/js-packages/components/components/jetpack-videopress-logo/stories/index.stories.tsx b/projects/js-packages/components/components/jetpack-videopress-logo/stories/index.stories.tsx index 00ddb51d564b9..faf06f20bdc95 100644 --- a/projects/js-packages/components/components/jetpack-videopress-logo/stories/index.stories.tsx +++ b/projects/js-packages/components/components/jetpack-videopress-logo/stories/index.stories.tsx @@ -1,11 +1,13 @@ import JetpackVideoPressLogo from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof JetpackVideoPressLogo > = { title: 'JS Packages/Components/Jetpack VideoPress Logo', component: JetpackVideoPressLogo, argTypes: {}, -} as Meta< typeof JetpackVideoPressLogo >; +}; + +export default meta; const Template: StoryFn< typeof JetpackVideoPressLogo > = args => ( diff --git a/projects/js-packages/components/components/loading-placeholder/stories/index.stories.tsx b/projects/js-packages/components/components/loading-placeholder/stories/index.stories.tsx index 3af4a84641af7..79ec51ea84de1 100644 --- a/projects/js-packages/components/components/loading-placeholder/stories/index.stories.tsx +++ b/projects/js-packages/components/components/loading-placeholder/stories/index.stories.tsx @@ -7,13 +7,15 @@ import LoadingPlaceholder from '../index.js'; */ import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof LoadingPlaceholder > = { title: 'JS Packages/Components/Loading Placeholder', component: LoadingPlaceholder, parameters: { layout: 'centered', }, -} as Meta< typeof LoadingPlaceholder >; +}; + +export default meta; const Template: StoryFn< typeof LoadingPlaceholder > = args => ; diff --git a/projects/js-packages/components/components/number-slider/stories/index.stories.tsx b/projects/js-packages/components/components/number-slider/stories/index.stories.tsx index 0e36c3b4ba175..abf5be4018867 100644 --- a/projects/js-packages/components/components/number-slider/stories/index.stories.tsx +++ b/projects/js-packages/components/components/number-slider/stories/index.stories.tsx @@ -2,10 +2,12 @@ import { useState } from 'react'; import NumberSlider from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof NumberSlider > = { title: 'JS Packages/Components/Number Slider', component: NumberSlider, -} as Meta< typeof NumberSlider >; +}; + +export default meta; // Export additional stories using pre-defined values const Template: StoryFn< typeof NumberSlider > = args => ; diff --git a/projects/js-packages/components/components/pricing-card/stories/index.stories.tsx b/projects/js-packages/components/components/pricing-card/stories/index.stories.tsx index f326bd6140a35..bc4b0e7ff968a 100644 --- a/projects/js-packages/components/components/pricing-card/stories/index.stories.tsx +++ b/projects/js-packages/components/components/pricing-card/stories/index.stories.tsx @@ -2,13 +2,15 @@ import { action } from '@storybook/addon-actions'; import PricingCard from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof PricingCard > = { title: 'JS Packages/Components/Pricing Card', component: PricingCard, argTypes: { onCtaClick: { action: 'clicked' }, }, -} as Meta< typeof PricingCard >; +}; + +export default meta; // Export additional stories using pre-defined values const Template: StoryFn< typeof PricingCard > = args => ; diff --git a/projects/js-packages/components/components/pricing-table/stories/index.stories.tsx b/projects/js-packages/components/components/pricing-table/stories/index.stories.tsx index 459a18adbfbb5..0f202cdd7d1cc 100644 --- a/projects/js-packages/components/components/pricing-table/stories/index.stories.tsx +++ b/projects/js-packages/components/components/pricing-table/stories/index.stories.tsx @@ -7,11 +7,13 @@ import PricingTable, { } from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof PricingTable > = { title: 'JS Packages/Components/Pricing Table', component: PricingTable, subcomponents: { PricingTableColumn, PricingTableHeader, PricingTableItem }, -} as Meta< typeof PricingTable >; +}; + +export default meta; const Template: StoryFn< typeof PricingTable > = args => { return ( diff --git a/projects/js-packages/components/components/product-offer/stories/index.stories.tsx b/projects/js-packages/components/components/product-offer/stories/index.stories.tsx index 51b1759561450..8bf0ef1cd5b74 100644 --- a/projects/js-packages/components/components/product-offer/stories/index.stories.tsx +++ b/projects/js-packages/components/components/product-offer/stories/index.stories.tsx @@ -2,14 +2,16 @@ import { IconsCard } from '../icons-card.js'; import ProductOffer from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof ProductOffer > = { title: 'JS Packages/Components/Product Offer', component: ProductOffer, parameters: { actions: { argTypesRegex: '^on.*' }, layout: 'centered', }, -} as Meta< typeof ProductOffer >; +}; + +export default meta; const Template: StoryFn< typeof ProductOffer > = args => ; diff --git a/projects/js-packages/components/components/product-price/stories/index.stories.tsx b/projects/js-packages/components/components/product-price/stories/index.stories.tsx index 022060ad36a67..103d6108a43fc 100644 --- a/projects/js-packages/components/components/product-price/stories/index.stories.tsx +++ b/projects/js-packages/components/components/product-price/stories/index.stories.tsx @@ -2,7 +2,7 @@ import { CURRENCIES } from '@automattic/format-currency'; import ProductPrice from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof ProductPrice > = { title: 'JS Packages/Components/Product Price', component: ProductPrice, argTypes: { @@ -11,7 +11,9 @@ export default { options: Object.keys( CURRENCIES ), }, }, -} as Meta< typeof ProductPrice >; +}; + +export default meta; // Export additional stories using pre-defined values const Template: StoryFn< typeof ProductPrice > = args => ; diff --git a/projects/js-packages/components/components/progress-bar/stories/index.stories.tsx b/projects/js-packages/components/components/progress-bar/stories/index.stories.tsx index 7c051bc490989..0f627dc119aca 100644 --- a/projects/js-packages/components/components/progress-bar/stories/index.stories.tsx +++ b/projects/js-packages/components/components/progress-bar/stories/index.stories.tsx @@ -1,10 +1,12 @@ import ProgressBar from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof ProgressBar > = { title: 'JS Packages/Components/Progress Bar', component: ProgressBar, -} as Meta< typeof ProgressBar >; +}; + +export default meta; const Template: StoryFn< typeof ProgressBar > = args => { return ; diff --git a/projects/js-packages/components/components/split-button/stories/index.stories.tsx b/projects/js-packages/components/components/split-button/stories/index.stories.tsx index 8e6dda10b3d2f..f634ba6dd5b5b 100644 --- a/projects/js-packages/components/components/split-button/stories/index.stories.tsx +++ b/projects/js-packages/components/components/split-button/stories/index.stories.tsx @@ -1,7 +1,7 @@ import SplitButton from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof SplitButton > = { title: 'JS Packages/Components/Split Button', component: SplitButton, argTypes: { @@ -26,7 +26,9 @@ export default { default: 'dark', }, }, -} as Meta< typeof SplitButton >; +}; + +export default meta; const Template: StoryFn< typeof SplitButton > = args => ( Buy now! diff --git a/projects/js-packages/components/components/stat-card/stories/index.stories.tsx b/projects/js-packages/components/components/stat-card/stories/index.stories.tsx index 6e8ba5df144b7..0bca4f710ab61 100644 --- a/projects/js-packages/components/components/stat-card/stories/index.stories.tsx +++ b/projects/js-packages/components/components/stat-card/stories/index.stories.tsx @@ -2,7 +2,7 @@ import { Icon, postList } from '@wordpress/icons'; import StatCard from '../index.js'; import type { StoryFn, Meta } from '@storybook/react'; -export default { +const meta: Meta< typeof StatCard > = { title: 'JS Packages/Components/Stat Card', component: StatCard, argTypes: { @@ -22,7 +22,9 @@ export default { }, }, }, -} as Meta< typeof StatCard >; +}; + +export default meta; const defaultArgs = { icon: , diff --git a/projects/js-packages/components/components/theme-provider/stories/index.stories.tsx b/projects/js-packages/components/components/theme-provider/stories/index.stories.tsx index 3ddf1b8c074ae..397d22dde1436 100644 --- a/projects/js-packages/components/components/theme-provider/stories/index.stories.tsx +++ b/projects/js-packages/components/components/theme-provider/stories/index.stories.tsx @@ -41,9 +41,11 @@ function getContrast( hexcolor ) { // Check contrast return yiq >= 128 ? 'black' : 'white'; } -export default { +const meta: Meta< typeof ThemeProvider > = { title: 'JS Packages/Components/Theme Provider', -} as Meta< typeof ThemeProvider >; +}; + +export default meta; const noop = () => { //