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

package/app-template/src/views/header/header-logo-context.tsx

@@ -1,228 +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 HEADER_LOGO_PLACEHOLDER_ID = 'header';
-export const HEADER_LOGO_SECTION_ID = 'header-logo';
-export const HEADER_LOGO_WIDGET_SLUG = 'header-logo-settings-2';
-
-export const HEADER_LOGO_BLOCK = {
-  id: 'header-logo-image',
-  type: 'image',
-  label: 'Logo Image'
-} as const;
-
-const BLOCK_META = [HEADER_LOGO_BLOCK];
-
-interface ThemeBlock {
-  id: string;
-  type: string;
-  label: string;
-  styles?: Record<string, unknown>;
-  properties?: Record<string, unknown>;
-  value?: string;
-}
-
-interface ThemeSection {
-  id: string;
-  blocks: ThemeBlock[];
-}
-
-interface ThemePlaceholder {
-  slug: string;
-  sections: ThemeSection[];
-}
-
-interface HeaderLogoContextValue {
-  isDesigner: boolean;
-  selectedBlockId: string | null;
-  getBlockStyles: (blockId: string) => Record<string, unknown> | undefined;
-  getBlockProperties: (blockId: string) => Record<string, unknown> | undefined;
-  getBlockValue: (blockId: string) => string | undefined;
-}
-
-const HeaderLogoContext = createContext<HeaderLogoContextValue>({
-  isDesigner: false,
-  selectedBlockId: null,
-  getBlockStyles: () => undefined,
-  getBlockProperties: () => undefined,
-  getBlockValue: () => undefined
-});
-
-export const HeaderLogoProvider = ({ children }: PropsWithChildren) => {
-  const designerState = useExternalDesigner({
-    placeholderId: HEADER_LOGO_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: HEADER_LOGO_WIDGET_SLUG,
-    sectionId: HEADER_LOGO_SECTION_ID,
-    skip: !isDesignerChecked || isDesigner,
-    blockMeta: BLOCK_META
-  });
-
-  const getBlockWithStyles = useCallback(
-    (blockDef: typeof HEADER_LOGO_BLOCK) => {
-      const existingBlock = themeBlocksRef.current.get(blockDef.id);
-      return {
-        id: blockDef.id,
-        type: blockDef.type,
-        label: blockDef.label,
-        properties: existingBlock?.properties || {},
-        styles: existingBlock?.styles || {},
-        value: existingBlock?.value
-      };
-    },
-    []
-  );
-
-  useEffect(() => {
-    if (hasRegisteredNativeWidget.current) return;
-
-    const isInIframe =
-      typeof window !== 'undefined' && window.self !== window.top;
-    if (!isInIframe || !window.parent) return;
-
-    const nativeWidgetConfig = {
-      placeholderId: HEADER_LOGO_PLACEHOLDER_ID,
-      section: {
-        id: HEADER_LOGO_SECTION_ID,
-        type: 'native',
-        label: 'Logo',
-        blocks: [getBlockWithStyles(HEADER_LOGO_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 || 'image',
-        label: block.label || block.id,
-        styles: block.styles,
-        properties: block.properties,
-        value: block.value as string | undefined
-      });
-    });
-
-    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 === HEADER_LOGO_PLACEHOLDER_ID
-        );
-
-        const headerLogoSection = placeholder?.sections?.find(
-          (s: ThemeSection) => s.id === HEADER_LOGO_SECTION_ID
-        );
-
-        if (headerLogoSection) {
-          const blockMap = new Map<string, ThemeBlock>();
-          indexBlocks(headerLogoSection.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]
-  );
-
-  const getBlockValue = useCallback(
-    (blockId: string) => themeBlocks.get(blockId)?.value,
-    [themeBlocks]
-  );
-
-  return (
-    <HeaderLogoContext.Provider
-      value={{
-        ...designerState,
-        getBlockStyles,
-        getBlockProperties,
-        getBlockValue
-      }}
-    >
-      {children}
-    </HeaderLogoContext.Provider>
-  );
-};
-
-export const useHeaderLogoDesigner = () => useContext(HeaderLogoContext);

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

@@ -1,118 +0,0 @@
-'use client';
-
-import { Link } from '@theme/components';
-import { ROUTES } from '@theme/routes';
-import { Image } from '@akinon/next/components/image';
-import clsx from 'clsx';
-import { useHeaderLogoSettings } from './use-header-logo';
-import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
-import {
-  HeaderLogoProvider,
-  useHeaderLogoDesigner,
-  HEADER_LOGO_PLACEHOLDER_ID,
-  HEADER_LOGO_SECTION_ID,
-  HEADER_LOGO_BLOCK
-} from './header-logo-context';
-import { LogoSettings } from './server-settings-parser';
-
-interface SelectableLogoProps {
-  fallbackSrc: string;
-  initialSettings?: LogoSettings;
-}
-
-function SelectableLogo({ fallbackSrc, initialSettings }: SelectableLogoProps) {
-  const logoSettings = useHeaderLogoSettings(initialSettings);
-  const { isDesigner, selectedBlockId } = useHeaderLogoDesigner();
-
-  const { handleClick } = useDesignerFeatures({
-    blockId: HEADER_LOGO_BLOCK.id,
-    placeholderId: HEADER_LOGO_PLACEHOLDER_ID,
-    sectionId: HEADER_LOGO_SECTION_ID,
-    isDesigner,
-    blockInfo: {
-      id: HEADER_LOGO_BLOCK.id,
-      type: HEADER_LOGO_BLOCK.type,
-      label: HEADER_LOGO_BLOCK.label
-    }
-  });
-
-  const isSelected = selectedBlockId === HEADER_LOGO_BLOCK.id;
-  const logoSrc = logoSettings.src || fallbackSrc;
-
-  // Parse width/height - could be number or string with unit
-  const parseSize = (
-    value: number | string | undefined,
-    defaultValue: number
-  ): number | string => {
-    if (value === undefined) return defaultValue;
-    if (typeof value === 'number') return value;
-    // If it's a string with unit like "120px" or "100%", return as is
-    if (typeof value === 'string') {
-      const numValue = parseInt(value, 10);
-      return isNaN(numValue) ? defaultValue : numValue;
-    }
-    return defaultValue;
-  };
-
-  const width = parseSize(logoSettings.width, 80);
-  const height = parseSize(logoSettings.height, 20);
-
-  const logoElement = (
-    <Image
-      src={logoSrc}
-      alt="Logo"
-      width={typeof width === 'number' ? width : 80}
-      height={typeof height === 'number' ? height : 20}
-      className="block w-full"
-      style={{
-        maxWidth: logoSettings.maxWidth,
-        maxHeight: logoSettings.maxHeight,
-        objectFit: logoSettings.objectFit
-      }}
-      unoptimized
-    />
-  );
-
-  if (isDesigner) {
-    return (
-      <span
-        data-block-id={HEADER_LOGO_BLOCK.id}
-        onClick={handleClick}
-        className={clsx(
-          'relative cursor-pointer inline-block',
-          isSelected && 'ring-2 ring-blue-500 ring-offset-1 rounded'
-        )}
-      >
-        {logoElement}
-      </span>
-    );
-  }
-
-  return logoElement;
-}
-
-export interface HeaderLogoProps {
-  fallbackSrc: string;
-  initialSettings?: LogoSettings;
-}
-
-export default function HeaderLogo({
-  fallbackSrc,
-  initialSettings
-}: HeaderLogoProps) {
-  return (
-    <HeaderLogoProvider>
-      <Link
-        href={ROUTES.HOME}
-        passHref={true}
-        className="self-center block pl-3 sm:justify-self-center sm:p-0"
-        aria-label="Homepage"
-      >
-        <SelectableLogo
-          fallbackSrc={fallbackSrc}
-          initialSettings={initialSettings}
-        />
-      </Link>
-    </HeaderLogoProvider>
-  );
-}