Fix ts issue with storybooks

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 => <AdminPage { ...args } />;

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

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 => (
 	<AutomatticBylineLogo { ...args } />

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 => <CopyToClipboard { ...args } />;
 export const _default = Template.bind( {} );

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 => <DecorativeCard { ...args } />;

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 => <div style={ { padding: '3rem' } }>{ story() }</div> ],
-} satisfies Meta< typeof GlobalNotices >;
+};
+
+export default meta;
 
 const Template = args => {
 	const { createErrorNotice, createSuccessNotice, createInfoNotice, createWarningNotice } =

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 => <Gridicon { ...args } />;

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 = [
 	{

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 <IndeterminateProgressBar { ...args } />;

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 => <JetpackFooter { ...args } />;
 

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 => <JetpackLogo { ...args } />;
 

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 => <JetpackProtectLogo { ...args } />;
 

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 => <JetpackSearchLogo { ...args } />;
 

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 => (
 	<JetpackVaultPressBackupLogo { ...args } />

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 => (
 	<JetpackVideoPressLogo { ...args } />

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 => <LoadingPlaceholder { ...args } />;
 

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 => <NumberSlider { ...args } />;

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 => <PricingCard { ...args } />;

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 (

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 => <ProductOffer { ...args } />;
 

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 => <ProductPrice { ...args } />;

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 <ProgressBar { ...args } />;

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 => (
 	<SplitButton { ...args }>Buy now!</SplitButton>