@djangocfg/ui-nextjs 2.1.41 → 2.1.43

package/src/components/ssr-pagination.tsx

@@ -1,18 +1,15 @@
 'use client';
 
-import React from 'react';
 import { usePathname } from 'next/navigation';
-import { cn } from '@djangocfg/ui-core/lib';
+import React from 'react';
+
 import { useIsMobile } from '@djangocfg/ui-core/hooks';
+import { cn } from '@djangocfg/ui-core/lib';
+
 import { useQueryParams } from '../hooks';
 import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
+    Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink,
+    PaginationNext, PaginationPrevious
 } from './pagination';
 
 interface SSRPaginationProps {

package/src/hooks/useDeviceDetect.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useState, useEffect } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 // Safe defaults for SSR
 const defaultSelectors = {

package/src/hooks/useHotkey.ts

@@ -1,7 +1,8 @@
 'use client';
 
 import type { RefObject } from 'react';
-import { useHotkeys, Options as HotkeysOptions } from 'react-hotkeys-hook';
+import { Options as HotkeysOptions, useHotkeys } from 'react-hotkeys-hook';
+
 import type { HotkeyCallback, Keys } from 'react-hotkeys-hook';
 
 /**

package/src/hooks/useLocalStorage.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 /**
  * Simple localStorage hook with better error handling

package/src/hooks/useQueryParams.ts

@@ -15,8 +15,8 @@
 
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
 import { usePathname } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
 
 /**
  * Hook to safely access URL query parameters without useSearchParams()

package/src/theme/ForceTheme.tsx

@@ -9,6 +9,7 @@
 'use client';
 
 import React, { ReactNode } from 'react';
+
 import { cn } from '@djangocfg/ui-core/lib';
 
 interface ForceThemeProps {

package/src/theme/ThemeProvider.tsx

@@ -22,6 +22,7 @@
 'use client';
 
 import { ThemeProvider as NextThemesProvider, useTheme as useNextTheme } from 'next-themes';
+
 import type { ThemeProviderProps as NextThemesProviderProps } from 'next-themes';
 
 // Re-export types

package/src/theme/ThemeToggle.tsx

@@ -21,12 +21,14 @@
 
 'use client';
 
-import { useEffect, useState } from 'react';
 import { Moon, Sun } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
 import { Button } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
-import { useThemeContext } from './ThemeProvider';
+
 import { useIsMobile } from '../hooks';
+import { useThemeContext } from './ThemeProvider';
 
 export interface ThemeToggleProps {
   /** Custom className */

package/src/tools/JsonForm/JsonSchemaForm.tsx

@@ -1,32 +1,23 @@
 'use client';
 
-import React, { useMemo, useCallback } from 'react';
+import consola from 'consola';
+import { AlertCircle } from 'lucide-react';
+import React, { useCallback, useMemo } from 'react';
+
+import { Alert, AlertDescription, Button } from '@djangocfg/ui-core/components';
 import Form from '@rjsf/core';
-import validator from '@rjsf/validator-ajv8';
 import { RegistryWidgetsType } from '@rjsf/utils';
-import { Button, Alert, AlertDescription } from '@djangocfg/ui-core/components';
-import { AlertCircle } from 'lucide-react';
-import consola from 'consola';
+import validator from '@rjsf/validator-ajv8';
 
+import {
+    ArrayFieldItemTemplate, ArrayFieldTemplate, BaseInputTemplate, ErrorListTemplate, FieldTemplate,
+    ObjectFieldTemplate
+} from './templates';
 import { JsonSchemaFormProps } from './types';
+import { normalizeFormData, validateSchema } from './utils';
 import {
-  TextWidget,
-  NumberWidget,
-  CheckboxWidget,
-  SelectWidget,
-  SwitchWidget,
-  ColorWidget,
-  SliderWidget,
+    CheckboxWidget, ColorWidget, NumberWidget, SelectWidget, SliderWidget, SwitchWidget, TextWidget
 } from './widgets';
-import {
-  FieldTemplate,
-  ObjectFieldTemplate,
-  ArrayFieldTemplate,
-  ArrayFieldItemTemplate,
-  ErrorListTemplate,
-  BaseInputTemplate,
-} from './templates';
-import { validateSchema, normalizeFormData } from './utils';
 
 /**
  * JSON Schema Form Component

package/src/tools/JsonForm/examples/BotConfigExample.tsx

@@ -1,10 +1,14 @@
 'use client';
 
+import consola from 'consola';
 import React, { useState } from 'react';
-import { JsonSchemaForm } from '../JsonSchemaForm';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@djangocfg/ui-core/components';
+
+import {
+    Card, CardContent, CardDescription, CardHeader, CardTitle
+} from '@djangocfg/ui-core/components';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
-import consola from 'consola';
+
+import { JsonSchemaForm } from '../JsonSchemaForm';
 
 /**
  * Example JSON Schema for Bot Configuration

package/src/tools/JsonForm/examples/RealBotConfigExample.tsx

@@ -1,10 +1,14 @@
 'use client';
 
+import consola from 'consola';
 import React, { useState } from 'react';
-import { JsonSchemaForm } from '../JsonSchemaForm';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@djangocfg/ui-core/components';
+
+import {
+    Card, CardContent, CardDescription, CardHeader, CardTitle
+} from '@djangocfg/ui-core/components';
 import { RJSFSchema } from '@rjsf/utils';
-import consola from 'consola';
+
+import { JsonSchemaForm } from '../JsonSchemaForm';
 
 /**
  * Real Bot Config Schema from API

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

@@ -1,8 +1,9 @@
 "use client"
 
 import React from 'react';
-import { ArrayFieldItemTemplateProps, getTemplate, getUiOptions } from '@rjsf/utils';
+
 import { cn } from '@djangocfg/ui-core/lib';
+import { ArrayFieldItemTemplateProps, getTemplate, getUiOptions } from '@rjsf/utils';
 
 /**
  * Array field item template for JSON Schema Form

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

@@ -1,9 +1,10 @@
 "use client"
 
+import { Plus } from 'lucide-react';
 import React from 'react';
-import { ArrayFieldTemplateProps } from '@rjsf/utils';
+
 import { Button } from '@djangocfg/ui-core/components';
-import { Plus } from 'lucide-react';
+import { ArrayFieldTemplateProps } from '@rjsf/utils';
 
 /**
  * Array field template for JSON Schema Form

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

@@ -1,8 +1,9 @@
 "use client"
 
-import React, { useCallback, useMemo, ChangeEvent, FocusEvent } from 'react';
-import { getInputProps, WidgetProps } from '@rjsf/utils';
+import React, { ChangeEvent, FocusEvent, useCallback, useMemo } from 'react';
+
 import { Input } from '@djangocfg/ui-core/components';
+import { getInputProps, WidgetProps } from '@rjsf/utils';
 
 /**
  * Base input template for JSON Schema Form

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

@@ -1,9 +1,10 @@
 "use client"
 
+import { AlertCircle } from 'lucide-react';
 import React from 'react';
-import { ErrorListProps } from '@rjsf/utils';
+
 import { Alert, AlertDescription, AlertTitle } from '@djangocfg/ui-core/components';
-import { AlertCircle } from 'lucide-react';
+import { ErrorListProps } from '@rjsf/utils';
 
 /**
  * Error list template for JSON Schema Form

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

@@ -1,9 +1,10 @@
 "use client"
 
 import React from 'react';
-import { FieldTemplateProps } from '@rjsf/utils';
+
 import { Label } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
+import { FieldTemplateProps } from '@rjsf/utils';
 
 /**
  * Field template for JSON Schema Form

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

@@ -1,14 +1,11 @@
 "use client"
 
+import { ChevronDown } from 'lucide-react';
 import React, { useState } from 'react';
-import { ObjectFieldTemplateProps } from '@rjsf/utils';
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@djangocfg/ui-core/components';
-import { ChevronDown } from 'lucide-react';
+import { ObjectFieldTemplateProps } from '@rjsf/utils';
 
 /**
  * Object field template for JSON Schema Form

package/src/tools/JsonForm/utils.ts

@@ -1,6 +1,7 @@
-import { RJSFSchema } from '@rjsf/utils';
 import consola from 'consola';
 
+import { RJSFSchema } from '@rjsf/utils';
+
 /**
  * Utility functions for JSON Schema Form
  */

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { WidgetProps } from '@rjsf/utils';
+
 import { Checkbox } from '@djangocfg/ui-core/components';
+import { WidgetProps } from '@rjsf/utils';
 
 /**
  * Checkbox widget for JSON Schema Form

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

@@ -1,8 +1,9 @@
 "use client"
 
-import React, { useMemo, useCallback, useRef } from 'react';
-import { WidgetProps } from '@rjsf/utils';
+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

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

@@ -1,8 +1,9 @@
 "use client"
 
-import React, { useMemo, useCallback } from 'react';
-import { WidgetProps } from '@rjsf/utils';
+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

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

@@ -1,14 +1,11 @@
 "use client"
 
-import React, { useMemo, useCallback } from 'react';
-import { WidgetProps } from '@rjsf/utils';
+import React, { useCallback, useMemo } from 'react';
+
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+    Select, SelectContent, SelectItem, SelectTrigger, SelectValue
 } from '@djangocfg/ui-core/components';
+import { WidgetProps } from '@rjsf/utils';
 
 /**
  * Select dropdown widget for JSON Schema Form

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

@@ -1,9 +1,10 @@
 "use client"
 
-import React, { useMemo, useCallback } from 'react';
-import { WidgetProps } from '@rjsf/utils';
-import { Slider, Input } from '@djangocfg/ui-core/components';
+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

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { WidgetProps } from '@rjsf/utils';
+
 import { Switch } from '@djangocfg/ui-core/components';
+import { WidgetProps } from '@rjsf/utils';
 
 /**
  * Switch toggle widget for JSON Schema Form

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

@@ -1,8 +1,9 @@
 "use client"
 
-import React, { useMemo, useCallback } from 'react';
-import { WidgetProps } from '@rjsf/utils';
+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

package/src/tools/JsonTree/index.tsx

@@ -1,8 +1,9 @@
 'use client';
 
+import { ChevronDown, ChevronUp, Download } from 'lucide-react';
 import React, { useState } from 'react';
 import { CommonExternalProps, JSONTree } from 'react-json-tree';
-import { ChevronDown, ChevronUp, Download } from 'lucide-react';
+
 import { Button, CopyButton } from '@djangocfg/ui-core/components';
 
 export type { Language } from 'prism-react-renderer';

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

@@ -8,6 +8,7 @@
 
 import React from 'react';
 import Lottie from 'react-lottie-player';
+
 import { LottiePlayerProps } from './types';
 import { useLottie } from './useLottie';
 

package/src/tools/LottiePlayer/index.tsx

@@ -8,6 +8,7 @@
 
 import dynamic from 'next/dynamic';
 import React from 'react';
+
 import { LottiePlayerProps } from './types';
 
 // Dynamically import the LottiePlayer component to reduce initial bundle size

package/src/tools/LottiePlayer/useLottie.ts

@@ -6,7 +6,8 @@
 
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
 import { LottieAnimationData } from './types';
 
 export interface UseLottieOptions {

package/src/tools/Mermaid/Mermaid.client.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import React from 'react';
+
 import { useResolvedTheme } from '../../hooks/useResolvedTheme';
-import { useMermaidRenderer } from './hooks/useMermaidRenderer';
-import { useMermaidFullscreen } from './hooks/useMermaidFullscreen';
 import { MermaidFullscreenModal } from './components/MermaidFullscreenModal';
+import { useMermaidFullscreen } from './hooks/useMermaidFullscreen';
+import { useMermaidRenderer } from './hooks/useMermaidRenderer';
 
 interface MermaidProps {
     chart: string;

package/src/tools/Mermaid/components/MermaidFullscreenModal.tsx

@@ -2,6 +2,7 @@
 
 import React, { useEffect } from 'react';
 import { createPortal } from 'react-dom';
+
 import { applyMermaidTextColors } from '../utils/mermaid-helpers';
 import { MermaidCodeViewer } from './MermaidCodeViewer';
 

package/src/tools/Mermaid/hooks/useMermaidFullscreen.ts

@@ -2,7 +2,7 @@
  * Hook for managing Mermaid fullscreen modal
  */
 
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export function useMermaidFullscreen() {
     const [isFullscreen, setIsFullscreen] = useState(false);

package/src/tools/Mermaid/hooks/useMermaidRenderer.ts

@@ -2,10 +2,11 @@
  * Hook for rendering Mermaid diagrams with debounce and validation
  */
 
-import { useEffect, useRef, useState } from 'react';
 import mermaid from 'mermaid';
-import { useMermaidValidation } from './useMermaidValidation';
+import { useEffect, useRef, useState } from 'react';
+
 import { useMermaidCleanup } from './useMermaidCleanup';
+import { useMermaidValidation } from './useMermaidValidation';
 
 interface UseMermaidRendererProps {
     chart: string;

package/src/tools/OpenapiViewer/components/EndpointInfo.tsx

@@ -1,8 +1,13 @@
 'use client';
 
+import { AlertCircle, ChevronDown, Code, Database, FileText } from 'lucide-react';
 import React, { useMemo } from 'react';
-import { Badge, Card, CardContent, CardHeader, CardTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, CopyButton } from '@djangocfg/ui-core/components';
-import { ChevronDown, Code, Database, FileText, AlertCircle } from 'lucide-react';
+
+import {
+    Badge, Card, CardContent, CardHeader, CardTitle, Collapsible, CollapsibleContent,
+    CollapsibleTrigger, CopyButton
+} from '@djangocfg/ui-core/components';
+
 import { usePlaygroundContext } from '../context/PlaygroundContext';
 import { getMethodColor, getStatusColor } from '../utils';
 
@@ -119,20 +124,21 @@ export const EndpointInfo: React.FC = () => {
                 <ChevronDown className="h-4 w-4" />
               </CollapsibleTrigger>
               <CollapsibleContent className="mt-2 space-y-2">
-                {selectedEndpoint.responses.map((response, index) => (
-                  <div key={index} className="flex items-center space-x-2 text-xs">
-                    <Badge 
-                      variant={getStatusColor(parseInt(response.code)) === 'success' ? 'default' : 
-                              getStatusColor(parseInt(response.code)) === 'error' ? 'destructive' : 'secondary'} 
-                      className="text-xs"
-                    >
-                      {response.code}
-                    </Badge>
-                    <span className="text-muted-foreground">
-                      {response.description}
-                    </span>
-                  </div>
-                ))}
+                {selectedEndpoint.responses.map((response, index) => {
+                  const statusColor = getStatusColor(parseInt(response.code));
+                  const badgeVariant = statusColor === 'success' ? 'default' :
+                                      statusColor === 'error' ? 'destructive' : 'secondary';
+                  return (
+                    <div key={index} className="flex items-center space-x-2 text-xs">
+                      <Badge variant={badgeVariant} className="text-xs">
+                        {response.code}
+                      </Badge>
+                      <span className="text-muted-foreground">
+                        {response.description}
+                      </span>
+                    </div>
+                  );
+                })}
               </CollapsibleContent>
             </Collapsible>
           )}

package/src/tools/OpenapiViewer/components/EndpointsLibrary.tsx

@@ -1,15 +1,23 @@
 'use client';
 
+import {
+    BarChart3, Code, Database, FileText, Filter, Grid3X3, List, Search, Settings, Shield, Users
+} from 'lucide-react';
 import React, { useMemo } from 'react';
-import { Badge, Button, Card, CardContent, CardHeader, CardTitle, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Skeleton } from '@djangocfg/ui-core/components';
-import { Search, Code, Database, Shield, Settings, Users, FileText, BarChart3, Filter, Grid3X3, List } from 'lucide-react';
+
+import {
+    Badge, Button, Card, CardContent, CardHeader, CardTitle, Input, Select, SelectContent,
+    SelectItem, SelectTrigger, SelectValue, Skeleton, Table, TableBody, TableCell, TableHead,
+    TableHeader, TableRow
+} from '@djangocfg/ui-core/components';
+
 import { usePlaygroundContext } from '../context/PlaygroundContext';
-import type { ApiEndpoint } from '../types';
-import { getMethodColor } from '../utils';
 import useOpenApiSchema from '../hooks/useOpenApiSchema';
+import { getMethodColor } from '../utils';
 import { deduplicateEndpoints } from '../utils/versionManager';
 import { VersionSelector } from './VersionSelector';
 
+import type { ApiEndpoint } from '../types';
 const categoryIcons: Record<string, React.ReactNode> = {
     'Authentication': <Shield className="h-4 w-4" />,
     'Users': <Users className="h-4 w-4" />,

package/src/tools/OpenapiViewer/components/PlaygroundLayout.tsx

@@ -1,12 +1,14 @@
 'use client';
 
+import { Menu, X } from 'lucide-react';
 import React from 'react';
+
 import { Button, Sheet, SheetContent, SheetTrigger } from '@djangocfg/ui-core/components';
-import { Menu, X } from 'lucide-react';
+
 import { usePlaygroundContext } from '../context/PlaygroundContext';
 import { useMobile } from '../hooks/useMobile';
-import { PlaygroundStepper } from './PlaygroundStepper';
 import { EndpointsLibrary } from './EndpointsLibrary';
+import { PlaygroundStepper } from './PlaygroundStepper';
 import { RequestBuilder } from './RequestBuilder';
 import { ResponseViewer } from './ResponseViewer';
 

package/src/tools/OpenapiViewer/components/PlaygroundStepper.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import { Check, ChevronLeft, ChevronRight, Code, FileText, Send } from 'lucide-react';
 import React from 'react';
+
 import { Badge, Button } from '@djangocfg/ui-core/components';
-import { ChevronLeft, ChevronRight, Check, Code, Send, FileText } from 'lucide-react';
+
 import { usePlaygroundContext } from '../context/PlaygroundContext';
 import { PlaygroundStep } from '../types';
 

package/src/tools/OpenapiViewer/components/RequestBuilder.tsx

@@ -1,14 +1,17 @@
 'use client';
 
+import { Key, Loader2, Send } from 'lucide-react';
 import React, { useCallback } from 'react';
-import { Button, Card, CardContent, CardHeader, CardTitle, Input, Textarea, CopyButton } from '@djangocfg/ui-core/components';
-import { Loader2, Key, Send } from 'lucide-react';
+
+import {
+    Button, Card, CardContent, CardHeader, CardTitle, CopyButton, Input, Textarea
+} from '@djangocfg/ui-core/components';
+
+import PrettyCode from '../../PrettyCode';
 import { usePlaygroundContext } from '../context/PlaygroundContext';
-import { findApiKeyById } from '../utils';
-import { isValidJson, parseRequestHeaders } from '../utils';
-import { RequestParametersForm } from './RequestParametersForm';
+import { findApiKeyById, isValidJson, parseRequestHeaders } from '../utils';
 import { EndpointInfo } from './EndpointInfo';
-import PrettyCode from '../../PrettyCode';
+import { RequestParametersForm } from './RequestParametersForm';
 
 export const RequestBuilder: React.FC = () => {
   const {

package/src/tools/OpenapiViewer/components/RequestParametersForm.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import { HelpCircle } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+
 import {
-  Card, CardContent, CardHeader, CardTitle,
-  Input, Label, Textarea, Button, Badge,
-  Tabs, TabsContent, TabsList, TabsTrigger,
-  Accordion, AccordionContent, AccordionItem, AccordionTrigger,
-  Tooltip, TooltipContent, TooltipProvider, TooltipTrigger
+    Accordion, AccordionContent, AccordionItem, AccordionTrigger, Badge, Button, Card, CardContent,
+    CardHeader, CardTitle, Input, Label, Tabs, TabsContent, TabsList, TabsTrigger, Textarea,
+    Tooltip, TooltipContent, TooltipProvider, TooltipTrigger
 } from '@djangocfg/ui-core/components';
-import { HelpCircle } from 'lucide-react';
+
 import { usePlaygroundContext } from '../context/PlaygroundContext';
 
 interface Parameter {