uibee 2.6.0 → 2.7.1

package/src/components/inputs/select.tsx

@@ -1,202 +1,167 @@
 'use client'
 
-import { useRef, useState } from 'react'
-import ToolTip from './tooltip'
-import Label from './label'
-import EraseButton from './erase'
+import { useState, useEffect } from 'react'
+import { useClickOutside } from '../../hooks'
+import { ChevronDown, X } from 'lucide-react'
+import { FieldWrapper } from './shared'
 
-type Option = {
-    value: string | number;
-    label: string;
-    image?: string
+export type Option = {
+    value: string | number
+    label: string
 }
 
-
-type SelectProps = {
+export type SelectProps = {
+    label?: string
     name: string
-    label: string
-    value: string | number
-    setValue: (_: string | number) => void
+    value?: string | number | null
+    onChange?: (value: string | number | null) => void
     options: Option[]
+    error?: string
     className?: string
-    tooltip?: string
+    disabled?: boolean
     required?: boolean
-    children?: React.ReactNode
-    color?: string
-}
-
-type SelectedOptionProps = {
-    value: string | number
-    selectedOption: Option | undefined
+    placeholder?: string
+    info?: string
+    clearable?: boolean
 }
 
 export default function Select({
-    name,
     label,
+    name,
     value,
+    onChange,
     options,
+    error,
     className,
-    tooltip,
+    disabled,
     required,
-    children,
-    setValue,
-    color
+    placeholder = 'Select an option',
+    info,
+    clearable = true,
 }: SelectProps) {
-    const [hasBlured, setHasBlured] = useState(false)
-    const selectRef = useRef<HTMLSelectElement | null>(null)
-    const selectedOption = options.find((o) => o.value === value)
+    const [isOpen, setIsOpen] = useState(false)
+    const [selectedOption, setSelectedOption] = useState<Option | undefined>(
+        options.find(opt => opt.value === value)
+    )
 
-    function handleChoose(value: string | number) {
-        setValue(value)
-        setHasBlured(true)
-        if (selectRef.current) {
-            selectRef.current.value = String(value)
-            selectRef.current.blur()
-        }
-    }
+    useEffect(() => {
+        setSelectedOption(options.find(opt => opt.value === value))
+    }, [value, options])
 
-    return (
-        <div className={`w-full ${className}`}>
-            <div className='relative flex items-center'>
-                <select
-                    ref={selectRef}
-                    name={name}
-                    className={
-                        'peer cursor-pointer block px-2.5 pb-2.5 pt-4 ' +
-                        'w-full text-sm rounded-lg border-[0.10rem] ' +
-                        'appearance-none border-login-200 focus:ring-0 ' +
-                        'focus:outline-none focus:border-login-50 ' +
-                        `${color ? color : 'bg-login-800'}`
-                    }
-                    value={value}
-                    onChange={(e) => {
-                        setValue(e.target.value)
-                        setHasBlured(true)
-                    }}
-                    onBlur={() => setHasBlured(true)}
-                    onMouseDown={(e) => {
-                        e.preventDefault()
-                        selectRef.current?.focus()
-                    }}
-                    required={required}
-                >
-                    <option value='' hidden />
-                    {options.map((option) => (
-                        <option key={option.value} value={option.value}>
-                            {option.label}
-                        </option>
-                    ))}
-                </select>
+    const containerRef = useClickOutside<HTMLDivElement>(() => setIsOpen(false))
 
-                <Label
-                    label={label}
-                    value={value}
-                    required={required}
-                    color={color}
-                    showRequired={required && !value && hasBlured}
-                />
-
-                {value && (
-                    <EraseButton
-                        setData={(v: string) => {
-                            setValue(v)
-                            setHasBlured(true)
-                        }}
-                    />
-                )}
-                {!value && tooltip && <ToolTip info={tooltip} />}
+    const handleSelect = (option: Option) => {
+        if (disabled) return
+        setSelectedOption(option)
+        setIsOpen(false)
+        if (onChange) {
+            onChange(option.value)
+        }
+    }
 
-                <SelectContent
-                    options={options}
-                    value={value}
-                    selectedOption={selectedOption}
-                    handleChoose={handleChoose}
-                    color={color}
-                />
-            </div>
-            {children}
-        </div>
-    )
-}
+    const handleClear = (e: React.MouseEvent) => {
+        e.stopPropagation()
+        if (disabled) return
+        setSelectedOption(undefined)
+        if (onChange) {
+            onChange(null)
+        }
+    }
 
-function SelectContent({
-    options,
-    value,
-    selectedOption,
-    handleChoose,
-    color
-}: {
-    options: Option[]
-    value: string | number
-    selectedOption: Option | undefined
-    handleChoose: (value: string | number) => void
-    color?: string
-}) {
     return (
-        <div
-            className={
-                'hidden peer-focus:block absolute left-0 ' +
-                'right-0 top-full mt-1 z-50'
-            }
+        <FieldWrapper
+            label={label}
+            name={name}
+            required={required}
+            info={info}
+            error={error}
+            className={className}
         >
-            <div
-                className={
-                    `${color ? color : 'bg-login-800'}` + ' border-[0.10rem] border-login-200 ' +
-                    'rounded-lg shadow-lg p-0 max-h-72 overflow-hidden'
-                }
-            >
-                <div className='max-h-72 overflow-auto'>
-                    <SelectedOption
-                        value={value}
-                        selectedOption={selectedOption}
-                    />
-                    <div className='p-2'>
-                        {options
-                            .filter((o) => o.value !== value)
-                            .map((opt) => (
-                                <button
-                                    key={opt.value}
-                                    type='button'
-                                    className={
-                                        'cursor-pointer w-full flex ' +
-                                        'items-center gap-3 px-2 py-2 ' +
-                                        'text-sm hover:bg-surface ' +
-                                        'rounded hover:bg-login-600'
-                                    }
-                                    onMouseDown={(e) => {
-                                        e.preventDefault()
-                                        handleChoose(opt.value)
-                                    }}
-                                >
-                                    <span className='text-left'>
-                                        {opt.label}
-                                    </span>
-                                </button>
-                            ))}
+            <div className='relative' ref={containerRef}>
+                <button
+                    type='button'
+                    onClick={() => !disabled && setIsOpen(!isOpen)}
+                    disabled={disabled}
+                    aria-haspopup='listbox'
+                    aria-expanded={isOpen}
+                    aria-labelledby={label ? undefined : name}
+                    className={`
+                        w-full rounded-md bg-login-500/50 border border-login-500 
+                        text-login-text text-left
+                        focus:outline-none focus:border-login focus:ring-1 focus:ring-login
+                        disabled:opacity-50 disabled:cursor-not-allowed
+                        py-2 pl-3 pr-10
+                        transition-all duration-200
+                        flex items-center justify-between
+                        ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
+                        ${!selectedOption ? 'text-login-200' : ''}
+                    `}
+                    title={label}
+                >
+                    <span className='truncate'>
+                        {selectedOption ? selectedOption.label : placeholder}
+                    </span>
+                    <div className='absolute inset-y-0 right-0 flex items-center px-2 gap-1'>
+                        {clearable && selectedOption && !disabled && (
+                            <div
+                                role='button'
+                                onClick={handleClear}
+                                className={`
+                                    p-1 hover:bg-login-500 rounded-full text-login-200
+                                    hover:text-red-400 transition-colors cursor-pointer
+                                `}
+                                title='Clear selection'
+                            >
+                                <X className='w-3 h-3' />
+                            </div>
+                        )}
+                        <div className={`
+                            text-login-200 pointer-events-none
+                            transition-transform duration-200
+                            ${isOpen ? 'rotate-180' : ''}
+                        `}>
+                            <ChevronDown className='w-4 h-4' />
+                        </div>
                     </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-function SelectedOption({ value, selectedOption }: SelectedOptionProps) {
-    if (!value) {
-        return <></>
-    }
+                </button>
 
-    return (
-        <div
-            className={
-                'sticky top-0 bg-surface px-2 py-2 z-10 border-b ' +
-                'border-login-200 bg-login-600'
-            }
-        >
-            <div className='flex items-center gap-3'>
-                <span className='font-medium text-left'>
-                    {selectedOption?.label}
-                </span>
+                {isOpen && (
+                    <div className={`
+                        absolute z-50 w-full mt-1 bg-login-600 border border-login-500
+                        rounded-md shadow-lg max-h-60 overflow-auto noscroll
+                    `}>
+                        {options.length > 0 ? (
+                            <ul className='py-1' role='listbox'>
+                                {options.map((option) => (
+                                    <li key={option.value} role='option' aria-selected={selectedOption?.value === option.value}>
+                                        <button
+                                            type='button'
+                                            onClick={() => handleSelect(option)}
+                                            className={`
+                                                w-full text-left px-3 py-2 text-sm
+                                                hover:bg-login-500 transition-colors duration-150
+                                                ${selectedOption?.value === option.value ? 'bg-login-500 text-login' : 'text-login-text'}
+                                            `}
+                                        >
+                                            {option.label}
+                                        </button>
+                                    </li>
+                                ))}
+                            </ul>
+                        ) : (
+                            <div className='px-3 py-2 text-sm text-login-200'>
+                                No options available
+                            </div>
+                        )}
+                    </div>
+                )}
             </div>
-        </div>
+            <input
+                type='hidden'
+                name={name}
+                value={selectedOption?.value || ''}
+                required={required}
+            />
+        </FieldWrapper>
     )
 }

package/src/components/inputs/shared/dateTimePickerPopup.tsx

@@ -0,0 +1,219 @@
+import { useState, useEffect } from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+type DateTimePickerPopupProps = {
+    value: Date | null
+    onChange: (date: Date) => void
+    type: 'date' | 'time' | 'datetime-local'
+    onClose?: () => void
+}
+
+const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+const MONTHS = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+]
+
+export default function DateTimePickerPopup({
+    value,
+    onChange,
+    type,
+    onClose,
+}: DateTimePickerPopupProps) {
+    const [currentDate, setCurrentDate] = useState(new Date())
+    const [timeInput, setTimeInput] = useState({
+        hours: value ? value.getHours().toString() : '0',
+        minutes: value ? value.getMinutes().toString() : '0',
+    })
+
+    useEffect(() => {
+        if (value) {
+            setCurrentDate(value)
+            setTimeInput(prev => ({
+                hours: prev.hours === '' && value.getHours() === 0 ? '' : value.getHours().toString(),
+                minutes: prev.minutes === '' && value.getMinutes() === 0 ? '' : value.getMinutes().toString(),
+            }))
+        }
+    }, [value])
+
+    const handleDateSelect = (day: number) => {
+        const newDate = new Date(currentDate)
+        newDate.setDate(day)
+
+        if (value) {
+            newDate.setHours(value.getHours())
+            newDate.setMinutes(value.getMinutes())
+        } else {
+            newDate.setHours(0, 0, 0, 0)
+        }
+
+        onChange(newDate)
+
+        if (type === 'date' && onClose) {
+            onClose()
+        }
+    }
+
+    const handleTimeChange = (timeUnit: 'hours' | 'minutes', val: number) => {
+        const newDate = value ? new Date(value) : new Date()
+        if (!value) {
+            newDate.setHours(0, 0, 0, 0)
+        }
+
+        if (timeUnit === 'hours') {
+            if (val < 0 || val > 23) return
+            newDate.setHours(val)
+        }
+        if (timeUnit === 'minutes') {
+            if (val < 0 || val > 59) return
+            newDate.setMinutes(val)
+        }
+
+        onChange(newDate)
+    }
+
+    const onTimeInputChange = (unit: 'hours' | 'minutes', val: string) => {
+        if (val === '') {
+            setTimeInput(prev => ({ ...prev, [unit]: '' }))
+            handleTimeChange(unit, 0)
+            return
+        }
+
+        if (!/^\d+$/.test(val)) return
+
+        const num = parseInt(val)
+
+        if (unit === 'hours' && num > 23) return
+        if (unit === 'minutes' && num > 59) return
+
+        setTimeInput(prev => ({ ...prev, [unit]: val }))
+        handleTimeChange(unit, num)
+    }
+
+    const onTimeInputBlur = (unit: 'hours' | 'minutes') => {
+        if (timeInput[unit] === '') {
+            const num = unit === 'hours' ? (value?.getHours() ?? 0) : (value?.getMinutes() ?? 0)
+            setTimeInput(prev => ({ ...prev, [unit]: num.toString() }))
+        }
+    }
+
+    const getDaysInMonth = (year: number, month: number) => new Date(year, month + 1, 0).getDate()
+    const getFirstDayOfMonth = (year: number, month: number) => new Date(year, month, 1).getDay()
+
+    const renderCalendar = () => {
+        const year = currentDate.getFullYear()
+        const month = currentDate.getMonth()
+        const daysInMonth = getDaysInMonth(year, month)
+        const firstDay = getFirstDayOfMonth(year, month)
+        const days = []
+
+        for (let i = 0; i < firstDay; i++) {
+            days.push(<div key={`empty-${i}`} className='w-8 h-8' />)
+        }
+
+        for (let i = 1; i <= daysInMonth; i++) {
+            const isSelected = value &&
+                value.getDate() === i &&
+                value.getMonth() === month &&
+                value.getFullYear() === year
+
+            const isToday = new Date().getDate() === i &&
+                new Date().getMonth() === month &&
+                new Date().getFullYear() === year
+
+            days.push(
+                <button
+                    key={i}
+                    type='button'
+                    onClick={() => handleDateSelect(i)}
+                    className={`
+                        w-8 h-8 flex items-center justify-center rounded-full text-sm
+                        hover:bg-login-500 transition-colors
+                        ${isSelected ? 'bg-login! text-white! hover:bg-login!' : ''}
+                        ${!isSelected && isToday ? 'text-login! font-bold' : ''}
+                        ${!isSelected && !isToday ? 'text-login-text!' : ''}
+                    `}
+                >
+                    {i}
+                </button>
+            )
+        }
+
+        return (
+            <div className='p-2'>
+                <div className='flex items-center justify-between mb-2'>
+                    <button
+                        type='button'
+                        onClick={() => setCurrentDate(new Date(year, month - 1))}
+                        className='p-1 hover:bg-login-500 rounded-full text-login-text'
+                    >
+                        <ChevronLeft className='w-4 h-4' />
+                    </button>
+                    <span className='font-medium text-login-text'>
+                        {MONTHS[month]} {year}
+                    </span>
+                    <button
+                        type='button'
+                        onClick={() => setCurrentDate(new Date(year, month + 1))}
+                        className='p-1 hover:bg-login-500 rounded-full text-login-text'
+                    >
+                        <ChevronRight className='w-4 h-4' />
+                    </button>
+                </div>
+                <div className='grid grid-cols-7 gap-1 mb-1'>
+                    {DAYS.map(d => (
+                        <div key={d} className='w-8 text-center text-xs text-login-200 font-medium'>
+                            {d}
+                        </div>
+                    ))}
+                </div>
+                <div className='grid grid-cols-7 gap-1'>
+                    {days}
+                </div>
+            </div>
+        )
+    }
+
+    const renderTimePicker = () => {
+        return (
+            <div className='p-2 border-t border-login-500 flex justify-center gap-2'>
+                <div className='flex flex-col items-center'>
+                    <label className='text-xs text-login-200 mb-1'>Hour</label>
+                    <input
+                        type='text'
+                        inputMode='numeric'
+                        value={timeInput.hours}
+                        onChange={(e) => onTimeInputChange('hours', e.target.value)}
+                        onBlur={() => onTimeInputBlur('hours')}
+                        className={`
+                            w-16 p-1 bg-login-500 rounded text-center text-login-text 
+                            border border-login-500 focus:border-login outline-none
+                        `}
+                    />
+                </div>
+                <div className='flex items-end pb-2 text-login-text'>:</div>
+                <div className='flex flex-col items-center'>
+                    <label className='text-xs text-login-200 mb-1'>Minute</label>
+                    <input
+                        type='text'
+                        inputMode='numeric'
+                        value={timeInput.minutes}
+                        onChange={(e) => onTimeInputChange('minutes', e.target.value)}
+                        onBlur={() => onTimeInputBlur('minutes')}
+                        className={`
+                            w-16 p-1 bg-login-500 rounded text-center text-login-text 
+                            border border-login-500 focus:border-login outline-none
+                        `}
+                    />
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className='absolute top-full left-0 z-50 mt-1 bg-login-600 border border-login-500 rounded-md shadow-lg p-1 min-w-70'>
+            {type !== 'time' && renderCalendar()}
+            {(type === 'time' || type === 'datetime-local') && renderTimePicker()}
+        </div>
+    )
+}

package/src/components/inputs/shared/fieldWrapper.tsx

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react'
+import InputLabel from './inputLabel'
+import InputInfo from './inputInfo'
+import InputError from './inputError'
+
+interface FieldWrapperProps {
+    label?: string
+    name: string
+    required?: boolean
+    info?: string
+    error?: string
+    children: ReactNode
+    className?: string
+}
+
+export default function FieldWrapper({
+    label,
+    name,
+    required,
+    info,
+    error,
+    children,
+    className,
+}: FieldWrapperProps) {
+    return (
+        <div className={`flex flex-col gap-1 w-full relative ${className || ''}`}>
+            {(label || info) && (
+                <div className='flex items-center justify-between mb-1'>
+                    {label && (
+                        <InputLabel
+                            label={label}
+                            name={name}
+                            required={required}
+                            className='ml-1'
+                        />
+                    )}
+                    {info && <InputInfo info={info} />}
+                </div>
+            )}
+            {children}
+            <InputError error={error} id={`${name}-error`} />
+        </div>
+    )
+}

package/src/components/inputs/shared/index.ts

@@ -0,0 +1,5 @@
+export { default as FieldWrapper } from './fieldWrapper'
+export { default as SelectionWrapper } from './selectionWrapper'
+export { default as InputLabel } from './inputLabel'
+export { default as InputInfo } from './inputInfo'
+export { default as InputError } from './inputError'

package/src/components/inputs/shared/inputError.tsx

@@ -0,0 +1,21 @@
+interface InputErrorProps {
+    error?: string
+    id?: string
+}
+
+export default function InputError({ error, id }: InputErrorProps) {
+    if (!error) return <div className='h-4' />
+
+    return (
+        <div className='h-4'>
+            <span
+                id={id}
+                className='text-xs text-red-500 ml-1 truncate block'
+                role='alert'
+                title={error}
+            >
+                {error}
+            </span>
+        </div>
+    )
+}

package/src/components/inputs/shared/inputInfo.tsx

@@ -0,0 +1,17 @@
+import { CircleHelp } from 'lucide-react'
+
+interface InputInfoProps {
+    info: string
+}
+
+export default function InputInfo({ info }: InputInfoProps) {
+    return (
+        <div
+            className='text-login-200 hover:text-login-text transition-colors'
+            aria-label={info}
+            title={info}
+        >
+            <CircleHelp className='w-4 h-4' />
+        </div>
+    )
+}

package/src/components/inputs/shared/inputLabel.tsx

@@ -0,0 +1,19 @@
+interface InputLabelProps {
+    label: string
+    name: string
+    required?: boolean
+    disabled?: boolean
+    className?: string
+}
+
+export default function InputLabel({ label, name, required, disabled, className }: InputLabelProps) {
+    return (
+        <label
+            htmlFor={name}
+            className={`text-sm font-medium text-login-text ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className || ''}`}
+            title={label}
+        >
+            {label} {required && <span className='text-red-500'>*</span>}
+        </label>
+    )
+}