@scbt-ecom/ui 0.0.29 → 0.0.30

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

@@ -0,0 +1,39 @@
+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>
+    )
+  ]
+} satisfies Meta<typeof CalendarControl>
+
+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: 'calendar',
+    label: 'Дата рождения',
+    helperText: 'Укажите дату рождения',
+    icon: <Icon name='general/calendar' className='text-icon-blue-grey-700 size-5 cursor-pointer' />,
+    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 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'],
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ]
+} satisfies Meta<typeof CheckboxControl>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+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 = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    label: checkboxLabel,
+    name: 'condition'
+  }
+}
+
+export const WithHelperText: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    label: checkboxLabel,
+    name: 'condition',
+    helperText: 'Утвердите согласие'
+  }
+}
+
+export const Disabled: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    label: checkboxLabel,
+    name: 'condition',
+    disabled: true
+  }
+}

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

@@ -0,0 +1,83 @@
+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>
+    )
+  ],
+  tags: ['autodocs']
+} satisfies Meta<typeof DadataInputControl>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const DadataFio: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'fio',
+    label: 'ФИО',
+    size: 'lg',
+    dadataBaseUrl: 'cache',
+    badge: '+25%'
+  }
+}
+
+export const DadataAddress: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'address',
+    label: 'Адрес',
+    size: 'lg',
+    dadataType: 'address',
+    dadataBaseUrl: 'cache'
+  }
+}
+
+export const DadataCountry: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'country',
+    label: 'Страна',
+    size: 'lg',
+    dadataType: 'country',
+    dadataBaseUrl: 'constants'
+  }
+}
+
+export const DadataAuto: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'auto',
+    label: 'Авто',
+    size: 'lg',
+    dadataType: 'auto',
+    dadataBaseUrl: 'constants'
+  }
+}
+
+export const DadataOrganization: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'organization',
+    label: 'Организация',
+    size: 'lg',
+    dadataType: 'party',
+    dadataBaseUrl: 'cache',
+    badge: '+25%'
+  }
+}

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,77 @@
+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>
+    )
+  ],
+  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/RadioContol.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { MOCK_RADIO_GROUP, mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { RadioControl } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/RadioControl',
+  component: RadioControl,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ]
+} satisfies Meta<typeof RadioControl>
+
+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: 'sex',
+    radioItemsGroup: MOCK_RADIO_GROUP
+  }
+}
+
+export const WithGroupName: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'sex',
+    groupName: 'Выбери пол:',
+    radioItemsGroup: MOCK_RADIO_GROUP
+  }
+}
+
+export const WithHelperText: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'sex',
+    helperText: 'Укажите свой пол, как в паспорте ',
+    radioItemsGroup: MOCK_RADIO_GROUP
+  }
+}
+
+export const WithHorizontalOrientation: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'sex',
+    groupName: 'Выберите пол',
+    helperText: 'Укажите свой пол, как в паспорте ',
+    orientation: 'horizontal',
+    radioItemsGroup: MOCK_RADIO_GROUP
+  }
+}

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

@@ -0,0 +1,117 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { MOCK_SELECT_OPTIONS, mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { type ISelectOption, SelectControl } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/SelectControl',
+  component: SelectControl,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ],
+  tags: ['autodocs']
+} satisfies Meta<typeof SelectControl>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const DISABLED_SELECT_OPTIONS: ISelectOption[] = [
+  { id: '1', optionValue: 'Январь', isDisabled: true },
+  { id: '2', optionValue: 'Февраль', isDisabled: true },
+  ...MOCK_SELECT_OPTIONS.slice(2, 12)
+]
+
+export const IntentFilled: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'months',
+    label: 'Выберите месяц',
+    size: 'md',
+    optionsList: MOCK_SELECT_OPTIONS,
+    intent: 'filled'
+  }
+}
+
+export const IntentClear: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'months',
+    label: 'Выберите месяц',
+    size: 'md',
+    optionsList: MOCK_SELECT_OPTIONS,
+    intent: 'clear'
+  }
+}
+
+export const FilledMultiple: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'months',
+    label: 'Выберите месяца',
+    size: 'md',
+    optionsList: MOCK_SELECT_OPTIONS,
+    multiple: true,
+    intent: 'filled'
+  }
+}
+
+export const ClearMultiple: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'months',
+    label: 'Выберите месяца',
+    size: 'md',
+    optionsList: MOCK_SELECT_OPTIONS,
+    multiple: true,
+    intent: 'clear'
+  }
+}
+
+export const IsDisabled: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'months',
+    label: 'Выберите месяц',
+    size: 'md',
+    optionsList: MOCK_SELECT_OPTIONS,
+    intent: 'filled',
+    disabled: true
+  }
+}
+
+export const DisabledOptions: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'months',
+    label: 'Выберите месяц',
+    size: 'md',
+    optionsList: DISABLED_SELECT_OPTIONS,
+    intent: 'filled'
+  }
+}
+
+export const WithHelperText: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'months',
+    label: 'Выберите месяца',
+    size: 'md',
+    optionsList: MOCK_SELECT_OPTIONS,
+    helperText: 'Выберите месяц рождения',
+    multiple: true,
+    intent: 'filled'
+  }
+}

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

@@ -0,0 +1,51 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { SwitchControl } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/SwitchControl',
+  component: SwitchControl,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ]
+} satisfies Meta<typeof SwitchControl>
+
+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: 'percent',
+    label: 'Увеличенный процент'
+  }
+}
+
+export const Disabled: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'percent',
+    label: 'Увеличенный процент',
+    disabled: true
+  }
+}
+
+export const WithHelperText: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'percent',
+    label: 'Увеличенный процент',
+    helperText: 'На первые 30 дней'
+  }
+}

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

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { TextareaControl } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/TextareaControl',
+  component: TextareaControl,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ],
+  tags: ['autodocs']
+} satisfies Meta<typeof TextareaControl>
+
+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: 'description',
+    label: 'Описание к блоку',
+    size: 'md'
+  }
+}
+
+export const WithPlaceholder: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'description',
+    label: 'Описание к блоку',
+    size: 'md',
+    placeholder: 'Введите описание'
+  }
+}
+
+export const Disabled: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'description',
+    label: 'Описание к блоку',
+    size: 'md',
+    placeholder: 'Введите описание',
+    disabled: true
+  }
+}

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

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { mockDefaultValues, mockSchema, StorybookFormProvider } from '@/storybookHelpers'
+import { Icon, InputControlMask } from '$/shared/ui'
+
+const meta = {
+  title: 'CONTROLLED FORM UI/InputControlMask',
+  component: InputControlMask,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    (Story) => (
+      <StorybookFormProvider validationSchema={mockSchema} defaultValues={mockDefaultValues}>
+        <Story />
+      </StorybookFormProvider>
+    )
+  ],
+  tags: ['autodocs']
+} satisfies Meta<typeof InputControlMask>
+
+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: 'phone',
+    label: 'Номер телефона',
+    size: 'md',
+    format: '# (###) ###-##-##'
+  }
+}
+
+export const WithIcon: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'phone',
+    label: 'Номер телефона',
+    format: '# (###) ###-##-##',
+    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: 'phone',
+    label: 'Номер телефона',
+    format: '# (###) ###-##-##',
+    size: 'md',
+    badge: '+25%'
+  }
+}
+
+export const WithHelperText: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  args: {
+    name: 'phone',
+    label: 'Номер телефона',
+    size: 'md',
+    format: '# (###) ###-##-##',
+    helperText: 'Введите номер телефона'
+  }
+}

package/src/stories/widgets/Advantages.stories.tsx

@@ -0,0 +1,42 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { Advantages, type IAdvantage } from '$/widgets/Advantages'
+
+const meta = {
+  title: 'WIDGETS/Advantages',
+  component: Advantages,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    (Story) => (
+      <div className='min-h-screen min-w-full bg-color-blue-grey-300 flex items-center justify-center px-6'>
+        <Story />
+      </div>
+    )
+  ]
+} satisfies Meta<typeof Advantages>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const mockThreeCards: IAdvantage[] = [
+  { title: 'До 5 млн ₽', description: 'сумма кредита' },
+  { title: 'До 5 лет', description: 'срок кредита' },
+  { title: 'От 5 минут', description: 'быстрое одобрение' }
+]
+
+const mockFourCards: IAdvantage[] = [...mockThreeCards, { title: 'От 15 минут', description: 'сумма одобрение' }]
+
+export const ThreeCards: Story = {
+  args: {
+    advantagesList: mockThreeCards
+  }
+}
+
+export const FourCards: Story = {
+  args: {
+    advantagesList: mockFourCards
+  }
+}