keystone-design-bootstrap 1.0.3

package/src/design_system/elements/map/GoogleMap.tsx

@@ -0,0 +1,286 @@
+'use client';
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+
+interface GoogleMapProps {
+  address: string;
+  locationName?: string;
+  className?: string;
+}
+
+declare global {
+  interface Window {
+    google: any;
+    [key: string]: any; // Allow dynamic callback properties
+  }
+}
+
+const GOOGLE_MAPS_API_KEY = 'AIzaSyAb4-zSsPFx-QGi4cAiCGaRrzsAJC6e348';
+
+export default function GoogleMap({ address, locationName, className = '' }: GoogleMapProps) {
+  const mapRef = useRef<HTMLDivElement>(null);
+  const [mapError, setMapError] = useState<string | null>(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const geocoderRef = useRef<any>(null);
+  const mapInstanceRef = useRef<any>(null);
+  const isInitializingRef = useRef(false);
+  const callbackNameRef = useRef<string | null>(null);
+
+  // Initialize map once Google Maps API is loaded
+  const initMap = useCallback(async () => {
+    // Prevent multiple simultaneous initializations
+    if (isInitializingRef.current) return;
+    
+    // Ensure DOM element exists and Google Maps is fully loaded
+    if (!mapRef.current || !window.google || !window.google.maps) {
+      return;
+    }
+
+    // Check if Geocoder is available (required for async loading)
+    if (!window.google.maps.Geocoder) {
+      console.warn('Google Maps Geocoder not yet available, retrying...');
+      setTimeout(() => {
+        if (mapRef.current && window.google?.maps?.Geocoder) {
+          initMap();
+        }
+      }, 100);
+      return;
+    }
+
+    // Double-check the element is still in the DOM
+    if (!document.body.contains(mapRef.current)) {
+      return;
+    }
+
+    isInitializingRef.current = true;
+
+    try {
+      // Clear any existing map instance
+      if (mapInstanceRef.current) {
+        // Clear markers and listeners
+        const markers = mapInstanceRef.current.markers || [];
+        markers.forEach((marker: any) => {
+          if (marker.map) marker.map = null;
+        });
+        mapInstanceRef.current = null;
+      }
+
+      // Import marker library for AdvancedMarkerElement
+      const { AdvancedMarkerElement } = await window.google.maps.importLibrary("marker") as any;
+
+      // Create geocoder - now we know it's available
+      geocoderRef.current = new window.google.maps.Geocoder();
+      
+      // Store AdvancedMarkerElement class for use in callback
+      const MarkerClass = AdvancedMarkerElement;
+      
+      // Geocode the address
+      geocoderRef.current.geocode({ address }, (results: any[], status: string) => {
+        // Check if component is still mounted and ref is still valid
+        if (!mapRef.current || !document.body.contains(mapRef.current)) {
+          isInitializingRef.current = false;
+          return;
+        }
+
+        if (status === 'OK' && results && results[0]) {
+          const location = results[0].geometry.location;
+          
+          // Create map centered on the geocoded location
+          // Advanced markers require a mapId
+          // Note: When using mapId, styles are controlled via Google Cloud Console, not in code
+          const map = new window.google.maps.Map(mapRef.current, {
+            zoom: 15,
+            center: location,
+            mapId: 'DEMO_MAP_ID', // Can be replaced with a custom Map ID from Google Cloud Console
+            mapTypeControl: false,
+            streetViewControl: false,
+            fullscreenControl: true,
+            zoomControl: true,
+            // Styles cannot be set when mapId is present - configure in Google Cloud Console instead
+          });
+
+          // Create AdvancedMarkerElement (modern, non-deprecated approach)
+          const marker = new MarkerClass({
+            map: map,
+            position: location,
+            title: locationName || address,
+          });
+
+          // Store markers for cleanup
+          map.markers = [marker];
+          mapInstanceRef.current = map;
+          setIsLoaded(true);
+          setMapError(null);
+        } else {
+          // If geocoding fails, show error
+          setMapError('Unable to find the address. Please check the address and try again.');
+          setIsLoaded(false);
+        }
+        
+        isInitializingRef.current = false;
+      });
+    } catch (error) {
+      console.error('Error initializing map:', error);
+      setMapError('Error loading map. Please try again later.');
+      isInitializingRef.current = false;
+    }
+  }, [address, locationName]);
+
+  // Load Google Maps script with proper callback
+  useEffect(() => {
+    let mounted = true;
+    let checkInterval: NodeJS.Timeout | null = null;
+
+    // Generate unique callback name for this component instance
+    const callbackName = `initGoogleMap_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    callbackNameRef.current = callbackName;
+
+    // Create callback function that will be called when API loads
+    (window as any)[callbackName] = () => {
+      if (mounted && mapRef.current) {
+        // Small delay to ensure everything is ready
+        setTimeout(() => {
+          if (mounted && mapRef.current) {
+            initMap();
+          }
+        }, 100);
+      }
+    };
+
+    // Check if script is already loaded
+    if (window.google && window.google.maps && window.google.maps.Geocoder) {
+      setTimeout(() => {
+        if (mounted && mapRef.current) {
+          initMap();
+        }
+      }, 100);
+      return () => {
+        mounted = false;
+        delete (window as any)[callbackName];
+      };
+    }
+
+    // Check if script tag already exists (shared script)
+    const existingScript = document.querySelector(`script[src*="maps.googleapis.com"]`) as HTMLScriptElement;
+    if (existingScript) {
+      // Script is loading or loaded, wait for it
+      checkInterval = setInterval(() => {
+        if (window.google && window.google.maps && window.google.maps.Geocoder && mounted) {
+          clearInterval(checkInterval!);
+          setTimeout(() => {
+            if (mounted && mapRef.current) {
+              initMap();
+            }
+          }, 100);
+        }
+      }, 100);
+      
+      return () => {
+        mounted = false;
+        if (checkInterval) {
+          clearInterval(checkInterval);
+        }
+        delete (window as any)[callbackName];
+      };
+    }
+
+    // Create and load script with callback
+    // Include 'marker' library for AdvancedMarkerElement
+    const script = document.createElement('script');
+    script.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places,marker&loading=async&callback=${callbackName}`;
+    script.async = true;
+    script.defer = true;
+    
+    script.onerror = () => {
+      if (mounted) {
+        setMapError('Failed to load Google Maps. Please check your internet connection.');
+        delete (window as any)[callbackName];
+      }
+    };
+    
+    document.head.appendChild(script);
+    
+    return () => {
+      mounted = false;
+      if (checkInterval) {
+        clearInterval(checkInterval);
+      }
+      // Clean up callback
+      if (callbackNameRef.current) {
+        delete (window as any)[callbackNameRef.current];
+        callbackNameRef.current = null;
+      }
+      // Never remove the script - it's shared and removing it causes React errors
+    };
+  }, []); // Only run once on mount
+
+  // Re-initialize map if address changes (but only after API is loaded)
+  useEffect(() => {
+    if (window.google && window.google.maps && window.google.maps.Geocoder && mapRef.current && !isInitializingRef.current) {
+      // Small delay to ensure DOM is stable
+      const timeoutId = setTimeout(() => {
+        if (mapRef.current) {
+          initMap();
+        }
+      }, 100);
+      
+      return () => clearTimeout(timeoutId);
+    }
+  }, [address, locationName, initMap]);
+
+  // Cleanup map instance on unmount
+  useEffect(() => {
+    return () => {
+      if (mapInstanceRef.current) {
+      // Clear markers
+      const markers = mapInstanceRef.current.markers || [];
+      markers.forEach((marker: any) => {
+        if (marker.map) marker.map = null;
+      });
+        mapInstanceRef.current = null;
+      }
+      isInitializingRef.current = false;
+    };
+  }, []);
+
+  return (
+    <div className={`h-full w-full rounded-lg ${className}`} style={{ minHeight: '240px', position: 'relative' }}>
+      {/* Map container - always present, Google Maps will render into it */}
+      <div 
+        ref={mapRef} 
+        className="h-full w-full rounded-lg"
+        style={{ minHeight: '240px' }}
+      />
+      
+      {/* Loading overlay - positioned absolutely to not interfere with map DOM */}
+      {!isLoaded && !mapError && (
+        <div 
+          className="absolute inset-0 bg-secondary_alt rounded-lg flex items-center justify-center z-10"
+          style={{ pointerEvents: 'none' }}
+        >
+          <p className="text-tertiary">Loading map...</p>
+        </div>
+      )}
+      
+      {/* Error overlay - positioned absolutely to not interfere with map DOM */}
+      {mapError && (
+        <div 
+          className="absolute inset-0 bg-secondary_alt rounded-lg flex items-center justify-center z-10"
+          style={{ pointerEvents: 'auto' }}
+        >
+          <div className="text-center p-4">
+            <p className="text-tertiary mb-2">{mapError}</p>
+            <a 
+              href={`https://maps.google.com/?q=${encodeURIComponent(address)}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-brand-secondary hover:underline"
+            >
+              Open in Google Maps
+            </a>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/design_system/elements/markdown-renderer/MarkdownRenderer.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+interface MarkdownRendererProps {
+  content: string;
+  className?: string;
+}
+
+/**
+ * Generate a URL-friendly ID from a heading text
+ */
+function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '') // Remove special characters
+    .replace(/[\s_-]+/g, '-') // Replace spaces and underscores with hyphens
+    .replace(/^-+|-+$/g, ''); // Remove leading/trailing hyphens
+}
+
+/**
+ * Extract text content from React children (handles nested structures)
+ */
+function extractTextFromChildren(children: any): string {
+  if (typeof children === 'string') {
+    return children;
+  }
+  if (Array.isArray(children)) {
+    return children.map((child) => extractTextFromChildren(child)).join('');
+  }
+  if (children && typeof children === 'object' && 'props' in children) {
+    return extractTextFromChildren(children.props.children);
+  }
+  return '';
+}
+
+export default function MarkdownRenderer({ content, className = '' }: MarkdownRendererProps) {
+  return (
+    <div className={className}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          // Headings with IDs for table of contents
+          h1: ({ node, children, ...props }: any) => {
+            const text = extractTextFromChildren(children);
+            const id = slugify(text);
+            return <h1 id={id} className="text-3xl md:text-4xl font-bold text-gray-900 mb-6" {...props}>{children}</h1>;
+          },
+          h2: ({ node, children, ...props }: any) => {
+            const text = extractTextFromChildren(children);
+            const id = slugify(text);
+            return <h2 id={id} className="text-2xl font-semibold text-gray-900 mb-4" {...props}>{children}</h2>;
+          },
+          h3: ({ node, children, ...props }: any) => {
+            const text = extractTextFromChildren(children);
+            const id = slugify(text);
+            return <h3 id={id} className="text-xl font-semibold text-gray-900 mb-3" {...props}>{children}</h3>;
+          },
+          h4: ({ node, children, ...props }: any) => {
+            const text = extractTextFromChildren(children);
+            const id = slugify(text);
+            return <h4 id={id} className="text-lg font-semibold text-gray-900 mb-2" {...props}>{children}</h4>;
+          },
+          h5: ({ node, children, ...props }: any) => {
+            const text = extractTextFromChildren(children);
+            const id = slugify(text);
+            return <h5 id={id} className="text-base font-semibold text-gray-900 mb-2" {...props}>{children}</h5>;
+          },
+          h6: ({ node, children, ...props }: any) => {
+            const text = extractTextFromChildren(children);
+            const id = slugify(text);
+            return <h6 id={id} className="text-sm font-semibold text-gray-900 mb-2" {...props}>{children}</h6>;
+          },
+          
+          // Paragraphs and text
+          p: ({ node, ...props }) => (
+            <p className="text-gray-700 leading-relaxed mb-4 last:mb-0" {...props} />
+          ),
+          strong: ({ node, ...props }) => (
+            <strong className="font-semibold text-gray-900" {...props} />
+          ),
+          em: ({ node, ...props }) => (
+            <em className="italic text-gray-700" {...props} />
+          ),
+
+          
+          // Lists
+          ul: ({ node, ...props }) => (
+            <ul className="list-disc list-inside space-y-1 mb-4 last:mb-0" {...props} />
+          ),
+          ol: ({ node, ...props }) => (
+            <ol className="list-decimal list-inside space-y-1 mb-4 last:mb-0" {...props} />
+          ),
+          li: ({ node, ...props }) => (
+            <li className="text-gray-700 leading-relaxed" {...props} />
+          ),
+          
+          // Blockquotes
+          blockquote: ({ node, ...props }) => (
+            <blockquote className="border-l-4 border-blue-500 pl-4 italic text-gray-600 bg-blue-50 py-2 mb-4" {...props} />
+          ),
+          
+          // Links
+          a: ({ node, ...props }) => (
+            <a className="text-blue-600 hover:text-blue-800 hover:underline" {...props} />
+          ),
+          
+          // Images
+          img: ({ node, ...props }) => (
+            <img className="max-w-full h-auto rounded-lg shadow-md my-4" {...props} />
+          ),
+          
+          // Horizontal rules
+          hr: () => <hr className="my-6 border-gray-200" />,
+          
+          // Tables
+          table: ({ node, ...props }) => (
+            <div className="overflow-x-auto my-4">
+              <table className="min-w-full bg-white border border-gray-200 rounded-lg" {...props} />
+            </div>
+          ),
+          thead: ({ node, ...props }) => (
+            <thead className="bg-gray-50" {...props} />
+          ),
+          tbody: ({ node, ...props }) => (
+            <tbody {...props} />
+          ),
+          tr: ({ node, ...props }) => (
+            <tr className="border-b border-gray-200" {...props} />
+          ),
+          th: ({ node, ...props }) => (
+            <th className="px-4 py-3 text-left text-sm font-semibold text-gray-900" {...props} />
+          ),
+          td: ({ node, ...props }) => (
+            <td className="px-4 py-3 text-sm text-gray-700" {...props} />
+          ),
+          
+          // Code blocks
+          pre: ({ node, ...props }) => (
+            <pre className="bg-gray-100 p-4 rounded-lg overflow-x-auto my-4" {...props} />
+          ),
+          
+          // Code
+          code: ({ node, ...props }) => (
+            <code className="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono text-gray-800" {...props} />
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/src/design_system/elements/modals/modal.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import type { DialogProps as AriaDialogProps, ModalOverlayProps as AriaModalOverlayProps } from "react-aria-components";
+import { Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Modal as AriaModal, ModalOverlay as AriaModalOverlay } from "react-aria-components";
+import { cx } from '../../../utils/cx';
+
+export const DialogTrigger = AriaDialogTrigger;
+
+export const ModalOverlay = (props: AriaModalOverlayProps) => {
+    return (
+        <AriaModalOverlay
+            {...props}
+            className={(state) =>
+                cx(
+                    "fixed inset-0 z-50 flex min-h-dvh w-full items-end justify-center overflow-y-auto bg-overlay/70 px-4 pt-4 pb-[clamp(16px,8vh,64px)] outline-hidden backdrop-blur-[6px] sm:items-center sm:justify-center sm:p-8",
+                    state.isEntering && "duration-300 ease-out animate-in fade-in",
+                    state.isExiting && "duration-200 ease-in animate-out fade-out",
+                    typeof props.className === "function" ? props.className(state) : props.className,
+                )
+            }
+        />
+    );
+};
+
+export const Modal = (props: AriaModalOverlayProps) => (
+    <AriaModal
+        {...props}
+        className={(state) =>
+            cx(
+                "max-h-full w-full align-middle outline-hidden max-sm:overflow-y-auto max-sm:rounded-xl",
+                state.isEntering && "duration-300 ease-out animate-in zoom-in-95",
+                state.isExiting && "duration-200 ease-in animate-out zoom-out-95",
+                typeof props.className === "function" ? props.className(state) : props.className,
+            )
+        }
+    />
+);
+
+export const Dialog = (props: AriaDialogProps) => (
+    <AriaDialog {...props} className={cx("flex w-full items-center justify-center outline-hidden", props.className)} />
+);