@scbt-ecom/ui 0.0.30 → 0.0.32

package/lib/shared/ui/accordion/ui/AccordionHeader.tsx

@@ -1,35 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Header, Trigger } from '@radix-ui/react-accordion'
-import { Icon } from '../../icon/Icon'
-import type { TAccordionHeaderClasses } from '../model/types'
-import { cn } from '$/shared/utils'
-
-interface IAccordionHeaderProps {
-  children?: React.ReactElement | string
-  classes?: Partial<TAccordionHeaderClasses>
-}
-
-export const AccordionHeader = React.forwardRef<HTMLButtonElement, IAccordionHeaderProps>(
-  ({ children, classes, ...props }, forwardedRef) => (
-    <Header className={cn('rounded-sm bg-color-primary-light-default', classes?.header)}>
-      <Trigger
-        ref={forwardedRef}
-        className={cn(
-          'outline-0 bg-color-transparent flex items-center justify-between gap-5 w-full cursor-pointer py-5 px-6 border border-transparent border-solid rounded-sm focus:border-primary-default group',
-          classes?.trigger
-        )}
-        {...props}
-      >
-        <div className={cn('desk-body-medium-l text-color-dark', classes?.inner)}>{children}</div>
-        <Icon
-          name='arrows/arrowCircle'
-          className={cn('group-data-[state=open]:rotate-180 transition-all text-icon-blue-grey-800 size-8', classes?.icon)}
-        />
-      </Trigger>
-    </Header>
-  )
-)
-
-AccordionHeader.displayName = 'AccordionHeader'

package/lib/shared/ui/brandLogos.tsx

@@ -1,14 +0,0 @@
-import type { ReactElement } from 'react'
-import { Icon } from './icon/Icon'
-
-export type TBrandLogoVariant = 'main' | 'white' | 'gray' | 'black' | 'business' | 'insurance'
-type TBrandLogosVariants = Record<TBrandLogoVariant, ReactElement>
-
-export const brandLogos: TBrandLogosVariants = {
-  main: <Icon name='brandLogos/logoMain' />,
-  white: <Icon name='brandLogos/logoWhite' />,
-  gray: <Icon name='brandLogos/logoGray' />,
-  black: <Icon name='brandLogos/logoBlack' />,
-  business: <Icon name='brandLogos/logoBusiness' />,
-  insurance: <Icon name='brandLogos/logoInsurance' />
-} as const

package/lib/shared/ui/button/Button.tsx

@@ -1,111 +0,0 @@
-import { type ComponentProps, forwardRef, type ReactElement } from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { Loader } from '../Loader'
-import { setButtonLoaderIntent } from './model/helpers'
-import { cn } from '$/shared/utils'
-
-const buttonConfig = cva(
-  'relative flex items-center justify-center gap-4 cursor-pointer rounded-sm w-[216px] outline-offset-4 outline-transparent outline-2 desk-body-regular-l transition duration-12 active:scale-[0.97] disabled:pointer-events-none',
-  {
-    variants: {
-      intent: {
-        primary:
-          'bg-color-primary-default text-color-white outline-offset-[3px]  hover:bg-color-primary-hover  active:bg-color-primary-hover  focus:bg-color-primary-default focus:outline-primary-focus  disabled:bg-color-primary-disabled',
-        secondary:
-          'bg-transparent text-color-primary-default border border-solid border-primary-default hover:bg-color-primary-tr-hover active:bg-color-primary-tr-pressed active:border-primary-hover  focus:outline-primary-focus  focus:bg-color-primary-tr-focus disabled:bg-color-blue-grey-200 disabled:text-color-primary-disabled disabled:border-transparent',
-        ghost:
-          'bg-transparent text-color-primary-default hover:bg-color-primary-tr-hover hover:text-color-primary-hover focus:bg-color-primary-tr-focus focus:outline-primary-focus active:bg-color-primary-tr-pressed active:text-color-primary-hover disabled:text-color-primary-disabled disabled:bg-transparent',
-        red: 'bg-color-secondary-default text-color-white outline-offset-[3px] hover:bg-color-secondary-hover disabled:bg-color-secondary-disabled active:bg-color-secondary-hover focus:bg-color-secondary-default focus:outline-primary-focus'
-      },
-      size: {
-        sm: 'h-10',
-        md: 'h-12',
-        lg: 'h-14'
-      },
-      textFormat: {
-        capitalize: 'capitalize',
-        uppercase: 'uppercase',
-        lowercase: 'lowercase',
-        initial: 'initial'
-      },
-      isLoading: {
-        true: '',
-        false: ''
-      }
-    },
-    compoundVariants: [
-      {
-        intent: 'primary',
-        isLoading: true,
-        class: '!bg-color-primary-default'
-      },
-      {
-        intent: 'secondary',
-        isLoading: true,
-        class: '!bg-color-transparent  !border-primary-hover'
-      },
-      {
-        intent: 'ghost',
-        isLoading: true,
-        class: '!bg-color-blue-grey-200'
-      },
-      {
-        intent: 'red',
-        isLoading: true,
-        class: '!bg-color-secondary-default'
-      }
-    ],
-    defaultVariants: {
-      intent: 'primary',
-      size: 'md',
-      textFormat: 'initial'
-    }
-  }
-)
-
-type TButtonConfig = VariantProps<typeof buttonConfig>
-export type TButtonIntents = 'primary' | 'secondary' | 'ghost' | 'red'
-export interface IButtonProps extends ComponentProps<'button'>, TButtonConfig {
-  iconLeft?: ReactElement
-  iconRight?: ReactElement
-  isLoading?: boolean
-}
-
-export const Button = forwardRef<HTMLButtonElement, IButtonProps>(
-  (
-    {
-      intent,
-      size,
-      className,
-      children,
-      type = 'button',
-      iconLeft,
-      iconRight,
-      disabled = false,
-      isLoading = false,
-      textFormat,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <button
-        ref={ref}
-        type={type}
-        disabled={disabled || isLoading}
-        className={cn(buttonConfig({ intent, size, textFormat, isLoading }), className)}
-        {...props}
-      >
-        {isLoading ? (
-          <Loader size='sm' intent={setButtonLoaderIntent(intent!)} />
-        ) : (
-          <>
-            {iconLeft && <span className='size-5 flex items-center justify-center'>{iconLeft}</span>}
-            {children}
-            {iconRight && <span className='size-5 flex items-center justify-center'>{iconRight}</span>}
-          </>
-        )}
-      </button>
-    )
-  }
-)

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

@@ -1 +0,0 @@
-export { Button, type IButtonProps } from './Button'

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

@@ -1,16 +0,0 @@
-import type { TButtonIntents } from '../Button'
-
-export const setButtonLoaderIntent = (intent: TButtonIntents) => {
-  switch (intent) {
-    case 'ghost':
-    case 'secondary':
-      return 'secondary'
-
-    case 'primary':
-    case 'red':
-      return 'primary'
-
-    default:
-      return intent
-  }
-}

package/lib/shared/ui/calendar/Calendar.tsx

@@ -1,228 +0,0 @@
-import { useCallback, useId, useRef } from 'react'
-import { DayPicker, type DayPickerProps, type NavProps, type PropsRange, type PropsSingle } from 'react-day-picker'
-import { Controller, type FieldValues, useFormContext } from 'react-hook-form'
-import { PatternFormat } from 'react-number-format'
-import { ru } from 'date-fns/locale'
-import { AnimatePresence, motion } from 'framer-motion'
-import { type TAdditionalInputClassesWithAttachment, type TControlledInputProps } from '../formControlElements/model'
-import { FieldAttachment, FieldContainer, FieldWrapper, MessageView } from '../formControlElements/ui'
-import { calendarAnimation } from './model/animation'
-import { dayPickerClasses } from './model/classes'
-import { useCalendarDropdowns, useDatePicker } from './model/hooks'
-import { CalendarHeader, Weekdays } from './ui'
-import { useClickOutside } from '$/shared/hooks'
-import { cn } from '$/shared/utils'
-
-// https://github.com/gpbl/react-day-picker/discussions/1570  - issue
-
-type TCalendarClasses = Partial<TAdditionalInputClassesWithAttachment> & {
-  root: string
-  wrapper: string
-  calendar: string
-}
-export type TCalendarMode = 'range' | 'single'
-type TCalendarCommonProps = PropsSingle | PropsRange
-
-function isSingleMode(props: TCalendarCommonProps): props is PropsSingle {
-  return props.mode === 'single'
-}
-
-export type ICalendarProps<T extends FieldValues> = TControlledInputProps<T> &
-  TCalendarCommonProps &
-  DayPickerProps & {
-    maskFormat?: string
-    mask?: string | string[]
-    allowEmptyFormatting?: boolean
-    classes?: Partial<TCalendarClasses>
-    disabled?: boolean
-    onClickIcon?: (...args: unknown[]) => unknown
-  }
-
-export const Calendar = <T extends FieldValues>(props: ICalendarProps<T>) => {
-  const {
-    control,
-    label,
-    helperText,
-    showOutsideDays = true,
-    maskFormat = '##.##.####',
-    allowEmptyFormatting = false,
-    mask = '',
-    size = 'full',
-    classes,
-    disabled,
-    icon,
-    badge,
-    swapPosition,
-    onClickIcon
-  } = props
-  const { setValue } = useFormContext()
-  const inputId = useId()
-  const calendarWrapperRef = useRef<HTMLDivElement>(null)
-  const { toggleCalendar, isCalendarOpen, calendarSetter, isMonthOpen, toggleMonthDropdown, isYearsOpen, toggleYearDropdown } =
-    useCalendarDropdowns()
-
-  const {
-    formattedControlledDate,
-    controlledDate,
-    onClickDay,
-    onChangeMonth,
-    onSelectMonth,
-    onSelectYear,
-    onBlurInput,
-    onClickPrev,
-    onClickNext
-  } = useDatePicker()
-  useClickOutside(calendarWrapperRef, () => calendarSetter(false))
-
-  const CaptionLabelComponent = useCallback(() => <></>, [])
-  const WeekComponent = useCallback(() => <Weekdays />, [])
-  const CalendarHeaderComponent = useCallback(
-    (onControlledChange: (...event: unknown[]) => void, navProps: NavProps) => {
-      return (
-        <CalendarHeader
-          controlledDate={controlledDate}
-          isMonthOpen={isMonthOpen}
-          toggleMonthDropdown={toggleMonthDropdown}
-          isYearsOpen={isYearsOpen}
-          toggleYearDropdown={toggleYearDropdown}
-          onSelectMonth={(month: number) => onSelectMonth(month, onControlledChange)}
-          onSelectYear={(year: number) => onSelectYear(year, onControlledChange)}
-          onClickPrev={(event) => onClickPrev(event, navProps.onPreviousClick)}
-          onClickNext={(event) => onClickNext(event, navProps.onNextClick)}
-          {...navProps}
-        />
-      )
-    },
-    [
-      controlledDate,
-      isMonthOpen,
-      toggleMonthDropdown,
-      isYearsOpen,
-      toggleYearDropdown,
-      onSelectMonth,
-      onSelectYear,
-      onClickPrev,
-      onClickNext
-    ]
-  )
-
-  return (
-    <Controller
-      control={control}
-      name={props.name}
-      render={({ field: { onChange, value }, fieldState: { error } }) => {
-        return (
-          <div className={cn('relative', classes?.root)} ref={calendarWrapperRef}>
-            <>{value}</>
-            <AnimatePresence>
-              {isCalendarOpen && (
-                <motion.div
-                  className={cn(
-                    'absolute z-30 bottom-[-350px] right-0 invisible',
-                    { 'visible ': isCalendarOpen },
-                    classes?.wrapper
-                  )}
-                  {...calendarAnimation}
-                >
-                  {isSingleMode(props) ? (
-                    <>
-                      <DayPicker
-                        onDayClick={(date: Date) => onClickDay(date, onChange, 'single', () => calendarSetter(false))}
-                        month={formattedControlledDate}
-                        onMonthChange={(date: Date) => onChangeMonth(date, onChange)}
-                        pagedNavigation
-                        locale={ru}
-                        showOutsideDays={showOutsideDays}
-                        // disabled={{ dayOfWeek: [0, 6] }}
-                        // disabled={{ before: new Date() }}
-                        className={cn('w-[312px] h-[368px] p-4 shadow-sm relative bg-color-white', classes?.calendar)}
-                        classNames={dayPickerClasses()}
-                        components={{
-                          Weekdays: WeekComponent,
-                          CaptionLabel: CaptionLabelComponent,
-                          Nav: (navProps) => CalendarHeaderComponent(onChange, navProps)
-                        }}
-                        {...props}
-                      />
-                    </>
-                  ) : (
-                    <>
-                      <DayPicker
-                        onDayClick={(date: Date) => onClickDay(date, onChange, 'range', () => calendarSetter(false))}
-                        month={formattedControlledDate}
-                        onMonthChange={(date: Date) => onChangeMonth(date, onChange)}
-                        pagedNavigation
-                        locale={ru}
-                        showOutsideDays={showOutsideDays}
-                        // disabled={{ dayOfWeek: [0, 6] }}
-                        // disabled={{ before: new Date() }}
-                        className={cn('w-[312px] h-[368px] p-4 shadow-sm relative bg-color-white', classes?.calendar)}
-                        classNames={dayPickerClasses(true)}
-                        components={{
-                          Weekdays: WeekComponent,
-                          CaptionLabel: CaptionLabelComponent,
-                          Nav: (navProps) => CalendarHeaderComponent(onChange, navProps)
-                        }}
-                        {...props}
-                      />
-                    </>
-                  )}
-                </motion.div>
-              )}
-            </AnimatePresence>
-            <FieldContainer size={size} classes={classes}>
-              <FieldWrapper
-                fieldId={inputId}
-                label={label}
-                classes={classes}
-                disabled={disabled}
-                value={value}
-                error={!!error?.message}
-              >
-                <>
-                  <PatternFormat
-                    id={inputId}
-                    value={value}
-                    name={props.name}
-                    format={maskFormat}
-                    allowEmptyFormatting={allowEmptyFormatting}
-                    mask={mask}
-                    className={cn(
-                      'w-full h-[56px] desk-body-regular-l text-color-dark transition-all bg-color-transparent outline-none pt-5 px-4 rounded-md',
-                      classes?.input
-                    )}
-                    onFocus={() => calendarSetter(true)}
-                    onBlur={(event) => {
-                      onBlurInput(event.target.value, onChange)
-                      if (!event.target.value) {
-                        setValue(props.name as string, '')
-                      }
-                    }}
-                  />
-                  <FieldAttachment
-                    badge={badge}
-                    icon={icon}
-                    error={!!error?.message}
-                    classes={classes}
-                    swapPosition={swapPosition}
-                    onClickIcon={() => toggleCalendar(onClickIcon)}
-                    onKeyDownIcon={(event) => {
-                      if (event.key === 'Enter' || event.key === ' ') {
-                        toggleCalendar()
-                      }
-                    }}
-                  />
-                </>
-              </FieldWrapper>
-              <MessageView
-                className={cn(classes?.message)}
-                intent={error?.message ? 'error' : 'simple'}
-                text={error?.message || helperText}
-              />
-            </FieldContainer>
-          </div>
-        )
-      }}
-    />
-  )
-}

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

@@ -1,231 +0,0 @@
-export { Calendar, type ICalendarProps } from './Calendar'
-// import { useCallback, useId, useRef } from 'react'
-// import { DayPicker, type DayPickerProps, type NavProps, type PropsMulti, type PropsSingle } from 'react-day-picker'
-// import { Controller, type FieldValues, useFormContext } from 'react-hook-form'
-// import { PatternFormat } from 'react-number-format'
-// import { ru } from 'date-fns/locale'
-// import { AnimatePresence, motion } from 'framer-motion'
-// import type { TAdditionalInputClassesWithAttachment, TControlledInputProps } from '../model'
-// import { FieldAttachment, FieldContainer, FieldWrapper, MessageView } from '../ui'
-// import { calendarAnimation } from './model/animation'
-// import { useCalendarDropdowns, useDatePicker } from './model/hooks'
-// import { CalendarHeader, Weekdays } from './ui'
-// import { useClickOutside } from '$/shared/hooks'
-// import { cn } from '$/shared/utils'
-
-// // https://github.com/gpbl/react-day-picker/discussions/1570  - issue
-
-// type TCalendarClasses = Partial<TAdditionalInputClassesWithAttachment> & {
-//   root: string
-//   wrapper: string
-//   calendar: string
-// }
-
-// type AppProps = PropsSingle | PropsMulti
-
-// // Type guard to check if props is for single mode
-// function isSingleMode(props: AppProps): props is PropsSingle {
-//   return props.mode === 'single'
-// }
-
-// export type ICalendarControlProps<T extends FieldValues> = TControlledInputProps<T> &
-//   Omit<DayPickerProps, 'mode'> & {
-//     maskFormat?: string
-//     mask?: string | string[]
-//     allowEmptyFormatting?: boolean
-//     classes?: Partial<TCalendarClasses>
-//     disabled?: boolean
-//     onClickIcon?: (...args: unknown[]) => unknown
-//     mode: string
-//   }
-
-// export const CalendarControl = <T extends FieldValues>({
-//   control,
-//   label,
-//   helperText,
-//   showOutsideDays = true,
-//   maskFormat = '##.##.####',
-//   allowEmptyFormatting = false,
-//   mask = '',
-//   size = 'full',
-//   classes,
-//   disabled,
-//   icon,
-//   badge,
-//   swapPosition,
-//   onClickIcon,
-//   mode = 'single',
-//   ...props
-// }: ICalendarControlProps<T>) => {
-//   const { setValue } = useFormContext()
-//   const inputId = useId()
-//   const calendarWrapperRef = useRef<HTMLDivElement>(null)
-//   const { toggleCalendar, isCalendarOpen, calendarSetter, isMonthOpen, toggleMonthDropdown, isYearsOpen, toggleYearDropdown } =
-//     useCalendarDropdowns()
-
-//   const {
-//     formattedControlledDate,
-//     controlledDate,
-//     onClickDay,
-//     onChangeMonth,
-//     onSelectMonth,
-//     onSelectYear,
-//     onBlurInput,
-//     onClickPrev,
-//     onClickNext
-//   } = useDatePicker()
-//   useClickOutside(calendarWrapperRef, () => calendarSetter(false))
-
-//   const CaptionLabelComponent = useCallback(() => <></>, [])
-//   const WeekComponent = useCallback(() => <Weekdays />, [])
-//   const CalendarHeaderComponent = useCallback(
-//     (onControlledChange: (...event: unknown[]) => void, navProps: NavProps) => {
-//       return (
-//         <CalendarHeader
-//           controlledDate={controlledDate}
-//           isMonthOpen={isMonthOpen}
-//           toggleMonthDropdown={toggleMonthDropdown}
-//           isYearsOpen={isYearsOpen}
-//           toggleYearDropdown={toggleYearDropdown}
-//           onSelectMonth={(month: number) => onSelectMonth(month, onControlledChange)}
-//           onSelectYear={(year: number) => onSelectYear(year, onControlledChange)}
-//           onClickPrev={(event) => onClickPrev(event, navProps.onPreviousClick)}
-//           onClickNext={(event) => onClickNext(event, navProps.onNextClick)}
-//           {...navProps}
-//         />
-//       )
-//     },
-//     [
-//       controlledDate,
-//       isMonthOpen,
-//       toggleMonthDropdown,
-//       isYearsOpen,
-//       toggleYearDropdown,
-//       onSelectMonth,
-//       onSelectYear,
-//       onClickPrev,
-//       onClickNext
-//     ]
-//   )
-
-//   return (
-//     <Controller
-//       control={control}
-//       name={props.name}
-//       render={({ field: { onChange, value }, fieldState: { error } }) => {
-//         return (
-//           <div className={cn('relative', classes?.root)} ref={calendarWrapperRef}>
-//             <AnimatePresence>
-//               {isCalendarOpen && (
-//                 <motion.div
-//                   className={cn(
-//                     'absolute z-30 bottom-[-350px] right-0 invisible',
-//                     { 'visible ': isCalendarOpen },
-//                     classes?.wrapper
-//                   )}
-//                   {...calendarAnimation}
-//                 >
-//                   <DayPicker
-//                     mode={mode}
-//                     onDayClick={(date: Date) => onClickDay(date, onChange, () => calendarSetter(false))}
-//                     month={formattedControlledDate}
-//                     onMonthChange={(date: Date) => onChangeMonth(date, onChange)}
-//                     pagedNavigation
-//                     locale={ru}
-//                     // disabled={{ dayOfWeek: [0, 6] }}
-//                     // disabled={{ before: new Date() }}
-//                     showOutsideDays={showOutsideDays}
-//                     className={cn('w-[312px] h-[368px] p-4 shadow-sm relative bg-color-white', classes?.calendar)}
-//                     classNames={{
-//                       weekday: 'size-10',
-//                       months: '',
-//                       month: 'pt-2 text-color-dark mob-body-medium-m',
-//                       caption: 'flex justify-center pt-1 items-center',
-//                       today:
-//                         'text-color-primary-default relative before:content-[" "] before:w-4 before:h-[2px] before:rounded-[2px] before:bg-icon-primary-default before:absolute before:bottom-1 before:left-1/2 before:-translate-x-1/2',
-//                       outside: 'text-color-tetriary',
-//                       disabled: 'text-color-disabled',
-//                       hidden: '',
-//                       selected: 'bg-color-primary-default text-color-white',
-//                       range_middle: '!bg-color-primary-tr-hover !text-color-dark [&_button]:!h-[32px]',
-//                       range_end: 'bg-color-negative',
-//                       day: 'text-color-dark mob-body-regular-m',
-//                       day_button:
-//                         'size-10 text-center cursor-pointer border border-solid border-transparent rounded-sm transition-all hover:bg-color-primary-tr-hover hover:border-primary-default',
-//                       //--------------------------------
-//                       nav: 'space-x-1 flex items-center',
-//                       nav_button: 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-//                       nav_button_previous: 'absolute left-1',
-//                       nav_button_next: 'absolute right-1',
-//                       table: 'w-full border-collapse space-y-1',
-//                       head_row: 'flex',
-//                       head_cell: 'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
-//                       row: 'flex w-full mt-2',
-//                       ...classes
-//                     }}
-//                     components={{
-//                       Weekdays: WeekComponent,
-//                       CaptionLabel: CaptionLabelComponent,
-//                       Nav: (navProps) => CalendarHeaderComponent(onChange, navProps)
-//                     }}
-//                     {...props}
-//                   />
-//                 </motion.div>
-//               )}
-//             </AnimatePresence>
-//             <FieldContainer size={size} classes={classes}>
-//               <FieldWrapper
-//                 fieldId={inputId}
-//                 label={label}
-//                 classes={classes}
-//                 disabled={disabled}
-//                 value={value}
-//                 error={!!error?.message}
-//               >
-//                 <>
-//                   <PatternFormat
-//                     id={inputId}
-//                     value={value}
-//                     name={props.name}
-//                     format={maskFormat}
-//                     allowEmptyFormatting={allowEmptyFormatting}
-//                     mask={mask}
-//                     className={cn(
-//                       'w-full h-[56px] desk-body-regular-l text-color-dark transition-all bg-color-transparent outline-none pt-5 px-4 rounded-md',
-//                       classes?.input
-//                     )}
-//                     onFocus={() => calendarSetter(true)}
-//                     onBlur={(event) => {
-//                       onBlurInput(event.target.value, onChange)
-//                       if (!event.target.value) {
-//                         setValue(props.name as string, '')
-//                       }
-//                     }}
-//                   />
-//                   <FieldAttachment
-//                     badge={badge}
-//                     icon={icon}
-//                     error={!!error?.message}
-//                     classes={classes}
-//                     swapPosition={swapPosition}
-//                     onClickIcon={() => toggleCalendar(onClickIcon)}
-//                     onKeyDownIcon={(event) => {
-//                       if (event.key === 'Enter' || event.key === ' ') {
-//                         toggleCalendar()
-//                       }
-//                     }}
-//                   />
-//                 </>
-//               </FieldWrapper>
-//               <MessageView
-//                 className={cn(classes?.message)}
-//                 intent={error?.message ? 'error' : 'simple'}
-//                 text={error?.message || helperText}
-//               />
-//             </FieldContainer>
-//           </div>
-//         )
-//       }}
-//     />
-//   )
-// }