@scbt-ecom/ui 0.0.30 → 0.0.32

package/lib/widgets/banner/Banner.tsx

@@ -1,62 +0,0 @@
-import { Advantages, type IAdvantage } from '../Advantages'
-import money from './money.png'
-import { BannerButtonsGroup, type IBannerButtonsGroupClasses } from './ui/BannerButtonsGroup'
-import { Heading, type IButtonProps, ResponsiveContainer } from '$/shared/ui'
-import { cn } from '$/shared/utils'
-
-interface IBannerClasses extends IBannerButtonsGroupClasses {
-  section: string
-  container: string
-  wrapper: string
-  content: string
-  textBlock: string
-  title: string
-  subtitle: string
-  imageContainer: string
-  image: string
-  advantages: string
-}
-
-export type TButtonsConfig = {
-  primary: IButtonProps
-  secondary?: IButtonProps
-}
-
-export interface IBannerProps {
-  headTitle: string
-  subtitle: string
-  buttonsConfig: TButtonsConfig
-  advantagesList?: IAdvantage[]
-  classes?: Partial<IBannerClasses>
-}
-
-export const Banner = ({ headTitle, subtitle, buttonsConfig, advantagesList, classes }: IBannerProps) => {
-  return (
-    <section className={cn('h-[456px] bg-banner-skyblue-300 relative', classes?.section)}>
-      <ResponsiveContainer className={cn(classes?.container)}>
-        <div className={cn('flex flex-col desktop:flex-row desktop:justify-between', classes?.wrapper)}>
-          <div className={cn('relative z-10 flex flex-col gap-10 pt-6 desktop:pt-20', classes?.content)}>
-            <div className={cn('flex flex-col gap-4', classes?.textBlock)}>
-              <Heading as='h1' className={cn('text-color-dark', classes?.title)}>
-                {headTitle}
-              </Heading>
-              <p className={cn('desk-body-regular-l text-color-dark', classes?.subtitle)}>{subtitle}</p>
-            </div>
-            <BannerButtonsGroup buttonsConfig={buttonsConfig} classes={classes} />
-          </div>
-          <div
-            className={cn(
-              'w-full h-[410px] mobile:absolute mobile:left-1/2 mobile:bottom-0 mobile:-translate-x-1/2 desktop:w-[550px] desktop:h-full',
-              classes?.imageContainer
-            )}
-          >
-            <img src={money} alt='money' className={cn('w-full h-full object-contain', classes?.image)} />
-          </div>
-        </div>
-        <div className={cn('absolute bottom-[-400px] desktop:bottom-[-50px]', classes?.advantages)}>
-          {advantagesList && advantagesList?.length > 0 && <Advantages advantagesList={advantagesList} />}
-        </div>
-      </ResponsiveContainer>
-    </section>
-  )
-}

package/lib/widgets/banner/index.ts

@@ -1 +0,0 @@
-export { Banner } from './Banner'

package/lib/widgets/banner/model/helpers.ts

@@ -1,44 +0,0 @@
-import toast from 'react-hot-toast'
-import { type IBannerProps } from '../Banner'
-
-export const mockBannerBase: IBannerProps = {
-  headTitle: 'Кредит на любые цели',
-  subtitle: 'до 5 млн рублей',
-  buttonsConfig: {
-    primary: {
-      onClick: () => toast.success('@click on primary btn'),
-      children: 'Primary'
-    },
-    secondary: {
-      onClick: () => toast.success('@click on secondary btn'),
-      children: 'Secondary'
-    }
-  }
-}
-export const mockBannerOnlyPrimaryButton: IBannerProps = {
-  headTitle: 'Кредит на любые цели',
-  subtitle: 'до 5 млн рублей',
-  buttonsConfig: {
-    primary: {
-      onClick: () => toast.success('@click on primary btn'),
-      children: 'Primary'
-    }
-  }
-}
-
-export const mockWithAdvantages: IBannerProps = {
-  headTitle: 'Кредит на любые цели',
-  subtitle: 'до 5 млн рублей',
-  buttonsConfig: {
-    primary: {
-      onClick: () => toast.success('@click on primary btn'),
-      children: 'Primary'
-    }
-  },
-  advantagesList: [
-    { title: 'До 5 млн ₽', description: 'сумма кредита' },
-    { title: 'До 5 лет', description: 'срок кредита' },
-    { title: 'От 5 минут', description: 'быстрое одобрение' },
-    { title: 'От 20 минут', description: 'сумма одобрения' }
-  ]
-}

package/lib/widgets/banner/ui/BannerButtonsGroup.tsx

@@ -1,30 +0,0 @@
-import { type TButtonsConfig } from '../Banner'
-import { Button } from '$/shared/ui'
-import { cn } from '$/shared/utils'
-
-export interface IBannerButtonsGroupClasses {
-  group: string
-  primary: string
-  secondary: string
-}
-interface IBannerButtonsGroupProps {
-  buttonsConfig: TButtonsConfig
-  classes?: Partial<IBannerButtonsGroupClasses>
-}
-
-export const BannerButtonsGroup = ({ buttonsConfig, classes }: IBannerButtonsGroupProps) => {
-  const withSecondaryBtn = buttonsConfig?.secondary && buttonsConfig.secondary.children
-
-  return (
-    <div className={cn('w-max mobile:absolute bottom-0', { 'flex items-center gap-4': withSecondaryBtn }, classes?.group)}>
-      <Button intent='primary' {...buttonsConfig.primary} className={cn(classes?.primary)}>
-        {buttonsConfig.primary.children}
-      </Button>
-      {withSecondaryBtn && (
-        <Button intent='secondary' {...buttonsConfig?.secondary} className={cn(classes?.secondary)}>
-          {buttonsConfig?.secondary?.children}
-        </Button>
-      )}
-    </div>
-  )
-}

package/lib/widgets/pageHeader/PageHeader.tsx

@@ -1,54 +0,0 @@
-import { brandLogos, Button, PhoneView, ResponsiveContainer, type TBrandLogoVariant } from '$/shared/ui'
-
-export interface ICommonHeaderProps {
-  logoPath?: string
-  logoType?: TBrandLogoVariant
-}
-interface IHeaderWithPhone extends ICommonHeaderProps {
-  variant: 'withPhone'
-  phone: string
-  phoneText: string
-}
-interface IHeaderWithButton extends ICommonHeaderProps {
-  variant: 'withButton'
-}
-
-export type TPageHeaderProps = IHeaderWithButton | IHeaderWithPhone
-
-const renderContentVariant = (props: TPageHeaderProps) => {
-  switch (props.variant) {
-    case 'withButton':
-      return (
-        <Button intent='secondary' size='sm'>
-          Оформить заявку
-        </Button>
-      )
-    case 'withPhone':
-      const { phone, phoneText } = props as IHeaderWithPhone
-      return <PhoneView phone={phone} text={phoneText} />
-    default:
-      return null
-  }
-}
-
-export const PageHeader = (props: TPageHeaderProps) => {
-  const { logoPath = '/', logoType = 'main' } = props
-
-  return (
-    <header className='bg-color-blue-grey-200 flex items-center justify-center h-[72px] '>
-      <ResponsiveContainer>
-        <div className='flex items-center justify-between gap-5 '>
-          <a
-            href={logoPath}
-            target='_blank'
-            rel='noreferrer'
-            className='[&_svg]:w-[192px] [&_svg]:h-[32px] flex items-center justify-center'
-          >
-            {brandLogos[logoType]}
-          </a>
-          {renderContentVariant(props)}
-        </div>
-      </ResponsiveContainer>
-    </header>
-  )
-}

package/postcss.config.mjs

@@ -1,8 +0,0 @@
-/** @type {import('postcss-load-config').Config} */
-const config = {
-  plugins: {
-    tailwindcss: {}
-  }
-}
-
-export default config

package/src/App.tsx

@@ -1,9 +0,0 @@
-export const App = () => {
-  return (
-    <div className='flex justify-center items-center min-h-screen'>
-      <h2 className='text-color-tetriary desk-title-bold-s'>
-        use <span className='text-color-primary-default desk-title-bold-s'> npm run start </span> for run storybook
-      </h2>
-    </div>
-  )
-}

package/src/app/providers/RootProvider.tsx

@@ -1,11 +0,0 @@
-import type { IProviderProps } from './model/types'
-import { ToasterProvider } from './ui'
-
-export const RootProvider = ({ children }: IProviderProps) => {
-  return (
-    <>
-      <ToasterProvider />
-      {children}
-    </>
-  )
-}

package/src/app/providers/index.ts

@@ -1 +0,0 @@
-export * from './RootProvider'

package/src/app/providers/model/types.ts

@@ -1,5 +0,0 @@
-import type { ReactNode } from 'react'
-
-export interface IProviderProps {
-  children: ReactNode
-}

package/src/app/providers/ui/ToasterProvider.tsx

@@ -1,23 +0,0 @@
-import { useEffect } from 'react'
-import toast, { Toaster, useToasterStore } from 'react-hot-toast'
-
-export const ToasterProvider = () => {
-  const { toasts } = useToasterStore()
-  const TOAST_LIMIT = 5
-
-  useEffect(() => {
-    toasts
-      .filter((t) => t.visible)
-      .filter((_, i) => i >= TOAST_LIMIT)
-      .forEach((t) => toast.dismiss(t.id))
-  }, [toasts])
-
-  return (
-    <Toaster
-      position='top-right'
-      toastOptions={{
-        duration: 5000
-      }}
-    />
-  )
-}

package/src/app/providers/ui/index.ts

@@ -1 +0,0 @@
-export * from './ToasterProvider'

package/src/configs/setup.ts

@@ -1,9 +0,0 @@
-import * as matchers from '@testing-library/jest-dom/matchers'
-import { cleanup } from '@testing-library/react'
-import { afterEach, expect } from 'vitest'
-
-expect.extend(matchers)
-
-afterEach(() => {
-  cleanup()
-})

package/src/configs/storybook.config.ts

@@ -1,23 +0,0 @@
-export const STORYBOOK_VIEWPORTS = {
-  mobile: {
-    name: 'mobile',
-    styles: {
-      width: '360px',
-      height: '700px'
-    }
-  },
-  desktop: {
-    name: 'desktop',
-    styles: {
-      width: '1188px',
-      height: '700px'
-    }
-  },
-  fullscreen: {
-    name: 'fullscreen',
-    styles: {
-      width: '100%',
-      height: '100%'
-    }
-  }
-}

package/src/main.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import '$/shared/style.css'
-import { App } from './App.tsx'
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)

package/src/stories/primitives/Accordion.stories.tsx

@@ -1,66 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Accordion } from '$/shared/ui'
-
-const meta = {
-  title: 'INTERACTIVE/Accordion',
-  component: Accordion,
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <div className='max-w-[800px] mt-8 m-auto'>
-        <Story />
-      </div>
-    )
-  ]
-} satisfies Meta<typeof Accordion>
-
-export default meta
-
-type Story = StoryObj<typeof Accordion>
-
-const mock_accordion_list = [
-  {
-    label: 'Заголовок аккордеон 1',
-    content: 'Контент аккордеона 1'
-  },
-  {
-    label: 'Заголовок аккордеон 2',
-    content: 'Контент аккордеона 2'
-  },
-  {
-    label: 'Заголовок аккордеон 3',
-    content: 'Контент аккордеона 3'
-  }
-]
-
-export const Base: Story = {
-  args: {
-    label: 'Заголовок аккордеон',
-    children: 'Контент аккордеона'
-  }
-}
-
-export const WithDefaultOpen: Story = {
-  args: {
-    defaultOpen: ['Заголовок аккордеон'],
-    label: 'Заголовок аккордеон',
-    children: 'Контент аккордеона'
-  }
-}
-
-export const MappedWithDefaultOpen: Story = {
-  render: (...args) => (
-    <div className='flex flex-col gap-6'>
-      {mock_accordion_list?.map(({ label, content }) => (
-        <Accordion
-          defaultOpen={['Заголовок аккордеон 1', 'Заголовок аккордеон 2']}
-          key={label.toString()}
-          label={label}
-          {...args}
-        >
-          {content}
-        </Accordion>
-      ))}
-    </div>
-  )
-}

package/src/stories/primitives/Badge.stories.tsx

@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Badge } from '$/shared/ui'
-
-const meta = {
-  title: 'Base/Badge',
-  component: Badge,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Badge>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Base: Story = {
-  args: {
-    children: 'Text container'
-  }
-}
-
-export const MinWidth: Story = {
-  args: {
-    children: '2',
-    className: 'bg-color-primary-default'
-  }
-}

package/src/stories/primitives/Breadcrumbs.stories.tsx

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Breadcrumbs } from '$/shared/ui'
-import type { TLinksList } from '$/shared/ui/Breadcrumbs'
-
-const meta = {
-  title: 'Navigation/Breadcrumbs',
-  component: Breadcrumbs,
-  parameters: {
-    layout: 'centered'
-  },
-
-  tags: ['autodocs']
-} satisfies Meta<typeof Breadcrumbs>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-const linksList: TLinksList = [
-  { label: 'Главная', path: 'https://sovcombank.ru/' },
-  { label: 'Займы', path: 'https://sovcombank.ru/apply/credit/zajm-online/' },
-  { label: 'Главная' }
-]
-
-export const Base: Story = {
-  args: {
-    linksList
-  }
-}

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'># Red</strong>
-        <div className='flex items-center gap-5'>
-          <Button intent='red' size='lg'>
-            Button
-          </Button>
-          <Button intent='red' size='md'>
-            Button
-          </Button>
-          <Button intent='red' size='sm'>
-            Button
-          </Button>
-          <Button intent='red' size='sm' disabled>
-            Button
-          </Button>
-          <Button intent='red' 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>
-  )
-}