@djangocfg/ui-tools 2.1.118 → 2.1.120

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';

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

@@ -2,8 +2,10 @@
  * Hook for validating Mermaid code completeness
  */
 
+import { useCallback } from 'react';
+
 export function useMermaidValidation() {
-    const isMermaidCodeComplete = (code: string): boolean => {
+    const isMermaidCodeComplete = useCallback((code: string): boolean => {
         if (!code || code.trim().length === 0) return false;
 
         const trimmed = code.trim();
@@ -23,7 +25,7 @@ export function useMermaidValidation() {
         if (lastLine.match(/[\[({]\s*$/)) return false;
 
         return true;
-    };
+    }, []);
 
     return { isMermaidCodeComplete };
 }

package/src/tools/Mermaid/index.tsx

@@ -27,7 +27,7 @@ const LoadingFallback = () => (
   </div>
 );
 
-interface MermaidProps {
+export interface MermaidProps {
   chart: string;
   className?: string;
   isCompact?: boolean;

package/src/tools/PrettyCode/PrettyCode.story.tsx

@@ -0,0 +1,116 @@
+import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
+import PrettyCode from './index';
+
+export default defineStory({
+  title: 'Tools/Pretty Code',
+  component: PrettyCode,
+  description: 'Syntax highlighted code block with copy button.',
+});
+
+const CODE_SAMPLES = {
+  javascript: `function fibonacci(n) {
+  if (n <= 1) return n;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+}
+
+// Calculate first 10 fibonacci numbers
+const results = Array.from({ length: 10 }, (_, i) => fibonacci(i));
+console.log(results);`,
+  typescript: `interface User {
+  id: string;
+  name: string;
+  email: string;
+  createdAt: Date;
+}
+
+async function fetchUser(id: string): Promise<User> {
+  const response = await fetch(\`/api/users/\${id}\`);
+  if (!response.ok) {
+    throw new Error('User not found');
+  }
+  return response.json();
+}`,
+  python: `from dataclasses import dataclass
+from typing import List, Optional
+
+@dataclass
+class Vehicle:
+    id: str
+    make: str
+    model: str
+    year: int
+    price: Optional[float] = None
+
+def filter_vehicles(
+    vehicles: List[Vehicle],
+    min_year: int = 2020
+) -> List[Vehicle]:
+    return [v for v in vehicles if v.year >= min_year]`,
+  css: `.card {
+  @apply rounded-xl border border-border bg-card;
+  @apply p-4 shadow-sm transition-shadow;
+
+  &:hover {
+    @apply shadow-md;
+  }
+
+  .card-title {
+    @apply text-lg font-semibold text-foreground;
+  }
+}`,
+};
+
+export const Interactive = () => {
+  const [language] = useSelect('language', {
+    options: ['javascript', 'typescript', 'python', 'css'] as const,
+    defaultValue: 'typescript',
+    label: 'Language',
+    description: 'Programming language for syntax highlighting',
+  });
+
+  const [mode] = useSelect('mode', {
+    options: ['dark', 'light'] as const,
+    defaultValue: 'dark',
+    label: 'Theme',
+    description: 'Color theme for code',
+  });
+
+  const [isCompact] = useBoolean('isCompact', {
+    defaultValue: false,
+    label: 'Compact',
+    description: 'Use compact styling',
+  });
+
+  return (
+    <PrettyCode
+      data={CODE_SAMPLES[language]}
+      language={language}
+      mode={mode}
+      isCompact={isCompact}
+    />
+  );
+};
+
+export const JavaScript = () => (
+  <PrettyCode data={CODE_SAMPLES.javascript} language="javascript" />
+);
+
+export const TypeScript = () => (
+  <PrettyCode data={CODE_SAMPLES.typescript} language="typescript" />
+);
+
+export const Python = () => (
+  <PrettyCode data={CODE_SAMPLES.python} language="python" />
+);
+
+export const CSS = () => (
+  <PrettyCode data={CODE_SAMPLES.css} language="css" />
+);
+
+export const LightMode = () => (
+  <PrettyCode data={CODE_SAMPLES.typescript} language="typescript" mode="light" />
+);
+
+export const Compact = () => (
+  <PrettyCode data={CODE_SAMPLES.javascript} language="javascript" isCompact />
+);

package/src/tools/PrettyCode/index.tsx

@@ -25,7 +25,7 @@ const LoadingFallback = () => (
   </div>
 );
 
-interface PrettyCodeProps {
+export interface PrettyCodeProps {
   data: string | object;
   language: Language;
   className?: string;

package/src/tools/VideoPlayer/VideoPlayer.story.tsx

@@ -0,0 +1,87 @@
+import { defineStory, useBoolean, useSelect } from '@djangocfg/playground';
+import { VideoPlayer } from './index';
+import type { VideoSourceUnion } from './types';
+
+export default defineStory({
+  title: 'Tools/Video Player',
+  component: VideoPlayer,
+  description: 'Video player with HLS support, quality selection, and custom controls.',
+});
+
+const VIDEO_SOURCES: Record<string, VideoSourceUnion> = {
+  mp4: {
+    type: 'url',
+    url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    poster: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
+    title: 'Big Buck Bunny',
+  },
+  hls: {
+    type: 'hls',
+    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    title: 'HLS Stream',
+  },
+  elephants: {
+    type: 'url',
+    url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
+    poster: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg',
+    title: "Elephant's Dream",
+  },
+};
+
+export const Interactive = () => {
+  const [sourceKey] = useSelect('source', {
+    options: ['mp4', 'hls', 'elephants'] as const,
+    defaultValue: 'mp4',
+    label: 'Video Source',
+    description: 'Select video source type',
+  });
+
+  const [autoplay] = useBoolean('autoplay', {
+    defaultValue: false,
+    label: 'Autoplay',
+    description: 'Auto-start video playback',
+  });
+
+  const [muted] = useBoolean('muted', {
+    defaultValue: false,
+    label: 'Muted',
+    description: 'Mute video audio',
+  });
+
+  const [loop] = useBoolean('loop', {
+    defaultValue: false,
+    label: 'Loop',
+    description: 'Loop video playback',
+  });
+
+  const source = VIDEO_SOURCES[sourceKey];
+
+  return (
+    <div className="max-w-3xl" key={sourceKey}>
+      <VideoPlayer
+        source={source}
+        autoPlay={autoplay}
+        muted={muted}
+        loop={loop}
+      />
+    </div>
+  );
+};
+
+export const MP4 = () => (
+  <div className="max-w-3xl">
+    <VideoPlayer source={VIDEO_SOURCES.mp4} />
+  </div>
+);
+
+export const HLS = () => (
+  <div className="max-w-3xl">
+    <VideoPlayer source={VIDEO_SOURCES.hls} />
+  </div>
+);
+
+export const WithPoster = () => (
+  <div className="max-w-3xl">
+    <VideoPlayer source={VIDEO_SOURCES.elephants} />
+  </div>
+);