@scbt-ecom/ui 0.4.0 → 0.4.2

package/src/stories/primitives/ProgressBar.stories.tsx

@@ -0,0 +1,68 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { ProgressBar } from '$/shared/ui/ProgressBar'
+
+const meta = {
+  title: 'INTERACTIVE/ProgressBar',
+  component: ProgressBar,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof ProgressBar>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const topContent = (
+  <>
+    <div className='desk-body-regular-l text-color-dark'>Заполните контактные данные</div>
+    <div className='desk-body-regular-l text-color-dark'>+35% к одобрению</div>
+  </>
+)
+
+const bottomContent = (
+  <>
+    <div className='desk-body-regular-l text-color-dark'>
+      Шаг 1 <span className='text-color-tetriary'>из 6</span>
+    </div>
+    <div className='desk-body-regular-l text-color-tetriary'>+10% за следующий шаг</div>
+  </>
+)
+
+export const Base: Story = {
+  args: {
+    progress: 40
+  }
+}
+
+export const TopContent: Story = {
+  args: {
+    topContent,
+    progress: 40
+  }
+}
+
+export const BottomContent: Story = {
+  args: {
+    bottomContent,
+    progress: 40
+  }
+}
+
+export const FullContent: Story = {
+  args: {
+    topContent,
+    bottomContent,
+    progress: 40
+  }
+}
+
+export const WithMaxPercent: Story = {
+  args: {
+    topContent,
+    bottomContent,
+    progress: 40,
+    maxPercent: 70
+  }
+}

package/src/stories/primitives/Skeleton.stories.tsx

@@ -0,0 +1,21 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { Skeleton } from '$/shared/ui'
+
+const meta = {
+  title: 'Base/Skeleton',
+  component: Skeleton,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof Skeleton>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Base: Story = {
+  args: {
+    className: 'w-[280px] h-[400px] rounded-md'
+  }
+}

package/src/stories/primitives/Table.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  tableValue,
+  tableValueThreeCols,
+  tableValueThreeColsWithoutTitles,
+  tableValueWithoutTitles
+} from '@/storybookHelpers/table/utils/defaultValue'
+import { Table } from '$/shared/ui/'
+
+const meta = {
+  title: 'DataBlocks/Table',
+  component: Table,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered'
+  }
+} satisfies Meta<typeof Table>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Base: Story = {
+  args: {
+    ...tableValue
+  }
+}
+
+export const ThreeColumns: Story = {
+  args: {
+    ...tableValueThreeCols
+  }
+}
+
+export const BaseWithoutTitles: Story = {
+  args: {
+    ...tableValueWithoutTitles
+  }
+}
+
+export const ThreeColumnsWithoutTitles: Story = {
+  args: {
+    ...tableValueThreeColsWithoutTitles
+  }
+}

package/src/stories/primitives/TabsSwitcher.stories.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { Button, type ITabRenderContent, TabsSwitcher } from '$/shared/ui'
+
+const meta = {
+  title: 'Base/TabsSwitcher',
+  component: TabsSwitcher,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof TabsSwitcher>
+
+export default meta
+
+type Story = StoryObj<typeof TabsSwitcher>
+
+const TABS_MOCKS: ITabRenderContent = {
+  triggers: [
+    { id: '1', label: 'Условия' },
+    { id: '2', label: 'Вклады' },
+    { id: '3', label: 'Депозиты' }
+  ],
+  contents: [
+    { id: '1', body: <>Условия контент</>, accordion: { title: 'Обернут в аккордеон' } },
+    { id: '2', body: <>Вклады контент</> },
+    { id: '3', body: <>Депозиты контент</> }
+  ]
+}
+
+export const Base: Story = {
+  render: () => {
+    const [activeTab, setTab] = useState('2')
+    const changeTab = (tab: string) => setTab(tab)
+
+    return (
+      <div className='flex flex-col gap-6'>
+        <Button size='sm' onClick={() => changeTab('3')}>
+          Активный таб 3
+        </Button>
+        <TabsSwitcher value={activeTab} onChangeTab={changeTab} renderContent={TABS_MOCKS} />
+      </div>
+    )
+  }
+}

package/src/stories/primitives/formControl/CalendarControl.stories.tsx

@@ -0,0 +1,45 @@
+import { useFormContext } from 'react-hook-form'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { CalendarControl, Icon } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/CalendarControl',
+  component: CalendarControl,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ],
+  render: (args) => {
+    const { watch, control, setValue } = useFormContext()
+    const methods = { watch, control, setValue }
+
+    return <CalendarControl {...args} {...methods} />
+  }
+} satisfies Meta<typeof CalendarControl>
+export default meta
+
+type Story = StoryObj<typeof CalendarControl>
+
+export const Base: Story = {
+  args: {
+    name: 'calendar',
+    label: 'Дата рождения',
+    helperText: 'Укажите дату рождения',
+    icon: <Icon name='general/calendar' className='size-5 cursor-pointer text-icon-blue-grey-700' />,
+    size: 'md',
+    badge: '+25%',
+    swapPosition: true,
+    classes: {
+      attachmentWrapper: 'mr-2 gap-2',
+      icon: 'size-10 rounded-full bg-color-transparent transition-colors flex items-center justify-center hover:bg-color-primary-tr-hover active:bg-color-primary-tr-pressed'
+    }
+  }
+}

package/src/stories/primitives/formControl/CheckboxControl.stories.tsx

@@ -0,0 +1,64 @@
+import { useFormContext } from 'react-hook-form'
+import type { Meta, StoryObj } from '@storybook/react'
+import { mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { CheckboxControl } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/CheckboxControl',
+  component: CheckboxControl,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  render: ({ ...args }) => {
+    const { control } = useFormContext()
+    const methods = { control }
+    return <CheckboxControl {...args} {...methods} />
+  },
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ]
+} satisfies Meta<typeof CheckboxControl>
+
+export default meta
+type Story = StoryObj<typeof CheckboxControl>
+
+const checkboxLabel = (
+  <>
+    <a href='https://sovcombank.ru/' target='_blank' rel='noreferrer' className='text-color-primary-default'>
+      Выражаю согласие
+    </a>{' '}
+    на обработку персональных данных и подтверждаю, что ознакомлен с{' '}
+    <a href='https://sovcombank.ru/' target='_blank' rel='noreferrer' className='text-color-primary-default'>
+      Политикой
+    </a>{' '}
+    обработки персональных данных
+  </>
+)
+
+export const Base: Story = {
+  args: {
+    label: checkboxLabel,
+    name: 'condition'
+  }
+}
+
+export const WithHelperText: Story = {
+  args: {
+    label: checkboxLabel,
+    name: 'condition',
+    helperText: 'Утвердите согласие'
+  }
+}
+
+export const Disabled: Story = {
+  args: {
+    label: checkboxLabel,
+    name: 'condition',
+    disabled: true
+  }
+}

package/src/stories/primitives/formControl/ComboboxControl.stories.tsx

@@ -0,0 +1,67 @@
+import { useFormContext } from 'react-hook-form'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { MOCK_SELECT_OPTIONS_REACT_SELECT, mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { ComboboxControl } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/ComboboxControl',
+  component: ComboboxControl,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ],
+  render: ({ ...args }) => {
+    const { control } = useFormContext()
+    const methods = { control }
+    return <ComboboxControl {...args} {...methods} />
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof ComboboxControl>
+
+export default meta
+type Story = StoryObj<typeof ComboboxControl>
+
+export const Base: Story = {
+  args: {
+    name: 'credit',
+    label: 'Выберите кредит',
+    size: 'md',
+    options: MOCK_SELECT_OPTIONS_REACT_SELECT
+  }
+}
+
+export const Disabled: Story = {
+  args: {
+    name: 'credit',
+    label: 'Выберите кредит',
+    size: 'md',
+    disabled: true,
+    options: [...MOCK_SELECT_OPTIONS_REACT_SELECT]
+  }
+}
+
+export const IsNotSearchable: Story = {
+  args: {
+    name: 'credit',
+    label: 'Выберите кредит',
+    size: 'md',
+    options: [...MOCK_SELECT_OPTIONS_REACT_SELECT],
+    isSearchable: false
+  }
+}
+
+export const Multi: Story = {
+  args: {
+    name: 'credit',
+    label: 'Выберите кредит',
+    size: 'md',
+    isMulti: true,
+    options: [...MOCK_SELECT_OPTIONS_REACT_SELECT]
+  }
+}

package/src/stories/primitives/formControl/DadataInputControl.stories.tsx

@@ -0,0 +1,79 @@
+import { useFormContext } from 'react-hook-form'
+import type { Meta, StoryObj } from '@storybook/react'
+import { mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { DadataInputControl } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/DadataInputControl',
+  component: DadataInputControl,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ],
+  render: ({ ...args }) => {
+    const { control } = useFormContext()
+    const methods = { control }
+    return <DadataInputControl {...args} {...methods} />
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof DadataInputControl>
+
+export default meta
+type Story = StoryObj<typeof DadataInputControl>
+
+export const DadataFio: Story = {
+  args: {
+    name: 'fio',
+    label: 'ФИО',
+    size: 'lg',
+    dadataBaseUrl: 'cache',
+    badge: '+25%'
+  }
+}
+
+export const DadataAddress: Story = {
+  args: {
+    name: 'address',
+    label: 'Адрес',
+    size: 'lg',
+    dadataType: 'address',
+    dadataBaseUrl: 'cache'
+  }
+}
+
+export const DadataCountry: Story = {
+  args: {
+    name: 'country',
+    label: 'Страна',
+    size: 'lg',
+    dadataType: 'country',
+    dadataBaseUrl: 'constants'
+  }
+}
+
+export const DadataAuto: Story = {
+  args: {
+    name: 'auto',
+    label: 'Авто',
+    size: 'lg',
+    dadataType: 'auto',
+    dadataBaseUrl: 'constants'
+  }
+}
+
+export const DadataOrganization: Story = {
+  args: {
+    name: 'organization',
+    label: 'Организация',
+    size: 'lg',
+    dadataType: 'party',
+    dadataBaseUrl: 'cache',
+    badge: '+25%'
+  }
+}

package/src/stories/primitives/formControl/EditorControl.stories.tsx

@@ -0,0 +1,31 @@
+import { useFormContext } from 'react-hook-form'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { EditorControl } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/EditorControl',
+  component: EditorControl,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ],
+  render: ({ ...args }) => {
+    const { control } = useFormContext()
+    const methods = { control }
+    return <EditorControl {...args} {...methods} />
+  }
+} satisfies Meta<typeof EditorControl>
+
+export default meta
+type Story = StoryObj<typeof EditorControl>
+export const Base: Story = {
+  args: {}
+}

package/src/stories/primitives/formControl/FormControlAllFields.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta } from '@storybook/react'
+import { mockDefaultValues, mockFields, mockSchema, StorybookFieldsMapper, StorybookFormProvider } from '@/storybookHelpers'
+import { FormControl } from '$/shared/ui/'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/FormControlAllFields',
+  component: FormControl,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ]
+} satisfies Meta<typeof FormControl>
+
+export default meta
+
+export const FormControlAllFields = () => {
+  return <StorybookFieldsMapper fields={mockFields} defaultValues={mockDefaultValues} />
+}

package/src/stories/primitives/formControl/InputControl.stories.tsx

@@ -0,0 +1,84 @@
+import { useFormContext } from 'react-hook-form'
+import type { Meta, StoryObj } from '@storybook/react'
+import { mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { Icon, InputControl } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/InputControl',
+  component: InputControl,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ],
+  render: (args) => {
+    const { control } = useFormContext()
+    const methods = { control }
+
+    return <InputControl {...args} {...methods} />
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof InputControl>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Base: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'city',
+    label: 'Город',
+    size: 'md'
+  }
+}
+
+export const WithIcon: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'city',
+    label: 'Город',
+    size: 'md',
+    icon: <Icon name='general/check' className='text-icon-positive-default' />
+  }
+}
+
+export const WithBadge: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'city',
+    label: 'Город',
+    size: 'md',
+    badge: '+25%'
+  }
+}
+
+export const WithHelperText: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'city',
+    label: 'Город',
+    helperText: 'Введите город проживания',
+    size: 'md'
+  }
+}
+
+export const Disabled: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'city',
+    label: 'Город',
+    helperText: 'Введите город проживания',
+    size: 'md',
+    disabled: true
+  }
+}

package/src/stories/primitives/formControl/InputControlPassword.stories.tsx

@@ -0,0 +1,38 @@
+import { useFormContext } from 'react-hook-form'
+import type { Meta, StoryObj } from '@storybook/react'
+import { mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { InputControl } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/InputControlPassword',
+  component: InputControl,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ],
+  render: ({ ...args }) => {
+    const { control } = useFormContext()
+    const methods = { control }
+    return <InputControl {...args} {...methods} />
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof InputControl>
+
+export default meta
+type Story = StoryObj<typeof InputControl>
+
+export const Base: Story = {
+  args: {
+    name: 'password',
+    label: 'Пароль',
+    size: 'md',
+    helperText: 'Введите пароль',
+    variant: 'password'
+  }
+}

package/src/stories/primitives/formControl/InputControlUploader.stories.tsx

@@ -0,0 +1,44 @@
+import { useFormContext } from 'react-hook-form'
+import type { Meta, StoryObj } from '@storybook/react'
+import { mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { InputControlUploader } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/InputControlUploader',
+  component: InputControlUploader,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ],
+  render: ({ ...args }) => {
+    const { control } = useFormContext()
+    const methods = { control }
+    return <InputControlUploader {...args} {...methods} />
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof InputControlUploader>
+
+export default meta
+type Story = StoryObj<typeof InputControlUploader>
+
+export const Base: Story = {
+  args: {
+    name: 'files',
+    label: 'Файлы',
+    helperText: 'Фотография должна быть четкой',
+    dropzoneOptions: {
+      maxSize: 1024 * 1024 * 4,
+      multiple: true,
+      accept: {
+        'image/jpeg': [],
+        'image/png': []
+      }
+    }
+  }
+}