@scbt-ecom/ui 0.0.30 → 0.0.31

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

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

@@ -1,80 +0,0 @@
-'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>
-      )}
-    />
-  )
-}

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

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

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

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

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