@scbt-ecom/ui 0.0.29 → 0.0.30

package/lib/shared/ui/popover/Popover.tsx

@@ -0,0 +1,77 @@
+import type { ReactElement, ReactNode } from 'react'
+import type { PopoverContentProps as TPopoverContentPropsBase } from '@radix-ui/react-popover'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { Icon } from '../icon/Icon'
+import { cn } from '$/shared/utils'
+
+type TAdditionalClasses = {
+  content: string
+  arrow: string
+  trigger: string
+}
+
+interface IPopoverContentProps extends TPopoverContentPropsBase {
+  sideOffset?: number
+  alignOffset?: number
+  align?: 'end' | 'center' | 'start'
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  defaultOpen?: boolean
+  avoidCollisions?: boolean
+}
+
+export interface IPopoverProps extends IPopoverContentProps {
+  triggerElement: ReactElement
+  children: ReactNode
+  classes?: Partial<TAdditionalClasses>
+  headLine?: string
+}
+
+export const Popover = ({
+  triggerElement,
+  classes,
+  sideOffset,
+  alignOffset,
+  align,
+  side,
+  defaultOpen = false,
+  avoidCollisions = false,
+  headLine,
+  children,
+  arrowPadding,
+  ...contentProps
+}: IPopoverProps) => {
+  return (
+    <div className=''>
+      <PopoverPrimitive.Root defaultOpen={defaultOpen}>
+        <div className='flex items-center gap-2 w-max'>
+          <h3 className='text-[24px] font-bold'>{headLine}</h3>
+          <PopoverPrimitive.Trigger className={cn('cursor-pointer', classes?.trigger)} asChild>
+            {triggerElement}
+          </PopoverPrimitive.Trigger>
+        </div>
+        <PopoverPrimitive.Anchor />
+        <PopoverPrimitive.Portal>
+          <PopoverPrimitive.Content
+            className={cn(
+              'p-4 w-64 desk-body-regular-m flex items-start gap-2 shadow-sm rounded-sm bg-color-white',
+              classes?.content
+            )}
+            sideOffset={sideOffset}
+            alignOffset={alignOffset}
+            avoidCollisions={avoidCollisions}
+            arrowPadding={arrowPadding}
+            align={align}
+            side={side}
+            {...contentProps}
+          >
+            {children}
+            <PopoverPrimitive.Close aria-label='Close' className='size-4 outline-transparent outline-0'>
+              <Icon name='general/close' className='size-4 text-icon-blue-grey-600 cursor-pointer ' />
+            </PopoverPrimitive.Close>
+            <PopoverPrimitive.Arrow width={12} height={6} className={cn('fill-secondary-default', classes?.arrow)} />
+          </PopoverPrimitive.Content>
+        </PopoverPrimitive.Portal>
+      </PopoverPrimitive.Root>
+    </div>
+  )
+}

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

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

package/lib/shared/ui/table/Table.tsx

@@ -0,0 +1,143 @@
+import type { ReactElement } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Heading } from '../Heading'
+import { ResponsiveContainer } from '../ResponsiveContainer'
+import type { TableRows, TTableClasses, TTableColumnCount } from './type'
+import { cn } from '$/shared/utils'
+
+const tableConfig = cva('grid', {
+  variants: {
+    columnCount: {
+      twoColumns: 'grid-cols-[repeat(2,minmax(172px,_1fr))] desktop:grid-cols-[repeat(2,minmax(172px,_1fr))]',
+      threeColumns: 'grid-cols-[repeat(3,minmax(172px,_1fr))] desktop:grid-cols-[repeat(3,minmax(312px,_1fr))]'
+    }
+  }
+})
+
+const itemTableConfig = cva('grid', {
+  variants: {
+    columnCount: {
+      twoColumns: '',
+      threeColumns: ''
+    },
+    titlesExist: {
+      exist: '',
+      notExist: ''
+    }
+  },
+  compoundVariants: [
+    {
+      titlesExist: 'notExist',
+      columnCount: 'twoColumns',
+      class: 'grid-rows-[repeat(2,_auto)] border-b border-warm-grey-200 py-4'
+    },
+    {
+      titlesExist: 'notExist',
+      columnCount: 'threeColumns',
+      class: 'grid-cols-[repeat(3,_auto)]'
+    },
+    {
+      titlesExist: 'exist',
+      columnCount: 'twoColumns',
+      class: 'grid-cols-[repeat(2,_auto)]'
+    },
+    {
+      titlesExist: 'exist',
+      columnCount: 'threeColumns',
+      class: 'grid-cols-[repeat(3,_auto)]'
+    }
+  ]
+})
+
+const tableOverflowConfig = cva('grid', {
+  variants: {
+    columnCount: {
+      twoColumns: '',
+      threeColumns: ''
+    }
+  },
+  compoundVariants: [
+    {
+      columnCount: 'threeColumns',
+      class: 'mobile:overflow-x-scroll mobile:max-w-[368px] mb-1'
+    }
+  ]
+})
+
+const textTableConfig = cva('border-b border-warm-grey-200 py-4 desktop:desk-body-regular-l mob-body-regular-l', {
+  variants: {
+    columnCount: {
+      twoColumns: '',
+      threeColumns: ''
+    },
+    titlesExist: {
+      exist: '',
+      notExist: ''
+    }
+  },
+  compoundVariants: [
+    {
+      titlesExist: 'notExist',
+      columnCount: 'twoColumns',
+      class: 'border-transparent border-0 p-0'
+    }
+  ]
+})
+
+type TTableProps = VariantProps<typeof tableConfig>
+
+export interface ITable<C extends TTableColumnCount> extends TTableProps {
+  headTitle: string | ReactElement
+  columnCount: TTableColumnCount
+  tableHead?: string[]
+  tableRows: TableRows<C>
+  additionalText?: string
+  classes?: Partial<TTableClasses>
+}
+
+export const Table = <C extends TTableColumnCount>({
+  headTitle,
+  tableRows,
+  tableHead,
+  additionalText,
+  columnCount,
+  classes
+}: ITable<C>) => {
+  const titlesExist = tableHead && tableHead.length > 0 ? 'exist' : 'notExist'
+
+  return (
+    <ResponsiveContainer>
+      <div className={cn('flex flex-col', classes?.tableRootWrapper)}>
+        <Heading as='h3' className={cn('mob-title-bold-m desktop:desk-title-bold-s pb-6', classes?.tableHeading)}>
+          {headTitle}
+        </Heading>
+        <div className={cn(tableOverflowConfig({ columnCount }), classes?.tableBody)}>
+          <ul className={cn(tableConfig({ columnCount }), classes?.tableTitlesContainer)}>
+            {tableHead?.map((title) => (
+              <li
+                key={title}
+                className={cn(
+                  'border-b border-warm-grey-200 mob-body-regular-l desktop:desk-body-regular-l py-4',
+                  classes?.tableTitleRow
+                )}
+              >
+                {title}
+              </li>
+            ))}
+          </ul>
+
+          <ul className={cn('mb-4 flex flex-col', classes?.tableBodyContainer)}>
+            {tableRows.map((row) => (
+              <li className={cn(itemTableConfig({ columnCount, titlesExist }), classes?.tableBodyRow)}>
+                {row.map((ceil) => (
+                  <p className={cn(textTableConfig({ titlesExist, columnCount }), classes?.tableBodyCeil)}>{ceil.text}</p>
+                ))}
+              </li>
+            ))}
+          </ul>
+        </div>
+        <p className={cn('mob-body-regular-m desktop:desk-body-regular-l', classes?.tableAdditionalText)}>{additionalText}</p>
+      </div>
+    </ResponsiveContainer>
+  )
+}

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 flex-col gap-8 w-[328px] desktop:w-full desktop:flex-row desktop:items-start desktop:gap-0 mobile:p-6 desktop:py-6 bg-color-white rounded-md shadow-sm',
+        classes?.wrapper
+      )}
+    >
+      {advantagesList?.map(({ title, description }) => (
+        <div
+          key={title}
+          className={cn(
+            'relative w-[285px] h-full flex flex-col gap-2 after:w-[280px] after:h-[1px] mobile:after:left-1/2 mobile:after:-bottom-4 mobile:after:-translate-x-1/2 desktop:px-8 desktop:after:right-0 desktop:after:top-1/2 desktop:after:-translate-y-1/2 desktop:after:h-10 desktop:after:w-[1px] after:content-[" "] after:absolute after:bg-color-blue-grey-300 last:after:hidden',
+            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,62 @@
+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

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

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

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

@@ -0,0 +1,30 @@
+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/{dist/widgets/index.d.ts → lib/widgets/index.ts}

@@ -1,3 +1,3 @@
-export { PageHeader, type TPageHeaderProps } from './pageHeader';
-export { Banner } from './banner';
-export { Advantages, type IAdvantage, type IAdvantagesProps } from './Advantages';
+export { PageHeader, type TPageHeaderProps } from './pageHeader'
+export { Banner } from './banner'
+export { Advantages, type IAdvantage, type IAdvantagesProps } from './Advantages'