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

package/app-template/src/views/header/use-header-icons.ts

@@ -0,0 +1,241 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { useNativeWidgetData } from '@akinon/next/components/theme-editor/hooks/use-native-widget-data';
+import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
+
+const THEME_CONFIG_SLUG = 'theme-config';
+const HEADER_ICONS_WIDGET_SLUG = 'header-icon-settings-2';
+const HEADER_PLACEHOLDER_ID = 'header';
+const HEADER_ICONS_SECTION_ID = 'header-icons';
+
+const BLOCK_IDS = {
+  search: 'header-icon-search',
+  profile: 'header-icon-profile',
+  cart: 'header-icon-cart'
+} as const;
+
+const BLOCK_META = [
+  { id: BLOCK_IDS.search, type: 'icon-button', label: 'Search Icon' },
+  { id: BLOCK_IDS.profile, type: 'icon-button', label: 'Profile Icon' },
+  { id: BLOCK_IDS.cart, type: 'icon-button', label: 'Cart Icon' }
+];
+
+const DEFAULT_ICON_SIZE = 20;
+const DEFAULT_ICON_COLOR = 'currentColor';
+
+interface IconSettings {
+  size: number;
+  color: string;
+}
+
+interface HeaderIconSettings {
+  search: IconSettings;
+  profile: IconSettings;
+  cart: IconSettings;
+}
+
+interface ThemeSettings {
+  headerIcons?: {
+    search?: { size?: number; color?: string };
+    profile?: { size?: number; color?: string };
+    cart?: { size?: number; color?: string };
+  };
+}
+
+const defaultSettings: HeaderIconSettings = {
+  search: { size: DEFAULT_ICON_SIZE, color: DEFAULT_ICON_COLOR },
+  profile: { size: DEFAULT_ICON_SIZE, color: DEFAULT_ICON_COLOR },
+  cart: { size: DEFAULT_ICON_SIZE, color: DEFAULT_ICON_COLOR }
+};
+
+function parseHeaderIconSettings(
+  themeSettings?: ThemeSettings
+): HeaderIconSettings {
+  if (!themeSettings?.headerIcons) {
+    return defaultSettings;
+  }
+
+  const { headerIcons } = themeSettings;
+
+  return {
+    search: {
+      size: headerIcons.search?.size ?? DEFAULT_ICON_SIZE,
+      color: headerIcons.search?.color ?? DEFAULT_ICON_COLOR
+    },
+    profile: {
+      size: headerIcons.profile?.size ?? DEFAULT_ICON_SIZE,
+      color: headerIcons.profile?.color ?? DEFAULT_ICON_COLOR
+    },
+    cart: {
+      size: headerIcons.cart?.size ?? DEFAULT_ICON_SIZE,
+      color: headerIcons.cart?.color ?? DEFAULT_ICON_COLOR
+    }
+  };
+}
+
+function parseBlockStyles(
+  block:
+    | { styles?: Record<string, unknown>; properties?: Record<string, unknown> }
+    | undefined
+): IconSettings | null {
+  if (!block) return null;
+
+  const hasColor = block.styles?.color;
+  const hasSize = block.properties?.iconSize;
+
+  if (!hasColor && !hasSize) return null;
+
+  let color: string | undefined;
+  if (hasColor) {
+    const colorValue = block.styles!.color as string | { desktop: string };
+    color = typeof colorValue === 'object' ? colorValue.desktop : colorValue;
+  }
+
+  let size: number | undefined;
+  if (hasSize) {
+    const sizeValue = block.properties!.iconSize as
+      | number
+      | string
+      | { desktop: number | string };
+    const rawSize =
+      typeof sizeValue === 'object' ? sizeValue.desktop : sizeValue;
+    const parsed =
+      typeof rawSize === 'string' ? parseInt(rawSize, 10) : rawSize;
+    if (!isNaN(parsed)) {
+      size = parsed;
+    }
+  }
+
+  if (color === undefined && size === undefined) return null;
+
+  return {
+    size: size ?? DEFAULT_ICON_SIZE,
+    color: color ?? DEFAULT_ICON_COLOR
+  };
+}
+
+export function useHeaderIconSettings(
+  initialSettings?: HeaderIconSettings
+): HeaderIconSettings {
+  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 { data: themeConfigData } = useGetWidgetQuery(THEME_CONFIG_SLUG, {
+    skip: !isDesignerChecked || isDesigner
+  });
+
+  const widgetData = useNativeWidgetData({
+    widgetSlug: HEADER_ICONS_WIDGET_SLUG,
+    sectionId: HEADER_ICONS_SECTION_ID,
+    skip: !isDesignerChecked || isDesigner,
+    blockMeta: BLOCK_META
+  });
+
+  const [settings, setSettings] = useState<HeaderIconSettings>(
+    initialSettings || defaultSettings
+  );
+  const hasInitialSettings = !!initialSettings;
+
+  useEffect(() => {
+    if (!isDesignerChecked) return;
+    if (isDesigner) return;
+    if (hasInitialSettings) return;
+    if (widgetData.isLoading && !themeConfigData) return;
+
+    let newSettings = { ...defaultSettings };
+
+    if (themeConfigData?.attributes?.theme_settings?.value) {
+      try {
+        const themeSettings: ThemeSettings = JSON.parse(
+          themeConfigData.attributes.theme_settings.value
+        );
+        newSettings = parseHeaderIconSettings(themeSettings);
+      } catch {
+        // ignore
+      }
+    }
+
+    Object.keys(BLOCK_IDS).forEach((key) => {
+      const blockId = BLOCK_IDS[key as keyof typeof BLOCK_IDS];
+      const block = widgetData.getBlock(blockId);
+      const parsed = parseBlockStyles(block);
+
+      if (parsed) {
+        newSettings[key as keyof HeaderIconSettings] = parsed;
+      }
+    });
+
+    setSettings(newSettings);
+  }, [
+    themeConfigData,
+    widgetData,
+    isDesignerChecked,
+    isDesigner,
+    hasInitialSettings
+  ]);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      const { type, data } = event.data || {};
+
+      if (type === 'UPDATE_THEME_SETTINGS' && data?.settings?.headerIcons) {
+        setSettings(parseHeaderIconSettings(data.settings));
+        return;
+      }
+
+      if (
+        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
+        data?.theme?.placeholders
+      ) {
+        const placeholder = data.theme.placeholders?.find(
+          (p: { slug: string }) => p.slug === HEADER_PLACEHOLDER_ID
+        );
+
+        const headerIconsSection = placeholder?.sections?.find(
+          (s: { id: string }) => s.id === HEADER_ICONS_SECTION_ID
+        );
+
+        if (headerIconsSection?.blocks) {
+          const blocks = headerIconsSection.blocks;
+
+          setSettings((prev) => {
+            const newSettings = { ...prev };
+            let hasUpdates = false;
+
+            Object.keys(BLOCK_IDS).forEach((key) => {
+              const blockId = BLOCK_IDS[key as keyof typeof BLOCK_IDS];
+              const block = blocks.find(
+                (b: { id: string }) => b.id === blockId
+              );
+              const parsed = parseBlockStyles(block);
+
+              if (parsed) {
+                newSettings[key as keyof HeaderIconSettings] = parsed;
+                hasUpdates = true;
+              }
+            });
+
+            return hasUpdates ? newSettings : prev;
+          });
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  return settings;
+}
+
+export { DEFAULT_ICON_SIZE, DEFAULT_ICON_COLOR };
+export type { IconSettings, HeaderIconSettings };

package/app-template/src/views/header/use-header-logo.ts

@@ -0,0 +1,213 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { useNativeWidgetData } from '@akinon/next/components/theme-editor/hooks/use-native-widget-data';
+import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
+
+const THEME_CONFIG_SLUG = 'theme-config';
+const HEADER_LOGO_WIDGET_SLUG = 'header-logo-settings-2';
+const HEADER_PLACEHOLDER_ID = 'header';
+const HEADER_LOGO_SECTION_ID = 'header-logo';
+const HEADER_LOGO_BLOCK_ID = 'header-logo-image';
+
+const DEFAULT_LOGO_SRC = '/logo.svg';
+const DEFAULT_LOGO_WIDTH = 120;
+const DEFAULT_LOGO_HEIGHT = 40;
+
+const BLOCK_META = [
+  { id: HEADER_LOGO_BLOCK_ID, type: 'image', label: 'Logo Image' }
+];
+
+interface LogoSettings {
+  src: string;
+  width: number | string;
+  height: number | string;
+  maxWidth?: string;
+  maxHeight?: string;
+  objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+}
+
+const defaultSettings: LogoSettings = {
+  src: DEFAULT_LOGO_SRC,
+  width: DEFAULT_LOGO_WIDTH,
+  height: DEFAULT_LOGO_HEIGHT,
+  objectFit: 'contain'
+};
+
+function parseThemeConfigLogo(themeSettings?: {
+  logo?: string;
+}): Partial<LogoSettings> {
+  if (!themeSettings?.logo) {
+    return {};
+  }
+  return { src: themeSettings.logo };
+}
+
+function parseBlockStyles(
+  block: { styles?: Record<string, unknown>; value?: unknown } | undefined
+): Partial<LogoSettings> {
+  if (!block) return {};
+
+  const result: Partial<LogoSettings> = {};
+
+  if (block.value) {
+    const value =
+      typeof block.value === 'object'
+        ? (block.value as { desktop?: string }).desktop
+        : block.value;
+    if (value) {
+      result.src = value as string;
+    }
+  }
+
+  if (block.styles) {
+    const styles = block.styles;
+
+    if (styles.width) {
+      const width =
+        typeof styles.width === 'object'
+          ? (styles.width as { desktop: string | number }).desktop
+          : styles.width;
+      result.width = width as string | number;
+    }
+
+    if (styles.height) {
+      const height =
+        typeof styles.height === 'object'
+          ? (styles.height as { desktop: string | number }).desktop
+          : styles.height;
+      result.height = height as string | number;
+    }
+
+    if (styles.maxWidth || styles['max-width']) {
+      const maxWidth = (styles.maxWidth || styles['max-width']) as
+        | string
+        | { desktop: string };
+      result.maxWidth =
+        typeof maxWidth === 'object' ? maxWidth.desktop : maxWidth;
+    }
+
+    if (styles.maxHeight || styles['max-height']) {
+      const maxHeight = (styles.maxHeight || styles['max-height']) as
+        | string
+        | { desktop: string };
+      result.maxHeight =
+        typeof maxHeight === 'object' ? maxHeight.desktop : maxHeight;
+    }
+
+    if (styles.objectFit || styles['object-fit']) {
+      const objectFit = (styles.objectFit || styles['object-fit']) as
+        | string
+        | { desktop: string };
+      result.objectFit = (
+        typeof objectFit === 'object' ? objectFit.desktop : objectFit
+      ) as LogoSettings['objectFit'];
+    }
+  }
+
+  return result;
+}
+
+export function useHeaderLogoSettings(
+  initialSettings?: LogoSettings
+): LogoSettings {
+  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 { data: themeConfigData } = useGetWidgetQuery(THEME_CONFIG_SLUG, {
+    skip: !isDesignerChecked || isDesigner
+  });
+
+  const widgetData = useNativeWidgetData({
+    widgetSlug: HEADER_LOGO_WIDGET_SLUG,
+    sectionId: HEADER_LOGO_SECTION_ID,
+    skip: !isDesignerChecked || isDesigner,
+    blockMeta: BLOCK_META
+  });
+
+  const [settings, setSettings] = useState<LogoSettings>(
+    initialSettings || defaultSettings
+  );
+  const hasInitialSettings = !!initialSettings;
+
+  useEffect(() => {
+    if (!isDesignerChecked) return;
+    if (isDesigner) return;
+    if (hasInitialSettings) return;
+    if (widgetData.isLoading && !themeConfigData) return;
+
+    let newSettings = { ...defaultSettings };
+
+    if (themeConfigData?.attributes?.theme_settings?.value) {
+      try {
+        const themeSettings = JSON.parse(
+          themeConfigData.attributes.theme_settings.value
+        );
+        const themeConfigLogo = parseThemeConfigLogo(themeSettings);
+        newSettings = { ...newSettings, ...themeConfigLogo };
+      } catch {
+        // ignore
+      }
+    }
+
+    const block = widgetData.getBlock(HEADER_LOGO_BLOCK_ID);
+    if (block) {
+      const parsed = parseBlockStyles(block);
+      newSettings = { ...newSettings, ...parsed };
+    }
+
+    setSettings(newSettings);
+  }, [
+    themeConfigData,
+    widgetData,
+    isDesignerChecked,
+    isDesigner,
+    hasInitialSettings
+  ]);
+
+  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: { slug: string }) => p.slug === HEADER_PLACEHOLDER_ID
+        );
+
+        const headerLogoSection = placeholder?.sections?.find(
+          (s: { id: string }) => s.id === HEADER_LOGO_SECTION_ID
+        );
+
+        if (headerLogoSection?.blocks) {
+          const block = headerLogoSection.blocks.find(
+            (b: { id: string }) => b.id === HEADER_LOGO_BLOCK_ID
+          );
+          const parsed = parseBlockStyles(block);
+
+          if (Object.keys(parsed).length > 0) {
+            setSettings((prev) => ({ ...prev, ...parsed }));
+          }
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  return settings;
+}
+
+export { DEFAULT_LOGO_SRC, DEFAULT_LOGO_WIDTH, DEFAULT_LOGO_HEIGHT };
+export type { LogoSettings };

package/app-template/src/views/header/use-navbar-menu.ts

@@ -0,0 +1,179 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { useNativeWidgetData } from '@akinon/next/components/theme-editor/hooks/use-native-widget-data';
+
+const NAVBAR_MENU_WIDGET_SLUG = 'header-nav-settings-2';
+const HEADER_PLACEHOLDER_ID = 'header';
+const NAVBAR_MENU_SECTION_ID = 'header-nav';
+const NAVBAR_MENU_BLOCK_ID = 'header-nav-menu-item';
+
+const DEFAULT_FONT_SIZE = '14px';
+const DEFAULT_COLOR = 'currentColor';
+const DEFAULT_HOVER_COLOR = '';
+const DEFAULT_FONT_WEIGHT = '400';
+
+const BLOCK_META = [
+  { id: NAVBAR_MENU_BLOCK_ID, type: 'text', label: 'Menu Items' }
+];
+
+export interface NavbarMenuSettings {
+  fontSize: string;
+  color: string;
+  hoverColor: string;
+  fontWeight: string;
+  textTransform?: string;
+  letterSpacing?: string;
+}
+
+const defaultSettings: NavbarMenuSettings = {
+  fontSize: DEFAULT_FONT_SIZE,
+  color: DEFAULT_COLOR,
+  hoverColor: DEFAULT_HOVER_COLOR,
+  fontWeight: DEFAULT_FONT_WEIGHT
+};
+
+function parseBlockStyles(
+  blockData:
+    | { styles?: Record<string, unknown>; properties?: Record<string, unknown> }
+    | undefined
+): Partial<NavbarMenuSettings> {
+  if (!blockData) return {};
+
+  const styles = blockData.styles || {};
+  const result: Partial<NavbarMenuSettings> = {};
+
+  if (styles.fontSize || styles['font-size']) {
+    const fontSize = (styles.fontSize || styles['font-size']) as
+      | string
+      | { desktop: string };
+    result.fontSize =
+      typeof fontSize === 'object' ? fontSize.desktop : fontSize;
+  }
+
+  if (styles.color) {
+    const color = styles.color as string | { desktop: string };
+    result.color = typeof color === 'object' ? color.desktop : color;
+  }
+
+  if (styles.hoverColor || styles['hover-color']) {
+    const hoverColor = (styles.hoverColor || styles['hover-color']) as
+      | string
+      | { desktop: string };
+    result.hoverColor =
+      typeof hoverColor === 'object' ? hoverColor.desktop : hoverColor;
+  }
+
+  if (styles.fontWeight || styles['font-weight']) {
+    const fontWeight = (styles.fontWeight || styles['font-weight']) as
+      | string
+      | { desktop: string };
+    result.fontWeight =
+      typeof fontWeight === 'object' ? fontWeight.desktop : fontWeight;
+  }
+
+  if (styles.textTransform || styles['text-transform']) {
+    const textTransform = (styles.textTransform || styles['text-transform']) as
+      | string
+      | { desktop: string };
+    result.textTransform =
+      typeof textTransform === 'object' ? textTransform.desktop : textTransform;
+  }
+
+  if (styles.letterSpacing || styles['letter-spacing']) {
+    const letterSpacing = (styles.letterSpacing || styles['letter-spacing']) as
+      | string
+      | { desktop: string };
+    result.letterSpacing =
+      typeof letterSpacing === 'object' ? letterSpacing.desktop : letterSpacing;
+  }
+
+  return result;
+}
+
+export function useNavbarMenuSettings(
+  initialSettings?: NavbarMenuSettings
+): NavbarMenuSettings {
+  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 widgetData = useNativeWidgetData({
+    widgetSlug: NAVBAR_MENU_WIDGET_SLUG,
+    sectionId: NAVBAR_MENU_SECTION_ID,
+    skip: !isDesignerChecked || isDesigner,
+    blockMeta: BLOCK_META
+  });
+
+  const [settings, setSettings] = useState<NavbarMenuSettings>(
+    initialSettings || defaultSettings
+  );
+  const hasInitialSettings = !!initialSettings;
+
+  useEffect(() => {
+    if (!isDesignerChecked) return;
+    if (isDesigner) return;
+    if (hasInitialSettings) return;
+    if (widgetData.isLoading) return;
+
+    const block = widgetData.getBlock(NAVBAR_MENU_BLOCK_ID);
+    if (block) {
+      const parsed = parseBlockStyles(block);
+      if (Object.keys(parsed).length > 0) {
+        setSettings((prev) => ({ ...prev, ...parsed }));
+      }
+    }
+  }, [widgetData, isDesignerChecked, isDesigner, hasInitialSettings]);
+
+  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: { slug: string }) => p.slug === HEADER_PLACEHOLDER_ID
+        );
+
+        const navSection = placeholder?.sections?.find(
+          (s: { id: string }) => s.id === NAVBAR_MENU_SECTION_ID
+        );
+
+        if (navSection?.blocks) {
+          const block = navSection.blocks.find(
+            (b: { id: string }) => b.id === NAVBAR_MENU_BLOCK_ID
+          );
+
+          if (block) {
+            const parsed = parseBlockStyles(block);
+            if (Object.keys(parsed).length > 0) {
+              setSettings((prev) => ({ ...prev, ...parsed }));
+            }
+          }
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  return settings;
+}
+
+export { defaultSettings as defaultNavbarMenuSettings };
+export {
+  DEFAULT_FONT_SIZE,
+  DEFAULT_COLOR,
+  DEFAULT_HOVER_COLOR,
+  DEFAULT_FONT_WEIGHT
+};