@djangocfg/ui-tools 2.1.91

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

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

package/src/tools/JsonTree/index.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import { ChevronDown, ChevronUp, Download } from 'lucide-react';
+import React, { useState } from 'react';
+import { CommonExternalProps, JSONTree } from 'react-json-tree';
+
+import { Button, CopyButton } from '@djangocfg/ui-core/components';
+
+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);
+  
+  // 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;
+  };
+
+  // JSON string for copy/download
+  const jsonString = JSON.stringify(data, null, 2);
+
+  // Action handlers
+  const handleDownload = () => {
+    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 && (
+                  <>
+                    <CopyButton
+                      value={jsonString}
+                      variant="outline"
+                      size="sm"
+                      className="h-8 px-2"
+                      iconClassName="h-3 w-3"
+                    >
+                      Copy
+                    </CopyButton>
+                    <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; 

package/src/tools/LottiePlayer/LottiePlayer.client.tsx

@@ -0,0 +1,213 @@
+/**
+ * LottiePlayer Component
+ *
+ * Universal Lottie animation player component
+ */
+
+'use client';
+
+import React from 'react';
+import Lottie from 'react-lottie-player';
+
+import { LottiePlayerProps } from './types';
+import { useLottie } from './useLottie';
+
+// Size presets mapping
+const SIZE_PRESETS = {
+  xs: { width: 64, height: 64 },
+  sm: { width: 128, height: 128 },
+  md: { width: 256, height: 256 },
+  lg: { width: 384, height: 384 },
+  xl: { width: 512, height: 512 },
+  full: { width: '100%', height: '100%' },
+} as const;
+
+/**
+ * LottiePlayer component for displaying Lottie animations
+ *
+ * Features:
+ * - Loads animations from URLs or objects
+ * - Size presets or custom dimensions
+ * - Playback controls (speed, direction, loop)
+ * - Loading and error states
+ * - Event callbacks
+ *
+ * Usage:
+ * ```tsx
+ * // From URL with size preset
+ * <LottiePlayer
+ *   src="https://example.com/animation.json"
+ *   size="md"
+ *   autoplay
+ *   loop
+ * />
+ *
+ * // From object with custom size
+ * <LottiePlayer
+ *   src={animationData}
+ *   width={300}
+ *   height={300}
+ *   speed={1.5}
+ *   controls
+ * />
+ *
+ * // With callbacks
+ * <LottiePlayer
+ *   src="https://example.com/animation.json"
+ *   onLoad={() => console.log('Animation loaded')}
+ *   onComplete={() => console.log('Animation completed')}
+ *   onError={(err) => console.error('Error:', err)}
+ * />
+ * ```
+ */
+export function LottiePlayer({
+  src,
+  size = 'md',
+  width,
+  height,
+  autoplay = true,
+  loop = true,
+  speed = 1,
+  direction = 1,
+  controls = false,
+  background,
+  className,
+  showLoading = true,
+  onComplete,
+  onLoad,
+  onError,
+}: LottiePlayerProps) {
+  // Load animation data using our custom hook
+  const { animationData, isLoading, error, retry } = useLottie({ src });
+
+  // Notify parent about load state
+  React.useEffect(() => {
+    if (animationData && onLoad) {
+      onLoad();
+    }
+  }, [animationData, onLoad]);
+
+  // Notify parent about errors
+  React.useEffect(() => {
+    if (error && onError) {
+      onError(error);
+    }
+  }, [error, onError]);
+
+  // Determine dimensions
+  const dimensions = React.useMemo(() => {
+    // Custom dimensions override size preset
+    if (width !== undefined || height !== undefined) {
+      return {
+        width: width ?? SIZE_PRESETS[size].width,
+        height: height ?? SIZE_PRESETS[size].height,
+      };
+    }
+
+    // Use size preset
+    return SIZE_PRESETS[size];
+  }, [size, width, height]);
+
+  // Handle complete event
+  const handleComplete = React.useCallback(() => {
+    if (onComplete) {
+      onComplete();
+    }
+  }, [onComplete]);
+
+  // Loading state
+  if (isLoading && showLoading) {
+    return (
+      <div
+        className={`flex items-center justify-center ${className || ''}`}
+        style={{
+          width: dimensions.width,
+          height: dimensions.height,
+          background: background || 'transparent',
+        }}
+      >
+        <div className="flex flex-col items-center gap-2">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-gray-900" />
+          <span className="text-sm text-gray-500">Loading animation...</span>
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div
+        className={`flex items-center justify-center ${className || ''}`}
+        style={{
+          width: dimensions.width,
+          height: dimensions.height,
+          background: background || 'transparent',
+        }}
+      >
+        <div className="flex flex-col items-center gap-2 p-4 text-center">
+          <svg
+            className="h-8 w-8 text-red-500"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+          <div className="text-sm text-red-600">{error.message}</div>
+          <button
+            onClick={retry}
+            className="rounded bg-red-100 px-3 py-1 text-sm text-red-700 hover:bg-red-200"
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // No animation data
+  if (!animationData) {
+    return null;
+  }
+
+  // Render the Lottie player
+  return (
+    <div
+      className={className}
+      style={{
+        width: dimensions.width,
+        height: dimensions.height,
+        background: background || 'transparent',
+      }}
+    >
+      <Lottie
+        animationData={animationData}
+        play={autoplay}
+        loop={loop}
+        speed={speed}
+        direction={direction}
+        style={{
+          width: '100%',
+          height: '100%',
+        }}
+        onComplete={handleComplete}
+        rendererSettings={{
+          preserveAspectRatio: 'xMidYMid meet',
+        }}
+      />
+      {controls && (
+        <div className="mt-2 flex items-center justify-center gap-2">
+          <span className="text-xs text-gray-500">
+            Speed: {speed}x | Direction: {direction === 1 ? 'Forward' : 'Reverse'}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/tools/LottiePlayer/index.tsx

@@ -0,0 +1,56 @@
+/**
+ * LottiePlayer - Dynamic Import Wrapper
+ *
+ * Lazy loads the LottiePlayer component for optimal bundle size
+ */
+
+'use client';
+
+import React, { lazy, Suspense } from 'react';
+import { LottiePlayerProps } from './types';
+
+// Lazy load the client component
+const LottiePlayerClient = lazy(() =>
+  import('./LottiePlayer.client').then((mod) => ({ default: mod.LottiePlayer }))
+);
+
+// Loading fallback component
+const LoadingFallback = () => (
+  <div className="flex items-center justify-center p-8">
+    <div className="flex flex-col items-center gap-2">
+      <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-gray-900" />
+      <span className="text-sm text-gray-500">Loading player...</span>
+    </div>
+  </div>
+);
+
+/**
+ * LottiePlayer component wrapper with dynamic import
+ *
+ * This component automatically handles code splitting and lazy loading
+ * of the Lottie player to optimize bundle size.
+ *
+ * Usage:
+ * ```tsx
+ * import { LottiePlayer } from '@djangocfg/ui-core/tools';
+ *
+ * <LottiePlayer
+ *   src="https://example.com/animation.json"
+ *   size="md"
+ *   autoplay
+ *   loop
+ * />
+ * ```
+ */
+export function LottiePlayer(props: LottiePlayerProps) {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <LottiePlayerClient {...props} />
+    </Suspense>
+  );
+}
+
+// Re-export types for convenience
+export type { LottiePlayerProps, LottieSize, LottieSpeed, LottieDirection } from './types';
+export { useLottie } from './useLottie';
+export type { UseLottieOptions, UseLottieReturn } from './useLottie';