@akinon/projectzero 2.0.0-beta.19 → 2.0.0-beta.20

package/app-template/src/views/header/header-text-slider-registrar.tsx

@@ -0,0 +1,382 @@
+'use client';
+
+/**
+ * Header Text Slider Section Registrar
+ *
+ * This component registers the "Text Slider" section for the header placeholder.
+ * The text slider section is a native widget that can be added via "Add Section" button.
+ * It displays scrolling/sliding text messages in the utility bar.
+ */
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  PropsWithChildren
+} from 'react';
+
+// Constants
+export const HEADER_TEXT_SLIDER_PLACEHOLDER_ID = 'header';
+export const HEADER_TEXT_SLIDER_SECTION_ID = 'header-text-slider';
+export const HEADER_TEXT_SLIDER_WIDGET_SLUG = 'header-text-slider-settings-2';
+
+// Global flag to track if registration has been done
+declare global {
+  interface Window {
+    __headerTextSliderRegistered?: boolean;
+  }
+}
+
+/**
+ * Check if running inside designer iframe
+ */
+function isInDesignerMode(): boolean {
+  if (typeof window === 'undefined') return false;
+  return window.self !== window.top;
+}
+
+interface ThemeSection {
+  id: string;
+  visible?: boolean;
+  properties?: Record<string, unknown>;
+  styles?: Record<string, unknown>;
+}
+
+interface ThemePlaceholder {
+  slug: string;
+  sections: ThemeSection[];
+}
+
+export interface TextSliderItem {
+  text: string;
+  link?: string;
+}
+
+export interface HeaderTextSliderProperties {
+  visible?: boolean;
+  items?: TextSliderItem[];
+  autoPlay?: boolean;
+  autoPlayInterval?: number;
+  showArrows?: boolean;
+}
+
+interface HeaderTextSliderContextValue {
+  isDesigner: boolean;
+  isTextSliderSectionSelected: boolean;
+  isSectionVisible: boolean;
+  properties: HeaderTextSliderProperties;
+  sectionStyles: Record<string, unknown>;
+}
+
+const HeaderTextSliderContext = createContext<HeaderTextSliderContextValue>({
+  isDesigner: false,
+  isTextSliderSectionSelected: false,
+  isSectionVisible: false,
+  properties: {
+    items: [{ text: 'Welcome to our store!' }],
+    autoPlay: true,
+    autoPlayInterval: 3000,
+    showArrows: true
+  },
+  sectionStyles: {}
+});
+
+export const useHeaderTextSlider = () => useContext(HeaderTextSliderContext);
+
+interface HeaderTextSliderRegistrarProps extends PropsWithChildren {
+  /**
+   * Initial settings from server-side parsing (to avoid flash)
+   */
+  initialSettings?: {
+    sectionStyles?: Record<string, unknown>;
+    properties?: HeaderTextSliderProperties;
+  };
+}
+
+/**
+ * HeaderTextSliderRegistrar
+ *
+ * Registers the Text Slider native section with Theme Editor.
+ * The section can be added via "Add Section" button in the header placeholder.
+ */
+export default function HeaderTextSliderRegistrar({
+  children,
+  initialSettings = {}
+}: HeaderTextSliderRegistrarProps) {
+  const isDesignerRef = useRef(false);
+  const [sectionProperties, setSectionProperties] =
+    useState<HeaderTextSliderProperties>(
+      initialSettings.properties || {
+        items: [{ text: 'Welcome to our store!' }],
+        autoPlay: true,
+        autoPlayInterval: 3000,
+        showArrows: true
+      }
+    );
+  const [sectionStyles, setSectionStyles] = useState<Record<string, unknown>>(
+    initialSettings.sectionStyles || {}
+  );
+  const [isTextSliderSelected, setIsTextSliderSelected] = useState(false);
+  const [isSectionVisible, setIsSectionVisible] = useState(
+    initialSettings.properties?.visible ?? false
+  );
+  const hasRegisteredNativeWidget = useRef(false);
+
+  const hasInitialSettings = !!(
+    (initialSettings.sectionStyles &&
+      Object.keys(initialSettings.sectionStyles).length > 0) ||
+    (initialSettings.properties &&
+      Object.keys(initialSettings.properties).length > 0)
+  );
+
+  useEffect(() => {
+    isDesignerRef.current = isInDesignerMode();
+  }, []);
+
+  const isDesigner = isDesignerRef.current;
+
+  // Register native widget - only once on mount
+  useEffect(() => {
+    const isInIframe =
+      typeof window !== 'undefined' && window.self !== window.top;
+    if (!isInIframe || !window.parent) {
+      return;
+    }
+
+    // Skip if already registered
+    if (
+      typeof window !== 'undefined' &&
+      window.__headerTextSliderRegistered &&
+      hasRegisteredNativeWidget.current
+    ) {
+      return;
+    }
+
+    // Send native widget registration to Theme Editor
+    // Use initial settings for registration, not dynamic state
+    const nativeWidgetConfig = {
+      placeholderId: HEADER_TEXT_SLIDER_PLACEHOLDER_ID,
+      autoAdd: false,
+      section: {
+        id: HEADER_TEXT_SLIDER_SECTION_ID,
+        type: 'native',
+        label: 'Text Slider',
+        blocks: [],
+        properties: initialSettings.properties || {
+          items: [{ text: 'Welcome to our store!' }],
+          autoPlay: true,
+          autoPlayInterval: 3000,
+          showArrows: true
+        },
+        styles: initialSettings.sectionStyles || {}
+      }
+    };
+
+    window.parent.postMessage(
+      {
+        type: 'REGISTER_NATIVE_WIDGETS',
+        data: { widgets: [nativeWidgetConfig] }
+      },
+      '*'
+    );
+
+    // Mark as registered
+    window.__headerTextSliderRegistered = true;
+    hasRegisteredNativeWidget.current = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Apply highlight style to text slider container when section is selected
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const textSliderContainer = document.querySelector(
+      '[data-section-id="header-text-slider"]'
+    );
+    if (!textSliderContainer) return;
+
+    if (isTextSliderSelected) {
+      (textSliderContainer as HTMLElement).style.outline = '2px solid #3b82f6';
+      (textSliderContainer as HTMLElement).style.outlineOffset = '-2px';
+    } else {
+      (textSliderContainer as HTMLElement).style.outline = '';
+      (textSliderContainer as HTMLElement).style.outlineOffset = '';
+    }
+
+    return () => {
+      (textSliderContainer as HTMLElement).style.outline = '';
+      (textSliderContainer as HTMLElement).style.outlineOffset = '';
+    };
+  }, [isTextSliderSelected]);
+
+  const hasReceivedInitialTheme = useRef(false);
+
+  // Listen for theme updates and selection changes from Theme Editor
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleMessage = (event: MessageEvent) => {
+      const { type, data } = event.data || {};
+
+      // Handle theme updates
+      if (
+        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
+        data?.theme?.placeholders
+      ) {
+        const placeholder = data.theme.placeholders?.find(
+          (p: ThemePlaceholder) => p.slug === HEADER_TEXT_SLIDER_PLACEHOLDER_ID
+        );
+
+        const textSliderSection = placeholder?.sections?.find(
+          (s: ThemeSection) => s.id === HEADER_TEXT_SLIDER_SECTION_ID
+        );
+
+        if (textSliderSection) {
+          const sectionVisible = textSliderSection.properties?.visible;
+          if (sectionVisible !== undefined) {
+            const isVisible =
+              typeof sectionVisible === 'boolean'
+                ? sectionVisible
+                : sectionVisible?.desktop === true ||
+                  sectionVisible?.mobile === true;
+            setIsSectionVisible(isVisible);
+          } else if (typeof textSliderSection.visible === 'boolean') {
+            setIsSectionVisible(textSliderSection.visible);
+          } else {
+            setIsSectionVisible(true);
+          }
+
+          // Skip property/style updates if we have initial settings and haven't
+          // received the first theme yet (to avoid format mismatch issues)
+          // After first theme load, we use UPDATE_SECTION_PROPERTY for changes
+          if (hasInitialSettings && !hasReceivedInitialTheme.current) {
+            hasReceivedInitialTheme.current = true;
+            // Don't apply properties/styles from UPDATE_THEME when we have server-side initial settings
+            // Individual property changes will come via UPDATE_SECTION_PROPERTY
+            return;
+          }
+
+          // Only apply updates if we don't have initial settings (fresh load)
+          if (!hasInitialSettings) {
+            if (textSliderSection.properties) {
+              setSectionProperties((prev) => {
+                const newProps =
+                  textSliderSection.properties as HeaderTextSliderProperties;
+                if (JSON.stringify(prev) === JSON.stringify(newProps)) {
+                  return prev;
+                }
+                return newProps;
+              });
+            }
+
+            if (textSliderSection.styles) {
+              setSectionStyles((prev) => {
+                if (
+                  JSON.stringify(prev) ===
+                  JSON.stringify(textSliderSection.styles)
+                ) {
+                  return prev;
+                }
+                return textSliderSection.styles;
+              });
+            }
+          }
+        } else if (placeholder) {
+          setIsSectionVisible(false);
+        }
+      }
+
+      // Handle property updates
+      if (type === 'UPDATE_SECTION_PROPERTY' || type === 'UPDATE_PROPERTY') {
+        const { sectionId, key, value, properties } = data || {};
+
+        if (sectionId === HEADER_TEXT_SLIDER_SECTION_ID) {
+          if (key && value !== undefined) {
+            setSectionProperties((prev) => ({
+              ...prev,
+              [key]: value
+            }));
+          }
+          if (properties) {
+            setSectionProperties(properties as HeaderTextSliderProperties);
+          }
+        }
+      }
+
+      // Handle style updates for the section
+      if (type === 'UPDATE_SECTION_STYLE' || type === 'UPDATE_STYLE') {
+        const { sectionId, key, value, styles } = data || {};
+
+        if (sectionId === HEADER_TEXT_SLIDER_SECTION_ID) {
+          if (key && value !== undefined) {
+            setSectionStyles((prev) => ({
+              ...prev,
+              [key]: value
+            }));
+          }
+          if (styles) {
+            setSectionStyles(styles);
+          }
+        }
+      }
+
+      // Handle selection changes
+      if (type === 'SELECT_SECTION') {
+        const { placeholderId, sectionId } = data || {};
+
+        const isSelected =
+          placeholderId === HEADER_TEXT_SLIDER_PLACEHOLDER_ID &&
+          sectionId === HEADER_TEXT_SLIDER_SECTION_ID;
+
+        setIsTextSliderSelected(isSelected);
+      }
+
+      // Handle block selection
+      if (type === 'SELECT_BLOCK') {
+        const { sectionId } = data || {};
+        if (sectionId === HEADER_TEXT_SLIDER_SECTION_ID) {
+          setIsTextSliderSelected(true);
+        } else {
+          setIsTextSliderSelected(false);
+        }
+      }
+
+      // Handle deselection
+      if (type === 'DESELECT' || type === 'CLEAR_SELECTION') {
+        setIsTextSliderSelected(false);
+      }
+
+      // Handle visibility toggle
+      if (type === 'TOGGLE_SECTION_VISIBILITY') {
+        const { sectionId } = data || {};
+        if (sectionId === HEADER_TEXT_SLIDER_SECTION_ID) {
+          setIsSectionVisible((prev) => !prev);
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [hasInitialSettings, isDesigner]);
+
+  // If no children, just return null (registration-only mode)
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <HeaderTextSliderContext.Provider
+      value={{
+        isDesigner,
+        isTextSliderSectionSelected: isTextSliderSelected,
+        isSectionVisible,
+        properties: sectionProperties,
+        sectionStyles
+      }}
+    >
+      {children}
+    </HeaderTextSliderContext.Provider>
+  );
+}

package/app-template/src/views/header/index.tsx

@@ -1,66 +1,128 @@
 import 'server-only';
 
-import { Link } from '@theme/components';
-import clsx from 'clsx';
-import { ROUTES } from '@theme/routes';
 import { menuGenerator } from '@akinon/next/utils';
 
 import HeaderBand from './band';
 import MobileHamburgerButton from './mobile-hamburger-button';
 import MobileMenu from './mobile-menu';
 import Navbar from './navbar';
+import HeaderLogo from './header-logo';
+import HeaderLayoutRegistrar from './header-layout-registrar';
+import HeaderContent from './header-content';
 import { getMenu } from '@akinon/next/data/server';
-import { Image } from '@akinon/next/components/image';
+import { getThemeSettings } from '@theme/data/server/theme';
+import { getWidgetData } from '@akinon/next/data/server/widget';
+import {
+  parseServerIconSettings,
+  parseServerLogoSettings,
+  parseServerNavbarMenuSettings,
+  parseServerLayoutSettings,
+  parseServerSearchSettings,
+  parseServerLanguageSettings,
+  parseServerCurrencySettings,
+  parseServerTextSliderSettings,
+  parseServerAnnouncementSettings
+} from './server-settings-parser';
 
 export default async function Header() {
   const response = await getMenu({ depth: 3 });
   const menu = menuGenerator(response);
+  const themeSettings = await getThemeSettings();
+
+  // Fetch native widget settings server-side to avoid flash
+  const [
+    iconSettingsWidget,
+    logoSettingsWidget,
+    navSettingsWidget,
+    layoutSettingsWidget,
+    searchSettingsWidget,
+    languageSettingsWidget,
+    currencySettingsWidget,
+    textSliderSettingsWidget,
+    announcementSettingsWidget
+  ] = await Promise.all([
+    getWidgetData({ slug: 'header-icon-settings-2' }).catch(() => null),
+    getWidgetData({ slug: 'header-logo-settings-2' }).catch(() => null),
+    getWidgetData({ slug: 'header-nav-settings-2' }).catch(() => null),
+    getWidgetData({ slug: 'header-layout-settings-2' }).catch(() => null),
+    getWidgetData({ slug: 'header-search-settings-2' }).catch(() => null),
+    getWidgetData({ slug: 'header-language-settings-2' }).catch(() => null),
+    getWidgetData({ slug: 'header-currency-settings-2' }).catch(() => null),
+    getWidgetData({ slug: 'header-text-slider-settings-2' }).catch(() => null),
+    getWidgetData({ slug: 'header-announcement-bar-settings-2' }).catch(
+      () => null
+    )
+  ]);
+
+  const initialIconSettings = parseServerIconSettings(iconSettingsWidget);
+  const initialLogoSettings = parseServerLogoSettings(
+    logoSettingsWidget,
+    themeSettings.logo
+  );
+  const initialNavSettings = parseServerNavbarMenuSettings(navSettingsWidget);
+  const initialLayoutSettings = parseServerLayoutSettings(layoutSettingsWidget);
+  const initialSearchSettings = parseServerSearchSettings(searchSettingsWidget);
+  const initialLanguageSettings = parseServerLanguageSettings(
+    languageSettingsWidget
+  );
+  const initialCurrencySettings = parseServerCurrencySettings(
+    currencySettingsWidget
+  );
+  const initialTextSliderSettings = parseServerTextSliderSettings(
+    textSliderSettingsWidget
+  );
+  const initialAnnouncementSettings = parseServerAnnouncementSettings(
+    announcementSettingsWidget
+  );
+
+  // Use layout settings for sticky, fallback to theme settings
+  const isSticky = initialLayoutSettings.sticky;
+  const position = isSticky ? 'sticky' : 'relative';
+  const top = isSticky ? '0' : 'auto';
+  const zIndex = isSticky ? '40' : 'auto';
 
   return (
-    <header className="relative">
-      <div
-        className={clsx([
-          'grid',
-          'mx-auto',
-          'header-m-template-cols',
-          'header-grid-template-areas',
-          'border-b',
-          'border-gray-100',
-          'before:hidden',
-          'before:absolute',
-          'before:top-0',
-          'before:left-0',
-          'before:w-full',
-          'before:bg-gray-100',
-          'before:h-9',
-          'before:z-[-1]',
-          'before:content-[""]',
-          'sm:grid-cols-3',
-          'sm:container',
-          'sm:before:block'
-        ])}
+    <header
+      className="relative"
+      style={{
+        position:
+          `var(--theme-header-position, ${position})` as React.CSSProperties['position'],
+        top: `var(--theme-header-top, ${top})`,
+        zIndex:
+          `var(--theme-header-z-index, ${zIndex})` as React.CSSProperties['zIndex'],
+        width: '100%',
+        backgroundColor: 'var(--theme-background, #fff)'
+      }}
+    >
+      {/* Register Layout section and provide layout context */}
+      <HeaderLayoutRegistrar
+        initialLayout={initialLayoutSettings.layout}
+        initialMenuPosition={initialLayoutSettings.menuPosition}
+        initialSearchPosition={initialLayoutSettings.searchPosition}
+        initialUtilityPosition={initialLayoutSettings.utilityPosition}
+        initialSticky={initialLayoutSettings.sticky}
+        initialBlockStyles={initialLayoutSettings.blockStyles}
       >
-        <HeaderBand />
-        <MobileHamburgerButton />
-        <Link
-          href={ROUTES.HOME}
-          passHref={true}
-          className="self-center block w-40 pl-3 header-grid-area-main-m sm:mt-9 sm:w-72 sm:justify-self-center sm:p-0"
-          aria-label="Homepage"
-        >
-          <Image
-            src="/logo.svg"
-            alt="Project Zero"
-            width={285}
-            height={27}
-            className="block w-full"
-            style={{ height: 'auto', width: '100%' }}
-            unoptimized
-          />
-        </Link>
-        <MobileMenu menu={menu} />
-        <Navbar menu={menu} />
-      </div>
+        <HeaderContent
+          logo={
+            <HeaderLogo
+              fallbackSrc={themeSettings.logo || '/logo.svg'}
+              initialSettings={initialLogoSettings}
+            />
+          }
+          navbar={
+            <Navbar menu={menu} initialNavSettings={initialNavSettings} />
+          }
+          icons={<HeaderBand initialIconSettings={initialIconSettings} />}
+          mobileHamburger={<MobileHamburgerButton />}
+          mobileMenu={<MobileMenu menu={menu} />}
+          initialSearchSettings={initialSearchSettings}
+          initialLanguageSettings={initialLanguageSettings}
+          initialCurrencySettings={initialCurrencySettings}
+          initialTextSliderSettings={initialTextSliderSettings}
+          initialAnnouncementSettings={initialAnnouncementSettings}
+        />
+      </HeaderLayoutRegistrar>
     </header>
   );
 }