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

package/app-template/src/views/header/header-text-slider-registrar.tsx

@@ -1,382 +0,0 @@
-'use client';
-
-/**
- * Header Text Slider Section Registrar
- *
- * This component registers the "Text Slider" section for the header placeholder.
- * The text slider section is a native widget that can be added via "Add Section" button.
- * It displays scrolling/sliding text messages in the utility bar.
- */
-
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-  PropsWithChildren
-} from 'react';
-
-// Constants
-export const HEADER_TEXT_SLIDER_PLACEHOLDER_ID = 'header';
-export const HEADER_TEXT_SLIDER_SECTION_ID = 'header-text-slider';
-export const HEADER_TEXT_SLIDER_WIDGET_SLUG = 'header-text-slider-settings-2';
-
-// Global flag to track if registration has been done
-declare global {
-  interface Window {
-    __headerTextSliderRegistered?: boolean;
-  }
-}
-
-/**
- * Check if running inside designer iframe
- */
-function isInDesignerMode(): boolean {
-  if (typeof window === 'undefined') return false;
-  return window.self !== window.top;
-}
-
-interface ThemeSection {
-  id: string;
-  visible?: boolean;
-  properties?: Record<string, unknown>;
-  styles?: Record<string, unknown>;
-}
-
-interface ThemePlaceholder {
-  slug: string;
-  sections: ThemeSection[];
-}
-
-export interface TextSliderItem {
-  text: string;
-  link?: string;
-}
-
-export interface HeaderTextSliderProperties {
-  visible?: boolean;
-  items?: TextSliderItem[];
-  autoPlay?: boolean;
-  autoPlayInterval?: number;
-  showArrows?: boolean;
-}
-
-interface HeaderTextSliderContextValue {
-  isDesigner: boolean;
-  isTextSliderSectionSelected: boolean;
-  isSectionVisible: boolean;
-  properties: HeaderTextSliderProperties;
-  sectionStyles: Record<string, unknown>;
-}
-
-const HeaderTextSliderContext = createContext<HeaderTextSliderContextValue>({
-  isDesigner: false,
-  isTextSliderSectionSelected: false,
-  isSectionVisible: false,
-  properties: {
-    items: [{ text: 'Welcome to our store!' }],
-    autoPlay: true,
-    autoPlayInterval: 3000,
-    showArrows: true
-  },
-  sectionStyles: {}
-});
-
-export const useHeaderTextSlider = () => useContext(HeaderTextSliderContext);
-
-interface HeaderTextSliderRegistrarProps extends PropsWithChildren {
-  /**
-   * Initial settings from server-side parsing (to avoid flash)
-   */
-  initialSettings?: {
-    sectionStyles?: Record<string, unknown>;
-    properties?: HeaderTextSliderProperties;
-  };
-}
-
-/**
- * HeaderTextSliderRegistrar
- *
- * Registers the Text Slider native section with Theme Editor.
- * The section can be added via "Add Section" button in the header placeholder.
- */
-export default function HeaderTextSliderRegistrar({
-  children,
-  initialSettings = {}
-}: HeaderTextSliderRegistrarProps) {
-  const isDesignerRef = useRef(false);
-  const [sectionProperties, setSectionProperties] =
-    useState<HeaderTextSliderProperties>(
-      initialSettings.properties || {
-        items: [{ text: 'Welcome to our store!' }],
-        autoPlay: true,
-        autoPlayInterval: 3000,
-        showArrows: true
-      }
-    );
-  const [sectionStyles, setSectionStyles] = useState<Record<string, unknown>>(
-    initialSettings.sectionStyles || {}
-  );
-  const [isTextSliderSelected, setIsTextSliderSelected] = useState(false);
-  const [isSectionVisible, setIsSectionVisible] = useState(
-    initialSettings.properties?.visible ?? false
-  );
-  const hasRegisteredNativeWidget = useRef(false);
-
-  const hasInitialSettings = !!(
-    (initialSettings.sectionStyles &&
-      Object.keys(initialSettings.sectionStyles).length > 0) ||
-    (initialSettings.properties &&
-      Object.keys(initialSettings.properties).length > 0)
-  );
-
-  useEffect(() => {
-    isDesignerRef.current = isInDesignerMode();
-  }, []);
-
-  const isDesigner = isDesignerRef.current;
-
-  // Register native widget - only once on mount
-  useEffect(() => {
-    const isInIframe =
-      typeof window !== 'undefined' && window.self !== window.top;
-    if (!isInIframe || !window.parent) {
-      return;
-    }
-
-    // Skip if already registered
-    if (
-      typeof window !== 'undefined' &&
-      window.__headerTextSliderRegistered &&
-      hasRegisteredNativeWidget.current
-    ) {
-      return;
-    }
-
-    // Send native widget registration to Theme Editor
-    // Use initial settings for registration, not dynamic state
-    const nativeWidgetConfig = {
-      placeholderId: HEADER_TEXT_SLIDER_PLACEHOLDER_ID,
-      autoAdd: false,
-      section: {
-        id: HEADER_TEXT_SLIDER_SECTION_ID,
-        type: 'native',
-        label: 'Text Slider',
-        blocks: [],
-        properties: initialSettings.properties || {
-          items: [{ text: 'Welcome to our store!' }],
-          autoPlay: true,
-          autoPlayInterval: 3000,
-          showArrows: true
-        },
-        styles: initialSettings.sectionStyles || {}
-      }
-    };
-
-    window.parent.postMessage(
-      {
-        type: 'REGISTER_NATIVE_WIDGETS',
-        data: { widgets: [nativeWidgetConfig] }
-      },
-      '*'
-    );
-
-    // Mark as registered
-    window.__headerTextSliderRegistered = true;
-    hasRegisteredNativeWidget.current = true;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Apply highlight style to text slider container when section is selected
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const textSliderContainer = document.querySelector(
-      '[data-section-id="header-text-slider"]'
-    );
-    if (!textSliderContainer) return;
-
-    if (isTextSliderSelected) {
-      (textSliderContainer as HTMLElement).style.outline = '2px solid #3b82f6';
-      (textSliderContainer as HTMLElement).style.outlineOffset = '-2px';
-    } else {
-      (textSliderContainer as HTMLElement).style.outline = '';
-      (textSliderContainer as HTMLElement).style.outlineOffset = '';
-    }
-
-    return () => {
-      (textSliderContainer as HTMLElement).style.outline = '';
-      (textSliderContainer as HTMLElement).style.outlineOffset = '';
-    };
-  }, [isTextSliderSelected]);
-
-  const hasReceivedInitialTheme = useRef(false);
-
-  // Listen for theme updates and selection changes from Theme Editor
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const handleMessage = (event: MessageEvent) => {
-      const { type, data } = event.data || {};
-
-      // Handle theme updates
-      if (
-        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
-        data?.theme?.placeholders
-      ) {
-        const placeholder = data.theme.placeholders?.find(
-          (p: ThemePlaceholder) => p.slug === HEADER_TEXT_SLIDER_PLACEHOLDER_ID
-        );
-
-        const textSliderSection = placeholder?.sections?.find(
-          (s: ThemeSection) => s.id === HEADER_TEXT_SLIDER_SECTION_ID
-        );
-
-        if (textSliderSection) {
-          const sectionVisible = textSliderSection.properties?.visible;
-          if (sectionVisible !== undefined) {
-            const isVisible =
-              typeof sectionVisible === 'boolean'
-                ? sectionVisible
-                : sectionVisible?.desktop === true ||
-                  sectionVisible?.mobile === true;
-            setIsSectionVisible(isVisible);
-          } else if (typeof textSliderSection.visible === 'boolean') {
-            setIsSectionVisible(textSliderSection.visible);
-          } else {
-            setIsSectionVisible(true);
-          }
-
-          // Skip property/style updates if we have initial settings and haven't
-          // received the first theme yet (to avoid format mismatch issues)
-          // After first theme load, we use UPDATE_SECTION_PROPERTY for changes
-          if (hasInitialSettings && !hasReceivedInitialTheme.current) {
-            hasReceivedInitialTheme.current = true;
-            // Don't apply properties/styles from UPDATE_THEME when we have server-side initial settings
-            // Individual property changes will come via UPDATE_SECTION_PROPERTY
-            return;
-          }
-
-          // Only apply updates if we don't have initial settings (fresh load)
-          if (!hasInitialSettings) {
-            if (textSliderSection.properties) {
-              setSectionProperties((prev) => {
-                const newProps =
-                  textSliderSection.properties as HeaderTextSliderProperties;
-                if (JSON.stringify(prev) === JSON.stringify(newProps)) {
-                  return prev;
-                }
-                return newProps;
-              });
-            }
-
-            if (textSliderSection.styles) {
-              setSectionStyles((prev) => {
-                if (
-                  JSON.stringify(prev) ===
-                  JSON.stringify(textSliderSection.styles)
-                ) {
-                  return prev;
-                }
-                return textSliderSection.styles;
-              });
-            }
-          }
-        } else if (placeholder) {
-          setIsSectionVisible(false);
-        }
-      }
-
-      // Handle property updates
-      if (type === 'UPDATE_SECTION_PROPERTY' || type === 'UPDATE_PROPERTY') {
-        const { sectionId, key, value, properties } = data || {};
-
-        if (sectionId === HEADER_TEXT_SLIDER_SECTION_ID) {
-          if (key && value !== undefined) {
-            setSectionProperties((prev) => ({
-              ...prev,
-              [key]: value
-            }));
-          }
-          if (properties) {
-            setSectionProperties(properties as HeaderTextSliderProperties);
-          }
-        }
-      }
-
-      // Handle style updates for the section
-      if (type === 'UPDATE_SECTION_STYLE' || type === 'UPDATE_STYLE') {
-        const { sectionId, key, value, styles } = data || {};
-
-        if (sectionId === HEADER_TEXT_SLIDER_SECTION_ID) {
-          if (key && value !== undefined) {
-            setSectionStyles((prev) => ({
-              ...prev,
-              [key]: value
-            }));
-          }
-          if (styles) {
-            setSectionStyles(styles);
-          }
-        }
-      }
-
-      // Handle selection changes
-      if (type === 'SELECT_SECTION') {
-        const { placeholderId, sectionId } = data || {};
-
-        const isSelected =
-          placeholderId === HEADER_TEXT_SLIDER_PLACEHOLDER_ID &&
-          sectionId === HEADER_TEXT_SLIDER_SECTION_ID;
-
-        setIsTextSliderSelected(isSelected);
-      }
-
-      // Handle block selection
-      if (type === 'SELECT_BLOCK') {
-        const { sectionId } = data || {};
-        if (sectionId === HEADER_TEXT_SLIDER_SECTION_ID) {
-          setIsTextSliderSelected(true);
-        } else {
-          setIsTextSliderSelected(false);
-        }
-      }
-
-      // Handle deselection
-      if (type === 'DESELECT' || type === 'CLEAR_SELECTION') {
-        setIsTextSliderSelected(false);
-      }
-
-      // Handle visibility toggle
-      if (type === 'TOGGLE_SECTION_VISIBILITY') {
-        const { sectionId } = data || {};
-        if (sectionId === HEADER_TEXT_SLIDER_SECTION_ID) {
-          setIsSectionVisible((prev) => !prev);
-        }
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  }, [hasInitialSettings, isDesigner]);
-
-  // If no children, just return null (registration-only mode)
-  if (!children) {
-    return null;
-  }
-
-  return (
-    <HeaderTextSliderContext.Provider
-      value={{
-        isDesigner,
-        isTextSliderSectionSelected: isTextSliderSelected,
-        isSectionVisible,
-        properties: sectionProperties,
-        sectionStyles
-      }}
-    >
-      {children}
-    </HeaderTextSliderContext.Provider>
-  );
-}

package/app-template/src/views/header/inline-search.tsx

@@ -1,262 +0,0 @@
-'use client';
-
-/**
- * Inline Search Component
- *
- * A simplified search input that appears directly in the header
- * for the "two-row" layout. Unlike the modal search, this is always
- * visible and expands inline results.
- */
-
-import { useState, useRef, useMemo, useCallback } from 'react';
-import { useRouter } from '@akinon/next/hooks';
-import { Icon } from '@theme/components';
-import { ROUTES } from '@theme/routes';
-import clsx from 'clsx';
-import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
-
-interface InlineSearchProps {
-  placeholder?: string;
-  className?: string;
-  style?: React.CSSProperties;
-  iconStyles?: Record<string, unknown>;
-  /** Block ID for theme editor selection */
-  blockId?: string;
-  /** Whether in designer mode (disables interactions) */
-  isDesigner?: boolean;
-  /** Placeholder ID for theme editor */
-  placeholderId?: string;
-  /** Section ID for theme editor */
-  sectionId?: string;
-  /** Whether this block is currently selected */
-  isSelected?: boolean;
-}
-
-/**
- * Extract responsive style value for the current breakpoint
- * Styles from theme editor come as { desktop: "value", tablet: "value", ... }
- */
-function extractStyleValue(
-  value: unknown,
-  breakpoint = 'desktop'
-): string | number | undefined {
-  if (value === null || value === undefined) return undefined;
-  if (typeof value === 'string' || typeof value === 'number') return value;
-  if (typeof value === 'object' && value !== null) {
-    const obj = value as Record<string, string | number>;
-    // Try current breakpoint, fallback to desktop, then first available value
-    return obj[breakpoint] ?? obj['desktop'] ?? Object.values(obj)[0];
-  }
-  return undefined;
-}
-
-/**
- * Convert theme editor style object to CSS properties
- * Supports both kebab-case (from theme editor) and camelCase (from server parser)
- */
-function convertStyles(
-  styles: Record<string, unknown> | undefined,
-  breakpoint = 'desktop'
-): React.CSSProperties {
-  if (!styles) return {};
-
-  const result: React.CSSProperties = {};
-
-  // Map theme editor keys (kebab-case) to CSS property names (camelCase)
-  const styleMap: Record<string, keyof React.CSSProperties> = {
-    // Kebab-case keys (from theme editor postMessage)
-    width: 'width',
-    'max-width': 'maxWidth',
-    height: 'height',
-    'background-color': 'backgroundColor',
-    'border-color': 'borderColor',
-    'border-width': 'borderWidth',
-    'border-radius': 'borderRadius',
-    'font-size': 'fontSize',
-    'padding-left': 'paddingLeft',
-    'padding-right': 'paddingRight',
-    // CamelCase keys (from server-side parser or direct style pass)
-    maxWidth: 'maxWidth',
-    backgroundColor: 'backgroundColor',
-    borderColor: 'borderColor',
-    borderWidth: 'borderWidth',
-    borderRadius: 'borderRadius',
-    fontSize: 'fontSize',
-    paddingLeft: 'paddingLeft',
-    paddingRight: 'paddingRight'
-  };
-
-  Object.entries(styles).forEach(([key, value]) => {
-    const cssKey = styleMap[key];
-    if (cssKey) {
-      const extracted = extractStyleValue(value, breakpoint);
-      if (extracted !== undefined) {
-        (result as Record<string, unknown>)[cssKey] = extracted;
-      }
-    }
-  });
-
-  return result;
-}
-
-export default function InlineSearch({
-  placeholder = 'Search...',
-  className,
-  style,
-  iconStyles,
-  blockId,
-  isDesigner = false,
-  placeholderId = 'header',
-  sectionId = 'header-search',
-  isSelected = false
-}: InlineSearchProps) {
-  const router = useRouter();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [searchText, setSearchText] = useState('');
-
-  // Convert theme editor styles to CSS properties
-  const computedStyles = useMemo(
-    () => convertStyles(style as unknown as Record<string, unknown>),
-    [style]
-  );
-
-  // Extract font-size for the input element
-  const inputStyle = useMemo(() => {
-    const fontSize = computedStyles.fontSize;
-    return fontSize ? { fontSize } : {};
-  }, [computedStyles]);
-
-  // Extract icon color and size from block styles
-  const iconColor = useMemo(() => {
-    const color = extractStyleValue(iconStyles?.color);
-    return typeof color === 'string' ? color : undefined;
-  }, [iconStyles]);
-
-  const iconSize = useMemo(() => {
-    // iconSize comes from properties, not styles - check both
-    const size =
-      extractStyleValue(iconStyles?.iconSize) ||
-      extractStyleValue(iconStyles?.['icon-size']);
-    if (size === undefined) return 18;
-    const numSize = typeof size === 'string' ? parseInt(size, 10) : size;
-    return isNaN(numSize) ? 18 : numSize;
-  }, [iconStyles]);
-
-  // Extract custom icon SVG from block properties
-  const customIcon = useMemo(() => {
-    const icon = iconStyles?.icon;
-    if (!icon) return null;
-    // Handle responsive object format
-    const iconValue =
-      typeof icon === 'object' && icon !== null && 'desktop' in icon
-        ? (icon as { desktop?: string }).desktop
-        : icon;
-    // Check if it's SVG content
-    if (typeof iconValue === 'string' && iconValue.includes('<svg')) {
-      return iconValue;
-    }
-    return null;
-  }, [iconStyles]);
-
-  // Designer features for theme editor selection
-  const { handleClick: handleDesignerClick } = useDesignerFeatures({
-    blockId: blockId || 'header-search-icon',
-    placeholderId,
-    sectionId,
-    isDesigner,
-    blockInfo: {
-      id: blockId || 'header-search-icon',
-      type: 'icon-button',
-      label: 'Search Icon'
-    }
-  });
-
-  const handleSearch = () => {
-    if (searchText.trim() !== '') {
-      router.push(
-        `${ROUTES.LIST}/?search_text=${encodeURIComponent(searchText)}`
-      );
-      setSearchText('');
-    }
-  };
-
-  // Handle click - in designer mode, select the block; otherwise do nothing on container
-  const handleContainerClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (isDesigner) {
-        e.preventDefault();
-        e.stopPropagation();
-        handleDesignerClick(e);
-      }
-    },
-    [isDesigner, handleDesignerClick]
-  );
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      handleSearch();
-    }
-  };
-
-  return (
-    <div
-      data-block-id={blockId}
-      onClick={handleContainerClick}
-      className={clsx(
-        'flex items-center border px-3 flex-shrink-0',
-        // Only apply default Tailwind classes if no inline style override
-        !computedStyles.height && 'h-10',
-        !computedStyles.borderRadius && 'rounded-md',
-        !computedStyles.backgroundColor && 'bg-white',
-        !computedStyles.borderColor && 'border-gray-300',
-        isDesigner && 'cursor-pointer',
-        isSelected && 'ring-2 ring-blue-500 ring-offset-1',
-        className
-      )}
-      style={computedStyles}
-    >
-      <input
-        ref={inputRef}
-        type="text"
-        value={searchText}
-        onChange={(e) => setSearchText(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholder}
-        className={clsx(
-          'flex-1 text-sm text-black-750 bg-transparent border-none outline-none',
-          'placeholder:text-gray-400',
-          isDesigner && 'pointer-events-none'
-        )}
-        style={inputStyle}
-      />
-      <button
-        type="button"
-        onClick={handleSearch}
-        className={clsx(
-          'flex items-center justify-center ml-2 p-1 hover:bg-gray-100 rounded transition-colors',
-          isDesigner && 'pointer-events-none'
-        )}
-        aria-label="Search"
-      >
-        {customIcon ? (
-          <div
-            className="flex items-center justify-center"
-            style={{
-              width: iconSize,
-              height: iconSize,
-              color: iconColor || undefined
-            }}
-            dangerouslySetInnerHTML={{ __html: customIcon }}
-          />
-        ) : (
-          <Icon
-            name="search"
-            size={iconSize}
-            className={iconColor ? undefined : 'text-gray-600'}
-            style={iconColor ? { color: iconColor } : undefined}
-          />
-        )}
-      </button>
-    </div>
-  );
-}