From b2bac0b2179d657326ea9dd42255fc7f64345a7c Mon Sep 17 00:00:00 2001
From: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Date: Thu, 28 Sep 2023 12:44:55 +0300
Subject: [PATCH] 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>
---
 .../components/__stories__/Button.stories.tsx |  7 +++---
 .../__stories__/ButtonGroup.stories.tsx       |  3 ++-
 .../__stories__/FloatingButton.stories.tsx    |  3 ++-
 .../FloatingButtonGroup.stories.tsx           |  3 ++-
 .../FloatingIconButton.stories.tsx            |  3 ++-
 .../FloatingIconButtonGroup.stories.tsx       |  3 ++-
 .../__stories__/IconButton.stories.tsx        |  5 ++--
 .../__stories__/IconButtonGroup.stories.tsx   |  3 ++-
 .../__stories__/LightButton.stories.tsx       |  3 ++-
 .../__stories__/LightIconButton.stories.tsx   |  3 ++-
 .../components/__stories__/Chip.stories.tsx   |  3 ++-
 .../__stories__/AutosizeTextInput.stories.tsx |  3 ++-
 .../__stories__/Checkbox.stories.tsx          |  4 +++-
 .../components/__stories__/Radio.stories.tsx  |  5 ++--
 .../__stories__/MenuItem.stories.tsx          | 15 ++++++------
 .../__stories__/MenuItemCommand.stories.tsx   | 15 +++++-------
 .../MenuItemMultiSelect.stories.tsx           |  3 ++-
 .../__stories__/MenuItemNavigate.stories.tsx  |  3 ++-
 .../__stories__/MenuItemSelect.stories.tsx    |  3 ++-
 .../__stories__/MenuItemToggle.stories.tsx    |  3 ++-
 .../ui/navbar/__stories__/NavItem.stories.tsx |  3 ++-
 .../CircularProgressBar.stories.tsx           |  8 +++----
 .../__stories__/ProgressBar.stories.tsx       |  5 ++--
 .../components/__stories__/Tab.stories.tsx    |  3 ++-
 .../components/__stories__/Tag.stories.tsx    |  6 +++--
 .../tooltip/__stories__/Tooltip.stories.tsx   |  3 ++-
 .../__stories__/H1Title.stories.tsx           |  3 ++-
 .../testing/decorators/CatalogDecorator.tsx   |  7 ++++--
 front/src/testing/types.ts                    | 24 +++++++++++++++++++
 29 files changed, 101 insertions(+), 54 deletions(-)
 create mode 100644 front/src/testing/types.ts

diff --git a/front/src/modules/ui/button/components/__stories__/Button.stories.tsx b/front/src/modules/ui/button/components/__stories__/Button.stories.tsx
index 4773b5f16..e0ceb4092 100644
--- a/front/src/modules/ui/button/components/__stories__/Button.stories.tsx
+++ b/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 },
diff --git a/front/src/modules/ui/button/components/__stories__/ButtonGroup.stories.tsx b/front/src/modules/ui/button/components/__stories__/ButtonGroup.stories.tsx
index 0fa048707..5ecc69e69 100644
--- a/front/src/modules/ui/button/components/__stories__/ButtonGroup.stories.tsx
+++ b/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" />,
diff --git a/front/src/modules/ui/button/components/__stories__/FloatingButton.stories.tsx b/front/src/modules/ui/button/components/__stories__/FloatingButton.stories.tsx
index c7177955e..ab7c77708 100644
--- a/front/src/modules/ui/button/components/__stories__/FloatingButton.stories.tsx
+++ b/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 },
diff --git a/front/src/modules/ui/button/components/__stories__/FloatingButtonGroup.stories.tsx b/front/src/modules/ui/button/components/__stories__/FloatingButtonGroup.stories.tsx
index 18a8d52b1..18da6a9f5 100644
--- a/front/src/modules/ui/button/components/__stories__/FloatingButtonGroup.stories.tsx
+++ b/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} />,
diff --git a/front/src/modules/ui/button/components/__stories__/FloatingIconButton.stories.tsx b/front/src/modules/ui/button/components/__stories__/FloatingIconButton.stories.tsx
index fea03ae8a..65a94fc22 100644
--- a/front/src/modules/ui/button/components/__stories__/FloatingIconButton.stories.tsx
+++ b/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 },
diff --git a/front/src/modules/ui/button/components/__stories__/FloatingIconButtonGroup.stories.tsx b/front/src/modules/ui/button/components/__stories__/FloatingIconButtonGroup.stories.tsx
index 7b493656c..79a9fac92 100644
--- a/front/src/modules/ui/button/components/__stories__/FloatingIconButtonGroup.stories.tsx
+++ b/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 },
   },
diff --git a/front/src/modules/ui/button/components/__stories__/IconButton.stories.tsx b/front/src/modules/ui/button/components/__stories__/IconButton.stories.tsx
index 5d8d7a15a..3fab6cdde 100644
--- a/front/src/modules/ui/button/components/__stories__/IconButton.stories.tsx
+++ b/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 },
diff --git a/front/src/modules/ui/button/components/__stories__/IconButtonGroup.stories.tsx b/front/src/modules/ui/button/components/__stories__/IconButtonGroup.stories.tsx
index df84ed1bd..904db7414 100644
--- a/front/src/modules/ui/button/components/__stories__/IconButtonGroup.stories.tsx
+++ b/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 },
diff --git a/front/src/modules/ui/button/components/__stories__/LightButton.stories.tsx b/front/src/modules/ui/button/components/__stories__/LightButton.stories.tsx
index 4aa25fda5..b0bf9d753 100644
--- a/front/src/modules/ui/button/components/__stories__/LightButton.stories.tsx
+++ b/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 },
diff --git a/front/src/modules/ui/button/components/__stories__/LightIconButton.stories.tsx b/front/src/modules/ui/button/components/__stories__/LightIconButton.stories.tsx
index 1aa11c93b..4f8e87cbb 100644
--- a/front/src/modules/ui/button/components/__stories__/LightIconButton.stories.tsx
+++ b/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 },
diff --git a/front/src/modules/ui/chip/components/__stories__/Chip.stories.tsx b/front/src/modules/ui/chip/components/__stories__/Chip.stories.tsx
index bd914f20e..0faf6eb7e 100644
--- a/front/src/modules/ui/chip/components/__stories__/Chip.stories.tsx
+++ b/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 },
diff --git a/front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx b/front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx
index 019c7c807..b91bf2a57 100644
--- a/front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx
+++ b/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: [
diff --git a/front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx b/front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx
index ce46f24c6..6c7c688db 100644
--- a/front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx
+++ b/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 {};
           },
         },
         {
diff --git a/front/src/modules/ui/input/components/__stories__/Radio.stories.tsx b/front/src/modules/ui/input/components/__stories__/Radio.stories.tsx
index 3dd9fdd6b..3bfdbabe6 100644
--- a/front/src/modules/ui/input/components/__stories__/Radio.stories.tsx
+++ b/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,
           }),
         },
diff --git a/front/src/modules/ui/menu-item/components/__stories__/MenuItem.stories.tsx b/front/src/modules/ui/menu-item/components/__stories__/MenuItem.stories.tsx
index e7f20817c..ecb628a19 100644
--- a/front/src/modules/ui/menu-item/components/__stories__/MenuItem.stories.tsx
+++ b/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],
diff --git a/front/src/modules/ui/menu-item/components/__stories__/MenuItemCommand.stories.tsx b/front/src/modules/ui/menu-item/components/__stories__/MenuItemCommand.stories.tsx
index 92d8ced70..b33888462 100644
--- a/front/src/modules/ui/menu-item/components/__stories__/MenuItemCommand.stories.tsx
+++ b/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) => (
diff --git a/front/src/modules/ui/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx b/front/src/modules/ui/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx
index 66a8acc58..fc94028ab 100644
--- a/front/src/modules/ui/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx
+++ b/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 },
diff --git a/front/src/modules/ui/menu-item/components/__stories__/MenuItemNavigate.stories.tsx b/front/src/modules/ui/menu-item/components/__stories__/MenuItemNavigate.stories.tsx
index ec8a2da2d..4f577c899 100644
--- a/front/src/modules/ui/menu-item/components/__stories__/MenuItemNavigate.stories.tsx
+++ b/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 },
diff --git a/front/src/modules/ui/menu-item/components/__stories__/MenuItemSelect.stories.tsx b/front/src/modules/ui/menu-item/components/__stories__/MenuItemSelect.stories.tsx
index 8e80af5be..a9202a5bd 100644
--- a/front/src/modules/ui/menu-item/components/__stories__/MenuItemSelect.stories.tsx
+++ b/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 },
diff --git a/front/src/modules/ui/menu-item/components/__stories__/MenuItemToggle.stories.tsx b/front/src/modules/ui/menu-item/components/__stories__/MenuItemToggle.stories.tsx
index 02ef1a395..d7dd48931 100644
--- a/front/src/modules/ui/menu-item/components/__stories__/MenuItemToggle.stories.tsx
+++ b/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 },
diff --git a/front/src/modules/ui/navbar/__stories__/NavItem.stories.tsx b/front/src/modules/ui/navbar/__stories__/NavItem.stories.tsx
index 6bb28fbbe..574bdcc64 100644
--- a/front/src/modules/ui/navbar/__stories__/NavItem.stories.tsx
+++ b/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,
diff --git a/front/src/modules/ui/progress-bar/components/__stories__/CircularProgressBar.stories.tsx b/front/src/modules/ui/progress-bar/components/__stories__/CircularProgressBar.stories.tsx
index e593a745f..28d2987f1 100644
--- a/front/src/modules/ui/progress-bar/components/__stories__/CircularProgressBar.stories.tsx
+++ b/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: [
diff --git a/front/src/modules/ui/progress-bar/components/__stories__/ProgressBar.stories.tsx b/front/src/modules/ui/progress-bar/components/__stories__/ProgressBar.stories.tsx
index 4c7445633..807bdab97 100644
--- a/front/src/modules/ui/progress-bar/components/__stories__/ProgressBar.stories.tsx
+++ b/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}`,
         },
         {
diff --git a/front/src/modules/ui/tab/components/__stories__/Tab.stories.tsx b/front/src/modules/ui/tab/components/__stories__/Tab.stories.tsx
index 4b03be993..8af53d277 100644
--- a/front/src/modules/ui/tab/components/__stories__/Tab.stories.tsx
+++ b/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 },
diff --git a/front/src/modules/ui/tag/components/__stories__/Tag.stories.tsx b/front/src/modules/ui/tag/components/__stories__/Tag.stories.tsx
index a211615ae..c3fbff0cc 100644
--- a/front/src/modules/ui/tag/components/__stories__/Tag.stories.tsx
+++ b/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 }),
         },
       ],
     },
diff --git a/front/src/modules/ui/tooltip/__stories__/Tooltip.stories.tsx b/front/src/modules/ui/tooltip/__stories__/Tooltip.stories.tsx
index 3acb7fdee..5a9844ad6 100644
--- a/front/src/modules/ui/tooltip/__stories__/Tooltip.stories.tsx
+++ b/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) => {
diff --git a/front/src/modules/ui/typography/components/__stories__/H1Title.stories.tsx b/front/src/modules/ui/typography/components/__stories__/H1Title.stories.tsx
index 6469bf4d9..17f6a365a 100644
--- a/front/src/modules/ui/typography/components/__stories__/H1Title.stories.tsx
+++ b/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: {
diff --git a/front/src/testing/decorators/CatalogDecorator.tsx b/front/src/testing/decorators/CatalogDecorator.tsx
index 7297ed39f..9f98e8ce6 100644
--- a/front/src/testing/decorators/CatalogDecorator.tsx
+++ b/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;
 };
 
diff --git a/front/src/testing/types.ts b/front/src/testing/types.ts
new file mode 100644
index 000000000..81c1cd4a8
--- /dev/null
+++ b/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'];
+};