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

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

@@ -0,0 +1,228 @@
+'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

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