@djangocfg/ui-nextjs 2.1.90 → 2.1.92

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

@@ -1,96 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-/**
- * 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

@@ -1,243 +0,0 @@
-'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

@@ -1,213 +0,0 @@
-/**
- * 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

@@ -1,55 +0,0 @@
-/**
- * LottiePlayer - Dynamic Import Wrapper
- *
- * Lazy loads the LottiePlayer component for optimal bundle size
- */
-
-'use client';
-
-import dynamic from 'next/dynamic';
-import React from 'react';
-
-import { LottiePlayerProps } from './types';
-
-// Dynamically import the LottiePlayer component to reduce initial bundle size
-const LottiePlayerClient = dynamic(
-  () => import('./LottiePlayer.client').then((mod) => ({ default: mod.LottiePlayer })),
-  {
-    ssr: false,
-    loading: () => (
-      <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-nextjs/tools';
- *
- * <LottiePlayer
- *   src="https://example.com/animation.json"
- *   size="md"
- *   autoplay
- *   loop
- * />
- * ```
- */
-export function LottiePlayer(props: LottiePlayerProps) {
-  return <LottiePlayerClient {...props} />;
-}
-
-// Re-export types for convenience
-export type { LottiePlayerProps, LottieSize, LottieSpeed, LottieDirection } from './types';
-export { useLottie } from './useLottie';
-export type { UseLottieOptions, UseLottieReturn } from './useLottie';