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

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

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