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

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

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

@@ -1,142 +0,0 @@
-'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>
-  );
-}