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

package/app-template/src/views/footer/footer-native-widgets.tsx

@@ -1,60 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import type { FooterNativeWidgetSection, FooterNativeWidgetBlock } from './native-widget-config';
-
-interface FooterNativeWidgetsProps {
-  sections: FooterNativeWidgetSection[];
-}
-
-interface MappedBlock {
-  id: string;
-  type: string;
-  label: string;
-  styles?: Record<string, unknown>;
-  properties?: Record<string, unknown>;
-  value?: unknown;
-  blocks?: MappedBlock[];
-}
-
-const mapBlock = (block: FooterNativeWidgetBlock): MappedBlock => ({
-  id: block.id,
-  type: block.type,
-  label: block.label,
-  styles: block.styles,
-  properties: block.properties,
-  value: block.value,
-  blocks: block.blocks?.map(mapBlock)
-});
-
-export default function FooterNativeWidgets({
-  sections
-}: FooterNativeWidgetsProps) {
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    const isInIframe = window.self !== window.top;
-    if (!isInIframe || !window.parent || !sections.length) {
-      return;
-    }
-
-    const widgets = sections.map((section) => ({
-      placeholderId: section.placeholderId,
-      section: {
-        id: section.sectionId,
-        type: 'native',
-        label: section.label,
-        blocks: section.blocks.map(mapBlock)
-      }
-    }));
-
-    window.parent.postMessage(
-      {
-        type: 'REGISTER_NATIVE_WIDGETS',
-        data: { widgets }
-      },
-      '*'
-    );
-  }, [sections]);
-
-  return null;
-}

package/app-template/src/views/footer/footer-social-context.tsx

@@ -1,254 +0,0 @@
-'use client';
-
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type PropsWithChildren
-} 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';
-
-import {
-  FOOTER_PLACEHOLDER_ID,
-  FOOTER_SOCIAL_SECTION_ID,
-  FOOTER_SOCIAL_WIDGET_SLUG,
-  FOOTER_SOCIAL_ICONS_BLOCK_ID,
-  type FooterNativeWidgetBlock
-} from './native-widget-config';
-
-export { FOOTER_SOCIAL_ICONS_BLOCK_ID };
-
-type FooterSocialBlockState = FooterNativeWidgetBlock;
-
-interface FooterSocialContextValue {
-  isDesigner: boolean;
-  selectedBlockId: string | null;
-  getBlock: (blockId: string) => FooterSocialBlockState | undefined;
-  blockVersion: number;
-}
-
-const FooterSocialContext = createContext<FooterSocialContextValue>({
-  isDesigner: false,
-  selectedBlockId: null,
-  getBlock: () => undefined,
-  blockVersion: 0
-});
-
-const BLOCK_META = [
-  {
-    id: FOOTER_SOCIAL_ICONS_BLOCK_ID,
-    type: 'social-icons-list',
-    label: 'Social Icons'
-  }
-];
-
-const toBlockState = (
-  block: Partial<FooterNativeWidgetBlock>
-): FooterSocialBlockState => {
-  const fallback = BLOCK_META.find((meta) => meta.id === block.id);
-  return {
-    id: block.id ?? fallback?.id ?? '',
-    type: block.type ?? fallback?.type,
-    label: block.label ?? fallback?.label,
-    styles: block.styles,
-    properties: block.properties,
-    value: block.value
-  } as FooterSocialBlockState;
-};
-
-const mapFromSnapshot = (
-  blocks?: FooterNativeWidgetBlock[],
-  defaultIcons?: SocialIconItem[]
-): Map<string, FooterSocialBlockState> => {
-  const map = new Map<string, FooterSocialBlockState>();
-  blocks?.forEach((block) => {
-    map.set(block.id, toBlockState(block));
-  });
-
-  BLOCK_META.forEach((meta) => {
-    if (!map.has(meta.id)) {
-      const defaultProperties =
-        meta.id === FOOTER_SOCIAL_ICONS_BLOCK_ID && defaultIcons?.length
-          ? { icons: defaultIcons }
-          : undefined;
-
-      map.set(
-        meta.id,
-        toBlockState({
-          ...meta,
-          properties: defaultProperties
-        })
-      );
-    } else if (
-      meta.id === FOOTER_SOCIAL_ICONS_BLOCK_ID &&
-      defaultIcons?.length
-    ) {
-      const existing = map.get(meta.id);
-      const existingIcons = (existing?.properties as any)?.icons;
-      if (
-        !existingIcons ||
-        (Array.isArray(existingIcons) && existingIcons.length === 0)
-      ) {
-        map.set(
-          meta.id,
-          toBlockState({
-            ...existing,
-            properties: { ...existing?.properties, icons: defaultIcons }
-          })
-        );
-      }
-    }
-  });
-
-  return map;
-};
-
-export interface SocialIconItem {
-  icon: string;
-  link: string;
-  size?: number;
-  color?: string;
-}
-
-interface FooterSocialProviderProps {
-  initialBlocks?: FooterNativeWidgetBlock[];
-  defaultIcons?: SocialIconItem[];
-}
-
-export function FooterSocialProvider({
-  initialBlocks,
-  defaultIcons,
-  children
-}: PropsWithChildren<FooterSocialProviderProps>) {
-  const designerState = useExternalDesigner({
-    placeholderId: FOOTER_PLACEHOLDER_ID
-  });
-
-  const [blockMap, setBlockMap] = useState(() =>
-    mapFromSnapshot(initialBlocks, defaultIcons)
-  );
-  const blockMapRef = useRef(blockMap);
-  const [blockVersion, setBlockVersion] = useState(0);
-
-  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: FOOTER_SOCIAL_WIDGET_SLUG,
-    sectionId: FOOTER_SOCIAL_SECTION_ID,
-    skip: !isDesignerChecked || isDesigner,
-    blockMeta: BLOCK_META
-  });
-
-  const mergeBlocks = useCallback(
-    (blocks: Partial<FooterNativeWidgetBlock>[] | undefined) => {
-      if (!blocks?.length) return;
-
-      setBlockMap((prev) => {
-        const next = new Map(prev);
-        blocks.forEach((block) => {
-          if (!block.id) return;
-          const existing = next.get(block.id);
-
-          next.set(
-            block.id,
-            toBlockState({
-              ...existing,
-              ...block,
-              styles:
-                block.styles && Object.keys(block.styles).length > 0
-                  ? block.styles
-                  : existing?.styles,
-              properties:
-                block.properties && Object.keys(block.properties).length > 0
-                  ? block.properties
-                  : existing?.properties,
-              value: block.value !== undefined ? block.value : existing?.value
-            })
-          );
-        });
-        blockMapRef.current = next;
-        return next;
-      });
-      setBlockVersion((prev) => prev + 1);
-    },
-    []
-  );
-
-  useEffect(() => {
-    if (!isDesignerChecked || isDesigner || widgetData.isLoading) return;
-
-    const blocksToMerge: Partial<FooterNativeWidgetBlock>[] = [];
-    widgetData.blocks.forEach((block) => {
-      blocksToMerge.push(block as FooterNativeWidgetBlock);
-    });
-
-    if (blocksToMerge.length > 0) {
-      mergeBlocks(blocksToMerge);
-    }
-  }, [
-    isDesigner,
-    isDesignerChecked,
-    widgetData.isLoading,
-    widgetData.blocks,
-    mergeBlocks
-  ]);
-
-  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 === FOOTER_PLACEHOLDER_ID
-        );
-        const section = placeholder?.sections?.find(
-          (s: { id: string }) => s.id === FOOTER_SOCIAL_SECTION_ID
-        );
-        mergeBlocks(section?.blocks);
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  }, [mergeBlocks]);
-
-  const getBlock = useCallback(
-    (blockId: string) => blockMapRef.current.get(blockId),
-    []
-  );
-
-  const contextValue = useMemo(
-    () => ({
-      ...designerState,
-      getBlock,
-      blockVersion
-    }),
-    [designerState, getBlock, blockVersion]
-  );
-
-  return (
-    <FooterSocialContext.Provider value={contextValue}>
-      {children}
-    </FooterSocialContext.Provider>
-  );
-}
-
-export function useFooterSocialDesigner() {
-  return useContext(FooterSocialContext);
-}

package/app-template/src/views/footer/footer-subscription-context.tsx

@@ -1,210 +0,0 @@
-'use client';
-
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type PropsWithChildren
-} 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';
-
-import {
-  FOOTER_PLACEHOLDER_ID,
-  FOOTER_SUBSCRIPTION_SECTION_ID,
-  FOOTER_SUBSCRIPTION_WIDGET_SLUG,
-  type FooterNativeWidgetBlock
-} from './native-widget-config';
-import {
-  FOOTER_SUBSCRIPTION_BLOCKS,
-  type FooterSubscriptionBlockSnapshot
-} from './subscription-settings';
-
-type FooterSubscriptionBlockState = FooterNativeWidgetBlock;
-
-interface FooterSubscriptionContextValue {
-  isDesigner: boolean;
-  selectedBlockId: string | null;
-  getBlock: (blockId: string) => FooterSubscriptionBlockState | undefined;
-  blockVersion: number;
-}
-
-const FooterSubscriptionContext = createContext<FooterSubscriptionContextValue>(
-  {
-    isDesigner: false,
-    selectedBlockId: null,
-    getBlock: () => undefined,
-    blockVersion: 0
-  }
-);
-
-const BLOCK_META = Object.values(FOOTER_SUBSCRIPTION_BLOCKS);
-
-const toBlockState = (
-  block: Partial<FooterNativeWidgetBlock>
-): FooterSubscriptionBlockState => {
-  const fallback = BLOCK_META.find((meta) => meta.id === block.id);
-  return {
-    id: block.id ?? fallback?.id ?? '',
-    type: block.type ?? fallback?.type,
-    label: block.label ?? fallback?.label,
-    styles: block.styles,
-    properties: block.properties,
-    value: block.value
-  } as FooterSubscriptionBlockState;
-};
-
-const mapFromSnapshot = (
-  blocks?: FooterSubscriptionBlockSnapshot
-): Map<string, FooterSubscriptionBlockState> => {
-  const map = new Map<string, FooterSubscriptionBlockState>();
-  blocks?.forEach((block) => {
-    map.set(block.id, toBlockState(block));
-  });
-
-  BLOCK_META.forEach((meta) => {
-    if (!map.has(meta.id)) {
-      map.set(meta.id, toBlockState(meta));
-    }
-  });
-
-  return map;
-};
-
-interface FooterSubscriptionProviderProps {
-  initialBlocks?: FooterSubscriptionBlockSnapshot;
-}
-
-export function FooterSubscriptionProvider({
-  initialBlocks,
-  children
-}: PropsWithChildren<FooterSubscriptionProviderProps>) {
-  const designerState = useExternalDesigner({
-    placeholderId: FOOTER_PLACEHOLDER_ID
-  });
-
-  const [blockMap, setBlockMap] = useState(() =>
-    mapFromSnapshot(initialBlocks)
-  );
-  const blockMapRef = useRef(blockMap);
-  const [blockVersion, setBlockVersion] = useState(0);
-
-  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: FOOTER_SUBSCRIPTION_WIDGET_SLUG,
-    sectionId: FOOTER_SUBSCRIPTION_SECTION_ID,
-    skip: !isDesignerChecked || isDesigner,
-    blockMeta: BLOCK_META
-  });
-
-  const mergeBlocks = useCallback(
-    (blocks: FooterNativeWidgetBlock[] | undefined) => {
-      if (!blocks?.length) return;
-
-      setBlockMap((prev) => {
-        const next = new Map(prev);
-        blocks.forEach((block) => {
-          const existing = next.get(block.id);
-
-          next.set(
-            block.id,
-            toBlockState({
-              ...existing,
-              ...block,
-              styles:
-                block.styles && Object.keys(block.styles).length > 0
-                  ? block.styles
-                  : existing?.styles,
-              properties:
-                block.properties && Object.keys(block.properties).length > 0
-                  ? block.properties
-                  : existing?.properties,
-              value: block.value !== undefined ? block.value : existing?.value
-            })
-          );
-        });
-        blockMapRef.current = next;
-        return next;
-      });
-      setBlockVersion((prev) => prev + 1);
-    },
-    []
-  );
-
-  useEffect(() => {
-    if (!isDesignerChecked || isDesigner || widgetData.isLoading) return;
-
-    const blocksToMerge: FooterNativeWidgetBlock[] = [];
-    widgetData.blocks.forEach((block) => {
-      blocksToMerge.push(block as FooterNativeWidgetBlock);
-    });
-
-    if (blocksToMerge.length > 0) {
-      mergeBlocks(blocksToMerge);
-    }
-  }, [
-    isDesigner,
-    isDesignerChecked,
-    widgetData.isLoading,
-    widgetData.blocks,
-    mergeBlocks
-  ]);
-
-  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 === FOOTER_PLACEHOLDER_ID
-        );
-        const section = placeholder?.sections?.find(
-          (s: { id: string }) => s.id === FOOTER_SUBSCRIPTION_SECTION_ID
-        );
-        mergeBlocks(section?.blocks);
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  }, [mergeBlocks]);
-
-  const getBlock = useCallback(
-    (blockId: string) => blockMapRef.current.get(blockId),
-    []
-  );
-
-  const contextValue = useMemo(
-    () => ({
-      ...designerState,
-      getBlock,
-      blockVersion
-    }),
-    [designerState, getBlock, blockVersion]
-  );
-
-  return (
-    <FooterSubscriptionContext.Provider value={contextValue}>
-      {children}
-    </FooterSubscriptionContext.Provider>
-  );
-}
-
-export const useFooterSubscriptionDesigner = () =>
-  useContext(FooterSubscriptionContext);

package/app-template/src/views/footer/footer-utils.ts

@@ -1,43 +0,0 @@
-/**
- * Footer Utilities
- *
- * Shared utility functions for footer components.
- */
-
-/**
- * Convert block styles to CSS properties
- */
-export function convertBlockStyles(
-  styles: Record<string, unknown>
-): React.CSSProperties {
-  const styleMap: Record<string, string | null> = {
-    'background-color': 'backgroundColor',
-    'padding-top': 'paddingTop',
-    'padding-bottom': 'paddingBottom',
-    'border-top-width': 'borderTopWidth',
-    'border-top-color': 'borderTopColor'
-  };
-
-  const result: Record<string, unknown> = {};
-
-  Object.entries(styles).forEach(([key, value]) => {
-    if (value === undefined || value === null || value === '') return;
-
-    const cssKey = styleMap[key] || key;
-    if (cssKey === null) return;
-
-    // Extract desktop value if responsive
-    if (value && typeof value === 'object' && 'desktop' in value) {
-      result[cssKey] = (value as Record<string, unknown>).desktop;
-    } else {
-      result[cssKey] = value;
-    }
-  });
-
-  // Auto-add border-style: solid if border-top-width is set
-  if (result.borderTopWidth && !result.borderTopStyle) {
-    result.borderTopStyle = 'solid';
-  }
-
-  return result as React.CSSProperties;
-}