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

package/components/theme-editor/sections/tabs-section.tsx

@@ -1,578 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { Section } from '../theme-section';
-import ThemeBlock from '../theme-block';
-import {
-  getCSSStyles,
-  resolveThemeCssVariables,
-  resolveThemeStyleObject
-} from '../utils';
-import { twMerge } from 'tailwind-merge';
-import clsx from 'clsx';
-import { useThemeSettingsContext } from '../theme-settings-context';
-
-interface TabsSectionProps {
-  section: Section;
-  currentBreakpoint?: string;
-  placeholderId?: string;
-  isDesigner?: boolean;
-  selectedBlockId?: string | null;
-}
-
-const TabsSection: React.FC<TabsSectionProps> = ({
-  section,
-  currentBreakpoint = 'desktop',
-  placeholderId = '',
-  isDesigner = false,
-  selectedBlockId = null
-}) => {
-  const [activeTabIndex, setActiveTabIndex] = useState(0);
-  const themeSettings = useThemeSettingsContext();
-
-  // Separate tab blocks from non-tab blocks (like headers)
-  const nonTabBlocks = section.blocks
-    .filter((block) => block.type !== 'tab' && (isDesigner ? true : !block.hidden))
-    .sort((a, b) => (a.order || 0) - (b.order || 0));
-
-  const tabBlocks = section.blocks
-    .filter((block) => block.type === 'tab' && (isDesigner ? true : !block.hidden))
-    .sort((a, b) => (a.order || 0) - (b.order || 0));
-
-  const getResponsiveValue = useCallback(
-    <T,>(value: unknown, fallback: T): T => {
-      if (value === undefined || value === null || value === '') return fallback;
-      if (typeof value === 'object' && !Array.isArray(value)) {
-        const responsiveValue = value as Record<string, T | undefined> & {
-          desktop?: T;
-        };
-        const matchedValue =
-          responsiveValue[currentBreakpoint] ?? responsiveValue.desktop;
-        return matchedValue !== undefined ? (matchedValue as T) : fallback;
-      }
-      return value as T;
-    },
-    [currentBreakpoint]
-  );
-
-  const findTabIndexBySelectedBlock = useCallback(
-    (blockId: string | null): number => {
-      if (!blockId) return -1;
-
-      const hasBlockInTree = (blocks?: Section['blocks']): boolean => {
-        if (!blocks || blocks.length === 0) return false;
-
-        for (const block of blocks) {
-          if (block.id === blockId) return true;
-          if (hasBlockInTree(block.blocks)) return true;
-        }
-
-        return false;
-      };
-
-      return tabBlocks.findIndex((tabBlock) => {
-        if (tabBlock.id === blockId) return true;
-        return hasBlockInTree(tabBlock.blocks);
-      });
-    },
-    [tabBlocks]
-  );
-
-  useEffect(() => {
-    if (tabBlocks.length === 0) {
-      if (activeTabIndex !== 0) setActiveTabIndex(0);
-      return;
-    }
-
-    const selectedTabIndex = findTabIndexBySelectedBlock(selectedBlockId);
-    if (selectedTabIndex >= 0) {
-      if (selectedTabIndex !== activeTabIndex) {
-        setActiveTabIndex(selectedTabIndex);
-      }
-      return;
-    }
-
-    if (activeTabIndex > tabBlocks.length - 1) {
-      setActiveTabIndex(tabBlocks.length - 1);
-    }
-  }, [
-    activeTabIndex,
-    findTabIndexBySelectedBlock,
-    selectedBlockId,
-    tabBlocks
-  ]);
-
-  const activeTabColor = resolveThemeCssVariables(
-    getResponsiveValue<string>(
-      section.styles?.['active-tab-color'],
-      'var(--theme-primary)'
-    ),
-    themeSettings
-  );
-  const activeTabBorderColor = resolveThemeCssVariables(
-    getResponsiveValue<string>(
-      section.styles?.['active-tab-border-color'],
-      'var(--theme-primary)'
-    ),
-    themeSettings
-  );
-  const activeTabBackgroundColor = resolveThemeCssVariables(
-    getResponsiveValue<string>(
-      section.styles?.['active-tab-background-color'],
-      'transparent'
-    ),
-    themeSettings
-  );
-  const headerBorderBottom = resolveThemeCssVariables(
-    getResponsiveValue<string>(
-      section.styles?.['header-border-bottom'],
-      '1px solid #e5e7eb'
-    ),
-    themeSettings
-  );
-
-  const kebabToCamel = (str: string): string => {
-    return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-  };
-
-  const getCSSProperties = (
-    properties?: Record<string, unknown>
-  ): React.CSSProperties => {
-    if (!properties) return {};
-
-    const styles: Record<string, string | number> = {};
-
-    Object.keys(properties).forEach((key) => {
-      const value = getResponsiveValue<string | number | undefined>(
-        properties[key],
-        undefined
-      );
-      if (value === undefined || value === null) return;
-
-      const camelKey = kebabToCamel(key);
-      let finalValue: string | number = value;
-
-      if (key.startsWith('padding-') || key.startsWith('margin-')) {
-        finalValue =
-          typeof value === 'number' ? `${value}px` : (value as string);
-      } else if (typeof value === 'string') {
-        finalValue = resolveThemeCssVariables(value, themeSettings);
-      }
-
-      styles[camelKey] = finalValue;
-    });
-
-    return styles as React.CSSProperties;
-  };
-
-  const sectionStyles = {
-    ...getCSSProperties(section.styles),
-    position: 'relative'
-  } as React.CSSProperties;
-
-  const containerStyles: Record<string, string | number> = {
-    ...(sectionStyles as Record<string, string | number>)
-  };
-
-  const maxWidth = getResponsiveValue(
-    section.styles?.['max-width'],
-    'normal'
-  ) as string;
-  const maxWidthClass =
-    maxWidth === 'narrow'
-      ? 'max-w-4xl'
-      : maxWidth === 'normal'
-      ? 'max-w-7xl'
-      : '';
-  const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
-
-  if (tabBlocks.length === 0) {
-    return (
-      <div
-        className="p-4 text-gray-400 border border-dashed border-gray-300 rounded"
-        style={sectionStyles}
-      >
-        No tabs available
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={twMerge(
-        clsx(
-          'relative z-10 group/blocks w-full',
-          hasMaxWidth && 'mx-auto',
-          maxWidthClass
-        )
-      )}
-      style={containerStyles as React.CSSProperties}
-    >
-      {/* Render non-tab blocks first (like FAQ Header) */}
-      {nonTabBlocks.map((block, index) => (
-        <ThemeBlock
-          key={block.id || `non-tab-block-${index}`}
-          block={block}
-          placeholderId={placeholderId}
-          sectionId={section.id}
-          isDesigner={isDesigner}
-          isSelected={selectedBlockId === block.id}
-          selectedBlockId={selectedBlockId}
-          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
-                  }
-                },
-                '*'
-              );
-            }
-          }}
-        />
-      ))}
-
-      {/* Tab headers */}
-      <div
-        style={{
-          display: 'flex',
-          gap: '0px',
-          borderBottom: headerBorderBottom,
-          position: 'relative'
-        }}
-      >
-        {tabBlocks.map((tabBlock, index) => {
-          const headerBlock = tabBlock.blocks?.find(
-            (b) => b.label === 'Tab Header'
-          );
-
-          if (!headerBlock) return null;
-
-          const isActive = index === activeTabIndex;
-          const headerStyles = resolveThemeStyleObject(
-            getCSSStyles(headerBlock.styles || {}, themeSettings, currentBreakpoint),
-            themeSettings
-          );
-          const cleanHeaderStyles = {
-            ...headerStyles
-          } as Record<string, string | number>;
-          const headerTextColor = cleanHeaderStyles.color as string | undefined;
-
-          delete cleanHeaderStyles.border;
-          delete cleanHeaderStyles.borderBottom;
-          delete cleanHeaderStyles.backgroundColor;
-          delete cleanHeaderStyles.color;
-
-          return (
-            <div
-              key={tabBlock.id || `tab-header-${index}`}
-              className="tab-header-wrapper"
-              style={{
-                position: 'relative'
-              }}
-            >
-              {isDesigner && (
-                <div
-                  style={{
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    zIndex: 10,
-                    pointerEvents: 'none',
-                    height: '100%'
-                  }}
-                >
-                  <ThemeBlock
-                    block={tabBlock}
-                    placeholderId={placeholderId}
-                    sectionId={section.id}
-                    isDesigner={isDesigner}
-                    isSelected={selectedBlockId === tabBlock.id}
-                    selectedBlockId={selectedBlockId}
-                    onMoveUp={() => {
-                      if (window.parent) {
-                        window.parent.postMessage(
-                          {
-                            type: 'MOVE_BLOCK_UP',
-                            data: {
-                              placeholderId,
-                              sectionId: section.id,
-                              blockId: tabBlock.id
-                            }
-                          },
-                          '*'
-                        );
-                      }
-                    }}
-                    onMoveDown={() => {
-                      if (window.parent) {
-                        window.parent.postMessage(
-                          {
-                            type: 'MOVE_BLOCK_DOWN',
-                            data: {
-                              placeholderId,
-                              sectionId: section.id,
-                              blockId: tabBlock.id
-                            }
-                          },
-                          '*'
-                        );
-                      }
-                    }}
-                    onDuplicate={() => {
-                      if (window.parent) {
-                        window.parent.postMessage(
-                          {
-                            type: 'DUPLICATE_BLOCK',
-                            data: {
-                              placeholderId,
-                              sectionId: section.id,
-                              blockId: tabBlock.id
-                            }
-                          },
-                          '*'
-                        );
-                      }
-                    }}
-                    onToggleVisibility={() => {
-                      if (window.parent) {
-                        window.parent.postMessage(
-                          {
-                            type: 'TOGGLE_BLOCK_VISIBILITY',
-                            data: {
-                              placeholderId,
-                              sectionId: section.id,
-                              blockId: tabBlock.id
-                            }
-                          },
-                          '*'
-                        );
-                      }
-                    }}
-                    onDelete={() => {
-                      if (window.parent) {
-                        window.parent.postMessage(
-                          {
-                            type: 'DELETE_BLOCK',
-                            data: {
-                              placeholderId,
-                              sectionId: section.id,
-                              blockId: tabBlock.id
-                            }
-                          },
-                          '*'
-                        );
-                      }
-                    }}
-                    onRename={(newLabel) => {
-                      if (window.parent) {
-                        window.parent.postMessage(
-                          {
-                            type: 'RENAME_BLOCK',
-                            data: {
-                              placeholderId,
-                              sectionId: section.id,
-                              blockId: tabBlock.id,
-                              label: newLabel
-                            }
-                          },
-                          '*'
-                        );
-                      }
-                    }}
-                  />
-                </div>
-              )}
-
-              <div
-                style={{
-                  ...cleanHeaderStyles,
-                  cursor: 'pointer',
-                  borderTop: 'none',
-                  borderLeft: 'none',
-                  borderRight: 'none',
-                  borderBottom: isActive
-                    ? `2px solid ${activeTabBorderColor}`
-                    : '2px solid transparent',
-                  backgroundColor: isActive
-                    ? activeTabBackgroundColor
-                    : 'transparent',
-                  color: isActive
-                    ? activeTabColor
-                    : headerTextColor || 'inherit',
-                  position: 'relative',
-                  zIndex: 1
-                }}
-                onClick={() => setActiveTabIndex(index)}
-              >
-                {headerBlock.blocks
-                  ?.filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
-                  .sort((a, b) => (a.order || 0) - (b.order || 0))
-                  .map((childBlock, childIndex) => {
-                    // If tab is active, we want to override the child's color with the active tab color
-                    // So we remove the color from the child's styles to let it inherit
-                    const blockToRender =
-                      isActive && childBlock.styles?.color
-                        ? {
-                            ...childBlock,
-                            styles: {
-                              ...childBlock.styles,
-                              color: undefined
-                            }
-                          }
-                        : childBlock;
-
-                    return (
-                      <ThemeBlock
-                        key={childBlock.id || `header-child-${childIndex}`}
-                        block={blockToRender}
-                        placeholderId={placeholderId}
-                        sectionId={section.id}
-                        isDesigner={isDesigner}
-                        isSelected={selectedBlockId === childBlock.id}
-                        selectedBlockId={selectedBlockId}
-                        currentBreakpoint={currentBreakpoint}
-                        onMoveUp={undefined}
-                        onMoveDown={undefined}
-                        onDuplicate={undefined}
-                        onToggleVisibility={undefined}
-                        onDelete={undefined}
-                        onRename={undefined}
-                      />
-                    );
-                  })}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      <div>
-        {tabBlocks.map((tabBlock, index) => {
-          if (index !== activeTabIndex) return null;
-
-          const contentBlock = tabBlock.blocks?.find(
-            (b) => b.label === 'Tab Content'
-          );
-
-          if (!contentBlock) return null;
-
-          const contentStyles = resolveThemeStyleObject(
-            getCSSStyles(contentBlock.styles || {}, themeSettings, currentBreakpoint),
-            themeSettings
-          );
-
-          return (
-            <div
-              key={tabBlock.id || `tab-content-${index}`}
-              style={contentStyles}
-            >
-              {contentBlock.blocks
-                ?.filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
-                .sort((a, b) => (a.order || 0) - (b.order || 0))
-                .map((childBlock, childIndex) => (
-                  <ThemeBlock
-                    key={childBlock.id || `content-child-${childIndex}`}
-                    block={childBlock}
-                    placeholderId={placeholderId}
-                    sectionId={section.id}
-                    isDesigner={isDesigner}
-                    isSelected={selectedBlockId === childBlock.id}
-                    selectedBlockId={selectedBlockId}
-                    currentBreakpoint={currentBreakpoint}
-                    onMoveUp={undefined}
-                    onMoveDown={undefined}
-                    onDuplicate={undefined}
-                    onToggleVisibility={undefined}
-                    onDelete={undefined}
-                    onRename={undefined}
-                  />
-                ))}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export default TabsSection;

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

@@ -1,102 +0,0 @@
-'use client';
-
-import React from 'react';
-import blockRendererRegistry from './blocks/block-renderer-registry';
-import { WithDesignerFeatures } from './components/with-designer-features';
-import { isPublishWindowVisible } from './utils';
-
-export interface Block {
-  id: string;
-  styleSourceId?: string;
-  type: string;
-  label: string;
-  value?: any;
-  properties: any;
-  styles: any;
-  order: number;
-  hidden: boolean;
-  locked?: boolean;
-  blocks?: Block[]; // Optional - only group blocks have nested blocks
-  isIterator?: boolean;
-  iteratorDataPath?: string;
-}
-
-interface ThemeBlockProps {
-  block: Block;
-  placeholderId: string;
-  selectedBlockId?: string | null;
-  sectionId: string;
-  isDesigner?: boolean;
-  isSelected?: boolean;
-  currentBreakpoint?: string;
-  onSelect?: (blockId: string) => void;
-  onMoveUp?: () => void;
-  onMoveDown?: () => void;
-  onDuplicate?: () => void;
-  onToggleVisibility?: () => void;
-  onDelete?: () => void;
-  onRename?: (newLabel: string) => void;
-}
-
-export default function ThemeBlock({
-  block,
-  placeholderId,
-  selectedBlockId,
-  sectionId,
-  isDesigner = false,
-  isSelected = false,
-  currentBreakpoint = 'desktop',
-  onSelect,
-  onMoveUp,
-  onMoveDown,
-  onDuplicate,
-  onToggleVisibility,
-  onDelete,
-  onRename
-}: ThemeBlockProps) {
-  const BlockRenderer = blockRendererRegistry.getRenderer(block.type);
-
-  if (!BlockRenderer) {
-    return <div>Unknown block type: {block.type}</div>;
-  }
-
-  if (
-    !isDesigner &&
-    !isPublishWindowVisible(block.properties?.['publish-window'])
-  ) {
-    return null;
-  }
-
-  return (
-    <WithDesignerFeatures
-      block={block}
-      placeholderId={placeholderId}
-      sectionId={sectionId}
-      isDesigner={isDesigner}
-      isSelected={isSelected}
-      currentBreakpoint={currentBreakpoint}
-      onMoveUp={onMoveUp}
-      onMoveDown={onMoveDown}
-      onDuplicate={onDuplicate}
-      onToggleVisibility={onToggleVisibility}
-      onDelete={onDelete}
-      onRename={onRename}
-    >
-      <BlockRenderer
-        block={block}
-        placeholderId={placeholderId}
-        sectionId={sectionId}
-        isDesigner={isDesigner}
-        isSelected={isSelected}
-        selectedBlockId={selectedBlockId}
-        currentBreakpoint={currentBreakpoint}
-        onMoveUp={onMoveUp}
-        onMoveDown={onMoveDown}
-        onDuplicate={onDuplicate}
-        onToggleVisibility={onToggleVisibility}
-        onDelete={onDelete}
-        onRename={onRename}
-      />
-    </WithDesignerFeatures>
-  );
-}