feat(condo): INFRA-509 added types

open-condo-software · Sep 12, 2024 · 5a8568f · 5a8568f
1 parent 7e4f282
commit 5a8568f
Show file tree

Hide file tree

Showing 33 changed files with 141 additions and 124 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,11 +1,12 @@
-import { StoryFn, Meta } from '@storybook/react'
 import { styled } from '@storybook/theming'
 import { get } from 'lodash'
 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
@@ -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
@@ -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
@@ -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> = {}