Fix Storybook type annotations (#1091)

## What are you changing? - Updates type annotations in Source Storybook stories. ## Why? - All of the stories have a number of type errors. Whilst these (mostly) don't prevent the stories from running or rendering in Chromatic, the errors create a lot of visual noise in the code editor and can cause confusion when working on them.
guardian · Jan 22, 2024 · fa45856 · fa45856
2 parents b10a870 + 22c6a2c
commit fa45856
Show file tree

Hide file tree

Showing 57 changed files with 1,040 additions and 689 deletions.
diff --git a/.../source-react-components-development-kitchen/.storybook/preview/FocusManagerDecorator.tsx b/.../source-react-components-development-kitchen/.storybook/preview/FocusManagerDecorator.tsx
@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
 import { FocusStyleManager } from '@guardian/source-foundations';
+import { Decorator } from '@storybook/react';
 
-export const FocusManagerDecorator = (storyFn) => {
+export const FocusManagerDecorator: Decorator = (storyFn) => {
 	useEffect(() => {
 		FocusStyleManager.onlyShowFocusOnTabs();
 	});

diff --git a/...source-react-components-development-kitchen/.storybook/preview/ThemeProviderDecorator.tsx b/...source-react-components-development-kitchen/.storybook/preview/ThemeProviderDecorator.tsx
@@ -1,6 +1,7 @@
 import { ThemeProvider } from '@emotion/react';
+import { Decorator } from '@storybook/react';
 
-export const ThemeProviderDecorator = (storyFn, context) => {
+export const ThemeProviderDecorator: Decorator = (storyFn, context) => {
 	const theme = context.parameters.theme;
 	return theme ? (
 		<ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>

diff --git a/...ardian/source-react-components-development-kitchen/src/age-warning/AgeWarning.stories.tsx b/...ardian/source-react-components-development-kitchen/src/age-warning/AgeWarning.stories.tsx
@@ -1,36 +1,42 @@
-import type { Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { AgeWarningProps } from './AgeWarning';
 import { AgeWarning } from './AgeWarning';
 
-export default {
+const meta: Meta<typeof AgeWarning> = {
 	component: AgeWarning,
 	title: 'AgeWarning',
 };
 
-const Template: Story<AgeWarningProps> = (args: AgeWarningProps) => (
+export default meta;
+
+const Template: StoryFn<typeof AgeWarning> = (args: AgeWarningProps) => (
 	<AgeWarning {...args} />
 );
 
-export const ageWarning = Template.bind({});
+export const ageWarning: StoryFn<typeof AgeWarning> = Template.bind({});
 ageWarning.args = { age: '10 years old' };
 
-export const smallWarning = Template.bind({});
+export const smallWarning: StoryFn<typeof AgeWarning> = Template.bind({});
 smallWarning.args = { age: '5 months old', size: 'small' };
 
-export const screenReaderVersion = Template.bind({});
+export const screenReaderVersion: StoryFn<typeof AgeWarning> = Template.bind(
+	{},
+);
 screenReaderVersion.args = {
 	age: '20 million years old',
 	isScreenReader: true,
 };
 
-export const missingOldText = Template.bind({});
+export const missingOldText: StoryFn<typeof AgeWarning> = Template.bind({});
 missingOldText.args = { age: '5 years' };
 
-export const emptyWarningPrefix = Template.bind({});
+export const emptyWarningPrefix: StoryFn<typeof AgeWarning> = Template.bind({});
 emptyWarningPrefix.args = { age: '5 years', warningPrefix: '' };
 
-export const customWarningPrefix = Template.bind({});
+export const customWarningPrefix: StoryFn<typeof AgeWarning> = Template.bind(
+	{},
+);
 customWarningPrefix.args = { age: '5 years', warningPrefix: 'This book is ' };
 
-export const supportsDarkMode = Template.bind({});
+export const supportsDarkMode: StoryFn<typeof AgeWarning> = Template.bind({});
 supportsDarkMode.args = { age: '10 years old', supportsDarkMode: true };
diff --git a/libs/@guardian/source-react-components-development-kitchen/src/divider/Divider.stories.tsx b/libs/@guardian/source-react-components-development-kitchen/src/divider/Divider.stories.tsx
@@ -1,13 +1,15 @@
-import type { Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { DividerProps } from './Divider';
 import { Divider } from './Divider';
 
-export default {
+const meta: Meta<typeof Divider> = {
 	title: 'Divider',
 	component: Divider,
 };
 
-const Template: Story = (args: DividerProps) => (
+export default meta;
+
+const Template: StoryFn<typeof Divider> = (args: DividerProps) => (
 	<span>
 		<p>
 			The individual responsible for one of the most significant leaks in US
@@ -28,25 +30,25 @@ const Template: Story = (args: DividerProps) => (
 	</span>
 );
 
-export const DefaultDivider = Template.bind({});
+export const DefaultDivider: StoryFn<typeof Divider> = Template.bind({});
 
 // *****************************************************************************
 
-export const TightDivider = Template.bind({});
+export const TightDivider: StoryFn<typeof Divider> = Template.bind({});
 TightDivider.args = {
 	spaceAbove: 'tight',
 };
 
 // *****************************************************************************
 
-export const FullDivider = Template.bind({});
+export const FullDivider: StoryFn<typeof Divider> = Template.bind({});
 FullDivider.args = {
 	size: 'full',
 };
 
 // *****************************************************************************
 
-export const TextDivider = Template.bind({});
+export const TextDivider: StoryFn<typeof Divider> = Template.bind({});
 TextDivider.args = {
 	displayText: 'I am centred',
 };
diff --git a/...rce-react-components-development-kitchen/src/editorial-button/EditorialButton.stories.tsx b/...rce-react-components-development-kitchen/src/editorial-button/EditorialButton.stories.tsx
@@ -6,7 +6,7 @@ import {
 	ArticleSpecial,
 } from '@guardian/libs';
 import { SvgCross } from '@guardian/source-react-components';
-import type { Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import { EditorialButton } from './EditorialButton';
 import type { EditorialButtonProps } from './EditorialButton';
 
@@ -15,7 +15,7 @@ const defaultFormat = {
 	design: ArticleDesign.Standard,
 };
 
-export default {
+const meta: Meta<typeof EditorialButton> = {
 	title: 'EditorialButton',
 	component: EditorialButton,
 	argTypes: {
@@ -55,14 +55,18 @@ export default {
 	args: {
 		size: 'default',
 		hideLabel: false,
-		icon: 'undefined',
+		icon: undefined,
 		priority: 'primary',
 		iconSide: 'left',
 		nudgeIcon: false,
 	},
 };
 
-const Template: Story = (args: EditorialButtonProps) => {
+export default meta;
+
+const Template: StoryFn<typeof EditorialButton> = (
+	args: EditorialButtonProps,
+) => {
 	// Providing any value for cssOverrides, even undefined, overrides the custom styles
 	// for the editorial button so only pass through if it's defined
 	const { cssOverrides, ...rest } = args;
@@ -85,7 +89,7 @@ const pillars = [
 	ArticleSpecial.Labs,
 ];
 
-const RowTemplate: Story<EditorialButtonProps> = (
+const RowTemplate: StoryFn<typeof EditorialButton> = (
 	args: Partial<EditorialButtonProps>,
 ) => (
 	<div
@@ -106,39 +110,47 @@ const RowTemplate: Story<EditorialButtonProps> = (
 	</div>
 );
 
-export const WhenPrimary = RowTemplate.bind({});
+export const WhenPrimary: StoryFn<typeof EditorialButton> = RowTemplate.bind(
+	{},
+);
 WhenPrimary.args = {
 	priority: 'primary',
 	size: 'small',
 };
 
 // *****************************************************************************
 
-export const WhenSecondary = RowTemplate.bind({});
+export const WhenSecondary: StoryFn<typeof EditorialButton> = RowTemplate.bind(
+	{},
+);
 WhenSecondary.args = {
 	priority: 'secondary',
 	size: 'small',
 };
 
 // *****************************************************************************
 
-export const WhenTertiary = RowTemplate.bind({});
+export const WhenTertiary: StoryFn<typeof EditorialButton> = RowTemplate.bind(
+	{},
+);
 WhenTertiary.args = {
 	priority: 'tertiary',
 	size: 'small',
 };
 
 // *****************************************************************************
 
-export const WhenSubdued = RowTemplate.bind({});
+export const WhenSubdued: StoryFn<typeof EditorialButton> = RowTemplate.bind(
+	{},
+);
 WhenSubdued.args = {
 	priority: 'subdued',
 	size: 'small',
 };
 
 // *****************************************************************************
 
-export const WithOverrides = Template.bind({});
+export const WithOverrides: StoryFn<typeof EditorialButton> = Template.bind({});
 WithOverrides.args = {
 	cssOverrides: css`
 		background-color: pink;
@@ -147,5 +159,5 @@ WithOverrides.args = {
 
 // *****************************************************************************
 
-export const WithDefaults = Template.bind({});
+export const WithDefaults: StoryFn<typeof EditorialButton> = Template.bind({});
 WithDefaults.args = {};
diff --git a/...react-components-development-kitchen/src/editorial-button/EditorialLinkButton.stories.tsx b/...react-components-development-kitchen/src/editorial-button/EditorialLinkButton.stories.tsx
@@ -6,7 +6,7 @@ import {
 	ArticleSpecial,
 } from '@guardian/libs';
 import { SvgCross } from '@guardian/source-react-components';
-import type { Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import { EditorialLinkButton } from './EditorialLinkButton';
 import type { EditorialLinkButtonProps } from './EditorialLinkButton';
 
@@ -15,7 +15,7 @@ const defaultFormat = {
 	design: ArticleDesign.Standard,
 };
 
-export default {
+const meta: Meta<typeof EditorialLinkButton> = {
 	title: 'EditorialLinkButton',
 	component: EditorialLinkButton,
 	argTypes: {
@@ -55,14 +55,18 @@ export default {
 	args: {
 		size: 'default',
 		hideLabel: false,
-		icon: 'undefined',
+		icon: undefined,
 		priority: 'primary',
 		iconSide: 'left',
 		nudgeIcon: false,
 	},
 };
 
-const Template: Story = (args: EditorialLinkButtonProps) => {
+export default meta;
+
+const Template: StoryFn<typeof EditorialLinkButton> = (
+	args: EditorialLinkButtonProps,
+) => {
 	// Providing any value for cssOverrides, even undefined, overrides the custom styles
 	// for the editorial button so only pass through if it's defined
 	const { cssOverrides, ...rest } = args;
@@ -87,7 +91,7 @@ const pillars = [
 	ArticleSpecial.Labs,
 ];
 
-const RowTemplate: Story<EditorialLinkButtonProps> = (
+const RowTemplate: StoryFn<typeof EditorialLinkButton> = (
 	args: Partial<EditorialLinkButtonProps>,
 ) => (
 	<div
@@ -108,39 +112,45 @@ const RowTemplate: Story<EditorialLinkButtonProps> = (
 	</div>
 );
 
-export const WhenPrimary = RowTemplate.bind({});
+export const WhenPrimary: StoryFn<typeof EditorialLinkButton> =
+	RowTemplate.bind({});
 WhenPrimary.args = {
 	priority: 'primary',
 	size: 'small',
 };
 
 // *****************************************************************************
 
-export const WhenSecondary = RowTemplate.bind({});
+export const WhenSecondary: StoryFn<typeof EditorialLinkButton> =
+	RowTemplate.bind({});
 WhenSecondary.args = {
 	priority: 'secondary',
 	size: 'small',
 };
 
 // *****************************************************************************
 
-export const WhenTertiary = RowTemplate.bind({});
+export const WhenTertiary: StoryFn<typeof EditorialLinkButton> =
+	RowTemplate.bind({});
 WhenTertiary.args = {
 	priority: 'tertiary',
 	size: 'small',
 };
 
 // *****************************************************************************
 
-export const WhenSubdued = RowTemplate.bind({});
+export const WhenSubdued: StoryFn<typeof EditorialLinkButton> =
+	RowTemplate.bind({});
 WhenSubdued.args = {
 	priority: 'subdued',
 	size: 'small',
 };
 
 // *****************************************************************************
 
-export const WithOverrides = Template.bind({});
+export const WithOverrides: StoryFn<typeof EditorialLinkButton> = Template.bind(
+	{},
+);
 WithOverrides.args = {
 	cssOverrides: css`
 		background-color: pink;
@@ -149,5 +159,7 @@ WithOverrides.args = {
 
 // *****************************************************************************
 
-export const WithDefaults = Template.bind({});
+export const WithDefaults: StoryFn<typeof EditorialLinkButton> = Template.bind(
+	{},
+);
 WithDefaults.args = {};