@scbt-ecom/ui 0.0.30 → 0.0.32

package/src/stories/primitives/Button/Button.test.tsx

@@ -1,150 +0,0 @@
-// "pre-deploy": "npm run lint && npm run test -- --watch=false" for package json
-
-// import { render, screen } from '@testing-library/react'
-// import { describe, expect, it } from 'vitest'
-// import { Button } from '$/shared/ui'
-
-// describe('Тестирование Button', () => {
-//   const buttonTestid = 'test-button'
-
-//   it('Кнопка должна рендериться с правильным текстом', () => {
-//     const { asFragment } = render(<Button data-testid={buttonTestid}>Click me!</Button>)
-
-//     expect(asFragment()).toMatchSnapshot()
-
-//     const button = screen.getByTestId(buttonTestid)
-
-//     expect(button).toBeInTheDocument()
-//     expect(button).toHaveTextContent('Click me!')
-//   })
-
-//   it('Кнопка должна быть отключена, когда свойство disabled равно true', () => {
-//     const { asFragment } = render(
-//       <Button disabled data-testid={buttonTestid}>
-//         Click me!
-//       </Button>
-//     )
-
-//     expect(asFragment()).toMatchSnapshot()
-
-//     const button = screen.getByTestId(buttonTestid)
-
-//     expect(button).toBeInTheDocument()
-//     expect(button).toBeDisabled()
-//   })
-
-//   it('Кнопка должна быть включена, когда свойство disabled равно false', () => {
-//     const { asFragment } = render(
-//       <Button disabled={false} data-testid={buttonTestid}>
-//         Click me!
-//       </Button>
-//     )
-
-//     expect(asFragment()).toMatchSnapshot()
-
-//     const button = screen.getByTestId(buttonTestid)
-
-//     expect(button).toBeInTheDocument()
-//     expect(button).not.toBeDisabled()
-//   })
-
-//   it('Кнопка должна отображать иконку слева до текста, если она передана', () => {
-//     const icon = (
-//       <span role='img' aria-label='icon'>
-//         🌟
-//       </span>
-//     )
-
-//     const { asFragment } = render(
-//       <Button data-testid={buttonTestid} iconLeft={icon}>
-//         Click me!
-//       </Button>
-//     )
-
-//     expect(asFragment()).toMatchSnapshot()
-
-//     const button = screen.getByTestId(buttonTestid)
-//     const iconElement = screen.getByRole('img')
-//     const buttonText = screen.getByText('Click me!')
-
-//     expect(button).toBeInTheDocument()
-//     expect(button).toContainElement(iconElement)
-//     expect(button).toContainElement(buttonText)
-
-//     const buttonContent = button.textContent!
-//     expect(buttonContent.indexOf('🌟')).toBeLessThan(buttonContent.indexOf('Click me!'))
-//   })
-
-//   it('Кнопка должна отображать иконку справа после текста, если она передана', () => {
-//     const icon = (
-//       <span role='img' aria-label='icon'>
-//         🌟
-//       </span>
-//     )
-
-//     const { asFragment } = render(
-//       <Button data-testid={buttonTestid} iconRight={icon}>
-//         Click me!
-//       </Button>
-//     )
-
-//     expect(asFragment()).toMatchSnapshot()
-
-//     const button = screen.getByTestId(buttonTestid)
-//     const iconElement = screen.getByRole('img')
-//     const buttonText = screen.getByText('Click me!')
-
-//     expect(button).toBeInTheDocument()
-//     expect(button).toContainElement(iconElement)
-//     expect(button).toContainElement(buttonText)
-
-//     const buttonContent = button.textContent!
-//     expect(buttonContent.indexOf('Click me!')).toBeLessThan(buttonContent.indexOf('🌟'))
-//   })
-
-//   it('На кнопку добавляется новый класс, если передается className', () => {
-//     const { asFragment } = render(
-//       <Button data-testid={buttonTestid} className='testClassName'>
-//         Click me!
-//       </Button>
-//     )
-
-//     expect(asFragment()).toMatchSnapshot()
-
-//     const button = screen.getByTestId(buttonTestid)
-//     const buttonClassName = document.querySelector('.testClassName')
-
-//     expect(button).toBeInTheDocument()
-//     expect(buttonClassName).toBeInTheDocument()
-//   })
-
-//   it('Кнопка меняет тип, если передать type', () => {
-//     const { asFragment } = render(
-//       <Button data-testid={buttonTestid} type='reset'>
-//         Click me!
-//       </Button>
-//     )
-
-//     expect(asFragment()).toMatchSnapshot()
-
-//     const button = screen.getByTestId(buttonTestid)
-
-//     expect(button).toBeInTheDocument()
-//     expect(button.getAttribute('type')).toBe('reset')
-//   })
-
-//   it('Кнопка применяет нужные стили при передаче props textFormat', () => {
-//     const { asFragment } = render(
-//       <Button data-testid={buttonTestid} textFormat='uppercase'>
-//         Click me!
-//       </Button>
-//     )
-
-//     expect(asFragment()).toMatchSnapshot()
-
-//     const button = screen.getByTestId(buttonTestid)
-
-//     expect(button).toBeInTheDocument()
-//     expect(button).toHaveClass('uppercase')
-//   })
-// })

package/src/stories/primitives/ButtonIcon.stories.tsx

@@ -1,75 +0,0 @@
-import toast from 'react-hot-toast'
-import type { Meta, StoryObj } from '@storybook/react'
-import { ButtonIcon, Icon } from '$/shared/ui'
-
-const meta = {
-  title: 'BASE/ButtonIcon',
-  component: ButtonIcon,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered'
-  }
-} satisfies Meta<typeof ButtonIcon>
-
-export default meta
-type Story = StoryObj<typeof ButtonIcon>
-
-export const Base: Story = {
-  args: {
-    size: 'md',
-    intent: 'primary',
-    onClick: () => toast.success('Clicked'),
-    children: <Icon name='general/check' />
-  }
-}
-
-export const AllVariantsButtonsIcon: Story = {
-  render: () => (
-    <div className='flex flex-col gap-6'>
-      <div className='flex items-center gap-5'>
-        <ButtonIcon intent='primary' color='text-color-negative' size='lg'>
-          <Icon name='general/check' />
-        </ButtonIcon>
-        <ButtonIcon intent='primary' size='md'>
-          <Icon name='general/check' />
-        </ButtonIcon>
-        <ButtonIcon intent='primary' size='sm'>
-          <Icon name='general/check' />
-        </ButtonIcon>
-        <ButtonIcon intent='primary' size='sm' disabled>
-          <Icon name='general/check' />
-        </ButtonIcon>
-      </div>
-
-      <div className='flex items-center gap-5'>
-        <ButtonIcon intent='secondary' size='lg'>
-          <Icon name='general/check' />
-        </ButtonIcon>
-        <ButtonIcon intent='secondary' size='md'>
-          <Icon name='general/check' />
-        </ButtonIcon>
-        <ButtonIcon intent='secondary' size='sm'>
-          <Icon name='general/check' />
-        </ButtonIcon>
-        <ButtonIcon intent='secondary' size='sm' disabled>
-          <Icon name='general/check' />
-        </ButtonIcon>
-      </div>
-
-      <div className='flex items-center gap-5'>
-        <ButtonIcon intent='ghost' size='lg'>
-          <Icon name='general/check' />
-        </ButtonIcon>
-        <ButtonIcon intent='ghost' size='md'>
-          <Icon name='general/check' />
-        </ButtonIcon>
-        <ButtonIcon intent='ghost' size='sm'>
-          <Icon name='general/check' />
-        </ButtonIcon>
-        <ButtonIcon intent='ghost' size='sm' disabled>
-          <Icon name='general/check' />
-        </ButtonIcon>
-      </div>
-    </div>
-  )
-}

package/src/stories/primitives/CustomLink.stories.tsx

@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { CustomLink } from '$/shared/ui'
-
-const meta = {
-  title: 'Navigation/CustomLink',
-  component: CustomLink,
-  parameters: {
-    layout: 'centered'
-  },
-  decorators: [
-    (Story) => (
-      <div className='p-12 flex items-center justify-center bg-color-blue-grey-300 rounded-md'>
-        <Story />
-      </div>
-    )
-  ],
-
-  tags: ['autodocs']
-} satisfies Meta<typeof CustomLink>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Base: Story = {
-  args: {
-    Component: 'a',
-    href: 'https://sovcombank.ru/',
-    children: 'Совкомбанк',
-    withIcon: false
-  }
-}
-
-export const WithIcon: Story = {
-  args: {
-    Component: 'a',
-    href: 'https://sovcombank.ru/',
-    children: 'Совкомбанк',
-    withIcon: true,
-    intent: 'white'
-  }
-}
-
-export const WithOtherIcon: Story = {
-  args: {
-    Component: 'a',
-    href: 'https://sovcombank.ru/',
-    children: 'Совкомбанк',
-    withIcon: true,
-    icon: 'general/close',
-    intent: 'blue'
-  }
-}
-
-export const Disabled: Story = {
-  args: {
-    Component: 'a',
-    href: 'https://sovcombank.ru/',
-    children: 'Совкомбанк',
-    withIcon: true,
-    intent: 'blue',
-    disabled: true
-  }
-}

package/src/stories/primitives/Document.stories.tsx

@@ -1,36 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/react'
-import { Document } from '$/shared/ui'
-
-const meta = {
-  title: 'Files/Document',
-  component: Document,
-  parameters: {
-    layout: 'centered'
-  },
-
-  tags: ['autodocs']
-} satisfies Meta<typeof Document>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Outline: Story = {
-  args: {
-    text: 'Общая информация по кредитам ',
-    size: 439,
-    sizeType: 'КБ',
-    intent: 'outline',
-    href: 'https://sovcombank.ru/'
-  }
-}
-
-export const Filled: Story = {
-  args: {
-    text: 'Общая информация по кредитам',
-    size: 2,
-    sizeType: 'МБ',
-    intent: 'filled',
-    href: 'https://sovcombank.ru/'
-  }
-}

package/src/stories/primitives/Heading.stories.tsx

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Heading } from '$/shared/ui'
-
-const meta = {
-  title: 'TYPOGRAPHY/Heading',
-  component: Heading,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered'
-  }
-} satisfies Meta<typeof Heading>
-type Story = StoryObj<typeof Heading>
-
-export default meta
-
-export const Headings: Story = {
-  render: () => (
-    <div className='flex flex-col gap-6'>
-      <Heading as='h1'>h1 - заголовок страницы</Heading>
-      <Heading as='h2'>h2 - заголовок блока</Heading>
-      <Heading as='h3' className='text-color-primary-default'>
-        h3 - заголовок крупных карточек (с другим цветом)
-      </Heading>
-      <Heading as='h4'>h4 - заголовок небольших карточек</Heading>
-
-      <i className='desk-body-regular-m text-color-tetriary'># add h5 and h6 if need</i>
-    </div>
-  )
-}

package/src/stories/primitives/Hint.stories.tsx

@@ -1,82 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { setTextWithElementSB } from '@/storybookHelpers'
-import { Hint } from '$/shared/ui'
-
-const meta = {
-  title: 'INTERACTIVE/Hint',
-  component: Hint,
-  parameters: {
-    layout: 'centered'
-  },
-
-  tags: ['autodocs']
-} satisfies Meta<typeof Hint>
-
-export default meta
-
-type Story = StoryObj<typeof Hint>
-
-const hintContent = 'Небольшая подсказка для пользователя'
-
-export const Base: Story = {
-  args: {
-    triggerElement: setTextWithElementSB('Подробнее'),
-    children: hintContent,
-    side: 'top',
-    align: 'center',
-    defaultOpen: false
-  }
-}
-
-export const DifferentAlign: Story = {
-  render: () => (
-    <div className='grid grid-cols-3 gap-24'>
-      <Hint triggerElement={setTextWithElementSB('В начале')} align='start'>
-        {hintContent}
-      </Hint>
-      <Hint triggerElement={setTextWithElementSB('По центру')} align='center'>
-        {hintContent}
-      </Hint>
-      <Hint triggerElement={setTextWithElementSB('В конце')} align='end'>
-        {hintContent}
-      </Hint>
-    </div>
-  )
-}
-
-export const DifferentPositions: Story = {
-  render: () => (
-    <div className='grid grid-cols-2 gap-24'>
-      <Hint triggerElement={setTextWithElementSB('Слева')} side='left'>
-        {hintContent}
-      </Hint>
-      <Hint triggerElement={setTextWithElementSB('Справа')} side='right'>
-        {hintContent}
-      </Hint>
-      <Hint triggerElement={setTextWithElementSB('Сверху')} side='top'>
-        {hintContent}
-      </Hint>
-      <Hint triggerElement={setTextWithElementSB('Снизу')} side='bottom'>
-        {hintContent}
-      </Hint>
-    </div>
-  )
-}
-
-export const OtherConfiguration: Story = {
-  render: () => (
-    <div className='grid grid-cols-3 gap-24'>
-      <Hint triggerElement={setTextWithElementSB('Кастомный отступ от подсказки')} sideOffset={30}>
-        {hintContent}
-      </Hint>
-
-      <Hint triggerElement={setTextWithElementSB('По умолчанию открыт')} defaultOpen>
-        {hintContent}
-      </Hint>
-
-      <Hint triggerElement={setTextWithElementSB('Кастомная задержка открытия')} delayDuration={500}>
-        {hintContent}
-      </Hint>
-    </div>
-  )
-}

package/src/stories/primitives/Icon.stories.tsx

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Icon } from '$/shared/ui'
-
-const meta = {
-  title: 'Icons/Icon',
-  component: Icon,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered'
-  }
-} satisfies Meta<typeof Icon>
-type Story = StoryObj<typeof Icon>
-
-export default meta
-
-export const Common: Story = {
-  render: () => (
-    <div className='flex gap-4'>
-      <Icon name='general/check' className='text-icon-positive-default' />
-      <Icon name='general/close' className='text-icon-negative-default' />
-    </div>
-  )
-}
-
-export const SovcombankLogos: Story = {
-  render: () => (
-    <div className=' gap-16 bg-color-blue-grey-300 p-6 grid grid-cols-2 rounded-md'>
-      <Icon name='brandLogos/logoBlack' className='w-[192px] h-[32px]' />
-      <Icon name='brandLogos/logoGray' className='w-[192px] h-[32px]' />
-      <Icon name='brandLogos/logoWhite' className='w-[192px] h-[32px]' />
-      <Icon name='brandLogos/logoBusiness' className='w-[192px] h-[32px]' />
-      <Icon name='brandLogos/logoInsurance' className='w-[192px] h-[32px]' />
-      <Icon name='brandLogos/logoBusiness' className='w-[192px] h-[32px]' />
-    </div>
-  )
-}

package/src/stories/primitives/Loader.stories.tsx

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Loader } from '$/shared/ui'
-
-const meta = {
-  title: 'Base/Loader',
-  component: Loader,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <div className='bg-color-blue-grey-500 rounded-md size-28 flex items-center justify-center'>
-        <Story />
-      </div>
-    )
-  ]
-} satisfies Meta<typeof Loader>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Base: Story = {
-  args: {
-    size: 'md',
-    intent: 'secondary',
-    position: 'static'
-  }
-}
-
-export const WithText: Story = {
-  args: {
-    size: 'md',
-    intent: 'secondary',
-    position: 'static',
-    text: 'Загрузка'
-  }
-}

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: 'PROBLEMS/Popover',
-  component: Popover,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Popover>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-// eslint-disable-next-line operator-linebreak
-const popoverContent =
-  'Полная стоимость кредита - это сумма, которую вы заплатите за кредит вместе с процентами и другими комиссиями.'
-
-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'
-  }
-}