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

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

@@ -1,261 +0,0 @@
-'use client';
-
-/**
- * Header Designer Context
- *
- * Provides a lightweight native-widget bridge so Theme Editor can
- * select header blocks without rewriting the header as a widget.
- */
-
-import {
-  createContext,
-  PropsWithChildren,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
-import { useExternalDesigner } from '@akinon/next/components/theme-editor/hooks/use-external-designer';
-
-type BlockDefinition = {
-  id: string;
-  type: string;
-  label: string;
-  properties?: Record<string, unknown>;
-};
-
-type ThemeBlock = {
-  id: string;
-  type: string;
-  label: string;
-  styles?: Record<string, unknown>;
-  properties?: Record<string, unknown>;
-};
-
-type ThemeSection = {
-  id: string;
-  blocks?: ThemeBlock[];
-};
-
-type ThemePlaceholder = {
-  slug: string;
-  sections?: ThemeSection[];
-};
-
-interface HeaderDesignerContextValue {
-  isDesigner: boolean;
-  selectedSectionId: string | null;
-  selectedBlockId: string | null;
-  getBlockStyles: (blockId: string) => Record<string, unknown> | undefined;
-  getBlockProperties: (blockId: string) => Record<string, unknown> | undefined;
-}
-
-export const HEADER_PLACEHOLDER_ID = 'header';
-export const HEADER_SECTION_ID = 'header-structure';
-
-// Block definitions used by WithDesignerFeatures wrappers
-const headerBlocks = {
-  CONTAINER: {
-    id: 'header-container',
-    type: 'group',
-    label: 'Header Container'
-  },
-  LOGO: {
-    id: 'header-logo-image',
-    type: 'image',
-    label: 'Logo'
-  },
-  NAVBAR: {
-    id: 'header-navbar',
-    type: 'group',
-    label: 'Navigation Bar'
-  },
-  NAV_ITEM: {
-    id: 'header-nav-menu-item',
-    type: 'text',
-    label: 'Navigation Item'
-  },
-  SEARCH: {
-    id: 'header-icon-search',
-    type: 'icon-button',
-    label: 'Search Icon',
-    properties: {
-      icon: 'search',
-      iconSize: '20'
-    }
-  },
-  USER_MENU: {
-    id: 'header-icon-profile',
-    type: 'icon-button',
-    label: 'Profile Icon',
-    properties: {
-      icon: 'person',
-      iconSize: '20'
-    }
-  },
-  MINI_BASKET: {
-    id: 'header-icon-cart',
-    type: 'icon-button',
-    label: 'Cart Icon',
-    properties: {
-      icon: 'cart',
-      iconSize: '20'
-    }
-  },
-  MOBILE_MENU_BUTTON: {
-    id: 'header-mobile-menu-button',
-    type: 'icon-button',
-    label: 'Mobile Menu Button',
-    properties: {
-      icon: 'hamburger',
-      iconSize: '18'
-    }
-  }
-} satisfies Record<string, BlockDefinition>;
-
-export const HEADER_BLOCKS = headerBlocks;
-
-type HeaderBlockDefinition =
-  (typeof HEADER_BLOCKS)[keyof typeof HEADER_BLOCKS];
-type HeaderBlockId = HeaderBlockDefinition['id'];
-
-const blockLookup = new Map<HeaderBlockId, BlockDefinition>(
-  Object.values(HEADER_BLOCKS).map((block) => [block.id, block as BlockDefinition])
-);
-
-const HeaderDesignerContext = createContext<HeaderDesignerContextValue>({
-  isDesigner: false,
-  selectedSectionId: null,
-  selectedBlockId: null,
-  getBlockStyles: () => undefined,
-  getBlockProperties: () => undefined
-});
-
-export function HeaderDesignerProvider({
-  children
-}: PropsWithChildren) {
-  const designerState = useExternalDesigner({
-    placeholderId: HEADER_PLACEHOLDER_ID
-  });
-
-  const [themeBlocks, setThemeBlocks] = useState<Map<string, ThemeBlock>>(
-    new Map()
-  );
-  const themeBlocksRef = useRef<Map<string, ThemeBlock>>(new Map());
-
-  const registerNativeWidget = useCallback(() => {
-    if (typeof window === 'undefined') return;
-    const isInIframe = window.self !== window.top;
-    if (!isInIframe || !window.parent) return;
-
-    const sectionBlocks = Object.values(HEADER_BLOCKS).map((blockDef) => {
-      const block = blockDef as BlockDefinition;
-      const storedBlock = themeBlocksRef.current.get(block.id);
-      return {
-        id: block.id,
-        type: block.type,
-        label: block.label,
-        properties: storedBlock?.properties ?? block.properties ?? {},
-        styles: storedBlock?.styles ?? {}
-      };
-    });
-
-    window.parent.postMessage(
-      {
-        type: 'REGISTER_NATIVE_WIDGETS',
-        data: {
-          widgets: [
-            {
-              placeholderId: HEADER_PLACEHOLDER_ID,
-              section: {
-                id: HEADER_SECTION_ID,
-                type: 'native',
-                label: 'Header Layout',
-                blocks: sectionBlocks
-              }
-            }
-          ]
-        }
-      },
-      '*'
-    );
-  }, []);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    registerNativeWidget();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // Only register once
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const handleMessage = (event: MessageEvent) => {
-      const { type, data } = event.data || {};
-
-      if (
-        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
-        data?.theme?.placeholders
-      ) {
-        const placeholder = (data.theme.placeholders as ThemePlaceholder[]).find(
-          (p) => p.slug === HEADER_PLACEHOLDER_ID
-        );
-
-        const headerSection = placeholder?.sections?.find(
-          (section) => section.id === HEADER_SECTION_ID
-        );
-
-        if (headerSection?.blocks) {
-          const incoming = new Map<string, ThemeBlock>();
-          headerSection.blocks.forEach((block) => {
-            incoming.set(block.id, block);
-          });
-
-          const merged = new Map(themeBlocksRef.current);
-          incoming.forEach((block, id) => {
-            merged.set(id, block);
-          });
-
-          themeBlocksRef.current = merged;
-          setThemeBlocks(merged);
-        }
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  }, []);
-
-  const getBlockStyles = useCallback(
-    (blockId: string) => {
-      return themeBlocks.get(blockId)?.styles;
-    },
-    [themeBlocks]
-  );
-
-  const getBlockProperties = useCallback(
-    (blockId: string) => {
-      const block = themeBlocks.get(blockId);
-      if (block?.properties) {
-        return block.properties;
-      }
-      return blockLookup.get(blockId as HeaderBlockId)?.properties;
-    },
-    [themeBlocks]
-  );
-
-  return (
-    <HeaderDesignerContext.Provider
-      value={{
-        ...designerState,
-        getBlockStyles,
-        getBlockProperties
-      }}
-    >
-      {children}
-    </HeaderDesignerContext.Provider>
-  );
-}
-
-export const useHeaderDesigner = () => useContext(HeaderDesignerContext);

package/app-template/src/views/header/header-announcement-registrar.tsx

@@ -1,267 +0,0 @@
-'use client';
-
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-  PropsWithChildren
-} from 'react';
-
-export const HEADER_ANNOUNCEMENT_PLACEHOLDER_ID = 'header';
-export const HEADER_ANNOUNCEMENT_SECTION_ID = 'header-announcement-bar';
-
-declare global {
-  interface Window {
-    __headerAnnouncementRegistered?: boolean;
-  }
-}
-
-interface ThemeSection {
-  id: string;
-  visible?: boolean;
-  properties?: Record<string, unknown>;
-  styles?: Record<string, unknown>;
-}
-
-interface ThemePlaceholder {
-  slug: string;
-  sections: ThemeSection[];
-}
-
-export interface HeaderAnnouncementProperties {
-  visible?: boolean;
-  text?: string | Record<string, string>;
-  link?: string | Record<string, string>;
-  target?: string | Record<string, string>;
-}
-
-interface HeaderAnnouncementContextValue {
-  isDesigner: boolean;
-  isAnnouncementSectionSelected: boolean;
-  isSectionVisible: boolean;
-  properties: HeaderAnnouncementProperties;
-  sectionStyles: Record<string, unknown>;
-}
-
-const HeaderAnnouncementContext = createContext<HeaderAnnouncementContextValue>({
-  isDesigner: false,
-  isAnnouncementSectionSelected: false,
-  isSectionVisible: false,
-  properties: {},
-  sectionStyles: {}
-});
-
-export const useHeaderAnnouncement = () => useContext(HeaderAnnouncementContext);
-
-interface HeaderAnnouncementRegistrarProps extends PropsWithChildren {
-  initialSettings?: {
-    sectionStyles?: Record<string, unknown>;
-    properties?: HeaderAnnouncementProperties;
-  };
-}
-
-export default function HeaderAnnouncementRegistrar({
-  children,
-  initialSettings = {}
-}: HeaderAnnouncementRegistrarProps) {
-  const isDesignerRef = useRef(false);
-  const [sectionProperties, setSectionProperties] =
-    useState<HeaderAnnouncementProperties>(
-      initialSettings.properties
-        ? initialSettings.properties
-        : {
-            text: '₺1500 üzeri siparişlerde ücretsiz kargo 🚚',
-            visible: true
-          }
-    );
-  const [sectionStyles, setSectionStyles] = useState<Record<string, unknown>>(
-    initialSettings.sectionStyles || {
-      'background-color': '#111827',
-      color: '#ffffff',
-      'padding-top': '10px',
-      'padding-bottom': '10px',
-      'text-align': 'center',
-      'font-size': '14px'
-    }
-  );
-  const [isAnnouncementSelected, setIsAnnouncementSelected] = useState(false);
-  const [isSectionVisible, setIsSectionVisible] = useState(
-    initialSettings.properties?.visible ?? true
-  );
-  const hasRegisteredNativeWidget = useRef(false);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    isDesignerRef.current = window.self !== window.top;
-  }, []);
-
-  const isDesigner = isDesignerRef.current;
-
-  useEffect(() => {
-    const isInIframe =
-      typeof window !== 'undefined' && window.self !== window.top;
-    if (!isInIframe || !window.parent) {
-      return;
-    }
-
-    if (
-      typeof window !== 'undefined' &&
-      window.__headerAnnouncementRegistered &&
-      hasRegisteredNativeWidget.current
-    ) {
-      return;
-    }
-
-    const nativeWidgetConfig = {
-      placeholderId: HEADER_ANNOUNCEMENT_PLACEHOLDER_ID,
-      autoAdd: false,
-      section: {
-        id: HEADER_ANNOUNCEMENT_SECTION_ID,
-        type: 'native',
-        label: 'Announcement Bar',
-        blocks: [],
-        properties:
-          initialSettings.properties || {
-            text: '₺1500 üzeri siparişlerde ücretsiz kargo 🚚',
-            link: '',
-            target: '_self',
-            visible: true
-          },
-        styles:
-          initialSettings.sectionStyles || {
-            'background-color': '#111827',
-            color: '#ffffff',
-            'font-size': '13px',
-            'font-weight': '500',
-            'text-align': 'center',
-            'padding-top': '8px',
-            'padding-bottom': '8px',
-            'padding-left': '12px',
-            'padding-right': '12px'
-          }
-      }
-    };
-
-    window.parent.postMessage(
-      {
-        type: 'REGISTER_NATIVE_WIDGETS',
-        data: { widgets: [nativeWidgetConfig] }
-      },
-      '*'
-    );
-
-    window.__headerAnnouncementRegistered = true;
-    hasRegisteredNativeWidget.current = true;
-  }, [initialSettings.properties, initialSettings.sectionStyles]);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    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_ANNOUNCEMENT_PLACEHOLDER_ID
-        );
-
-        const section = placeholder?.sections?.find(
-          (s: ThemeSection) => s.id === HEADER_ANNOUNCEMENT_SECTION_ID
-        );
-
-        if (section) {
-          const visibleValue = section.properties?.visible;
-          const isVisible =
-            typeof visibleValue === 'boolean'
-              ? visibleValue
-              : (visibleValue as Record<string, boolean>)?.desktop === true ||
-                (visibleValue as Record<string, boolean>)?.mobile === true ||
-                typeof section.visible === 'boolean'
-              ? Boolean(section.visible ?? true)
-              : true;
-
-          setIsSectionVisible(isVisible);
-
-          if (section.properties) {
-            setSectionProperties(section.properties as HeaderAnnouncementProperties);
-          }
-
-          if (section.styles) {
-            setSectionStyles(section.styles);
-          }
-        } else if (placeholder) {
-          setIsSectionVisible(false);
-        }
-      }
-
-      if (type === 'UPDATE_SECTION_PROPERTY' || type === 'UPDATE_PROPERTY') {
-        const { sectionId, key, value, properties } = data || {};
-        if (sectionId === HEADER_ANNOUNCEMENT_SECTION_ID) {
-          if (key && value !== undefined) {
-            setSectionProperties((prev) => ({ ...prev, [key]: value }));
-          }
-          if (properties) {
-            setSectionProperties(properties as HeaderAnnouncementProperties);
-          }
-        }
-      }
-
-      if (type === 'UPDATE_SECTION_STYLE' || type === 'UPDATE_STYLE') {
-        const { sectionId, key, value, styles } = data || {};
-        if (sectionId === HEADER_ANNOUNCEMENT_SECTION_ID) {
-          if (key && value !== undefined) {
-            setSectionStyles((prev) => ({ ...prev, [key]: value }));
-          }
-          if (styles) {
-            setSectionStyles(styles);
-          }
-        }
-      }
-
-      if (type === 'SELECT_SECTION') {
-        const { placeholderId, sectionId } = data || {};
-        setIsAnnouncementSelected(
-          placeholderId === HEADER_ANNOUNCEMENT_PLACEHOLDER_ID &&
-            sectionId === HEADER_ANNOUNCEMENT_SECTION_ID
-        );
-      }
-
-      if (type === 'DESELECT' || type === 'CLEAR_SELECTION') {
-        setIsAnnouncementSelected(false);
-      }
-
-      if (type === 'TOGGLE_SECTION_VISIBILITY') {
-        const { sectionId } = data || {};
-        if (sectionId === HEADER_ANNOUNCEMENT_SECTION_ID) {
-          setIsSectionVisible((prev) => !prev);
-        }
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  }, []);
-
-  if (!children) {
-    return null;
-  }
-
-  return (
-    <HeaderAnnouncementContext.Provider
-      value={{
-        isDesigner,
-        isAnnouncementSectionSelected: isAnnouncementSelected,
-        isSectionVisible,
-        properties: sectionProperties,
-        sectionStyles
-      }}
-    >
-      {children}
-    </HeaderAnnouncementContext.Provider>
-  );
-}