feat(ui): INFRA-509 migrate from CSF2 to CSF3. Fixed storybook (#5234)

* feat(condo): INFRA-509 migrate from CSF2 to CSF3 * feat(condo): INFRA-509 migrate from CSF2 to CSF3 * feat(condo): INFRA-509 added types * feat(global): INFRA-509 added eslint rule ""@typescript-eslint/member-delimiter-style" * feat(global): INFRA-509 updated eslint rule ""@typescript-eslint/member-delimiter-style" - only warn * refactor(ui): INFRA-509 fixed code-style
open-condo-software · Sep 13, 2024 · 0a3a390 · 0a3a390
1 parent a09a68e
commit 0a3a390
Show file tree

Hide file tree

Showing 44 changed files with 855 additions and 688 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -136,6 +136,19 @@ module.exports = {
                 int32Hint: false,
             },
         ],
+        '@typescript-eslint/member-delimiter-style': [
+            'warn',
+            {
+                multiline: {
+                    delimiter: 'none',
+                    requireLast: false,
+                },
+                singleline: {
+                    delimiter: 'comma',
+                    requireLast: false,
+                },
+            },
+        ],
         'no-restricted-imports': [
             'warn',
             {

diff --git a/packages/ui/src/components/Alert/alert.tsx b/packages/ui/src/components/Alert/alert.tsx
@@ -2,7 +2,7 @@ import { Alert as DefaultAlert, AlertProps as DefaultAlertProps } from 'antd'
 import React from 'react'
 
 type CondoAlertProps = {
-    type: 'success' | 'info' | 'warning' | 'error';
+    type: 'success' | 'info' | 'warning' | 'error'
 }
 
 const ALERT_CLASS_PREFIX = 'condo-alert'

diff --git a/packages/ui/src/components/Button/button.tsx b/packages/ui/src/components/Button/button.tsx
@@ -10,7 +10,7 @@ import { sendAnalyticsClickEvent, extractChildrenContent } from '../_utils/analy
 export const BUTTON_CLASS_PREFIX = 'condo-btn'
 
 type CondoButtonProps = {
-    type: 'primary' | 'secondary',
+    type: 'primary' | 'secondary'
     children?: string
     stateless?: boolean
     focus?: boolean

diff --git a/packages/ui/src/components/Dropdown/button/index.tsx b/packages/ui/src/components/Dropdown/button/index.tsx
@@ -11,7 +11,7 @@ import { useItems } from '../hooks/useItems'
 
 
 export interface IDropdownItem {
-    disabled?: boolean,
+    disabled?: boolean
     label: string
     onClick?: MenuItemType['onClick']
     key: React.Key

diff --git a/packages/ui/src/components/Markdown/markdown.tsx b/packages/ui/src/components/Markdown/markdown.tsx
@@ -12,7 +12,7 @@ const REMARK_PLUGINS = [
 ]
 
 export type MarkdownProps = {
-    children: string,
+    children: string
 }
 
 const MARKDOWN_CLASS_PREFIX = 'condo-markdown'

diff --git a/packages/ui/src/components/Modal/useModal.tsx b/packages/ui/src/components/Modal/useModal.tsx
@@ -36,13 +36,13 @@ const ElementsHolder = React.memo(
 ElementsHolder.displayName = 'ModalContainer'
 
 interface HookModalProps {
-    afterClose: () => void;
-    config: ModalConfig;
+    afterClose: () => void
+    config: ModalConfig
 }
 
 interface HookModalRef {
-    destroy: () => void;
-    update: (config: ModalConfig) => void;
+    destroy: () => void
+    update: (config: ModalConfig) => void
 }
 
 const HookModal = React.forwardRef<HookModalRef, HookModalProps>((

diff --git a/packages/ui/src/components/Steps/step.tsx b/packages/ui/src/components/Steps/step.tsx
@@ -5,7 +5,7 @@ import { Check } from '@open-condo/icons'
 import { Space, Typography, Tooltip } from '@open-condo/ui/src'
 
 export type StepItem = {
-    title: string,
+    title: string
     breakPoint?: boolean
 }
 

diff --git a/packages/ui/src/components/Steps/steps.tsx b/packages/ui/src/components/Steps/steps.tsx
@@ -14,7 +14,7 @@ export type StepsProps = {
     current?: number
     items: Array<StepItem>
     onChange?: (currentStep: number) => void
-    id?: string,
+    id?: string
     className?: string
     noReturnMessage?: string
 }

diff --git a/packages/ui/src/components/Typography/index.ts b/packages/ui/src/components/Typography/index.ts
@@ -10,10 +10,10 @@ export type { TypographyTextProps } from './text'
 export type { TypographyLinkProps } from './link'
 export type { TypographyParagraphProps } from './paragraph'
 export type TypographyType = {
-    Text: typeof Text,
-    Title: typeof Title,
-    Link: typeof Link,
-    Paragraph: typeof Paragraph,
+    Text: typeof Text
+    Title: typeof Title
+    Link: typeof Link
+    Paragraph: typeof Paragraph
 }
 
 const Typography: TypographyType = {

diff --git a/packages/ui/src/components/_utils/analytics.ts b/packages/ui/src/components/_utils/analytics.ts
@@ -43,8 +43,8 @@ type ComponentNames = {
 type AnyComponentName = ComponentNames[AnalyticsEvent]
 
 type CommonAnalyticsProps<Event extends AnalyticsEvent, Component extends AnyComponentName> = {
-    event: Event,
-    location: string,
+    event: Event
+    location: string
     component: Component
 } & CommonComponentProps
 

diff --git a/packages/ui/src/components/_utils/responsiveObserve.ts b/packages/ui/src/components/_utils/responsiveObserve.ts
@@ -40,7 +40,7 @@ const responsiveObserve = {
         [prop: string]: {
             mql: MediaQueryList
             listener: MediaQueryListListener
-        };
+        }
     },
     dispatch (pointMap: ScreenMap): boolean {
         screens = pointMap

diff --git a/packages/ui/src/stories/ActionBar.stories.tsx b/packages/ui/src/stories/ActionBar.stories.tsx
@@ -1,11 +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 { colors } from '../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' +
@@ -23,54 +22,68 @@ export default {
 const Template: StoryFn<typeof Component> = (args) => {
     return (
         <Row style={{ height: '120vh' }}>
-            <Col span={24} style={{
-                height: '120vh', backgroundColor: colors.gray[3], display: 'flex', alignItems: 'center',
-                justifyContent: 'center', borderRadius: '8px', overflow: 'hidden',
-            }}>
+            <Col
+                span={24}
+                style={{
+                    height: '120vh',
+                    backgroundColor: colors.gray[3],
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: '8px',
+                    overflow: 'hidden',
+                }}
+            >
                 <Typography.Title>Content</Typography.Title>
             </Col>
             <Col span={24}>
-                <Component {...args}/>
+                <Component {...args} />
             </Col>
         </Row>
     )
 }
 
-export const Simple = Template.bind({})
-Simple.args = {
-    actions: [
-        <Button type='primary' key='1'>Save</Button>,
-        <Button type='secondary' key='2'>Cancel</Button>,
-    ],
+export const Simple: StoryObj<typeof Component> = {
+    render: Template,
+    args: {
+        actions: [
+            <Button type='primary' key='1'>Save</Button>,
+            <Button type='secondary' key='2'>Cancel</Button>,
+        ],
+    },
 }
 
-export const WithMessage = Template.bind({})
-WithMessage.args = {
-    message: 'Action bar message',
-    actions: [
-        <Button type='primary' key='1'>Save</Button>,
-        <Button type='secondary' key='2'>Cancel</Button>,
-    ],
+export const WithMessage: StoryObj<typeof Component> = {
+    render: Template,
+    args: {
+        message: 'Action bar message',
+        actions: [
+            <Button type='primary' key='1'>Save</Button>,
+            <Button type='secondary' key='2'>Cancel</Button>,
+        ],
+    },
 }
 
-export const WithDropdownButton = Template.bind({})
-WithDropdownButton.args = {
-    actions: [
-        <Dropdown.Button
-            items={[{ label: 'Short label', key: 1 }]}
-            key='1'
-            type='primary'
-            dropdownProps={{ getPopupContainer: (target) => target.parentElement || target }}
-        >
-            Hover me 1
-        </Dropdown.Button>,
-        <Dropdown.Button
-            items={[{ label: LOREM_TEXT, key: 2 }]}
-            key='2'
-            type='secondary'
-            dropdownProps={{ getPopupContainer: (target) => target.parentElement || target }}
-        >
-            Hover me 2
-        </Dropdown.Button>,
-    ],
+export const WithDropdownButton: StoryObj<typeof Component> = {
+    render: Template,
+    args: {
+        actions: [
+            <Dropdown.Button
+                items={[{ label: 'Short label', key: 1 }]}
+                key='1'
+                type='primary'
+                dropdownProps={{ getPopupContainer: (target) => target.parentElement || target }}
+            >
+                Hover me 1
+            </Dropdown.Button>,
+            <Dropdown.Button
+                items={[{ label: LOREM_TEXT, key: 2 }]}
+                key='2'
+                type='secondary'
+                dropdownProps={{ getPopupContainer: (target) => target.parentElement || target }}
+            >
+                Hover me 2
+            </Dropdown.Button>,
+        ],
+    },
 }
diff --git a/packages/ui/src/stories/Alert.stories.tsx b/packages/ui/src/stories/Alert.stories.tsx
@@ -1,8 +1,7 @@
-import { StoryFn, Meta } from '@storybook/react'
-import React from 'react'
-
 import { Alert } from '@open-condo/ui/src'
 
+import type { Meta, StoryObj } from '@storybook/react'
+
 export default {
     title: 'Components/Alert',
     component: Alert,
@@ -13,22 +12,27 @@ export default {
         description: 'Description',
     },
 } as Meta<typeof Alert>
+
+export const SuccessAlert: StoryObj<typeof Alert> = {
+    args: {
+        type: 'success',
+    },
+}
 
-const Template: StoryFn<typeof Alert> = (props) => <Alert {...props}/>
-
-export const SuccessAlert = Template.bind({})
-SuccessAlert.args = {
-    type: 'success',
+export const InfoAlert: StoryObj<typeof Alert> = {
+    args: {
+        type: 'info',
+    },
 }
-export const InfoAlert = Template.bind({})
-InfoAlert.args = {
-    type: 'info',
+
+export const WarningAlert: StoryObj<typeof Alert> = {
+    args: {
+        type: 'warning',
+    },
 }
-export const WarningAlert = Template.bind({})
-WarningAlert.args = {
-    type: 'warning',
+
+export const ErrorAlert: StoryObj<typeof Alert> = {
+    args: {
+        type: 'error',
+    },
 }
-export const ErrorAlert = Template.bind({})
-ErrorAlert.args = {
-    type: 'error',
-}
diff --git a/packages/ui/src/stories/Banner.stories.tsx b/packages/ui/src/stories/Banner.stories.tsx
@@ -1,9 +1,8 @@
-import { StoryFn, Meta } from '@storybook/react'
-import React from '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,
@@ -21,44 +20,46 @@ export default {
     },
 } as Meta<typeof Component>
 
-const Template: StoryFn<typeof Component> = (args) => <Component {...args}/>
-
-export const Solid = Template.bind({})
-Solid.args = {
-    backgroundColor: '#9b9dfa',
-    title: 'Settlement bank',
-    subtitle: 'Accept payments from residents in the Doma mobile app',
-    imgUrl: 'https://i.imgur.com/OAG817v.png',
-    invertText: true,
-    actionText: 'More',
+export const Solid: StoryObj<typeof Component> = {
+    args: {
+        backgroundColor: '#9b9dfa',
+        title: 'Settlement bank',
+        subtitle: 'Accept payments from residents in the Doma mobile app',
+        imgUrl: 'https://i.imgur.com/OAG817v.png',
+        invertText: true,
+        actionText: 'More',
+    },
 }
 
-export const Gradient = Template.bind({})
-Gradient.args = {
-    backgroundColor: colors.brandGradient['1'],
-    title: 'Some long description that takes 2 rows of texts',
-    subtitle: 'Text can also takes up to 2 rows, containing 40 symbols each, so use it wisely',
-    imgUrl: 'https://i.imgur.com/1iOC5BE.png',
-    invertText: false,
-    actionText: 'Click me button',
+export const Gradient: StoryObj<typeof Component> = {
+    args: {
+        backgroundColor: colors.brandGradient['1'],
+        title: 'Some long description that takes 2 rows of texts',
+        subtitle: 'Text can also takes up to 2 rows, containing 40 symbols each, so use it wisely',
+        imgUrl: 'https://i.imgur.com/1iOC5BE.png',
+        invertText: false,
+        actionText: 'Click me button',
+    },
 }
 
-export const NoAction = Template.bind({})
-NoAction.args = {
-    backgroundColor: '#d3e3ff',
-    title: 'Banner can exist without an action button',
-    subtitle: 'Text can also takes up to 2 rows, containing 40 symbols each, so use it wisely',
-    imgUrl: 'https://i.imgur.com/ambPuQF.png',
-    invertText: false,
+export const NoAction: StoryObj<typeof Component> = {
+    args: {
+        backgroundColor: '#d3e3ff',
+        title: 'Banner can exist without an action button',
+        subtitle: 'Text can also takes up to 2 rows, containing 40 symbols each, so use it wisely',
+        imgUrl: 'https://i.imgur.com/ambPuQF.png',
+        invertText: false,
+    },
 }
 
-export const Compact = Template.bind({})
-Compact.args = {
-    backgroundColor: '#d3e3ff',
-    title: 'Banner can exist without an action button',
-    subtitle: 'Text can also takes up to 2 rows, containing 40 symbols each, so use it wisely',
-    imgUrl: 'https://i.imgur.com/ambPuQF.png',
-    invertText: false,
-    actionText: 'Click me link',
-    size: 'small',
-}
+export const Compact: StoryObj<typeof Component> = {
+    args: {
+        backgroundColor: '#d3e3ff',
+        title: 'Banner can exist without an action button',
+        subtitle: 'Text can also takes up to 2 rows, containing 40 symbols each, so use it wisely',
+        imgUrl: 'https://i.imgur.com/ambPuQF.png',
+        invertText: false,
+        actionText: 'Click me link',
+        size: 'small',
+    },
+}