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

package/app-template/src/views/header/header-client-wrapper.tsx

@@ -0,0 +1,496 @@
+'use client';
+
+/**
+ * Header Client Wrapper
+ *
+ * This component wraps header elements with Theme Editor styling capabilities.
+ * It provides the HeaderDesignerProvider context and WithDesignerFeatures wrappers.
+ *
+ * @see .github/instructions/native-widget.instructions.md for implementation guide
+ */
+
+import { PropsWithChildren, ReactNode, useEffect } from 'react';
+import { WithDesignerFeatures } from '@akinon/next/components/theme-editor/components/with-designer-features';
+import {
+  HeaderDesignerProvider,
+  useHeaderDesigner,
+  HEADER_PLACEHOLDER_ID,
+  HEADER_SECTION_ID,
+  HEADER_BLOCKS
+} from './designer-context';
+import {
+  HeaderLayoutProvider,
+  useHeaderLayoutDesigner,
+  HEADER_LAYOUT_SECTION_ID
+} from './header-layout-context';
+
+/**
+ * Helper to extract value from responsive object or direct value
+ * Theme Editor sends values in format { desktop: "value", mobile: "value" }
+ */
+function getResponsiveValue<T>(value: unknown, fallback: T): T {
+  if (value === null || value === undefined) return fallback;
+
+  // If it's a responsive object, get desktop value first, then any available value
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    const obj = value as Record<string, unknown>;
+    if ('desktop' in obj) return (obj.desktop as T) ?? fallback;
+    if ('mobile' in obj) return (obj.mobile as T) ?? fallback;
+    // Return first available value
+    const firstValue = Object.values(obj)[0];
+    if (firstValue !== undefined) return firstValue as T;
+    return fallback;
+  }
+
+  return value as T;
+}
+
+/**
+ * Parse icon size from properties - handles both string and responsive object formats
+ */
+function parseIconSize(value: unknown, fallback: number): number {
+  const strValue = getResponsiveValue<string>(value, String(fallback));
+  const parsed = parseInt(strValue, 10);
+  return isNaN(parsed) ? fallback : parsed;
+}
+
+interface HeaderWrapperProps {
+  children: ReactNode;
+}
+
+/**
+ * Main Header Wrapper with Provider
+ */
+export function HeaderWrapper({ children }: HeaderWrapperProps) {
+  return (
+    <HeaderDesignerProvider>
+      <HeaderLayoutProvider>
+        <HeaderContent>{children}</HeaderContent>
+      </HeaderLayoutProvider>
+    </HeaderDesignerProvider>
+  );
+}
+
+/**
+ * Header Content with Designer Features
+ *
+ * Uses CSS to disable pointer events on interactive elements (links, buttons)
+ * while keeping the WithDesignerFeatures wrapper clickable for block selection.
+ *
+ * When the Layout section is selected, the entire header gets a selection highlight.
+ */
+function HeaderContent({ children }: PropsWithChildren) {
+  const { isDesigner, selectedBlockId, getBlockStyles } = useHeaderDesigner();
+  const { isLayoutSectionSelected } = useHeaderLayoutDesigner();
+
+  // Inject styles to disable pointer events on interactive elements in designer mode
+  useEffect(() => {
+    if (!isDesigner) return;
+
+    const styleId = 'header-designer-styles';
+    let styleEl = document.getElementById(styleId) as HTMLStyleElement | null;
+
+    if (!styleEl) {
+      styleEl = document.createElement('style');
+      styleEl.id = styleId;
+      document.head.appendChild(styleEl);
+    }
+
+    styleEl.textContent = `
+      [data-block-id] a,
+      [data-block-id] button:not([data-designer-action]),
+      [data-block-id] input,
+      [data-block-id] [role="button"] {
+        pointer-events: none !important;
+      }
+    `;
+
+    return () => {
+      styleEl?.remove();
+    };
+  }, [isDesigner]);
+
+  // If not in designer mode, just render children without wrapper
+  if (!isDesigner) {
+    return <>{children}</>;
+  }
+
+  const containerBlock = {
+    ...HEADER_BLOCKS.CONTAINER,
+    styles: getBlockStyles(HEADER_BLOCKS.CONTAINER.id)
+  };
+
+  // Check if header should be highlighted (either container block or layout section selected)
+  const isHeaderSelected =
+    selectedBlockId === HEADER_BLOCKS.CONTAINER.id || isLayoutSectionSelected;
+
+  return (
+    <WithDesignerFeatures
+      block={containerBlock}
+      placeholderId={HEADER_PLACEHOLDER_ID}
+      sectionId={
+        isLayoutSectionSelected ? HEADER_LAYOUT_SECTION_ID : HEADER_SECTION_ID
+      }
+      isDesigner={isDesigner}
+      isSelected={isHeaderSelected}
+      className="relative"
+    >
+      {children}
+    </WithDesignerFeatures>
+  );
+}
+
+interface HeaderLogoWrapperProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Logo Wrapper with Designer Features
+ * Note: In non-designer mode, className is applied to inner elements, not wrapper
+ */
+export function HeaderLogoWrapper({
+  children,
+  className
+}: HeaderLogoWrapperProps) {
+  const { isDesigner, selectedBlockId, getBlockStyles } = useHeaderDesigner();
+
+  // If not in designer mode, just render children without wrapper
+  if (!isDesigner) {
+    return <>{children}</>;
+  }
+
+  const logoBlock = {
+    ...HEADER_BLOCKS.LOGO,
+    styles: getBlockStyles(HEADER_BLOCKS.LOGO.id)
+  };
+
+  return (
+    <WithDesignerFeatures
+      block={logoBlock}
+      placeholderId={HEADER_PLACEHOLDER_ID}
+      sectionId={HEADER_SECTION_ID}
+      isDesigner={isDesigner}
+      isSelected={selectedBlockId === HEADER_BLOCKS.LOGO.id}
+      className={className}
+    >
+      {children}
+    </WithDesignerFeatures>
+  );
+}
+
+interface HeaderNavbarWrapperProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Navbar Wrapper with Designer Features
+ * Note: In non-designer mode, className is applied to inner elements, not wrapper
+ */
+export function HeaderNavbarWrapper({
+  children,
+  className
+}: HeaderNavbarWrapperProps) {
+  const { isDesigner, selectedBlockId, getBlockStyles } = useHeaderDesigner();
+
+  // If not in designer mode, just render children without wrapper
+  if (!isDesigner) {
+    return <>{children}</>;
+  }
+
+  const navbarBlock = {
+    ...HEADER_BLOCKS.NAVBAR,
+    styles: getBlockStyles(HEADER_BLOCKS.NAVBAR.id)
+  };
+
+  return (
+    <WithDesignerFeatures
+      block={navbarBlock}
+      placeholderId={HEADER_PLACEHOLDER_ID}
+      sectionId={HEADER_SECTION_ID}
+      isDesigner={isDesigner}
+      isSelected={selectedBlockId === HEADER_BLOCKS.NAVBAR.id}
+      className={className}
+    >
+      {children}
+    </WithDesignerFeatures>
+  );
+}
+
+interface HeaderNavItemWrapperProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Navigation Item Wrapper with Designer Features
+ * Note: In non-designer mode, className is applied to inner elements, not wrapper
+ */
+export function HeaderNavItemWrapper({
+  children,
+  className
+}: HeaderNavItemWrapperProps) {
+  const { isDesigner, selectedBlockId, getBlockStyles } = useHeaderDesigner();
+
+  // If not in designer mode, just render children without wrapper
+  if (!isDesigner) {
+    return <>{children}</>;
+  }
+
+  // Use base ID for shared styles across all nav items
+  const navItemBlock = {
+    ...HEADER_BLOCKS.NAV_ITEM,
+    styles: getBlockStyles(HEADER_BLOCKS.NAV_ITEM.id)
+  };
+
+  const isSelected =
+    selectedBlockId === HEADER_BLOCKS.NAV_ITEM.id ||
+    selectedBlockId?.startsWith(HEADER_BLOCKS.NAV_ITEM.id + '-');
+
+  return (
+    <WithDesignerFeatures
+      block={navItemBlock}
+      placeholderId={HEADER_PLACEHOLDER_ID}
+      sectionId={HEADER_SECTION_ID}
+      isDesigner={isDesigner}
+      isSelected={isSelected}
+      className={className}
+    >
+      {children}
+    </WithDesignerFeatures>
+  );
+}
+
+interface HeaderSearchWrapperProps {
+  children: ReactNode;
+  className?: string;
+  renderIcon?: (icon: string, size: number) => ReactNode;
+}
+
+/**
+ * Search Wrapper with Designer Features
+ * Supports customizable icon via Theme Editor
+ * Note: In non-designer mode, className is applied to inner elements, not wrapper
+ */
+export function HeaderSearchWrapper({
+  children,
+  className,
+  renderIcon
+}: HeaderSearchWrapperProps) {
+  const { isDesigner, selectedBlockId, getBlockStyles, getBlockProperties } =
+    useHeaderDesigner();
+
+  // If not in designer mode, render children (ignore renderIcon, use original)
+  if (!isDesigner) {
+    return <>{children}</>;
+  }
+
+  const properties = getBlockProperties(HEADER_BLOCKS.SEARCH.id);
+  const searchBlock = {
+    ...HEADER_BLOCKS.SEARCH,
+    styles: getBlockStyles(HEADER_BLOCKS.SEARCH.id),
+    properties: properties || HEADER_BLOCKS.SEARCH.properties
+  };
+
+  const icon = getResponsiveValue<string>(
+    properties?.icon,
+    (HEADER_BLOCKS.SEARCH.properties?.icon as string) || 'search'
+  );
+  const iconSize = parseIconSize(
+    properties?.iconSize,
+    parseInt((HEADER_BLOCKS.SEARCH.properties?.iconSize as string) || '20', 10)
+  );
+
+  return (
+    <WithDesignerFeatures
+      block={searchBlock}
+      placeholderId={HEADER_PLACEHOLDER_ID}
+      sectionId={HEADER_SECTION_ID}
+      isDesigner={isDesigner}
+      isSelected={selectedBlockId === HEADER_BLOCKS.SEARCH.id}
+      className={className}
+    >
+      {renderIcon ? renderIcon(icon, iconSize) : children}
+    </WithDesignerFeatures>
+  );
+}
+
+interface HeaderUserMenuWrapperProps {
+  children: ReactNode;
+  className?: string;
+  renderIcon?: (icon: string, size: number) => ReactNode;
+}
+
+/**
+ * User Menu Wrapper with Designer Features
+ * Supports customizable icon via Theme Editor
+ * Note: In non-designer mode, className is applied to inner elements, not wrapper
+ */
+export function HeaderUserMenuWrapper({
+  children,
+  className,
+  renderIcon
+}: HeaderUserMenuWrapperProps) {
+  const { isDesigner, selectedBlockId, getBlockStyles, getBlockProperties } =
+    useHeaderDesigner();
+
+  // If not in designer mode, render children (ignore renderIcon, use original)
+  if (!isDesigner) {
+    return <>{children}</>;
+  }
+
+  const properties = getBlockProperties(HEADER_BLOCKS.USER_MENU.id);
+  const userMenuBlock = {
+    ...HEADER_BLOCKS.USER_MENU,
+    styles: getBlockStyles(HEADER_BLOCKS.USER_MENU.id),
+    properties: properties || HEADER_BLOCKS.USER_MENU.properties
+  };
+
+  const icon = getResponsiveValue<string>(
+    properties?.icon,
+    (HEADER_BLOCKS.USER_MENU.properties?.icon as string) || 'person'
+  );
+  const iconSize = parseIconSize(
+    properties?.iconSize,
+    parseInt(
+      (HEADER_BLOCKS.USER_MENU.properties?.iconSize as string) || '20',
+      10
+    )
+  );
+
+  return (
+    <WithDesignerFeatures
+      block={userMenuBlock}
+      placeholderId={HEADER_PLACEHOLDER_ID}
+      sectionId={HEADER_SECTION_ID}
+      isDesigner={isDesigner}
+      isSelected={selectedBlockId === HEADER_BLOCKS.USER_MENU.id}
+      className={className}
+    >
+      {renderIcon ? renderIcon(icon, iconSize) : children}
+    </WithDesignerFeatures>
+  );
+}
+
+interface HeaderMiniBasketWrapperProps {
+  children: ReactNode;
+  className?: string;
+  renderIcon?: (icon: string, size: number) => ReactNode;
+}
+
+/**
+ * Mini Basket Wrapper with Designer Features
+ * Supports customizable icon via Theme Editor
+ * Note: In non-designer mode, className is applied to inner elements, not wrapper
+ */
+export function HeaderMiniBasketWrapper({
+  children,
+  className,
+  renderIcon
+}: HeaderMiniBasketWrapperProps) {
+  const { isDesigner, selectedBlockId, getBlockStyles, getBlockProperties } =
+    useHeaderDesigner();
+
+  // If not in designer mode, render children (ignore renderIcon, use original)
+  if (!isDesigner) {
+    return <>{children}</>;
+  }
+
+  const properties = getBlockProperties(HEADER_BLOCKS.MINI_BASKET.id);
+  const miniBasketBlock = {
+    ...HEADER_BLOCKS.MINI_BASKET,
+    styles: getBlockStyles(HEADER_BLOCKS.MINI_BASKET.id),
+    properties: properties || HEADER_BLOCKS.MINI_BASKET.properties
+  };
+
+  const icon = getResponsiveValue<string>(
+    properties?.icon,
+    (HEADER_BLOCKS.MINI_BASKET.properties?.icon as string) || 'cart'
+  );
+  const iconSize = parseIconSize(
+    properties?.iconSize,
+    parseInt(
+      (HEADER_BLOCKS.MINI_BASKET.properties?.iconSize as string) || '20',
+      10
+    )
+  );
+
+  return (
+    <WithDesignerFeatures
+      block={miniBasketBlock}
+      placeholderId={HEADER_PLACEHOLDER_ID}
+      sectionId={HEADER_SECTION_ID}
+      isDesigner={isDesigner}
+      isSelected={selectedBlockId === HEADER_BLOCKS.MINI_BASKET.id}
+      className={className}
+    >
+      {renderIcon ? renderIcon(icon, iconSize) : children}
+    </WithDesignerFeatures>
+  );
+}
+
+interface HeaderMobileMenuButtonWrapperProps {
+  children: ReactNode;
+  className?: string;
+  renderIcon?: (icon: string, size: number) => ReactNode;
+}
+
+/**
+ * Mobile Menu Button Wrapper with Designer Features
+ * Supports customizable icon via Theme Editor
+ * Note: In non-designer mode, className is applied to inner elements, not wrapper
+ */
+export function HeaderMobileMenuButtonWrapper({
+  children,
+  className,
+  renderIcon
+}: HeaderMobileMenuButtonWrapperProps) {
+  const { isDesigner, selectedBlockId, getBlockStyles, getBlockProperties } =
+    useHeaderDesigner();
+
+  // If not in designer mode, render children (ignore renderIcon, use original)
+  if (!isDesigner) {
+    return <>{children}</>;
+  }
+
+  const properties = getBlockProperties(HEADER_BLOCKS.MOBILE_MENU_BUTTON.id);
+  const mobileMenuButtonBlock = {
+    ...HEADER_BLOCKS.MOBILE_MENU_BUTTON,
+    styles: getBlockStyles(HEADER_BLOCKS.MOBILE_MENU_BUTTON.id),
+    properties: properties || HEADER_BLOCKS.MOBILE_MENU_BUTTON.properties
+  };
+
+  const icon = getResponsiveValue<string>(
+    properties?.icon,
+    (HEADER_BLOCKS.MOBILE_MENU_BUTTON.properties?.icon as string) || 'hamburger'
+  );
+  const iconSize = parseIconSize(
+    properties?.iconSize,
+    parseInt(
+      (HEADER_BLOCKS.MOBILE_MENU_BUTTON.properties?.iconSize as string) || '18',
+      10
+    )
+  );
+
+  return (
+    <WithDesignerFeatures
+      block={mobileMenuButtonBlock}
+      placeholderId={HEADER_PLACEHOLDER_ID}
+      sectionId={HEADER_SECTION_ID}
+      isDesigner={isDesigner}
+      isSelected={selectedBlockId === HEADER_BLOCKS.MOBILE_MENU_BUTTON.id}
+      className={className}
+    >
+      {renderIcon ? renderIcon(icon, iconSize) : children}
+    </WithDesignerFeatures>
+  );
+}
+
+// Re-export for convenience
+export {
+  useHeaderDesigner,
+  HEADER_BLOCKS,
+  HEADER_PLACEHOLDER_ID,
+  HEADER_SECTION_ID
+};