@djangocfg/ui-nextjs 2.1.42 → 2.1.44

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 {

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

@@ -1,11 +1,15 @@
 'use client';
 
-import React, { useMemo, useCallback } from 'react';
-import { Badge, Button, Card, CardContent, CardHeader, CardTitle, CopyButton } from '@djangocfg/ui-core/components';
-import { XCircle, Download } from 'lucide-react';
+import { Download, XCircle } from 'lucide-react';
+import React, { useCallback, useMemo } from 'react';
+
+import {
+    Badge, Button, Card, CardContent, CardHeader, CardTitle, CopyButton
+} from '@djangocfg/ui-core/components';
+
+import JsonTree from '../../JsonTree';
 import { usePlaygroundContext } from '../context/PlaygroundContext';
 import { getStatusColor } from '../utils';
-import JsonTree from '../../JsonTree';
 
 export const ResponseViewer: React.FC = () => {
     const { state } = usePlaygroundContext();

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

@@ -1,11 +1,15 @@
 'use client';
 
-import React from 'react';
-import { Badge, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@djangocfg/ui-core/components';
 import { GitBranch, Info } from 'lucide-react';
+import React from 'react';
+
+import {
+    Badge, Select, SelectContent, SelectItem, SelectTrigger, SelectValue
+} from '@djangocfg/ui-core/components';
+
 import { usePlaygroundContext } from '../context/PlaygroundContext';
-import { API_VERSIONS, getVersionById, getVersionStats } from '../utils/versionManager';
 import useOpenApiSchema from '../hooks/useOpenApiSchema';
+import { API_VERSIONS, getVersionById, getVersionStats } from '../utils/versionManager';
 
 export const VersionSelector: React.FC = () => {
   const { state, config, setSelectedVersion } = usePlaygroundContext();

package/src/tools/OpenapiViewer/context/PlaygroundContext.tsx

@@ -1,10 +1,16 @@
 'use client';
 
-import React, { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react';
 import consola from 'consola';
-import { type ApiEndpoint, type ApiResponse, type PlaygroundContextType, type PlaygroundState, type PlaygroundStep, type PlaygroundConfig } from '../types';
-import { getDefaultVersion } from '../utils/versionManager';
+import React, {
+    createContext, ReactNode, useCallback, useContext, useEffect, useState
+} from 'react';
+
+import type {
+    ApiEndpoint, ApiResponse, PlaygroundConfig, PlaygroundContextType, PlaygroundState,
+    PlaygroundStep
+} from '../types';
 import { parseRequestHeaders, substituteUrlParameters } from '../utils';
+import { getDefaultVersion } from '../utils/versionManager';
 
 const createInitialState = (): PlaygroundState => ({
   // Step management

package/src/tools/OpenapiViewer/hooks/useOpenApiSchema.ts

@@ -1,13 +1,9 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
 import consola from 'consola';
-import {
-  ApiEndpoint,
-  OpenApiSchema,
-  SchemaSource,
-  UseOpenApiSchemaReturn,
-} from '../types';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { ApiEndpoint, OpenApiSchema, SchemaSource, UseOpenApiSchemaReturn } from '../types';
 
 // Extract endpoints from OpenAPI schema (GET only)
 const extractEndpoints = (schema: OpenApiSchema): ApiEndpoint[] => {

package/src/tools/OpenapiViewer/index.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import React from 'react';
 import dynamic from 'next/dynamic';
+import React from 'react';
+
 import { PlaygroundProvider } from './context/PlaygroundContext';
+
 import type { PlaygroundConfig } from './types';
 
 const PlaygroundLayout = dynamic(

package/src/tools/PrettyCode/PrettyCode.client.tsx

@@ -2,7 +2,9 @@
 
 import { Highlight, Language, themes } from 'prism-react-renderer';
 import React from 'react';
+
 import { CopyButton } from '@djangocfg/ui-core/components';
+
 import { useResolvedTheme } from '../../hooks/useResolvedTheme';
 
 interface PrettyCodeProps {

package/src/tools/PrettyCode/index.tsx

@@ -9,6 +9,7 @@
 
 import dynamic from 'next/dynamic';
 import React from 'react';
+
 import type { Language } from 'prism-react-renderer';
 
 // Dynamic import with loading state

package/src/tools/VideoPlayer/VideoControls.tsx

@@ -4,12 +4,13 @@
 
 'use client';
 
+import { Maximize, Minimize, Pause, Play, Volume2, VolumeX } from 'lucide-react';
 import React from 'react';
-import { useMediaStore, useMediaRemote } from '@vidstack/react';
-import type { MediaPlayerInstance } from '@vidstack/react';
-import { Play, Pause, Volume2, VolumeX, Maximize, Minimize } from 'lucide-react';
+
 import { cn } from '@djangocfg/ui-core/lib';
+import { useMediaRemote, useMediaStore } from '@vidstack/react';
 
+import type { MediaPlayerInstance } from '@vidstack/react';
 interface VideoControlsProps {
   player: React.RefObject<MediaPlayerInstance | null>;
   className?: string;

package/src/tools/VideoPlayer/VideoPlayer.tsx

@@ -6,20 +6,21 @@
 
 'use client';
 
-import React, { forwardRef, useImperativeHandle, useRef, useMemo } from 'react';
-import { MediaPlayer, MediaProvider, Poster } from '@vidstack/react';
-import { defaultLayoutIcons, DefaultVideoLayout } from '@vidstack/react/player/layouts/default';
-import type { MediaPlayerInstance } from '@vidstack/react';
-import { cn } from '@djangocfg/ui-core/lib';
-import { generateOgImageUrl } from '@djangocfg/ui-core/lib';
-import { type VideoPlayerProps, type VideoPlayerRef } from './types';
-
 // Import Vidstack base styles
 import '@vidstack/react/player/styles/base.css';
 // Import default theme
 import '@vidstack/react/player/styles/default/theme.css';
 import '@vidstack/react/player/styles/default/layouts/video.css';
 
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+
+import { cn, generateOgImageUrl } from '@djangocfg/ui-core/lib';
+import { MediaPlayer, MediaProvider, Poster } from '@vidstack/react';
+import { defaultLayoutIcons, DefaultVideoLayout } from '@vidstack/react/player/layouts/default';
+
+import { type, VideoPlayerProps, VideoPlayerRef } from './types';
+
+import type { MediaPlayerInstance } from '@vidstack/react';
 /**
  * Custom error class for invalid video URLs
  */