@komensal/ui 0.1.0 → 0.2.0

package/src/components/select-input.tsx

@@ -1,236 +0,0 @@
-import { ChevronDown, ChevronUp, Clock, XIcon } from 'lucide-react'
-import React, { cloneElement, JSX, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { FieldError, Noop } from 'react-hook-form'
-import { useTranslation } from 'react-i18next'
-
-import { cn, inputBase, inputDisabled, inputFocus, inputPlaceholder } from '../utils'
-import { Button } from './button'
-import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from './command'
-import { Input } from './input'
-import { Popover, PopoverContent, PopoverTrigger } from './popover'
-import { Spinner } from './spinner'
-
-interface SelectInputProps<Label extends string, Value extends string> {
-  ableDeleteOption?: boolean
-  className?: string
-  disabled?: boolean
-  error?: FieldError
-  items?: null | Record<Label | Value, number | string>[]
-  labelKey?: string
-  leftIcon?: JSX.Element
-  loading?: boolean
-  onBlur?: Noop
-  onChange?: (...event: unknown[]) => void
-  onValueChangeCallBack?: (item: { label: string; value: string }) => void
-  placeholder?: string
-  placeholderClassName?: string
-  search?: boolean
-  timeField?: boolean
-  value?: string
-  valueKey?: string
-}
-
-export const SelectInput = <Label extends string, Value extends string>(props: SelectInputProps<Label, Value>) => {
-  const { t } = useTranslation('ui')
-  const {
-    ableDeleteOption,
-    className,
-    disabled = false,
-    error,
-    items,
-    labelKey = 'label',
-    leftIcon,
-    loading = false,
-    onBlur,
-    onChange,
-    onValueChangeCallBack = () => undefined,
-    placeholder,
-    placeholderClassName = '',
-    search = false,
-    timeField = false,
-    value = '',
-    valueKey = 'value'
-  } = props
-
-  const resolvedPlaceholder = placeholder ?? t('selectInput.placeholder')
-
-  const divRef = useRef<HTMLButtonElement | null>(null)
-  const [open, setOpen] = useState<boolean>(false)
-  const [width, setWidth] = useState<number>(0)
-  const [query, setQuery] = useState<string>('')
-  const [valueItem, setValueItem] = useState(value)
-
-  const normalizeString = (str: string): string => str.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase()
-
-  const normalizedItems = useMemo(() => {
-    if (!items) return [] as Record<Label | Value, string>[]
-    return items.map((it) => ({
-      ...it,
-      [labelKey]: String(it[labelKey as Label]),
-      [valueKey]: String(it[valueKey as Value])
-    })) as Record<Label | Value, string>[]
-  }, [items, labelKey, valueKey])
-
-  const filteredOptions = useMemo(() => {
-    if (!query) return normalizedItems
-    return normalizedItems.filter((el) =>
-      normalizeString(el[labelKey as Label] as string).includes(normalizeString(query))
-    )
-  }, [normalizedItems, labelKey, query])
-
-  const onValueChange = useCallback(
-    (val: string) => {
-      if (!normalizedItems.length) return
-      const item = normalizedItems.find((i) => i[valueKey as Value] === val)
-      if (item) {
-        onValueChangeCallBack({
-          label: item[labelKey as Label],
-          value: item[valueKey as Value]
-        })
-        setValueItem(val)
-      }
-    },
-    [normalizedItems, labelKey, valueKey, onValueChangeCallBack]
-  )
-
-  const buttonClassName = useMemo(
-    () =>
-      cn(
-        inputBase,
-        inputFocus,
-        'hover:bg-surface',
-        disabled && inputDisabled,
-        error && 'border-destructive',
-        className
-      ),
-    [disabled, error, className]
-  )
-
-  const updateWidth = () => {
-    if (divRef.current) {
-      const { width } = divRef.current.getBoundingClientRect()
-      setWidth(width)
-    }
-  }
-
-  useEffect(() => {
-    updateWidth()
-    window.addEventListener('resize', updateWidth)
-    return () => window.removeEventListener('resize', updateWidth)
-  }, [])
-
-  useEffect(() => {
-    setValueItem(value)
-  }, [value])
-
-  return (
-    <div className='flex flex-col gap-1'>
-      <div className='relative flex flex-col justify-center'>
-        <Popover onOpenChange={setOpen} open={open}>
-          <PopoverTrigger asChild>
-            <Button
-              aria-expanded={open}
-              className={buttonClassName}
-              disabled={disabled}
-              isLoading={loading}
-              onBlur={onBlur}
-              ref={divRef}
-              role='combobox'
-              variant='primary'
-            >
-              {loading ? (
-                <>
-                  {t('selectInput.loading')} <Spinner />
-                </>
-              ) : (
-                <div className='relative flex h-5 w-full items-center'>
-                  <div className='flex w-full max-w-[90%] items-center truncate'>
-                    {leftIcon && (
-                      <span className='mr-2 shrink-0'>{cloneElement(leftIcon, { size: 20, strokeWidth: 1 })}</span>
-                    )}
-                    {valueItem ? (
-                      filteredOptions.find((i) => i[valueKey as Value] === valueItem)?.[labelKey as Label]
-                    ) : (
-                      <span className={cn(inputPlaceholder, placeholderClassName)}>{resolvedPlaceholder}</span>
-                    )}
-                  </div>
-                  {timeField ? (
-                    <div className='absolute top-0.5 right-0'>
-                      <Clock className='ml-2 h-4 w-4 shrink-0 opacity-50' />
-                    </div>
-                  ) : (
-                    <div className='absolute top-0.5 right-0 flex gap-2'>
-                      {ableDeleteOption && (
-                        <XIcon
-                          className='z-100 h-4 w-4 shrink-0 opacity-50'
-                          onClick={(e: React.MouseEvent<SVGSVGElement>) => {
-                            e.preventDefault()
-                            e.stopPropagation()
-                            onChange?.('')
-                            onValueChange('')
-                            setValueItem('')
-                            setQuery('')
-                            setOpen(false)
-                          }}
-                        />
-                      )}
-                      {!open ? (
-                        <ChevronDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
-                      ) : (
-                        <ChevronUp className='ml-2 h-4 w-4 shrink-0 opacity-50' />
-                      )}
-                    </div>
-                  )}
-                </div>
-              )}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent
-            className='bg-surface border-border z-100 rounded-sm p-1'
-            onOpenAutoFocus={(e) => e.preventDefault()}
-            style={{ maxWidth: 'auto', minWidth: `${width}px`, width: `${width}px` }}
-          >
-            <Command className='flex w-full flex-col gap-2'>
-              {search && (
-                <Input
-                  className='mb-1 rounded-sm'
-                  onChange={(e) => setQuery(e.target.value)}
-                  placeholder={t('selectInput.search')}
-                  value={query}
-                />
-              )}
-              <CommandEmpty className='text-center'>{t('selectInput.noResults')}</CommandEmpty>
-              <CommandList>
-                <CommandGroup className='p-0'>
-                  {filteredOptions.map((item) => {
-                    const labelValue = item[labelKey as Label] as string
-                    const valueValue = item[valueKey as Value] as string
-
-                    return (
-                      <CommandItem
-                        className={cn(
-                          'hover:bg-hover mt-0.5 mb-0.5 flex cursor-pointer items-center gap-2 rounded-sm py-2 pl-3',
-                          valueValue === value && 'bg-inactive'
-                        )}
-                        key={valueValue}
-                        onSelect={(currentValue: string) => {
-                          onChange?.(currentValue)
-                          onValueChange(currentValue)
-                          setOpen(false)
-                          setTimeout(() => setQuery(''), 100)
-                        }}
-                        value={valueValue}
-                      >
-                        {labelValue.trim()}
-                      </CommandItem>
-                    )
-                  })}
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </Popover>
-      </div>
-    </div>
-  )
-}

package/src/components/select.tsx

@@ -1,143 +0,0 @@
-import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'
-import * as SelectPrimitive from '@radix-ui/react-select'
-import * as React from 'react'
-
-import { cn } from '../utils'
-
-const Select = SelectPrimitive.Root
-
-const SelectGroup = SelectPrimitive.Group
-
-const SelectValue = SelectPrimitive.Value
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ children, className, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    className={cn(
-      'placeholder:text-placeholder border-border ring-offset-surface focus:ring-ring flex h-9 w-full items-center justify-between rounded-xl border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm focus:ring-0 focus:outline-none disabled:cursor-not-allowed [&>span]:line-clamp-1',
-      className
-    )}
-    ref={ref}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className='h-4 w-4 opacity-50' />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    className={cn('flex cursor-default items-center justify-center py-1', className)}
-    ref={ref}
-    {...props}
-  >
-    <ChevronUpIcon />
-  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    className={cn('flex cursor-default items-center justify-center py-1', className)}
-    ref={ref}
-    {...props}
-  >
-    <ChevronDownIcon />
-  </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ children, className, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      className={cn(
-        'border-border text-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-lg border shadow-md',
-        position === 'popper' &&
-          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        className
-      )}
-      position={position}
-      ref={ref}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          'p-1',
-          position === 'popper' && 'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label className={cn('px-2 py-1.5 text-sm font-semibold', className)} ref={ref} {...props} />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ children, className, ...props }, ref) => (
-  <SelectPrimitive.Item
-    className={cn(
-      'focus:text-foreground focus:bg-hover relative flex w-full cursor-default items-center rounded-md py-1.5 pr-8 pl-2 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50',
-      className
-    )}
-    ref={ref}
-    {...props}
-  >
-    <span className='absolute right-2 flex h-3.5 w-3.5 items-center justify-center'>
-      <SelectPrimitive.ItemIndicator>
-        <CheckIcon className='h-4 w-4' />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>
-      <span>{children}</span>
-    </SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator className={cn('bg-border -mx-1 my-1 h-px', className)} ref={ref} {...props} />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue
-}

package/src/components/spinner.tsx

@@ -1,61 +0,0 @@
-import clsx from 'clsx'
-import { useTranslation } from 'react-i18next'
-
-const sizes = {
-  lg: '70',
-  md: '50',
-  sm: '20',
-  xl: '100',
-  xs: '5'
-}
-
-const variants = {
-  light: 'var(--color-spinner-light)',
-  primary: 'var(--color-spinner-primary)',
-  secondary: 'var(--color-spinner-secondary)'
-}
-
-export interface SpinnerProps {
-  className?: string
-  size?: keyof typeof sizes
-  variant?: keyof typeof variants
-}
-
-export const Spinner = ({ className = '', size = 'md', variant = 'primary' }: SpinnerProps) => {
-  const { t } = useTranslation('ui')
-  return (
-    <>
-      <svg
-        fill='currentColor'
-        height={sizes[size]}
-        stroke={variants[variant]}
-        viewBox='0 0 100 100'
-        width={sizes[size]}
-        xmlns='http://www.w3.org/2000/svg'
-      >
-        <g className={clsx('spinner_V8m1', sizes[size], variants[variant], className)}>
-          <circle cx='50' cy='50' fill='none' opacity='0.25' r='35' stroke='currentColor' strokeWidth='10' />
-          <circle
-            cx='50'
-            cy='50'
-            fill='none'
-            r='35'
-            stroke='currentColor'
-            strokeDasharray='164.93361431346415 56.97787143782138'
-            strokeWidth='10'
-          >
-            <animateTransform
-              attributeName='transform'
-              dur='1s'
-              keyTimes='0;1'
-              repeatCount='indefinite'
-              type='rotate'
-              values='0 50 50;360 50 50'
-            />
-          </circle>
-        </g>
-      </svg>
-      <span className='sr-only'>{t('spinner.loading')}</span>
-    </>
-  )
-}

package/src/components/step-header.tsx

@@ -1,16 +0,0 @@
-import type { ReactNode } from 'react'
-
-import { cn } from '../utils'
-
-interface StepHeaderProps {
-  subtitle?: ReactNode
-  subtitleClassName?: string
-  title: string
-}
-
-export const StepHeader = ({ subtitle, subtitleClassName, title }: StepHeaderProps) => (
-  <div className='flex flex-col gap-1'>
-    <h1 className='text-title text-2xl font-bold'>{title}</h1>
-    {subtitle !== undefined && <p className={cn('text-subtitle text-sm', subtitleClassName)}>{subtitle}</p>}
-  </div>
-)

package/src/components/stepper.tsx

@@ -1,69 +0,0 @@
-import { CheckIcon } from 'lucide-react'
-
-import { cn } from '../utils'
-
-export interface StepperStep {
-  label: string
-}
-
-interface StepperProps {
-  activeIndex: number
-  className?: string
-  intermediate?: boolean
-  steps: StepperStep[]
-}
-
-export const Stepper = ({ activeIndex, className, intermediate = false, steps }: StepperProps) => {
-  return (
-    <div className={cn('flex w-full items-start', className)}>
-      {steps.map((step, index) => {
-        const isCompleted = intermediate ? index <= activeIndex : index < activeIndex
-        const isActive = !intermediate && index === activeIndex
-
-        return (
-          <div className='flex flex-1 flex-col items-center' key={step.label}>
-            <div className='flex w-full items-center'>
-              <div
-                className={cn(
-                  'h-0.75 flex-1 self-center',
-                  isCompleted || isActive ? 'bg-primary' : 'bg-inactive',
-                  index === 0 && 'rounded-l-full'
-                )}
-              />
-              <div
-                aria-current={isActive ? 'step' : undefined}
-                className={cn(
-                  'flex h-5.5 w-5.5 shrink-0 items-center justify-center rounded-full border text-xs font-semibold transition-colors md:h-6.5 md:w-6.5',
-                  isCompleted && 'bg-primary border-primary text-inverse',
-                  isActive && 'bg-primary border-primary text-inverse',
-                  !isCompleted && !isActive && 'bg-inactive border-inactive text-surface'
-                )}
-              >
-                {isCompleted ? <CheckIcon className='h-4 w-4' /> : index + 1}
-              </div>
-              <div
-                className={cn(
-                  'relative h-0.75 flex-1 self-center',
-                  isCompleted ? 'bg-primary' : 'bg-inactive',
-                  index === steps.length - 1 && 'rounded-r-full'
-                )}
-              >
-                {index === 0 && (
-                  <div
-                    className={cn(
-                      'absolute top-1/2 right-0 h-2.25 w-2.25 translate-x-1/2 -translate-y-1/2 rounded-full transition-colors',
-                      isCompleted ? 'bg-primary' : 'bg-inactive'
-                    )}
-                  />
-                )}
-              </div>
-            </div>
-            <span className={cn('mt-1 text-xs font-normal', isCompleted || isActive ? 'text-primary' : 'text-muted')}>
-              {step.label}
-            </span>
-          </div>
-        )
-      })}
-    </div>
-  )
-}

package/src/components/toast/index.ts

@@ -1,2 +0,0 @@
-export { Toast } from './toast'
-export { ToastProvider } from './toast-provider'

package/src/components/toast/toast-provider.tsx

@@ -1,123 +0,0 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
-
-import { ToastOptions, ToastPosition, ToastType } from '../../types/toast'
-import { registerToastEmitter } from '../../utils/toast-emitter'
-import { Toast } from './toast'
-
-interface ToastItem extends ToastOptions {
-  id: string
-  type: ToastType
-}
-
-export function ToastProvider() {
-  const [toasts, setToasts] = useState<ToastItem[]>([])
-  const itemRefs = useRef(new Map<string, HTMLDivElement>())
-  const prevRects = useRef(new Map<string, DOMRect>())
-
-  const showToast = useCallback((type: ToastType, options: ToastOptions) => {
-    setToasts((prev) => [
-      ...prev,
-      {
-        duration: 2500,
-        id: crypto.randomUUID(),
-        position: 'top-right',
-        type,
-        ...options
-      }
-    ])
-  }, [])
-
-  const removeToast = useCallback((id: string) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id))
-  }, [])
-
-  useEffect(() => {
-    registerToastEmitter(showToast)
-    return () => registerToastEmitter(null)
-  }, [showToast])
-
-  const grouped = useMemo(() => {
-    return toasts.reduce<Partial<Record<ToastPosition, ToastItem[]>>>((acc, toast) => {
-      const pos = toast.position ?? 'top'
-      acc[pos] = [...(acc[pos] ?? []), toast]
-      return acc
-    }, {})
-  }, [toasts])
-
-  useLayoutEffect(() => {
-    const newRects = new Map<string, DOMRect>()
-
-    itemRefs.current.forEach((el, id) => {
-      newRects.set(id, el.getBoundingClientRect())
-    })
-
-    newRects.forEach((newRect, id) => {
-      const prevRect = prevRects.current.get(id)
-      const el = itemRefs.current.get(id)
-      if (!el || !prevRect) return
-
-      const dy = prevRect.top - newRect.top
-      if (dy === 0) return
-
-      el.style.transform = `translateY(${dy}px)`
-      el.style.transition = 'transform 0s'
-
-      requestAnimationFrame(() => {
-        el.style.transition = 'transform 200ms ease-out'
-        el.style.transform = ''
-      })
-    })
-
-    prevRects.current = newRects
-  }, [toasts])
-
-  const setItemRef = useCallback((id: string) => {
-    return (el: HTMLDivElement | null) => {
-      if (!el) {
-        itemRefs.current.delete(id)
-        prevRects.current.delete(id)
-        return
-      }
-      itemRefs.current.set(id, el)
-    }
-  }, [])
-
-  return (
-    <>
-      {Object.entries(grouped).map(([position, list]) => (
-        <div className={`fixed z-4000 ${getPositionClass(position as ToastPosition)}`} key={position}>
-          <div className='relative flex flex-col gap-3'>
-            {list.map((toast) => (
-              <div key={toast.id} ref={setItemRef(toast.id)}>
-                <Toast
-                  duration={toast.duration}
-                  id={toast.id}
-                  onClose={removeToast}
-                  subtitle={toast.subtitle}
-                  title={toast.title}
-                  type={toast.type}
-                />
-              </div>
-            ))}
-          </div>
-        </div>
-      ))}
-    </>
-  )
-}
-
-function getPositionClass(position: ToastPosition) {
-  const map: Record<ToastPosition, string> = {
-    bottom: 'bottom-6 left-1/2 -translate-x-1/2',
-    'bottom-left': 'bottom-6 left-6',
-    'bottom-right': 'bottom-6 right-6',
-    center: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
-    'middle-bottom': 'bottom-20 left-1/2 -translate-x-1/2',
-    'middle-top': 'top-20 left-1/2 -translate-x-1/2',
-    top: 'top-6 left-1/2 -translate-x-1/2',
-    'top-left': 'top-6 left-6',
-    'top-right': 'top-6 right-6'
-  }
-
-  return map[position]
-}