@djangocfg/ui-tools 2.1.119 → 2.1.121

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

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