@akinon/next 2.0.0-beta.2 → 2.0.0-beta.20

package/components/theme-editor/blocks/lottie-block.tsx

@@ -0,0 +1,325 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { BlockRendererProps } from './block-renderer-registry';
+
+interface LottieAnimationData {
+  [key: string]: unknown;
+}
+
+const LottieBlock = ({ block }: BlockRendererProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const animationRef = useRef<unknown>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [animationData, setAnimationData] = useState<LottieAnimationData | null>(null);
+
+  const properties = block.properties || {};
+
+  // Resolve responsive values
+  const resolveValue = <T,>(val: unknown, fallback: T): T => {
+    if (val && typeof val === 'object' && 'desktop' in (val as Record<string, unknown>)) {
+      return ((val as Record<string, T>).desktop as T) ?? fallback;
+    }
+    return (val as T) ?? fallback;
+  };
+
+  const source =
+    typeof block.value === 'object' && block.value !== null
+      ? (block.value as Record<string, string>).en ||
+        (block.value as Record<string, string>).tr ||
+        Object.values(block.value as Record<string, string>)[0] ||
+        ''
+      : (block.value as string) || '';
+
+  const fileUrl = resolveValue<string>(properties.file, '');
+  const autoplay = resolveValue<boolean>(properties.autoplay, true);
+  const loop = resolveValue<boolean>(properties.loop, true);
+  const speed = resolveValue<number>(properties.speed, 1);
+  const direction = resolveValue<string>(properties.direction, 'forward');
+  const hoverPlay = resolveValue<boolean>(properties.hover, false);
+  const mode = resolveValue<string>(properties.mode, 'normal');
+
+  const animationUrl = source || fileUrl;
+
+  // Fetch animation data from URL
+  useEffect(() => {
+    if (!animationUrl) {
+      setAnimationData(null);
+      setError(null);
+      setLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+
+    const fetchAnimation = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        
+        const response = await fetch(animationUrl);
+        
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: Failed to load animation`);
+        }
+        
+        const contentType = response.headers.get('content-type');
+        if (contentType && !contentType.includes('application/json')) {
+          throw new Error('Invalid file type. Expected JSON format.');
+        }
+        
+        const data = await response.json();
+        
+        // Basic validation for Lottie JSON structure
+        if (!data || typeof data !== 'object' || !data.v || !data.layers) {
+          throw new Error('Invalid Lottie JSON format');
+        }
+        
+        if (!cancelled) {
+          setAnimationData(data);
+          setError(null);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          console.error('Lottie fetch error:', err);
+          setError(
+            err instanceof Error 
+              ? err.message 
+              : 'Network error: Failed to load animation'
+          );
+          setAnimationData(null);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
+
+    fetchAnimation();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [animationUrl]);
+
+  // Initialize lottie-web animation
+  useEffect(() => {
+    if (!animationData || !containerRef.current) return;
+
+    let lottie: typeof import('lottie-web').default | null = null;
+    let anim: ReturnType<typeof import('lottie-web').default.loadAnimation> | null = null;
+    let mounted = true;
+
+    const initAnimation = async () => {
+      try {
+        const lottieModule = await import('lottie-web');
+        lottie = lottieModule.default;
+
+        if (!mounted || !containerRef.current) return;
+
+        // Create a new container div for each animation
+        const animContainer = document.createElement('div');
+        animContainer.style.width = '100%';
+        animContainer.style.height = '100%';
+        
+        // Clear and append new container
+        if (containerRef.current) {
+          containerRef.current.innerHTML = '';
+          containerRef.current.appendChild(animContainer);
+        }
+
+        if (!mounted) return;
+
+        anim = lottie.loadAnimation({
+          container: animContainer,
+          renderer: 'svg',
+          loop: mode === 'bounce' ? false : loop,
+          autoplay: hoverPlay ? false : autoplay,
+          animationData: animationData
+        });
+
+        animationRef.current = anim;
+
+        // Set speed
+        if (anim && typeof anim.setSpeed === 'function') {
+          anim.setSpeed(speed);
+        }
+
+        // Set direction
+        if (anim && typeof anim.setDirection === 'function') {
+          anim.setDirection(direction === 'reverse' ? -1 : 1);
+        }
+
+        // Bounce mode: reverse direction on complete
+        if (mode === 'bounce' && loop && anim) {
+          anim.addEventListener('complete', () => {
+            if (anim && typeof anim.setDirection === 'function' && typeof anim.play === 'function') {
+              anim.setDirection(anim.playDirection === 1 ? -1 : 1);
+              anim.play();
+            }
+          });
+        }
+      } catch (err) {
+        console.error('Lottie init error:', err);
+        if (mounted) {
+          setError('Failed to initialize animation player');
+        }
+      }
+    };
+
+    initAnimation();
+
+    return () => {
+      mounted = false;
+      
+      // Cleanup animation with delay to avoid removeChild errors
+      const cleanup = () => {
+        try {
+          if (anim && typeof anim.destroy === 'function') {
+            anim.destroy();
+          }
+        } catch (e) {
+          // Silently ignore cleanup errors
+          console.debug('Animation cleanup error (safe to ignore):', e);
+        }
+        animationRef.current = null;
+      };
+
+      // Delay cleanup slightly to avoid race conditions
+      setTimeout(cleanup, 0);
+    };
+  }, [animationData, autoplay, loop, speed, direction, hoverPlay, mode]);
+
+  // Hover handlers
+  const handleMouseEnter = useCallback(() => {
+    if (hoverPlay && animationRef.current) {
+      try {
+        (animationRef.current as { play: () => void }).play();
+      } catch (e) {
+        console.warn('Error playing animation:', e);
+      }
+    }
+  }, [hoverPlay]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (hoverPlay && animationRef.current) {
+      try {
+        (animationRef.current as { stop: () => void }).stop();
+      } catch (e) {
+        console.warn('Error stopping animation:', e);
+      }
+    }
+  }, [hoverPlay]);
+
+  // Placeholder when no animation URL
+  if (!animationUrl) {
+    return (
+      <div
+        style={{
+          minHeight: '200px',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#f5f3ff',
+          color: '#666',
+          fontSize: '14px',
+          gap: '8px'
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ opacity: 0.4 }}
+        >
+          <circle cx="12" cy="12" r="10" />
+          <polygon points="10 8 16 12 10 16 10 8" />
+        </svg>
+        <span>Add a Lottie animation URL or upload a file</span>
+      </div>
+    );
+  }
+
+  // Loading state
+  if (loading) {
+    return (
+      <div
+        style={{
+          minHeight: '200px',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#f5f3ff',
+          color: '#666',
+          fontSize: '14px',
+          gap: '8px'
+        }}
+      >
+        <div
+          style={{
+            width: '32px',
+            height: '32px',
+            border: '3px solid #e0e7ff',
+            borderTopColor: '#8b5cf6',
+            borderRadius: '50%',
+            animation: 'spin 1s linear infinite'
+          }}
+        />
+        <span>Loading animation...</span>
+        <style>
+          {`
+            @keyframes spin {
+              to { transform: rotate(360deg); }
+            }
+          `}
+        </style>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div
+        style={{
+          minHeight: '200px',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#fef2f2',
+          color: '#dc2626',
+          fontSize: '14px',
+          gap: '8px'
+        }}
+      >
+        <span>⚠ {error}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    />
+  );
+};
+
+export default LottieBlock;

package/components/theme-editor/blocks/map-block.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { getResponsiveValue } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+const placeholderContainerStyles: React.CSSProperties = {
+  minHeight: '300px',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: '#f0f0f0',
+  color: '#666',
+  fontSize: '14px',
+  gap: '8px'
+};
+
+const getMapEmbedUrl = (
+  address: string,
+  properties?: {
+    zoom?: number;
+    mapType?: string;
+  }
+) => {
+
+  const encodedAddress = encodeURIComponent(address);
+  const zoom = properties?.zoom ?? 14;
+  const mapType = properties?.mapType === 'satellite' ? 'k' : 'm';
+
+  return `https://maps.google.com/maps?q=${encodedAddress}&z=${zoom}&t=${mapType}&output=embed`;
+};
+
+const MapBlock = ({ block, currentBreakpoint = 'desktop' }: BlockRendererProps) => {
+  const address =
+    typeof block.value === 'object' && block.value !== null
+      ? (block.value as Record<string, string>).en ||
+        (block.value as Record<string, string>).tr ||
+        Object.values(block.value as Record<string, string>)[0] ||
+        ''
+      : (block.value as string) || '';
+
+  const properties = block.properties || {};
+
+  const zoom = getResponsiveValue(properties.zoom, currentBreakpoint, 14) as number;
+
+  const mapType = getResponsiveValue(properties.mapType, currentBreakpoint, 'roadmap') as string;
+
+  if (!address) {
+    return (
+      <div style={placeholderContainerStyles}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ opacity: 0.4 }}
+        >
+          <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
+          <circle cx="12" cy="10" r="3" />
+        </svg>
+        <span>Enter an address to display the map</span>
+      </div>
+    );
+  }
+
+  const embedUrl = getMapEmbedUrl(address, { zoom, mapType });
+
+  return (
+    <iframe
+      src={embedUrl}
+      style={{
+        width: '100%',
+        height: '100%',
+        border: 'none',
+        minHeight: '300px'
+      }}
+      loading="lazy"
+      allowFullScreen
+      referrerPolicy="no-referrer-when-downgrade"
+      title="Google Maps"
+    />
+  );
+};
+
+export default MapBlock;