@scbt-ecom/ui 0.4.2 → 0.4.3

package/lib/shared/ui/index.ts

@@ -1,68 +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'
-export { Modal } from './modal'
-export { type INotificationProps, Notification } from './notification'
-
-// # PROVIDERS
-export { NotificationProvider, type INotificationProviderProps } from './providers'
-
-// # TYPOGRAPHY
-export { Heading, type IHeadingProps } from './Heading'
-
-// # ICONS
-export { Icon, type IconProps, type TAllowedIcons, type SpritesMap } 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,
-  InputSliderControl,
-  type InputSliderControlProps,
-  FormControl,
-  DadataInputControl,
-  type IDadataInputControlProps,
-  CheckboxControl,
-  type ICheckboxControlProps,
-  RadioControl,
-  type IRadioControlProps,
-  type IRadioGroupOption,
-  SwitchControl,
-  type ISwitchControlProps,
-  TextareaControl,
-  type ITextareaControlProps,
-  type IInputControlUploaderProps,
-  InputControlUploader,
-  type ICalendarControlProps,
-  CalendarControl,
-  type IEditorControlProps,
-  EditorControl,
-  InputCurrencyControl,
-  type InputCurrencyControlProps,
-  ComboboxControl,
-  type IComboboxControlProps
-} from './formControlElements'

package/lib/shared/ui/modal/Modal.tsx

@@ -1,68 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { createPortal } from 'react-dom'
-import { AnimatePresence, motion } from 'framer-motion'
-import { modalContentAnimation, modalOverlayAnimation } from './model/helpers'
-import { type IModalHeaderProps, ModalHeader, type TModalHeaderClasses } from './ui/ModalHeader'
-import { cn } from '$/shared/utils'
-
-type IModalClasses = TModalHeaderClasses & {
-  overlay: string
-  modal: string
-  content: string
-}
-
-export interface IModalProps extends IModalHeaderProps {
-  children: React.ReactElement
-  isModalOpen: boolean
-  classes?: Partial<IModalClasses>
-  isPortal?: boolean
-  portalContainer?: HTMLElement
-}
-
-//
-
-export const Modal = ({
-  title,
-  children,
-  isModalOpen,
-  isPortal = true,
-  portalContainer = globalThis?.document?.body,
-  closeModal,
-  classes
-}: IModalProps) => {
-  const modalBody = (
-    <AnimatePresence>
-      {isModalOpen && (
-        <motion.div
-          tabIndex={-1}
-          onClick={closeModal}
-          className={cn(
-            'fixed inset-0 z-1000 flex h-screen w-screen items-center justify-center bg-color-overlay',
-            classes?.overlay
-          )}
-          onKeyDown={(event) => {
-            if (event.key === 'Escape') {
-              closeModal()
-            }
-          }}
-          {...modalOverlayAnimation}
-        >
-          <motion.div
-            onClick={(event) => event.stopPropagation()}
-            className={cn(
-              'w-full max-w-[600px] rounded-md bg-color-white px-4 py-6 shadow-sm desktop:px-6 desktop:py-8',
-              classes?.modal
-            )}
-            {...modalContentAnimation}
-          >
-            <ModalHeader title={title} closeModal={closeModal} classes={classes} />
-            <div className={cn('mt-4', classes?.content)}>{children}</div>
-          </motion.div>
-        </motion.div>
-      )}
-    </AnimatePresence>
-  )
-  return <>{isPortal ? createPortal(modalBody, portalContainer) : modalBody}</>
-}

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

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

package/lib/shared/ui/modal/model/helpers.ts

@@ -1,13 +0,0 @@
-export const modalOverlayAnimation = {
-  initial: { opacity: 0 },
-  animate: { opacity: 1 },
-  exit: { opacity: 0 },
-  transition: { duration: 0.3, ease: 'easeInOut' }
-}
-
-export const modalContentAnimation = {
-  initial: { opacity: 0, scale: 0 },
-  animate: { opacity: 1, scale: 1 },
-  exit: { opacity: 0, scale: 0 },
-  transition: { duration: 0.3, ease: 'easeInOut' }
-}

package/lib/shared/ui/modal/ui/ModalHeader.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react'
-import { Heading } from '../../Heading'
-import { Icon } from '../../icon'
-import { cn } from '$/shared/utils'
-
-export type TModalHeaderClasses = {
-  header: string
-  title: string
-  icon: string
-}
-
-export interface IModalHeaderProps {
-  title?: string | React.ReactElement
-  closeModal: () => void
-  classes?: Partial<TModalHeaderClasses>
-}
-
-export const ModalHeader = ({ title, closeModal, classes }: IModalHeaderProps) => {
-  return (
-    <div className={cn('flex items-start justify-between gap-4', classes?.header)}>
-      {title && (
-        <Heading as='h3' className={cn('flex-1 text-color-dark', classes?.title)}>
-          {title}
-        </Heading>
-      )}
-      <Icon
-        onClick={closeModal}
-        name='general/close'
-        className={cn('size-8 cursor-pointer text-icon-dark-hover', classes?.icon)}
-      />
-    </div>
-  )
-}

package/lib/shared/ui/notification/Notification.tsx

@@ -1,31 +0,0 @@
-import { type ReactElement } from 'react'
-import toast, { type Toast } from 'react-hot-toast'
-import { CustomToast } from './ui/CustomToast'
-
-export interface INotificationProps {
-  duration?: number
-  intent: 'info' | 'error'
-  text: string
-  customIcon?: ReactElement
-  content?: ReactElement
-  closure?: boolean
-}
-
-const renderToast = (props: INotificationProps) => {
-  switch (props.intent) {
-    case 'info':
-      return toast.custom((toastOptions: Toast) => <CustomToast {...toastOptions} {...props} />, {
-        duration: props.duration ?? 5000
-      })
-    case 'error':
-      return toast.custom((toastOptions: Toast) => <CustomToast {...toastOptions} {...props} />, {
-        duration: props.duration ?? 10000
-      })
-    default:
-      return null
-  }
-}
-
-export const Notification = (props: INotificationProps) => {
-  return renderToast(props)
-}

package/lib/shared/ui/notification/ui/CustomToast.tsx

@@ -1,42 +0,0 @@
-import toast, { type Toast } from 'react-hot-toast'
-import { cva, type VariantProps } from 'class-variance-authority'
-import type { INotificationProps } from '../Notification'
-import { Icon } from '$/shared/ui'
-import { cn } from '$/shared/utils'
-
-const toastContainerConfig = cva(
-  'flex justify-between items-center gap-4 shadow-sm p-4 rounded-sm max-w-[328px] desktop:max-w-[576px]',
-  {
-    variants: {
-      intent: {
-        info: 'bg-color-footer text-color-white',
-        error: 'bg-color-secondary-default text-color-white'
-      }
-    },
-    defaultVariants: {
-      intent: 'info'
-    }
-  }
-)
-
-type TContainerConfig = VariantProps<typeof toastContainerConfig>
-export type ICustomToastProps = INotificationProps & TContainerConfig & Toast
-
-export const CustomToast = ({ intent, text, customIcon, closure = true, content, id }: ICustomToastProps) => {
-  return (
-    <div className={cn(toastContainerConfig({ intent }))}>
-      <div className='flex items-center gap-2'>
-        <span className='size-6'>{customIcon}</span>
-        <div className='desk-body-regular-m text-color-white'>{text}</div>
-      </div>
-
-      <div className='flex items-center gap-6'>
-        {content}
-
-        {closure && (
-          <Icon onClick={() => toast.dismiss(id)} name='general/close' className='size-5 cursor-pointer text-icon-white' />
-        )}
-      </div>
-    </div>
-  )
-}

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

@@ -1,74 +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 TPopoverClasses = {
-  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<TPopoverClasses>
-  headLine?: string
-}
-
-export const Popover = ({
-  triggerElement,
-  classes,
-  sideOffset = 4,
-  alignOffset,
-  align,
-  side,
-  defaultOpen = false,
-  avoidCollisions = true,
-  headLine,
-  children,
-  arrowPadding,
-  ...contentProps
-}: IPopoverProps) => {
-  return (
-    <PopoverPrimitive.Root defaultOpen={defaultOpen}>
-      <div className='flex w-max items-center gap-2'>
-        <h3 className='text-[24px] font-bold'>{headLine}</h3>
-        <PopoverPrimitive.Trigger className={cn('cursor-pointer', classes?.trigger)} asChild>
-          {triggerElement}
-        </PopoverPrimitive.Trigger>
-      </div>
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-          className={cn(
-            'desk-body-regular-m flex w-64 items-start gap-2 rounded-sm bg-color-white p-4 shadow-sm',
-            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-0 outline-transparent'>
-            <Icon name='general/close' className='size-4 cursor-pointer text-icon-blue-grey-600' />
-          </PopoverPrimitive.Close>
-          <PopoverPrimitive.Arrow width={12} height={6} className={cn('fill-white', classes?.arrow)} />
-        </PopoverPrimitive.Content>
-      </PopoverPrimitive.Portal>
-    </PopoverPrimitive.Root>
-  )
-}

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

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

package/lib/shared/ui/providers/NotificationProvider.tsx

@@ -1,29 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-import toast, { Toaster, useToasterStore } from 'react-hot-toast'
-
-export interface INotificationProviderProps {
-  maxToastViewLimit?: number
-  toastDuration?: number
-}
-
-export const NotificationProvider = ({ maxToastViewLimit = 2, toastDuration = 5000 }: INotificationProviderProps) => {
-  const { toasts } = useToasterStore()
-
-  useEffect(() => {
-    toasts
-      .filter((t) => t.visible)
-      .filter((_, i) => i >= maxToastViewLimit)
-      .forEach((t) => toast.dismiss(t.id))
-  }, [maxToastViewLimit, toasts])
-
-  return (
-    <Toaster
-      position='top-center'
-      toastOptions={{
-        duration: toastDuration
-      }}
-    />
-  )
-}

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

@@ -1,144 +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 pb-6 desktop:desk-title-bold-s', 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(
-                  'mob-body-regular-l border-b border-warm-grey-200 py-4 desktop:desk-body-regular-l',
-                  classes?.tableTitleRow
-                )}
-              >
-                {title}
-              </li>
-            ))}
-          </ul>
-
-          <ul className={cn('mb-4 flex flex-col', classes?.tableBodyContainer)}>
-            {tableRows.map((row, index) => (
-              <li key={index} className={cn(itemTableConfig({ columnCount, titlesExist }), classes?.tableBodyRow)}>
-                {row.map((ceil, index) => (
-                  <p key={index} 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
-      })
-    }
-  })