@djangocfg/ui-nextjs 1.4.45

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

@@ -0,0 +1,88 @@
+"use client"
+
+import React, { useMemo, useCallback } from 'react';
+import { WidgetProps } from '@rjsf/utils';
+import { Input } from '@djangocfg/ui-core/components';
+
+/**
+ * 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,100 @@
+"use client"
+
+import React, { useMemo, useCallback } from 'react';
+import { WidgetProps } from '@rjsf/utils';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@djangocfg/ui-core/components';
+
+/**
+ * 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/SwitchWidget.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { WidgetProps } from '@rjsf/utils';
+import { Switch } from '@djangocfg/ui-core/components';
+
+/**
+ * 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)}
+    />
+  );
+}

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

@@ -0,0 +1,95 @@
+"use client"
+
+import React, { useMemo, useCallback } from 'react';
+import { WidgetProps } from '@rjsf/utils';
+import { Input } from '@djangocfg/ui-core/components';
+
+/**
+ * Text input widget for JSON Schema Form
+ * Handles string fields with optional textarea for multiline
+ */
+export function TextWidget(props: WidgetProps) {
+  const {
+    id,
+    placeholder,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    value,
+    onChange,
+    onBlur,
+    onFocus,
+    options,
+    schema,
+    rawErrors,
+  } = props;
+
+  // Memoize widget configuration
+  const config = useMemo(() => ({
+    isTextarea: options?.widget === 'textarea',
+    rows: options?.rows || 3,
+    emptyValue: options?.emptyValue,
+  }), [options]);
+
+  // Ensure value is always a string
+  const safeValue = useMemo(() => {
+    if (value === null || value === undefined) return '';
+    return String(value);
+  }, [value]);
+
+  const hasError = useMemo(() => {
+    return rawErrors && rawErrors.length > 0;
+  }, [rawErrors]);
+
+  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const newValue = event.target.value;
+    onChange(newValue === '' ? config.emptyValue : newValue);
+  }, [onChange, config.emptyValue]);
+
+  const handleBlur = useCallback((event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    onBlur(id, event.target.value);
+  }, [id, onBlur]);
+
+  const handleFocus = useCallback((event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    onFocus(id, event.target.value);
+  }, [id, onFocus]);
+
+  if (config.isTextarea) {
+    return (
+      <textarea
+        id={id}
+        className={`flex min-h-[80px] 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}
+        disabled={disabled || readonly}
+        readOnly={readonly}
+        autoFocus={autofocus}
+        value={safeValue}
+        required={required}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        rows={config.rows}
+      />
+    );
+  }
+
+  return (
+    <Input
+      id={id}
+      type="text"
+      placeholder={placeholder}
+      disabled={disabled}
+      readOnly={readonly}
+      autoFocus={autofocus}
+      value={safeValue}
+      required={required}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      className={hasError ? 'border-destructive' : ''}
+    />
+  );
+}

package/src/tools/JsonForm/widgets/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Custom widgets for JSON Schema Form
+ *
+ * Each widget is a React component that renders a specific form input type
+ * using components from @djangocfg/ui
+ */
+
+export { TextWidget } from './TextWidget';
+export { NumberWidget } from './NumberWidget';
+export { CheckboxWidget } from './CheckboxWidget';
+export { SelectWidget } from './SelectWidget';
+export { SwitchWidget } from './SwitchWidget';

package/src/tools/JsonTree/index.tsx

@@ -0,0 +1,252 @@
+'use client';
+
+import React, { useState } from 'react';
+import { CommonExternalProps, JSONTree } from 'react-json-tree';
+import { ChevronDown, ChevronUp, Copy, Download } from 'lucide-react';
+import { Button } from '@djangocfg/ui-core/components';
+import { useCopy } from '@djangocfg/ui-core/hooks';
+
+export type { Language } from 'prism-react-renderer';
+
+export interface JsonTreeConfig {
+  /** Maximum depth to expand automatically (default: 2) */
+  maxAutoExpandDepth?: number;
+  /** Maximum items in array to auto-expand (default: 10) */
+  maxAutoExpandArrayItems?: number;
+  /** Maximum object keys to auto-expand (default: 5) */
+  maxAutoExpandObjectKeys?: number;
+  /** Maximum string length before truncation (default: 200) */
+  maxStringLength?: number;
+  /** Collection limit for performance (default: 50) */
+  collectionLimit?: number;
+  /** Whether to show collection info (array length, object keys count) */
+  showCollectionInfo?: boolean;
+  /** Whether to show expand/collapse all buttons */
+  showExpandControls?: boolean;
+  /** Whether to show copy/download buttons */
+  showActionButtons?: boolean;
+  /** Custom CSS classes for the container */
+  className?: string;
+  /** Whether to preserve object key order (default: true) */
+  preserveKeyOrder?: boolean;
+}
+
+interface JsonTreeComponentProps {
+  title?: string;
+  data: unknown;
+  config?: JsonTreeConfig;
+  /** Override for react-json-tree props */
+  jsonTreeProps?: Partial<CommonExternalProps>;
+}
+
+const JsonTreeComponent = ({ title, data, config = {}, jsonTreeProps = {} }: JsonTreeComponentProps) => {
+  // State for expand/collapse all
+  const [expandAll, setExpandAll] = useState<boolean | null>(null);
+  const [renderKey, setRenderKey] = useState(0);
+
+  // Copy hook
+  const { copyToClipboard } = useCopy({
+    successMessage: "JSON copied to clipboard",
+    errorMessage: "Failed to copy JSON"
+  });
+  
+  // Default configuration
+  const {
+    maxAutoExpandDepth = 2,
+    maxAutoExpandArrayItems = 10,
+    maxAutoExpandObjectKeys = 5,
+    maxStringLength = 200,
+    collectionLimit = 50,
+    showCollectionInfo = true,
+    showExpandControls = true,
+    showActionButtons = true,
+    className = '',
+    preserveKeyOrder = true,
+  } = config;
+  
+  // JSON Tree theme optimized for dark theme
+  const jsonTreeTheme = {
+    scheme: 'djangocfg-dark',
+    base00: 'transparent', // Background
+    base01: '#1a1a1a', // Lighter background
+    base02: '#2a2a2a', // Selection background
+    base03: '#6b7280', // Comments, invisibles
+    base04: '#9ca3af', // Dark foreground
+    base05: '#e5e7eb', // Default foreground
+    base06: '#f3f4f6', // Light foreground
+    base07: '#ffffff', // Lightest foreground
+    base08: '#ef4444', // Red - for null, undefined
+    base09: '#f97316', // Orange - for numbers
+    base0A: '#eab308', // Yellow - for strings
+    base0B: '#22c55e', // Green - for booleans (true)
+    base0C: '#06b6d4', // Cyan - for dates, regex
+    base0D: '#3b82f6', // Blue - for keys
+    base0E: '#a855f7', // Purple - for functions
+    base0F: '#f43f5e', // Pink - for deprecations
+  };
+
+  // Smart expansion logic
+  const shouldExpandNodeInitially = (keyPath: readonly (string | number)[], nodeData: unknown, level: number) => {
+    // If user explicitly clicked "Expand All", expand everything
+    if (expandAll === true) return true;
+
+    // If user explicitly clicked "Collapse All", collapse everything
+    if (expandAll === false) return false;
+
+    // Default auto-expansion (expandAll === null)
+    // Always expand up to maxAutoExpandDepth
+    if (level <= maxAutoExpandDepth) return true;
+
+    // For arrays, expand if they have less than maxAutoExpandArrayItems
+    if (Array.isArray(nodeData) && nodeData.length <= maxAutoExpandArrayItems) return true;
+
+    // For objects, expand if they have less than maxAutoExpandObjectKeys
+    if (nodeData && typeof nodeData === 'object' && !Array.isArray(nodeData)) {
+      const keys = Object.keys(nodeData);
+      return keys.length <= maxAutoExpandObjectKeys;
+    }
+
+    return false;
+  };
+
+  // Collection info display
+  const getItemString = showCollectionInfo 
+    ? (nodeType: string, nodeData: unknown) => {
+        if (nodeType === 'Array') {
+          const length = Array.isArray(nodeData) ? nodeData.length : 0;
+          return length > 0 ? <span className="text-muted-foreground text-sm">({length} items)</span> : null;
+        }
+        if (nodeType === 'Object') {
+          const keys = nodeData && typeof nodeData === 'object' ? Object.keys(nodeData) : [];
+          return keys.length > 0 ? <span className="text-muted-foreground text-sm">({keys.length} keys)</span> : null;
+        }
+        return null;
+      }
+    : () => null;
+
+  // Value processing for better display
+  const postprocessValue = (value: unknown) => {
+    // Truncate very long strings
+    if (typeof value === 'string' && value.length > maxStringLength) {
+      return value.substring(0, maxStringLength) + '... (truncated)';
+    }
+    return value;
+  };
+
+  // Custom node detection for special formatting
+  const isCustomNode = (value: unknown) => {
+    // Mark URLs as custom nodes for special styling
+    if (typeof value === 'string' && (value.startsWith('http://') || value.startsWith('https://'))) {
+      return true;
+    }
+    return false;
+  };
+
+  // Action handlers
+  const handleCopy = () => {
+    const jsonString = JSON.stringify(data, null, 2);
+    copyToClipboard(jsonString);
+  };
+
+  const handleDownload = () => {
+    const jsonString = JSON.stringify(data, null, 2);
+    const blob = new Blob([jsonString], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'data.json';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className={`relative border border-border rounded-sm h-full overflow-hidden ${className}`}>
+      {/* Header with title and controls */}
+      {(title || showExpandControls || showActionButtons) && (
+        <div className="p-4 border-b border-border bg-muted/50 rounded-t-sm">
+          <div className="flex items-center justify-between">
+            {title && (
+              <h6 className="text-lg font-semibold text-foreground">{title}</h6>
+            )}
+            
+            {(showExpandControls || showActionButtons) && (
+              <div className="flex items-center space-x-2">
+                {/* Expand/Collapse Controls */}
+                {showExpandControls && (
+                  <Button
+                    variant={expandAll === true ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => {
+                      const newState = expandAll === true ? false : true;
+                      setExpandAll(newState);
+                      setRenderKey(prev => prev + 1);
+                    }}
+                    className="h-8 px-2"
+                  >
+                    {expandAll === true ? (
+                      <>
+                        <ChevronUp className="h-3 w-3" />
+                        <span className="ml-1 text-xs">Collapse All</span>
+                      </>
+                    ) : (
+                      <>
+                        <ChevronDown className="h-3 w-3" />
+                        <span className="ml-1 text-xs">Expand All</span>
+                      </>
+                    )}
+                  </Button>
+                )}
+                
+                {/* Action Buttons */}
+                {showActionButtons && (
+                  <>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleCopy}
+                      className="h-8 px-2"
+                    >
+                      <Copy className="h-3 w-3" />
+                      <span className="ml-1 text-xs hidden sm:inline">Copy</span>
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleDownload}
+                      className="h-8 px-2"
+                    >
+                      <Download className="h-3 w-3" />
+                      <span className="ml-1 text-xs hidden sm:inline">Download</span>
+                    </Button>
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* JSON Tree Content */}
+      <div className="h-full overflow-auto p-4">
+        <JSONTree
+          key={renderKey} // Force re-render when expand/collapse state changes
+          data={data}
+          theme={jsonTreeTheme}
+          invertTheme={false}
+          hideRoot={true}
+          shouldExpandNodeInitially={shouldExpandNodeInitially}
+          getItemString={getItemString}
+          postprocessValue={postprocessValue}
+          isCustomNode={isCustomNode}
+          collectionLimit={collectionLimit}
+          sortObjectKeys={!preserveKeyOrder}
+          {...jsonTreeProps}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default JsonTreeComponent;