@scbt-ecom/ui 0.4.0 → 0.4.2

package/lib/shared/ui/table/index.ts

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

package/lib/shared/ui/table/type.ts

@@ -0,0 +1,30 @@
+import type { ReactElement } from 'react'
+
+export type TTableColumnCount = 'twoColumns' | 'threeColumns'
+
+export type TableRows<C extends TTableColumnCount> = ColumnsCount<C>[]
+
+export type Ceil = {
+  text: string | ReactElement
+}
+
+export type ColumnsCount<C extends TTableColumnCount> = C extends 'twoColumns'
+  ? [Ceil, Ceil]
+  : C extends 'threeColumns'
+    ? [Ceil, Ceil, Ceil]
+    : never
+
+export type TTableClasses = {
+  tableRootWrapper: string
+  tableHeading: string
+  tableBody: string
+  tableRowTitles: string
+  tableCell: string
+  tableAdditionalText: string
+  tableTitlesContainer: string
+  tableTitleCeil: string
+  tableBodyContainer: string
+  tableTitleRow: string
+  tableBodyRow: string
+  tableBodyCeil: string
+}

package/lib/shared/utils/capitalize.ts

@@ -0,0 +1,6 @@
+export const capitalize = (str: string) => {
+  return str
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join('-')
+}

package/lib/shared/utils/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs))
+}

package/lib/shared/utils/deepCompare.ts

@@ -0,0 +1 @@
+export const deepCompare = <A, B>(dataA: A, dataB: B): boolean => JSON.stringify(dataA) === JSON.stringify(dataB)

package/lib/shared/utils/formatToDate.ts

@@ -0,0 +1,5 @@
+import { parse } from 'date-fns'
+
+export const formatToDate = (value: string, format = 'dd.MM.yyyy') => {
+  return parse(value, format, new Date())
+}

package/lib/shared/utils/index.ts

@@ -0,0 +1,5 @@
+export { cn } from './cn'
+export { deepCompare } from './deepCompare'
+export { isClient } from './isClient'
+export { capitalize } from './capitalize'
+export { formatToDate } from './formatToDate'

package/lib/shared/utils/isClient.ts

@@ -0,0 +1 @@
+export const isClient = typeof window !== 'undefined' && window.document !== undefined

package/lib/shared/validation/index.ts

@@ -0,0 +1,3 @@
+export * from './regExp'
+export * from './messages'
+export * from './zodValidation'

package/lib/shared/validation/messages.ts

@@ -0,0 +1,12 @@
+export const VALIDATION_MESSAGES = {
+  REQUIRED: 'Поле обязательно к заполнению',
+  MIN_LENGTH: 'Минимальная длина символов должна быть не менее',
+  MAX_LENGTH: 'Максимальная длина символов должна быть не более',
+  FIX_LENGTH: 'Длина символов должна быть равна',
+  MAX_LENGTH_ELEMENTS: 'Максимальное количество элементов должно быть не более',
+  MIN_LENGTH_ELEMENTS: 'Минимальное количество элементов должно быть не менее',
+  FIX_LENGTH_ELEMENTS: 'Количество элементов должно быть равно',
+  INVALID_VALUE: 'Поле заполнено некорректно',
+  INVALID_DATE: 'Введите корректную дату',
+  FUTURE_DATE_NOT_ALLOWED: 'Нельзя выбрать дату позже текущей'
+} as const

package/lib/shared/validation/regExp.ts

@@ -0,0 +1,5 @@
+/* eslint-disable operator-linebreak */
+export const RgxUnicode = /^[\u0400-\u04FF\u00CB\u00EB -]+$/ // Диапазон символов Unicode, включающий кириллические символы.*
+export const RgxCheckForHyphen = /^(?:[^-]+(?:-[^-]+){0,4}|[^-]+)$/ // Проверяет количество дефисов a-b-c-d-e Валидный (до 4 дефисов), не валидный*
+export const RgxPatronymic =
+  /^[a-zA-Zа-яА-ЯёЁ]+(?:\s*-\s*[a-zA-Zа-яА-ЯёЁ]+){0,4}(?:\s+[a-zA-Zа-яА-ЯёЁ]+(?:\s*-\s*[a-zA-Zа-яА-ЯёЁ]+){0,4})?$/i

package/lib/shared/validation/zodValidation/calendar.ts

@@ -0,0 +1,32 @@
+import { isValid, parse } from 'date-fns'
+import { z } from 'zod'
+import { VALIDATION_MESSAGES } from '../messages'
+
+export const zodCalendarValidate = z
+  .string()
+  .length(10, { message: VALIDATION_MESSAGES.INVALID_DATE })
+  .superRefine((val, ctx) => {
+    const [day, month, year] = val?.split('.') ?? ''
+    const parsed = parse(`${day}/${month}/${year}`, 'dd/MM/yyyy', new Date())
+
+    if (+year <= 1950) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: VALIDATION_MESSAGES.INVALID_DATE
+      })
+    }
+
+    if (!isValid(parsed)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: VALIDATION_MESSAGES.INVALID_DATE
+      })
+    }
+
+    if (new Date().getTime() < new Date(parsed).getTime()) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: VALIDATION_MESSAGES.FUTURE_DATE_NOT_ALLOWED
+      })
+    }
+  })

package/lib/shared/validation/zodValidation/dadataFio.ts

@@ -0,0 +1,67 @@
+import { z } from 'zod'
+import { RgxCheckForHyphen, RgxPatronymic, RgxUnicode } from '../regExp'
+import { capitalize } from '$/shared/utils'
+
+const formattedFio = (value: string) => {
+  const parts = value.trim().replace(/\s+/g, ' ').split(' ')
+  const [surname, name, ...patronymicArr] = parts
+  const patronymic = patronymicArr?.join(' ')
+
+  return {
+    surname,
+    name,
+    patronymic
+  }
+}
+
+export const zodDadataFioValidate = z
+  .string({ invalid_type_error: 'Обязательно к заполнению', required_error: 'Обязательно к заполнению' })
+  .superRefine((value, ctx) => {
+    if (!RgxUnicode.test(value)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Должна быть только кириллица'
+      })
+    }
+
+    const { surname, name, patronymic } = formattedFio(value)
+
+    if (!surname || !name) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Введите имя и фамилию'
+      })
+    }
+
+    if (!RgxCheckForHyphen.test(name)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Неверно введено имя'
+      })
+    }
+
+    if (!RgxCheckForHyphen.test(surname)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Неверно введена фамилия'
+      })
+    }
+
+    if (patronymic) {
+      if (!RgxPatronymic.test(patronymic)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Неверно введено отчество'
+        })
+      }
+    }
+  })
+  .transform((value) => {
+    const { surname, name, patronymic } = formattedFio(value)
+
+    return {
+      surname: capitalize(surname),
+      name: capitalize(name),
+      patronymic: patronymic ? capitalize(patronymic) : undefined
+    }
+  })

package/lib/shared/validation/zodValidation/index.ts

@@ -0,0 +1,2 @@
+export * from './dadataFio'
+export * from './calendar'

package/lib/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

package/lib/widgets/Advantages.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react'
+import { Heading } from '$/shared/ui'
+import { cn } from '$/shared/utils'
+
+interface IAdvantageClasses {
+  wrapper: string
+  advantage: string
+  title: string
+  description: string
+}
+export interface IAdvantage {
+  title: string
+  description: string | React.ReactElement
+}
+
+export interface IAdvantagesProps {
+  advantagesList: IAdvantage[]
+  classes?: Partial<IAdvantageClasses>
+}
+
+export const Advantages = ({ advantagesList, classes }: IAdvantagesProps) => {
+  return (
+    <div
+      className={cn(
+        'flex w-[328px] flex-col gap-8 rounded-md bg-color-white shadow-sm mobile:p-6 desktop:w-full desktop:flex-row desktop:items-start desktop:gap-0 desktop:py-6',
+        classes?.wrapper
+      )}
+    >
+      {advantagesList?.map(({ title, description }) => (
+        <div
+          key={title}
+          className={cn(
+            'after:content-[" "] relative flex h-full w-[285px] flex-col gap-2 after:absolute after:h-[1px] after:w-[280px] after:bg-color-blue-grey-300 last:after:hidden mobile:after:-bottom-4 mobile:after:left-1/2 mobile:after:-translate-x-1/2 desktop:px-8 desktop:after:right-0 desktop:after:top-1/2 desktop:after:h-10 desktop:after:w-[1px] desktop:after:-translate-y-1/2',
+            classes?.advantage
+          )}
+        >
+          <Heading as='h4' className={cn('text-color-dark', classes?.title)}>
+            {title}
+          </Heading>
+          <p className={cn('desk-body-regular-l text-color-tetriary', classes?.description)}>{description}</p>
+        </div>
+      ))}
+    </div>
+  )
+}

package/lib/widgets/banner/Banner.tsx

@@ -0,0 +1,74 @@
+import { type IAdvantage } from '../Advantages'
+import { type IBannerButtonsGroupClasses } from './ui/BannerButtonsGroup'
+import { BannerWithSeparateImg } from './ui/banners'
+import { BannerImageFull } from './ui/banners/BannerImageFull'
+import { type IButtonProps } from '$/shared/ui'
+
+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>
+  bannerVariant?: 'sepatateImg' | 'fullImg'
+}
+
+export const Banner = ({ bannerVariant, ...props }: IBannerProps) => {
+  switch (bannerVariant) {
+    case 'sepatateImg':
+      return <BannerWithSeparateImg {...props} />
+    case 'fullImg':
+      return <BannerImageFull {...props} />
+    default:
+      return <BannerWithSeparateImg {...props} />
+  }
+}
+
+// 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('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

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

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

@@ -0,0 +1,159 @@
+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',
+      size: 'lg'
+    },
+    secondary: {
+      onClick: () => toast.success('@click on secondary btn'),
+      children: 'Secondary',
+      size: 'lg'
+    }
+  }
+}
+export const mockBannerOnlyPrimaryButton: IBannerProps = {
+  headTitle: 'Кредит на любые цели',
+  subtitle: 'до 5 млн рублей',
+  buttonsConfig: {
+    primary: {
+      onClick: () => toast.success('@click on primary btn'),
+      children: 'Primary',
+      size: 'lg'
+    }
+  }
+}
+
+export const mockWithAdvantages: IBannerProps = {
+  headTitle: 'Кредит на любые цели',
+  subtitle: 'до 5 млн рублей',
+  buttonsConfig: {
+    primary: {
+      onClick: () => toast.success('@click on primary btn'),
+      children: 'Primary',
+      size: 'lg'
+    }
+  },
+  advantagesList: [
+    { title: 'До 5 млн ₽', description: 'сумма кредита' },
+    { title: 'До 5 лет', description: 'срок кредита' },
+    { title: 'От 5 минут', description: 'быстрое одобрение' },
+    { title: 'От 20 минут', description: 'сумма одобрения' }
+  ]
+}
+export const mockBannerBaseFullImage: IBannerProps = {
+  headTitle: 'Кредит на любые цели',
+  subtitle: 'до 5 млн рублей',
+  buttonsConfig: {
+    primary: {
+      onClick: () => toast.success('@click on primary btn'),
+      children: 'Primary',
+      size: 'lg'
+    },
+    secondary: {
+      onClick: () => toast.success('@click on secondary btn'),
+      children: 'Secondary',
+      size: 'lg'
+    }
+  },
+  classes: {
+    primary: 'bg-color-negative',
+    secondary: 'bg-color-negative text-color-white'
+  },
+  bannerVariant: 'fullImg'
+}
+
+export const mockBannerFullImageOnlyPrimaryButton: IBannerProps = {
+  headTitle: 'Кредит на любые цели',
+  subtitle: 'до 5 млн рублей',
+  buttonsConfig: {
+    primary: {
+      onClick: () => toast.success('@click on primary btn'),
+      children: 'Primary',
+      size: 'lg'
+    }
+  },
+  classes: {
+    primary: 'bg-color-negative'
+  },
+  bannerVariant: 'fullImg'
+}
+
+export const mockBannerFullImageWithAdvantages: IBannerProps = {
+  headTitle: 'Кредит на любые цели',
+  subtitle: 'до 5 млн рублей',
+  buttonsConfig: {
+    primary: {
+      onClick: () => toast.success('@click on primary btn'),
+      children: 'Primary',
+      size: 'lg'
+    },
+    secondary: {
+      onClick: () => toast.success('@click on secondary btn'),
+      children: 'Secondary',
+      size: 'lg'
+    }
+  },
+  classes: {
+    primary: 'bg-color-negative',
+    secondary: 'bg-color-negative text-color-white'
+  },
+  bannerVariant: 'fullImg',
+  advantagesList: [
+    { title: 'До 5 млн ₽', description: 'сумма кредита' },
+    { title: 'До 5 лет', description: 'срок кредита' },
+    { title: 'От 5 минут', description: 'быстрое одобрение' },
+    { title: 'От 20 минут', description: 'сумма одобрения' }
+  ]
+}
+
+export const mockBannerBaseGradient: IBannerProps = {
+  headTitle: 'Кредит на любые цели',
+  subtitle: 'до 5 млн рублей',
+  buttonsConfig: {
+    primary: {
+      onClick: () => toast.success('@click on primary btn'),
+      children: 'Primary',
+      size: 'lg'
+    },
+    secondary: {
+      onClick: () => toast.success('@click on secondary btn'),
+      children: 'Secondary',
+      size: 'lg'
+    }
+  },
+  classes: {
+    section: 'bg-color-transparent bg-[linear-gradient(97.94deg,_#dae4f2_-14.21%,_#afcffc_47.44%,_#79aef8_107.86%);]'
+  }
+}
+
+export const mockBannerBaseGradientAdvantages: IBannerProps = {
+  headTitle: 'Кредит на любые цели',
+  subtitle: 'до 5 млн рублей',
+  buttonsConfig: {
+    primary: {
+      onClick: () => toast.success('@click on primary btn'),
+      children: 'Primary',
+      size: 'lg'
+    },
+    secondary: {
+      onClick: () => toast.success('@click on secondary btn'),
+      children: 'Secondary',
+      size: 'lg'
+    }
+  },
+  classes: {
+    section: 'bg-color-transparent gradient-apply'
+  },
+  advantagesList: [
+    { title: 'До 5 млн ₽', description: 'сумма кредита' },
+    { title: 'До 5 лет', description: 'срок кредита' },
+    { title: 'От 5 минут', description: 'быстрое одобрение' },
+    { title: 'От 20 минут', description: 'сумма одобрения' }
+  ]
+}

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

@@ -0,0 +1,44 @@
+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>
+  className?: string
+}
+
+export const BannerButtonsGroup = ({ buttonsConfig, classes, className }: IBannerButtonsGroupProps) => {
+  const withSecondaryBtn = buttonsConfig?.secondary && buttonsConfig.secondary.children
+
+  return (
+    <div
+      data-id='banner-buttons-group'
+      className={cn(
+        'grid-buttons-apply absolute bottom-6 flex w-full flex-col mobile:max-w-[328px] mobile:justify-self-center desktop:static desktop:flex-row',
+        { 'flex items-center gap-4': withSecondaryBtn },
+        classes?.group,
+        className
+      )}
+    >
+      <Button intent='primary' {...buttonsConfig.primary} isFull className={cn('desktop:max-w-[216px]', classes?.primary)}>
+        {buttonsConfig.primary.children}
+      </Button>
+      {withSecondaryBtn && (
+        <Button
+          intent='secondary'
+          {...buttonsConfig?.secondary}
+          isFull
+          className={cn('desktop:max-w-[216px]', classes?.secondary)}
+        >
+          {buttonsConfig?.secondary?.children}
+        </Button>
+      )}
+    </div>
+  )
+}

package/lib/widgets/banner/ui/banners/BannerImageFull.tsx

@@ -0,0 +1,82 @@
+import { type IBannerProps } from '../../Banner'
+import saif from '../../saif.jpg'
+import { BannerButtonsGroup } from '../BannerButtonsGroup'
+import { Heading, ResponsiveContainer } from '$/shared/ui'
+import { cn } from '$/shared/utils'
+import { Advantages } from '$/widgets/Advantages'
+
+export const BannerImageFull = ({
+  headTitle,
+  subtitle,
+  buttonsConfig,
+  advantagesList,
+  classes
+}: Omit<IBannerProps, 'bannerVariant'>) => {
+  return (
+    <section data-id='banner-section' className={cn('relative h-[552px] desktop:h-[456px]', classes?.section)}>
+      <div
+        data-id='banner-img-wrapper'
+        className='absolute bottom-0 left-0 right-0 top-0 z-[-1] mx-auto h-full max-w-[1920px] desktop:h-[456px]'
+      >
+        <picture>
+          <source
+            media='(min-width: 1128px)'
+            srcSet='https://sovcombank.ru/apply/credit/static/5a216aa0b1aa395335e71cb69fc3059f/7eb38/large.avif'
+            type='image/avif'
+          />
+          <source
+            media='(max-width: 1127px)'
+            srcSet='https://sovcombank.ru/apply/credit/static/e71c554abd4a3a92ff79f048568de883/73d21/mob.avif'
+            type='image/avif'
+          />
+          <img
+            data-id='banner-image'
+            src={saif}
+            alt=' '
+            className={cn('h-full w-full object-cover object-center', classes?.image)}
+          />
+        </picture>
+      </div>
+      <ResponsiveContainer data-id='banner-container' className={cn('h-full pb-6', classes?.container)}>
+        <div
+          data-id='banner-grid'
+          className={cn(
+            'grid-mob-full-img-apply desktop:grid-desk-full-img-apply grid h-full grid-rows-[repeat(2,_min-content)]',
+            classes?.wrapper
+          )}
+        >
+          <div
+            data-id='banner-text-block'
+            className={cn(
+              'grid-text-apply flex flex-col gap-4 pt-6 mobile:w-[328px] desktop:pb-10 desktop:pt-20',
+              classes?.textBlock
+            )}
+          >
+            <Heading data-id='banner-title' as='h1' className={cn('text-color-white', classes?.title)}>
+              {headTitle}
+            </Heading>
+            <p data-id='banner-subtitle' className={cn('desk-body-regular-l text-color-white', classes?.subtitle)}>
+              {subtitle}
+            </p>
+          </div>
+
+          <BannerButtonsGroup
+            className='mobile:self-end'
+            data-id='banner-buttons-group'
+            buttonsConfig={buttonsConfig}
+            classes={classes}
+          />
+        </div>
+
+        <div
+          data-id='banner-advantages'
+          className={cn('absolute bottom-[-400px] right-1/2 translate-x-1/2 desktop:bottom-[-50px]', classes?.advantages)}
+        >
+          {advantagesList && advantagesList?.length > 0 && (
+            <Advantages data-id='banner-advantages-list' advantagesList={advantagesList} />
+          )}
+        </div>
+      </ResponsiveContainer>
+    </section>
+  )
+}