@djangocfg/ui-tools 2.1.119 → 2.1.120

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>
+);

package/src/tools/Map/Map.story.tsx

@@ -0,0 +1,300 @@
+import { useState } from 'react';
+import { defineStory, useSelect, useNumber, useBoolean } from '@djangocfg/playground';
+import { MapContainer, MapMarker, MapPopup, MapProvider, MapView, useMapControl } from './index';
+
+export default defineStory({
+  title: 'Tools/Map',
+  component: MapContainer,
+  description: 'Interactive map component using MapLibre GL.',
+});
+
+// Sample property locations
+const PROPERTIES = {
+  dubai: {
+    id: 'dubai-marina',
+    latitude: 25.0805,
+    longitude: 55.1403,
+    name: 'Dubai Marina Tower',
+    address: 'Dubai Marina, Dubai, UAE',
+    price: '$2,500,000',
+  },
+  london: {
+    id: 'london-chelsea',
+    latitude: 51.4875,
+    longitude: -0.1687,
+    name: 'Chelsea Townhouse',
+    address: 'Chelsea, London, UK',
+    price: '£3,200,000',
+  },
+  nyc: {
+    id: 'nyc-manhattan',
+    latitude: 40.7580,
+    longitude: -73.9855,
+    name: 'Manhattan Penthouse',
+    address: 'Midtown, New York, USA',
+    price: '$5,800,000',
+  },
+  paris: {
+    id: 'paris-marais',
+    latitude: 48.8566,
+    longitude: 2.3522,
+    name: 'Le Marais Apartment',
+    address: 'Le Marais, Paris, France',
+    price: '€1,900,000',
+  },
+  tokyo: {
+    id: 'tokyo-shibuya',
+    latitude: 35.6595,
+    longitude: 139.7004,
+    name: 'Shibuya Residence',
+    address: 'Shibuya, Tokyo, Japan',
+    price: '¥180,000,000',
+  },
+};
+
+export const Interactive = () => {
+  const [property] = useSelect('property', {
+    options: ['dubai', 'london', 'nyc', 'paris', 'tokyo'] as const,
+    defaultValue: 'dubai',
+    label: 'Property',
+    description: 'Select property location',
+  });
+
+  const [mapStyle] = useSelect('mapStyle', {
+    options: ['light', 'dark', 'streets', 'satellite'] as const,
+    defaultValue: 'light',
+    label: 'Map Style',
+    description: 'Map visual style',
+  });
+
+  const [zoom] = useNumber('zoom', {
+    defaultValue: 14,
+    min: 1,
+    max: 18,
+    label: 'Zoom Level',
+    description: 'Map zoom level',
+  });
+
+  const [showMarker] = useBoolean('showMarker', {
+    defaultValue: true,
+    label: 'Show Marker',
+    description: 'Display property marker',
+  });
+
+  const [showResetButton] = useBoolean('showResetButton', {
+    defaultValue: true,
+    label: 'Reset Button',
+    description: 'Show reset view button',
+  });
+
+  const loc = PROPERTIES[property];
+  const googleMapsUrl = `https://www.google.com/maps?q=${loc.latitude},${loc.longitude}`;
+
+  return (
+    <div className="space-y-4">
+      {/* Property info */}
+      <div className="p-4 rounded-lg border border-border bg-card">
+        <h3 className="font-semibold text-foreground">{loc.name}</h3>
+        <p className="text-sm text-muted-foreground">{loc.address}</p>
+        <p className="text-lg font-bold text-primary mt-2">{loc.price}</p>
+      </div>
+
+      {/* Map */}
+      <div className="h-80 rounded-xl overflow-hidden border border-border" key={`${property}-${zoom}-${mapStyle}`}>
+        <MapContainer
+          initialViewport={{
+            latitude: loc.latitude,
+            longitude: loc.longitude,
+            zoom,
+          }}
+          mapStyle={mapStyle}
+          openInMapsUrl={googleMapsUrl}
+          showResetButton={showResetButton}
+          autoResetDelay={5000}
+        >
+          {showMarker && (
+            <MapMarker marker={loc} color="#10b981" size={32} />
+          )}
+        </MapContainer>
+      </div>
+    </div>
+  );
+};
+
+export const PropertyCard = () => {
+  const loc = PROPERTIES.dubai;
+  const googleMapsUrl = `https://www.google.com/maps?q=${loc.latitude},${loc.longitude}`;
+
+  return (
+    <div className="max-w-md rounded-xl border border-border bg-card overflow-hidden">
+      {/* Map */}
+      <div className="aspect-[2/1]">
+        <MapContainer
+          initialViewport={{
+            latitude: loc.latitude,
+            longitude: loc.longitude,
+            zoom: 14,
+          }}
+          mapStyle="light"
+          attributionControl={false}
+          openInMapsUrl={googleMapsUrl}
+          autoResetDelay={5000}
+        >
+          <MapMarker marker={loc} color="#10b981" size={32} />
+        </MapContainer>
+      </div>
+
+      {/* Property info */}
+      <div className="p-4">
+        <h3 className="font-semibold text-foreground">{loc.name}</h3>
+        <p className="text-sm text-muted-foreground">{loc.address}</p>
+        <p className="text-lg font-bold text-primary mt-2">{loc.price}</p>
+      </div>
+    </div>
+  );
+};
+
+export const DarkStyle = () => {
+  const loc = PROPERTIES.tokyo;
+
+  return (
+    <div className="h-96 rounded-xl overflow-hidden border border-border">
+      <MapContainer
+        initialViewport={{
+          latitude: loc.latitude,
+          longitude: loc.longitude,
+          zoom: 13,
+        }}
+        mapStyle="dark"
+      >
+        <MapMarker marker={loc} color="#f97316" size={28} />
+      </MapContainer>
+    </div>
+  );
+};
+
+export const MultipleMarkers = () => (
+  <div className="h-96 rounded-xl overflow-hidden border border-border">
+    <MapContainer
+      initialViewport={{
+        latitude: 40,
+        longitude: 0,
+        zoom: 2,
+      }}
+      mapStyle="light"
+      showResetButton
+    >
+      {Object.values(PROPERTIES).map((prop) => (
+        <MapMarker key={prop.id} marker={prop} color="#3b82f6" size={24} />
+      ))}
+    </MapContainer>
+  </div>
+);
+
+export const WithAutoReset = () => {
+  const loc = PROPERTIES.london;
+
+  return (
+    <div className="space-y-2">
+      <p className="text-sm text-muted-foreground">
+        Pan/zoom the map — it will reset after 3 seconds of inactivity
+      </p>
+      <div className="h-80 rounded-xl overflow-hidden border border-border">
+        <MapContainer
+          initialViewport={{
+            latitude: loc.latitude,
+            longitude: loc.longitude,
+            zoom: 15,
+          }}
+          mapStyle="streets"
+          autoResetDelay={3000}
+          showResetButton
+        >
+          <MapMarker marker={loc} color="#ec4899" size={32} />
+        </MapContainer>
+      </div>
+    </div>
+  );
+};
+
+type PropertyKey = keyof typeof PROPERTIES;
+
+// Inner component that uses useMapControl (must be inside MapProvider)
+function MapWithPopupInner({
+  selectedId,
+  setSelectedId,
+}: {
+  selectedId: PropertyKey | null;
+  setSelectedId: (id: PropertyKey | null) => void;
+}) {
+  const { flyTo } = useMapControl();
+  const selectedProperty = selectedId ? PROPERTIES[selectedId] : null;
+
+  const handleMarkerClick = (key: PropertyKey) => {
+    const prop = PROPERTIES[key];
+    setSelectedId(key);
+    // Fly to the selected marker with animation
+    flyTo([prop.longitude, prop.latitude], 12, { duration: 1500 });
+  };
+
+  return (
+    <MapView mapStyle="light" showResetButton>
+      {(Object.entries(PROPERTIES) as [PropertyKey, typeof PROPERTIES[PropertyKey]][]).map(([key, prop]) => (
+        <MapMarker
+          key={prop.id}
+          marker={prop}
+          color={selectedId === key ? '#10b981' : '#3b82f6'}
+          size={selectedId === key ? 36 : 28}
+          onClick={() => handleMarkerClick(key)}
+        />
+      ))}
+
+      {selectedProperty && (
+        <MapPopup
+          longitude={selectedProperty.longitude}
+          latitude={selectedProperty.latitude}
+          onClose={() => setSelectedId(null)}
+          anchor="bottom"
+          offset={20}
+        >
+          <div className="p-3 min-w-48">
+            <h3 className="font-semibold text-foreground text-sm">{selectedProperty.name}</h3>
+            <p className="text-xs text-muted-foreground mt-1">{selectedProperty.address}</p>
+            <p className="text-base font-bold text-primary mt-2">{selectedProperty.price}</p>
+            <a
+              href={`https://www.google.com/maps?q=${selectedProperty.latitude},${selectedProperty.longitude}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="mt-3 block w-full text-center text-xs px-3 py-1.5 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+            >
+              View on Google Maps
+            </a>
+          </div>
+        </MapPopup>
+      )}
+    </MapView>
+  );
+}
+
+export const WithPopup = () => {
+  const [selectedId, setSelectedId] = useState<PropertyKey | null>(null);
+
+  return (
+    <div className="space-y-2">
+      <p className="text-sm text-muted-foreground">
+        Click on markers to fly to property and see details
+      </p>
+      <div className="h-96 rounded-xl overflow-hidden border border-border">
+        <MapProvider
+          initialViewport={{
+            latitude: 40,
+            longitude: 0,
+            zoom: 2,
+          }}
+        >
+          <MapWithPopupInner selectedId={selectedId} setSelectedId={setSelectedId} />
+        </MapProvider>
+      </div>
+    </div>
+  );
+};

package/src/tools/Mermaid/Mermaid.story.tsx

@@ -0,0 +1,131 @@
+import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
+import Mermaid from './index';
+
+export default defineStory({
+  title: 'Tools/Mermaid',
+  component: Mermaid,
+  description: 'Mermaid diagram renderer for flowcharts, sequences, and more.',
+});
+
+const DIAGRAMS = {
+  flowchart: `flowchart TD
+    A[Start] --> B{Is it working?}
+    B -->|Yes| C[Great!]
+    B -->|No| D[Debug]
+    D --> B
+    C --> E[End]`,
+  sequence: `sequenceDiagram
+    participant U as User
+    participant F as Frontend
+    participant A as API
+    participant D as Database
+
+    U->>F: Click login
+    F->>A: POST /auth/login
+    A->>D: Query user
+    D-->>A: User data
+    A-->>F: JWT token
+    F-->>U: Redirect to dashboard`,
+  class: `classDiagram
+    class Vehicle {
+        +String id
+        +String make
+        +String model
+        +int year
+        +float price
+        +getFullName()
+    }
+    class Car {
+        +int doors
+        +String fuelType
+    }
+    class Motorcycle {
+        +String engineType
+    }
+    Vehicle <|-- Car
+    Vehicle <|-- Motorcycle`,
+  er: `erDiagram
+    USER ||--o{ ORDER : places
+    ORDER ||--|{ LINE_ITEM : contains
+    PRODUCT ||--o{ LINE_ITEM : "ordered in"
+    USER {
+        string id PK
+        string email
+        string name
+    }
+    ORDER {
+        string id PK
+        date created_at
+        string status
+    }
+    PRODUCT {
+        string id PK
+        string name
+        float price
+    }`,
+  gantt: `gantt
+    title Project Timeline
+    dateFormat YYYY-MM-DD
+    section Design
+        Research       :a1, 2024-01-01, 7d
+        Wireframes     :a2, after a1, 5d
+        UI Design      :a3, after a2, 10d
+    section Development
+        Frontend       :b1, after a3, 14d
+        Backend        :b2, after a3, 14d
+        Integration    :b3, after b1, 7d
+    section Testing
+        QA Testing     :c1, after b3, 7d
+        Bug Fixes      :c2, after c1, 5d`,
+};
+
+export const Interactive = () => {
+  const [diagramType] = useSelect('diagramType', {
+    options: ['flowchart', 'sequence', 'class', 'er', 'gantt'] as const,
+    defaultValue: 'flowchart',
+    label: 'Diagram Type',
+    description: 'Select Mermaid diagram type',
+  });
+
+  const [isCompact] = useBoolean('isCompact', {
+    defaultValue: false,
+    label: 'Compact Mode',
+    description: 'Use smaller font size',
+  });
+
+  return (
+    <div className="max-w-4xl">
+      <Mermaid chart={DIAGRAMS[diagramType]} isCompact={isCompact} />
+    </div>
+  );
+};
+
+export const Flowchart = () => (
+  <div className="max-w-2xl">
+    <Mermaid chart={DIAGRAMS.flowchart} />
+  </div>
+);
+
+export const SequenceDiagram = () => (
+  <div className="max-w-3xl">
+    <Mermaid chart={DIAGRAMS.sequence} />
+  </div>
+);
+
+export const ClassDiagram = () => (
+  <div className="max-w-2xl">
+    <Mermaid chart={DIAGRAMS.class} />
+  </div>
+);
+
+export const ERDiagram = () => (
+  <div className="max-w-3xl">
+    <Mermaid chart={DIAGRAMS.er} />
+  </div>
+);
+
+export const GanttChart = () => (
+  <div className="max-w-4xl">
+    <Mermaid chart={DIAGRAMS.gantt} />
+  </div>
+);

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

@@ -63,11 +63,8 @@ export function useMermaidCleanup() {
         };
     }, [cleanupMermaidErrors]);
 
-    // Also run cleanup periodically to catch any stray elements
-    useEffect(() => {
-        const interval = setInterval(cleanupMermaidErrors, 1000);
-        return () => clearInterval(interval);
-    }, [cleanupMermaidErrors]);
+    // Removed periodic cleanup - it causes unnecessary re-renders
+    // Cleanup only happens on unmount now
 
     return { cleanupMermaidErrors };
 }

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

@@ -66,7 +66,13 @@ export function useMermaidRenderer({ chart, theme, isCompact = false }: UseMerma
         const getCSSVariable = (variable: string) => {
             if (typeof document === 'undefined') return '';
             const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
-            return value ? `hsl(${value})` : '';
+            if (!value) return '';
+            // If value is already a complete color (hex, rgb, hsl with parentheses), return as-is
+            if (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl(')) {
+                return value;
+            }
+            // Otherwise assume it's HSL components and wrap in hsl()
+            return `hsl(${value})`;
         };
 
         const diagramFontSize = isCompact ? '12px' : '14px';