@scbt-ecom/ui 0.0.27 → 0.0.30

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,68 @@
+'use client'
+
+import * as React from 'react'
+import { Controller, type FieldValues } from 'react-hook-form'
+import type { TAdditionalInputClassesWithAttachment, TControlledInputProps, TInputCommonProps } from './model'
+import { FieldAttachment, FieldContainer, FieldWrapper, MessageView } from './ui'
+import { cn } from '$/shared/utils'
+
+export interface InputControlProps<T extends FieldValues> extends TControlledInputProps<T>, TInputCommonProps {
+  classes?: Partial<TAdditionalInputClassesWithAttachment>
+}
+
+export const InputControl = <T extends FieldValues>({
+  label,
+  size = 'full',
+  helperText,
+  control,
+  classes,
+  badge,
+  icon,
+  swapPosition,
+  disabled,
+  ...props
+}: InputControlProps<T>) => {
+  const inputId = React.useId()
+  return (
+    <Controller
+      control={control}
+      name={props.name}
+      render={({ field: { onChange, ref, value }, fieldState: { error } }) => (
+        <FieldContainer size={size} classes={classes}>
+          <FieldWrapper
+            fieldId={inputId}
+            label={label}
+            classes={classes}
+            disabled={disabled}
+            value={value}
+            error={!!error?.message}
+          >
+            <>
+              <input
+                aria-invalid={error?.message ? 'true' : 'false'}
+                ref={ref}
+                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
+                )}
+                id={inputId}
+                value={value}
+                onChange={onChange}
+                disabled={disabled}
+                {...props}
+              />
+              <FieldAttachment badge={badge} icon={icon} error={!!error?.message} classes={classes} swapPosition={swapPosition} />
+            </>
+          </FieldWrapper>
+
+          <MessageView
+            className={cn(classes?.message)}
+            intent={error?.message ? 'error' : 'simple'}
+            text={error?.message || helperText}
+            disabled={disabled}
+          />
+        </FieldContainer>
+      )}
+    />
+  )
+}

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

@@ -0,0 +1,80 @@
+'use client'
+
+import * as React from 'react'
+import { Controller, type FieldValues } from 'react-hook-form'
+import { PatternFormat } from 'react-number-format'
+import type { TAdditionalInputClassesWithAttachment, TControlledInputProps, TInputCommonProps } from './model'
+import { FieldAttachment, FieldWrapper, MessageView } from './ui'
+import { FieldContainer } from './ui/FieldContainer'
+import { cn } from '$/shared/utils'
+
+export interface InputControlMaskProps<T extends FieldValues> extends TControlledInputProps<T>, TInputCommonProps {
+  format: string
+  mask?: string | string[]
+  allowEmptyFormatting?: boolean
+  onInputChange?: (arg?: string) => void
+  classes?: Partial<TAdditionalInputClassesWithAttachment>
+}
+
+export const InputControlMask = <T extends FieldValues>({
+  format,
+  allowEmptyFormatting = false,
+  mask = '',
+  control,
+  onInputChange,
+  size = 'full',
+  helperText,
+  label,
+  classes,
+  disabled,
+  badge,
+  icon,
+  swapPosition,
+  ...props
+}: InputControlMaskProps<T>) => {
+  const inputId = React.useId()
+  return (
+    <Controller
+      control={control}
+      name={props.name}
+      render={({ field: { onChange, value }, fieldState: { error } }) => (
+        <FieldContainer size={size} classes={classes}>
+          <FieldWrapper
+            fieldId={inputId}
+            label={label}
+            classes={classes}
+            disabled={disabled}
+            value={value}
+            error={!!error?.message}
+          >
+            <>
+              <PatternFormat
+                value={value?.toString()}
+                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
+                )}
+                format={format}
+                allowEmptyFormatting={allowEmptyFormatting}
+                mask={mask}
+                onChange={(e) => {
+                  onChange(e)
+                  if (onInputChange) {
+                    onInputChange(e.target.value)
+                  }
+                }}
+                {...props}
+              />
+              <FieldAttachment badge={badge} icon={icon} error={!!error?.message} classes={classes} swapPosition={swapPosition} />
+            </>
+          </FieldWrapper>
+          <MessageView
+            className={cn(classes?.message)}
+            intent={error?.message ? 'error' : 'simple'}
+            text={error?.message || helperText}
+          />
+        </FieldContainer>
+      )}
+    />
+  )
+}