@scbt-ecom/ui 0.4.2 → 0.4.3

package/src/stories/primitives/Modal.stories.tsx

@@ -1,106 +0,0 @@
-import toast from 'react-hot-toast'
-import { type Meta, type StoryObj } from '@storybook/react'
-import { z } from 'zod'
-import { useBoolean, useControlledForm } from '$/shared/hooks'
-import { Button, CheckboxControl, InputControl, Modal } from '$/shared/ui'
-import { VALIDATION_MESSAGES } from '$/shared/validation'
-
-const meta = {
-  title: 'INTERACTIVE/Modal',
-  component: Modal,
-  tags: ['autodocs']
-} satisfies Meta<typeof Modal>
-
-export default meta
-
-type Story = StoryObj<typeof Modal>
-
-type TModalFormFields = z.infer<typeof modalSchema>
-type TCheckboxGroup = {
-  label: string
-  name: 'rate' | 'investment' | 'lending'
-}
-
-const modalSchema = z.object({
-  email: z
-    .string({ required_error: VALIDATION_MESSAGES.REQUIRED })
-    .email({ message: 'Введите валидную почту' })
-    .min(1, 'Электронная почта обязательна'),
-  rate: z.boolean(),
-  investment: z.boolean(),
-  lending: z.boolean()
-})
-
-const checkboxGroup: TCheckboxGroup[] = [
-  { label: 'Выгодная ставка', name: 'rate' },
-  { label: 'Инвестиции', name: 'investment' },
-  { label: 'Кредитование', name: 'lending' }
-]
-
-const toastMessage = (values: TModalFormFields) => (
-  <div className='flex flex-col gap-2'>
-    <p className='desk-body-medium-l'>Заявка успешно отправлена!</p>
-    <pre>{JSON.stringify(values, null, 2)}</pre>
-  </div>
-)
-
-export const Base: Story = {
-  render: () => {
-    const [isModalOpen, setterModal] = useBoolean(false)
-
-    return (
-      <div className='flex h-screen w-screen items-center justify-center'>
-        <Button onClick={() => setterModal(true)}>Получить кредит</Button>
-        <Modal title='Подписка на рассылку' isModalOpen={isModalOpen} closeModal={() => setterModal(false)}>
-          <p>Укажите ваш адрес электронной почты, чтобы узнавать обо всех новостях и изменения вовремя</p>
-        </Modal>
-      </div>
-    )
-  }
-}
-
-export const ModalWithForm: Story = {
-  render: () => {
-    const { control, handleSubmit, reset } = useControlledForm({
-      schema: modalSchema,
-      defaultValues: {
-        email: '',
-        rate: false,
-        investment: false,
-        lending: false
-      }
-    })
-    const [isModalOpen, setterModal] = useBoolean(false)
-
-    const onSubmit = (values: TModalFormFields) => {
-      toast.success(toastMessage(values), { duration: 5000, position: 'top-center' })
-      reset()
-    }
-
-    return (
-      <div className='flex h-screen w-screen items-center justify-center'>
-        <Button onClick={() => setterModal(true)}>Получить кредит</Button>
-        <Modal title='Подписка на рассылку' isModalOpen={isModalOpen} closeModal={() => setterModal(false)}>
-          <form onSubmit={handleSubmit(onSubmit)}>
-            <p>Укажите ваш адрес электронной почты, чтобы узнавать обо всех новостях и изменения вовремя</p>
-            <div className='my-4 flex flex-col gap-2'>
-              <InputControl name='email' label='Электронная почта' control={control} />
-              <p>Присылать новости на тему:</p>
-              <div className='flex flex-col gap-2'>
-                {checkboxGroup?.map(({ label, name }) => (
-                  <CheckboxControl key={name} control={control} name={name} label={label} />
-                ))}
-              </div>
-            </div>
-            <div className='flex items-center gap-4'>
-              <Button type='submit'>Подписаться</Button>
-              <Button onClick={() => setterModal(false)} intent='secondary'>
-                Отменить
-              </Button>
-            </div>
-          </form>
-        </Modal>
-      </div>
-    )
-  }
-}

package/src/stories/primitives/Notification.stories.tsx

@@ -1,102 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/react'
-import { Button, CustomLink, Icon, Notification } from '$/shared/ui'
-
-const meta = {
-  title: 'INTERACTIVE/Notification',
-  component: Notification,
-  tags: ['autodocs']
-} satisfies Meta<typeof Notification>
-
-export default meta
-
-type Story = StoryObj<typeof Notification>
-
-export const Info: Story = {
-  render: () => {
-    return (
-      <div className='flex h-screen w-screen items-center justify-center'>
-        <Button
-          onClick={() =>
-            Notification({
-              intent: 'info',
-              text: 'Документы отправлены'
-            })
-          }
-        >
-          Отправить
-        </Button>
-      </div>
-    )
-  }
-}
-
-export const Error: Story = {
-  render: () => {
-    return (
-      <div className='flex h-screen w-screen items-center justify-center'>
-        <Button
-          onClick={() =>
-            Notification({
-              intent: 'error',
-              text: 'Не удалось сохранить страницу. Проверьте интернет соединение'
-            })
-          }
-        >
-          Отправить
-        </Button>
-      </div>
-    )
-  }
-}
-
-export const InfoWithLink: Story = {
-  render: () => {
-    return (
-      <div className='flex h-screen w-screen items-center justify-center'>
-        <Button
-          onClick={() =>
-            Notification({
-              intent: 'info',
-              text: 'Документы отправлены',
-              customIcon: <Icon name='general/check' className='size-5 text-icon-white' />,
-              content: (
-                <CustomLink
-                  withIcon
-                  target='_blank'
-                  rel='noreferrer'
-                  intent='white'
-                  href='https://www.figma.com/design/4i9LqYBbtItQUpviA45cMw/SCBT-Design-System?node-id=3530-1129&node-type=frame&t=XT3FQKKIzTob4WrF-0'
-                >
-                  Подробнее
-                </CustomLink>
-              )
-            })
-          }
-        >
-          Отправить
-        </Button>
-      </div>
-    )
-  }
-}
-
-export const WithIcon: Story = {
-  render: () => {
-    return (
-      <div className='flex h-screen w-screen items-center justify-center'>
-        <Button
-          onClick={() =>
-            Notification({
-              intent: 'info',
-              text: 'Документы отправлены',
-              customIcon: <Icon name='general/check' className='size-5 text-icon-white' />,
-              closure: false
-            })
-          }
-        >
-          Отправить
-        </Button>
-      </div>
-    )
-  }
-}

package/src/stories/primitives/PhoneView.stories.tsx

@@ -1,22 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { PhoneView } from '$/shared/ui'
-
-const meta = {
-  title: 'base/PhoneView',
-  component: PhoneView,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered'
-  }
-} satisfies Meta<typeof PhoneView>
-type Story = StoryObj<typeof PhoneView>
-
-export default meta
-
-export const Base: Story = {
-  render: () => (
-    <div className='flex gap-4'>
-      <PhoneView phone='8 800 000-00-00' text='Бесплатно по России' />
-    </div>
-  )
-}

package/src/stories/primitives/Popover.stories.tsx

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Popover } from '$/shared/ui'
-
-const meta = {
-  title: 'INTERACTIVE/Popover',
-  component: Popover,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Popover>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-const popoverContent = (
-  <p>Полная стоимость кредита - это сумма, которую вы заплатите за кредит вместе с процентами и другими комиссиями</p>
-)
-
-const triggerElement = (
-  <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
-    <path
-      fillRule='evenodd'
-      clipRule='evenodd'
-      d='M11.8397 0.00109056C5.21304 0.0897859 -0.0870902 5.53437 0.00108441 12.1615C0.0897807 18.7857 5.53391 24.0871 12.1606 23.9989C18.7862 23.9097 24.0871 18.4651 23.9989 11.8385C23.9105 5.21377 18.4661 -0.0873439 11.8397 0.00109056ZM11.8032 19.3043L11.7369 19.3033C10.7164 19.273 9.99691 18.5212 10.0259 17.5158C10.0543 16.5276 10.7913 15.8102 11.7781 15.8102L11.8374 15.8113C12.8863 15.8423 13.5977 16.5866 13.5682 17.6209C13.5393 18.6117 12.8135 19.3043 11.8032 19.3043ZM16.097 10.7842C15.857 11.1252 15.3293 11.5486 14.6643 12.0667L13.9321 12.5722C13.5301 12.8847 13.2875 13.1787 13.1964 13.468C13.1247 13.6958 13.0895 13.756 13.0832 14.2193L13.0822 14.337H10.2859L10.294 14.1004C10.3281 13.1279 10.3521 12.5558 10.7552 12.0831C11.3875 11.3407 12.7824 10.4425 12.8416 10.4044C13.0415 10.2539 13.21 10.0825 13.3355 9.89936C13.6289 9.49476 13.7589 9.17624 13.7589 8.86319C13.7589 8.42885 13.63 8.02711 13.3751 7.66946C13.1302 7.32433 12.6648 7.14955 11.9917 7.14955C11.3241 7.14955 10.8671 7.36137 10.5937 7.79598C10.3125 8.24285 10.1703 8.71215 10.1703 9.19163V9.31084H7.28741L7.29263 9.18641C7.36698 7.42059 7.99725 6.14912 9.16517 5.40721C9.89926 4.93503 10.8123 4.69556 11.8777 4.69556C13.2723 4.69556 14.4496 5.03442 15.3765 5.70277C16.3157 6.37999 16.792 7.39424 16.792 8.71737C16.7923 9.45745 16.5583 10.1527 16.097 10.7842Z'
-      fill='#A1AFBF'
-    />
-  </svg>
-)
-
-export const Base: Story = {
-  args: {
-    children: popoverContent,
-    triggerElement,
-    headLine: 'Рассчитайте кредит',
-    align: 'end',
-    side: 'bottom',
-    arrowPadding: 20
-  }
-}

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

@@ -1,68 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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]
-  }
-}