@scbt-ecom/ui 0.0.30 → 0.0.32

package/lib/shared/ui/icon/sprite.gen.ts

@@ -1,121 +0,0 @@
-export interface SpritesMap {
-  arrows: 'arrowCircle' | 'arrowLink' | 'arrowRight'
-  brandLogos: 'logoBlack' | 'logoBusiness' | 'logoGray' | 'logoInsurance' | 'logoMain' | 'logoWhite'
-  files: 'documentFilled' | 'documentOutline'
-  general: 'calendar' | 'check' | 'close'
-  info: 'warningCircle'
-}
-export const SPRITES_META: {
-  [Key in keyof SpritesMap]: {
-    filePath: string
-    items: Record<
-      SpritesMap[Key],
-      {
-        viewBox: string
-        width: number
-        height: number
-      }
-    >
-  }
-} = {
-  arrows: {
-    filePath: 'arrows.svg',
-    items: {
-      arrowCircle: {
-        viewBox: '0 0 32 32',
-        width: 32,
-        height: 32
-      },
-      arrowLink: {
-        viewBox: '0 0 24 24',
-        width: 24,
-        height: 24
-      },
-      arrowRight: {
-        viewBox: '0 0 16 17',
-        width: 16,
-        height: 17
-      }
-    }
-  },
-  brandLogos: {
-    filePath: 'brandLogos.svg',
-    items: {
-      logoBlack: {
-        viewBox: '0 0 194 32',
-        width: 194,
-        height: 32
-      },
-      logoBusiness: {
-        viewBox: '0 0 192 32',
-        width: 192,
-        height: 32
-      },
-      logoGray: {
-        viewBox: '0 0 194 32',
-        width: 194,
-        height: 32
-      },
-      logoInsurance: {
-        viewBox: '0 0 193 32',
-        width: 193,
-        height: 32
-      },
-      logoMain: {
-        viewBox: '0 0 192 32',
-        width: 192,
-        height: 32
-      },
-      logoWhite: {
-        viewBox: '0 0 194 32',
-        width: 194,
-        height: 32
-      }
-    }
-  },
-  files: {
-    filePath: 'files.svg',
-    items: {
-      documentFilled: {
-        viewBox: '0 0 22 28',
-        width: 22,
-        height: 28
-      },
-      documentOutline: {
-        viewBox: '0 0 22 28',
-        width: 22,
-        height: 28
-      }
-    }
-  },
-  general: {
-    filePath: 'general.svg',
-    items: {
-      calendar: {
-        viewBox: '0 0 19 20',
-        width: 19,
-        height: 20
-      },
-      check: {
-        viewBox: '0 0 24 24',
-        width: 800,
-        height: 800
-      },
-      close: {
-        viewBox: '0 0 24 24',
-        width: 24,
-        height: 24
-      }
-    }
-  },
-  info: {
-    filePath: 'info.svg',
-    items: {
-      warningCircle: {
-        viewBox: '0 0 20 20',
-        width: 20,
-        height: 20
-      }
-    }
-  }
-}

package/lib/shared/ui/index.ts

@@ -1,56 +0,0 @@
-// # BASE
-export { Section, type ISectionProps } from './Section'
-export { ResponsiveContainer, type IResponsiveContainerProps } from './ResponsiveContainer'
-export { Button, type IButtonProps } from './button'
-export { ButtonIcon, type IButtonIconProps } from './ButtonIcon'
-export { PhoneView } from './PhoneView'
-export { Badge, type IBadgeProps } from './Badge'
-export { Loader, type ILoaderProps } from './Loader'
-export { Skeleton, type ISkeletonProps } from './Skeleton'
-export { Table } from './table'
-
-// # INTERACTIVE
-export { Accordion, type IAccordionProps } from './accordion'
-export { Hint, type IHintProps } from './Hint'
-export { Popover } from './popover'
-export { ProgressBar, type IProgressBarProps } from './ProgressBar'
-export { TabsSwitcher, type ITabsSwitcherProps, type ITabRenderContent } from './TabsSwitcher'
-
-// # TYPOGRAPHY
-export { Heading, type IHeadingProps } from './Heading'
-
-// # ICONS
-export { Icon, type IconProps, type TAllowedIcons } from './icon'
-export { brandLogos, type TBrandLogoVariant } from './brandLogos'
-
-// # NAVIGATION
-export { Breadcrumbs, type IBreadcrumbsProps } from './Breadcrumbs'
-export { CustomLink, type ICustomLinkProps } from './CustomLink'
-
-// # FILes
-export { Document, type IDocumentProps } from './Document'
-
-// # CONTROLLED FORM UI
-export {
-  InputControl,
-  type InputControlProps,
-  InputControlMask,
-  type InputControlMaskProps,
-  FormControl,
-  DadataInputControl,
-  type IDadataInputControlProps,
-  CheckboxControl,
-  type ICheckboxControlProps,
-  RadioControl,
-  type IRadioControlProps,
-  type IRadioGroupOption,
-  SwitchControl,
-  type ISwitchControlProps,
-  SelectControl,
-  type ISelectControlProps,
-  type ISelectOption,
-  TextareaControl,
-  type ITextareaControlProps,
-  CalendarControl,
-  type ICalendarControlProps
-} from './formControlElements'

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

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

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

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

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

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

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

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

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

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

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

package/lib/shared/utils/formatToDate.ts

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

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

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

package/lib/shared/validation/index.ts

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

package/lib/shared/validation/messages.ts

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

@@ -1,5 +0,0 @@
-/* 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

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

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

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

package/lib/vite-env.d.ts

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

package/lib/widgets/Advantages.tsx

@@ -1,45 +0,0 @@
-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>
-  )
-}