From 5a8568f51645921b3387a3b5878d804887612e02 Mon Sep 17 00:00:00 2001
From: Alllex202 <alllex.202@gmail.com>
Date: Thu, 12 Sep 2024 21:09:37 +0500
Subject: [PATCH] feat(condo): INFRA-509 added types

---
 packages/ui/src/stories/ActionBar.stories.tsx |  8 +++----
 packages/ui/src/stories/Alert.stories.tsx     | 12 +++++------
 packages/ui/src/stories/Banner.stories.tsx    | 12 +++++------
 .../ui/src/stories/Button/Button.stories.tsx  |  7 ++++---
 .../src/stories/Button/IconButton.stories.tsx |  5 +++--
 packages/ui/src/stories/Card/Card.stories.tsx | 11 +++++-----
 .../src/stories/Card/CardButton.stories.tsx   | 11 +++++-----
 .../src/stories/Card/CardCheckbox.stories.tsx | 12 +++++------
 packages/ui/src/stories/Carousel.stories.tsx  |  5 +++--
 packages/ui/src/stories/Checkbox.stories.tsx  | 12 +++++------
 packages/ui/src/stories/Dropdown.stories.tsx  |  9 ++++----
 .../ui/src/stories/Input/Input.stories.tsx    |  6 +++---
 .../ui/src/stories/Input/Password.stories.tsx |  6 +++---
 .../ui/src/stories/Input/Phone.stories.tsx    |  6 +++---
 packages/ui/src/stories/List.stories.tsx      |  6 +++---
 packages/ui/src/stories/Markdown.stories.tsx  |  6 +++---
 packages/ui/src/stories/Modal.stories.tsx     | 13 ++++++------
 .../src/stories/ProgressIndicator.stories.tsx |  7 ++++---
 .../ui/src/stories/Radio/Radio.stories.tsx    | 12 +++++------
 .../src/stories/Radio/RadioGroup.stories.tsx  |  9 ++++----
 packages/ui/src/stories/Select.stories.tsx    | 21 ++++++++++---------
 packages/ui/src/stories/Space.stories.tsx     |  7 ++++---
 packages/ui/src/stories/Steps.stories.tsx     | 11 +++++-----
 packages/ui/src/stories/Tabs.stories.tsx      |  8 +++----
 packages/ui/src/stories/Tag.stories.tsx       |  6 +++---
 packages/ui/src/stories/Tooltip.stories.tsx   |  4 ++--
 packages/ui/src/stories/TourStep.stories.tsx  |  4 ++--
 .../src/stories/Typography/Link.stories.tsx   |  5 +++--
 .../stories/Typography/Paragraph.stories.tsx  |  5 +++--
 .../src/stories/Typography/Text.stories.tsx   |  5 +++--
 .../src/stories/Typography/Title.stories.tsx  |  4 ++--
 packages/ui/src/stories/colors.stories.tsx    |  5 +++--
 packages/ui/src/stories/icons.stories.tsx     |  5 +++--
 33 files changed, 141 insertions(+), 124 deletions(-)

diff --git a/packages/ui/src/stories/ActionBar.stories.tsx b/packages/ui/src/stories/ActionBar.stories.tsx
index 546c2633e01..156ee6ead6b 100644
--- a/packages/ui/src/stories/ActionBar.stories.tsx
+++ b/packages/ui/src/stories/ActionBar.stories.tsx
@@ -1,10 +1,10 @@
-import { StoryFn, Meta } from '@storybook/react'
 import { Col, Row } from 'antd'
 import React from 'react'
 
 import { ActionBar as Component, Button, Typography, Dropdown } from '@open-condo/ui/src'
 import { colors } from '@open-condo/ui/src/colors'
 
+import type { StoryFn, Meta, StoryObj } from '@storybook/react'
 
 const LOREM_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid amet dolores eligendi' +
     ' est ex, facilis, iure magnam molestias neque, possimus praesentium quidem repellat saepe similique vero vitae' +
@@ -43,7 +43,7 @@ const Template: StoryFn<typeof Component> = (args) => {
     )
 }
 
-export const Simple = {
+export const Simple: StoryObj<typeof Component> = {
     render: Template,
     args: {
         actions: [
@@ -53,7 +53,7 @@ export const Simple = {
     },
 }
 
-export const WithMessage = {
+export const WithMessage: StoryObj<typeof Component> = {
     render: Template,
     args: {
         message: 'Action bar message',
@@ -64,7 +64,7 @@ export const WithMessage = {
     },
 }
 
-export const WithDropdownButton = {
+export const WithDropdownButton: StoryObj<typeof Component> = {
     render: Template,
     args: {
         actions: [
diff --git a/packages/ui/src/stories/Alert.stories.tsx b/packages/ui/src/stories/Alert.stories.tsx
index f410cb93810..d994b9b9086 100644
--- a/packages/ui/src/stories/Alert.stories.tsx
+++ b/packages/ui/src/stories/Alert.stories.tsx
@@ -1,7 +1,7 @@
-import { Meta } from '@storybook/react'
-
 import { Alert } from '@open-condo/ui/src'
 
+import type { Meta, StoryObj } from '@storybook/react'
+
 export default {
     title: 'Components/Alert',
     component: Alert,
@@ -13,25 +13,25 @@ export default {
     },
 } as Meta<typeof Alert>
  
-export const SuccessAlert = {
+export const SuccessAlert: StoryObj<typeof Alert> = {
     args: {
         type: 'success',
     },
 }
 
-export const InfoAlert = {
+export const InfoAlert: StoryObj<typeof Alert> = {
     args: {
         type: 'info',
     },
 }
 
-export const WarningAlert = {
+export const WarningAlert: StoryObj<typeof Alert> = {
     args: {
         type: 'warning',
     },
 }
 
-export const ErrorAlert = {
+export const ErrorAlert: StoryObj<typeof Alert> = {
     args: {
         type: 'error',
     },
diff --git a/packages/ui/src/stories/Banner.stories.tsx b/packages/ui/src/stories/Banner.stories.tsx
index b99e5e01a38..5ad70d26d46 100644
--- a/packages/ui/src/stories/Banner.stories.tsx
+++ b/packages/ui/src/stories/Banner.stories.tsx
@@ -1,8 +1,8 @@
-import { Meta } from '@storybook/react'
-
 import { Banner as Component } from '@open-condo/ui/src'
 import { colors } from '@open-condo/ui/src/colors'
 
+import type { Meta, StoryObj } from '@storybook/react'
+
 export default {
     title: 'Components/Banner',
     component: Component,
@@ -20,7 +20,7 @@ export default {
     },
 } as Meta<typeof Component>
 
-export const Solid = {
+export const Solid: StoryObj<typeof Component> = {
     args: {
         backgroundColor: '#9b9dfa',
         title: 'Settlement bank',
@@ -31,7 +31,7 @@ export const Solid = {
     },
 }
 
-export const Gradient = {
+export const Gradient: StoryObj<typeof Component> = {
     args: {
         backgroundColor: colors.brandGradient['1'],
         title: 'Some long description that takes 2 rows of texts',
@@ -42,7 +42,7 @@ export const Gradient = {
     },
 }
 
-export const NoAction = {
+export const NoAction: StoryObj<typeof Component> = {
     args: {
         backgroundColor: '#d3e3ff',
         title: 'Banner can exist without an action button',
@@ -52,7 +52,7 @@ export const NoAction = {
     },
 }
 
-export const Compact = {
+export const Compact: StoryObj<typeof Component> = {
     args: {
         backgroundColor: '#d3e3ff',
         title: 'Banner can exist without an action button',
diff --git a/packages/ui/src/stories/Button/Button.stories.tsx b/packages/ui/src/stories/Button/Button.stories.tsx
index b9e26e64f7e..39be0cf28a8 100644
--- a/packages/ui/src/stories/Button/Button.stories.tsx
+++ b/packages/ui/src/stories/Button/Button.stories.tsx
@@ -1,9 +1,10 @@
-import { Meta } from '@storybook/react'
 import React from 'react'
 
 import * as condoIcons from '@open-condo/icons'
 import { Button } from '@open-condo/ui/src'
 
+import type { Meta, StoryObj } from '@storybook/react'
+
 const icons = Object.assign({}, ...Object.entries(condoIcons).map(([key, Icon]) => ({
     [`${key}-small`]: <Icon size='small'/>,
     [`${key}-medium`]: <Icon size='medium'/>,
@@ -40,13 +41,13 @@ export default {
     },
 } as Meta<typeof Button>
 
-export const Primary = {
+export const Primary: StoryObj<typeof Button> = {
     args: {
         type: 'primary',
     },
 }
 
-export const Secondary = {
+export const Secondary: StoryObj<typeof Button> = {
     args: {
         type: 'secondary',
     },
diff --git a/packages/ui/src/stories/Button/IconButton.stories.tsx b/packages/ui/src/stories/Button/IconButton.stories.tsx
index e828fa123db..386bd05c03e 100644
--- a/packages/ui/src/stories/Button/IconButton.stories.tsx
+++ b/packages/ui/src/stories/Button/IconButton.stories.tsx
@@ -1,9 +1,10 @@
-import { Meta } from '@storybook/react'
 import React from 'react'
 
 import * as condoIcons from '@open-condo/icons'
 import { Button } from '@open-condo/ui/src'
 
+import type { Meta, StoryObj } from '@storybook/react'
+
 const Component = Button.Icon
 const { Trash } = condoIcons
 
@@ -38,4 +39,4 @@ export default {
     },
 } as Meta<typeof Component>
 
-export const IconButton = {}
+export const IconButton: StoryObj<typeof Component> = {}
diff --git a/packages/ui/src/stories/Card/Card.stories.tsx b/packages/ui/src/stories/Card/Card.stories.tsx
index f9e36323849..8bede3525bf 100644
--- a/packages/ui/src/stories/Card/Card.stories.tsx
+++ b/packages/ui/src/stories/Card/Card.stories.tsx
@@ -1,8 +1,9 @@
-import { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 
 import { Card as Component, Typography } from '@open-condo/ui/src'
 
+import type { StoryFn, Meta, StoryObj } from '@storybook/react'
+
 export default {
     title: 'Components/Card',
     component: Component,
@@ -23,11 +24,11 @@ const Template: StoryFn<typeof Component> = ({ children, ...rest }) => {
     )
 }
 
-export const Simple = {
+export const Simple: StoryObj<typeof Component> = {
     render: Template,
 }
 
-export const WithTitle = {
+export const WithTitle: StoryObj<typeof Component> = {
     render: Template,
     args: {
         title: <Typography.Title level={3}>Some Title Content</Typography.Title>,
@@ -37,14 +38,14 @@ export const WithTitle = {
     },
 }
 
-export const Accent = {
+export const Accent: StoryObj<typeof Component> = {
     render: Template,
     args: {
         accent: true,
     },
 }
 
-export const AccentWithTitle = {
+export const AccentWithTitle: StoryObj<typeof Component> = {
     render: Template,
     args: {
         title: <Typography.Title level={3}>Some Title Content</Typography.Title>,
diff --git a/packages/ui/src/stories/Card/CardButton.stories.tsx b/packages/ui/src/stories/Card/CardButton.stories.tsx
index c660087e7ac..3add1ec2b82 100644
--- a/packages/ui/src/stories/Card/CardButton.stories.tsx
+++ b/packages/ui/src/stories/Card/CardButton.stories.tsx
@@ -1,13 +1,14 @@
-import { Meta, StoryFn } from '@storybook/react'
-import React from 'react'
+import React, { ComponentProps } from 'react'
 
 import { PlusCircle } from '@open-condo/icons'
 import { Card as Component, CardButtonProps } from '@open-condo/ui/src'
 import { colors } from '@open-condo/ui/src/colors'
 
+import type { Meta, StoryFn, StoryObj } from '@storybook/react'
+
 const CardButton = Component.CardButton
 
-type StoryProps = Pick<CardButtonProps, 'accent' | 'disabled'> & {
+type StoryProps = ComponentProps<typeof CardButton> & {
     accent: boolean;
     disabled: boolean;
     headerTag: boolean;
@@ -51,7 +52,7 @@ export default {
         bodySecondLink: true,
         bodyButton: true,
     },
-} as Meta<typeof CardButton> & { args: StoryProps }
+} as Meta<StoryProps>
 
 const Template: StoryFn<StoryProps> = (props) => {
     const {
@@ -104,7 +105,7 @@ const Template: StoryFn<StoryProps> = (props) => {
     )
 }
 
-export const CardButtonComponent = {
+export const CardButtonComponent: StoryObj<Meta<StoryProps>> = {
     render: Template,
     args: {
         accent: true,
diff --git a/packages/ui/src/stories/Card/CardCheckbox.stories.tsx b/packages/ui/src/stories/Card/CardCheckbox.stories.tsx
index 351a767b3e3..bc19444e5d8 100644
--- a/packages/ui/src/stories/Card/CardCheckbox.stories.tsx
+++ b/packages/ui/src/stories/Card/CardCheckbox.stories.tsx
@@ -1,13 +1,13 @@
-import { Meta, StoryFn } from '@storybook/react'
-import React from 'react'
+import React, { ComponentProps } from 'react'
 
 import { PlusCircle } from '@open-condo/icons'
-// todo : all as Component
 import { Card as Component, CardCheckboxProps } from '@open-condo/ui/src'
 
+import type { Meta, StoryFn, StoryObj } from '@storybook/react'
+
 const CardCheckbox = Component.CardCheckbox
 
-type StoryProps = Pick<CardCheckboxProps, 'disabled'> & {
+type StoryProps = ComponentProps<typeof CardCheckbox> & {
     disabled: boolean;
     header: boolean;
     headerProgressIndicator: boolean;
@@ -43,7 +43,7 @@ export default {
         bodySecondLink: true,
         bodyButton: true,
     },
-} as Meta<typeof CardCheckbox> & { args: StoryProps }
+} as Meta<StoryProps>
 
 const Template: StoryFn<StoryProps> = (props) => {
     const {
@@ -90,6 +90,6 @@ const Template: StoryFn<StoryProps> = (props) => {
     )
 }
 
-export const CardCheckboxComponent = {
+export const CardCheckboxComponent: StoryObj<StoryProps> = {
     render: Template,
 }
diff --git a/packages/ui/src/stories/Carousel.stories.tsx b/packages/ui/src/stories/Carousel.stories.tsx
index 3ecf76639b1..2b10f84686a 100644
--- a/packages/ui/src/stories/Carousel.stories.tsx
+++ b/packages/ui/src/stories/Carousel.stories.tsx
@@ -1,4 +1,3 @@
-import { StoryFn, Meta } from '@storybook/react'
 import { styled } from '@storybook/theming'
 import { get } from 'lodash'
 import React from 'react'
@@ -6,6 +5,8 @@ import React from 'react'
 import { Carousel as Component } from '@open-condo/ui/src'
 import { colors } from '@open-condo/ui/src/colors'
 
+import type { StoryFn, Meta, StoryObj } from '@storybook/react'
+
 const AVAILABLE_COLORS = [
     colors.green['3'],
     colors.blue['3'],
@@ -103,6 +104,6 @@ const Template: StoryFn<typeof Component> = (args) => {
     )
 }
 
-export const Carousel = {
+export const Carousel: StoryObj<typeof Component> = {
     render: Template,
 }
diff --git a/packages/ui/src/stories/Checkbox.stories.tsx b/packages/ui/src/stories/Checkbox.stories.tsx
index e90a9267a6b..7bf3a83dd80 100644
--- a/packages/ui/src/stories/Checkbox.stories.tsx
+++ b/packages/ui/src/stories/Checkbox.stories.tsx
@@ -1,7 +1,7 @@
-import { Meta } from '@storybook/react'
-
 import { Checkbox as Component } from '@open-condo/ui/src'
 
+import type { Meta, StoryObj } from '@storybook/react'
+
 export default {
     title: 'Components/Checkbox',
     component: Component,
@@ -42,26 +42,26 @@ export default {
     },
 } as Meta<typeof Component>
 
-export const Unchecked = {
+export const Unchecked: StoryObj<typeof Component> = {
     args: {
         defaultChecked: false,
     },
 }
 
-export const Checked = {
+export const Checked: StoryObj<typeof Component> = {
     args: {
         checked: true,
     },
 }
 
-export const Disabled = {
+export const Disabled: StoryObj<typeof Component> = {
     args: {
         checked: true,
         disabled: true,
     },
 }
 
-export const BoldText = {
+export const BoldText: StoryObj<typeof Component> = {
     args: {
         labelProps: { strong: true },
     },
diff --git a/packages/ui/src/stories/Dropdown.stories.tsx b/packages/ui/src/stories/Dropdown.stories.tsx
index f444d057b1b..e4302ccdeba 100644
--- a/packages/ui/src/stories/Dropdown.stories.tsx
+++ b/packages/ui/src/stories/Dropdown.stories.tsx
@@ -1,9 +1,10 @@
-import { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 
 import { Play } from '@open-condo/icons'
 import { Dropdown, Space, Typography } from '@open-condo/ui/src'
 
+import type { Meta, StoryObj, StoryFn } from '@storybook/react'
+
 const LOREM_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid amet dolores eligendi' +
     ' est ex, facilis, iure magnam molestias neque, possimus praesentium quidem repellat saepe similique vero vitae' +
     ' voluptatem voluptates?'
@@ -203,7 +204,7 @@ const DropdownButtonTemplate: StoryFn<typeof Dropdown.Button> = () => {
     )
 }
 
-export const Controlled = {
+export const Controlled: StoryObj<typeof Dropdown> = {
     args: {
         menu: {
             items: [
@@ -216,10 +217,10 @@ export const Controlled = {
     },
 }
 
-export const DifferentSizeOfTriggers = {
+export const DifferentSizeOfTriggers: StoryObj<typeof Dropdown> = {
     render: DifferentSizeOfTriggersTemplate,
 }
 
-export const WithButton = {
+export const WithButton: StoryObj<typeof Dropdown.Button> = {
     render: DropdownButtonTemplate,
 }
diff --git a/packages/ui/src/stories/Input/Input.stories.tsx b/packages/ui/src/stories/Input/Input.stories.tsx
index 6c19e349b27..eace4215cbe 100644
--- a/packages/ui/src/stories/Input/Input.stories.tsx
+++ b/packages/ui/src/stories/Input/Input.stories.tsx
@@ -1,7 +1,7 @@
-import { Meta } from '@storybook/react'
-
 import { Input as Component } from '@open-condo/ui/src'
 
+import type { Meta, StoryObj } from '@storybook/react'
+
 export default {
     title: 'Components/Input',
     component: Component,
@@ -14,4 +14,4 @@ export default {
     },
 } as Meta<typeof Component>
 
-export const Input = {}
+export const Input: StoryObj<typeof Component> = {}
diff --git a/packages/ui/src/stories/Input/Password.stories.tsx b/packages/ui/src/stories/Input/Password.stories.tsx
index 98208b6cf81..578f6ebbe3d 100644
--- a/packages/ui/src/stories/Input/Password.stories.tsx
+++ b/packages/ui/src/stories/Input/Password.stories.tsx
@@ -1,7 +1,7 @@
-import { Meta } from '@storybook/react'
-
 import { Input } from '@open-condo/ui/src'
 
+import type { Meta, StoryObj } from '@storybook/react'
+
 const Component = Input.Password
 
 export default {
@@ -13,4 +13,4 @@ export default {
     },
 } as Meta<typeof Component>
 
-export const Password = {}
+export const Password: StoryObj<typeof Component> = {}
diff --git a/packages/ui/src/stories/Input/Phone.stories.tsx b/packages/ui/src/stories/Input/Phone.stories.tsx
index 19a76ec683a..cccf20f6ece 100644
--- a/packages/ui/src/stories/Input/Phone.stories.tsx
+++ b/packages/ui/src/stories/Input/Phone.stories.tsx
@@ -1,7 +1,7 @@
-import { Meta } from '@storybook/react'
-
 import { Input } from '@open-condo/ui/src'
 
+import type { Meta, StoryObj } from '@storybook/react'
+
 const Component = Input.Phone
 
 export default {
@@ -12,4 +12,4 @@ export default {
     },
 } as Meta<typeof Component>
 
-export const Phone = {}
+export const Phone: StoryObj<typeof Component> = {}
diff --git a/packages/ui/src/stories/List.stories.tsx b/packages/ui/src/stories/List.stories.tsx
index 6f066bb9082..df8fa4ed023 100644
--- a/packages/ui/src/stories/List.stories.tsx
+++ b/packages/ui/src/stories/List.stories.tsx
@@ -1,7 +1,7 @@
-import { Meta } from '@storybook/react'
-
 import { List as Component } from '@open-condo/ui/src'
 
+import type { Meta, StoryObj } from '@storybook/react'
+
 export default {
     title: 'Components/List',
     component: Component,
@@ -24,4 +24,4 @@ export default {
     },
 } as Meta<typeof Component>
 
-export const List = {}
+export const List: StoryObj<typeof Component> = {}
diff --git a/packages/ui/src/stories/Markdown.stories.tsx b/packages/ui/src/stories/Markdown.stories.tsx
index 6011de4f500..2685f7b1e3c 100644
--- a/packages/ui/src/stories/Markdown.stories.tsx
+++ b/packages/ui/src/stories/Markdown.stories.tsx
@@ -1,7 +1,7 @@
-import { Meta } from '@storybook/react'
-
 import { Markdown as Component } from '@open-condo/ui/src'
 
+import type { Meta, StoryObj } from '@storybook/react'
+
 const TS_CODE_EXAMPLE = `
 \`\`\`typescript
 // Some extra long comment line which main goal is to make horizontal scroll appear
@@ -153,4 +153,4 @@ export default {
     },
 } as Meta<typeof Component>
 
-export const Markdown = {}
+export const Markdown: StoryObj<typeof Component> = {}
diff --git a/packages/ui/src/stories/Modal.stories.tsx b/packages/ui/src/stories/Modal.stories.tsx
index 93e6fce0c6c..22d5fcd2e7c 100644
--- a/packages/ui/src/stories/Modal.stories.tsx
+++ b/packages/ui/src/stories/Modal.stories.tsx
@@ -1,9 +1,10 @@
-import { Meta, StoryFn } from '@storybook/react'
 import get from 'lodash/get'
 import React, { useMemo } from 'react'
 
 import { Button, Modal as Component, Typography, Tabs } from '@open-condo/ui/src'
 
+import type { StoryFn, Meta, StoryObj } from '@storybook/react'
+
 const LOREM_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid amet dolores eligendi' +
     ' est ex, facilis, iure magnam molestias neque, possimus praesentium quidem repellat saepe similique vero vitae' +
     ' voluptatem voluptates?'
@@ -76,11 +77,11 @@ const Template: StoryFn<typeof Component> = (props) => {
     )
 }
 
-export const Modal = {
+export const Modal: StoryObj<typeof Component> = {
     render: Template,
 }
 
-export const ModalWithBigContent = {
+export const ModalWithBigContent: StoryObj<typeof Component> = {
     render: Template,
     args: {
         title: 'Modal with big content. Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
@@ -93,7 +94,7 @@ export const ModalWithBigContent = {
     },
 }
 
-export const ModalWithWideContent = {
+export const ModalWithWideContent: StoryObj<typeof Component> = {
     render: Template,
     args: {
         title: 'Modal with wide content',
@@ -108,7 +109,7 @@ export const ModalWithWideContent = {
     },
 }
 
-export const ModalWithFixedContentWidth = {
+export const ModalWithFixedContentWidth: StoryObj<typeof Component> = {
     render: Template,
     args: {
         title: 'Modal with fixed content width',
@@ -129,7 +130,7 @@ export const ModalWithFixedContentWidth = {
     },
 }
 
-export const Alert = {
+export const Alert: StoryObj<typeof Component> = {
     render: Template,
     args: {
         title: 'Alert',
diff --git a/packages/ui/src/stories/ProgressIndicator.stories.tsx b/packages/ui/src/stories/ProgressIndicator.stories.tsx
index 8af34301743..77d926f7451 100644
--- a/packages/ui/src/stories/ProgressIndicator.stories.tsx
+++ b/packages/ui/src/stories/ProgressIndicator.stories.tsx
@@ -1,8 +1,9 @@
-import { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
 import { ProgressIndicator, ProgressIndicatorProps, ProgressIndicatorStep } from '@open-condo/ui/src'
 
+import type { StoryFn, Meta, StoryObj } from '@storybook/react'
+
 type MetaProps = {
     firstStep: ProgressIndicatorStep,
     secondStep: ProgressIndicatorStep | undefined,
@@ -35,7 +36,7 @@ export default {
             options: [true, false],
         },
     },
-} as Meta<typeof ProgressIndicator>
+} as Meta<ProgressIndicatorProps & MetaProps>
 
 const Template: StoryFn<ProgressIndicatorProps & MetaProps> = (props) => {
     const { firstStep, secondStep, thirdStep, fourthStep, ...rest } = props
@@ -44,6 +45,6 @@ const Template: StoryFn<ProgressIndicatorProps & MetaProps> = (props) => {
     return <ProgressIndicator {...rest} steps={steps} />
 }
 
-export const SimpleProgressIndicator = {
+export const SimpleProgressIndicator: StoryObj<ProgressIndicatorProps & MetaProps> = {
     render: Template,
 }
diff --git a/packages/ui/src/stories/Radio/Radio.stories.tsx b/packages/ui/src/stories/Radio/Radio.stories.tsx
index c63b52e6eb4..3167386cb2a 100644
--- a/packages/ui/src/stories/Radio/Radio.stories.tsx
+++ b/packages/ui/src/stories/Radio/Radio.stories.tsx
@@ -1,7 +1,7 @@
-import { Meta } from '@storybook/react'
-
 import { Radio as Component } from '@open-condo/ui/src'
 
+import type { Meta, StoryObj } from '@storybook/react'
+
 export default {
     title: 'Components/Radio',
     component: Component,
@@ -37,26 +37,26 @@ export default {
     },
 } as Meta<typeof Component>
 
-export const Unchecked = {
+export const Unchecked: StoryObj<typeof Component> = {
     args: {
         defaultChecked: false,
     },
 }
 
-export const Checked = {
+export const Checked: StoryObj<typeof Component> = {
     args: {
         checked: true,
         autoFocus: true,
     },
 }
 
-export const Disabled = {
+export const Disabled: StoryObj<typeof Component> = {
     args: {
         disabled: true,
     },
 }
 
-export const BoldText = {
+export const BoldText: StoryObj<typeof Component> = {
     args: {
         labelProps: { strong: true },
     },
diff --git a/packages/ui/src/stories/Radio/RadioGroup.stories.tsx b/packages/ui/src/stories/Radio/RadioGroup.stories.tsx
index 93509042045..6769ea74fc3 100644
--- a/packages/ui/src/stories/Radio/RadioGroup.stories.tsx
+++ b/packages/ui/src/stories/Radio/RadioGroup.stories.tsx
@@ -1,9 +1,10 @@
-import { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 
 import { FileText } from '@open-condo/icons'
 import { RadioGroup as Component, Radio, Space, Typography } from '@open-condo/ui/src'
 
+import type { StoryFn, Meta, StoryObj } from '@storybook/react'
+
 const { ItemGroup } = Component
 const SPACE_WIDTH = 500
 
@@ -60,7 +61,7 @@ const RadioGroupButtonTemplate: StoryFn<typeof Component> = (props) => (
     </>
 )
 
-export const RadioGroup = {
+export const RadioGroup: StoryObj<typeof Component> = {
     args: {
         children: (
             <Space direction='vertical' size={12}>
@@ -71,7 +72,7 @@ export const RadioGroup = {
     },
 }
 
-export const RadioGroupButtonType = {
+export const RadioGroupButtonType: StoryObj<typeof Component> = {
     render: RadioGroupButtonTemplate,
     args: {
         optionType: 'button',
@@ -85,7 +86,7 @@ export const RadioGroupButtonType = {
     },
 }
 
-export const ManyRadioGroups = {
+export const ManyRadioGroups: StoryObj<typeof Component> = {
     args: {
         children: (
             <>
diff --git a/packages/ui/src/stories/Select.stories.tsx b/packages/ui/src/stories/Select.stories.tsx
index 3a8d346bd40..ca09e3d0a02 100644
--- a/packages/ui/src/stories/Select.stories.tsx
+++ b/packages/ui/src/stories/Select.stories.tsx
@@ -1,8 +1,9 @@
-import { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 
 import { Select as Component, Space, SelectProps } from '@open-condo/ui/src'
 
+import type { StoryFn, Meta, StoryObj } from '@storybook/react'
+
 const AVAILABLE_TYPES: Array<SelectProps['type']> = [
     undefined,
     'success',
@@ -47,9 +48,9 @@ const MultipleTemplate: StoryFn<typeof Component> = (props) => (
     </Space>
 )
 
-export const Default = {}
+export const Default: StoryObj<typeof Component> = {}
 
-export const CustomContent = {
+export const CustomContent: StoryObj<typeof Component> = {
     args: {
         options: [
             { label: 'Some custom content', value: 1, textType: 'danger' },
@@ -58,14 +59,14 @@ export const CustomContent = {
     },
 }
 
-export const CustomTypes = {
+export const CustomTypes: StoryObj<typeof Component> = {
     render: MultipleTemplate,
     args: {
         value: 1,
     },
 }
 
-export const GroupsContent = {
+export const GroupsContent: StoryObj<typeof Component> = {
     args: {
         options: [
             { label: 'Option without group', value: 0 },
@@ -89,7 +90,7 @@ export const GroupsContent = {
     },
 }
 
-export const Multiple = {
+export const Multiple: StoryObj<typeof Component> = {
     args: {
         options: [
             { label: 'First label', value: 'First label' },
@@ -105,7 +106,7 @@ export const Multiple = {
     },
 }
 
-export const LongLabels = {
+export const LongLabels: StoryObj<typeof Component> = {
     args: {
         options: [
             {
@@ -125,7 +126,7 @@ export const LongLabels = {
     },
 }
 
-export const WithSearch = {
+export const WithSearch: StoryObj<typeof Component> = {
     args: {
         options: [
             {
@@ -142,14 +143,14 @@ export const WithSearch = {
     },
 }
 
-export const EmptyData = {
+export const EmptyData: StoryObj<typeof Component> = {
     args: {
         options: [],
         notFoundContentLabel: 'No data',
     },
 }
 
-export const WithHiddenOptions = {
+export const WithHiddenOptions: StoryObj<typeof Component> = {
     args: {
         options: [
             { label: 'First label', value: '1' },
diff --git a/packages/ui/src/stories/Space.stories.tsx b/packages/ui/src/stories/Space.stories.tsx
index 2c0f1335bba..91c1eb472ea 100644
--- a/packages/ui/src/stories/Space.stories.tsx
+++ b/packages/ui/src/stories/Space.stories.tsx
@@ -1,8 +1,9 @@
-import { Meta } from '@storybook/react'
 import React from 'react'
 
 import { Space as Component } from '@open-condo/ui/src'
 
+import type { Meta, StoryObj } from '@storybook/react'
+
 export default {
     title: 'Components/Space',
     component: Component,
@@ -27,14 +28,14 @@ export default {
     },
 } as Meta<typeof Component>
 
-export const Vertical = {
+export const Vertical: StoryObj<typeof Component> = {
     args: {
         direction: 'vertical',
         size: 20,
     },
 }
 
-export const Horizontal = {
+export const Horizontal: StoryObj<typeof Component> = {
     args: {
         direction: 'horizontal',
         size: 20,
diff --git a/packages/ui/src/stories/Steps.stories.tsx b/packages/ui/src/stories/Steps.stories.tsx
index ece10923a0e..6cc98b4d170 100644
--- a/packages/ui/src/stories/Steps.stories.tsx
+++ b/packages/ui/src/stories/Steps.stories.tsx
@@ -1,8 +1,9 @@
-import { StoryFn, Meta } from '@storybook/react'
 import React, { useState } from 'react'
 
 import { Steps as Component, Button, Space } from '@open-condo/ui/src'
 
+import type { StoryFn, Meta, StoryObj } from '@storybook/react'
+
 export default {
     title: 'Components/Steps',
     component: Component,
@@ -34,7 +35,7 @@ const Template: StoryFn<typeof Component> = (args) => {
     )
 }
 
-export const Simple = {
+export const Simple: StoryObj<typeof Component> = {
     render: Template,
     args: {
         items: [
@@ -46,7 +47,7 @@ export const Simple = {
     },
 }
 
-export const WithBreakpoints = {
+export const WithBreakpoints: StoryObj<typeof Component> = {
     render: Template,
     args: {
         items: [
@@ -58,7 +59,7 @@ export const WithBreakpoints = {
     },
 }
 
-export const Many = {
+export const Many: StoryObj<typeof Component> = {
     render: Template,
     args: {
         items: [
@@ -76,7 +77,7 @@ export const Many = {
     },
 }
 
-export const Spacy = {
+export const Spacy: StoryObj<typeof Component> = {
     render: Template,
     args: {
         items: [{ title: 'We should take' }, { title: 'All possible space' }],
diff --git a/packages/ui/src/stories/Tabs.stories.tsx b/packages/ui/src/stories/Tabs.stories.tsx
index 52959e6eb70..9be5758d374 100644
--- a/packages/ui/src/stories/Tabs.stories.tsx
+++ b/packages/ui/src/stories/Tabs.stories.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 
 import { FileText } from '@open-condo/icons'
 import { Tabs, Typography } from '@open-condo/ui/src'
-import type { TabsProps, TabItem } from '@open-condo/ui/src'
+import type { TabItem } from '@open-condo/ui/src'
 
-import type { Meta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 export default {
     title: 'Components/Tabs',
@@ -12,7 +12,7 @@ export default {
     args: {
         centered: false,
     },
-} as Meta<React.FC<TabsProps>>
+} as Meta<typeof Tabs>
 
 const simpleItems: Array<TabItem> = [
     {
@@ -43,7 +43,7 @@ const simpleItems: Array<TabItem> = [
     },
 ]
 
-export const Simple = {
+export const Simple: StoryObj<typeof Tabs> = {
     args: {
         items: simpleItems,
     },
diff --git a/packages/ui/src/stories/Tag.stories.tsx b/packages/ui/src/stories/Tag.stories.tsx
index 7fe7fe1f0b1..f6073df97ee 100644
--- a/packages/ui/src/stories/Tag.stories.tsx
+++ b/packages/ui/src/stories/Tag.stories.tsx
@@ -1,10 +1,10 @@
-import { Meta } from '@storybook/react'
 import React from 'react'
 
 import * as condoIcons from '@open-condo/icons'
 import { Tag as Component } from '@open-condo/ui/src'
 import { colors } from '@open-condo/ui/src/colors'
 
+import type { Meta, StoryObj } from '@storybook/react'
 
 const icons = Object.assign({}, ...Object.entries(condoIcons).map(([key, Icon]) => ({
     [`${key}-small`]: <Icon size='small'/>,
@@ -33,9 +33,9 @@ export default {
     },
 } as Meta<typeof Component>
 
-export const Tag = {}
+export const Tag: StoryObj<typeof Component> = {}
 
-export const TagWithIcon = {
+export const TagWithIcon: StoryObj<typeof Component> = {
     args: {
         icon: icons['ChevronDown-small'],
         iconPosition: 'end',
diff --git a/packages/ui/src/stories/Tooltip.stories.tsx b/packages/ui/src/stories/Tooltip.stories.tsx
index efcbb4d3938..63de60e71c9 100644
--- a/packages/ui/src/stories/Tooltip.stories.tsx
+++ b/packages/ui/src/stories/Tooltip.stories.tsx
@@ -1,8 +1,9 @@
-import { StoryFn, Meta, StoryObj } from '@storybook/react'
 import React from 'react'
 
 import { Tooltip as Component, Typography } from '@open-condo/ui/src'
 
+import type { StoryFn, Meta, StoryObj } from '@storybook/react'
+
 export default {
     title: 'Components/Tooltip',
     component: Component,
@@ -60,7 +61,6 @@ export const Simple: StoryObj<typeof Component> = {
     ),
 }
 
-// todo add : StoryObj<typeof Component>
 export const Long: StoryObj<typeof Component> = {
     render: Template,
     args: {
diff --git a/packages/ui/src/stories/TourStep.stories.tsx b/packages/ui/src/stories/TourStep.stories.tsx
index c4931b1c145..5612c9fdefc 100644
--- a/packages/ui/src/stories/TourStep.stories.tsx
+++ b/packages/ui/src/stories/TourStep.stories.tsx
@@ -1,11 +1,11 @@
-// todo : import types
-import { StoryFn, Meta, StoryObj } from '@storybook/react'
 import React, { useEffect, useState } from 'react'
 
 import { Button, Input, Space, Tour } from '@open-condo/ui/src'
 
 const Component = Tour.TourStep
 
+import type { StoryFn, Meta, StoryObj } from '@storybook/react'
+
 export default {
     title: 'Components/TourStep',
     component: Component,
diff --git a/packages/ui/src/stories/Typography/Link.stories.tsx b/packages/ui/src/stories/Typography/Link.stories.tsx
index 3df931ce716..00de8a3f37f 100644
--- a/packages/ui/src/stories/Typography/Link.stories.tsx
+++ b/packages/ui/src/stories/Typography/Link.stories.tsx
@@ -1,9 +1,10 @@
-import { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 
 import { ArrowLeft } from '@open-condo/icons'
 import { Space, Typography } from '@open-condo/ui/src'
 
+import type { StoryFn, Meta, StoryObj } from '@storybook/react'
+
 export default {
     title: 'Components/Typography',
     component: Typography.Link,
@@ -48,6 +49,6 @@ const Template: StoryFn<typeof Typography.Link> = (args) => {
     )
 }
 
-export const Link = {
+export const Link: StoryObj<typeof Typography.Link> = {
     render: Template,
 }
diff --git a/packages/ui/src/stories/Typography/Paragraph.stories.tsx b/packages/ui/src/stories/Typography/Paragraph.stories.tsx
index abf2fdf1a8c..4f82bde5101 100644
--- a/packages/ui/src/stories/Typography/Paragraph.stories.tsx
+++ b/packages/ui/src/stories/Typography/Paragraph.stories.tsx
@@ -1,4 +1,3 @@
-import { StoryFn, Meta } from '@storybook/react'
 import { styled } from '@storybook/theming'
 import get from 'lodash/get'
 import React from 'react'
@@ -7,6 +6,8 @@ import { Typography } from '@open-condo/ui/src'
 import type { TypographyParagraphProps } from '@open-condo/ui/src'
 import { colors } from '@open-condo/ui/src/colors'
 
+import type { StoryFn, Meta, StoryObj } from '@storybook/react'
+
 const AVAILABLE_TYPES: Array<TypographyParagraphProps['type']> = [
     'primary',
     'secondary',
@@ -69,6 +70,6 @@ const Template: StoryFn<typeof Typography.Paragraph> = (args) => {
     )
 }
 
-export const Paragraph = {
+export const Paragraph: StoryObj<typeof Typography.Paragraph> = {
     render: Template,
 }
diff --git a/packages/ui/src/stories/Typography/Text.stories.tsx b/packages/ui/src/stories/Typography/Text.stories.tsx
index cb937db3de6..d9d88388eb4 100644
--- a/packages/ui/src/stories/Typography/Text.stories.tsx
+++ b/packages/ui/src/stories/Typography/Text.stories.tsx
@@ -1,4 +1,3 @@
-import { StoryFn, Meta } from '@storybook/react'
 import { styled } from '@storybook/theming'
 import get from 'lodash/get'
 import React from 'react'
@@ -7,6 +6,8 @@ import { Typography, Space } from '@open-condo/ui/src'
 import type { TypographyTextProps } from '@open-condo/ui/src'
 import { colors } from '@open-condo/ui/src/colors'
 
+import type { StoryFn, Meta, StoryObj } from '@storybook/react'
+
 const getArticle = (str?: string) => {
     if (!str) return 'a'
     const firstChar = str[0]
@@ -94,6 +95,6 @@ const Template: StoryFn<typeof Typography.Text> = (args) => {
     )
 }
 
-export const Text = {
+export const Text: StoryObj<typeof Typography.Paragraph> = {
     render: Template,
 }
diff --git a/packages/ui/src/stories/Typography/Title.stories.tsx b/packages/ui/src/stories/Typography/Title.stories.tsx
index 94a97adc542..64a28df5ae8 100644
--- a/packages/ui/src/stories/Typography/Title.stories.tsx
+++ b/packages/ui/src/stories/Typography/Title.stories.tsx
@@ -1,4 +1,3 @@
-import { StoryFn, Meta } from '@storybook/react'
 import { styled } from '@storybook/theming'
 import get from 'lodash/get'
 import React from 'react'
@@ -7,6 +6,7 @@ import { Space, Typography } from '@open-condo/ui/src'
 import type { TypographyTitleProps } from '@open-condo/ui/src'
 import { colors } from '@open-condo/ui/src/colors'
 
+import type { StoryFn, Meta, StoryObj } from '@storybook/react'
 
 const StoryDecorator = styled.div<{ bg: 'light' | 'dark' }>`
   background: ${(props) => props.bg === 'light' ? colors.white : colors.black};
@@ -47,6 +47,6 @@ const Template: StoryFn<typeof Typography.Title> = (args) => {
     )
 }
 
-export const Title = {
+export const Title: StoryObj<typeof Typography.Title> = {
     render: Template,
 }
diff --git a/packages/ui/src/stories/colors.stories.tsx b/packages/ui/src/stories/colors.stories.tsx
index 1ebf9cf6068..174c1a9e83f 100644
--- a/packages/ui/src/stories/colors.stories.tsx
+++ b/packages/ui/src/stories/colors.stories.tsx
@@ -1,4 +1,3 @@
-import { Meta } from '@storybook/react'
 import { styled } from '@storybook/theming'
 import { identity } from 'lodash'
 import get from 'lodash/get'
@@ -8,6 +7,8 @@ import { Space, Typography, Card } from '@open-condo/ui/src'
 import { colors } from '@open-condo/ui/src/colors'
 import tokens from '@open-condo/ui/src/tokens/tokens.json'
 
+import type { Meta, StoryObj } from '@storybook/react'
+
 type SwatchColors = { [key: string]: string }
 type SwatchColorsWithDescription = { [key: string]: { value: string, description?: string } }
 type Swatch = {
@@ -156,4 +157,4 @@ export default {
     },
 } as Meta<typeof ColorPalette>
 
-export const Colors = {}
+export const Colors: StoryObj<typeof ColorPalette> = {}
diff --git a/packages/ui/src/stories/icons.stories.tsx b/packages/ui/src/stories/icons.stories.tsx
index 404a3a71987..16699b52992 100644
--- a/packages/ui/src/stories/icons.stories.tsx
+++ b/packages/ui/src/stories/icons.stories.tsx
@@ -1,10 +1,11 @@
-import { Meta } from '@storybook/react'
 import React from 'react'
 
 import type { IconProps } from '@open-condo/icons'
 import * as AllIcons from '@open-condo/icons'
 import { Space, Typography } from '@open-condo/ui/src'
 
+import type { Meta, StoryObj } from '@storybook/react'
+
 type IconBlockProps = {
     name: string
     icon: React.FunctionComponent<IconProps>
@@ -52,4 +53,4 @@ export default {
     },
 } as Meta<typeof IconsStory>
 
-export const Icons = {}
+export const Icons: StoryObj<typeof IconsStory> = {}