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

package/app-template/src/views/header/header-search-registrar.tsx

@@ -1,511 +0,0 @@
-'use client';
-
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-  useCallback,
-  PropsWithChildren
-} from 'react';
-import { useNativeWidgetData } from '@akinon/next/components/theme-editor/hooks/use-native-widget-data';
-import { useHeaderLayout } from './header-layout-registrar';
-
-export const HEADER_SEARCH_PLACEHOLDER_ID = 'header';
-export const HEADER_SEARCH_SECTION_ID = 'header-search';
-export const HEADER_SEARCH_WIDGET_SLUG = 'header-search-settings-2';
-
-export const HEADER_SEARCH_BLOCKS = {
-  ICON: {
-    id: 'header-search-icon',
-    type: 'icon-button',
-    label: 'Search Icon'
-  }
-} as const;
-
-const BLOCK_META = [HEADER_SEARCH_BLOCKS.ICON];
-
-declare global {
-  interface Window {
-    __headerSearchRegistered?: boolean;
-    __headerSearchCurrentLayout?: string;
-  }
-}
-
-interface ThemeBlock {
-  id: string;
-  type: string;
-  label: string;
-  styles?: Record<string, unknown>;
-  properties?: Record<string, unknown>;
-}
-
-interface ThemeSection {
-  id: string;
-  blocks: ThemeBlock[];
-  visible?: boolean;
-  properties?: Record<string, unknown>;
-  styles?: Record<string, unknown>;
-}
-
-interface ThemePlaceholder {
-  slug: string;
-  sections: ThemeSection[];
-}
-
-export interface HeaderSearchProperties {
-  placeholder?: string;
-  visible?: boolean;
-  width?: string | number | Record<string, string | number>;
-}
-
-interface HeaderSearchContextValue {
-  isDesigner: boolean;
-  isSearchSectionSelected: boolean;
-  isSectionVisible: boolean;
-  properties: HeaderSearchProperties;
-  sectionStyles: Record<string, unknown>;
-  selectedBlockId: string | null;
-  getBlockStyles: (blockId: string) => Record<string, unknown> | undefined;
-  getBlockProperties: (blockId: string) => Record<string, unknown> | undefined;
-}
-
-const HeaderSearchContext = createContext<HeaderSearchContextValue>({
-  isDesigner: false,
-  isSearchSectionSelected: false,
-  isSectionVisible: true,
-  properties: {},
-  sectionStyles: {},
-  selectedBlockId: null,
-  getBlockStyles: () => undefined,
-  getBlockProperties: () => undefined
-});
-
-export const useHeaderSearch = () => useContext(HeaderSearchContext);
-
-export interface InitialSearchSettings {
-  sectionStyles?: {
-    width?: string | number;
-    maxWidth?: string;
-    height?: string | number;
-    backgroundColor?: string;
-    borderColor?: string;
-    borderWidth?: string;
-    borderRadius?: string;
-    fontSize?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-  };
-  iconStyles?: {
-    color?: string;
-    iconSize?: number;
-  };
-  properties?: {
-    placeholder?: string;
-    visible?: boolean;
-    width?: string | number;
-  };
-}
-
-interface HeaderSearchRegistrarProps extends PropsWithChildren {
-  autoRegister?: boolean;
-  initialSettings?: InitialSearchSettings;
-}
-
-export default function HeaderSearchRegistrar({
-  children,
-  autoRegister = false,
-  initialSettings = {}
-}: HeaderSearchRegistrarProps) {
-  const isDesignerRef = useRef(false);
-  const [isDesignerChecked, setIsDesignerChecked] = useState(false);
-  const [sectionProperties, setSectionProperties] =
-    useState<HeaderSearchProperties>(initialSettings.properties || {});
-  const [sectionStyles, setSectionStyles] = useState<Record<string, unknown>>(
-    initialSettings.sectionStyles || {}
-  );
-  const [isSearchSelected, setIsSearchSelected] = useState(false);
-  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
-  const [isSectionVisible, setIsSectionVisible] = useState(true);
-  const [themeBlocks, setThemeBlocks] = useState<Map<string, ThemeBlock>>(
-    () => {
-      const initialMap = new Map<string, ThemeBlock>();
-      if (
-        initialSettings.iconStyles &&
-        Object.keys(initialSettings.iconStyles).length > 0
-      ) {
-        initialMap.set(HEADER_SEARCH_BLOCKS.ICON.id, {
-          id: HEADER_SEARCH_BLOCKS.ICON.id,
-          type: HEADER_SEARCH_BLOCKS.ICON.type,
-          label: HEADER_SEARCH_BLOCKS.ICON.label,
-          styles: initialSettings.iconStyles,
-          properties: {}
-        });
-      }
-      return initialMap;
-    }
-  );
-  const themeBlocksRef = useRef<Map<string, ThemeBlock>>(
-    (() => {
-      const initialMap = new Map<string, ThemeBlock>();
-      if (
-        initialSettings.iconStyles &&
-        Object.keys(initialSettings.iconStyles).length > 0
-      ) {
-        initialMap.set(HEADER_SEARCH_BLOCKS.ICON.id, {
-          id: HEADER_SEARCH_BLOCKS.ICON.id,
-          type: HEADER_SEARCH_BLOCKS.ICON.type,
-          label: HEADER_SEARCH_BLOCKS.ICON.label,
-          styles: initialSettings.iconStyles,
-          properties: {}
-        });
-      }
-      return initialMap;
-    })()
-  );
-  const hasRegisteredNativeWidget = useRef(false);
-
-  const hasInitialSettings = !!(
-    (initialSettings.sectionStyles &&
-      Object.keys(initialSettings.sectionStyles).length > 0) ||
-    (initialSettings.iconStyles &&
-      Object.keys(initialSettings.iconStyles).length > 0) ||
-    (initialSettings.properties &&
-      Object.keys(initialSettings.properties).length > 0)
-  );
-  const hasReceivedThemeProps = useRef(false);
-
-  const { layout } = useHeaderLayout();
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    isDesignerRef.current = window.self !== window.top;
-    setIsDesignerChecked(true);
-  }, []);
-
-  const isDesigner = isDesignerRef.current;
-
-  const widgetData = useNativeWidgetData({
-    widgetSlug: HEADER_SEARCH_WIDGET_SLUG,
-    sectionId: HEADER_SEARCH_SECTION_ID,
-    skip: !isDesignerChecked || !isDesigner || hasInitialSettings,
-    blockMeta: BLOCK_META
-  });
-
-  const getBlockWithStyles = useCallback(
-    (
-      blockDef: typeof HEADER_SEARCH_BLOCKS[keyof typeof HEADER_SEARCH_BLOCKS]
-    ) => {
-      const existingBlock = themeBlocksRef.current.get(blockDef.id);
-      return {
-        id: blockDef.id,
-        type: blockDef.type,
-        label: blockDef.label,
-        properties: existingBlock?.properties || {},
-        styles: existingBlock?.styles || {}
-      };
-    },
-    []
-  );
-
-  useEffect(() => {
-    const isInIframe =
-      typeof window !== 'undefined' && window.self !== window.top;
-    if (!isInIframe || !window.parent) {
-      return;
-    }
-
-    const previousLayout = window.__headerSearchCurrentLayout;
-    window.__headerSearchCurrentLayout = layout;
-
-    const shouldRegister = autoRegister || layout === 'two-row';
-
-    if (previousLayout === 'two-row' && layout === 'default' && !autoRegister) {
-      window.parent.postMessage(
-        {
-          type: 'UNREGISTER_NATIVE_SECTION',
-          data: {
-            placeholderId: HEADER_SEARCH_PLACEHOLDER_ID,
-            sectionId: HEADER_SEARCH_SECTION_ID
-          }
-        },
-        '*'
-      );
-      hasRegisteredNativeWidget.current = false;
-      window.__headerSearchRegistered = false;
-      return;
-    }
-
-    if (!shouldRegister) {
-      return;
-    }
-
-    if (
-      typeof window !== 'undefined' &&
-      window.__headerSearchRegistered &&
-      hasRegisteredNativeWidget.current
-    ) {
-      return;
-    }
-
-    const nativeWidgetConfig = {
-      placeholderId: HEADER_SEARCH_PLACEHOLDER_ID,
-      section: {
-        id: HEADER_SEARCH_SECTION_ID,
-        type: 'native',
-        label: 'Search',
-        blocks: [getBlockWithStyles(HEADER_SEARCH_BLOCKS.ICON)],
-        properties: sectionProperties,
-        styles: sectionStyles
-      }
-    };
-
-    window.parent.postMessage(
-      {
-        type: 'REGISTER_NATIVE_WIDGETS',
-        data: { widgets: [nativeWidgetConfig] }
-      },
-      '*'
-    );
-
-    window.__headerSearchRegistered = true;
-    hasRegisteredNativeWidget.current = true;
-  }, [
-    layout,
-    autoRegister,
-    getBlockWithStyles,
-    sectionProperties,
-    sectionStyles
-  ]);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const searchContainer = document.querySelector(
-      '[data-section-id="header-search"]'
-    );
-    if (!searchContainer) return;
-
-    if (isSearchSelected) {
-      (searchContainer as HTMLElement).style.outline = '2px solid #3b82f6';
-      (searchContainer as HTMLElement).style.outlineOffset = '-2px';
-    } else {
-      (searchContainer as HTMLElement).style.outline = '';
-      (searchContainer as HTMLElement).style.outlineOffset = '';
-    }
-
-    return () => {
-      (searchContainer as HTMLElement).style.outline = '';
-      (searchContainer as HTMLElement).style.outlineOffset = '';
-    };
-  }, [isSearchSelected]);
-
-  useEffect(() => {
-    if (!isDesignerChecked) return;
-    if (!isDesigner) return;
-    if (hasInitialSettings) return;
-    if (widgetData.isLoading || hasReceivedThemeProps.current) return;
-
-    if (widgetData.sectionProperties && Object.keys(widgetData.sectionProperties).length > 0) {
-      setSectionProperties(widgetData.sectionProperties as HeaderSearchProperties);
-    }
-    if (widgetData.sectionStyles && Object.keys(widgetData.sectionStyles).length > 0) {
-      setSectionStyles(widgetData.sectionStyles);
-    }
-
-    const blockMap = new Map<string, ThemeBlock>();
-    widgetData.blocks.forEach((block) => {
-      blockMap.set(block.id, {
-        id: block.id,
-        type: block.type || 'icon-button',
-        label: block.label || block.id,
-        styles: block.styles,
-        properties: block.properties
-      });
-    });
-
-    if (blockMap.size > 0) {
-      setThemeBlocks(blockMap);
-      themeBlocksRef.current = blockMap;
-    }
-
-    hasReceivedThemeProps.current = true;
-  }, [widgetData, isDesignerChecked, isDesigner, hasInitialSettings]);
-
-  const indexBlocks = useCallback(
-    (blocks: ThemeBlock[], map: Map<string, ThemeBlock>) => {
-      blocks.forEach((block) => {
-        map.set(block.id, block);
-      });
-    },
-    []
-  );
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const handleMessage = (event: MessageEvent) => {
-      const { type, data } = event.data || {};
-
-      if (
-        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
-        data?.theme?.placeholders
-      ) {
-        const placeholder = data.theme.placeholders?.find(
-          (p: ThemePlaceholder) => p.slug === HEADER_SEARCH_PLACEHOLDER_ID
-        );
-
-        const searchSection = placeholder?.sections?.find(
-          (s: ThemeSection) => s.id === HEADER_SEARCH_SECTION_ID
-        );
-
-        if (searchSection) {
-          const shouldUpdateStyles =
-            type === 'UPDATE_THEME' || !hasInitialSettings;
-
-          if (shouldUpdateStyles) {
-            hasReceivedThemeProps.current = true;
-
-            if (searchSection.properties) {
-              setSectionProperties(searchSection.properties as HeaderSearchProperties);
-            }
-
-            if (searchSection.styles) {
-              setSectionStyles(searchSection.styles);
-            }
-
-            if (searchSection.blocks) {
-              const blockMap = new Map<string, ThemeBlock>();
-              indexBlocks(searchSection.blocks, blockMap);
-              if (blockMap.size > 0) {
-                setThemeBlocks(blockMap);
-                themeBlocksRef.current = blockMap;
-              }
-            }
-          }
-
-          if (typeof searchSection.visible === 'boolean') {
-            setIsSectionVisible(searchSection.visible);
-          } else {
-            setIsSectionVisible(true);
-          }
-        } else if (placeholder) {
-          setIsSectionVisible(false);
-        }
-      }
-
-      if (type === 'UPDATE_SECTION_PROPERTY' || type === 'UPDATE_PROPERTY') {
-        const { sectionId, placeholderId, key, value, properties } = data || {};
-
-        if (
-          sectionId === HEADER_SEARCH_SECTION_ID ||
-          placeholderId === HEADER_SEARCH_PLACEHOLDER_ID
-        ) {
-          if (key && value !== undefined) {
-            setSectionProperties((prev) => ({
-              ...prev,
-              [key]: value
-            }));
-          }
-          if (properties) {
-            setSectionProperties(properties);
-          }
-        }
-      }
-
-      if (type === 'UPDATE_SECTION_STYLE' || type === 'UPDATE_STYLE') {
-        const { sectionId, placeholderId, key, value, styles } = data || {};
-
-        if (
-          sectionId === HEADER_SEARCH_SECTION_ID ||
-          placeholderId === HEADER_SEARCH_PLACEHOLDER_ID
-        ) {
-          if (key && value !== undefined) {
-            setSectionStyles((prev) => ({
-              ...prev,
-              [key]: value
-            }));
-          }
-          if (styles) {
-            setSectionStyles(styles);
-          }
-        }
-      }
-
-      if (type === 'SELECT_SECTION') {
-        const { placeholderId, sectionId } = data || {};
-
-        const isSelected =
-          placeholderId === HEADER_SEARCH_PLACEHOLDER_ID &&
-          sectionId === HEADER_SEARCH_SECTION_ID;
-
-        setIsSearchSelected(isSelected);
-        if (!isSelected) {
-          setSelectedBlockId(null);
-        }
-      }
-
-      if (type === 'SELECT_BLOCK') {
-        const { sectionId, blockId } = data || {};
-        if (sectionId === HEADER_SEARCH_SECTION_ID) {
-          setSelectedBlockId(blockId || null);
-          setIsSearchSelected(true);
-        } else {
-          setIsSearchSelected(false);
-          setSelectedBlockId(null);
-        }
-      }
-
-      if (type === 'DESELECT' || type === 'CLEAR_SELECTION') {
-        setIsSearchSelected(false);
-        setSelectedBlockId(null);
-      }
-
-      if (type === 'TOGGLE_SECTION_VISIBILITY') {
-        const { sectionId } = data || {};
-        if (sectionId === HEADER_SEARCH_SECTION_ID) {
-          setIsSectionVisible((prev) => !prev);
-        }
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  }, [indexBlocks, hasInitialSettings]);
-
-  const getBlockStyles = useCallback(
-    (blockId: string) => {
-      return themeBlocks.get(blockId)?.styles;
-    },
-    [themeBlocks]
-  );
-
-  const getBlockProperties = useCallback(
-    (blockId: string) => {
-      return themeBlocks.get(blockId)?.properties;
-    },
-    [themeBlocks]
-  );
-
-  if (!children) {
-    return null;
-  }
-
-  return (
-    <HeaderSearchContext.Provider
-      value={{
-        isDesigner,
-        isSearchSectionSelected: isSearchSelected,
-        isSectionVisible,
-        properties: sectionProperties,
-        sectionStyles,
-        selectedBlockId,
-        getBlockStyles,
-        getBlockProperties
-      }}
-    >
-      {children}
-    </HeaderSearchContext.Provider>
-  );
-}