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

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

@@ -1,325 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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;