@scbt-ecom/ui 0.4.1 → 0.4.2

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

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

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

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

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

@@ -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 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

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

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

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

@@ -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('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

@@ -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(
+              '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

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