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

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

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