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

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

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

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

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

package/app-template/src/views/product/accordion-section.tsx

@@ -1,61 +0,0 @@
-'use client';
-
-/**
- * Accordion Section Wrapper
- *
- * Wraps accordion components with Theme Editor styling support.
- * Applies CSS variables for customization via Theme Editor.
- */
-
-import { PropsWithChildren, CSSProperties, useMemo } from 'react';
-import clsx from 'clsx';
-import {
-  useProductDetail,
-  ACCORDION_SECTION_ID
-} from '@theme/views/product-detail';
-
-export default function AccordionSection({ children }: PropsWithChildren) {
-  const { isDesigner, selectedSectionId, accordionStyles } = useProductDetail();
-
-  const isSelected = isDesigner && selectedSectionId === ACCORDION_SECTION_ID;
-
-  const cssVariables = useMemo((): CSSProperties => {
-    if (!accordionStyles) return {};
-
-    const vars: Record<string, string> = {};
-    Object.entries(accordionStyles).forEach(([key, value]) => {
-      if (value) {
-        vars[`--accordion-${key}`] = value;
-      }
-    });
-    return vars as CSSProperties;
-  }, [accordionStyles]);
-
-  const handleClick = (e: React.MouseEvent) => {
-    if (isDesigner) {
-      e.stopPropagation();
-      window.parent?.postMessage(
-        {
-          type: 'SELECT_SECTION',
-          data: {
-            placeholderId: 'product-detail',
-            sectionId: ACCORDION_SECTION_ID
-          }
-        },
-        '*'
-      );
-    }
-  };
-
-  return (
-    <div
-      className={clsx('accordion-section-wrapper', {
-        'ring-2 ring-blue-500 ring-offset-2': isSelected
-      })}
-      style={cssVariables}
-      onClick={handleClick}
-    >
-      {children}
-    </div>
-  );
-}