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

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

@@ -0,0 +1,595 @@
+import React from 'react';
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+import ThemeBlock from '../theme-block';
+import { useThemeSettingsContext } from '../theme-settings-context';
+import {
+  getCSSStyles,
+  getResponsiveValue,
+  resolveThemeCssVariables
+} from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+const parseNumber = (value: unknown, fallback: number) => {
+  if (value === undefined || value === null || value === '') return fallback;
+  const parsed = typeof value === 'string' ? Number(value) : Number(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+};
+
+const clampNumber = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+const SliderBlock: React.FC<BlockRendererProps> = ({
+  block,
+  placeholderId,
+  sectionId,
+  isDesigner = false,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  onMoveUp,
+  onMoveDown,
+  onDuplicate,
+  onToggleVisibility,
+  onDelete,
+  onRename
+}) => {
+  const themeSettings = useThemeSettingsContext();
+  const carouselRef = React.useRef<Carousel>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  const leftArrowIconBlock = block.blocks?.find(
+    (b: any) => b.type === 'icon' && b.label === 'Left Arrow Icon'
+  );
+
+  const rightArrowIconBlock = block.blocks?.find(
+    (b: any) => b.type === 'icon' && b.label === 'Right Arrow Icon'
+  );
+
+  const getConfigEntry = (key: string) =>
+    block.properties?.[key] ?? block.styles?.[key];
+
+  const normalizeResponsiveNumber = (
+    value: unknown,
+    fallback: { desktop: number; mobile: number }
+  ) => {
+    if (value === undefined || value === null || value === '') {
+      return { ...fallback };
+    }
+
+    if (typeof value === 'number' || typeof value === 'string') {
+      const parsed = parseNumber(value, fallback.desktop);
+      return { desktop: parsed, mobile: parsed };
+    }
+
+    if (typeof value === 'object') {
+      const responsiveValue = value as Record<string, unknown>;
+      const candidate =
+        typeof responsiveValue.desktop === 'object' &&
+        responsiveValue.desktop !== null
+          ? (responsiveValue.desktop as Record<string, unknown>)
+          : responsiveValue;
+
+      return {
+        desktop: parseNumber(candidate.desktop, fallback.desktop),
+        mobile: parseNumber(candidate.mobile, fallback.mobile)
+      };
+    }
+
+    return { ...fallback };
+  };
+
+  const itemsConfig = normalizeResponsiveNumber(
+    getConfigEntry('items-per-slide'),
+    { desktop: 4, mobile: 1 }
+  );
+  const slidesConfig = normalizeResponsiveNumber(
+    getConfigEntry('slides-to-slide'),
+    { desktop: 1, mobile: 1 }
+  );
+
+  const sortedBlocks = [...(block.blocks || [])]
+    .filter(
+      (childBlock) =>
+        childBlock.type !== 'icon' && (isDesigner ? true : !childBlock.hidden)
+    )
+    .sort((a, b) => (a.order || 0) - (b.order || 0));
+  const visibleCount = sortedBlocks.length;
+
+  const desktopItems = clampNumber(itemsConfig.desktop, 1, 8);
+  const mobileItems = clampNumber(itemsConfig.mobile, 1, 4);
+  const desktopSlides = clampNumber(slidesConfig.desktop, 1, 8);
+  const mobileSlides = clampNumber(slidesConfig.mobile, 1, 8);
+
+  const carouselResponsive = {
+    desktop: {
+      breakpoint: { max: 4000, min: 768 },
+      items: desktopItems
+    },
+    mobile: {
+      breakpoint: { max: 768, min: 0 },
+      items: mobileItems
+    }
+  };
+
+  const currentSlidesToSlide =
+    currentBreakpoint === 'mobile' ? mobileSlides : desktopSlides;
+
+  const showArrows = getResponsiveValue(
+    getConfigEntry('show-arrows'),
+    currentBreakpoint,
+    true
+  );
+  const showDots = getResponsiveValue(
+    getConfigEntry('show-dots'),
+    currentBreakpoint,
+    false
+  );
+  const useAutoPlay = getResponsiveValue(
+    getConfigEntry('autoplay'),
+    currentBreakpoint,
+    false
+  );
+
+  const useInfinite = useAutoPlay;
+
+  const autoPlaySpeedRaw = getConfigEntry('autoplay-speed');
+  const autoPlaySpeed = parseNumber(autoPlaySpeedRaw, 3000);
+
+  const slideGap = parseNumber(getConfigEntry('slide-gap'), 16);
+  const slidePadding = slideGap / 2;
+
+  const blockStyles = block.styles || {};
+  const sectionStyles = getCSSStyles(
+    typeof blockStyles === 'object' && blockStyles !== null
+      ? (blockStyles as Record<string, unknown>)
+      : {},
+    themeSettings,
+    currentBreakpoint
+  );
+
+  const containerStylesRaw = blockStyles['max-width'];
+  const hasMaxWidth =
+    containerStylesRaw !== undefined &&
+    containerStylesRaw !== null &&
+    containerStylesRaw !== '';
+  const maxWidthValue = getResponsiveValue(
+    containerStylesRaw,
+    currentBreakpoint,
+    '1200px'
+  );
+  const maxWidthClass = hasMaxWidth ? `max-w-[${maxWidthValue}]` : '';
+
+  const blockAction = (action: string, blockId: string, label?: string) => {
+    if (!isDesigner) return;
+    window.parent.postMessage(
+      {
+        type: 'BLOCK_ACTION',
+        action,
+        blockId,
+        sectionId,
+        placeholderId,
+        label
+      },
+      '*'
+    );
+  };
+
+  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}"`)
+      .replace(/fill\s*:\s*[^;}\s]+/gi, `fill: ${color}`)
+      .replace(/stroke\s*:\s*[^;}\s]+/gi, `stroke: ${color}`)
+      .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 isInlineSvg = (value: string): boolean => {
+    return (
+      typeof value === 'string' &&
+      (value.includes('<svg') || value.includes('<?xml'))
+    );
+  };
+
+  const processInlineSVG = (svgContent: string, color: string) => {
+    try {
+      const modifiedSVG = modifySVGColor(svgContent, color);
+      const base64 = btoa(modifiedSVG);
+      return `data:image/svg+xml;base64,${base64}`;
+    } catch (error) {
+      console.error('Error processing inline SVG:', error);
+      return '';
+    }
+  };
+
+  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;
+    }
+  };
+
+  const getIconUrl = (iconBlock: any): string => {
+    if (!iconBlock?.value) return '';
+    const value = iconBlock.value;
+
+    if (typeof value === 'string') {
+      return value;
+    }
+
+    if (typeof value === 'object') {
+      // Handle responsive value structure
+      const responsiveUrl = getResponsiveValue(value, currentBreakpoint, '');
+      if (typeof responsiveUrl === 'string') {
+        return responsiveUrl;
+      }
+      // Handle {url: '...', alt: '...'} structure
+      if (value.url) {
+        return value.url;
+      }
+    }
+
+    return '';
+  };
+
+  const defaultLeftArrowSvg =
+    'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1IDZMOSAxMkwxNSAxOCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==';
+  const defaultRightArrowSvg =
+    'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkgNkwxNSAxMkw5IDE4IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+';
+
+  const leftArrowIconUrl = getIconUrl(leftArrowIconBlock);
+  const rightArrowIconUrl = getIconUrl(rightArrowIconBlock);
+
+  const leftArrowIconSize = String(
+    getResponsiveValue(leftArrowIconBlock?.styles?.size, '24')
+  );
+  const rightArrowIconSize = String(
+    getResponsiveValue(rightArrowIconBlock?.styles?.size, '24')
+  );
+
+  const leftArrowIconColor = resolveThemeCssVariables(
+    String(
+      getResponsiveValue(leftArrowIconBlock?.styles?.['color'], '#ffffff')
+    ),
+    themeSettings
+  );
+  const rightArrowIconColor = resolveThemeCssVariables(
+    String(
+      getResponsiveValue(rightArrowIconBlock?.styles?.['color'], '#ffffff')
+    ),
+    themeSettings
+  );
+
+  const leftArrowIconOpacity =
+    parseFloat(
+      String(getResponsiveValue(leftArrowIconBlock?.styles?.['opacity'], '1'))
+    ) || 1;
+  const rightArrowIconOpacity =
+    parseFloat(
+      String(getResponsiveValue(rightArrowIconBlock?.styles?.['opacity'], '1'))
+    ) || 1;
+
+  // Process SVGs with color
+  const processedLeftArrowUrl = isInlineSvg(leftArrowIconUrl)
+    ? processInlineSVG(leftArrowIconUrl, leftArrowIconColor)
+    : (leftArrowIconUrl || defaultLeftArrowSvg).includes(
+        'data:image/svg+xml;base64,'
+      )
+    ? processBase64SVG(
+        leftArrowIconUrl || defaultLeftArrowSvg,
+        leftArrowIconColor
+      )
+    : leftArrowIconUrl || defaultLeftArrowSvg;
+
+  const processedRightArrowUrl = isInlineSvg(rightArrowIconUrl)
+    ? processInlineSVG(rightArrowIconUrl, rightArrowIconColor)
+    : (rightArrowIconUrl || defaultRightArrowSvg).includes(
+        'data:image/svg+xml;base64,'
+      )
+    ? processBase64SVG(
+        rightArrowIconUrl || defaultRightArrowSvg,
+        rightArrowIconColor
+      )
+    : rightArrowIconUrl || defaultRightArrowSvg;
+
+  const leftArrowIcon = {
+    url: processedLeftArrowUrl,
+    alt: 'Previous'
+  };
+  const rightArrowIcon = {
+    url: processedRightArrowUrl,
+    alt: 'Next'
+  };
+
+  const leftArrowBackground = resolveThemeCssVariables(
+    String(
+      getResponsiveValue(
+        leftArrowIconBlock?.styles?.['background'] ??
+          leftArrowIconBlock?.styles?.['backgroundColor'],
+        'rgba(0, 0, 0, 0.5)'
+      )
+    ),
+    themeSettings
+  );
+
+  const rightArrowBackground = resolveThemeCssVariables(
+    String(
+      getResponsiveValue(
+        rightArrowIconBlock?.styles?.['background'] ??
+          rightArrowIconBlock?.styles?.['backgroundColor'],
+        'rgba(0, 0, 0, 0.5)'
+      )
+    ),
+    themeSettings
+  );
+
+  const handleLeftArrowClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    carouselRef.current?.previous?.(1);
+  };
+
+  const handleRightArrowClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    carouselRef.current?.next?.(1);
+  };
+
+  const CustomLeftArrow = ({ onClick }: any) => (
+    <button
+      onClick={(e) => {
+        e.stopPropagation();
+        if (!isDesigner) {
+          onClick?.();
+        }
+        handleLeftArrowClick(e);
+      }}
+      className={clsx(
+        'absolute left-4 top-1/2 -translate-y-1/2 z-10',
+        isDesigner &&
+          selectedBlockId === leftArrowIconBlock?.id &&
+          'ring-2 ring-blue-500 ring-offset-2'
+      )}
+      style={{
+        backgroundColor: leftArrowBackground,
+        border: 'none',
+        borderRadius: '50%',
+        width: '40px',
+        height: '40px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+        padding: 0
+      }}
+      aria-label="Previous"
+    >
+      <img
+        src={leftArrowIcon.url}
+        alt={leftArrowIcon.alt}
+        style={{
+          width: `${leftArrowIconSize}px`,
+          height: `${leftArrowIconSize}px`,
+          opacity: leftArrowIconOpacity,
+          pointerEvents: 'none'
+        }}
+      />
+    </button>
+  );
+
+  const CustomRightArrow = ({ onClick }: any) => (
+    <button
+      onClick={(e) => {
+        e.stopPropagation();
+        if (!isDesigner) {
+          onClick?.();
+        }
+        handleRightArrowClick(e);
+      }}
+      className={clsx(
+        'absolute right-4 top-1/2 -translate-y-1/2 z-10',
+        isDesigner &&
+          selectedBlockId === rightArrowIconBlock?.id &&
+          'ring-2 ring-blue-500 ring-offset-2'
+      )}
+      style={{
+        backgroundColor: rightArrowBackground,
+        border: 'none',
+        borderRadius: '50%',
+        width: '40px',
+        height: '40px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+        padding: 0
+      }}
+      aria-label="Next"
+    >
+      <img
+        src={rightArrowIcon.url}
+        alt={rightArrowIcon.alt}
+        style={{
+          width: `${rightArrowIconSize}px`,
+          height: `${rightArrowIconSize}px`,
+          opacity: rightArrowIconOpacity,
+          pointerEvents: 'none'
+        }}
+      />
+    </button>
+  );
+
+  if (visibleCount === 0) {
+    return (
+      <div
+        className="p-4 text-gray-400 border border-dashed border-gray-300 rounded"
+        style={sectionStyles}
+      >
+        No items available
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={twMerge(
+        clsx('relative z-10 w-full', hasMaxWidth && 'mx-auto', maxWidthClass)
+      )}
+      style={sectionStyles}
+    >
+      <div style={{ position: 'relative' }}>
+        <Carousel
+          ref={carouselRef}
+          key={`${desktopItems}-${mobileItems}-${desktopSlides}-${mobileSlides}-${visibleCount}-${useInfinite}-${useAutoPlay}-${autoPlaySpeed}`}
+          responsive={carouselResponsive}
+          slidesToSlide={currentSlidesToSlide}
+          swipeable={true}
+          draggable={true}
+          arrows={isDesigner ? false : Boolean(showArrows)}
+          showDots={Boolean(showDots)}
+          renderDotsOutside={Boolean(showDots)}
+          infinite={Boolean(useInfinite)}
+          rewind={Boolean(useInfinite)}
+          rewindWithAnimation={Boolean(useInfinite)}
+          autoPlay={Boolean(useAutoPlay)}
+          autoPlaySpeed={autoPlaySpeed}
+          containerClass="slider-carousel"
+          dotListClass="slider-dots"
+          customLeftArrow={
+            !isDesigner && showArrows ? <CustomLeftArrow /> : undefined
+          }
+          customRightArrow={
+            !isDesigner && showArrows ? <CustomRightArrow /> : undefined
+          }
+        >
+          {sortedBlocks.map((childBlock) => (
+            <div
+              key={childBlock.id}
+              style={{
+                paddingLeft: slidePadding,
+                paddingRight: slidePadding
+              }}
+            >
+              <ThemeBlock
+                block={childBlock}
+                placeholderId={placeholderId}
+                sectionId={sectionId}
+                isDesigner={isDesigner}
+                isSelected={selectedBlockId === childBlock.id}
+                selectedBlockId={selectedBlockId}
+                currentBreakpoint={currentBreakpoint}
+                onMoveUp={() => blockAction('MOVE_BLOCK_UP', childBlock.id)}
+                onMoveDown={() => blockAction('MOVE_BLOCK_DOWN', childBlock.id)}
+                onDuplicate={() =>
+                  blockAction('DUPLICATE_BLOCK', childBlock.id)
+                }
+                onToggleVisibility={() =>
+                  blockAction('TOGGLE_BLOCK_VISIBILITY', childBlock.id)
+                }
+                onDelete={() => blockAction('DELETE_BLOCK', childBlock.id)}
+                onRename={(newLabel: string) =>
+                  blockAction('RENAME_BLOCK', childBlock.id, newLabel)
+                }
+              />
+            </div>
+          ))}
+        </Carousel>
+
+        {isDesigner &&
+        showArrows &&
+        sortedBlocks.length > 0 &&
+        leftArrowIconBlock &&
+        rightArrowIconBlock ? (
+          <>
+            <button
+              onClick={handleLeftArrowClick}
+              className={clsx(
+                'absolute left-4 top-1/2 -translate-y-1/2 z-10',
+                selectedBlockId === leftArrowIconBlock?.id &&
+                  'ring-2 ring-blue-500 ring-offset-2'
+              )}
+              style={{
+                backgroundColor: leftArrowBackground,
+                border: 'none',
+                borderRadius: '50%',
+                width: '40px',
+                height: '40px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                padding: 0
+              }}
+              aria-label="Previous"
+            >
+              <img
+                src={leftArrowIcon.url}
+                alt={leftArrowIcon.alt}
+                style={{
+                  width: `${leftArrowIconSize}px`,
+                  height: `${leftArrowIconSize}px`,
+                  opacity: leftArrowIconOpacity,
+                  pointerEvents: 'none'
+                }}
+              />
+            </button>
+
+            <button
+              onClick={handleRightArrowClick}
+              className={clsx(
+                'absolute right-4 top-1/2 -translate-y-1/2 z-10',
+                selectedBlockId === rightArrowIconBlock?.id &&
+                  'ring-2 ring-blue-500 ring-offset-2'
+              )}
+              style={{
+                backgroundColor: rightArrowBackground,
+                border: 'none',
+                borderRadius: '50%',
+                width: '40px',
+                height: '40px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                padding: 0
+              }}
+              aria-label="Next"
+            >
+              <img
+                src={rightArrowIcon.url}
+                alt={rightArrowIcon.alt}
+                style={{
+                  width: `${rightArrowIconSize}px`,
+                  height: `${rightArrowIconSize}px`,
+                  opacity: rightArrowIconOpacity,
+                  pointerEvents: 'none'
+                }}
+              />
+            </button>
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default SliderBlock;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BlockRendererProps } from './block-renderer-registry';
+
+// Tab blocks are rendered by TabsSection, not individually
+// This component should not be used directly
+const TabBlock: React.FC<BlockRendererProps> = () => {
+  return null;
+};
+
+export default TabBlock;

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

@@ -0,0 +1,52 @@
+'use client';
+
+import { useLocalization } from '@akinon/next/hooks';
+import React, { useMemo } from 'react';
+import { BlockRendererProps } from './block-renderer-registry';
+import { getCSSStyles } from '../utils';
+import { useThemeSettingsContext } from '../theme-settings-context';
+
+const TextBlock = ({
+  block,
+  currentBreakpoint = 'desktop'
+}: BlockRendererProps) => {
+  const { locale } = useLocalization();
+  const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'en';
+  const themeSettings = useThemeSettingsContext();
+
+  const getLocalizedContent = (): string => {
+    let value = block.value;
+
+    if (typeof value === 'string' && value.startsWith('{')) {
+      try {
+        value = JSON.parse(value);
+      } catch (e) {
+        return value;
+      }
+    }
+
+    if (typeof value === 'object' && value !== null) {
+      return (
+        value[locale] || value[defaultLocale] || Object.values(value)[0] || ''
+      );
+    }
+
+    if (typeof value === 'string') {
+      return value;
+    }
+
+    return '';
+  };
+
+  const content = getLocalizedContent();
+
+  const wrapperStyles = useMemo(() => {
+    return getCSSStyles(block.styles || {}, themeSettings, currentBreakpoint);
+  }, [block.styles, themeSettings, currentBreakpoint]);
+
+  return (
+    <div style={wrapperStyles} dangerouslySetInnerHTML={{ __html: content }} />
+  );
+};
+
+export default TextBlock;