@scbt-ecom/ui 0.0.29 → 0.0.30

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

@@ -0,0 +1,130 @@
+'use client'
+
+import { Controller, type FieldValues } from 'react-hook-form'
+import { Indicator, Item, Root } from '@radix-ui/react-radio-group'
+import { cva, type VariantProps } from 'class-variance-authority'
+import type { TAdditionalInputPrimitiveClasses, TControlledInputPrimitiveProps } from './model'
+import { MessageView } from './ui'
+import { cn } from '$/shared/utils'
+
+const radioOptionsConfig = cva('flex gap-2', {
+  variants: {
+    orientation: {
+      horizontal: '',
+      vertical: 'flex-col'
+    }
+  },
+  defaultVariants: {
+    orientation: 'vertical'
+  }
+})
+
+type TRadioClasses = Partial<TAdditionalInputPrimitiveClasses> & {
+  groupName?: string
+  radioGroup?: string
+  radioOption?: string
+  indicator?: string
+}
+
+export interface IRadioGroupOption {
+  label: string
+  value: string
+  isDisabled?: boolean
+}
+
+type TRadioOptionsConfig = VariantProps<typeof radioOptionsConfig>
+
+export interface IRadioControlProps<T extends FieldValues>
+  extends TRadioOptionsConfig,
+    Omit<TControlledInputPrimitiveProps<T>, 'label'> {
+  radioItemsGroup: IRadioGroupOption[]
+  groupName?: string
+  classes?: TRadioClasses
+  label?: never
+}
+
+export const RadioControl = <T extends FieldValues>({
+  radioItemsGroup,
+  control,
+  groupName,
+  helperText,
+  disabled,
+  classes,
+  orientation,
+  ...props
+}: IRadioControlProps<T>) => {
+  return (
+    <Controller
+      name={props.name}
+      control={control}
+      render={({ field: { onChange, value: controlledValue, ref, name }, fieldState: { error } }) => {
+        return (
+          <div className={cn('max-w-max flex flex-col gap-4', classes?.container)}>
+            {groupName && <span className={cn('desk-body-regular-l text-color-dark', classes?.groupName)}>{groupName}</span>}
+            <div className={cn('flex flex-col', classes?.field)}>
+              <Root
+                onValueChange={onChange}
+                name={name}
+                value={controlledValue}
+                ref={ref}
+                className={cn(radioOptionsConfig({ orientation }), classes?.radioGroup)}
+                defaultValue={controlledValue}
+              >
+                {radioItemsGroup.map(({ label, value, isDisabled }) => (
+                  <div key={value} className={cn('flex gap-2 items-center', classes?.radioOption)}>
+                    <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': isDisabled }
+                      )}
+                    >
+                      <Item
+                        disabled={isDisabled}
+                        className={cn(
+                          'relative size-6 bg-color-transparent rounded-full border-2 border-solid data-[state=unchecked]:border-blue-grey-700 data-[state=checked]:border-primary-default outline-none cursor-pointer transition-all',
+                          {
+                            'data-[state=checked]:!border-primary-disabled data-[state=unchecked]:bg-color-blue-grey-300 data-[state=unchecked]:border-transparent':
+                              isDisabled
+                          },
+                          { '!border-negative': !!error?.message },
+                          classes?.input
+                        )}
+                        value={value}
+                        id={value}
+                      >
+                        <Indicator
+                          className={cn(
+                            'flex items-center justify-center w-full h-full relative after:content-[" "] after:block after:size-3  after:rounded-full after:bg-color-primary-default',
+                            { 'after:bg-color-primary-disabled': isDisabled },
+                            classes?.indicator
+                          )}
+                        />
+                      </Item>
+                    </div>
+                    <label
+                      className={cn(
+                        'cursor-pointer desk-body-regular-l text-color-dark',
+                        { 'text-color-disabled': isDisabled },
+                        classes?.label
+                      )}
+                      htmlFor={value}
+                    >
+                      {label}
+                    </label>
+                  </div>
+                ))}
+              </Root>
+              <MessageView
+                className={cn(classes?.message)}
+                intent={error?.message ? 'error' : 'simple'}
+                text={error?.message || helperText}
+                disabled={disabled}
+              />
+            </div>
+          </div>
+        )
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,185 @@
+'use client'
+
+import { Controller, type FieldValues } from 'react-hook-form'
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
+import { Icon } from '../icon'
+import { type TControlledInputProps } from './model'
+import { FieldContainer, MessageView } from './ui'
+import { cn } from '$/shared/utils'
+
+interface ISelectControlClasses {
+  trigger: string
+  options: string
+  scrollArea: string
+  option: string
+  icon: string
+  message: string
+  value: string
+  label: string
+}
+
+export interface ISelectOption {
+  id: string
+  optionValue: string
+  isDisabled?: boolean
+}
+
+type TRenderSelectedValue = {
+  multiple: boolean
+  controlledValue: string | string[]
+  label: string
+  isClearIntent: boolean
+  disabled?: boolean
+  classes?: Partial<ISelectControlClasses>
+}
+
+export interface ISelectControlProps<T extends FieldValues> extends TControlledInputProps<T> {
+  classes?: Partial<ISelectControlClasses>
+  optionsList: ISelectOption[]
+  label: string
+  multiple?: boolean
+  intent?: 'filled' | 'clear'
+  disabled?: boolean
+}
+
+const renderSelectedValue = ({ multiple, controlledValue, label, isClearIntent, disabled, classes }: TRenderSelectedValue) => {
+  const labelElement = (
+    <div
+      className={cn(
+        'text-color-blue-grey-600 desk-body-regular-l transition-colors',
+        { 'group-data-[hover]:!text-color-primary-hover ': isClearIntent },
+        { '!text-color-disabled': disabled },
+        classes?.label
+      )}
+    >
+      {label}
+    </div>
+  )
+
+  // if (multiple) {
+  //   if (Array.isArray(controlledValue) && controlledValue.length > 0) {
+  //     return <div className={cn('text-color-dark flex-1', classes?.value)}>{controlledValue.join('; ')}</div>
+  //   }
+  //   return labelElement
+  // }
+
+  if (multiple) {
+    if (Array.isArray(controlledValue) && controlledValue.length > 0) {
+      return (
+        <div className='flex items-center gap-2 flex-wrap'>
+          {controlledValue.map((value) => (
+            <div className={cn('text-color-dark w-max bg-color-blue-grey-300 rounded-sm py-1 px-2', classes?.value)}>{value}</div>
+          ))}
+        </div>
+      )
+    }
+    return labelElement
+  }
+
+  if (controlledValue) {
+    return <div className={cn('text-color-dark flex-1', classes?.value)}>{controlledValue}</div>
+  }
+  return labelElement
+}
+
+export const SelectControl = <T extends FieldValues>({
+  size,
+  control,
+  helperText,
+  disabled,
+  classes,
+  optionsList,
+  label,
+  multiple = false,
+  intent = 'filled',
+  ...props
+}: ISelectControlProps<T>) => {
+  return (
+    <Controller
+      control={control}
+      name={props.name}
+      render={({ field: { onChange, name, value: controlledValue }, fieldState: { error } }) => {
+        const selectedValues: ISelectOption[] = Array.isArray(controlledValue) ? controlledValue : []
+        const isClearIntent = intent === 'clear'
+
+        return (
+          <FieldContainer size={size} intent={intent}>
+            <Listbox
+              disabled={disabled}
+              value={multiple ? selectedValues : controlledValue}
+              onChange={onChange}
+              name={name}
+              multiple={multiple}
+            >
+              <ListboxButton
+                className={cn(
+                  'h-[56px] outline outline-1 outline-transparent bg-color-blue-grey-100 p-4 rounded-sm flex items-center justify-between data-[hover]:bg-color-blue-grey-200 data-[active]:outline-blue-grey-800 focus:outline-blue-grey-800 group text-left transition-all',
+                  {
+                    'bg-color-transparent data-[hover]:bg-color-transparent h-full px-2 py-1 data-[active]:outline-primary-focus focus:outline-primary-focus':
+                      isClearIntent,
+                    '!bg-color-blue-grey-100 pointer-events-none ': disabled,
+                    '!outline-secondary-default': !!error?.message
+                  },
+                  classes?.trigger
+                )}
+              >
+                {renderSelectedValue({ multiple, controlledValue, label, isClearIntent, disabled, classes })}
+
+                <Icon
+                  name='arrows/arrowRight'
+                  className={cn(
+                    'size-6 rotate-90  text-icon-blue-grey-600 group-data-[open]:-rotate-90 transition-all',
+                    { 'text-icon-blue-grey-700 group-data-[hover]:text-icon-primary-hover': isClearIntent },
+                    { 'text-icon-disabled': disabled },
+                    { 'text-icon-secondary-default': !!error?.message },
+                    classes?.icon
+                  )}
+                />
+              </ListboxButton>
+              <MessageView
+                className={cn(classes?.message)}
+                intent={error?.message ? 'error' : 'simple'}
+                text={error?.message || helperText}
+                disabled={disabled}
+              />
+              <ListboxOptions
+                className={cn(
+                  'bg-color-white items-start justify-start shadow-sm w-select-trigger outline-transparent scrollHidden p-2 data-[closed]:opacity-0 transition-opacity duration-200',
+                  classes?.options
+                )}
+                transition
+                anchor={{
+                  gap: 8
+                }}
+              >
+                <div className={cn('p-2 customScrollbar-y overflow-x-hidden !max-h-[246px]', classes?.scrollArea)}>
+                  {optionsList?.map(({ optionValue, id, isDisabled }) => (
+                    <ListboxOption
+                      key={id}
+                      value={optionValue}
+                      disabled={isDisabled}
+                      className={cn(
+                        'desk-body-regular-l text-color-dark p-2 rounded-sm cursor-pointer transition-all hover:bg-color-primary-tr-hover hover:text-color-primary-hover data-[focus]:text-color-primary-hover data-[focus]:bg-color-primary-tr-hover data-[disabled]:pointer-events-none data-[disabled]:text-color-disabled',
+                        classes?.option
+                      )}
+                    >
+                      {({ selected }) => (
+                        <div className={cn('flex justify-between items-center gap-2')}>
+                          {optionValue}
+                          <Icon
+                            name='general/check'
+                            className={cn('size-5  text-icon-primary-default', { invisible: !selected })}
+                          />
+                        </div>
+                      )}
+                    </ListboxOption>
+                  ))}
+                </div>
+              </ListboxOptions>
+            </Listbox>
+          </FieldContainer>
+        )
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,79 @@
+'use client'
+
+import * as React from 'react'
+import { Controller, type FieldValues } from 'react-hook-form'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+import { type TControlledInputPrimitiveProps } from './model'
+import { MessageView } from './ui'
+import { cn } from '$/shared/utils'
+
+interface ISwitchClasses {
+  wrapper: string
+  input: string
+  thumb: string
+  textBlock: string
+  label: string
+  message: string
+}
+
+export interface ISwitchControlProps<T extends FieldValues> extends TControlledInputPrimitiveProps<T> {
+  disabled?: boolean
+  classes?: Partial<ISwitchClasses>
+}
+
+export const SwitchControl = <T extends FieldValues>({
+  disabled,
+  classes,
+  control,
+  helperText,
+  label,
+  ...props
+}: ISwitchControlProps<T>) => {
+  const inputId = React.useId()
+  return (
+    <Controller
+      name={props.name}
+      control={control}
+      render={({ field: { onChange, value: controlledValue, ref, name }, fieldState: { error } }) => (
+        <div className={cn('flex items-center gap-2', classes?.wrapper)}>
+          <SwitchPrimitive.Root
+            ref={ref}
+            id={inputId}
+            disabled={disabled}
+            onCheckedChange={onChange}
+            value={controlledValue}
+            checked={controlledValue}
+            name={name}
+            className={cn(
+              'w-10 h-6 bg-color-blue-grey-300 data-[state=checked]:bg-color-primary-default hover:data-[state=checked]:bg-color-primary-hover rounded-full p-[2px] outline-2 outline-offset-4 outline-transparent focus:outline-primary-focus',
+              { 'data-[state=checked]:!bg-color-primary-disabled data-[state=unchecked]:!bg-color-blue-grey-200': disabled },
+              classes?.input
+            )}
+          >
+            <SwitchPrimitive.Thumb
+              id={inputId}
+              className={cn(
+                'bg-color-white rounded-full size-5 block will-change-transform duration-200 transition-all data-[state=checked]:translate-x-4',
+                classes?.thumb
+              )}
+            />
+          </SwitchPrimitive.Root>
+          <div className={cn('flex flex-col', classes?.textBlock)}>
+            <label
+              className={cn('text-color-dark desk-body-regular-l', { 'text-color-disabled': disabled }, classes?.label)}
+              htmlFor={inputId}
+            >
+              {label}
+            </label>
+            <MessageView
+              className={cn('mt-0', classes?.message)}
+              intent={error?.message ? 'error' : 'simple'}
+              text={error?.message || helperText}
+              disabled={disabled}
+            />
+          </div>
+        </div>
+      )}
+    />
+  )
+}

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

@@ -0,0 +1,92 @@
+'use client'
+
+import * as React from 'react'
+import { Controller, type FieldValues } from 'react-hook-form'
+import type { TAdditionalInputClassesWithAttachment, TControlledInputProps, TTextareaCommonProps } from './model'
+import { FieldAttachment, FieldContainer, MessageView } from './ui'
+import { cn } from '$/shared/utils'
+
+type TTextareaClasses = Partial<TAdditionalInputClassesWithAttachment> & {
+  head: string
+  scrollArea: string
+}
+
+export interface ITextareaControlProps<T extends FieldValues> extends TControlledInputProps<T>, TTextareaCommonProps {
+  classes?: Partial<TTextareaClasses>
+}
+
+export const TextareaControl = <T extends FieldValues>({
+  label,
+  size = 'full',
+  helperText,
+  control,
+  classes,
+  badge,
+  icon,
+  swapPosition,
+  disabled,
+  placeholder,
+  ...props
+}: ITextareaControlProps<T>) => {
+  const inputId = React.useId()
+  return (
+    <Controller
+      control={control}
+      name={props.name}
+      render={({ field: { onChange, ref, value }, fieldState: { error } }) => (
+        <FieldContainer size={size} classes={classes}>
+          <div
+            className={cn(
+              'flex flex-col h-[120px] transition-colors relative border-solid rounded-sm border border-transparent bg-color-blue-grey-100 group-focus-within:border-blue-grey-800  focus:outline-blue-grey-800 hover:bg-color-blue-grey-200 active:bg-color-blue-grey-100',
+              { '!border-negative': error },
+              { '!bg-color-blue-grey-100': disabled },
+              classes?.field
+            )}
+          >
+            <div className={cn('flex items-center justify-between px-4 pt-2', classes?.head)}>
+              <label
+                className={cn('text-color-tetriary desk-body-regular-s', { 'text-color-disabled': disabled }, classes?.label)}
+                htmlFor={inputId}
+              >
+                {label}
+              </label>
+              <FieldAttachment
+                badge={badge}
+                icon={icon}
+                error={!!error?.message}
+                classes={classes}
+                isTextarea
+                swapPosition={swapPosition}
+              />
+            </div>
+
+            <div className={cn('w-full flex items-start px-4 py-2', classes?.scrollArea)}>
+              <textarea
+                aria-invalid={error?.message ? 'true' : 'false'}
+                ref={ref}
+                className={cn(
+                  'w-full h-[78px] desk-body-regular-l flex-1 customScrollbar-y text-color-dark placeholder:text-color-blue-grey-600 transition-all bg-color-transparent outline-none  rounded-md resize-none',
+                  { 'placeholder:text-color-disabled': disabled },
+                  classes?.input
+                )}
+                id={inputId}
+                value={value}
+                onChange={onChange}
+                disabled={disabled}
+                placeholder={placeholder}
+                {...props}
+              />
+            </div>
+          </div>
+
+          <MessageView
+            className={cn(classes?.message)}
+            intent={error?.message ? 'error' : 'simple'}
+            text={error?.message || helperText}
+            disabled={disabled}
+          />
+        </FieldContainer>
+      )}
+    />
+  )
+}

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

@@ -0,0 +1,175 @@
+'use client'
+
+import * as React from 'react'
+import { Controller, type FieldValues, useFormContext } 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
+}
+
+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,
+  ...props
+}: ICalendarControlProps<T>) => {
+  const inputId = React.useId()
+  const methods = useFormContext()
+  const calendarValue = methods.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', classes?.rootWrapper)} ref={calendarWrapperRef}>
+            <AnimatePresence>
+              {isCalendarOpen && (
+                <motion.div
+                  {...calendarAnimation}
+                  className={cn(
+                    'absolute z-30 bottom-[-370px] right-0 invisible w-[312px] h-[368px] shadow-md p-4 rounded-sm bg-color-white',
+                    { 'visible ': isCalendarOpen },
+                    classes?.calendarWrapper
+                  )}
+                >
+                  <div
+                    className={cn(
+                      'flex items-center justify-between pb-2 border-b border-solid border-blue-grey-500',
+                      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(
+                      '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) {
+                        methods.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}
+                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'