@scbt-ecom/ui 0.4.2 → 0.4.4

package/lib/shared/ui/button/Button.tsx

@@ -1,117 +0,0 @@
-import { type ComponentProps, forwardRef, type ReactElement } from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { Loader } from '../Loader'
-import { setButtonLoaderIntent } from './model/helpers'
-import { cn } from '$/shared/utils'
-
-const buttonConfig = cva(
-  'relative flex items-center justify-center gap-4 cursor-pointer rounded-sm w-max px-4 outline-offset-4 outline-transparent outline-2 desk-body-regular-l transition duration-12 active:scale-[0.97] disabled:pointer-events-none',
-  {
-    variants: {
-      intent: {
-        primary:
-          'bg-color-primary-default text-color-white outline-offset-[3px] hover:bg-color-primary-hover  active:bg-color-primary-hover  focus:bg-color-primary-default focus:outline-primary-focus  disabled:bg-color-primary-disabled',
-        secondary:
-          'bg-transparent text-color-primary-default border border-solid border-primary-default hover:bg-color-primary-tr-hover active:bg-color-primary-tr-pressed active:border-primary-hover  focus:outline-primary-focus  focus:bg-color-primary-tr-focus disabled:bg-color-blue-grey-200 disabled:text-color-primary-disabled disabled:border-transparent',
-        ghost:
-          'bg-transparent text-color-primary-default hover:bg-color-primary-tr-hover hover:text-color-primary-hover focus:bg-color-primary-tr-focus focus:outline-primary-focus active:bg-color-primary-tr-pressed active:text-color-primary-hover disabled:text-color-primary-disabled disabled:bg-transparent',
-        negative:
-          'bg-color-secondary-default text-color-white outline-offset-[3px] hover:bg-color-secondary-hover disabled:bg-color-secondary-disabled active:bg-color-secondary-hover focus:bg-color-secondary-default focus:outline-primary-focus'
-      },
-      size: {
-        sm: 'h-10',
-        md: 'h-12',
-        lg: 'h-14'
-      },
-      textFormat: {
-        capitalize: 'capitalize',
-        uppercase: 'uppercase',
-        lowercase: 'lowercase',
-        initial: 'initial'
-      },
-      isFull: {
-        true: 'w-full px-4'
-      },
-      isLoading: {
-        true: '',
-        false: ''
-      }
-    },
-    compoundVariants: [
-      {
-        intent: 'primary',
-        isLoading: true,
-        class: '!bg-color-primary-default'
-      },
-      {
-        intent: 'secondary',
-        isLoading: true,
-        class: '!bg-color-transparent  !border-primary-hover'
-      },
-      {
-        intent: 'ghost',
-        isLoading: true,
-        class: '!bg-color-blue-grey-200'
-      },
-      {
-        intent: 'negative',
-        isLoading: true,
-        class: '!bg-color-secondary-default'
-      }
-    ],
-    defaultVariants: {
-      intent: 'primary',
-      size: 'md',
-      textFormat: 'initial',
-      isFull: false
-    }
-  }
-)
-
-type TButtonConfig = VariantProps<typeof buttonConfig>
-export type TButtonIntents = 'primary' | 'secondary' | 'ghost' | 'negative'
-export interface IButtonProps extends ComponentProps<'button'>, TButtonConfig {
-  iconLeft?: ReactElement
-  iconRight?: ReactElement
-  isLoading?: boolean
-}
-
-export const Button = forwardRef<HTMLButtonElement, IButtonProps>(
-  (
-    {
-      intent,
-      size,
-      className,
-      children,
-      type = 'button',
-      iconLeft,
-      iconRight,
-      disabled = false,
-      isLoading = false,
-      isFull = false,
-      textFormat,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <button
-        ref={ref}
-        type={type}
-        disabled={disabled || isLoading}
-        className={cn(buttonConfig({ intent, size, textFormat, isLoading, isFull }), className)}
-        {...props}
-      >
-        {isLoading ? (
-          <Loader size='sm' intent={setButtonLoaderIntent(intent!)} />
-        ) : (
-          <>
-            {iconLeft && <span className='flex size-5 items-center justify-center'>{iconLeft}</span>}
-            {children}
-            {iconRight && <span className='flex size-5 items-center justify-center'>{iconRight}</span>}
-          </>
-        )}
-      </button>
-    )
-  }
-)

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

@@ -1 +0,0 @@
-export { Button, type IButtonProps } from './Button'

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

@@ -1,16 +0,0 @@
-import type { TButtonIntents } from '../Button'
-
-export const setButtonLoaderIntent = (intent: TButtonIntents) => {
-  switch (intent) {
-    case 'ghost':
-    case 'secondary':
-      return 'secondary'
-
-    case 'primary':
-    case 'negative':
-      return 'primary'
-
-    default:
-      return intent
-  }
-}

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 max-w-[450px] flex-col', classes?.container)}>
-            <div className={cn('flex items-center gap-2', classes?.wrapper)}>
-              <div
-                className={cn(
-                  'flex size-10 items-center justify-center rounded-full transition-all focus-within:bg-color-primary-tr-focus hover:bg-color-primary-tr-hover',
-                  classes?.field,
-                  { '!bg-color-transparent': disabled }
-                )}
-              >
-                <Root
-                  name={name}
-                  value={value}
-                  ref={ref}
-                  onCheckedChange={(e) => {
-                    onChange(e)
-                  }}
-                  className={cn(
-                    'flex size-6 cursor-pointer items-center justify-center rounded-sm border border-solid border-blue-grey-700 outline-none active:bg-color-primary-tr-pressed disabled:border-transparent data-[state=checked]:bg-color-primary-default data-[state=checked]:disabled:bg-color-primary-disabled data-[state=unchecked]:disabled:bg-color-blue-grey-300',
-                    { '!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 flex-1 cursor-pointer text-color-dark',
-                  { '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>
-}

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

@@ -1,90 +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,
-  onClickIcon,
-  onKeyDownIcon,
-  ...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(
-                  '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
-                )}
-                format={format}
-                allowEmptyFormatting={allowEmptyFormatting}
-                mask={mask}
-                onChange={(e) => {
-                  onChange(e)
-                  if (onInputChange) {
-                    onInputChange(e.target.value)
-                  }
-                }}
-                {...props}
-              />
-              <FieldAttachment
-                onClickIcon={onClickIcon}
-                onKeyDownIcon={onKeyDownIcon}
-                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('flex max-w-max 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 items-center gap-2', classes?.radioOption)}>
-                    <div
-                      className={cn(
-                        'flex size-10 items-center justify-center rounded-full transition-all focus-within:bg-color-primary-tr-focus hover:bg-color-primary-tr-hover',
-                        classes?.field,
-                        { '!bg-color-transparent': isDisabled }
-                      )}
-                    >
-                      <Item
-                        disabled={isDisabled}
-                        className={cn(
-                          'relative size-6 cursor-pointer rounded-full border-2 border-solid bg-color-transparent outline-none transition-all data-[state=checked]:border-primary-default data-[state=unchecked]:border-blue-grey-700',
-                          {
-                            'data-[state=checked]:!border-primary-disabled data-[state=unchecked]:border-transparent data-[state=unchecked]:bg-color-blue-grey-300':
-                              isDisabled
-                          },
-                          { '!border-negative': !!error?.message },
-                          classes?.input
-                        )}
-                        value={value}
-                        id={value}
-                      >
-                        <Indicator
-                          className={cn(
-                            'after:content-[" "] relative flex h-full w-full items-center justify-center 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(
-                        'desk-body-regular-l cursor-pointer 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/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(
-              'h-6 w-10 rounded-full bg-color-blue-grey-300 p-[2px] outline-2 outline-offset-4 outline-transparent focus:outline-primary-focus data-[state=checked]:bg-color-primary-default hover:data-[state=checked]:bg-color-primary-hover',
-              { 'data-[state=checked]:!bg-color-primary-disabled data-[state=unchecked]:!bg-color-blue-grey-200': disabled },
-              classes?.input
-            )}
-          >
-            <SwitchPrimitive.Thumb
-              id={inputId}
-              className={cn(
-                'block size-5 rounded-full bg-color-white transition-all duration-200 will-change-transform data-[state=checked]:translate-x-4',
-                classes?.thumb
-              )}
-            />
-          </SwitchPrimitive.Root>
-          <div className={cn('flex flex-col', classes?.textBlock)}>
-            <label
-              className={cn('desk-body-regular-l text-color-dark', { '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,96 +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,
-  onClickIcon,
-  onKeyDownIcon,
-  ...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(
-              'relative flex h-[120px] flex-col rounded-sm border border-solid border-transparent bg-color-blue-grey-100 transition-colors hover:bg-color-blue-grey-200 focus:outline-blue-grey-800 active:bg-color-blue-grey-100 group-focus-within:border-blue-grey-800',
-              { '!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('desk-body-regular-s text-color-tetriary', { 'text-color-disabled': disabled }, classes?.label)}
-                htmlFor={inputId}
-              >
-                {label}
-              </label>
-              <FieldAttachment
-                onClickIcon={onClickIcon}
-                onKeyDownIcon={onKeyDownIcon}
-                badge={badge}
-                icon={icon}
-                error={!!error?.message}
-                classes={classes}
-                isTextarea
-                swapPosition={swapPosition}
-              />
-            </div>
-
-            <div className={cn('flex w-full items-start px-4 py-2', classes?.scrollArea)}>
-              <textarea
-                aria-invalid={error?.message ? 'true' : 'false'}
-                ref={ref}
-                className={cn(
-                  'customScrollbar-y desk-body-regular-l h-[78px] w-full flex-1 resize-none rounded-md bg-color-transparent text-color-dark outline-none transition-all placeholder:text-color-blue-grey-600',
-                  { '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>
-      )}
-    />
-  )
-}