@scbt-ecom/ui 0.4.1 → 0.4.2

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

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

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

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

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

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

@@ -0,0 +1 @@
+export { CalendarControl, type ICalendarControlProps } from './CalendarControl'

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

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

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

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

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

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

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

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

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