@scbt-ecom/ui 0.4.2 → 0.4.4

package/lib/shared/ui/formControlElements/calendarControl/CalendarControl.tsx

@@ -1,178 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Controller, type FieldValues, type Path, type PathValue, type UseFormSetValue, type UseFormWatch } from 'react-hook-form'
-import { PatternFormat } from 'react-number-format'
-import { format } from 'date-fns'
-import { AnimatePresence, motion } from 'framer-motion'
-import { type TControlledInputProps } from '../model'
-import { FieldAttachment, FieldContainer, FieldWrapper, MessageView } from '../ui'
-import { useCalendar, useCalendarDropdowns } from './hooks'
-import { calendarAnimation } from './model/helpers'
-import type { TCalendarClasses } from './model/types'
-import { DaysOfMonth, DaysOfWeek, Header, Navigation } from './ui'
-import { useClickOutside } from '$/shared/hooks'
-import { cn } from '$/shared/utils'
-
-export interface ICalendarControlProps<T extends FieldValues> extends TControlledInputProps<T> {
-  maskFormat?: string
-  mask?: string | string[]
-  allowEmptyFormatting?: boolean
-  classes?: Partial<TCalendarClasses>
-  disabled?: boolean
-  onClickIcon?: (...args: unknown[]) => unknown
-  defaultValue?: string
-  setValue: UseFormSetValue<T>
-  watch: UseFormWatch<T>
-}
-
-const today = format(new Date(), 'dd.MM.yyyy')
-
-export const CalendarControl = <T extends FieldValues>({
-  control,
-  classes,
-  label,
-  disabled,
-  maskFormat = '##.##.####',
-  allowEmptyFormatting = false,
-  mask = '',
-  size = 'full',
-  helperText,
-  icon,
-  badge,
-  swapPosition,
-  onClickIcon,
-  defaultValue = today,
-  watch,
-  setValue,
-  ...props
-}: ICalendarControlProps<T>) => {
-  const inputId = React.useId()
-  const calendarValue = watch(props.name)
-
-  const calendarWrapperRef = React.useRef<HTMLDivElement | null>(null)
-  const {
-    memoDaysOfMonth,
-    firstDayOfMonth,
-    selectedDay,
-    selectedMonth,
-    selectedYear,
-    onSelectDay,
-    onSelectMonth,
-    onSelectYear,
-    onBlurInput,
-    onChangeMonth
-  } = useCalendar(defaultValue ?? calendarValue)
-  const { isCalendarOpen, toggleCalendar, calendarSetter, isMonthOpen, toggleMonthDropdown, isYearsOpen, toggleYearDropdown } =
-    useCalendarDropdowns()
-
-  useClickOutside(calendarWrapperRef, () => calendarSetter(false))
-
-  return (
-    <Controller
-      control={control}
-      name={props.name}
-      render={({ field: { onChange, value }, fieldState: { error } }) => {
-        return (
-          <div className={cn('relative w-full', classes?.rootWrapper)} ref={calendarWrapperRef}>
-            <AnimatePresence>
-              {isCalendarOpen && (
-                <motion.div
-                  {...calendarAnimation}
-                  className={cn(
-                    'invisible absolute bottom-[-370px] right-0 z-30 h-[368px] w-[312px] rounded-sm bg-color-white p-4 shadow-md',
-                    { visible: isCalendarOpen },
-                    classes?.calendarWrapper
-                  )}
-                >
-                  <div
-                    className={cn(
-                      'flex items-center justify-between border-b border-solid border-blue-grey-500 pb-2',
-                      classes?.calendarHeader
-                    )}
-                  >
-                    <Header
-                      isMonthOpen={isMonthOpen}
-                      isYearsOpen={isYearsOpen}
-                      month={selectedMonth}
-                      year={selectedYear}
-                      toggleMonthDropdown={toggleMonthDropdown}
-                      toggleYearDropdown={toggleYearDropdown}
-                      onSelectMonth={(month: number) => onSelectMonth(month, onChange)}
-                      onSelectYear={(year: number) => onSelectYear(year, onChange)}
-                      classes={classes}
-                    />
-                    <Navigation
-                      onClickPrevMonth={(event) => onChangeMonth(event, onChange, 'prev')}
-                      onClickNextMonth={(event) => onChangeMonth(event, onChange, 'next')}
-                      classes={classes}
-                    />
-                  </div>
-                  <DaysOfWeek classes={classes} />
-                  <DaysOfMonth
-                    daysList={memoDaysOfMonth}
-                    firstDayOfMonth={firstDayOfMonth}
-                    onSelectDay={(day) => onSelectDay(day, onChange)}
-                    selectedDay={+selectedDay}
-                    classes={classes}
-                  />
-                </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(
-                      'desk-body-regular-l h-[56px] w-full rounded-md bg-color-transparent px-4 pt-5 text-color-dark outline-none transition-all',
-                      classes?.input
-                    )}
-                    onFocus={() => calendarSetter(true)}
-                    onBlur={(event) => {
-                      onBlurInput(event.target.value, onChange)
-                      if (!event.target.value) {
-                        setValue(props.name, '' as PathValue<T, Path<T>>)
-                      }
-                    }}
-                  />
-                  <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}
-                disabled={disabled}
-              />
-            </FieldContainer>
-          </div>
-        )
-      }}
-    />
-  )
-}

package/lib/shared/ui/formControlElements/calendarControl/hooks/index.ts

@@ -1,2 +0,0 @@
-export { useCalendarDropdowns } from './useCalendarDropdowns'
-export { useCalendar } from './useCalendar'

package/lib/shared/ui/formControlElements/calendarControl/hooks/useCalendar.tsx

@@ -1,86 +0,0 @@
-'use client'
-
-import { useMemo, useState } from 'react'
-import { add, eachDayOfInterval, endOfMonth, endOfWeek, format, parse, startOfWeek } from 'date-fns'
-import { ru } from 'date-fns/locale'
-
-export const useCalendar = (calendarValue: string) => {
-  const [currentDate, setCurrentDate] = useState(calendarValue)
-  const [selectedDay, selectedMonth, selectedYear] = currentDate?.split('.') ?? ''
-
-  const formattedDate = format(new Date(+selectedYear, +selectedMonth - 1, +selectedDay), 'MMM-yyyy')
-  const firstDayOfMonth = parse(formattedDate, 'MMM-yyyy', new Date())
-
-  const daysOfMonth = eachDayOfInterval({
-    start: startOfWeek(firstDayOfMonth, { weekStartsOn: 1 }),
-    end: endOfWeek(endOfMonth(firstDayOfMonth))
-  })
-  const memoDaysOfMonth = useMemo(() => daysOfMonth, [daysOfMonth])
-
-  const formattedMonth = format(selectedMonth, 'MMMM', { locale: ru })
-
-  const onSelectDay = (day: Date, onChange: (...event: unknown[]) => void) => {
-    const updatedDate = format(day, 'dd.MM.yyyy')
-    onChange(updatedDate)
-    setCurrentDate(updatedDate)
-  }
-
-  const onSelectMonth = (month: number, onChange: (...event: unknown[]) => void) => {
-    const updatedDate = format(new Date(+selectedYear, +month, +selectedDay), 'dd.MM.yyyy')
-    onChange(updatedDate)
-    setCurrentDate(updatedDate)
-  }
-
-  const onSelectYear = (year: number, onChange: (...event: unknown[]) => void) => {
-    const updatedDate = format(new Date(+year, +selectedMonth - 1, +selectedDay), 'dd.MM.yyyy')
-    onChange(format(new Date(+year, +selectedMonth - 1, +selectedDay), 'dd.MM.yyyy'))
-    setCurrentDate(updatedDate)
-  }
-
-  const onChangeMonth = (
-    event: React.MouseEvent<HTMLButtonElement>,
-    onChange: (...event: unknown[]) => void,
-    mode: 'prev' | 'next'
-  ) => {
-    event.preventDefault()
-
-    switch (mode) {
-      case 'next':
-        const firstDayOfNextMonth = add(firstDayOfMonth, { months: 1 })
-        const updatedDateNext = format(firstDayOfNextMonth, 'dd.MM.yyyy')
-        onChange(updatedDateNext)
-        setCurrentDate(updatedDateNext)
-
-        break
-      case 'prev':
-        const firstDayOfPrevMonth = add(firstDayOfMonth, { months: -1 })
-        const updatedDatePrev = format(firstDayOfPrevMonth, 'dd.MM.yyyy')
-        onChange(updatedDatePrev)
-        setCurrentDate(updatedDatePrev)
-
-        break
-      default:
-        break
-    }
-  }
-
-  const onBlurInput = (inputValue: string, onChange: (...event: unknown[]) => void) => {
-    if (inputValue) {
-      onChange(inputValue)
-    }
-  }
-
-  return {
-    memoDaysOfMonth,
-    firstDayOfMonth,
-    selectedDay,
-    selectedMonth,
-    selectedYear,
-    formattedMonth,
-    onSelectDay,
-    onSelectMonth,
-    onSelectYear,
-    onBlurInput,
-    onChangeMonth
-  }
-}

package/lib/shared/ui/formControlElements/calendarControl/hooks/useCalendarDropdowns.ts

@@ -1,38 +0,0 @@
-import { useBoolean } from '$/shared/hooks'
-
-export const useCalendarDropdowns = () => {
-  const [isMonthOpen, monthsSetter] = useBoolean(false)
-  const [isYearsOpen, yearsSetter] = useBoolean(false)
-  const [isCalendarOpen, calendarSetter] = useBoolean(false)
-
-  const toggleCalendar = (onClickIcon?: (...args: unknown[]) => unknown) => {
-    calendarSetter()
-    if (onClickIcon) {
-      onClickIcon()
-    }
-  }
-
-  const toggleMonthDropdown = () => {
-    monthsSetter()
-    if (isYearsOpen) {
-      yearsSetter(false)
-    }
-  }
-
-  const toggleYearDropdown = () => {
-    yearsSetter()
-    if (isMonthOpen) {
-      monthsSetter(false)
-    }
-  }
-
-  return {
-    calendarSetter,
-    toggleCalendar,
-    isMonthOpen,
-    toggleMonthDropdown,
-    isYearsOpen,
-    toggleYearDropdown,
-    isCalendarOpen
-  }
-}

package/lib/shared/ui/formControlElements/calendarControl/model/helpers.ts

@@ -1,60 +0,0 @@
-import { type TDayOfWeek } from './types'
-
-export const capitalizeFirstLetter = (query: string): string => {
-  return query.charAt(0).toUpperCase() + query.substring(1)
-}
-
-export const colStartClasses = [
-  'col-start-1',
-  'col-start-2',
-  'col-start-3',
-  'col-start-4',
-  'col-start-5',
-  'col-start-6',
-  'col-start-7'
-]
-
-export const calendarAnimation = {
-  initial: { opacity: 0, y: -40 },
-  animate: { opacity: 1, y: 0 },
-  exit: { opacity: 0, y: -40 },
-  transition: { duration: 0.4, ease: 'easeInOut' }
-}
-
-const getYearsFromCurrentTo = (endYear = 1950) => {
-  const currentYear = new Date().getFullYear()
-  const years = []
-
-  // eslint-disable-next-line no-plusplus
-  for (let year = currentYear; year >= endYear; year--) {
-    years.push(year)
-  }
-
-  return years
-}
-export const YEARS_OPTIONS = getYearsFromCurrentTo()
-
-export const DAYS_OF_WEEK: TDayOfWeek[] = [
-  { day: 'Пн' },
-  { day: 'Вт' },
-  { day: 'Ср' },
-  { day: 'Чт' },
-  { day: 'Пт' },
-  { day: 'Сб', isWeekend: true },
-  { day: 'Вс', isWeekend: true }
-]
-
-export const MONTHS_OPTIONS = [
-  'Январь',
-  'Февраль',
-  'Март',
-  'Апрель',
-  'Май',
-  'Июнь',
-  'Июль',
-  'Август',
-  'Сентябрь',
-  'Октябрь',
-  'Ноябрь',
-  'Декабрь'
-]

package/lib/shared/ui/formControlElements/calendarControl/model/types.ts

@@ -1,44 +0,0 @@
-import { type TAdditionalInputClassesWithAttachment } from '../../model'
-
-export type TDayOfWeek = {
-  day: string
-  isWeekend?: boolean
-}
-
-export type TDaysOfMonthClasses = {
-  monthWrapper: string
-  button: string
-  day: string
-}
-
-export type TDaysOfWeekClasses = {
-  weekWrapper: string
-  weekDay: string
-}
-
-export type TNavigationClasses = {
-  navigationWrapper: string
-  swipeButton: string
-  arrowIcon: string
-}
-
-export type TDropdownClasses = {
-  dropdownWrapper: string
-  dropdownTrigger: string
-  dropdownIcon: string
-  dropdownOverlay: string
-  dropdownOptions: string
-  dropdownOption: string
-  dropdowns: string
-}
-
-export type TCalendarClasses = Partial<TDayOfWeek> &
-  Partial<TDaysOfMonthClasses> &
-  Partial<TDaysOfWeekClasses> &
-  Partial<TNavigationClasses> &
-  Partial<TDropdownClasses> &
-  Partial<TAdditionalInputClassesWithAttachment> & {
-    rootWrapper: string
-    calendarWrapper: string
-    calendarHeader: string
-  }

package/lib/shared/ui/formControlElements/calendarControl/ui/DaysOfMonth.tsx

@@ -1,53 +0,0 @@
-import { format, getDay, isSameMonth, isToday } from 'date-fns'
-import { colStartClasses } from '../model/helpers'
-import { type TDaysOfMonthClasses } from '../model/types'
-import { cn } from '$/shared/utils'
-
-interface IDaysOfMonthProps {
-  daysList: Date[]
-  selectedDay: number
-  firstDayOfMonth: Date
-  onSelectDay: (day: Date) => void
-  classes?: Partial<TDaysOfMonthClasses>
-}
-
-export const DaysOfMonth = ({ daysList, firstDayOfMonth, selectedDay, onSelectDay, classes }: IDaysOfMonthProps) => {
-  return (
-    <div className={cn('grid grid-cols-7 place-items-center', classes?.monthWrapper)}>
-      {daysList?.map((day, idx) => {
-        const isCurrentMonth = isSameMonth(day, firstDayOfMonth)
-
-        return (
-          <div
-            // eslint-disable-next-line react/no-array-index-key
-            key={idx}
-            role='button'
-            tabIndex={0}
-            onKeyDown={() => onSelectDay(day)}
-            onClick={() => onSelectDay(day)}
-            className={cn(
-              'flex size-10 cursor-pointer items-center justify-center',
-              colStartClasses[getDay(+day - 1)],
-              classes?.button
-            )}
-          >
-            <span
-              className={cn(
-                'mob-body-regular-m flex h-full w-full items-center justify-center rounded-sm border border-solid border-transparent text-color-dark transition-colors hover:border-primary-default hover:bg-color-primary-tr-hover',
-                {
-                  'before:content-[" "] relative text-color-primary-default before:absolute before:bottom-1 before:left-1/2 before:h-[2px] before:w-4 before:-translate-x-1/2 before:rounded-[2px] before:bg-icon-primary-default':
-                    isToday(day),
-                  '!bg-color-primary-default !text-color-white': selectedDay === +format(day, 'dd') && isCurrentMonth,
-                  'text-color-disabled': !isCurrentMonth
-                },
-                classes?.day
-              )}
-            >
-              {format(day, 'd')}
-            </span>
-          </div>
-        )
-      })}
-    </div>
-  )
-}

package/lib/shared/ui/formControlElements/calendarControl/ui/DaysOfWeek.tsx

@@ -1,28 +0,0 @@
-import { capitalizeFirstLetter, DAYS_OF_WEEK } from '../model/helpers'
-import { type TDaysOfWeekClasses } from '../model/types'
-import { cn } from '$/shared/utils'
-
-interface IDaysOfWeekProps {
-  classes?: Partial<TDaysOfWeekClasses>
-}
-
-export const DaysOfWeek = ({ classes }: IDaysOfWeekProps) => {
-  return (
-    <div className={cn('grid grid-cols-7 pt-2', classes?.weekWrapper)}>
-      {DAYS_OF_WEEK?.map(({ day, isWeekend }) => {
-        return (
-          <span
-            key={day}
-            className={cn(
-              'mob-body-medium-m flex size-10 items-center justify-center',
-              { 'text-color-negative': isWeekend },
-              classes?.weekDay
-            )}
-          >
-            {capitalizeFirstLetter(day)}
-          </span>
-        )
-      })}
-    </div>
-  )
-}

package/lib/shared/ui/formControlElements/calendarControl/ui/Dropdown.tsx

@@ -1,62 +0,0 @@
-import { type TDropdownClasses } from '../model/types'
-import { OptionsList } from './OptionsList'
-import { Icon } from '$/shared/ui'
-import { cn } from '$/shared/utils'
-
-export interface IDropdownProps<Value extends string | number> {
-  options: Value[]
-  selectedValue: string
-  isActive: boolean
-  onClickTrigger: () => void
-  onClickOption: (value: number) => void
-  variant?: 'months' | 'years'
-  classes?: Partial<TDropdownClasses>
-}
-
-export const Dropdown = <Value extends string | number>({
-  onClickTrigger,
-  isActive,
-  selectedValue,
-  options,
-  variant = 'months',
-  onClickOption,
-  classes
-}: IDropdownProps<Value>) => {
-  return (
-    <div className={cn('z-10 w-full', classes?.dropdownWrapper)}>
-      <div
-        role='button'
-        tabIndex={0}
-        onKeyDown={onClickTrigger}
-        onClick={onClickTrigger}
-        className={cn(
-          'desk-body-medium-l flex items-center gap-[2px] rounded-sm px-2 py-2 text-color-tetriary transition-colors hover:bg-color-primary-tr-hover',
-          { 'text-color-primary-default': isActive },
-          classes?.dropdownTrigger
-        )}
-      >
-        {selectedValue}
-        <Icon
-          name='arrows/arrowRight'
-          className={cn('rotate-90 text-icon-blue-grey-800', { 'text-icon-primary-default': isActive }, classes?.dropdownIcon)}
-        />
-      </div>
-
-      <div
-        className={cn(
-          'invisible absolute bottom-3 left-1/2 z-10 flex h-[280px] w-full -translate-x-1/2 flex-col overflow-hidden px-4 opacity-0 transition-all',
-          { 'visible opacity-100': isActive },
-          classes?.dropdownOverlay
-        )}
-      >
-        <OptionsList
-          options={options}
-          selectedValue={selectedValue}
-          isActive={isActive}
-          onClickOption={onClickOption}
-          variant={variant}
-        />
-      </div>
-    </div>
-  )
-}

package/lib/shared/ui/formControlElements/calendarControl/ui/Header.tsx

@@ -1,51 +0,0 @@
-import { MONTHS_OPTIONS, YEARS_OPTIONS } from '../model/helpers'
-import { type TDropdownClasses } from '../model/types'
-import { Dropdown } from './Dropdown'
-import { cn } from '$/shared/utils'
-
-interface IHeaderProps {
-  month: string
-  year: string
-  isYearsOpen: boolean
-  isMonthOpen: boolean
-  toggleMonthDropdown: () => void
-  toggleYearDropdown: () => void
-  onSelectMonth: (month: number) => void
-  onSelectYear: (year: number) => void
-  classes?: Partial<TDropdownClasses>
-}
-
-export const Header = ({
-  isMonthOpen,
-  isYearsOpen,
-  toggleMonthDropdown,
-  toggleYearDropdown,
-  onSelectMonth,
-  onSelectYear,
-  month,
-  year,
-  classes
-}: IHeaderProps) => {
-  return (
-    <div className={cn('flex items-center', classes?.dropdowns)}>
-      <Dropdown
-        options={MONTHS_OPTIONS}
-        isActive={isMonthOpen}
-        selectedValue={MONTHS_OPTIONS[+month - 1]}
-        onClickTrigger={toggleMonthDropdown}
-        onClickOption={onSelectMonth}
-        classes={classes}
-      />
-
-      <Dropdown
-        options={YEARS_OPTIONS}
-        isActive={isYearsOpen}
-        selectedValue={year}
-        onClickTrigger={toggleYearDropdown}
-        onClickOption={onSelectYear}
-        variant='years'
-        classes={classes}
-      />
-    </div>
-  )
-}

package/lib/shared/ui/formControlElements/calendarControl/ui/Navigation.tsx

@@ -1,32 +0,0 @@
-import type { MouseEventHandler } from 'react'
-import { type TNavigationClasses } from '../model/types'
-import { Icon } from '$/shared/ui'
-import { cn } from '$/shared/utils'
-
-interface INavigationProps {
-  onClickPrevMonth: MouseEventHandler<HTMLButtonElement>
-  onClickNextMonth: MouseEventHandler<HTMLButtonElement>
-  classes?: Partial<TNavigationClasses>
-}
-
-export const Navigation = ({ onClickPrevMonth, onClickNextMonth, classes }: INavigationProps) => {
-  return (
-    <div className={cn('flex items-center justify-evenly gap-6', classes?.navigationWrapper)}>
-      <button type='button' className={cn('h-6 w-6 cursor-pointer', classes?.swipeButton)} onClick={onClickPrevMonth}>
-        <Icon
-          name='arrows/arrowRight'
-          className={cn(
-            'size-6 rotate-180 text-icon-blue-grey-800 transition-colors hover:text-icon-accent-hover',
-            classes?.arrowIcon
-          )}
-        />
-      </button>
-      <button type='button' className={cn('h-6 w-6 cursor-pointer', classes?.swipeButton)} onClick={onClickNextMonth}>
-        <Icon
-          name='arrows/arrowRight'
-          className={cn('size-6 text-icon-blue-grey-800 transition-colors hover:text-icon-accent-hover', classes?.arrowIcon)}
-        />
-      </button>
-    </div>
-  )
-}

package/lib/shared/ui/formControlElements/calendarControl/ui/OptionsList.tsx

@@ -1,44 +0,0 @@
-import type { IDropdownProps } from './Dropdown'
-import { cn } from '$/shared/utils'
-
-interface IOptionsListProps<Value extends string | number> extends Omit<IDropdownProps<Value>, 'onClickTrigger'> {}
-
-export const OptionsList = <Value extends string | number>({
-  isActive,
-  variant,
-  options,
-  onClickOption,
-  selectedValue,
-  classes
-}: IOptionsListProps<Value>) => {
-  const modeMonth = variant === 'months'
-  return (
-    <div
-      className={cn('customScrollbar-y overflow-y-auto overflow-x-hidden bg-color-white px-2', classes?.dropdownOptions)}
-      role='listbox'
-      aria-expanded={isActive ? 'true' : 'false'}
-      aria-label={variant === 'months' ? 'Выбор месяца' : 'Выбор года'}
-    >
-      {options?.map((option, index) => {
-        return (
-          <div
-            key={option}
-            role='button'
-            tabIndex={0}
-            onClick={() => onClickOption(modeMonth ? index : (option as number))}
-            onKeyDown={() => onClickOption(modeMonth ? index : (option as number))}
-            className={cn(
-              'mob-body-regular-m cursor-pointer rounded-sm bg-color-white px-2 py-[10px] text-color-dark transition-colors hover:bg-color-primary-tr-hover hover:text-color-primary-hover',
-              {
-                '!bg-color-primary-default !text-color-white': modeMonth ? selectedValue === option : +selectedValue === option
-              },
-              classes?.dropdownOption
-            )}
-          >
-            {option}
-          </div>
-        )
-      })}
-    </div>
-  )
-}