@djangocfg/ui-nextjs 2.1.5 → 2.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,8 +58,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.5",
-    "@djangocfg/ui-core": "^2.1.5",
+    "@djangocfg/api": "^2.1.7",
+    "@djangocfg/ui-core": "^2.1.7",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -103,7 +103,7 @@
     "vidstack": "next"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.5",
+    "@djangocfg/typescript-config": "^2.1.7",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/tools/JsonForm/JsonSchemaForm.tsx

@@ -15,6 +15,8 @@ import {
   CheckboxWidget,
   SelectWidget,
   SwitchWidget,
+  ColorWidget,
+  SliderWidget,
 } from './widgets';
 import {
   FieldTemplate,
@@ -112,12 +114,17 @@ export function JsonSchemaForm<T = any>(props: JsonSchemaFormProps<T>) {
     CheckboxWidget,
     SelectWidget,
     SwitchWidget,
+    ColorWidget,
+    SliderWidget,
     // Lowercase aliases - for uiSchema 'ui:widget' references
     text: TextWidget,
     number: NumberWidget,
     checkbox: CheckboxWidget,
     select: SelectWidget,
     switch: SwitchWidget,
+    color: ColorWidget,
+    slider: SliderWidget,
+    range: SliderWidget, // alias
   }), []);
 
   // Memoize templates to prevent recreation on every render

package/src/tools/JsonForm/templates/ObjectFieldTemplate.tsx

@@ -1,12 +1,33 @@
 "use client"
 
-import React from 'react';
+import React, { useState } from 'react';
 import { ObjectFieldTemplateProps } from '@rjsf/utils';
 import { cn } from '@djangocfg/ui-core/lib';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@djangocfg/ui-core/components';
+import { ChevronDown } from 'lucide-react';
 
 /**
  * Object field template for JSON Schema Form
- * Renders nested object properties in a structured layout
+ *
+ * Supports:
+ * - Collapsible groups via ui:collapsible option
+ * - Grid layout via ui:grid option
+ * - Custom styling via ui:className
+ *
+ * Usage in uiSchema:
+ * ```json
+ * {
+ *   "colors": {
+ *     "ui:collapsible": true,
+ *     "ui:collapsed": false,
+ *     "ui:grid": 2
+ *   }
+ * }
+ * ```
  */
 export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
   const {
@@ -17,27 +38,82 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
     uiSchema,
   } = props;
 
+  // UI options
+  const isCollapsible = uiSchema?.['ui:collapsible'] === true;
+  const defaultCollapsed = uiSchema?.['ui:collapsed'] === true;
+  const gridCols = uiSchema?.['ui:grid'] as number | undefined;
+  const className = uiSchema?.['ui:className'] as string | undefined;
+
+  // Collapsible state
+  const [isOpen, setIsOpen] = useState(!defaultCollapsed);
+
+  // Check if this is root object (no title usually means root)
+  const isRoot = !title;
+
+  // Grid class based on columns
+  const gridClass = gridCols
+    ? `grid gap-4 grid-cols-${gridCols}`
+    : 'space-y-4';
+
+  // Content wrapper
+  const content = (
+    <div className={cn(gridClass, className)}>
+      {properties.map((element) => (
+        <div key={element.name} className="property-wrapper">
+          {element.content}
+        </div>
+      ))}
+    </div>
+  );
+
+  // Root object - no wrapper
+  if (isRoot) {
+    return <div className="space-y-6">{content}</div>;
+  }
+
+  // Collapsible group
+  if (isCollapsible) {
+    return (
+      <Collapsible open={isOpen} onOpenChange={setIsOpen} className="space-y-2">
+        <CollapsibleTrigger className="flex w-full items-center justify-between rounded-lg border bg-muted/50 px-4 py-3 text-left hover:bg-muted transition-colors">
+          <div>
+            <h3 className="text-sm font-semibold">
+              {title}
+              {required && <span className="text-destructive ml-1">*</span>}
+            </h3>
+            {description && (
+              <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
+            )}
+          </div>
+          <ChevronDown
+            className={cn(
+              'h-4 w-4 text-muted-foreground transition-transform duration-200',
+              isOpen && 'rotate-180'
+            )}
+          />
+        </CollapsibleTrigger>
+        <CollapsibleContent className="pl-1 pr-1 pt-2">
+          {content}
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  }
+
+  // Regular group with title
   return (
-    <div className="space-y-6">
+    <div className="space-y-4">
       {title && (
-        <div>
-          <h3 className="text-lg font-semibold">
+        <div className="border-b pb-2">
+          <h3 className="text-sm font-semibold">
             {title}
             {required && <span className="text-destructive ml-1">*</span>}
           </h3>
           {description && (
-            <p className="text-sm text-muted-foreground mt-1">{description}</p>
+            <p className="text-xs text-muted-foreground mt-1">{description}</p>
           )}
         </div>
       )}
-
-      <div className={cn('space-y-4', uiSchema?.['ui:className'])}>
-        {properties.map((element) => (
-          <div key={element.name} className="property-wrapper">
-            {element.content}
-          </div>
-        ))}
-      </div>
+      {content}
     </div>
   );
 }

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

@@ -0,0 +1,218 @@
+"use client"
+
+import React, { useMemo, useCallback, useRef } from 'react';
+import { WidgetProps } from '@rjsf/utils';
+import { Input } from '@djangocfg/ui-core/components';
+
+/**
+ * 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/SliderWidget.tsx

@@ -0,0 +1,147 @@
+"use client"
+
+import React, { useMemo, useCallback } from 'react';
+import { WidgetProps } from '@rjsf/utils';
+import { Slider, Input } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+/**
+ * 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/index.ts

@@ -10,3 +10,5 @@ export { NumberWidget } from './NumberWidget';
 export { CheckboxWidget } from './CheckboxWidget';
 export { SelectWidget } from './SelectWidget';
 export { SwitchWidget } from './SwitchWidget';
+export { ColorWidget } from './ColorWidget';
+export { SliderWidget } from './SliderWidget';