site-builder/craft/src/components/basic/SearchBar.tsx

import React, { CSSProperties } from 'react';
import { useNode, UserComponent } from '@craftjs/core';
import { cssPropsToString } from '../../utils/style-helpers';
import { escapeHtml, escapeAttr, safeUrl } from '../../utils/escape';

interface SearchBarProps {
  placeholder?: string;
  buttonText?: string;
  showButton?: boolean;
  /** Where the search GET request is submitted -- a real search-results page
   *  if the site has one, or '/' (site root) by default. The query is sent
   *  as `?q=...`, the conventional param name search-results pages look for. */
  action?: string;
  style?: CSSProperties;
  animation?: string;
  animationDelay?: string;
  hideOnDesktop?: boolean;
  hideOnTablet?: boolean;
  hideOnMobile?: boolean;
}

export const SearchBar: UserComponent<SearchBarProps> = ({
  placeholder = 'Search...',
  buttonText = 'Search',
  showButton = true,
  action = '/',
  style = {},
}) => {
  const {
    connectors: { connect, drag },
    selected,
  } = useNode((node) => ({
    selected: node.events.selected,
  }));

  return (
    <form
      ref={(ref: HTMLFormElement | null): void => { if (ref) connect(drag(ref)); }}
      role="search"
      action={action}
      method="GET"
      onSubmit={(e) => e.preventDefault()}
      style={{
        display: 'flex',
        alignItems: 'center',
        maxWidth: '560px',
        outline: selected ? '2px solid #3b82f6' : 'none',
        ...style,
      }}
    >
      <div style={{ position: 'relative', flex: 1 }}>
        <i
          className="fa fa-search"
          style={{
            position: 'absolute',
            left: '14px',
            top: '50%',
            transform: 'translateY(-50%)',
            color: '#9ca3af',
            fontSize: '14px',
            pointerEvents: 'none',
          }}
        />
        <input
          type="search"
          name="q"
          placeholder={placeholder}
          style={{
            width: '100%',
            padding: '12px 16px 12px 40px',
            fontSize: '15px',
            fontFamily: 'Inter, sans-serif',
            border: '1px solid #d1d5db',
            borderRadius: showButton ? '8px 0 0 8px' : '8px',
            backgroundColor: '#ffffff',
            color: '#1f2937',
            outline: 'none',
            boxSizing: 'border-box',
          }}
        />
      </div>
      {showButton && (
        <button
          type="submit"
          style={{
            padding: '12px 20px',
            fontSize: '15px',
            fontWeight: '600',
            fontFamily: 'Inter, sans-serif',
            color: '#ffffff',
            backgroundColor: '#3b82f6',
            border: 'none',
            borderRadius: '0 8px 8px 0',
            cursor: 'pointer',
            whiteSpace: 'nowrap',
            display: 'flex',
            alignItems: 'center',
            gap: '6px',
          }}
        >
          <i className="fa fa-search" style={{ fontSize: '13px' }} />
          {buttonText}
        </button>
      )}
    </form>
  );
};

/* ---------- Craft config ---------- */

SearchBar.craft = {
  displayName: 'Search Bar',
  props: {
    placeholder: 'Search...',
    buttonText: 'Search',
    showButton: true,
    action: '/',
    style: {},
    animation: '',
    animationDelay: '',
    hideOnDesktop: false,
    hideOnTablet: false,
    hideOnMobile: false,
  },
  rules: {
    canDrag: () => true,
    canMoveIn: () => false,
    canMoveOut: () => true,
  },
};

/* ---------- HTML export ---------- */

(SearchBar as any).toHtml = (props: SearchBarProps, _childrenHtml: string) => {
  const {
    placeholder = 'Search...',
    buttonText = 'Search',
    showButton = true,
    action = '/',
    style = {},
  } = props;

  const formStyle = cssPropsToString({
    display: 'flex',
    alignItems: 'center',
    maxWidth: '560px',
    ...style,
  });

  const inputStyleStr = `width:100%;padding:12px 16px 12px 40px;font-size:15px;font-family:Inter,sans-serif;border:1px solid #d1d5db;border-radius:${showButton ? '8px 0 0 8px' : '8px'};background-color:#ffffff;color:#1f2937;outline:none;box-sizing:border-box`;

  const btnHtml = showButton
    ? `<button type="submit" style="padding:12px 20px;font-size:15px;font-weight:600;font-family:Inter,sans-serif;color:#ffffff;background-color:#3b82f6;border:none;border-radius:0 8px 8px 0;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px"><i class="fa fa-search" style="font-size:13px" aria-hidden="true"></i>${escapeHtml(buttonText)}</button>`
    : '';

  // F2: previously a purely decorative <form> -- no action/method/input
  // name at all, so submitting did nothing. A real GET to `action` with the
  // query in the conventional `q` param makes this a functioning search
  // form on publish (routes to a real search-results page if the site has
  // one, or reloads '/' with ?q=... by default). `safeUrl` blocks
  // javascript:/vbscript:/data:text/html breakout via the action attribute.
  const actionAttr = escapeAttr(safeUrl(action) || '/');

  return {
    html: `<form role="search" action="${actionAttr}" method="GET"${formStyle ? ` style="${formStyle}"` : ''}>
  <div style="position:relative;flex:1">
    <i class="fa fa-search" style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:14px;pointer-events:none" aria-hidden="true"></i>
    <input type="search" name="q" placeholder="${escapeAttr(placeholder)}" style="${inputStyleStr}" />
  </div>
  ${btnHtml}
</form>`,
  };
};