@djangocfg/ui-tools 2.1.91

package/src/tools/JsonForm/widgets/CheckboxWidget.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Checkbox } from '@djangocfg/ui-core/components';
+import { WidgetProps } from '@rjsf/utils';
+
+/**
+ * Checkbox widget for JSON Schema Form
+ * Handles boolean fields
+ */
+export function CheckboxWidget(props: WidgetProps) {
+  const {
+    id,
+    value,
+    disabled,
+    readonly,
+    autofocus,
+    onChange,
+    onBlur,
+    onFocus,
+  } = props;
+
+  const handleChange = (checked: boolean) => {
+    onChange(checked);
+  };
+
+  return (
+    <Checkbox
+      id={id}
+      checked={value || false}
+      disabled={disabled || readonly}
+      autoFocus={autofocus}
+      onCheckedChange={handleChange}
+      onBlur={() => onBlur(id, value)}
+      onFocus={() => onFocus(id, value)}
+    />
+  );
+}

package/src/tools/JsonForm/widgets/ColorWidget.tsx

@@ -0,0 +1,219 @@
+"use client"
+
+import React, { useCallback, useMemo, useRef } from 'react';
+
+import { Input } from '@djangocfg/ui-core/components';
+import { WidgetProps } from '@rjsf/utils';
+
+/**
+ * Color input widget for JSON Schema Form
+ * Supports HSL format (h s% l%) and HEX format
+ * Click on color box to open native color picker directly
+ */
+export function ColorWidget(props: WidgetProps) {
+  const {
+    id,
+    placeholder,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    value,
+    onChange,
+    onBlur,
+    onFocus,
+    options,
+    rawErrors,
+  } = props;
+
+  const colorInputRef = useRef<HTMLInputElement>(null);
+
+  // Determine format from options or auto-detect from value
+  const format = useMemo(() => {
+    if (options?.format) return options.format as 'hsl' | 'hex';
+    if (typeof value === 'string' && value.startsWith('#')) return 'hex';
+    return 'hsl';
+  }, [options?.format, value]);
+
+  // Ensure value is always a string
+  const safeValue = useMemo(() => {
+    if (value === null || value === undefined) return '';
+    return String(value);
+  }, [value]);
+
+  // Convert HSL string (like "217 91% 60%") to CSS hsl() value
+  const hslToCss = useCallback((hslValue: string): string => {
+    if (!hslValue) return 'transparent';
+    if (hslValue.startsWith('#')) return hslValue;
+    if (hslValue.startsWith('hsl')) return hslValue;
+    // Format: "h s% l%" -> "hsl(h, s%, l%)"
+    const parts = hslValue.split(' ');
+    if (parts.length === 3) {
+      return `hsl(${parts[0]}, ${parts[1]}, ${parts[2]})`;
+    }
+    return 'transparent';
+  }, []);
+
+  // Convert CSS color to preview color
+  const previewColor = useMemo(() => {
+    return hslToCss(safeValue);
+  }, [safeValue, hslToCss]);
+
+  // Convert hex to HSL string for internal storage
+  const hexToHsl = useCallback((hex: string): string => {
+    // Remove # if present
+    hex = hex.replace('#', '');
+
+    // Parse hex values
+    const r = parseInt(hex.substring(0, 2), 16) / 255;
+    const g = parseInt(hex.substring(2, 4), 16) / 255;
+    const b = parseInt(hex.substring(4, 6), 16) / 255;
+
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+
+    if (max !== min) {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+      switch (max) {
+        case r:
+          h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+          break;
+        case g:
+          h = ((b - r) / d + 2) / 6;
+          break;
+        case b:
+          h = ((r - g) / d + 4) / 6;
+          break;
+      }
+    }
+
+    return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+  }, []);
+
+  // Convert HSL to hex
+  const hslToHex = useCallback((hslValue: string): string => {
+    if (!hslValue || hslValue.startsWith('#')) return hslValue || '#000000';
+
+    const parts = hslValue.split(' ');
+    if (parts.length !== 3) return '#000000';
+
+    const h = parseInt(parts[0]) / 360;
+    const s = parseInt(parts[1].replace('%', '')) / 100;
+    const l = parseInt(parts[2].replace('%', '')) / 100;
+
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1/6) return p + (q - p) * 6 * t;
+      if (t < 1/2) return q;
+      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+      return p;
+    };
+
+    let r, g, b;
+    if (s === 0) {
+      r = g = b = l;
+    } else {
+      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      const p = 2 * l - q;
+      r = hue2rgb(p, q, h + 1/3);
+      g = hue2rgb(p, q, h);
+      b = hue2rgb(p, q, h - 1/3);
+    }
+
+    const toHex = (x: number) => {
+      const hex = Math.round(x * 255).toString(16);
+      return hex.length === 1 ? '0' + hex : hex;
+    };
+
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  }, []);
+
+  const hasError = useMemo(() => {
+    return rawErrors && rawErrors.length > 0;
+  }, [rawErrors]);
+
+  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    onChange(newValue);
+  }, [onChange]);
+
+  const handleColorPickerChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const hexValue = event.target.value;
+    if (format === 'hsl') {
+      onChange(hexToHsl(hexValue));
+    } else {
+      onChange(hexValue);
+    }
+  }, [onChange, format, hexToHsl]);
+
+  const handleBlur = useCallback((event: React.FocusEvent<HTMLInputElement>) => {
+    onBlur(id, event.target.value);
+  }, [id, onBlur]);
+
+  const handleFocus = useCallback((event: React.FocusEvent<HTMLInputElement>) => {
+    onFocus(id, event.target.value);
+  }, [id, onFocus]);
+
+  // Get hex value for native color picker
+  const hexValue = useMemo(() => {
+    if (format === 'hex' || safeValue.startsWith('#')) {
+      return safeValue || '#000000';
+    }
+    return hslToHex(safeValue);
+  }, [safeValue, format, hslToHex]);
+
+  // Click on color box opens native color picker
+  const handleColorBoxClick = useCallback(() => {
+    if (!disabled && !readonly) {
+      colorInputRef.current?.click();
+    }
+  }, [disabled, readonly]);
+
+  return (
+    <div className="flex items-center gap-2">
+      {/* Color preview box - clicking opens native picker */}
+      <div className="relative">
+        <button
+          type="button"
+          onClick={handleColorBoxClick}
+          disabled={disabled || readonly}
+          className="h-10 w-10 shrink-0 rounded-md border-2 border-input cursor-pointer hover:border-ring focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          style={{ backgroundColor: previewColor }}
+          aria-label="Pick color"
+        />
+        {/* Hidden native color input */}
+        <input
+          ref={colorInputRef}
+          type="color"
+          value={hexValue}
+          onChange={handleColorPickerChange}
+          className="absolute inset-0 opacity-0 w-full h-full cursor-pointer"
+          disabled={disabled || readonly}
+          tabIndex={-1}
+        />
+      </div>
+
+      {/* Text input for manual HSL/HEX entry */}
+      <Input
+        id={id}
+        type="text"
+        placeholder={placeholder || (format === 'hsl' ? '217 91% 60%' : '#3b82f6')}
+        disabled={disabled}
+        readOnly={readonly}
+        autoFocus={autofocus}
+        value={safeValue}
+        required={required}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        className={`flex-1 font-mono text-sm ${hasError ? 'border-destructive' : ''}`}
+      />
+    </div>
+  );
+}

package/src/tools/JsonForm/widgets/NumberWidget.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import React, { useCallback, useMemo } from 'react';
+
+import { Input } from '@djangocfg/ui-core/components';
+import { WidgetProps } from '@rjsf/utils';
+
+/**
+ * Number input widget for JSON Schema Form
+ * Handles integer and number fields
+ */
+export function NumberWidget(props: WidgetProps) {
+  const {
+    id,
+    placeholder,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    value,
+    onChange,
+    onBlur,
+    onFocus,
+    options,
+    schema,
+    rawErrors,
+  } = props;
+
+  // Memoize widget configuration
+  const config = useMemo(() => ({
+    isInteger: schema.type === 'integer',
+    step: schema.type === 'integer' ? '1' : 'any',
+    min: schema.minimum,
+    max: schema.maximum,
+    emptyValue: options?.emptyValue,
+  }), [schema, options]);
+
+  // Ensure value is valid number or empty string
+  const safeValue = useMemo(() => {
+    if (value === null || value === undefined || value === '') return '';
+    if (typeof value === 'number' && !isNaN(value)) return value;
+    return '';
+  }, [value]);
+
+  const hasError = useMemo(() => {
+    return rawErrors && rawErrors.length > 0;
+  }, [rawErrors]);
+
+  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    if (newValue === '') {
+      onChange(config.emptyValue);
+    } else {
+      const parsedValue = config.isInteger
+        ? parseInt(newValue, 10)
+        : parseFloat(newValue);
+
+      onChange(isNaN(parsedValue) ? config.emptyValue : parsedValue);
+    }
+  }, [onChange, config]);
+
+  const handleBlur = useCallback((event: React.FocusEvent<HTMLInputElement>) => {
+    onBlur(id, event.target.value);
+  }, [id, onBlur]);
+
+  const handleFocus = useCallback((event: React.FocusEvent<HTMLInputElement>) => {
+    onFocus(id, event.target.value);
+  }, [id, onFocus]);
+
+  return (
+    <Input
+      id={id}
+      type="number"
+      placeholder={placeholder}
+      disabled={disabled}
+      readOnly={readonly}
+      autoFocus={autofocus}
+      value={safeValue}
+      required={required}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      step={config.step}
+      min={config.min}
+      max={config.max}
+      className={hasError ? 'border-destructive' : ''}
+    />
+  );
+}

package/src/tools/JsonForm/widgets/SelectWidget.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import React, { useCallback, useMemo } from 'react';
+
+import {
+    Select, SelectContent, SelectItem, SelectTrigger, SelectValue
+} from '@djangocfg/ui-core/components';
+import { WidgetProps } from '@rjsf/utils';
+
+/**
+ * Select dropdown widget for JSON Schema Form
+ * Handles enum fields
+ */
+export function SelectWidget(props: WidgetProps) {
+  const {
+    id,
+    options,
+    value,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    onChange,
+    onBlur,
+    onFocus,
+    placeholder,
+    rawErrors,
+  } = props;
+
+  // Safely extract and validate enum options
+  const enumOptions = useMemo(() => {
+    const opts = options?.enumOptions;
+    if (!Array.isArray(opts)) return [];
+    return opts.filter(opt => opt && (opt.value !== undefined));
+  }, [options]);
+
+  const hasError = useMemo(() => {
+    return rawErrors && rawErrors.length > 0;
+  }, [rawErrors]);
+
+  // Ensure value is always a string
+  const safeValue = useMemo(() => {
+    if (value === null || value === undefined) return '';
+    return String(value);
+  }, [value]);
+
+  const handleChange = useCallback((newValue: string) => {
+    onChange(newValue);
+    onBlur(id, newValue);
+  }, [onChange, onBlur, id]);
+
+  // If no enum options, render a text input instead
+  // This handles cases like anyOf/oneOf where RJSF might incorrectly use SelectWidget
+  if (enumOptions.length === 0) {
+    return (
+      <input
+        id={id}
+        type="text"
+        value={safeValue}
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={(e) => onBlur(id, e.target.value)}
+        onFocus={(e) => onFocus(id, e.target.value)}
+        disabled={disabled || readonly}
+        readOnly={readonly}
+        className={`flex h-10 w-full rounded-md border ${
+          hasError ? 'border-destructive' : 'border-input'
+        } bg-transparent px-3 py-2 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`}
+        placeholder={placeholder}
+      />
+    );
+  }
+
+  return (
+    <Select
+      value={safeValue}
+      onValueChange={handleChange}
+      disabled={disabled || readonly}
+      required={required}
+    >
+      <SelectTrigger
+        id={id}
+        className={hasError ? 'border-destructive' : ''}
+        autoFocus={autofocus}
+        onFocus={() => onFocus(id, value)}
+      >
+        <SelectValue placeholder={placeholder || 'Select an option'} />
+      </SelectTrigger>
+      <SelectContent>
+        {enumOptions.map((option: any) => (
+          <SelectItem key={String(option.value)} value={String(option.value)}>
+            {option.label || String(option.value)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/tools/JsonForm/widgets/SliderWidget.tsx

@@ -0,0 +1,148 @@
+"use client"
+
+import React, { useCallback, useMemo } from 'react';
+
+import { Input, Slider } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+import { WidgetProps } from '@rjsf/utils';
+
+/**
+ * Slider widget for JSON Schema Form
+ *
+ * Supports:
+ * - number/integer types
+ * - min/max from schema
+ * - step from schema or options
+ * - unit suffix (e.g., "rem", "px", "%")
+ * - optional text input for precise values
+ *
+ * Usage in uiSchema:
+ * ```json
+ * {
+ *   "radius": {
+ *     "ui:widget": "slider",
+ *     "ui:options": {
+ *       "unit": "rem",
+ *       "showInput": true,
+ *       "step": 0.125
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export function SliderWidget(props: WidgetProps) {
+  const {
+    id,
+    disabled,
+    readonly,
+    value,
+    onChange,
+    schema,
+    options,
+    rawErrors,
+  } = props;
+
+  // Extract configuration
+  const config = useMemo(() => {
+    const min = schema.minimum ?? options?.min ?? 0;
+    const max = schema.maximum ?? options?.max ?? 100;
+    const step = options?.step ?? (schema.type === 'integer' ? 1 : 0.1);
+    const unit = options?.unit as string | undefined;
+    const showInput = options?.showInput !== false; // default true
+
+    return { min, max, step, unit, showInput };
+  }, [schema, options]);
+
+  // Parse value - handle string values like "0.5rem"
+  const numericValue = useMemo(() => {
+    if (value === null || value === undefined || value === '') {
+      return config.min;
+    }
+    if (typeof value === 'number') {
+      return value;
+    }
+    if (typeof value === 'string') {
+      // Extract number from string like "0.5rem"
+      const parsed = parseFloat(value);
+      return isNaN(parsed) ? config.min : parsed;
+    }
+    return config.min;
+  }, [value, config.min]);
+
+  const hasError = useMemo(() => {
+    return rawErrors && rawErrors.length > 0;
+  }, [rawErrors]);
+
+  // Handle slider change
+  const handleSliderChange = useCallback((values: number[]) => {
+    const newValue = values[0];
+    if (config.unit) {
+      onChange(`${newValue}${config.unit}`);
+    } else {
+      onChange(newValue);
+    }
+  }, [onChange, config.unit]);
+
+  // Handle text input change
+  const handleInputChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = event.target.value;
+
+    // If has unit, just store raw value with unit
+    if (config.unit) {
+      // Remove unit if user typed it, then add it back
+      const cleanValue = inputValue.replace(config.unit, '').trim();
+      const parsed = parseFloat(cleanValue);
+      if (!isNaN(parsed)) {
+        onChange(`${parsed}${config.unit}`);
+      } else if (inputValue === '') {
+        onChange(`${config.min}${config.unit}`);
+      }
+    } else {
+      const parsed = parseFloat(inputValue);
+      onChange(isNaN(parsed) ? config.min : parsed);
+    }
+  }, [onChange, config.unit, config.min]);
+
+  // Display value with unit
+  const displayValue = useMemo(() => {
+    if (config.unit) {
+      return `${numericValue}${config.unit}`;
+    }
+    return String(numericValue);
+  }, [numericValue, config.unit]);
+
+  return (
+    <div className={cn('flex items-center gap-3', hasError && 'text-destructive')}>
+      {/* Slider */}
+      <Slider
+        id={id}
+        disabled={disabled || readonly}
+        value={[numericValue]}
+        onValueChange={handleSliderChange}
+        min={config.min}
+        max={config.max}
+        step={config.step}
+        className="flex-1"
+      />
+
+      {/* Value input or display */}
+      {config.showInput ? (
+        <Input
+          type="text"
+          value={displayValue}
+          onChange={handleInputChange}
+          disabled={disabled}
+          readOnly={readonly}
+          className={cn(
+            'w-20 text-center font-mono text-sm',
+            hasError && 'border-destructive'
+          )}
+        />
+      ) : (
+        <span className="w-16 text-right font-mono text-sm text-muted-foreground">
+          {displayValue}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/tools/JsonForm/widgets/SwitchWidget.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Switch } from '@djangocfg/ui-core/components';
+import { WidgetProps } from '@rjsf/utils';
+
+/**
+ * Switch toggle widget for JSON Schema Form
+ * Alternative boolean input
+ */
+export function SwitchWidget(props: WidgetProps) {
+  const {
+    id,
+    value,
+    disabled,
+    readonly,
+    onChange,
+    onBlur,
+    onFocus,
+  } = props;
+
+  const handleChange = (checked: boolean) => {
+    onChange(checked);
+  };
+
+  return (
+    <Switch
+      id={id}
+      checked={value || false}
+      disabled={disabled || readonly}
+      onCheckedChange={handleChange}
+      onBlur={() => onBlur(id, value)}
+      onFocus={() => onFocus(id, value)}
+    />
+  );
+}