@scbt-ecom/ui 0.4.0 → 0.4.2

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

@@ -0,0 +1,177 @@
+export interface SpritesMap {
+  arrows: 'arrowCircle' | 'arrowLink' | 'arrowRight'
+  brandLogos: 'logoBlack' | 'logoBusiness' | 'logoGray' | 'logoInsurance' | 'logoMain' | 'logoWhite'
+  files: 'border' | 'borderError' | 'documentFilled' | 'documentOutline' | 'upload'
+  general: 'calendar' | 'check' | 'close' | 'edit' | 'hiddenEye' | 'plus' | 'showEye'
+  info: 'warningCircle'
+  social: 'classmates' | 'telegram' | 'vk'
+}
+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: {
+      border: {
+        viewBox: '0 0 476 64',
+        width: 476,
+        height: 64
+      },
+      borderError: {
+        viewBox: '0 0 476 64',
+        width: 476,
+        height: 64
+      },
+      documentFilled: {
+        viewBox: '0 0 22 28',
+        width: 22,
+        height: 28
+      },
+      documentOutline: {
+        viewBox: '0 0 22 28',
+        width: 22,
+        height: 28
+      },
+      upload: {
+        viewBox: '0 0 23 20',
+        width: 23,
+        height: 20
+      }
+    }
+  },
+  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
+      },
+      edit: {
+        viewBox: '0 0 19 19',
+        width: 19,
+        height: 19
+      },
+      hiddenEye: {
+        viewBox: '0 0 20 18',
+        width: 20,
+        height: 18
+      },
+      plus: {
+        viewBox: '0 0 16 16',
+        width: 16,
+        height: 16
+      },
+      showEye: {
+        viewBox: '0 0 20 14',
+        width: 20,
+        height: 14
+      }
+    }
+  },
+  info: {
+    filePath: 'info.svg',
+    items: {
+      warningCircle: {
+        viewBox: '0 0 20 20',
+        width: 20,
+        height: 20
+      }
+    }
+  },
+  social: {
+    filePath: 'social.svg',
+    items: {
+      classmates: {
+        viewBox: '0 0 9 15',
+        width: 9,
+        height: 15
+      },
+      telegram: {
+        viewBox: '0 0 15 13',
+        width: 15,
+        height: 13
+      },
+      vk: {
+        viewBox: '0 0 16 9',
+        width: 16,
+        height: 9
+      }
+    }
+  }
+}

package/lib/shared/ui/index.ts

@@ -0,0 +1,68 @@
+// # 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

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

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

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

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

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

@@ -0,0 +1,31 @@
+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/index.ts

@@ -0,0 +1 @@
+export { Notification, type INotificationProps } from './Notification'

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

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

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

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

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

@@ -0,0 +1,29 @@
+'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/providers/index.ts

@@ -0,0 +1 @@
+export { NotificationProvider, type INotificationProviderProps } from './NotificationProvider'

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

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