uibee 2.7.17 → 2.8.0

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

@@ -0,0 +1,240 @@
+import { type JSX, useState, useEffect, useRef } from 'react'
+
+export type ColorPickerPopupProps = {
+    value: string
+    onChange: (color: string) => void
+    onClose: () => void
+}
+
+function hexToHsv(hex: string): { h: number; s: number; v: number } {
+    hex = hex.replace('#', '')
+    let r = 0, g = 0, b = 0
+    if (hex.length === 3) {
+        r = parseInt(hex[0] + hex[0], 16)
+        g = parseInt(hex[1] + hex[1], 16)
+        b = parseInt(hex[2] + hex[2], 16)
+    } else if (hex.length === 6) {
+        r = parseInt(hex.substring(0, 2), 16)
+        g = parseInt(hex.substring(2, 4), 16)
+        b = parseInt(hex.substring(4, 6), 16)
+    }
+
+    r /= 255
+    g /= 255
+    b /= 255
+
+    const max = Math.max(r, g, b)
+    const min = Math.min(r, g, b)
+    const d = max - min
+    let h = 0
+    const s = max === 0 ? 0 : d / max
+    const v = max
+
+    if (max !== min) {
+        switch (max) {
+            case r: h = (g - b) / d + (g < b ? 6 : 0); break
+            case g: h = (b - r) / d + 2; break
+            case b: h = (r - g) / d + 4; break
+        }
+        h /= 6
+    }
+    return { h: h * 360, s: s * 100, v: v * 100 }
+}
+
+function hsvToRgb(h: number, s: number, v: number): { r: number; g: number; b: number } {
+    let r = 0, g = 0, b = 0
+    const i = Math.floor(h * 6)
+    const f = h * 6 - i
+    const p = v * (1 - s)
+    const q = v * (1 - f * s)
+    const t = v * (1 - (1 - f) * s)
+
+    switch (i % 6) {
+        case 0: r = v; g = t; b = p; break
+        case 1: r = q; g = v; b = p; break
+        case 2: r = p; g = v; b = t; break
+        case 3: r = p; g = q; b = v; break
+        case 4: r = t; g = p; b = v; break
+        case 5: r = v; g = p; b = q; break
+    }
+    return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }
+}
+
+function hsvToHex(h: number, s: number, v: number): string {
+    const { r, g, b } = hsvToRgb(h / 360, s / 100, v / 100)
+    function toHex(x: number) {
+        const hex = x.toString(16)
+        return hex.length === 1 ? '0' + hex : hex
+    }
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+const PRESET_COLORS: string[] = [
+    '#f87171', '#fb923c', '#fbbf24', '#facc15', '#a3e635', '#4ade80', '#34d399', '#2dd4bf',
+    '#38bdf8', '#60a5fa', '#818cf8', '#a78bfa', '#c084fc', '#e879f9', '#f472b6', '#fb7185'
+]
+
+function SaturationPicker({ hsv, onChange }: { hsv: { h: number, s: number, v: number }, onChange: (s: number, v: number) => void }) {
+    const containerRef = useRef<HTMLDivElement>(null)
+
+    function handleMove(e: MouseEvent | React.MouseEvent) {
+        if (!containerRef.current) return
+        const { left, top, width, height } = containerRef.current.getBoundingClientRect()
+        const x = Math.min(Math.max((e.clientX - left) / width, 0), 1)
+        const y = Math.min(Math.max((e.clientY - top) / height, 0), 1)
+
+        onChange(x * 100, (1 - y) * 100)
+    }
+
+    function handleMouseDown(e: React.MouseEvent) {
+        handleMove(e)
+        function moveHandler(e: MouseEvent) { handleMove(e) }
+        function upHandler() {
+            window.removeEventListener('mousemove', moveHandler)
+            window.removeEventListener('mouseup', upHandler)
+        }
+        window.addEventListener('mousemove', moveHandler)
+        window.addEventListener('mouseup', upHandler)
+    }
+
+    const bgColor = hsvToHex(hsv.h, 100, 100)
+
+    return (
+        <div
+            ref={containerRef}
+            className='w-full h-32 relative rounded-md overflow-hidden cursor-crosshair mb-3 select-none'
+            style={{ backgroundColor: bgColor }}
+            onMouseDown={handleMouseDown}
+        >
+            <div className='absolute inset-0 bg-linear-to-r from-white to-transparent' />
+            <div className='absolute inset-0 bg-linear-to-t from-black to-transparent' />
+            <div
+                className={`
+                    absolute w-3 h-3 border-2 border-white rounded-full
+                    shadow-md -translate-x-1/2 -translate-y-1/2 pointer-events-none
+                `}
+                style={{ left: `${hsv.s}%`, top: `${100 - hsv.v}%` }}
+            />
+        </div>
+    )
+}
+
+function HuePicker({ hue, onChange }: { hue: number, onChange: (h: number) => void }) {
+    const containerRef = useRef<HTMLDivElement>(null)
+
+    function handleMove(e: MouseEvent | React.MouseEvent) {
+        if (!containerRef.current) return
+        const { left, width } = containerRef.current.getBoundingClientRect()
+        const x = Math.min(Math.max((e.clientX - left) / width, 0), 1)
+        onChange(x * 360)
+    }
+
+    function handleMouseDown(e: React.MouseEvent) {
+        handleMove(e)
+        function moveHandler(e: MouseEvent) { handleMove(e) }
+        function upHandler() {
+            window.removeEventListener('mousemove', moveHandler)
+            window.removeEventListener('mouseup', upHandler)
+        }
+        window.addEventListener('mousemove', moveHandler)
+        window.addEventListener('mouseup', upHandler)
+    }
+
+    return (
+        <div
+            ref={containerRef}
+            className='w-full h-3 relative rounded-full cursor-pointer mb-4 select-none'
+            style={{ background: 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)' }}
+            onMouseDown={handleMouseDown}
+        >
+            <div
+                className={`
+                    absolute w-4 h-4 bg-white border border-gray-200
+                    rounded-full shadow-sm -translate-x-1/2 -translate-y-1/2
+                    top-1/2 pointer-events-none
+                `}
+                style={{ left: `${(hue / 360) * 100}%` }}
+            />
+        </div>
+    )
+}
+
+export default function ColorPickerPopup({ value, onChange, onClose }: ColorPickerPopupProps): JSX.Element {
+    const [hsv, setHsv] = useState(() => hexToHsv(value || '#000000'))
+    const [hexInput, setHexInput] = useState(value || '#000000')
+
+    useEffect(() => {
+        if (value && value !== hexInput) {
+            setHsv(hexToHsv(value))
+            setHexInput(value)
+        }
+    }, [value])
+
+    function handleColorChange(newHsv: { h: number, s: number, v: number }) {
+        setHsv(newHsv)
+        const hex = hsvToHex(newHsv.h, newHsv.s, newHsv.v)
+        setHexInput(hex)
+        onChange(hex)
+    }
+
+    function handleSaturationChange(s: number, v: number) { handleColorChange({ ...hsv, s, v }) }
+    function handleHueChange(h: number) { handleColorChange({ ...hsv, h }) }
+
+    function manualHexChange(e: React.ChangeEvent<HTMLInputElement>) {
+        const val = e.target.value
+        setHexInput(val)
+        if (/^#[0-9A-F]{6}$/i.test(val)) {
+            const newHsv = hexToHsv(val)
+            setHsv(newHsv)
+            onChange(val)
+        }
+    }
+
+    return (
+        <div className='absolute top-full left-0 mt-1 z-50 bg-login-600 border border-login-500 rounded-md shadow-lg p-3 w-64 select-none'>
+            <SaturationPicker hsv={hsv} onChange={handleSaturationChange} />
+            <HuePicker hue={hsv.h} onChange={handleHueChange} />
+
+            <div className='flex items-center gap-2 mb-3'>
+                <div className='text-xs text-login-200 font-mono'>HEX</div>
+                <input
+                    type='text'
+                    value={hexInput}
+                    onChange={manualHexChange}
+                    className={`
+                        flex-1 min-w-0 bg-login-500 border border-login-500 rounded
+                        px-2 py-1 text-sm text-login-text focus:outline-none
+                        focus:border-login focus:ring-1 focus:ring-login
+                    `}
+                    spellCheck={false}
+                />
+                <div
+                    className='w-8 h-8 rounded border border-login-500 shrink-0'
+                    style={{ backgroundColor: hexInput }}
+                />
+            </div>
+
+            <div className='grid grid-cols-8 gap-1.5 pt-3 border-t border-login-500'>
+                {PRESET_COLORS.map(color => (
+                    <button
+                        key={color}
+                        type='button'
+                        className={`
+                            w-6 h-6 rounded-sm cursor-pointer hover:scale-110
+                            hover:zIndex-10 transition-transform ring-1 ring-inset ring-black/10
+                        `}
+                        style={{ backgroundColor: color }}
+                        onClick={() => {
+                            const newHsv = hexToHsv(color)
+                            setHsv(newHsv)
+                            setHexInput(color)
+                            onChange(color)
+                            onClose()
+                        }}
+                        title={color}
+                    />
+                ))}
+            </div>
+        </div>
+    )
+}

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

@@ -3,3 +3,4 @@ export { default as SelectionWrapper } from './selectionWrapper'
 export { default as InputLabel } from './inputLabel'
 export { default as InputInfo } from './inputInfo'
 export { default as InputError } from './inputError'
+export { default as ColorPickerPopup } from './colorPickerPopup'

package/src/components/inputs/switch.tsx

@@ -1,51 +1,34 @@
-import { type ChangeEvent } from 'react'
 import { SelectionWrapper } from './shared'
 
-export type SwitchProps = {
-    label?: string
+export type SwitchProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string
-    checked?: boolean
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void
-    className?: string
-    disabled?: boolean
+    label?: string
     error?: string
     info?: string
-    required?: boolean
+    className?: string
     switchOnly?: boolean
 }
 
-export default function Switch({
-    label,
-    name,
-    checked,
-    onChange,
-    className,
-    disabled,
-    error,
-    info,
-    required,
-    switchOnly,
-}: SwitchProps) {
+export default function Switch(props: SwitchProps) {
+    const { name, label, error, info, className, switchOnly, ...inputProps } = props
+
     return (
         <SelectionWrapper
             label={label}
             name={name}
-            required={required}
+            required={inputProps.required}
             info={info}
             error={error}
             hideError={switchOnly}
             className={className}
-            disabled={disabled}
+            disabled={inputProps.disabled}
         >
             <label className={`relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10.5'}`}>
                 <input
+                    {...inputProps}
                     type='checkbox'
                     id={name}
                     name={name}
-                    checked={checked}
-                    onChange={onChange}
-                    disabled={disabled}
-                    required={required}
                     className='sr-only peer'
                 />
                 <div className={`
@@ -54,7 +37,7 @@ export default function Switch({
                     after:content-[''] after:absolute ${switchOnly ? 'after:top-0.5' : 'after:top-2.75'} after:left-0.5 
                     after:bg-white after:border-gray-300 after:border after:rounded-full 
                     after:h-5 after:w-5 after:transition-all peer-checked:bg-login
-                    ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+                    ${inputProps.disabled ? 'opacity-50 cursor-not-allowed' : ''}
                     ${error ? 'ring-1 ring-red-500' : ''}
                 `}></div>
             </label>

package/src/components/inputs/textarea.tsx

@@ -1,21 +1,15 @@
-import { type ChangeEvent, useState } from 'react'
+import { useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Eye, Pencil } from 'lucide-react'
 import { FieldWrapper } from './shared'
 
-export type TextareaProps = {
-    label?: string
+export type TextareaProps = Omit<React.ComponentProps<'textarea'>, 'name'> & {
     name: string
-    placeholder?: string
-    type?: 'markdown' | 'json' | 'text'
-    value?: string
-    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void
+    label?: string
     error?: string
     className?: string
-    disabled?: boolean
-    required?: boolean
-    rows?: number
     info?: string
+    type?: 'markdown' | 'json' | 'text'
 }
 
 function isValidJson(str: string): string | null {
@@ -27,30 +21,19 @@ function isValidJson(str: string): string | null {
     }
 }
 
-export default function Textarea({
-    label,
-    name,
-    placeholder,
-    value,
-    onChange,
-    error,
-    className,
-    disabled,
-    required,
-    rows = 4,
-    info,
-    type = 'text',
-}: TextareaProps) {
+export default function Textarea(props: TextareaProps) {
+    const { name, label, error, className, info, type = 'text', rows = 4, ...textareaProps } = props
+    const { value } = textareaProps
     const [preview, setPreview] = useState(false)
 
-    const jsonError = type === 'json' && value ? isValidJson(value) : undefined
+    const jsonError = type === 'json' && value ? isValidJson(value as string) : undefined
     const displayError = jsonError || error
 
     return (
         <FieldWrapper
             label={label}
             name={name}
-            required={required}
+            required={textareaProps.required}
             info={info}
             error={displayError}
             className={className}
@@ -80,17 +63,13 @@ export default function Textarea({
                     `}
                         style={{ minHeight: `${rows * 1.5}rem` }}
                     >
-                        <ReactMarkdown>{value || ''}</ReactMarkdown>
+                        <ReactMarkdown>{String(value || '')}</ReactMarkdown>
                     </div>
                 ) : (
                     <textarea
+                        {...textareaProps}
                         id={name}
                         name={name}
-                        placeholder={placeholder}
-                        value={value}
-                        onChange={onChange}
-                        disabled={disabled}
-                        required={required}
                         rows={rows}
                         title={label}
                         aria-invalid={!!error}