@djangocfg/ui-tools 2.1.118 → 2.1.120

package/src/tools/Gallery/components/{GalleryVideo.tsx → media/GalleryVideo.tsx}

@@ -4,7 +4,7 @@ import { memo, useCallback, useMemo, useRef, useState } from 'react'
 import { cn } from '@djangocfg/ui-core/lib'
 import { useTypedT, type I18nTranslations } from '@djangocfg/i18n'
 import { Play, Pause, Volume2, VolumeX, Maximize, AlertCircle } from 'lucide-react'
-import type { GalleryMediaItem } from '../types'
+import type { GalleryMediaItem } from '../../types'
 
 export interface GalleryVideoProps {
   /** Video data */

package/src/tools/Gallery/components/media/index.ts

@@ -0,0 +1,3 @@
+export { GalleryImage } from './GalleryImage'
+export { GalleryVideo } from './GalleryVideo'
+export { GalleryMedia, type GalleryMediaProps } from './GalleryMedia'

package/src/tools/Gallery/components/{GalleryCarousel.tsx → preview/GalleryCarousel.tsx}

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { memo, useCallback, useEffect, useMemo } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { cn } from '@djangocfg/ui-core/lib'
 import {
   Carousel,
@@ -12,9 +12,9 @@ import {
   type CarouselApi,
 } from '@djangocfg/ui-core/components'
 import { ZoomIn } from 'lucide-react'
-import { GalleryMedia } from './GalleryMedia'
-import { GalleryThumbnails } from './GalleryThumbnails'
-import type { GalleryMediaItem } from '../types'
+import { GalleryMedia } from '../media'
+import { GalleryThumbnails } from '../thumbnails'
+import type { GalleryMediaItem } from '../../types'
 
 export interface GalleryCarouselProps {
   images: GalleryMediaItem[]
@@ -65,6 +65,12 @@ export const GalleryCarousel = memo(function GalleryCarousel({
   className,
 }: GalleryCarouselProps) {
   const [api, setApi] = React.useState<CarouselApi>()
+  // Track if component is mounted (client-side) to avoid hydration mismatches
+  const [isMounted, setIsMounted] = useState(false)
+
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
 
   // Notify parent when API is ready
   useEffect(() => {
@@ -136,6 +142,107 @@ export const GalleryCarousel = memo(function GalleryCarousel({
     [api]
   )
 
+  // Track pointer down position to distinguish click from drag
+  const pointerStartRef = useRef<{ x: number; y: number; time: number } | null>(null)
+  const CLICK_THRESHOLD = 10 // pixels
+  const CLICK_TIME_THRESHOLD = 300 // ms
+
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    pointerStartRef.current = { x: e.clientX, y: e.clientY, time: Date.now() }
+  }, [])
+
+  const handlePointerUp = useCallback((e: React.PointerEvent) => {
+    if (!pointerStartRef.current || !enableLightbox || !onLightboxOpen) return
+
+    const { x, y, time } = pointerStartRef.current
+    const dx = Math.abs(e.clientX - x)
+    const dy = Math.abs(e.clientY - y)
+    const dt = Date.now() - time
+
+    // Only trigger click if pointer didn't move much and was quick
+    if (dx < CLICK_THRESHOLD && dy < CLICK_THRESHOLD && dt < CLICK_TIME_THRESHOLD) {
+      onLightboxOpen()
+    }
+
+    pointerStartRef.current = null
+  }, [enableLightbox, onLightboxOpen])
+
+  // SSR fallback - render first image only to avoid hydration mismatch
+  // The carousel requires DOM access and will cause issues during SSR
+  if (!isMounted) {
+    return (
+      <div className={cn('space-y-3', className)}>
+        <div className="relative rounded-xl overflow-hidden">
+          <div
+            className="relative bg-muted"
+            style={{ aspectRatio }}
+          >
+            <GalleryMedia
+              media={images[0]}
+              className="w-full h-full"
+              priority
+            />
+            {/* Dark overlay */}
+            <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-black/20 pointer-events-none" />
+          </div>
+
+          {/* Counter */}
+          {showCounter && hasMultiple && (
+            <div
+              className={cn(
+                'absolute bottom-3 right-3 z-10',
+                'bg-black/60 backdrop-blur-sm text-white px-3 py-1.5 rounded-full',
+                'text-sm font-medium'
+              )}
+            >
+              1 / {total}
+            </div>
+          )}
+
+          {/* Mobile dots */}
+          {hasMultiple && (
+            <div className="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-2 md:hidden z-10">
+              {mobileDots.map((index) => (
+                <div
+                  key={index}
+                  className={cn(
+                    'rounded-full',
+                    index === 0
+                      ? 'w-2.5 h-2.5 bg-white shadow-[0_0_4px_rgba(255,255,255,0.8)]'
+                      : 'w-2 h-2 bg-white/40'
+                  )}
+                />
+              ))}
+              {remainingCount > 0 && (
+                <span className="text-white/70 text-xs ml-1">+{remainingCount}</span>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Thumbnails placeholder */}
+        {showThumbnails && hasMultiple && (
+          <div className="hidden md:flex gap-2">
+            {images.slice(0, 8).map((image, index) => (
+              <div
+                key={image.id}
+                className={cn(
+                  'w-16 h-16 rounded-lg overflow-hidden bg-muted flex-shrink-0',
+                  index === 0 && 'ring-2 ring-primary'
+                )}
+              >
+                <GalleryMedia
+                  media={image}
+                  className="w-full h-full"
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  }
+
   return (
     <div className={cn('space-y-3', className)}>
       <Carousel
@@ -150,9 +257,10 @@ export const GalleryCarousel = memo(function GalleryCarousel({
           {images.map((image, index) => (
             <CarouselItem key={image.id} className="pl-0">
               <div
-                className="relative bg-muted cursor-pointer"
+                className={cn('relative bg-muted', enableLightbox && 'cursor-pointer')}
                 style={{ aspectRatio }}
-                onClick={enableLightbox ? onLightboxOpen : undefined}
+                onPointerDown={enableLightbox ? handlePointerDown : undefined}
+                onPointerUp={enableLightbox ? handlePointerUp : undefined}
               >
                 <GalleryMedia
                   media={image}

package/src/tools/Gallery/components/{GalleryGrid.tsx → preview/GalleryGrid.tsx}

@@ -3,7 +3,7 @@
 import { memo, useCallback, useMemo, useState } from 'react'
 import { cn } from '@djangocfg/ui-core/lib'
 import { Play } from 'lucide-react'
-import type { GalleryMediaItem } from '../types'
+import type { GalleryMediaItem } from '../../types'
 
 export type GalleryGridLayout =
   | 'auto'

package/src/tools/Gallery/components/preview/index.ts

@@ -0,0 +1,2 @@
+export { GalleryCarousel } from './GalleryCarousel'
+export { GalleryGrid, type GalleryGridProps, type GalleryGridLayout } from './GalleryGrid'

package/src/tools/Gallery/components/{GalleryThumbnails.tsx → thumbnails/GalleryThumbnails.tsx}

@@ -2,7 +2,7 @@
 
 import { memo, useRef, useEffect, useCallback, Suspense, lazy } from 'react'
 import { cn } from '@djangocfg/ui-core/lib'
-import type { GalleryThumbnailsProps } from '../types'
+import type { GalleryThumbnailsProps } from '../../types'
 
 // Lazy load virtualized thumbnails - only for 50+ images
 const GalleryThumbnailsVirtual = lazy(() =>

package/src/tools/Gallery/components/{GalleryThumbnailsVirtual.tsx → thumbnails/GalleryThumbnailsVirtual.tsx}

@@ -2,8 +2,8 @@
 
 import { memo, useCallback, useEffect } from 'react'
 import { cn } from '@djangocfg/ui-core/lib'
-import { useVirtualList } from '../hooks/useVirtualList'
-import type { GalleryThumbnailsProps } from '../types'
+import { useVirtualList } from '../../hooks/useVirtualList'
+import type { GalleryThumbnailsProps } from '../../types'
 
 const SIZES = {
   sm: { width: 56, height: 40 },

package/src/tools/Gallery/components/thumbnails/index.ts

@@ -0,0 +1,2 @@
+export { GalleryThumbnails } from './GalleryThumbnails'
+export { GalleryThumbnailsVirtual } from './GalleryThumbnailsVirtual'

package/src/tools/JsonForm/JsonForm.story.tsx

@@ -0,0 +1,134 @@
+import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
+import { JsonSchemaForm } from './index';
+
+export default defineStory({
+  title: 'Tools/Json Schema Form',
+  component: JsonSchemaForm,
+  description: 'Dynamic form generator from JSON Schema using react-jsonschema-form.',
+});
+
+const SCHEMAS = {
+  simple: {
+    schema: {
+      type: 'object' as const,
+      required: ['name', 'email'],
+      properties: {
+        name: { type: 'string' as const, title: 'Name' },
+        email: { type: 'string' as const, title: 'Email', format: 'email' },
+        age: { type: 'integer' as const, title: 'Age', minimum: 0, maximum: 120 },
+      },
+    },
+    uiSchema: {},
+  },
+  vehicle: {
+    schema: {
+      type: 'object' as const,
+      required: ['make', 'model', 'year'],
+      properties: {
+        make: {
+          type: 'string' as const,
+          title: 'Make',
+          enum: ['BMW', 'Mercedes', 'Audi', 'Porsche', 'Tesla'],
+        },
+        model: { type: 'string' as const, title: 'Model' },
+        year: { type: 'integer' as const, title: 'Year', minimum: 1990, maximum: 2025 },
+        price: { type: 'number' as const, title: 'Price ($)' },
+        features: {
+          type: 'array' as const,
+          title: 'Features',
+          items: {
+            type: 'string' as const,
+            enum: ['Leather', 'Navigation', 'Sunroof', 'Heated Seats', 'Parking Sensors'],
+          },
+          uniqueItems: true,
+        },
+        description: { type: 'string' as const, title: 'Description' },
+      },
+    },
+    uiSchema: {
+      description: { 'ui:widget': 'textarea' },
+      features: { 'ui:widget': 'checkboxes' },
+    },
+  },
+  contact: {
+    schema: {
+      type: 'object' as const,
+      required: ['firstName', 'lastName', 'email'],
+      properties: {
+        firstName: { type: 'string' as const, title: 'First Name' },
+        lastName: { type: 'string' as const, title: 'Last Name' },
+        email: { type: 'string' as const, title: 'Email', format: 'email' },
+        phone: { type: 'string' as const, title: 'Phone' },
+        message: { type: 'string' as const, title: 'Message' },
+        subscribe: { type: 'boolean' as const, title: 'Subscribe to newsletter' },
+      },
+    },
+    uiSchema: {
+      message: { 'ui:widget': 'textarea' },
+    },
+  },
+};
+
+export const Interactive = () => {
+  const [schemaType] = useSelect('schemaType', {
+    options: ['simple', 'vehicle', 'contact'] as const,
+    defaultValue: 'vehicle',
+    label: 'Schema Type',
+    description: 'Select form schema',
+  });
+
+  const [liveValidate] = useBoolean('liveValidate', {
+    defaultValue: false,
+    label: 'Live Validate',
+    description: 'Validate on every change',
+  });
+
+  const config = SCHEMAS[schemaType];
+
+  return (
+    <div className="max-w-lg">
+      <JsonSchemaForm
+        schema={config.schema}
+        uiSchema={config.uiSchema}
+        liveValidate={liveValidate}
+        onSubmit={(data) => console.log('Submitted:', data.formData)}
+      />
+    </div>
+  );
+};
+
+export const SimpleForm = () => (
+  <div className="max-w-md">
+    <JsonSchemaForm
+      schema={SCHEMAS.simple.schema}
+      onSubmit={(data) => console.log('Submitted:', data.formData)}
+    />
+  </div>
+);
+
+export const VehicleForm = () => (
+  <div className="max-w-lg">
+    <JsonSchemaForm
+      schema={SCHEMAS.vehicle.schema}
+      uiSchema={SCHEMAS.vehicle.uiSchema}
+      onSubmit={(data) => console.log('Submitted:', data.formData)}
+    />
+  </div>
+);
+
+export const WithDefaultValues = () => (
+  <div className="max-w-lg">
+    <JsonSchemaForm
+      schema={SCHEMAS.vehicle.schema}
+      uiSchema={SCHEMAS.vehicle.uiSchema}
+      formData={{
+        make: 'BMW',
+        model: 'X5',
+        year: 2023,
+        price: 65000,
+        features: ['Leather', 'Navigation'],
+      }}
+      onSubmit={(data) => console.log('Submitted:', data.formData)}
+    />
+  </div>
+);

package/src/tools/JsonTree/JsonTree.story.tsx

@@ -0,0 +1,140 @@
+import { defineStory, useBoolean, useSelect, useNumber } from '@djangocfg/playground';
+import JsonTree from './index';
+
+export default defineStory({
+  title: 'Tools/Json Tree',
+  component: JsonTree,
+  description: 'Interactive JSON tree viewer with expand/collapse.',
+});
+
+const sampleData = {
+  user: {
+    id: 'usr_123',
+    name: 'John Doe',
+    email: 'john@example.com',
+    roles: ['admin', 'user'],
+    settings: {
+      theme: 'dark',
+      notifications: true,
+      language: 'en',
+    },
+  },
+  metadata: {
+    createdAt: '2024-01-15T10:30:00Z',
+    updatedAt: '2024-01-20T14:45:00Z',
+    version: 2,
+  },
+};
+
+const apiResponse = {
+  status: 200,
+  data: {
+    vehicles: [
+      { id: 1, make: 'BMW', model: 'X5', year: 2023, price: 65000 },
+      { id: 2, make: 'Mercedes', model: 'GLE', year: 2022, price: 72000 },
+      { id: 3, make: 'Audi', model: 'Q7', year: 2023, price: 68000 },
+    ],
+    pagination: {
+      page: 1,
+      perPage: 10,
+      total: 156,
+      hasMore: true,
+    },
+  },
+  meta: {
+    requestId: 'req_abc123',
+    duration: 45,
+  },
+};
+
+const nestedData = {
+  level1: {
+    level2: {
+      level3: {
+        level4: {
+          level5: {
+            value: 'deeply nested',
+          },
+        },
+      },
+    },
+  },
+};
+
+const DATA_SAMPLES = {
+  user: sampleData,
+  api: apiResponse,
+  nested: nestedData,
+};
+
+export const Interactive = () => {
+  const [dataSource] = useSelect('dataSource', {
+    options: ['user', 'api', 'nested'] as const,
+    defaultValue: 'api',
+    label: 'Data Source',
+    description: 'Select JSON data to display',
+  });
+
+  const [showExpandControls] = useBoolean('showExpandControls', {
+    defaultValue: true,
+    label: 'Expand Controls',
+    description: 'Show expand/collapse all buttons',
+  });
+
+  const [showActionButtons] = useBoolean('showActionButtons', {
+    defaultValue: true,
+    label: 'Action Buttons',
+    description: 'Show copy/download buttons',
+  });
+
+  const [maxAutoExpandDepth] = useNumber('maxAutoExpandDepth', {
+    defaultValue: 2,
+    min: 0,
+    max: 10,
+    label: 'Auto Expand Depth',
+    description: 'Maximum depth to expand automatically',
+  });
+
+  return (
+    <div className="max-w-2xl h-96">
+      <JsonTree
+        data={DATA_SAMPLES[dataSource]}
+        config={{
+          maxAutoExpandDepth,
+          showExpandControls,
+          showActionButtons,
+        }}
+      />
+    </div>
+  );
+};
+
+export const Default = () => (
+  <div className="max-w-2xl">
+    <JsonTree data={sampleData} />
+  </div>
+);
+
+export const APIResponse = () => (
+  <div className="max-w-2xl">
+    <JsonTree data={apiResponse} />
+  </div>
+);
+
+export const DeepNesting = () => (
+  <div className="max-w-2xl">
+    <JsonTree data={nestedData} />
+  </div>
+);
+
+export const CollapsedByDefault = () => (
+  <div className="max-w-2xl h-96">
+    <JsonTree data={apiResponse} config={{ maxAutoExpandDepth: 0 }} />
+  </div>
+);
+
+export const WithMaxDepth = () => (
+  <div className="max-w-2xl h-96">
+    <JsonTree data={apiResponse} config={{ maxAutoExpandDepth: 2 }} />
+  </div>
+);

package/src/tools/JsonTree/index.tsx

@@ -31,7 +31,7 @@ export interface JsonTreeConfig {
   preserveKeyOrder?: boolean;
 }
 
-interface JsonTreeComponentProps {
+export interface JsonTreeComponentProps {
   title?: string;
   data: unknown;
   config?: JsonTreeConfig;

package/src/tools/LottiePlayer/LottiePlayer.story.tsx

@@ -0,0 +1,95 @@
+import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
+import { LottiePlayer } from './index';
+
+export default defineStory({
+  title: 'Tools/Lottie Player',
+  component: LottiePlayer,
+  description: 'Lottie animation player for JSON animations.',
+});
+
+// Public Lottie animation URLs
+const ANIMATIONS = {
+  loading: 'https://assets2.lottiefiles.com/packages/lf20_usmfx6bp.json',
+  success: 'https://assets4.lottiefiles.com/packages/lf20_jbrw3hcz.json',
+  rocket: 'https://assets3.lottiefiles.com/packages/lf20_l3qxn9jy.json',
+  heart: 'https://assets7.lottiefiles.com/packages/lf20_3vbOcw.json',
+};
+
+export const Interactive = () => {
+  const [animation] = useSelect('animation', {
+    options: ['loading', 'success', 'rocket', 'heart'] as const,
+    defaultValue: 'rocket',
+    label: 'Animation',
+    description: 'Select Lottie animation',
+  });
+
+  const [loop] = useBoolean('loop', {
+    defaultValue: true,
+    label: 'Loop',
+    description: 'Loop animation playback',
+  });
+
+  const [autoplay] = useBoolean('autoplay', {
+    defaultValue: true,
+    label: 'Autoplay',
+    description: 'Auto-start animation',
+  });
+
+  const [controls] = useBoolean('controls', {
+    defaultValue: false,
+    label: 'Show Controls',
+    description: 'Display playback controls',
+  });
+
+  return (
+    <div className="w-64 h-64">
+      <LottiePlayer
+        src={ANIMATIONS[animation]}
+        loop={loop}
+        autoplay={autoplay}
+        controls={controls}
+      />
+    </div>
+  );
+};
+
+export const Loading = () => (
+  <div className="w-48 h-48">
+    <LottiePlayer src={ANIMATIONS.loading} loop autoplay />
+  </div>
+);
+
+export const Success = () => (
+  <div className="w-48 h-48">
+    <LottiePlayer src={ANIMATIONS.success} autoplay />
+  </div>
+);
+
+export const Rocket = () => (
+  <div className="w-64 h-64">
+    <LottiePlayer src={ANIMATIONS.rocket} loop autoplay />
+  </div>
+);
+
+export const Heart = () => (
+  <div className="w-32 h-32">
+    <LottiePlayer src={ANIMATIONS.heart} loop autoplay />
+  </div>
+);
+
+export const WithControls = () => (
+  <div className="w-64 h-64">
+    <LottiePlayer
+      src={ANIMATIONS.rocket}
+      loop
+      autoplay
+      controls
+    />
+  </div>
+);
+
+export const Paused = () => (
+  <div className="w-48 h-48">
+    <LottiePlayer src={ANIMATIONS.loading} loop />
+  </div>
+);