@scbt-ecom/ui 0.0.30 → 0.0.32

package/lib/shared/ui/calendar/model/animation.ts

@@ -1,112 +0,0 @@
-export const calendarAnimation = {
-  initial: { opacity: 0, y: -40 },
-  animate: { opacity: 1, y: 0 },
-  exit: { opacity: 0, y: -40 },
-  transition: { duration: 0.4, ease: 'easeInOut' }
-}
-
-// import { useState } from 'react'
-// import { format } from 'date-fns'
-// import { type TCalendarMode } from '../../CalendarControl'
-
-// export type TControlledDate = {
-//   month: number
-//   day: number
-//   year: number
-// }
-
-// type TDateSetter = {
-//   type: 'day' | 'month' | 'year'
-//   value: number
-//   updatedDate: Date
-//   onChange: (...event: unknown[]) => void
-// }
-
-// export const useDatePicker = () => {
-//   const [controlledDate, setControlledDate] = useState<TControlledDate>({
-//     day: new Date().getDate(),
-//     month: new Date().getMonth(),
-//     year: new Date().getFullYear()
-//   })
-//   const formattedControlledDate = new Date(controlledDate.year, controlledDate.month, controlledDate.day)
-
-//   const dateSetter = ({ type, value, updatedDate, onChange }: TDateSetter) => {
-//     setControlledDate((prev) => ({ ...prev, [type]: value }))
-//     onChange(format(updatedDate, 'dd.MM.yyyy'))
-//   }
-
-//   const onClickDay = (date: Date, onChange: (...event: unknown[]) => void, mode: TCalendarMode, closeCalendar: () => void) => {
-//     console.log(date, '@date')
-
-//     const formattedDayOnDate = new Date(controlledDate.year, controlledDate.month, +format(date, 'dd'))
-//     dateSetter({ type: 'day', value: +format(date, 'dd'), updatedDate: formattedDayOnDate, onChange })
-
-//     if (mode === 'single') {
-//       closeCalendar()
-//     }
-//   }
-
-//   const onChangeMonth = (date: Date, onChange: (...event: unknown[]) => void) => {
-//     const formattedMonthOnDate = new Date(controlledDate.year, +format(date, 'MM') - 1, controlledDate.day)
-//     dateSetter({ type: 'month', value: +format(date, 'MM') - 1, updatedDate: formattedMonthOnDate, onChange })
-//   }
-
-//   const onSelectMonth = (month: number, onChange: (...event: unknown[]) => void) => {
-//     const formattedMonth = new Date(controlledDate.year, month, controlledDate.day)
-//     dateSetter({ type: 'month', value: month, updatedDate: formattedMonth, onChange })
-//   }
-
-//   const onSelectYear = (year: number, onChange: (...event: unknown[]) => void) => {
-//     const formattedYear = new Date(year, controlledDate.month, controlledDate.day)
-//     dateSetter({ type: 'year', value: year, updatedDate: formattedYear, onChange })
-//   }
-
-//   const onClickPrev = (
-//     event: React.MouseEvent<HTMLButtonElement>,
-//     onPreviousClick?: React.MouseEventHandler<HTMLButtonElement>
-//   ) => {
-//     if (onPreviousClick) {
-//       onPreviousClick(event)
-//       setControlledDate((prev) => ({
-//         ...prev,
-//         year: prev.month === 0 ? prev.year - 1 : prev.year
-//       }))
-//     }
-//   }
-
-//   const onClickNext = (event: React.MouseEvent<HTMLButtonElement>, onNextClick?: React.MouseEventHandler<HTMLButtonElement>) => {
-//     if (onNextClick) {
-//       onNextClick(event)
-//       setControlledDate((prev) => ({
-//         ...prev,
-//         year: prev.month === 11 ? prev.year + 1 : prev.year
-//       }))
-//     }
-//   }
-
-//   const onBlurInput = (inputValue: string, onChange: (...event: unknown[]) => void) => {
-//     if (inputValue) {
-//       const [day, month, year] = inputValue?.split('.') ?? ''
-
-//       onChange(inputValue)
-//       setControlledDate({
-//         month: +month - 1,
-//         year: +year,
-//         day: +day
-//       })
-//     }
-//   }
-
-//   return {
-//     formattedControlledDate,
-//     controlledDate,
-//     setControlledDate,
-//     onClickDay,
-//     onChangeMonth,
-//     onSelectMonth,
-//     onSelectYear,
-//     onBlurInput,
-//     onClickPrev,
-//     onClickNext
-//   }
-// }

package/lib/shared/ui/calendar/model/classes.ts

@@ -1,34 +0,0 @@
-import { cn } from '$/shared/utils'
-
-export const dayPickerClasses = (isRange?: boolean) => {
-  return {
-    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-transparent !text-color-dark [&_button]:!h-[32px] [&_button]:!bg-color-primary-tr-hover [&_button]:rounded-none',
-    range_end: '[&_button]:!h-[40px] rounded-sm',
-    range_start: '[&_button]:!h-[40px] rounded-sm',
-    day: 'text-color-dark mob-body-regular-m ',
-    day_button: cn(
-      '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',
-      { 'h-[32px]': isRange }
-    ),
-    //--------------------------------
-    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'
-  }
-}

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

@@ -1,51 +0,0 @@
-import { eachMonthOfInterval, endOfYear, format, startOfYear } from 'date-fns'
-import { ru } from 'date-fns/locale'
-
-export const MONTHS_OPTIONS = eachMonthOfInterval({
-  start: startOfYear(new Date()),
-  end: endOfYear(new Date())
-})
-  .map((month) => format(month, 'LLLL', { locale: ru }))
-  .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
-
-export const DAYS_OF_WEEK = [
-  { day: 'Пн' },
-  { day: 'Вт' },
-  { day: 'Ср' },
-  { day: 'Чт' },
-  { day: 'Пт' },
-  { day: 'Сб', isWeekend: true },
-  { day: 'Вс', isWeekend: true }
-]
-
-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()
-
-// TODO: REMOVE
-// export const markActiveDay = (currentDate: string) => {
-//   const previousCell = document.querySelector('[data-focus="true"]')
-//   if (previousCell) {
-//     previousCell.setAttribute('data-focus', 'false')
-//     previousCell.classList.remove('bg-color-primary-default', 'text-color-white')
-//   }
-
-//   const cell = document.querySelector(`[data-day="${currentDate}"]`)
-//   if (cell) {
-//     cell.setAttribute('data-focus', 'true')
-//     cell.classList.add('bg-color-primary-default', 'text-color-white')
-//   }
-
-//   // markActiveDay(`${year}-${month}-${day}`) - ON BLUR
-//   // markActiveDay(`${+format(date, 'yyyy')}-${+format(date, 'MM')}-${+format(date, 'dd')}`) - ON CLICK DAY
-// }

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

@@ -1,2 +0,0 @@
-export { useDatePicker, type TControlledDate } from './useDatePicker'
-export { useCalendarDropdowns } from './useCalendarDropdowns'

package/lib/shared/ui/calendar/model/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/calendar/model/hooks/useDatePicker.ts

@@ -1,103 +0,0 @@
-import * as React from 'react'
-import { format } from 'date-fns'
-import { type TCalendarMode } from '../../Calendar'
-
-export type TControlledDate = {
-  day: number
-  month: number
-  year: number
-}
-
-type TDateSetter = {
-  type: 'day' | 'month' | 'year'
-  value: number
-  updatedDate: Date
-  onChange: (...event: unknown[]) => void
-}
-
-export const useDatePicker = () => {
-  const [controlledDate, setControlledDate] = React.useState<TControlledDate>({
-    day: new Date().getDate(),
-    month: new Date().getMonth(),
-    year: new Date().getFullYear()
-  })
-
-  const formattedControlledDate = new Date(controlledDate.year, controlledDate.month, controlledDate.day)
-
-  const dateSetter = ({ type, value, updatedDate, onChange }: TDateSetter) => {
-    setControlledDate((prev) => ({ ...prev, [type]: value }))
-    onChange(format(updatedDate, 'dd.MM.yyyy'))
-  }
-
-  const onClickDay = (date: Date, onChange: (...event: unknown[]) => void, mode: TCalendarMode, closeCalendar: () => void) => {
-    if (mode === 'single') {
-      const formattedDay = new Date(controlledDate.year, controlledDate.month, +format(date, 'dd'))
-      dateSetter({ type: 'day', value: +format(date, 'dd'), updatedDate: formattedDay, onChange })
-      closeCalendar()
-    }
-  }
-
-  const onChangeMonth = (date: Date, onChange: (...event: unknown[]) => void) => {
-    const formattedMonth = new Date(controlledDate.year, +format(date, 'MM') - 1, controlledDate.day)
-    dateSetter({ type: 'month', value: +format(date, 'MM') - 1, updatedDate: formattedMonth, onChange })
-  }
-
-  const onSelectMonth = (month: number, onChange: (...event: unknown[]) => void) => {
-    const formattedMonth = new Date(controlledDate.year, month, controlledDate.day)
-    dateSetter({ type: 'month', value: month, updatedDate: formattedMonth, onChange })
-  }
-
-  const onSelectYear = (year: number, onChange: (...event: unknown[]) => void) => {
-    const formattedYear = new Date(year, controlledDate.month, controlledDate.day)
-    dateSetter({ type: 'year', value: year, updatedDate: formattedYear, onChange })
-  }
-
-  const onClickPrev = (
-    event: React.MouseEvent<HTMLButtonElement>,
-    onPreviousClick?: React.MouseEventHandler<HTMLButtonElement>
-  ) => {
-    if (onPreviousClick) {
-      onPreviousClick(event)
-      setControlledDate((prev) => ({
-        ...prev,
-        year: prev.month === 0 ? prev.year - 1 : prev.year
-      }))
-    }
-  }
-
-  const onClickNext = (event: React.MouseEvent<HTMLButtonElement>, onNextClick?: React.MouseEventHandler<HTMLButtonElement>) => {
-    if (onNextClick) {
-      onNextClick(event)
-      setControlledDate((prev) => ({
-        ...prev,
-        year: prev.month === 11 ? prev.year + 1 : prev.year
-      }))
-    }
-  }
-
-  const onBlurInput = (inputValue: string, onChange: (...event: unknown[]) => void) => {
-    if (inputValue) {
-      const [day, month, year] = inputValue?.split('.') ?? ''
-
-      onChange(inputValue)
-      setControlledDate({
-        month: +month - 1,
-        year: +year,
-        day: +day
-      })
-    }
-  }
-
-  return {
-    formattedControlledDate,
-    controlledDate,
-    setControlledDate,
-    onClickDay,
-    onChangeMonth,
-    onSelectMonth,
-    onSelectYear,
-    onBlurInput,
-    onClickPrev,
-    onClickNext
-  }
-}

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

@@ -1,54 +0,0 @@
-import { type NavProps } from 'react-day-picker'
-import { MONTHS_OPTIONS, YEARS_OPTIONS } from '../model/helpers'
-import type { TControlledDate } from '../model/hooks'
-import { Dropdown } from './Dropdown'
-import { NavigationArrows } from './NavigationArrows'
-
-interface ICalendarHeaderProps extends NavProps {
-  controlledDate: TControlledDate
-  isMonthOpen: boolean
-  toggleMonthDropdown: () => void
-  isYearsOpen: boolean
-  toggleYearDropdown: () => void
-  onSelectMonth: (month: number) => void
-  onSelectYear: (year: number) => void
-  onClickPrev: (event: React.MouseEvent<HTMLButtonElement>) => void
-  onClickNext: (event: React.MouseEvent<HTMLButtonElement>) => void
-}
-
-export const CalendarHeader = ({
-  onSelectMonth,
-  onSelectYear,
-  onClickPrev,
-  onClickNext,
-  controlledDate,
-  isMonthOpen,
-  toggleMonthDropdown,
-  isYearsOpen,
-  toggleYearDropdown
-}: ICalendarHeaderProps) => {
-  return (
-    <div className='w-full flex items-center justify-between pb-2 border-b border-solid border-blue-grey-500'>
-      <div className='flex items-center'>
-        <Dropdown
-          options={MONTHS_OPTIONS}
-          isActive={isMonthOpen}
-          selectedDate={MONTHS_OPTIONS[controlledDate.month]}
-          onClickTrigger={toggleMonthDropdown}
-          onClickOption={onSelectMonth}
-        />
-
-        <Dropdown
-          options={YEARS_OPTIONS}
-          isActive={isYearsOpen}
-          selectedDate={controlledDate.year}
-          onClickTrigger={toggleYearDropdown}
-          onClickOption={onSelectYear}
-          variant='years'
-        />
-      </div>
-
-      <NavigationArrows onPreviousClick={onClickPrev} onNextClick={onClickNext} />
-    </div>
-  )
-}

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

@@ -1,75 +0,0 @@
-import { Icon } from '$/shared/ui/icon'
-import { cn } from '$/shared/utils'
-
-interface IDropdownProps<Value extends string | number> {
-  options: Value[]
-  isActive: boolean
-  selectedDate: Value
-  onClickTrigger: () => void
-  onClickOption: (value: number) => void
-  variant?: 'months' | 'years'
-}
-
-export const Dropdown = <Value extends string | number>({
-  options,
-  isActive,
-  selectedDate,
-  onClickTrigger,
-  onClickOption,
-  variant = 'months'
-}: IDropdownProps<Value>) => {
-  return (
-    <div className='w-full z-20'>
-      <div
-        role='button'
-        tabIndex={0}
-        onKeyDown={onClickTrigger}
-        onClick={onClickTrigger}
-        className={cn(
-          'py-2 px-2 rounded-sm text-color-tetriary desk-body-medium-l flex items-center gap-[2px] transition-colors hover:bg-color-primary-tr-hover',
-          { 'text-color-primary-default': isActive }
-        )}
-      >
-        {selectedDate}
-        <Icon
-          name='arrows/arrowRight'
-          className={cn('rotate-90 text-icon-blue-grey-800', { 'text-icon-primary-default': isActive })}
-        />
-      </div>
-
-      <div
-        className={cn(
-          'flex flex-col absolute w-full h-[280px] transition-all  bottom-3 left-1/2 overflow-hidden -translate-x-1/2 px-4 z-10 opacity-0 invisible',
-          {
-            'opacity-100 visible': isActive
-          }
-        )}
-      >
-        <div
-          className='customScrollbar-y overflow-y-auto px-2 bg-color-white overflow-x-hidden'
-          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(variant === 'months' ? index : (option as number))}
-                onKeyDown={() => onClickOption(variant === 'months' ? index : (option as number))}
-                className={cn(
-                  'transition-colors px-2 py-[10px] rounded-sm bg-color-white text-color-dark cursor-pointer mob-body-regular-m hover:bg-color-primary-tr-hover  hover:text-color-primary-hover',
-                  { '!bg-color-primary-default !text-color-white': selectedDate === option }
-                )}
-              >
-                {option}
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,23 +0,0 @@
-import { type NavProps } from 'react-day-picker'
-import { Icon } from '$/shared/ui/icon'
-
-interface INavigationArrowsProps extends NavProps {}
-
-export const NavigationArrows = ({ onPreviousClick, onNextClick }: INavigationArrowsProps) => {
-  return (
-    <div className='flex items-center gap-3'>
-      <button onClick={onPreviousClick}>
-        <Icon
-          name='arrows/arrowRight'
-          className='size-6 rotate-180 text-icon-blue-grey-800 hover:text-icon-accent-hover transition-colors'
-        />
-      </button>
-      <button onClick={onNextClick}>
-        <Icon
-          name='arrows/arrowRight'
-          className='size-6 text-icon-blue-grey-800 hover:text-icon-accent-hover transition-colors'
-        />
-      </button>
-    </div>
-  )
-}

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

@@ -1,16 +0,0 @@
-import { DAYS_OF_WEEK } from '../model/helpers'
-import { cn } from '$/shared/utils'
-
-export const Weekdays = () => {
-  return (
-    <thead>
-      <tr>
-        {DAYS_OF_WEEK.map(({ day, isWeekend }) => (
-          <th key={day} className={cn('size-10 text-color-dark', { 'text-color-negative': isWeekend })}>
-            {day}
-          </th>
-        ))}
-      </tr>
-    </thead>
-  )
-}

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

@@ -1,2 +0,0 @@
-export { Weekdays } from './Weekdays'
-export { CalendarHeader } from './CalendarHeader'

package/lib/shared/ui/formControlElements/CheckboxControl.tsx

@@ -1,92 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Controller, type FieldValues } from 'react-hook-form'
-import { Indicator, Root } from '@radix-ui/react-checkbox'
-import { Icon } from '../icon/Icon'
-import type { TAdditionalInputPrimitiveClasses, TControlledInputPrimitiveProps } from './model'
-import { MessageView } from './ui'
-import { cn } from '$/shared/utils'
-
-type TCheckboxClasses = Partial<TAdditionalInputPrimitiveClasses> & {
-  wrapper?: string
-  indicator?: string
-}
-
-export interface ICheckboxControlProps<T extends FieldValues> extends Omit<TControlledInputPrimitiveProps<T>, 'label'> {
-  classes?: TCheckboxClasses
-  label: React.ReactElement | string
-}
-
-export const CheckboxControl = <T extends FieldValues>({
-  control,
-  helperText,
-  label,
-  disabled,
-  classes,
-  ...props
-}: ICheckboxControlProps<T>) => {
-  const checkboxId = React.useId()
-  return (
-    <Controller
-      name={props.name}
-      control={control}
-      render={({ field: { onChange, value, ref, name }, fieldState: { error } }) => {
-        return (
-          <div className={cn('flex flex-col max-w-[450px]', classes?.container)}>
-            <div className={cn('flex items-center gap-4', classes?.wrapper)}>
-              <div
-                className={cn(
-                  'size-10 flex items-center justify-center rounded-full transition-all hover:bg-color-primary-tr-hover focus-within:bg-color-primary-tr-focus ',
-                  classes?.field,
-                  { '!bg-color-transparent': disabled }
-                )}
-              >
-                <Root
-                  name={name}
-                  value={value}
-                  ref={ref}
-                  onCheckedChange={(e) => {
-                    onChange(e)
-                  }}
-                  className={cn(
-                    'size-6 rounded-sm cursor-pointer outline-none border border-solid border-blue-grey-700 flex items-center justify-center  data-[state=checked]:bg-color-primary-default active:bg-color-primary-tr-pressed data-[state=unchecked]:disabled:bg-color-blue-grey-300 disabled:border-transparent data-[state=checked]:disabled:bg-color-primary-disabled',
-                    { '!border-negative': !!error?.message },
-                    classes?.input
-                  )}
-                  disabled={disabled}
-                  id={checkboxId}
-                  defaultChecked={value}
-                  checked={value}
-                >
-                  <Indicator
-                    className={cn('flex items-center justify-center data-[state=checked]:text-icon-white', classes?.indicator)}
-                  >
-                    <Icon name='general/check' className='size-5' />
-                  </Indicator>
-                </Root>
-              </div>
-
-              <label
-                className={cn(
-                  'desk-body-regular-m text-color-dark cursor-pointer flex-1',
-                  { 'text-color-disabled': disabled },
-                  classes?.label
-                )}
-                htmlFor={checkboxId}
-              >
-                {label}
-              </label>
-            </div>
-            <MessageView
-              className={cn(classes?.message)}
-              intent={error?.message ? 'error' : 'simple'}
-              text={error?.message || helperText}
-              disabled={disabled}
-            />
-          </div>
-        )
-      }}
-    />
-  )
-}

package/lib/shared/ui/formControlElements/FormControl.tsx

@@ -1,5 +0,0 @@
-export interface IFormControlProps {}
-
-export const FormControl = () => {
-  return <div className=''>Form example</div>
-}