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

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

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

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