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

package/components/theme-editor/sections/hover-showcase-section.tsx

@@ -0,0 +1,326 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useLocalization } from '@akinon/next/hooks';
+import ThemeBlock, { Block } from '../theme-block';
+import { useThemeSettingsContext } from '../theme-settings-context';
+import {
+  getCSSStyles,
+  getResponsiveValue,
+  resolveThemeCssVariables
+} from '../utils';
+
+import { Section } from '../theme-section';
+import { WithDesignerFeatures } from '../components/with-designer-features';
+
+interface HoverShowcaseSectionProps {
+  section: Section;
+  currentBreakpoint?: string;
+  placeholderId?: string;
+  isDesigner?: boolean;
+  selectedBlockId?: string | null;
+}
+
+const HoverShowcaseSection: React.FC<HoverShowcaseSectionProps> = ({
+  section,
+  currentBreakpoint = 'desktop',
+  placeholderId = '',
+  isDesigner = false,
+  selectedBlockId = null
+}) => {
+  const { locale } = useLocalization();
+  const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'en';
+  const themeSettings = useThemeSettingsContext();
+
+  const [activeIndex, setActiveIndex] = useState(0);
+  
+  useEffect(() => {
+    if (isDesigner && selectedBlockId && section.blocks) {
+      const index = section.blocks.findIndex(
+        (b: Block) => b.id === selectedBlockId || b.blocks?.some((child: Block) => child.id === selectedBlockId)
+      );
+      if (index !== -1) {
+        setActiveIndex(index);
+      }
+    }
+  }, [isDesigner, selectedBlockId, section.blocks]);
+
+  const resolveLocalizedValue = (
+    value: unknown,
+    fallback: string
+  ): string => {
+    if (value == null) return fallback;
+
+    if (typeof value === 'object' && !Array.isArray(value)) {
+      const localized = value as Record<string, unknown>;
+
+      if (localized[locale] != null) return String(localized[locale]);
+      if (localized[defaultLocale] != null) return String(localized[defaultLocale]);
+
+      const responsive = getResponsiveValue(value, currentBreakpoint);
+      if (responsive != null && typeof responsive !== 'object') {
+        return String(responsive);
+      }
+
+      const firstValue = Object.values(localized).find((item) => item != null);
+      if (firstValue != null) return String(firstValue);
+    }
+
+    const responsive = getResponsiveValue(value, currentBreakpoint, fallback);
+    return String(responsive ?? fallback);
+  };
+
+  const getStyleEntry = (kebabKey: string) => {
+    if (!section.styles) return undefined;
+    const styles = section.styles as Record<string, unknown>;
+    const camelKey = kebabKey.replace(/-([a-z])/g, (_, letter) =>
+      letter.toUpperCase()
+    );
+    return styles[kebabKey] ?? styles[camelKey];
+  };
+
+  const maxWidth = getResponsiveValue(getStyleEntry('max-width'), currentBreakpoint, 'normal');
+  const maxWidthClass =
+    maxWidth === 'narrow'
+      ? 'max-w-4xl'
+      : maxWidth === 'normal'
+      ? 'max-w-7xl'
+      : '';
+  const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
+
+  const inactiveColor = resolveThemeCssVariables(
+    String(getResponsiveValue(getStyleEntry('inactive-color'), currentBreakpoint, '#9ca3af')),
+    themeSettings
+  );
+  const activeColor = resolveThemeCssVariables(
+    String(getResponsiveValue(getStyleEntry('active-color'), currentBreakpoint, '#111827')),
+    themeSettings
+  );
+  
+  const isMobile = currentBreakpoint === 'mobile';
+
+  const items = (section.blocks || []).filter((b: Block) => b.type === 'hover-showcase-item');
+
+  if (items.length === 0) {
+    if (isDesigner) {
+      return (
+        <div className="w-full flex items-center justify-center p-8 border border-dashed border-gray-300 rounded-lg">
+          <p className="text-gray-500">Add Hover Showcase Item blocks to see them here.</p>
+        </div>
+      );
+    }
+    return null;
+  }
+
+  const sendDesignerMessage = (type: string, blockId: string, label?: string) => {
+    if (isDesigner && window.parent) {
+      window.parent.postMessage(
+        {
+          type,
+          data: {
+            placeholderId,
+            sectionId: section.id,
+            blockId,
+            ...(label && { label })
+          }
+        },
+        '*'
+      );
+    }
+  };
+  const renderMobile = isDesigner ? isMobile : true;
+  const renderDesktop = isDesigner ? !isMobile : true;
+
+  return (
+    <div
+      className={`w-full mx-auto ${hasMaxWidth ? maxWidthClass : ''}`}
+      style={getCSSStyles(section.styles as Record<string, unknown>, themeSettings as Record<string, unknown>, currentBreakpoint)}
+    >
+      {renderMobile && (
+        <div className={`flex flex-col gap-6 px-4 ${isDesigner ? '' : 'block md:hidden'}`}>
+          {items.map((item: Block, index: number) => {
+            const props = item.properties || {};
+            const itemStyles = item.styles || {};
+            const title = resolveLocalizedValue(props.title, `Item ${index + 1}`);
+            const subtitle = resolveLocalizedValue(props.subtitle, '');
+            const link = resolveLocalizedValue(props.link, '');
+            const isActive = index === activeIndex;
+
+            // Inside mobile render block, force evaluation of values for 'mobile' instead of the generic currentBreakpoint
+            const evalBreakpoint = isDesigner ? currentBreakpoint : 'mobile';
+            const mobileLayout = getResponsiveValue(getStyleEntry('mobile-layout'), evalBreakpoint, 'list');
+            const titleFontSize = getResponsiveValue(itemStyles['title-font-size'], evalBreakpoint, '24px');
+            const subtitleFontSize = getResponsiveValue(itemStyles['subtitle-font-size'], evalBreakpoint, '14px');
+
+            return (
+              <WithDesignerFeatures
+                key={item.id}
+                block={item}
+                placeholderId={placeholderId}
+                sectionId={section.id}
+                isDesigner={isDesigner}
+                isSelected={selectedBlockId === item.id}
+                currentBreakpoint={currentBreakpoint}
+                className="flex flex-col gap-3 cursor-pointer p-2 rounded relative"
+                onMoveUp={() => sendDesignerMessage('MOVE_BLOCK_UP', item.id)}
+                onMoveDown={() => sendDesignerMessage('MOVE_BLOCK_DOWN', item.id)}
+                onDuplicate={() => sendDesignerMessage('DUPLICATE_BLOCK', item.id)}
+                onToggleVisibility={() => sendDesignerMessage('TOGGLE_BLOCK_VISIBILITY', item.id)}
+                onDelete={() => sendDesignerMessage('DELETE_BLOCK', item.id)}
+                onRename={(newLabel) => sendDesignerMessage('RENAME_BLOCK', item.id, newLabel)}
+              >
+                <div className="flex flex-col" onClick={() => setActiveIndex(index)}>
+                  {link ? (
+                    <a href={link} className="decoration-none">
+                      <h3 style={{ fontSize: String(titleFontSize), color: activeColor, transition: 'color 0.3s' }} className="font-semibold leading-tight m-0">{title}</h3>
+                    </a>
+                  ) : (
+                    <h3 style={{ fontSize: String(titleFontSize), color: activeColor, transition: 'color 0.3s' }} className="font-semibold leading-tight m-0">{title}</h3>
+                  )}
+                  {subtitle && (
+                    <p style={{ fontSize: String(subtitleFontSize), color: inactiveColor }} className="mt-1 mb-0 opacity-80">{subtitle}</p>
+                  )}
+                </div>
+                
+                {mobileLayout === 'accordion' ? (
+                  <div className={`overflow-hidden transition-all duration-300 ${isActive ? 'max-h-[600px] opacity-100 mt-2' : 'max-h-0 opacity-0'}`}>
+                    {item.blocks?.map((block: Block) => (
+                      <ThemeBlock
+                        key={block.id}
+                        block={block}
+                        currentBreakpoint={currentBreakpoint}
+                        isDesigner={isDesigner}
+                        placeholderId={placeholderId}
+                        sectionId={section.id}
+                        selectedBlockId={selectedBlockId}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                   <div className="mt-2">
+                    {item.blocks?.map((block: Block) => (
+                      <ThemeBlock
+                        key={block.id}
+                        block={block}
+                        currentBreakpoint={currentBreakpoint}
+                        isDesigner={isDesigner}
+                        placeholderId={placeholderId}
+                        sectionId={section.id}
+                        selectedBlockId={selectedBlockId}
+                      />
+                    ))}
+                  </div>
+                )}
+              </WithDesignerFeatures>
+            );
+          })}
+        </div>
+      )}
+
+      {renderDesktop && (
+        <div className={`px-4 md:px-8 lg:px-12 items-center min-h-[500px] ${isDesigner ? 'flex' : 'hidden md:flex'}`}>
+         <div className="w-1/2 flex flex-col justify-center gap-1 relative z-10 pr-8">
+            {items.map((item: Block, index: number) => {
+              const props = item.properties || {};
+              const itemStyles = item.styles || {};
+              const title = resolveLocalizedValue(props.title, `Item ${index + 1}`);
+              const subtitle = resolveLocalizedValue(props.subtitle, '');
+              const link = resolveLocalizedValue(props.link, '');
+              const isActive = index === activeIndex;
+
+              const evalBreakpoint = isDesigner ? currentBreakpoint : 'desktop';
+              const titleFontSize = getResponsiveValue(itemStyles['title-font-size'], evalBreakpoint, '32px');
+              const subtitleFontSize = getResponsiveValue(itemStyles['subtitle-font-size'], evalBreakpoint, '16px');
+              const pt = getResponsiveValue(itemStyles['padding-top'], evalBreakpoint, 16);
+              const pb = getResponsiveValue(itemStyles['padding-bottom'], evalBreakpoint, 16);
+
+              return (
+                <WithDesignerFeatures
+                  key={item.id}
+                  block={item}
+                  placeholderId={placeholderId}
+                  sectionId={section.id}
+                  isDesigner={isDesigner}
+                  isSelected={selectedBlockId === item.id}
+                  currentBreakpoint={currentBreakpoint}
+                  className="flex flex-col cursor-pointer group w-max rounded px-2 relative"
+                  style={{ paddingTop: `${pt}px`, paddingBottom: `${pb}px` }}
+                  onMoveUp={() => sendDesignerMessage('MOVE_BLOCK_UP', item.id)}
+                  onMoveDown={() => sendDesignerMessage('MOVE_BLOCK_DOWN', item.id)}
+                  onDuplicate={() => sendDesignerMessage('DUPLICATE_BLOCK', item.id)}
+                  onToggleVisibility={() => sendDesignerMessage('TOGGLE_BLOCK_VISIBILITY', item.id)}
+                  onDelete={() => sendDesignerMessage('DELETE_BLOCK', item.id)}
+                  onRename={(newLabel) => sendDesignerMessage('RENAME_BLOCK', item.id, newLabel)}
+                >
+                  <div 
+                    className="flex flex-col relative w-full"
+                    onMouseEnter={() => setActiveIndex(index)}
+                  >
+                    {link ? (
+                      <a href={link} className="decoration-none">
+                        <h3 
+                          style={{ fontSize: String(titleFontSize), color: isActive ? activeColor : inactiveColor, transition: 'color 0.4s ease' }} 
+                          className="font-semibold leading-tight m-0 hover:opacity-80"
+                        >
+                          {title}
+                        </h3>
+                      </a>
+                    ) : (
+                       <h3 
+                        style={{ fontSize: String(titleFontSize), color: isActive ? activeColor : inactiveColor, transition: 'color 0.4s ease' }} 
+                        className="font-semibold leading-tight m-0"
+                      >
+                        {title}
+                      </h3>
+                    )}
+                    {subtitle && (
+                      <p 
+                        style={{ 
+                          fontSize: String(subtitleFontSize), 
+                          color: inactiveColor, 
+                          opacity: isActive ? 1 : 0, 
+                          maxHeight: isActive ? '40px' : '0px',
+                          transform: isActive ? 'translateY(0)' : 'translateY(-10px)'
+                        }} 
+                        className="mt-2 mb-0 overflow-hidden transition-all duration-400 ease-out"
+                      >
+                        {subtitle}
+                      </p>
+                    )}
+                  </div>
+                </WithDesignerFeatures>
+              );
+            })}
+         </div>
+
+         <div className="w-1/2 relative h-full min-h-[400px] flex items-center justify-center">
+            {items.map((item: Block, index: number) => {
+               const isActive = index === activeIndex;
+               
+               return (
+                 <div 
+                   key={item.id}
+                   className={`absolute inset-0 transition-opacity duration-500 ease-in-out flex items-center justify-center ${isActive ? 'opacity-100 z-10' : 'opacity-0 z-0'}`}
+                 >
+                    {item.blocks?.map((block: Block) => (
+                       <ThemeBlock
+                         key={block.id}
+                         block={block}
+                         currentBreakpoint={currentBreakpoint}
+                         isDesigner={isDesigner}
+                         placeholderId={placeholderId}
+                         sectionId={section.id}
+                         selectedBlockId={selectedBlockId}
+                       />
+                     ))}
+                 </div>
+               );
+            })}
+         </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default HoverShowcaseSection;

package/components/theme-editor/sections/image-hotspot-section.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import React from 'react';
+import { getResponsiveValue } from '../utils';
+import { Section } from '../theme-section';
+import { useThemeSettingsContext } from '../theme-settings-context';
+import { twMerge } from 'tailwind-merge';
+import clsx from 'clsx';
+import ThemeBlock from '../theme-block';
+
+interface ImageHotspotSectionProps {
+  section: Section;
+  currentBreakpoint?: string;
+  isDesigner?: boolean;
+  placeholderId?: string;
+  selectedBlockId?: string | null;
+}
+
+export default function ImageHotspotSection({
+  section,
+  currentBreakpoint = 'desktop',
+  isDesigner = false,
+  placeholderId = '',
+  selectedBlockId = null
+}: ImageHotspotSectionProps) {
+  const themeSettings = useThemeSettingsContext();
+  
+  const styles = section.styles || {};
+  const properties = section.properties || {};
+
+  const imageBlock = section.blocks?.find(b => b.type === 'image');
+
+  const hotspotBlocks = section.blocks?.filter(b => b.type === 'hotspot') || [];
+
+  const height = getResponsiveValue(styles.height, currentBreakpoint, '600px') as string | number;
+  const width = getResponsiveValue(styles.width, currentBreakpoint, '100%') as string;
+  const maxWidth = getResponsiveValue(styles['max-width'], currentBreakpoint, 'normal') as string;
+
+  const maxWidthClass =
+    maxWidth === 'narrow'
+      ? 'max-w-4xl'
+      : maxWidth === 'normal'
+      ? 'max-w-7xl'
+      : maxWidth === 'full'
+      ? 'w-full'
+      : '';
+      
+  const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
+
+  return (
+    <div 
+        className={twMerge(
+            clsx(
+            'relative mx-auto overflow-hidden group/hotspot-section',
+            hasMaxWidth && 'mx-auto',
+            maxWidthClass
+            )
+        )}
+        style={{ 
+            height: typeof height === 'number' ? `${height}px` : height,
+            width: width === 'fill' ? '100%' : width,
+            maxWidth: maxWidth === 'none' ? 'none' : undefined,
+            position: 'relative'
+        }}
+    >
+
+        <div className="absolute inset-0 w-full h-full z-0">
+            {imageBlock ? (
+                <div className="w-full h-full">
+                     <ThemeBlock
+                        key={imageBlock.id}
+                        block={imageBlock}
+                        placeholderId={placeholderId}
+                        sectionId={section.id}
+                        isDesigner={isDesigner}
+                        isSelected={selectedBlockId === imageBlock.id}
+                        selectedBlockId={selectedBlockId}
+                        currentBreakpoint={currentBreakpoint}
+           
+                        onMoveUp={() => {
+                            if (window.parent) window.parent.postMessage({ type: 'MOVE_BLOCK_UP', data: { placeholderId, sectionId: section.id, blockId: imageBlock.id } }, '*');
+                        }}
+                        onMoveDown={() => {
+                            if (window.parent) window.parent.postMessage({ type: 'MOVE_BLOCK_DOWN', data: { placeholderId, sectionId: section.id, blockId: imageBlock.id } }, '*');
+                        }}
+                        onDuplicate={() => {
+                            if (window.parent) window.parent.postMessage({ type: 'DUPLICATE_BLOCK', data: { placeholderId, sectionId: section.id, blockId: imageBlock.id } }, '*');
+                        }}
+                        onToggleVisibility={() => {
+                            if (window.parent) window.parent.postMessage({ type: 'TOGGLE_BLOCK_VISIBILITY', data: { placeholderId, sectionId: section.id, blockId: imageBlock.id } }, '*');
+                        }}
+                        onDelete={() => {
+                            if (window.parent) window.parent.postMessage({ type: 'DELETE_BLOCK', data: { placeholderId, sectionId: section.id, blockId: imageBlock.id } }, '*');
+                        }}
+                        onRename={(newLabel) => {
+                            if (window.parent) window.parent.postMessage({ type: 'RENAME_BLOCK', data: { placeholderId, sectionId: section.id, blockId: imageBlock.id, label: newLabel } }, '*');
+                        }}
+                      />
+                </div>
+            ) : (
+                <div className="w-full h-full bg-gray-200 flex items-center justify-center text-gray-400 select-none">
+                    No Image Selected
+                </div>
+            )}
+        </div>
+
+        <div className="absolute inset-0 w-full h-full z-10 pointer-events-none">
+            {hotspotBlocks.map(block => (
+                 <div key={block.id} className="absolute pointer-events-none" style={{ top: 0, left: 0, width: '100%', height: '100%' }}>
+                     <ThemeBlock
+                        block={block}
+                        placeholderId={placeholderId}
+                        sectionId={section.id}
+                        isDesigner={isDesigner}
+                        isSelected={selectedBlockId === block.id}
+                        selectedBlockId={selectedBlockId}
+                        currentBreakpoint={currentBreakpoint}
+                        onMoveUp={() => {
+                            if (window.parent) window.parent.postMessage({ type: 'MOVE_BLOCK_UP', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
+                        }}
+                        onMoveDown={() => {
+                            if (window.parent) window.parent.postMessage({ type: 'MOVE_BLOCK_DOWN', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
+                        }}
+                        onDuplicate={() => {
+                            if (window.parent) window.parent.postMessage({ type: 'DUPLICATE_BLOCK', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
+                        }}
+                        onToggleVisibility={() => {
+                            if (window.parent) window.parent.postMessage({ type: 'TOGGLE_BLOCK_VISIBILITY', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
+                        }}
+                        onDelete={() => {
+                            if (window.parent) window.parent.postMessage({ type: 'DELETE_BLOCK', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
+                        }}
+                        onRename={(newLabel) => {
+                            if (window.parent) window.parent.postMessage({ type: 'RENAME_BLOCK', data: { placeholderId, sectionId: section.id, blockId: block.id, label: newLabel } }, '*');
+                        }}
+                      />
+                 </div>
+            ))}
+        </div>
+    </div>
+  );
+}