ywana-core8 0.1.74 → 0.1.76

package/src/html/color.js

@@ -1,19 +1,468 @@
-import React, {useState} from 'react'
+import React, { useState, useCallback, useRef, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { Icon } from './icon'
+import { Text } from './text'
 import './color.css'
 
+/**
+ * Enhanced ColorField component with improved functionality while maintaining 100% compatibility
+ */
 export const ColorField = (props) => {
+    const {
+        // Original props (100% compatible)
+        id,
+        label = "Color",
+        value,
+        onChange,
+        // New enhanced props (all optional for compatibility)
+        disabled = false,
+        required = false,
+        placeholder = "#000000",
+        format = 'hex',
+        showPreview = true,
+        showValue = false,
+        allowTransparent = false,
+        presetColors = [],
+        size = 'medium',
+        variant = 'default',
+        error,
+        helperText,
+        onFocus,
+        onBlur,
+        onClear,
+        clearable = false,
+        className,
+        style,
+        ...restProps
+    } = props
 
-    const {id, label="Color", value, onChange} = props
+    const [internalValue, setInternalValue] = useState(value || placeholder)
+    const [isFocused, setIsFocused] = useState(false)
+    const [isValid, setIsValid] = useState(true)
+    const inputRef = useRef(null)
 
-    function change(event) {
-        const color = event.target.value
-       if (onChange) onChange(id, color)
+    // Sync internal value with prop value
+    useEffect(() => {
+        if (value !== undefined) {
+            setInternalValue(value)
+        }
+    }, [value])
+
+    // Validate color format
+    const validateColor = useCallback((color) => {
+        if (!color) return allowTransparent
+
+        const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/
+        const rgbRegex = /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/
+        const rgbaRegex = /^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)$/
+        const hslRegex = /^hsl\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*\)$/
+        const hslaRegex = /^hsla\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*,\s*[\d.]+\s*\)$/
+
+        return hexRegex.test(color) || rgbRegex.test(color) || rgbaRegex.test(color) ||
+               hslRegex.test(color) || hslaRegex.test(color) ||
+               (allowTransparent && color.toLowerCase() === 'transparent')
+    }, [allowTransparent])
+
+    // Convert color to different formats
+    const convertColor = useCallback((color, targetFormat) => {
+        if (!color || !validateColor(color)) return color
+
+        try {
+            // Create a temporary element to get computed color
+            const tempElement = document.createElement('div')
+            tempElement.style.color = color
+            document.body.appendChild(tempElement)
+            const computedColor = window.getComputedStyle(tempElement).color
+            document.body.removeChild(tempElement)
+
+            if (targetFormat === 'hex') {
+                // Convert RGB to hex
+                const rgbMatch = computedColor.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
+                if (rgbMatch) {
+                    const [, r, g, b] = rgbMatch
+                    return `#${parseInt(r).toString(16).padStart(2, '0')}${parseInt(g).toString(16).padStart(2, '0')}${parseInt(b).toString(16).padStart(2, '0')}`
+                }
+            }
+
+            return color
+        } catch (error) {
+            console.warn('Color conversion failed:', error)
+            return color
+        }
+    }, [validateColor])
+
+    // Handle change (maintaining original behavior)
+    const handleChange = useCallback((event) => {
+        const newColor = event.target.value
+        setInternalValue(newColor)
+
+        const isValidColor = validateColor(newColor)
+        setIsValid(isValidColor)
+
+        if (onChange) {
+            const convertedColor = format !== 'hex' ? convertColor(newColor, format) : newColor
+            onChange(id, convertedColor)
+        }
+    }, [id, onChange, format, validateColor, convertColor])
+
+    // Handle focus
+    const handleFocus = useCallback((event) => {
+        setIsFocused(true)
+        if (onFocus) onFocus(event)
+    }, [onFocus])
+
+    // Handle blur
+    const handleBlur = useCallback((event) => {
+        setIsFocused(false)
+        if (onBlur) onBlur(event)
+    }, [onBlur])
+
+    // Handle clear
+    const handleClear = useCallback(() => {
+        if (disabled) return
+
+        const clearedValue = allowTransparent ? 'transparent' : placeholder
+        setInternalValue(clearedValue)
+        setIsValid(true)
+
+        if (onChange) onChange(id, clearedValue)
+        if (onClear) onClear()
+    }, [disabled, allowTransparent, placeholder, id, onChange, onClear])
+
+    // Handle preset color selection
+    const handlePresetSelect = useCallback((presetColor) => {
+        if (disabled) return
+
+        setInternalValue(presetColor)
+        setIsValid(true)
+
+        if (onChange) {
+            const convertedColor = format !== 'hex' ? convertColor(presetColor, format) : presetColor
+            onChange(id, convertedColor)
+        }
+    }, [disabled, id, onChange, format, convertColor])
+
+    // Generate CSS classes
+    const cssClasses = [
+        'color-field',
+        `color-field--${size}`,
+        `color-field--${variant}`,
+        disabled && 'color-field--disabled',
+        required && 'color-field--required',
+        isFocused && 'color-field--focused',
+        error && 'color-field--error',
+        !isValid && 'color-field--invalid',
+        showPreview && 'color-field--with-preview',
+        className
+    ].filter(Boolean).join(' ')
+
+    // Generate preview style
+    const previewStyle = {
+        backgroundColor: internalValue && validateColor(internalValue) ? internalValue : 'transparent'
+    }
+
+    return (
+        <div className={cssClasses} style={style} {...restProps}>
+            {/* Label (maintaining original structure) */}
+            <label htmlFor={id} className="color-field__label">
+                {label}
+                {required && <span className="color-field__required">*</span>}
+            </label>
+
+            {/* Input container */}
+            <div className="color-field__input-container">
+                {/* Color preview */}
+                {showPreview && (
+                    <div
+                        className="color-field__preview"
+                        style={previewStyle}
+                        title={`Current color: ${internalValue}`}
+                    >
+                        {!internalValue || !validateColor(internalValue) ? (
+                            <Icon icon="block" size="small" className="color-field__no-color" />
+                        ) : null}
+                    </div>
+                )}
+
+                {/* Main color input (maintaining original structure) */}
+                <input
+                    ref={inputRef}
+                    id={id}
+                    type="color"
+                    value={internalValue && validateColor(internalValue) ? internalValue : placeholder}
+                    onChange={handleChange}
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                    disabled={disabled}
+                    required={required}
+                    className="color-field__input"
+                    aria-invalid={!isValid || !!error}
+                    aria-describedby={helperText ? `${id}-helper` : undefined}
+                />
+
+                {/* Clear button */}
+                {clearable && internalValue && internalValue !== placeholder && (
+                    <button
+                        type="button"
+                        onClick={handleClear}
+                        disabled={disabled}
+                        className="color-field__clear"
+                        aria-label="Clear color"
+                    >
+                        <Icon icon="clear" size="small" />
+                    </button>
+                )}
+            </div>
+
+            {/* Color value display */}
+            {showValue && internalValue && (
+                <div className="color-field__value">
+                    <Text size="sm" color="muted">
+                        {internalValue}
+                    </Text>
+                </div>
+            )}
+
+            {/* Preset colors */}
+            {presetColors.length > 0 && (
+                <div className="color-field__presets">
+                    <Text size="sm" color="muted" className="color-field__presets-label">
+                        Presets:
+                    </Text>
+                    <div className="color-field__presets-grid">
+                        {presetColors.map((presetColor, index) => (
+                            <button
+                                key={index}
+                                type="button"
+                                onClick={() => handlePresetSelect(presetColor)}
+                                disabled={disabled}
+                                className="color-field__preset"
+                                style={{ backgroundColor: presetColor }}
+                                title={presetColor}
+                                aria-label={`Select preset color ${presetColor}`}
+                            />
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {/* Helper text or error */}
+            {(helperText || error) && (
+                <div
+                    id={`${id}-helper`}
+                    className={`color-field__helper ${error ? 'color-field__helper--error' : ''}`}
+                >
+                    <Text size="sm" color={error ? 'error' : 'muted'}>
+                        {error || helperText}
+                    </Text>
+                </div>
+            )}
+        </div>
+    )
+}
+
+// Color utilities
+export const ColorUtils = {
+    /**
+     * Convert hex color to RGB
+     */
+    hexToRgb: (hex) => {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null
+    },
+
+    /**
+     * Convert RGB to hex
+     */
+    rgbToHex: (r, g, b) => {
+        return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
+    },
+
+    /**
+     * Get contrast ratio between two colors
+     */
+    getContrastRatio: (color1, color2) => {
+        const getLuminance = (color) => {
+            const rgb = ColorUtils.hexToRgb(color)
+            if (!rgb) return 0
+
+            const [r, g, b] = [rgb.r, rgb.g, rgb.b].map(c => {
+                c = c / 255
+                return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+            })
+
+            return 0.2126 * r + 0.7152 * g + 0.0722 * b
+        }
+
+        const lum1 = getLuminance(color1)
+        const lum2 = getLuminance(color2)
+        const brightest = Math.max(lum1, lum2)
+        const darkest = Math.min(lum1, lum2)
+
+        return (brightest + 0.05) / (darkest + 0.05)
+    },
+
+    /**
+     * Check if color is light or dark
+     */
+    isLight: (color) => {
+        const rgb = ColorUtils.hexToRgb(color)
+        if (!rgb) return false
+
+        const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000
+        return brightness > 128
+    },
+
+    /**
+     * Generate color palette
+     */
+    generatePalette: (baseColor, count = 5) => {
+        const rgb = ColorUtils.hexToRgb(baseColor)
+        if (!rgb) return []
+
+        const palette = []
+        for (let i = 0; i < count; i++) {
+            const factor = (i + 1) / (count + 1)
+            const r = Math.round(rgb.r + (255 - rgb.r) * factor)
+            const g = Math.round(rgb.g + (255 - rgb.g) * factor)
+            const b = Math.round(rgb.b + (255 - rgb.b) * factor)
+            palette.push(ColorUtils.rgbToHex(r, g, b))
+        }
+        return palette
     }
+}
+
+// Color picker component
+export const ColorPicker = (props) => {
+    const {
+        value,
+        onChange,
+        presetColors = [
+            '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF',
+            '#000000', '#FFFFFF', '#808080', '#800000', '#008000', '#000080'
+        ],
+        disabled = false,
+        className,
+        ...restProps
+    } = props
+
+    const [isOpen, setIsOpen] = useState(false)
+
+    const handleColorSelect = useCallback((color) => {
+        if (onChange) onChange(color)
+        setIsOpen(false)
+    }, [onChange])
 
     return (
-        <div className="color-field">
-            <label htmlFor={id}>{label}</label>
-            <input id={id} type="color" onChange={change} value={value}/>
+        <div className={`color-picker ${className || ''}`} {...restProps}>
+            <button
+                type="button"
+                onClick={() => setIsOpen(!isOpen)}
+                disabled={disabled}
+                className="color-picker__trigger"
+                style={{ backgroundColor: value || '#000000' }}
+                aria-label="Open color picker"
+            />
+
+            {isOpen && (
+                <div className="color-picker__dropdown">
+                    <div className="color-picker__grid">
+                        {presetColors.map((color, index) => (
+                            <button
+                                key={index}
+                                type="button"
+                                onClick={() => handleColorSelect(color)}
+                                className="color-picker__option"
+                                style={{ backgroundColor: color }}
+                                title={color}
+                                aria-label={`Select color ${color}`}
+                            />
+                        ))}
+                    </div>
+                </div>
+            )}
         </div>
     )
-}
+}
+
+// PropTypes
+ColorField.propTypes = {
+    /** Field ID */
+    id: PropTypes.string,
+    /** Field label */
+    label: PropTypes.string,
+    /** Current color value */
+    value: PropTypes.string,
+    /** Change callback */
+    onChange: PropTypes.func,
+    /** Disabled state */
+    disabled: PropTypes.bool,
+    /** Required field */
+    required: PropTypes.bool,
+    /** Placeholder color */
+    placeholder: PropTypes.string,
+    /** Color format */
+    format: PropTypes.oneOf(['hex', 'rgb', 'hsl']),
+    /** Show color preview */
+    showPreview: PropTypes.bool,
+    /** Show color value */
+    showValue: PropTypes.bool,
+    /** Allow transparent colors */
+    allowTransparent: PropTypes.bool,
+    /** Preset colors array */
+    presetColors: PropTypes.arrayOf(PropTypes.string),
+    /** Field size */
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
+    /** Visual variant */
+    variant: PropTypes.oneOf(['default', 'outlined', 'filled']),
+    /** Error message */
+    error: PropTypes.string,
+    /** Helper text */
+    helperText: PropTypes.string,
+    /** Focus callback */
+    onFocus: PropTypes.func,
+    /** Blur callback */
+    onBlur: PropTypes.func,
+    /** Clear callback */
+    onClear: PropTypes.func,
+    /** Show clear button */
+    clearable: PropTypes.bool,
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Inline styles */
+    style: PropTypes.object
+}
+
+ColorField.defaultProps = {
+    label: "Color",
+    disabled: false,
+    required: false,
+    placeholder: "#000000",
+    format: 'hex',
+    showPreview: true,
+    showValue: false,
+    allowTransparent: false,
+    presetColors: [],
+    size: 'medium',
+    variant: 'default',
+    clearable: false
+}
+
+ColorPicker.propTypes = {
+    /** Current color value */
+    value: PropTypes.string,
+    /** Change callback */
+    onChange: PropTypes.func,
+    /** Preset colors */
+    presetColors: PropTypes.arrayOf(PropTypes.string),
+    /** Disabled state */
+    disabled: PropTypes.bool,
+    /** Additional CSS classes */
+    className: PropTypes.string
+}
+
+export default ColorField