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

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

@@ -0,0 +1,147 @@
+'use client';
+
+import React, { useState } from 'react';
+import { BlockRendererProps } from './block-renderer-registry';
+import { getResponsiveValue, getCSSStyles } from '../utils';
+import { useThemeSettingsContext } from '../theme-settings-context';
+import { useLocalization } from '@akinon/next/hooks';
+import ThemeBlock from '../theme-block';
+
+const HotspotBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner,
+  placeholderId,
+  sectionId,
+  selectedBlockId
+}: BlockRendererProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const themeSettings = useThemeSettingsContext();
+  const { locale } = useLocalization();
+  const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'en';
+    
+  const styles = block.styles || {};
+  const properties = block.properties || {};
+
+  const getLocalizedContent = (content: any): string => {
+    if (typeof content === 'string') return content;
+    if (typeof content === 'object' && content !== null) {
+      return (
+        content[locale] || content[defaultLocale] || Object.values(content)[0] || ''
+      );
+    }
+    return '';
+  };
+
+  const title = getLocalizedContent(properties.title);
+  const description = getLocalizedContent(properties.description);
+  const link = getLocalizedContent(properties.link);
+  const linkText = getLocalizedContent(properties.linkText || 'View Details');
+
+  const backgroundColor = getResponsiveValue(styles['background-color'], currentBreakpoint, '#ffffff');
+  const color = getResponsiveValue(styles.color, currentBreakpoint, '#000000'); 
+  
+  const formatPercentage = (val: string | number | undefined, defaultVal: string): string => {
+      if (val === undefined || val === null || val === '') return defaultVal;
+      const strVal = String(val);
+      if (strVal.endsWith('%')) return strVal;
+      const num = parseFloat(strVal);
+      return isNaN(num) ? defaultVal : `${num}%`;
+  };
+
+  const top = formatPercentage(getResponsiveValue(styles.top, currentBreakpoint) as string | number | undefined, '50%');
+  const left = formatPercentage(getResponsiveValue(styles.left, currentBreakpoint) as string | number | undefined, '50%');
+  
+  const handleToggle = (e: React.MouseEvent) => {
+     if (isDesigner) return; 
+     e.stopPropagation();
+     setIsOpen(!isOpen);
+  };
+
+  return (
+    <div 
+        className="absolute group pointer-events-auto"
+        style={{ top: top as string, left: left as string }}
+    >
+      <button
+        onClick={handleToggle}
+        className="relative flex items-center justify-center w-8 h-8 -ml-4 -mt-4 cursor-pointer outline-none focus:outline-none z-10 pointer-events-auto"
+        aria-label={title || "Hotspot"}
+      >
+        <span 
+          className="absolute w-full h-full rounded-full animate-ping opacity-75"
+          style={{ backgroundColor: backgroundColor as string }}
+        ></span>
+        
+        <span 
+          className="relative w-4 h-4 rounded-full shadow-md"
+          style={{ backgroundColor: backgroundColor as string }}
+        ></span>
+      </button>
+
+      {(isOpen || (isDesigner && styles.forceOpen)) && (
+        <div 
+            className="absolute left-1/2 bottom-full mb-2 -translate-x-1/2 w-64 bg-white p-4 rounded-lg shadow-xl z-20 text-left text-sm pointer-events-auto"
+        >
+            <div className="flex justify-between items-start mb-2">
+                {title && <h3 className="font-bold text-gray-900">{title}</h3>}
+                <button onClick={(e) => { e.stopPropagation(); setIsOpen(false); }} className="text-gray-400 hover:text-gray-600">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <line x1="18" y1="6" x2="6" y2="18"></line>
+                      <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
+            {description && <p className="text-gray-600 mb-3">{description}</p>}
+            
+            {block.blocks && block.blocks.map((childBlock) => (
+                <div key={childBlock.id} className="mb-2">
+                    <ThemeBlock
+                        block={childBlock}
+                        placeholderId={placeholderId}
+                        sectionId={sectionId}
+                        isDesigner={isDesigner}
+                        currentBreakpoint={currentBreakpoint}
+                        isSelected={selectedBlockId === childBlock.id}
+                        selectedBlockId={selectedBlockId}
+                        onMoveUp={() => {
+                            if (window.parent) window.parent.postMessage({ type: 'MOVE_BLOCK_UP', data: { placeholderId, sectionId, blockId: childBlock.id, parentBlockId: block.id } }, '*');
+                        }}
+                        onMoveDown={() => {
+                            if (window.parent) window.parent.postMessage({ type: 'MOVE_BLOCK_DOWN', data: { placeholderId, sectionId, blockId: childBlock.id, parentBlockId: block.id } }, '*');
+                        }}
+                        onDuplicate={() => {
+                            if (window.parent) window.parent.postMessage({ type: 'DUPLICATE_BLOCK', data: { placeholderId, sectionId, blockId: childBlock.id, parentBlockId: block.id } }, '*');
+                        }}
+                        onToggleVisibility={() => {
+                            if (window.parent) window.parent.postMessage({ type: 'TOGGLE_BLOCK_VISIBILITY', data: { placeholderId, sectionId, blockId: childBlock.id, parentBlockId: block.id } }, '*');
+                        }}
+                        onDelete={() => {
+                            if (window.parent) window.parent.postMessage({ type: 'DELETE_BLOCK_FROM_PARENT', data: { placeholderId, sectionId, blockId: childBlock.id, parentBlockId: block.id } }, '*');
+                        }}
+                        onRename={(newLabel) => {
+                            if (window.parent) window.parent.postMessage({ type: 'RENAME_BLOCK', data: { placeholderId, sectionId, blockId: childBlock.id, label: newLabel } }, '*');
+                        }}
+                    />
+                </div>
+            ))}
+
+            {link && (
+                <a 
+                    href={link} 
+                    className="text-blue-600 hover:underline font-medium block mt-2"
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    {linkText} &rarr;
+                </a>
+            )}
+            
+            {/* Arrow */}
+            <div className="absolute left-1/2 top-full -translate-x-1/2 -mt-1 border-8 border-transparent border-t-white"></div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default HotspotBlock;

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

@@ -0,0 +1,230 @@
+import React from 'react';
+import { getResponsiveValue } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { Image } from '../../image';
+
+const isValidUrlValue = (value: string): boolean => {
+  if (!value) return false;
+  if (value.startsWith('data:image')) return true;
+
+  try {
+    new URL(value, 'http://localhost');
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const IconBlock = ({ block }: BlockRendererProps) => {
+  const iconValue = getResponsiveValue(block.value, 'desktop', '');
+  const iconSize = getResponsiveValue(block.styles?.size, 'desktop', '24') as
+    | string
+    | number;
+  const iconColor = getResponsiveValue(
+    block.styles?.color,
+    'desktop',
+    'currentColor'
+  ) as string;
+
+  const iconStyles = {
+    width: iconSize + 'px',
+    height: iconSize + 'px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  } as React.CSSProperties;
+
+  const isInlineSvg = (value: string): boolean => {
+    return (
+      typeof value === 'string' &&
+      (value.includes('<svg') || value.includes('<?xml'))
+    );
+  };
+
+  const modifySVGColor = (svgContent: string, color: string) => {
+    if (color === 'currentColor' || !color) return svgContent;
+
+    return (
+      svgContent
+        .replace(/fill\s*=\s*["'][^"']*["']/gi, `fill="${color}"`)
+        .replace(/stroke\s*=\s*["'][^"']*["']/gi, `stroke="${color}"`)
+        // Also handle CSS styles within SVG
+        .replace(/fill\s*:\s*[^;}\s]+/gi, `fill: ${color}`)
+        .replace(/stroke\s*:\s*[^;}\s]+/gi, `stroke: ${color}`)
+        // If no fill/stroke exists, add fill to main elements
+        .replace(/<path(?![^>]*fill)/gi, `<path fill="${color}"`)
+        .replace(/<circle(?![^>]*fill)/gi, `<circle fill="${color}"`)
+        .replace(/<rect(?![^>]*fill)/gi, `<rect fill="${color}"`)
+        .replace(/<polygon(?![^>]*fill)/gi, `<polygon fill="${color}"`)
+        .replace(/<ellipse(?![^>]*fill)/gi, `<ellipse fill="${color}"`)
+    );
+  };
+
+  const processBase64SVG = (base64String: string, color: string) => {
+    try {
+      const base64Content = base64String.replace(
+        /^data:image\/svg\+xml;base64,/,
+        ''
+      );
+
+      const svgContent = atob(base64Content);
+
+      const modifiedSVG = modifySVGColor(svgContent, color);
+
+      const modifiedBase64 = `data:image/svg+xml;base64,${btoa(modifiedSVG)}`;
+
+      return modifiedBase64;
+    } catch (error) {
+      console.error('Error processing SVG base64:', error);
+      return base64String;
+    }
+  };
+
+  let iconContent;
+
+  let svgSrc = '';
+
+  if (iconValue) {
+    if (typeof iconValue === 'string') {
+      svgSrc = iconValue.trim();
+    } else if (typeof iconValue === 'object' && iconValue !== null) {
+      if ('url' in iconValue) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        svgSrc = String((iconValue as any).url || '').trim();
+      } else {
+        // Try to find a string value in the object (e.g. localized)
+        const values = Object.values(iconValue);
+        const stringVal = values.find((v) => typeof v === 'string');
+        if (stringVal) {
+          svgSrc = (stringVal as string).trim();
+        }
+      }
+    }
+
+    const isBase64 =
+      typeof svgSrc === 'string' && svgSrc.startsWith('data:image');
+    const isSvg = isInlineSvg(svgSrc);
+    const isAbsolutePath = svgSrc.startsWith('/');
+
+    if (
+      !isBase64 &&
+      !isSvg &&
+      svgSrc &&
+      !isAbsolutePath &&
+      !svgSrc.startsWith('http') &&
+      !svgSrc.startsWith('//')
+    ) {
+      const cloudName = process.env.NEXT_PUBLIC_IMAGE_CLOUD_NAME?.trim();
+      svgSrc = cloudName
+        ? `https://${cloudName}/${svgSrc.replace(/^\/+/, '')}`
+        : '';
+    }
+
+    if (
+      isBase64 &&
+      svgSrc.includes('data:image/svg+xml;base64,') &&
+      iconColor !== 'currentColor'
+    ) {
+      svgSrc = processBase64SVG(svgSrc, iconColor);
+    }
+
+    if (svgSrc && svgSrc.trim() !== '') {
+      // Check if it's inline SVG content
+      if (isInlineSvg(svgSrc)) {
+        // Apply color modification to inline SVG
+        const coloredSvg =
+          iconColor !== 'currentColor'
+            ? modifySVGColor(svgSrc, iconColor)
+            : svgSrc;
+
+        iconContent = (
+          <div
+            style={{
+              ...iconStyles,
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              ['--svg-size' as any]: iconSize + 'px'
+            }}
+            className="[&>svg]:w-[var(--svg-size)] [&>svg]:h-[var(--svg-size)]"
+            dangerouslySetInnerHTML={{ __html: coloredSvg }}
+          />
+        );
+      } else {
+        // It's a URL or base64, use img tag
+        if (isValidUrlValue(svgSrc)) {
+          iconContent = (
+            <div style={iconStyles}>
+              <Image
+                src={svgSrc}
+                width={Number(iconSize)}
+                height={Number(iconSize)}
+                alt="Icon"
+              />
+            </div>
+          );
+        }
+      }
+    } else {
+      iconContent = (
+        <div
+          style={{
+            ...iconStyles,
+            border: '1px dashed #ccc',
+            borderRadius: '4px',
+            backgroundColor: '#f9f9f9'
+          }}
+        >
+          <span style={{ fontSize: '10px', color: '#999' }}>No icon</span>
+        </div>
+      );
+    }
+
+    if (!iconContent) {
+      iconContent = (
+        <div
+          style={{
+            ...iconStyles,
+            border: '1px dashed #ccc',
+            borderRadius: '4px',
+            backgroundColor: '#f9f9f9'
+          }}
+        >
+          <span style={{ fontSize: '10px', color: '#999' }}>No icon</span>
+        </div>
+      );
+    }
+  } else {
+    iconContent = (
+      <div
+        style={{
+          ...iconStyles,
+          border: '2px dashed #e2e8f0',
+          borderRadius: '8px',
+          backgroundColor: '#f8fafc',
+          transition: 'all 0.2s ease-in-out'
+        }}
+        className="hover:border-slate-300 hover:bg-slate-50"
+      >
+        <div className="flex flex-col items-center justify-center gap-1 p-2">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#94a3b8"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+            <circle cx="8.5" cy="8.5" r="1.5" />
+            <polyline points="21,15 16,10 5,21" />
+          </svg>
+        </div>
+      </div>
+    );
+  }
+
+  return iconContent;
+};
+
+export default IconBlock;

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

@@ -0,0 +1,137 @@
+import React, { useMemo } from 'react';
+
+import { getResponsiveValue } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+const pickImageSource = (
+  value: unknown,
+  currentBreakpoint: string
+): string => {
+  if (typeof value === 'string') {
+    return value.trim();
+  }
+
+  if (typeof value === 'object' && value !== null) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const objectValue = value as any;
+    if (typeof objectValue.url === 'string') {
+      return objectValue.url.trim();
+    }
+
+    const responsiveValue = getResponsiveValue(value, currentBreakpoint, '');
+    if (typeof responsiveValue === 'string') {
+      return responsiveValue.trim();
+    }
+
+    const firstStringValue = Object.values(objectValue).find(
+      (item) => typeof item === 'string'
+    );
+    if (typeof firstStringValue === 'string') {
+      return firstStringValue.trim();
+    }
+  }
+
+  return '';
+};
+
+const normalizeImageSource = (src: string): string => {
+  if (!src) return '';
+  if (src.startsWith('data:image')) return src;
+  if (src.startsWith('/')) return src;
+  if (src.startsWith('//')) return src;
+  if (src.startsWith('http://') || src.startsWith('https://')) return src;
+
+  const cloudName = process.env.NEXT_PUBLIC_IMAGE_CLOUD_NAME?.trim();
+  if (!cloudName) return '';
+
+  return `https://${cloudName}/${src.replace(/^\/+/, '')}`;
+};
+
+const isValidImageSource = (src: string): boolean => {
+  if (!src) return false;
+  if (src.startsWith('data:image')) return true;
+
+  try {
+    new URL(src, 'http://localhost');
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const ImageBlock = ({
+  block,
+  currentBreakpoint = 'desktop'
+}: BlockRendererProps) => {
+  const imageValue = useMemo(() => {
+    const rawUrl = pickImageSource(block.value, currentBreakpoint);
+    const url = normalizeImageSource(rawUrl);
+    const alt = String(block.properties?.alt || '');
+
+    return {
+      url: isValidImageSource(url) ? url : '',
+      alt
+    };
+  }, [block.value, block.properties?.alt, currentBreakpoint]);
+
+  const { url: src, alt } = imageValue;
+
+  const width = getResponsiveValue(
+    block.styles?.width,
+    currentBreakpoint,
+    '100%'
+  ) as React.CSSProperties['width'];
+  const height = getResponsiveValue(
+    block.styles?.height,
+    currentBreakpoint,
+    'auto'
+  ) as React.CSSProperties['height'];
+  const objectFit = getResponsiveValue(
+    block.styles?.['object-fit'],
+    currentBreakpoint,
+    'cover'
+  ) as React.CSSProperties['objectFit'];
+  const borderRadius = getResponsiveValue(
+    block.styles?.['border-radius'],
+    currentBreakpoint,
+    '0px'
+  ) as React.CSSProperties['borderRadius'];
+
+  const content = !src ? (
+    <div
+      style={{
+        width: width ?? '100%',
+        height: height ?? '100%',
+        borderRadius: borderRadius ?? '0px',
+        overflow: 'hidden',
+        backgroundColor: '#e5e7eb',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        textAlign: 'center',
+        minHeight:
+          typeof height === 'string' && height !== 'auto' ? height : '150px',
+        color: '#6b7280'
+      }}
+    >
+      No image uploaded
+    </div>
+  ) : (
+    <img
+      key={src}
+      src={src}
+      alt={alt}
+      style={{
+        display: 'block',
+        width: width ?? '100%',
+        height: height ?? 'auto',
+        objectFit: objectFit ?? 'cover',
+        borderRadius: borderRadius ?? '0px'
+      }}
+    />
+  );
+
+  return content;
+};
+
+export default ImageBlock;