@scbt-ecom/ui 0.4.2 → 0.4.4

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

@@ -1,149 +0,0 @@
-import toast from 'react-hot-toast'
-import type { Meta, StoryObj } from '@storybook/react'
-import { Button, Icon } from '$/shared/ui'
-
-const meta = {
-  title: 'BASE/Button',
-  component: Button,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered'
-  }
-} satisfies Meta<typeof Button>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Base: Story = {
-  args: {
-    size: 'md',
-    children: 'Button',
-    intent: 'primary',
-    textFormat: 'initial',
-    isLoading: false,
-    onClick: () => toast.success('Clicked')
-  }
-}
-
-export const AllVariantsButtons: Story = {
-  render: () => (
-    <div className='flex flex-col gap-8'>
-      <div className='flex flex-col gap-3'>
-        <strong className='text-color-tetriary'># Primary</strong>
-        <div className='flex items-center gap-5'>
-          <Button intent='primary' size='lg'>
-            Button
-          </Button>
-          <Button intent='primary' size='md'>
-            Button
-          </Button>
-          <Button intent='primary' size='sm'>
-            Button
-          </Button>
-          <Button intent='primary' size='sm' disabled>
-            Button
-          </Button>
-          <Button intent='primary' size='sm' isLoading>
-            Button
-          </Button>
-        </div>
-      </div>
-
-      <div className='flex flex-col gap-3'>
-        <strong className='text-color-tetriary'># Secondary</strong>
-        <div className='flex items-center gap-5'>
-          <Button intent='secondary' size='lg'>
-            Button
-          </Button>
-          <Button intent='secondary' size='md'>
-            Button
-          </Button>
-          <Button intent='secondary' size='sm'>
-            Button
-          </Button>
-          <Button intent='secondary' size='sm' disabled>
-            Button
-          </Button>
-          <Button intent='secondary' size='sm' isLoading>
-            Button
-          </Button>
-        </div>
-      </div>
-
-      <div className='flex flex-col gap-3'>
-        <strong className='text-color-tetriary'># Ghost</strong>
-        <div className='flex items-center gap-5'>
-          <Button intent='ghost' size='lg'>
-            Button
-          </Button>
-          <Button intent='ghost' size='md'>
-            Button
-          </Button>
-          <Button intent='ghost' size='sm'>
-            Button
-          </Button>
-          <Button intent='ghost' size='sm' disabled>
-            Button
-          </Button>
-          <Button intent='ghost' size='sm' isLoading>
-            Button
-          </Button>
-        </div>
-      </div>
-
-      <div className='flex flex-col gap-3'>
-        <strong className='text-color-tetriary'># Negative</strong>
-        <div className='flex items-center gap-5'>
-          <Button intent='negative' size='lg'>
-            Button
-          </Button>
-          <Button intent='negative' size='md'>
-            Button
-          </Button>
-          <Button intent='negative' size='sm'>
-            Button
-          </Button>
-          <Button intent='negative' size='sm' disabled>
-            Button
-          </Button>
-          <Button intent='negative' size='sm' isLoading>
-            Button
-          </Button>
-        </div>
-      </div>
-
-      <div className='flex flex-col gap-3'>
-        <strong className='text-color-tetriary'># Text format</strong>
-        <div className='flex items-center gap-5'>
-          <Button intent='primary' size='lg' textFormat='capitalize'>
-            capitalize
-          </Button>
-          <Button intent='primary' size='md' textFormat='uppercase'>
-            uppercase
-          </Button>
-          <Button intent='primary' size='sm' textFormat='lowercase'>
-            lowercase
-          </Button>
-          <Button intent='primary' size='sm' textFormat='initial'>
-            initial
-          </Button>
-        </div>
-      </div>
-
-      <div className='flex flex-col gap-3'>
-        <strong className='text-color-tetriary'># With icons</strong>
-        <div className='flex items-center gap-5'>
-          <Button iconLeft={<Icon name='general/check' />} intent='primary' size='lg'>
-            Button
-          </Button>
-          <Button iconLeft={<Icon name='general/check' />} iconRight={<Icon name='general/check' />} intent='primary' size='md'>
-            Button
-          </Button>
-          <Button iconRight={<Icon name='general/check' />} intent='primary' size='sm'>
-            Button
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}

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='flex items-center justify-center rounded-md bg-color-blue-grey-300 p-12'>
-        <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='grid grid-cols-2 gap-16 rounded-md bg-color-blue-grey-300 p-6'>
-      <Icon name='brandLogos/logoBlack' className='h-[32px] w-[192px]' />
-      <Icon name='brandLogos/logoGray' className='h-[32px] w-[192px]' />
-      <Icon name='brandLogos/logoWhite' className='h-[32px] w-[192px]' />
-      <Icon name='brandLogos/logoBusiness' className='h-[32px] w-[192px]' />
-      <Icon name='brandLogos/logoInsurance' className='h-[32px] w-[192px]' />
-      <Icon name='brandLogos/logoBusiness' className='h-[32px] w-[192px]' />
-    </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='flex size-28 items-center justify-center rounded-md bg-color-blue-grey-500'>
-        <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: 'Загрузка'
-  }
-}