@komensal/ui 0.1.0 → 0.2.0

package/src/components/command.tsx

@@ -1,125 +0,0 @@
-import { type DialogProps } from '@radix-ui/react-dialog'
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
-import { Command as CommandPrimitive } from 'cmdk'
-import * as React from 'react'
-
-import { cn } from '../utils'
-import { Dialog, DialogContent } from './dialog'
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    className={cn('bg-surface text-foreground flex h-full w-full flex-col overflow-hidden rounded-md', className)}
-    ref={ref}
-    {...props}
-  />
-))
-Command.displayName = CommandPrimitive.displayName
-
-type CommandDialogProps = DialogProps
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className='overflow-hidden p-0'>
-        <Command className='**:[[cmdk-group-heading]]:text-muted [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3'>
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className='flex items-center border-b px-3' cmdk-input-wrapper=''>
-    <MagnifyingGlassIcon className='mr-2 h-4 w-4 shrink-0 opacity-50' />
-    <CommandPrimitive.Input
-      className={cn(
-        'placeholder:text-placeholder flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
-))
-
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List className={cn('max-h-75 overflow-x-hidden overflow-y-auto', className)} ref={ref} {...props} />
-))
-
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => <CommandPrimitive.Empty className='py-6 text-center text-sm' ref={ref} {...props} />)
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    className={cn(
-      'text-foreground **:[[cmdk-group-heading]]:text-muted overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium',
-      className
-    )}
-    ref={ref}
-    {...props}
-  />
-))
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator className={cn('bg-border -mx-1 h-px', className)} ref={ref} {...props} />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    className={cn(
-      'relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
-      className
-    )}
-    ref={ref}
-    {...props}
-  />
-))
-
-CommandItem.displayName = CommandPrimitive.Item.displayName
-
-const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn('text-muted ml-auto text-xs tracking-widest', className)} {...props} />
-}
-CommandShortcut.displayName = 'CommandShortcut'
-
-export {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut
-}

package/src/components/dialog.tsx

@@ -1,118 +0,0 @@
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { Cross2Icon } from '@radix-ui/react-icons'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { cn } from '../utils'
-
-const Dialog = DialogPrimitive.Root
-
-const DialogTrigger = DialogPrimitive.Trigger
-
-const DialogPortal = DialogPrimitive.Portal
-
-const DialogClose = DialogPrimitive.Close
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & { isAbsolute?: boolean }
->(({ className, isAbsolute = false, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-foreground/10 z-60 backdrop-blur-xs',
-      isAbsolute ? 'absolute inset-0' : 'fixed inset-0',
-      className
-    )}
-    ref={ref}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
-  container?: HTMLElement | null
-  isAbsolute?: boolean
-  isCloseIcon?: boolean
-  overlayClassName?: string
-}
-
-const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
-  ({ children, className, container, isAbsolute = false, isCloseIcon = false, overlayClassName, ...props }, ref) => {
-    const { t } = useTranslation('ui')
-
-    return (
-      <DialogPortal container={container}>
-        <DialogOverlay className={overlayClassName} isAbsolute={isAbsolute} />
-
-        <DialogPrimitive.Content
-          className={cn(
-            'bg-surface data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] z-70 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-0 rounded-2xl p-6 px-0 shadow-lg duration-200 outline-none lg:px-0',
-            isAbsolute ? 'absolute top-[50%] left-[50%]' : 'fixed top-[50%] left-[50%]',
-            className
-          )}
-          ref={ref}
-          {...props}
-        >
-          {children}
-          {isCloseIcon && (
-            <DialogPrimitive.Close className='data-[state=open]:text-muted ring-offset-surface focus:ring-ring data-[state=open]:bg-hover border-border bg-border absolute top-11 right-8 flex h-8 w-8 min-w-8 cursor-pointer items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none'>
-              <Cross2Icon className='text-body hover:text-primary-dark h-4 w-4' />
-              <span className='sr-only'>{t('dialog.close')}</span>
-            </DialogPrimitive.Close>
-          )}
-        </DialogPrimitive.Content>
-      </DialogPortal>
-    )
-  }
-)
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
-)
-DialogHeader.displayName = 'DialogHeader'
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn('flex flex-col-reverse justify-center rounded-2xl sm:flex-row sm:space-x-2', className)}
-    {...props}
-  />
-)
-DialogFooter.displayName = 'DialogFooter'
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    className={cn('text-lg leading-none font-semibold tracking-tight', className)}
-    ref={ref}
-    {...props}
-  >
-    <span>{props.children}</span>
-  </DialogPrimitive.Title>
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description className={cn('text-muted text-sm', className)} ref={ref} {...props}>
-    <span>{props.children}</span>
-  </DialogPrimitive.Description>
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger
-}

package/src/components/form-fields/index.ts

@@ -1,5 +0,0 @@
-export * from './input-field'
-export * from './label-field'
-export * from './map-picker-field'
-export * from './otp-field'
-export * from './select-field'

package/src/components/form-fields/input-field.tsx

@@ -1,131 +0,0 @@
-import { useState } from 'react'
-import { Control, FieldValues, Path } from 'react-hook-form'
-import { useTranslation } from 'react-i18next'
-import { FaRegEye, FaRegEyeSlash } from 'react-icons/fa6'
-import { RxCross2 } from 'react-icons/rx'
-
-import { cn } from '../../utils'
-import { FormControl, FormField, FormItem, FormMessage } from '../form'
-import { Input } from '../input'
-import { LabelField } from './label-field'
-
-interface InputFieldProps<T extends FieldValues = FieldValues> {
-  control: Control<T>
-  disabled?: boolean
-  inputClassName?: string
-  isClearable?: boolean
-  label?: string
-  labelClassName?: string
-  mainClassName?: string
-  name: Path<T>
-  onClear?: () => void
-  placeholder?: string
-  type?: string
-  visualRequired?: boolean
-}
-
-export const InputField = <T extends FieldValues = FieldValues>({
-  control,
-  disabled,
-  inputClassName,
-  isClearable,
-  label,
-  labelClassName,
-  mainClassName,
-  name,
-  onClear,
-  placeholder,
-  type = 'text',
-  visualRequired
-}: InputFieldProps<T>) => {
-  const { t } = useTranslation('ui')
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false)
-
-  const togglePasswordVisibility = () => {
-    setIsPasswordVisible((prev) => !prev)
-  }
-
-  const isPassword = type === 'password'
-  const inputType = isPassword ? (isPasswordVisible ? 'text' : 'password') : type === 'plate' ? 'text' : type
-
-  const isPlate = type === 'plate'
-
-  return (
-    <FormField
-      control={control}
-      name={name}
-      render={({ field, fieldState }) => {
-        const hasError = !!fieldState.error
-
-        return (
-          <FormItem className={cn('flex flex-col', mainClassName)}>
-            <LabelField
-              label={label}
-              labelClassName={cn(labelClassName, hasError && 'text-destructive')}
-              name={name}
-              visualRequired={visualRequired}
-            />
-            <FormControl>
-              <div className='relative'>
-                <Input
-                  {...field}
-                  autoComplete={isPassword ? 'current-password' : undefined}
-                  className={cn(
-                    inputClassName,
-                    isPlate && 'uppercase',
-                    hasError && 'border-destructive',
-                    isPassword && 'pr-10 [&::-ms-reveal]:hidden'
-                  )}
-                  data-no-password-toggle
-                  disabled={disabled}
-                  maxLength={isPlate ? 6 : undefined}
-                  min={type === 'number' ? 0 : undefined}
-                  onChange={(e) => {
-                    let value = e.target.value
-
-                    if (isPlate) {
-                      value = value
-                        .toUpperCase()
-                        .replace(/[^A-Z0-9]/g, '')
-                        .slice(0, 6)
-                    }
-
-                    field.onChange(value)
-                  }}
-                  placeholder={placeholder}
-                  type={inputType}
-                  value={field.value ?? ''}
-                />
-
-                <div className='absolute inset-y-0 right-0 flex items-center space-x-2 pr-2'>
-                  {field.value && isClearable && (
-                    <button
-                      className='focus:outline-none'
-                      onClick={onClear}
-                      title={t('inputField.clear')}
-                      type='button'
-                    >
-                      <RxCross2 size={18} />
-                    </button>
-                  )}
-
-                  {type === 'password' && (
-                    <button
-                      className='focus:outline-none'
-                      onClick={togglePasswordVisibility}
-                      title={isPasswordVisible ? t('inputField.hidePassword') : t('inputField.showPassword')}
-                      type='button'
-                    >
-                      {isPasswordVisible ? <FaRegEye size={18} /> : <FaRegEyeSlash size={20} />}
-                    </button>
-                  )}
-                </div>
-              </div>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )
-      }}
-    />
-  )
-}

package/src/components/form-fields/label-field.tsx

@@ -1,20 +0,0 @@
-import { cn } from '../../utils'
-import { Label } from '../label'
-
-interface LabelFieldProps {
-  label?: string
-  labelClassName?: string
-  name: string
-  visualRequired?: boolean
-}
-
-export const LabelField = ({ label, labelClassName, name, visualRequired }: LabelFieldProps) => {
-  return (
-    <Label
-      className={cn('text-body mb-2 text-start text-sm leading-none font-normal tracking-normal', labelClassName)}
-      htmlFor={name}
-    >
-      <span>{label}</span> {visualRequired && <span className='text-destructive'> *</span>}
-    </Label>
-  )
-}

package/src/components/form-fields/map-picker-field.tsx

@@ -1,49 +0,0 @@
-import type { Control, FieldValues, Path } from 'react-hook-form'
-
-import { cn } from '../../utils'
-import { FormControl, FormField, FormItem, FormMessage } from '../form'
-import { GoogleMapPicker, type GoogleMapPickerProps } from '../google-map-picker'
-import { LabelField } from './label-field'
-
-type MapPickerFieldProps<T extends FieldValues> = Omit<GoogleMapPickerProps, 'hasError' | 'onChange' | 'value'> & {
-  control: Control<T>
-  label?: string
-  labelClassName?: string
-  mainClassName?: string
-  name: Path<T>
-  visualRequired?: boolean
-}
-
-export const MapPickerField = <T extends FieldValues>({
-  control,
-  label,
-  labelClassName,
-  mainClassName,
-  name,
-  visualRequired,
-  ...pickerProps
-}: MapPickerFieldProps<T>) => (
-  <FormField
-    control={control}
-    name={name}
-    render={({ field, fieldState }) => (
-      <FormItem className={cn('flex flex-col', mainClassName)}>
-        <LabelField
-          label={label}
-          labelClassName={cn(labelClassName, fieldState.error && 'text-destructive')}
-          name={name}
-          visualRequired={visualRequired}
-        />
-        <FormControl>
-          <GoogleMapPicker
-            {...pickerProps}
-            hasError={!!fieldState.error}
-            onChange={field.onChange}
-            value={field.value ?? ''}
-          />
-        </FormControl>
-        <FormMessage />
-      </FormItem>
-    )}
-  />
-)

package/src/components/form-fields/otp-field.tsx

@@ -1,76 +0,0 @@
-import React from 'react'
-import { Control, FieldPath, FieldValues } from 'react-hook-form'
-
-import { cn } from '../../utils'
-import { FormControl, FormField, FormItem, FormMessage } from '../form'
-import { Label } from '../label'
-import { InputOTP, InputOTPGroup, InputOTPSlot } from '../otp-input'
-
-interface OtpInputFormFieldProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> {
-  autoFocus?: boolean
-  className?: string
-  containerClassName?: string
-  control: Control<TFieldValues>
-  disabled?: boolean
-  label?: string
-  labelClassName?: string
-  name: TName
-  otpLength?: number
-}
-
-export function OTPField<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-  autoFocus,
-  className,
-  containerClassName,
-  control,
-  disabled,
-  label,
-  labelClassName,
-  name,
-  otpLength = 6
-}: OtpInputFormFieldProps<TFieldValues, TName>) {
-  return (
-    <FormField
-      control={control}
-      name={name}
-      render={({ field, fieldState }) => (
-        <FormItem className={cn('flex flex-col', className)}>
-          {label ? (
-            <Label className={cn('text-start text-sm font-semibold', labelClassName)} htmlFor={name}>
-              {label}
-            </Label>
-          ) : null}
-          <FormControl>
-            <InputOTP
-              aria-invalid={fieldState.invalid || undefined}
-              autoComplete='one-time-code'
-              autoFocus={autoFocus}
-              containerClassName={cn('justify-center', containerClassName)}
-              disabled={disabled}
-              id={name}
-              inputMode='numeric'
-              maxLength={otpLength}
-              onChange={(val: string) => field.onChange(val)}
-              onPaste={(e: React.ClipboardEvent<HTMLInputElement>) => field.onChange(e.clipboardData.getData('text'))}
-              pattern='[0-9]*'
-              value={field.value ?? ''}
-            >
-              <InputOTPGroup>
-                {Array.from({ length: otpLength }).map((_, i) => (
-                  <InputOTPSlot aria-invalid={fieldState.invalid || undefined} index={i} key={i} />
-                ))}
-              </InputOTPGroup>
-            </InputOTP>
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      )}
-    />
-  )
-}

package/src/components/form-fields/select-field.tsx

@@ -1,77 +0,0 @@
-import { Control, FieldValues, Path } from 'react-hook-form'
-
-import { cn } from '../../utils'
-import { FormControl, FormField, FormItem, FormMessage } from '../form'
-import { SelectInput } from '../select-input'
-import { LabelField } from './label-field'
-
-export interface Options {
-  label: string
-  value: number | string
-}
-
-interface SelectFieldProps<T extends FieldValues = FieldValues> {
-  ableDeleteOption?: boolean
-  className?: string
-  control: Control<T>
-  disabled?: boolean
-  label?: string
-  labelClassName?: string
-  mainClassName?: string
-  name: Path<T>
-  onChange?: (...event: unknown[]) => void
-  options: Options[] | undefined
-  placeholder?: string
-  search?: boolean
-  visualRequired?: boolean
-}
-
-export const SelectField = <T extends FieldValues = FieldValues>({
-  ableDeleteOption,
-  className,
-  control,
-  disabled,
-  label,
-  labelClassName,
-  mainClassName,
-  name,
-  options,
-  placeholder,
-  search,
-  visualRequired
-}: SelectFieldProps<T>) => {
-  return (
-    <FormField
-      control={control}
-      name={name}
-      render={({ field, fieldState }) => {
-        const hasError = !!fieldState.error
-
-        return (
-          <FormItem className={cn('flex flex-col', mainClassName)}>
-            <LabelField
-              label={label}
-              labelClassName={cn(labelClassName, hasError && 'text-destructive')}
-              name={name}
-              visualRequired={visualRequired}
-            />
-            <FormControl>
-              <SelectInput
-                ableDeleteOption={ableDeleteOption}
-                className={className}
-                disabled={disabled}
-                error={fieldState.error}
-                items={options}
-                onChange={field.onChange}
-                placeholder={placeholder}
-                search={search}
-                value={typeof field.value === 'number' ? `${field.value}` : field.value}
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )
-      }}
-    />
-  )
-}