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

package/app-template/src/views/header/navbar-menu-context.tsx

@@ -1,219 +0,0 @@
-'use client';
-
-import {
-  createContext,
-  PropsWithChildren,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
-import { useExternalDesigner } from '@akinon/next/components/theme-editor/hooks/use-external-designer';
-import { useNativeWidgetData } from '@akinon/next/components/theme-editor/hooks/use-native-widget-data';
-
-export const NAVBAR_MENU_PLACEHOLDER_ID = 'header';
-export const NAVBAR_MENU_SECTION_ID = 'header-nav';
-export const NAVBAR_MENU_WIDGET_SLUG = 'header-nav-settings-2';
-
-export const NAVBAR_MENU_BLOCK = {
-  id: 'header-nav-menu-item',
-  type: 'text',
-  label: 'Menu Items'
-} as const;
-
-const BLOCK_META = [NAVBAR_MENU_BLOCK];
-
-interface ThemeBlock {
-  id: string;
-  type: string;
-  label: string;
-  styles?: Record<string, unknown>;
-  properties?: Record<string, unknown>;
-  value?: unknown;
-}
-
-interface ThemeSection {
-  id: string;
-  blocks: ThemeBlock[];
-}
-
-interface ThemePlaceholder {
-  slug: string;
-  sections: ThemeSection[];
-}
-
-interface NavbarMenuContextValue {
-  isDesigner: boolean;
-  selectedBlockId: string | null;
-  getBlockStyles: (blockId: string) => Record<string, unknown> | undefined;
-  getBlockProperties: (blockId: string) => Record<string, unknown> | undefined;
-}
-
-const NavbarMenuContext = createContext<NavbarMenuContextValue>({
-  isDesigner: false,
-  selectedBlockId: null,
-  getBlockStyles: () => undefined,
-  getBlockProperties: () => undefined
-});
-
-export const NavbarMenuProvider = ({ children }: PropsWithChildren) => {
-  const designerState = useExternalDesigner({
-    placeholderId: NAVBAR_MENU_PLACEHOLDER_ID
-  });
-
-  const isDesignerRef = useRef(false);
-  const [isDesignerChecked, setIsDesignerChecked] = useState(false);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    isDesignerRef.current = window.self !== window.top;
-    setIsDesignerChecked(true);
-  }, []);
-
-  const isDesigner = isDesignerRef.current;
-
-  const [themeBlocks, setThemeBlocks] = useState<Map<string, ThemeBlock>>(
-    new Map()
-  );
-  const hasReceivedThemeStyles = useRef(false);
-  const hasRegisteredNativeWidget = useRef(false);
-  const themeBlocksRef = useRef<Map<string, ThemeBlock>>(new Map());
-
-  const widgetData = useNativeWidgetData({
-    widgetSlug: NAVBAR_MENU_WIDGET_SLUG,
-    sectionId: NAVBAR_MENU_SECTION_ID,
-    skip: !isDesignerChecked || isDesigner,
-    blockMeta: BLOCK_META
-  });
-
-  const getBlockWithStyles = useCallback(
-    (blockDef: typeof NAVBAR_MENU_BLOCK) => {
-      const existingBlock = themeBlocksRef.current.get(blockDef.id);
-      return {
-        id: blockDef.id,
-        type: blockDef.type,
-        label: blockDef.label,
-        properties: existingBlock?.properties || {},
-        styles: existingBlock?.styles || {}
-      };
-    },
-    []
-  );
-
-  useEffect(() => {
-    if (hasRegisteredNativeWidget.current) return;
-
-    const isInIframe =
-      typeof window !== 'undefined' && window.self !== window.top;
-    if (!isInIframe || !window.parent) return;
-
-    const nativeWidgetConfig = {
-      placeholderId: NAVBAR_MENU_PLACEHOLDER_ID,
-      section: {
-        id: NAVBAR_MENU_SECTION_ID,
-        type: 'native',
-        label: 'Navigation Menu',
-        blocks: [getBlockWithStyles(NAVBAR_MENU_BLOCK)]
-      }
-    };
-
-    window.parent.postMessage(
-      {
-        type: 'REGISTER_NATIVE_WIDGETS',
-        data: { widgets: [nativeWidgetConfig] }
-      },
-      '*'
-    );
-
-    hasRegisteredNativeWidget.current = true;
-  }, [getBlockWithStyles]);
-
-  useEffect(() => {
-    if (!isDesignerChecked || isDesigner || widgetData.isLoading) return;
-    if (hasReceivedThemeStyles.current) return;
-
-    const blockMap = new Map<string, ThemeBlock>();
-    widgetData.blocks.forEach((block) => {
-      blockMap.set(block.id, {
-        id: block.id,
-        type: block.type || 'text',
-        label: block.label || block.id,
-        styles: block.styles,
-        properties: block.properties,
-        value: block.value
-      });
-    });
-
-    if (blockMap.size > 0) {
-      setThemeBlocks(blockMap);
-      themeBlocksRef.current = blockMap;
-    }
-  }, [isDesignerChecked, isDesigner, widgetData.isLoading, widgetData.blocks]);
-
-  const indexBlocks = useCallback(
-    (blocks: ThemeBlock[], map: Map<string, ThemeBlock>) => {
-      blocks.forEach((block) => {
-        map.set(block.id, block);
-      });
-    },
-    []
-  );
-
-  useEffect(() => {
-    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 === NAVBAR_MENU_PLACEHOLDER_ID
-        );
-
-        const navSection = placeholder?.sections?.find(
-          (s: ThemeSection) => s.id === NAVBAR_MENU_SECTION_ID
-        );
-
-        if (navSection?.blocks) {
-          const blockMap = new Map<string, ThemeBlock>();
-          indexBlocks(navSection.blocks, blockMap);
-
-          if (blockMap.size > 0) {
-            hasReceivedThemeStyles.current = true;
-            setThemeBlocks(blockMap);
-            themeBlocksRef.current = blockMap;
-          }
-        }
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  }, [indexBlocks]);
-
-  const getBlockStyles = useCallback(
-    (blockId: string) => themeBlocks.get(blockId)?.styles,
-    [themeBlocks]
-  );
-
-  const getBlockProperties = useCallback(
-    (blockId: string) => themeBlocks.get(blockId)?.properties,
-    [themeBlocks]
-  );
-
-  return (
-    <NavbarMenuContext.Provider
-      value={{
-        ...designerState,
-        getBlockStyles,
-        getBlockProperties
-      }}
-    >
-      {children}
-    </NavbarMenuContext.Provider>
-  );
-};
-
-export const useNavbarMenuDesigner = () => useContext(NavbarMenuContext);

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

@@ -1,61 +0,0 @@
-'use client';
-
-import { forwardRef, InputHTMLAttributes } from 'react';
-import clsx from 'clsx';
-import { Icon } from '@theme/components';
-
-interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  onSearchClick?: () => void;
-  error?: string;
-  startAdornment?: React.ReactNode;
-}
-
-export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
-  (props, ref) => {
-    const { label, onSearchClick, error, className, startAdornment, ...rest } =
-      props;
-
-    return (
-      <div className={clsx('flex flex-col', className)}>
-        <div
-          className={clsx(
-            'relative flex items-center border h-12 px-4',
-            error ? 'border-error' : 'border-black'
-          )}
-        >
-          {startAdornment}
-          <div className="flex-1 flex flex-col justify-center">
-            {label && (
-              <span className="text-[10px] text-black-750 leading-none tracking-wider">
-                {label}
-              </span>
-            )}
-            <input
-              ref={ref}
-              type="text"
-              className={clsx(
-                'w-full text-base leading-[15px] tracking-[0.64px] text-black-750',
-                'bg-transparent border-none outline-none',
-                'placeholder:text-black-750/75 font-jost',
-                label ? 'mt-0.5' : ''
-              )}
-              {...rest}
-            />
-          </div>
-          <button
-            type="button"
-            onClick={onSearchClick}
-            className="flex items-center justify-center ml-2"
-            aria-label="Search"
-          >
-            <Icon name="search" size={20} className="text-black" />
-          </button>
-        </div>
-        {error && <span className="mt-1 text-sm text-error">{error}</span>}
-      </div>
-    );
-  }
-);
-
-SearchInput.displayName = 'SearchInput';