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

package/components/theme-editor/sections/section-renderer-registry.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Section } from '../theme-section';
+import DividerSection from './divider-section';
+import PostsSliderSection from './posts-slider-section';
+import BeforeAfterSection from './before-after-section';
+import NotificationBannerSection from './notification-banner-section';
+import TabsSection from './tabs-section';
+import ImageHotspotSection from './image-hotspot-section';
+import CountdownCampaignBannerSection from './countdown-campaign-banner-section';
+import StatsCounterSection from './stats-counter-section';
+import CouponBannerSection from './coupon-banner-section';
+import ShippingThresholdProgressSection from './shipping-threshold-progress-section';
+import HoverShowcaseSection from './hover-showcase-section';
+import ContactFormSection from './contact-form-section';
+import FeaturedProductSpotlightSection from './featured-product-spotlight-section';
+import PreOrderLaunchBannerSection from './pre-order-launch-banner-section';
+import InstallmentOptionsSection from './installment-options-section';
+import FindInStoreSection from './find-in-store-section';
+import OrderTrackingLookupSection from './order-tracking-lookup-section';
+
+interface SectionRendererProps {
+  section: Section;
+  currentBreakpoint?: string;
+  placeholderId?: string;
+  isDesigner?: boolean;
+  selectedBlockId?: string | null;
+}
+
+type SectionRenderer = React.ComponentType<SectionRendererProps>;
+
+class SectionRendererRegistry {
+  private renderers: Map<string, SectionRenderer> = new Map();
+
+  register(type: string, renderer: SectionRenderer) {
+    this.renderers.set(type, renderer);
+  }
+
+  getRenderer(type: string): SectionRenderer | undefined {
+    return this.renderers.get(type);
+  }
+
+  hasCustomRenderer(type: string): boolean {
+    return this.renderers.has(type);
+  }
+}
+
+const sectionRendererRegistry = new SectionRendererRegistry();
+
+sectionRendererRegistry.register('divider', DividerSection);
+sectionRendererRegistry.register('tabs', TabsSection);
+sectionRendererRegistry.register('posts-slider', PostsSliderSection);
+sectionRendererRegistry.register('flash-deals-slider', PostsSliderSection);
+sectionRendererRegistry.register(
+  'installment-options',
+  InstallmentOptionsSection
+);
+sectionRendererRegistry.register(
+  'featured-product-spotlight',
+  FeaturedProductSpotlightSection
+);
+sectionRendererRegistry.register(
+  'pre-order-launch-banner',
+  PreOrderLaunchBannerSection
+);
+sectionRendererRegistry.register('image-hotspot', ImageHotspotSection);
+sectionRendererRegistry.register('before-after', BeforeAfterSection);
+sectionRendererRegistry.register(
+  'notification-banner',
+  NotificationBannerSection
+);
+sectionRendererRegistry.register(
+  'countdown-banner',
+  CountdownCampaignBannerSection
+);
+sectionRendererRegistry.register('stats-counter', StatsCounterSection);
+sectionRendererRegistry.register('coupon-banner', CouponBannerSection);
+sectionRendererRegistry.register(
+  'shipping-threshold-progress',
+  ShippingThresholdProgressSection
+);
+sectionRendererRegistry.register('hover-showcase', HoverShowcaseSection);
+sectionRendererRegistry.register('contact-form', ContactFormSection);
+sectionRendererRegistry.register(
+  'order-tracking-lookup',
+  OrderTrackingLookupSection
+);
+sectionRendererRegistry.register('find-in-store', FindInStoreSection);
+
+export default sectionRendererRegistry;

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

@@ -0,0 +1,135 @@
+'use client';
+
+import React from 'react';
+import ActionToolbar from '../components/action-toolbar';
+import { twMerge } from 'tailwind-merge';
+import clsx from 'clsx';
+import { Section } from '../theme-section';
+
+interface SectionWrapperProps {
+  section: Section;
+  placeholderId: string;
+  isDesigner?: boolean;
+  isSelected?: boolean;
+  onSelect?: (sectionId: string) => void;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+  onDuplicate?: () => void;
+  onToggleVisibility?: () => void;
+  onDelete?: () => void;
+  onRename?: (newLabel: string) => void;
+  children: React.ReactNode;
+}
+
+export default function SectionWrapper({
+  section,
+  placeholderId,
+  isDesigner = false,
+  isSelected = false,
+  onSelect,
+  onMoveUp,
+  onMoveDown,
+  onDuplicate,
+  onToggleVisibility,
+  onDelete,
+  onRename,
+  children
+}: SectionWrapperProps) {
+  const readSectionString = (value: unknown): string => {
+    if (value == null) return '';
+    if (typeof value === 'string') return value;
+    if (typeof value === 'object' && !Array.isArray(value)) {
+      const responsive = value as Record<string, unknown>;
+      const picked =
+        responsive.desktop ?? responsive.mobile ?? Object.values(responsive)[0];
+      return picked == null ? '' : String(picked);
+    }
+    return String(value);
+  };
+
+  const isNewsletterSection = section.type === 'newsletter-signup-banner';
+  const newsletterEndpoint = readSectionString(
+    section.properties?.['api-endpoint']
+  ).trim();
+  const newsletterSuccessMessage = readSectionString(
+    section.properties?.['success-message']
+  ).trim();
+  const newsletterErrorMessage = readSectionString(
+    section.properties?.['error-message']
+  ).trim();
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (isDesigner && onSelect) {
+      e.stopPropagation();
+      onSelect(section.id);
+
+      if (window.parent) {
+        window.parent.postMessage(
+          {
+            type: 'SELECT_SECTION',
+            data: {
+              placeholderId,
+              sectionId: section.id
+            }
+          },
+          '*'
+        );
+      }
+    }
+  };
+
+  return (
+    <section
+      data-section-id={section.id}
+      data-newsletter-signup={isNewsletterSection ? 'true' : undefined}
+      data-newsletter-endpoint={
+        isNewsletterSection ? newsletterEndpoint : undefined
+      }
+      data-newsletter-success-message={
+        isNewsletterSection && newsletterSuccessMessage
+          ? newsletterSuccessMessage
+          : undefined
+      }
+      data-newsletter-error-message={
+        isNewsletterSection && newsletterErrorMessage
+          ? newsletterErrorMessage
+          : undefined
+      }
+      style={isDesigner && section.hidden ? { display: 'none' } : undefined}
+      className={`theme-section relative ${
+        isDesigner ? 'cursor-pointer group/section' : ''
+      }`}
+      onClick={handleClick}
+    >
+      {isDesigner && (
+        <div
+          className={twMerge(
+            clsx(
+              'absolute inset-0 pointer-events-none z-0 border-2 transition-all',
+              section.locked
+                ? isSelected
+                  ? 'border-dashed border-amber-400 bg-amber-400/[0.12] shadow-[0_0_0_1px_rgba(251,191,36,0.4)]'
+                  : 'border-dashed border-amber-300/25 bg-amber-400/[0.03] group-hover/section:border-amber-300/55 group-hover/section:bg-amber-400/[0.07]'
+                : 'border-transparent group-hover/section:border-[#4482ff] group-hover/section:bg-[#4482ff]/10',
+              !section.locked && isSelected && 'border-[#4482ff]'
+            )
+          )}
+        />
+      )}
+      {isDesigner && isSelected && (
+        <ActionToolbar
+          label={section.label}
+          isLocked={section.locked === true}
+          zIndex={20}
+          onMoveUp={onMoveUp}
+          onMoveDown={onMoveDown}
+          onDuplicate={onDuplicate}
+          onToggleVisibility={onToggleVisibility}
+          onDelete={onDelete}
+          onRename={onRename}
+        />
+      )}
+      <div className="relative z-10">{children}</div>
+    </section>
+  );
+}