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

package/components/theme-editor/sections/posts-slider-section.tsx

@@ -0,0 +1,472 @@
+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 } from '../utils';
+
+interface PostsSliderSectionProps {
+  section: any;
+  currentBreakpoint?: string;
+  placeholderId?: string;
+  isDesigner?: boolean;
+  selectedBlockId?: string | null;
+}
+
+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 getNestedValue = (source: unknown, path: string): unknown => {
+  if (!path) return source;
+  const parts = path.split('.');
+  let current: unknown = source;
+
+  for (const part of parts) {
+    const arrayMatch = part.match(/^(.+)\[(\d+)\]$/);
+    if (arrayMatch) {
+      const [, arrayName, indexStr] = arrayMatch;
+      const arrayValue = (current as Record<string, unknown>)?.[arrayName];
+      if (!Array.isArray(arrayValue)) return undefined;
+      current = arrayValue[parseInt(indexStr, 10)];
+      continue;
+    }
+
+    current = (current as Record<string, unknown>)?.[part];
+    if (current === undefined) return undefined;
+  }
+
+  return current;
+};
+
+const cloneBlock = (block: any): any => ({
+  ...block,
+  properties: block.properties ? { ...block.properties } : block.properties,
+  styles: block.styles
+    ? JSON.parse(JSON.stringify(block.styles))
+    : block.styles,
+  blocks: block.blocks
+    ? block.blocks.map((child: any) => cloneBlock(child))
+    : undefined
+});
+
+const replaceBlockValues = (
+  blockToReplace: any,
+  productData: Record<string, unknown>,
+  productIndex: number
+) => {
+  const newBlock = cloneBlock(blockToReplace);
+  const isPlaceholderMode =
+    !productData || Object.keys(productData).length === 0;
+
+  if (newBlock.properties?.dataBinding && !isPlaceholderMode) {
+    const bindingPath = String(newBlock.properties.dataBinding).replace(
+      'item.',
+      ''
+    );
+    const resolvedValue = getNestedValue(productData, bindingPath);
+
+    if (resolvedValue !== undefined) {
+      if (newBlock.properties?.tag === 'a') {
+        newBlock.properties = {
+          ...newBlock.properties,
+          href: String(resolvedValue)
+        };
+      } else {
+        newBlock.value =
+          typeof resolvedValue === 'string' || typeof resolvedValue === 'number'
+            ? String(resolvedValue)
+            : resolvedValue;
+      }
+    }
+  } else if (isPlaceholderMode && newBlock.type === 'image') {
+    const placeholderImages = [
+      '/assets/images/product-placeholder-1.jpg',
+      '/assets/images/product-placeholder-2.jpg',
+      '/assets/images/product-placeholder-3.jpg',
+      '/assets/images/product-placeholder-4.jpg'
+    ];
+    const placeholderIndex = productIndex % placeholderImages.length;
+
+    if (
+      newBlock.value &&
+      typeof newBlock.value === 'string' &&
+      newBlock.value.includes('product-placeholder')
+    ) {
+      newBlock.value = placeholderImages[placeholderIndex];
+    }
+  }
+
+  if (newBlock.blocks && newBlock.blocks.length > 0) {
+    newBlock.blocks = newBlock.blocks.map((childBlock: any) =>
+      replaceBlockValues(childBlock, productData, productIndex)
+    );
+  }
+
+  return newBlock;
+};
+
+const getIteratorProducts = (
+  section: any,
+  iteratorBlock: any,
+  isDesigner: boolean
+): Record<string, unknown>[] => {
+  if (!section?.dataSource?.details) return [];
+
+  const dataPath =
+    iteratorBlock.iteratorDataPath ||
+    iteratorBlock.properties?.iteratorDataPath;
+
+  const details = section.dataSource.details;
+  const inEditor =
+    isDesigner && typeof window !== 'undefined' && window.parent !== window;
+
+  const candidates: unknown[] = inEditor
+    ? [
+        details.collection?.products,
+        details.static?.data,
+        details.collection?.data,
+        details
+      ]
+    : [
+        details.collection?.data?.products,
+        details.collection?.data,
+        details.collection?.products,
+        details.static?.data,
+        details
+      ];
+
+  for (const candidate of candidates) {
+    if (Array.isArray(candidate)) {
+      return candidate as Record<string, unknown>[];
+    }
+    if (candidate && dataPath) {
+      const pathValue = getNestedValue(candidate, dataPath);
+      if (Array.isArray(pathValue)) {
+        return pathValue as Record<string, unknown>[];
+      }
+    }
+  }
+
+  return [];
+};
+
+const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
+  section,
+  currentBreakpoint = 'desktop',
+  placeholderId = '',
+  isDesigner = false,
+  selectedBlockId = null
+}) => {
+  const themeSettings = useThemeSettingsContext();
+
+  const getConfigEntry = (key: string) =>
+    section.properties?.[key] ?? section.styles?.[key];
+
+  const normalizeResponsiveNumber = (
+    value: unknown,
+    fallback: { desktop: number; tablet: 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, tablet: 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),
+        tablet: parseNumber(candidate.tablet, fallback.tablet),
+        mobile: parseNumber(candidate.mobile, fallback.mobile)
+      };
+    }
+
+    return { ...fallback };
+  };
+
+  const itemsConfig = normalizeResponsiveNumber(
+    getConfigEntry('items-per-slide'),
+    { desktop: 4, tablet: 3, mobile: 1 }
+  );
+  const slidesConfig = normalizeResponsiveNumber(
+    getConfigEntry('slides-to-slide'),
+    { desktop: 1, tablet: 1, mobile: 1 }
+  );
+
+  const sortedBlocks = [...(section.blocks || [])]
+    .sort((a, b) => (a.order || 0) - (b.order || 0))
+    .filter((block) => (isDesigner ? true : !block.hidden));
+
+  const expandedBlocks = sortedBlocks.flatMap((block) => {
+    if (!block.isIterator || !block.blocks || block.blocks.length === 0) {
+      return [block];
+    }
+
+    const template = block.blocks[0];
+    const products = getIteratorProducts(section, block, isDesigner);
+    const fallbackCount = clampNumber(
+      parseNumber(block.properties?.iteratorCount, 1),
+      1,
+      50
+    );
+    const actualCount = products.length > 0 ? products.length : fallbackCount;
+
+    return Array.from({ length: actualCount }, (_, index) => {
+      const product = products[index] || {};
+      const cloned = replaceBlockValues(template, product, index);
+
+      return {
+        ...cloned,
+        id: `${template.id || block.id}-iter-${index}`,
+        __iteratorParentId: block.id,
+        __fromIterator: true
+      };
+    });
+  });
+
+  const visibleCount = expandedBlocks.length;
+
+  const desktopItems = clampNumber(itemsConfig.desktop, 1, 8);
+  const tabletItems = clampNumber(itemsConfig.tablet, 1, 6);
+  const mobileItems = clampNumber(itemsConfig.mobile, 1, 4);
+  const desktopSlides = clampNumber(
+    slidesConfig.desktop,
+    1,
+    Math.max(1, visibleCount)
+  );
+  const tabletSlides = clampNumber(
+    slidesConfig.tablet,
+    1,
+    Math.max(1, visibleCount)
+  );
+  const mobileSlides = clampNumber(
+    slidesConfig.mobile,
+    1,
+    Math.max(1, visibleCount)
+  );
+
+  const itemsPerView =
+    currentBreakpoint === 'mobile'
+      ? mobileItems
+      : currentBreakpoint === 'tablet'
+      ? tabletItems
+      : desktopItems;
+
+  const responsive = {
+    desktop: {
+      breakpoint: { max: 3000, min: 1024 },
+      items: desktopItems,
+      slidesToSlide: desktopSlides
+    },
+    tablet: {
+      breakpoint: { max: 1023, min: 768 },
+      items: tabletItems,
+      slidesToSlide: tabletSlides
+    },
+    mobile: {
+      breakpoint: { max: 767, min: 0 },
+      items: mobileItems,
+      slidesToSlide: mobileSlides
+    }
+  };
+
+  const currentSlidesToSlide =
+    currentBreakpoint === 'mobile'
+      ? mobileSlides
+      : currentBreakpoint === 'tablet'
+      ? tabletSlides
+      : desktopSlides;
+
+  const carouselResponsive = isDesigner
+    ? {
+        desktop: {
+          breakpoint: { max: 3000, min: 0 },
+          items: itemsPerView,
+          slidesToSlide: currentSlidesToSlide
+        }
+      }
+    : responsive;
+
+  const maxWidth = getResponsiveValue(
+    section.styles?.['max-width'],
+    currentBreakpoint,
+    'normal'
+  );
+  const maxWidthClass =
+    maxWidth === 'narrow'
+      ? 'max-w-4xl'
+      : maxWidth === 'normal'
+      ? 'max-w-7xl'
+      : '';
+  const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
+
+  const styleEntries = section.styles || {};
+  const filteredStyles = Object.fromEntries(
+    Object.entries(styleEntries).filter(
+      ([key]) =>
+        ![
+          'items-per-slide',
+          'slides-to-slide',
+          'show-arrows',
+          'show-dots',
+          'max-width'
+        ].includes(key)
+    )
+  );
+
+  const sectionStyles = getCSSStyles(
+    filteredStyles,
+    themeSettings,
+    currentBreakpoint
+  );
+
+  const gapValue = getResponsiveValue(
+    section.styles?.gap,
+    currentBreakpoint,
+    16
+  );
+  const gap = parseNumber(gapValue, 16);
+  const slidePadding = gap > 0 ? gap / 2 : 0;
+
+  const showArrows =
+    getResponsiveValue(
+      getConfigEntry('show-arrows'),
+      currentBreakpoint,
+      true
+    ) === true && visibleCount > itemsPerView;
+  const showDots =
+    getResponsiveValue(
+      getConfigEntry('show-dots'),
+      currentBreakpoint,
+      false
+    ) === true && visibleCount > itemsPerView;
+  const autoPlay =
+    getResponsiveValue(getConfigEntry('autoplay'), currentBreakpoint, false) ===
+    true;
+  const autoPlaySpeed = clampNumber(
+    parseNumber(getConfigEntry('autoplay-speed'), 3000),
+    1000,
+    10000
+  );
+  const infinite =
+    getResponsiveValue(getConfigEntry('infinite'), currentBreakpoint, false) ===
+    true;
+  const hasMultipleSlides = visibleCount > itemsPerView;
+  const useInfinite = infinite && hasMultipleSlides;
+  const useAutoPlay = autoPlay && hasMultipleSlides;
+
+  const postBlockAction = (type: string, blockId: string, label?: string) => {
+    if (!window.parent) return;
+    window.parent.postMessage(
+      {
+        type,
+        data: {
+          placeholderId,
+          sectionId: section.id,
+          blockId,
+          ...(label ? { label } : {})
+        }
+      },
+      '*'
+    );
+  };
+
+  if (expandedBlocks.length === 0) {
+    return (
+      <div
+        className="p-4 text-gray-400 border border-dashed border-gray-300 rounded"
+        style={sectionStyles}
+      >
+        No posts available
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={twMerge(
+        clsx('relative z-10 w-full', hasMaxWidth && 'mx-auto', maxWidthClass)
+      )}
+      style={sectionStyles}
+    >
+      <Carousel
+        key={`${desktopItems}-${tabletItems}-${mobileItems}-${desktopSlides}-${tabletSlides}-${mobileSlides}-${visibleCount}-${currentBreakpoint}-${useInfinite}-${useAutoPlay}-${autoPlaySpeed}`}
+        responsive={carouselResponsive}
+        {...(isDesigner ? { slidesToSlide: currentSlidesToSlide } : {})}
+        swipeable={true}
+        draggable={true}
+        arrows={showArrows}
+        showDots={showDots}
+        renderDotsOutside={showDots}
+        infinite={useInfinite}
+        rewind={useInfinite}
+        rewindWithAnimation={useInfinite}
+        autoPlay={useAutoPlay}
+        autoPlaySpeed={autoPlaySpeed}
+        containerClass="posts-slider-carousel"
+        dotListClass="posts-slider-dots"
+      >
+        {expandedBlocks.map((block) => {
+          const controlBlockId = block.__iteratorParentId || block.id;
+          const isIteratorClone = Boolean(block.__fromIterator);
+
+          return (
+            <div
+              key={block.id}
+              style={{
+                paddingLeft: slidePadding,
+                paddingRight: slidePadding
+              }}
+            >
+              <ThemeBlock
+                block={block}
+                placeholderId={placeholderId}
+                sectionId={section.id}
+                isDesigner={isDesigner && !isIteratorClone}
+                isSelected={selectedBlockId === controlBlockId}
+                selectedBlockId={selectedBlockId}
+                currentBreakpoint={currentBreakpoint}
+                onMoveUp={() =>
+                  postBlockAction('MOVE_BLOCK_UP', controlBlockId)
+                }
+                onMoveDown={() =>
+                  postBlockAction('MOVE_BLOCK_DOWN', controlBlockId)
+                }
+                onDuplicate={() =>
+                  postBlockAction('DUPLICATE_BLOCK', controlBlockId)
+                }
+                onToggleVisibility={() =>
+                  postBlockAction('TOGGLE_BLOCK_VISIBILITY', controlBlockId)
+                }
+                onDelete={() => postBlockAction('DELETE_BLOCK', controlBlockId)}
+                onRename={(newLabel) =>
+                  postBlockAction('RENAME_BLOCK', controlBlockId, newLabel)
+                }
+              />
+            </div>
+          );
+        })}
+      </Carousel>
+    </div>
+  );
+};
+
+export default PostsSliderSection;