@djangocfg/ui-tools 2.1.109 → 2.1.111

package/src/tools/ImageViewer/components/ImageToolbar.tsx

@@ -4,10 +4,11 @@
  * ImageToolbar - Floating toolbar for image controls
  */
 
-import { useMemo, useCallback } from 'react';
+import { useMemo } from 'react';
 import { ZoomIn, ZoomOut, RotateCw, FlipHorizontal, FlipVertical, Maximize2, Expand } from 'lucide-react';
 import { useControls } from 'react-zoom-pan-pinch';
 import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@djangocfg/ui-core/components';
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { cn } from '@djangocfg/ui-core/lib';
 import { ZOOM_PRESETS } from '../utils';
 import type { ImageToolbarProps } from '../types';
@@ -25,8 +26,19 @@ export function ImageToolbar({
   onZoomPreset,
   onExpand,
 }: ImageToolbarProps) {
+  const t = useTypedT<I18nTranslations>();
   const { zoomIn, zoomOut, resetTransform } = useControls();
 
+  const labels = useMemo(() => ({
+    zoomIn: t('tools.image.zoomIn'),
+    zoomOut: t('tools.image.zoomOut'),
+    fitToView: t('tools.image.fitToView'),
+    flipHorizontal: t('tools.image.flipHorizontal'),
+    flipVertical: t('tools.image.flipVertical'),
+    rotate: t('tools.image.rotate'),
+    fullscreen: t('tools.image.fullscreen'),
+  }), [t]);
+
   const zoomLabel = useMemo(() => {
     const percent = Math.round(scale * 100);
     return `${percent}%`;
@@ -40,7 +52,7 @@ export function ImageToolbar({
         size="icon"
         className="h-7 w-7"
         onClick={() => zoomOut()}
-        title="Zoom out"
+        title={labels.zoomOut}
       >
         <ZoomOut className="h-3.5 w-3.5" />
       </Button>
@@ -69,7 +81,7 @@ export function ImageToolbar({
         size="icon"
         className="h-7 w-7"
         onClick={() => zoomIn()}
-        title="Zoom in"
+        title={labels.zoomIn}
       >
         <ZoomIn className="h-3.5 w-3.5" />
       </Button>
@@ -82,7 +94,7 @@ export function ImageToolbar({
         size="icon"
         className="h-7 w-7"
         onClick={() => resetTransform()}
-        title="Fit to view"
+        title={labels.fitToView}
       >
         <Maximize2 className="h-3.5 w-3.5" />
       </Button>
@@ -95,7 +107,7 @@ export function ImageToolbar({
         size="icon"
         className={cn('h-7 w-7', transform.flipH && 'bg-accent')}
         onClick={onFlipH}
-        title="Flip horizontal"
+        title={labels.flipHorizontal}
       >
         <FlipHorizontal className="h-3.5 w-3.5" />
       </Button>
@@ -105,7 +117,7 @@ export function ImageToolbar({
         size="icon"
         className={cn('h-7 w-7', transform.flipV && 'bg-accent')}
         onClick={onFlipV}
-        title="Flip vertical"
+        title={labels.flipVertical}
       >
         <FlipVertical className="h-3.5 w-3.5" />
       </Button>
@@ -115,7 +127,7 @@ export function ImageToolbar({
         size="icon"
         className="h-7 w-7"
         onClick={onRotate}
-        title="Rotate 90°"
+        title={labels.rotate}
       >
         <RotateCw className="h-3.5 w-3.5" />
       </Button>
@@ -134,7 +146,7 @@ export function ImageToolbar({
             size="icon"
             className="h-7 w-7"
             onClick={onExpand}
-            title="Open in fullscreen"
+            title={labels.fullscreen}
           >
             <Expand className="h-3.5 w-3.5" />
           </Button>

package/src/tools/ImageViewer/components/ImageViewer.tsx

@@ -12,10 +12,11 @@
  * - Keyboard shortcuts (+/-, 0, r)
  */
 
-import { useEffect, useState, useRef, useCallback } from 'react';
+import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import { ImageIcon, AlertCircle } from 'lucide-react';
 import { TransformWrapper, TransformComponent, useControls } from 'react-zoom-pan-pinch';
 import { cn, Dialog, DialogContent, DialogTitle, Alert, AlertDescription } from '@djangocfg/ui-core';
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 
 import { ImageToolbar } from './ImageToolbar';
 import { ImageInfo } from './ImageInfo';
@@ -27,12 +28,19 @@ import type { ImageViewerProps } from '../types';
 // =============================================================================
 
 export function ImageViewer({ file, content, src: directSrc, inDialog = false }: ImageViewerProps) {
+  const t = useTypedT<I18nTranslations>();
   const [scale, setScale] = useState(1);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [loadError, setLoadError] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const controlsRef = useRef<ReturnType<typeof useControls> | null>(null);
 
+  const labels = useMemo(() => ({
+    noImage: t('tools.image.noImage'),
+    failedToLoad: t('tools.image.failedToLoad'),
+    loading: t('ui.form.loading'),
+  }), [t]);
+
   // Loading state
   const {
     src,
@@ -113,7 +121,7 @@ export function ImageViewer({ file, content, src: directSrc, inDialog = false }:
         <AlertCircle className="w-12 h-12 text-destructive/70" />
         <Alert variant="destructive" className="max-w-md">
           <AlertCircle className="h-4 w-4" />
-          <AlertDescription>{error || 'Failed to load image'}</AlertDescription>
+          <AlertDescription>{error || labels.failedToLoad}</AlertDescription>
         </Alert>
       </div>
     );
@@ -124,7 +132,7 @@ export function ImageViewer({ file, content, src: directSrc, inDialog = false }:
     return (
       <div className="flex-1 flex flex-col items-center justify-center gap-2 bg-muted/30">
         <ImageIcon className="w-12 h-12 text-muted-foreground/50" />
-        <p className="text-sm text-muted-foreground">No image content</p>
+        <p className="text-sm text-muted-foreground">{labels.noImage}</p>
       </div>
     );
   }
@@ -147,7 +155,7 @@ export function ImageViewer({ file, content, src: directSrc, inDialog = false }:
       {useProgressiveLoading && !isFullyLoaded && (
         <div className="absolute top-3 left-3 z-10 px-2 py-1 bg-background/80 backdrop-blur-sm border rounded text-[10px] text-muted-foreground font-mono flex items-center gap-1.5">
           <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
-          Loading...
+          {labels.loading}
         </div>
       )}
 

package/src/tools/ImageViewer/lazy.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+/**
+ * Lazy-loaded ImageViewer Component
+ *
+ * ImageViewer (~50KB) is loaded only when component is rendered.
+ * Use this for automatic code-splitting with Suspense fallback.
+ *
+ * For direct imports without lazy loading, use:
+ * import { ImageViewer } from '@djangocfg/ui-tools/image-viewer'
+ */
+
+import { createLazyComponent, LoadingFallback } from '../../components';
+import type { ImageViewerProps } from './types';
+
+// ============================================================================
+// Re-export types
+// ============================================================================
+
+export type { ImageViewerProps };
+
+// ============================================================================
+// Lazy Component
+// ============================================================================
+
+/**
+ * LazyImageViewer - Lazy-loaded image viewer with zoom/pan/rotate
+ *
+ * Automatically shows loading state while ImageViewer loads (~50KB)
+ */
+export const LazyImageViewer = createLazyComponent<ImageViewerProps>(
+  () => import('./components').then((mod) => ({ default: mod.ImageViewer })),
+  {
+    displayName: 'LazyImageViewer',
+    fallback: <LoadingFallback minHeight={200} text="Loading image viewer..." />,
+  }
+);

package/src/tools/JsonForm/lazy.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+/**
+ * Lazy-loaded JsonForm Component
+ *
+ * Heavy JSON Schema Form (~300KB) is loaded only when component is rendered.
+ * Use this for automatic code-splitting with Suspense fallback.
+ *
+ * For direct imports without lazy loading, use:
+ * import { JsonSchemaForm } from '@djangocfg/ui-tools/json-form'
+ */
+
+import { createLazyComponent, CardLoadingFallback } from '../../components';
+import type { JsonSchemaFormProps } from './types';
+
+// ============================================================================
+// Re-export types
+// ============================================================================
+
+export type { JsonSchemaFormProps };
+
+// ============================================================================
+// Lazy Component
+// ============================================================================
+
+/**
+ * LazyJsonSchemaForm - Lazy-loaded JSON Schema form generator
+ *
+ * Automatically shows loading state while RJSF loads (~300KB)
+ */
+export const LazyJsonSchemaForm = createLazyComponent<JsonSchemaFormProps>(
+  () => import('./JsonSchemaForm').then((mod) => ({ default: mod.JsonSchemaForm })),
+  {
+    displayName: 'LazyJsonSchemaForm',
+    fallback: (
+      <CardLoadingFallback
+        title="Form"
+        description="Loading form schema..."
+        minHeight={200}
+      />
+    ),
+  }
+);

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

@@ -3,6 +3,7 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 
 import { Input } from '@djangocfg/ui-core/components';
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { WidgetProps } from '@rjsf/utils';
 
 /**
@@ -26,6 +27,8 @@ export function ColorWidget(props: WidgetProps) {
     rawErrors,
   } = props;
 
+  const t = useTypedT<I18nTranslations>();
+  const pickColorLabel = useMemo(() => t('tools.color.pick'), [t]);
   const colorInputRef = useRef<HTMLInputElement>(null);
 
   // Determine format from options or auto-detect from value
@@ -185,7 +188,7 @@ export function ColorWidget(props: WidgetProps) {
           disabled={disabled || readonly}
           className="h-10 w-10 shrink-0 rounded-md border-2 border-input cursor-pointer hover:border-ring focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
           style={{ backgroundColor: previewColor }}
-          aria-label="Pick color"
+          aria-label={pickColorLabel}
         />
         {/* Hidden native color input */}
         <input

package/src/tools/JsonTree/lazy.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+/**
+ * Lazy-loaded JsonTree Component
+ *
+ * JsonTree (~100KB) is loaded only when component is rendered.
+ * Use this for automatic code-splitting with Suspense fallback.
+ *
+ * For direct imports without lazy loading, use:
+ * import JsonTree from '@djangocfg/ui-tools/json-tree'
+ */
+
+import { createLazyComponent, LoadingFallback } from '../../components';
+import type { JsonTreeConfig } from './index';
+import type { CommonExternalProps } from 'react-json-tree';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface JsonTreeProps {
+  title?: string;
+  data: unknown;
+  config?: JsonTreeConfig;
+  jsonTreeProps?: Partial<CommonExternalProps>;
+}
+
+export type { JsonTreeConfig };
+
+// ============================================================================
+// Lazy Component
+// ============================================================================
+
+/**
+ * LazyJsonTree - Lazy-loaded JSON visualization tree
+ *
+ * Automatically shows loading state while JsonTree loads (~100KB)
+ */
+export const LazyJsonTree = createLazyComponent<JsonTreeProps>(
+  () => import('./index'),
+  {
+    displayName: 'LazyJsonTree',
+    fallback: <LoadingFallback minHeight={100} text="Loading JSON viewer..." />,
+  }
+);

package/src/tools/LottiePlayer/lazy.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+/**
+ * Lazy-loaded LottiePlayer Component
+ *
+ * Lottie library (~200KB) is loaded only when component is rendered.
+ * Use this for automatic code-splitting with Suspense fallback.
+ *
+ * For direct imports without lazy loading, use:
+ * import { LottiePlayer } from '@djangocfg/ui-tools/lottie'
+ */
+
+import { createLazyComponent, LoadingFallback } from '../../components';
+import type { LottiePlayerProps } from './types';
+
+// ============================================================================
+// Re-export types
+// ============================================================================
+
+export type {
+  LottiePlayerProps,
+  LottieSize,
+  LottieSpeed,
+  LottieDirection,
+} from './types';
+
+// ============================================================================
+// Lottie Loading Fallback
+// ============================================================================
+
+function LottieLoadingFallback() {
+  return (
+    <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-muted border-t-primary" />
+        <span className="text-sm text-muted-foreground">Loading animation...</span>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Lazy Component
+// ============================================================================
+
+/**
+ * LazyLottiePlayer - Lazy-loaded Lottie animation player
+ *
+ * Automatically shows loading state while Lottie loads (~200KB)
+ */
+export const LazyLottiePlayer = createLazyComponent<LottiePlayerProps>(
+  () => import('./LottiePlayer.client').then((mod) => ({ default: mod.LottiePlayer })),
+  {
+    displayName: 'LazyLottiePlayer',
+    fallback: <LottieLoadingFallback />,
+  }
+);

package/src/tools/Map/components/CustomOverlay.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { useState, memo } from 'react'
+import { createPortal } from 'react-dom'
+import { useControl } from 'react-map-gl/maplibre'
+
+import type { IControl, MapInstance } from 'react-map-gl/maplibre'
+import type { CustomOverlayProps } from '../types'
+
+class OverlayControl implements IControl {
+  _map: MapInstance | null = null
+  _container: HTMLElement | null = null
+  _redraw: () => void
+
+  constructor(redraw: () => void) {
+    this._redraw = redraw
+  }
+
+  onAdd(map: MapInstance): HTMLElement {
+    this._map = map
+    map.on('move', this._redraw)
+    this._container = document.createElement('div')
+    this._redraw()
+    return this._container
+  }
+
+  onRemove(): void {
+    this._container?.remove()
+    this._map?.off('move', this._redraw)
+    this._map = null
+  }
+
+  getElement(): HTMLElement | null {
+    return this._container
+  }
+}
+
+function CustomOverlayComponent({ children }: CustomOverlayProps) {
+  const [, setVersion] = useState(0)
+
+  const ctrl = useControl<OverlayControl>(() => {
+    const forceUpdate = () => setVersion((v) => v + 1)
+    return new OverlayControl(forceUpdate)
+  })
+
+  const element = ctrl.getElement()
+
+  if (!element) return null
+
+  // Children can use useMapContext() to access the map if needed
+  return createPortal(children, element)
+}
+
+export const CustomOverlay = memo(CustomOverlayComponent)

package/src/tools/Map/components/DrawControl.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+/**
+ * DrawControl - Drawing tools for polygon, line, point creation
+ *
+ * Requires: @mapbox/mapbox-gl-draw
+ * CSS: @import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
+ *
+ * @example
+ * ```tsx
+ * import MapboxDraw from '@mapbox/mapbox-gl-draw'
+ * import { useControl } from '@carapis/map'
+ *
+ * function DrawControl(props) {
+ *   useControl(
+ *     () => new MapboxDraw(props),
+ *     ({ map }) => {
+ *       map.on('draw.create', props.onCreate)
+ *       map.on('draw.update', props.onUpdate)
+ *       map.on('draw.delete', props.onDelete)
+ *     },
+ *     ({ map }) => {
+ *       map.off('draw.create', props.onCreate)
+ *       map.off('draw.update', props.onUpdate)
+ *       map.off('draw.delete', props.onDelete)
+ *     },
+ *     { position: props.position }
+ *   )
+ *   return null
+ * }
+ * ```
+ */
+
+// Re-export for documentation purposes
+// Actual implementation requires user to install @mapbox/mapbox-gl-draw
+export { }

package/src/tools/Map/components/GeocoderControl.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+/**
+ * GeocoderControl - Address search with autocomplete
+ *
+ * Requires: @maplibre/maplibre-gl-geocoder
+ * CSS: @import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css'
+ *
+ * @example
+ * ```tsx
+ * import { useState } from 'react'
+ * import { useControl, Marker } from '@carapis/map'
+ * import MaplibreGeocoder from '@maplibre/maplibre-gl-geocoder'
+ *
+ * const geocoderApi = {
+ *   forwardGeocode: async (config) => {
+ *     const features = []
+ *     const response = await fetch(
+ *       `https://nominatim.openstreetmap.org/search?q=${config.query}&format=geojson`
+ *     )
+ *     const geojson = await response.json()
+ *     for (const feature of geojson.features) {
+ *       const center = [
+ *         feature.bbox[0] + (feature.bbox[2] - feature.bbox[0]) / 2,
+ *         feature.bbox[1] + (feature.bbox[3] - feature.bbox[1]) / 2,
+ *       ]
+ *       features.push({
+ *         type: 'Feature',
+ *         geometry: { type: 'Point', coordinates: center },
+ *         place_name: feature.properties.display_name,
+ *         properties: feature.properties,
+ *         text: feature.properties.display_name,
+ *         center,
+ *       })
+ *     }
+ *     return { features }
+ *   },
+ * }
+ *
+ * function GeocoderControl({ position, onResult }) {
+ *   const [marker, setMarker] = useState(null)
+ *
+ *   useControl(
+ *     ({ mapLib }) => {
+ *       const ctrl = new MaplibreGeocoder(geocoderApi, {
+ *         maplibregl: mapLib,
+ *         marker: false,
+ *       })
+ *       ctrl.on('result', (evt) => {
+ *         onResult?.(evt)
+ *         const { result } = evt
+ *         if (result?.center) {
+ *           setMarker(
+ *             <Marker longitude={result.center[0]} latitude={result.center[1]} />
+ *           )
+ *         }
+ *       })
+ *       return ctrl
+ *     },
+ *     { position }
+ *   )
+ *
+ *   return marker
+ * }
+ * ```
+ */
+
+// Re-export for documentation purposes
+// Actual implementation requires user to install @maplibre/maplibre-gl-geocoder
+export { }