Add a type on CatalogDecorator (#1742)

* Add a type on CatalogDecorator

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Type more catalogs

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

front/src/modules/ui/button/components/__stories__/Button.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { IconSearch } from '@/ui/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import {
   Button,
@@ -37,7 +38,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof Button> = {
   args: { title: 'Filter', Icon: IconSearch },
   argTypes: {
     size: { control: false },
@@ -109,7 +110,7 @@ export const Catalog: Story = {
   decorators: [CatalogDecorator],
 };
 
-export const SoonCatalog: Story = {
+export const SoonCatalog: CatalogStory<Story, typeof Button> = {
   args: { title: 'Filter', Icon: IconSearch, soon: true },
   argTypes: {
     size: { control: false },
@@ -181,7 +182,7 @@ export const SoonCatalog: Story = {
   decorators: [CatalogDecorator],
 };
 
-export const PositionCatalog: Story = {
+export const PositionCatalog: CatalogStory<Story, typeof Button> = {
   args: { title: 'Filter', Icon: IconSearch },
   argTypes: {
     size: { control: false },

front/src/modules/ui/button/components/__stories__/ButtonGroup.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { IconCheckbox, IconNotes, IconTimelineEvent } from '@/ui/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { Button, ButtonAccent, ButtonSize, ButtonVariant } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
@@ -32,7 +33,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof ButtonGroup> = {
   args: {
     children: [
       <Button Icon={IconNotes} title="Note" />,

front/src/modules/ui/button/components/__stories__/FloatingButton.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { IconSearch } from '@/ui/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { FloatingButton, FloatingButtonSize } from '../FloatingButton';
 
@@ -31,7 +32,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof FloatingButton> = {
   args: { title: 'Filter', Icon: IconSearch },
   argTypes: {
     size: { control: false },

front/src/modules/ui/button/components/__stories__/FloatingButtonGroup.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { IconCheckbox, IconNotes, IconTimelineEvent } from '@/ui/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { FloatingButton, FloatingButtonSize } from '../FloatingButton';
 import { FloatingButtonGroup } from '../FloatingButtonGroup';
@@ -30,7 +31,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof FloatingButtonGroup> = {
   args: {
     children: [
       <FloatingButton Icon={IconNotes} />,

front/src/modules/ui/button/components/__stories__/FloatingIconButton.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { IconSearch } from '@/ui/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import {
   FloatingIconButton,
@@ -33,7 +34,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof FloatingIconButton> = {
   args: { Icon: IconSearch },
   argTypes: {
     size: { control: false },

front/src/modules/ui/button/components/__stories__/FloatingIconButtonGroup.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { IconCheckbox, IconNotes, IconTimelineEvent } from '@/ui/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { FloatingIconButtonSize } from '../FloatingIconButton';
 import { FloatingIconButtonGroup } from '../FloatingIconButtonGroup';
@@ -32,7 +33,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof FloatingIconButtonGroup> = {
   argTypes: {
     size: { control: false },
   },

front/src/modules/ui/button/components/__stories__/IconButton.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { IconSearch } from '@/ui/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import {
   IconButton,
@@ -33,7 +34,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof IconButton> = {
   args: { Icon: IconSearch },
   argTypes: {
     size: { control: false },
@@ -103,7 +104,7 @@ export const Catalog: Story = {
   decorators: [CatalogDecorator],
 };
 
-export const PositionCatalog: Story = {
+export const PositionCatalog: CatalogStory<Story, typeof IconButton> = {
   args: { Icon: IconSearch },
   argTypes: {
     size: { control: false },

front/src/modules/ui/button/components/__stories__/IconButtonGroup.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { IconCheckbox, IconNotes, IconTimelineEvent } from '@/ui/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import {
   IconButtonAccent,
@@ -38,7 +39,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof IconButtonGroup> = {
   argTypes: {
     size: { control: false },
     variant: { control: false },

front/src/modules/ui/button/components/__stories__/LightButton.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { IconSearch } from '@/ui/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { LightButton, LightButtonAccent } from '../LightButton';
 
@@ -29,7 +30,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof LightButton> = {
   args: { title: 'Filter', icon: <IconSearch /> },
   argTypes: {
     accent: { control: false },

front/src/modules/ui/button/components/__stories__/LightIconButton.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { IconSearch } from '@/ui/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import {
   LightIconButton,
@@ -33,7 +34,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof LightIconButton> = {
   args: { title: 'Filter', Icon: IconSearch },
   argTypes: {
     accent: { control: false },

front/src/modules/ui/chip/components/__stories__/Chip.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { Chip, ChipAccent, ChipSize, ChipVariant } from '../Chip';
 
@@ -26,7 +27,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof Chip> = {
   args: { clickable: true, label: 'Hello' },
   argTypes: {
     size: { control: false },

front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import {
   AutosizeTextInput,
@@ -23,7 +24,7 @@ export const ButtonVariant: Story = {
   args: { variant: AutosizeTextInputVariant.Button },
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof AutosizeTextInput> = {
   parameters: {
     catalog: {
       dimensions: [

front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import {
   Checkbox,
@@ -29,7 +30,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof Checkbox> = {
   args: {},
   argTypes: {
     variant: { control: false },
@@ -52,6 +53,7 @@ export const Catalog: Story = {
             if (state === 'indeterminate') {
               return { indeterminate: true };
             }
+            return {};
           },
         },
         {

front/src/modules/ui/input/components/__stories__/Radio.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { LabelPosition, Radio, RadioSize } from '../Radio';
 
@@ -23,7 +24,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof Radio> = {
   args: {
     value: 'Radio',
   },
@@ -52,7 +53,7 @@ export const Catalog: Story = {
         {
           name: 'labelPosition',
           values: Object.values(LabelPosition),
-          props: (labelPosition: string) => ({
+          props: (labelPosition: LabelPosition) => ({
             labelPosition,
           }),
         },

front/src/modules/ui/menu-item/components/__stories__/MenuItem.stories.tsx

@@ -1,12 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { IconBell } from '@/ui/icon';
-import {
-  CatalogDecorator,
-  CatalogDimension,
-  CatalogOptions,
-} from '~/testing/decorators/CatalogDecorator';
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { MenuItemAccent } from '../../types/MenuItemAccent';
 import { MenuItem } from '../MenuItem';
@@ -33,7 +30,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof MenuItem> = {
   args: { ...Default.args },
   argTypes: {
     accent: { control: false },
@@ -98,15 +95,17 @@ export const Catalog: Story = {
                   ],
                 };
               }
+              default:
+                return {};
             }
           },
         },
-      ] as CatalogDimension[],
+      ],
       options: {
         elementContainer: {
           width: 200,
         },
-      } as CatalogOptions,
+      },
     },
   },
   decorators: [CatalogDecorator],

front/src/modules/ui/menu-item/components/__stories__/MenuItemCommand.stories.tsx

@@ -2,12 +2,9 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Command } from 'cmdk';
 
 import { IconBell } from '@/ui/icon';
-import {
-  CatalogDecorator,
-  CatalogDimension,
-  CatalogOptions,
-} from '~/testing/decorators/CatalogDecorator';
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { MenuItemCommand } from '../MenuItemCommand';
 
@@ -39,7 +36,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof MenuItemCommand> = {
   args: { LeftIcon: IconBell, text: 'Menu item', command: '⌘1' },
   argTypes: {
     className: { control: false },
@@ -60,7 +57,7 @@ export const Catalog: Story = {
         {
           name: 'selected',
           values: [true, false],
-          props: (selected: boolean) => ({ selected }),
+          props: () => ({}),
           labels: (selected: boolean) =>
             selected ? 'Selected' : 'Not selected',
         },
@@ -78,12 +75,12 @@ export const Catalog: Story = {
             }
           },
         },
-      ] as CatalogDimension[],
+      ],
       options: {
         elementContainer: {
           width: 200,
         },
-      } as CatalogOptions,
+      },
     },
   },
   render: (props) => (

front/src/modules/ui/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx

@@ -7,6 +7,7 @@ import {
   CatalogOptions,
 } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { MenuItemMultiSelect } from '../MenuItemMultiSelect';
 
@@ -26,7 +27,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof MenuItemMultiSelect> = {
   args: { LeftIcon: IconBell, text: 'Menu item' },
   argTypes: {
     className: { control: false },

front/src/modules/ui/menu-item/components/__stories__/MenuItemNavigate.stories.tsx

@@ -7,6 +7,7 @@ import {
   CatalogOptions,
 } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { MenuItemNavigate } from '../MenuItemNavigate';
 
@@ -26,7 +27,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof MenuItemNavigate> = {
   args: { LeftIcon: IconBell, text: 'Menu item' },
   argTypes: {
     className: { control: false },

front/src/modules/ui/menu-item/components/__stories__/MenuItemSelect.stories.tsx

@@ -7,6 +7,7 @@ import {
   CatalogOptions,
 } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { MenuItemSelect } from '../MenuItemSelect';
 
@@ -30,7 +31,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof MenuItemSelect> = {
   args: { LeftIcon: IconBell, text: 'Menu item' },
   argTypes: {
     className: { control: false },

front/src/modules/ui/menu-item/components/__stories__/MenuItemToggle.stories.tsx

@@ -7,6 +7,7 @@ import {
   CatalogOptions,
 } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { MenuItemToggle } from '../MenuItemToggle';
 
@@ -26,7 +27,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof MenuItemToggle> = {
   args: { LeftIcon: IconBell, text: 'Menu item' },
   argTypes: {
     className: { control: false },

front/src/modules/ui/navbar/__stories__/NavItem.stories.tsx

@@ -4,6 +4,7 @@ import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { IconSearch, IconSettings } from '@/ui/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import NavItem from '../components/NavItem';
 
@@ -38,7 +39,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator, ComponentWithRouterDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof NavItem> = {
   args: Default.args,
   decorators: [
     ComponentDecorator,

front/src/modules/ui/progress-bar/components/__stories__/CircularProgressBar.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { CircularProgressBar } from '../CircularProgressBar';
 
@@ -24,11 +25,8 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog = {
-  argTypes: {
-    strokeWidth: { control: false },
-    segmentColor: { control: false },
-  },
+export const Catalog: CatalogStory<Story, typeof CircularProgressBar> = {
+  argTypes: {},
   parameters: {
     catalog: {
       dimensions: [

front/src/modules/ui/progress-bar/components/__stories__/ProgressBar.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { ProgressBar } from '../ProgressBar';
 
@@ -25,7 +26,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog = {
+export const Catalog: CatalogStory<Story, typeof ProgressBar> = {
   args: {
     ...args,
   },
@@ -40,7 +41,7 @@ export const Catalog = {
         {
           name: 'animation',
           values: [true, false],
-          props: (autoStart: string) => ({ autoStart }),
+          props: (autoStart: string) => ({ autoStart: Boolean(autoStart) }),
           labels: (autoStart: string) => `AutoStart: ${autoStart}`,
         },
         {

front/src/modules/ui/tab/components/__stories__/Tab.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { IconCheckbox } from '@/ui/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { Tab } from '../Tab';
 
@@ -25,7 +26,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof Tab> = {
   args: { title: 'Tab title', Icon: IconCheckbox },
   argTypes: {
     active: { control: false },

front/src/modules/ui/tag/components/__stories__/Tag.stories.tsx

@@ -2,8 +2,10 @@ import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent } from '@storybook/testing-library';
 
+import { ThemeColor } from '@/ui/theme/constants/colors';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { Tag, TagColor } from '../Tag';
 
@@ -32,7 +34,7 @@ export const Default: Story = {
   },
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof Tag> = {
   args: { text: 'Urgent' },
   argTypes: {
     color: { control: false },
@@ -54,7 +56,7 @@ export const Catalog: Story = {
             'yellow',
             'gray',
           ] satisfies TagColor[],
-          props: (color: TagColor) => ({ color }),
+          props: (color: ThemeColor) => ({ color }),
         },
       ],
     },

front/src/modules/ui/tooltip/__stories__/Tooltip.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { AppTooltip as Tooltip, TooltipPosition } from '../AppTooltip';
 
@@ -32,7 +33,7 @@ export const Default: Story = {
   ),
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof Tooltip> = {
   args: { isOpen: true, content: 'Tooltip Test' },
   play: async ({ canvasElement }) => {
     Object.values(TooltipPosition).forEach((position) => {

front/src/modules/ui/typography/components/__stories__/H1Title.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
 
 import { H1Title, H1TitleFontColor } from '../H1Title';
 
@@ -25,7 +26,7 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
-export const Catalog: Story = {
+export const Catalog: CatalogStory<Story, typeof H1Title> = {
   args,
   decorators: [CatalogDecorator],
   parameters: {

front/src/testing/decorators/CatalogDecorator.tsx

@@ -1,3 +1,4 @@
+import { ComponentProps, JSX } from 'react';
 import styled from '@emotion/styled';
 import { Decorator } from '@storybook/react';
 
@@ -74,10 +75,12 @@ const emptyDimension = {
   props: () => ({}),
 } as CatalogDimension;
 
-export type CatalogDimension = {
+export type CatalogDimension<
+  ComponentType extends React.ElementType = () => JSX.Element,
+> = {
   name: string;
   values: any[];
-  props: (value: any) => Record<string, any>;
+  props: (value: any) => Partial<ComponentProps<ComponentType>>;
   labels?: (value: any) => string;
 };
 

front/src/testing/types.ts

@@ -0,0 +1,24 @@
+import { ElementType } from 'react';
+import { StoryObj } from '@storybook/react';
+
+import type {
+  CatalogDimension,
+  CatalogOptions,
+} from './decorators/CatalogDecorator';
+
+export type CatalogStory<
+  StoryType extends StoryObj<ComponentType>,
+  ComponentType extends ElementType,
+> = {
+  args?: StoryType['args'];
+  argTypes?: StoryType['argTypes'];
+  play?: StoryType['play'];
+  render?: StoryType['render'];
+  parameters: StoryType['parameters'] & {
+    catalog: {
+      dimensions: CatalogDimension<ComponentType>[];
+      options?: CatalogOptions;
+    };
+  };
+  decorators: StoryType['decorators'];
+};