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

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

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

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

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