@mostrom/app-shell 0.1.0

package/src/components/search/AutocompleteClient.tsx

@@ -0,0 +1,293 @@
+// Client-only implementation - this file imports @base-ui/react directly
+// It should only be dynamically imported on the client
+import React from "react";
+import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete";
+
+// Autocomplete Root
+export const AutocompleteRoot = AutocompletePrimitive.Root;
+
+// Autocomplete Value
+export function AutocompleteValue({ ...props }: AutocompletePrimitive.Value.Props) {
+  return (
+    <AutocompletePrimitive.Value data-slot="autocomplete-value" {...props} />
+  );
+}
+
+// Autocomplete Input
+interface AutocompleteInputProps extends Omit<AutocompletePrimitive.Input.Props, "size"> {
+  showClear?: boolean;
+  showTrigger?: boolean;
+  icon?: React.ReactNode;
+  loading?: boolean;
+}
+
+export function AutocompleteInput({
+  className,
+  showClear = false,
+  showTrigger = false,
+  icon,
+  loading = false,
+  ...props
+}: AutocompleteInputProps) {
+  return (
+    // suppressHydrationWarning: browser extensions (Dashlane, 1Password, etc.) inject attributes before hydration
+    <div className={`app-shell-search-input-container ${className ?? ""}`} suppressHydrationWarning>
+      {icon && (
+        <span className="app-shell-search-icon">
+          {loading ? <LoadingSpinner /> : icon}
+        </span>
+      )}
+      <AutocompletePrimitive.Input
+        data-slot="autocomplete-input"
+        className="app-shell-search-input"
+        {...props}
+      />
+      {showTrigger && <AutocompleteTrigger />}
+      {showClear && <AutocompleteClear />}
+    </div>
+  );
+}
+
+// Loading Spinner
+const LoadingSpinner = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className="app-shell-search-spinner"
+    aria-hidden="true"
+  >
+    <circle
+      cx="8"
+      cy="8"
+      r="6"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeDasharray="32"
+      strokeDashoffset="12"
+    />
+  </svg>
+);
+
+// Portal
+export function AutocompletePortal({ ...props }: AutocompletePrimitive.Portal.Props) {
+  return (
+    <AutocompletePrimitive.Portal data-slot="autocomplete-portal" {...props} />
+  );
+}
+
+// Backdrop
+export function AutocompleteBackdrop({
+  ...props
+}: AutocompletePrimitive.Backdrop.Props) {
+  return (
+    <AutocompletePrimitive.Backdrop
+      data-slot="autocomplete-backdrop"
+      {...props}
+    />
+  );
+}
+
+// Positioner
+export function AutocompletePositioner({
+  className,
+  ...props
+}: AutocompletePrimitive.Positioner.Props) {
+  return (
+    <AutocompletePrimitive.Positioner
+      data-slot="autocomplete-positioner"
+      className={`app-shell-search-positioner ${className ?? ""}`}
+      {...props}
+    />
+  );
+}
+
+// List
+export function AutocompleteList({
+  className,
+  ...props
+}: AutocompletePrimitive.List.Props) {
+  return (
+    <AutocompletePrimitive.List
+      data-slot="autocomplete-list"
+      className={`app-shell-search-options ${className ?? ""}`}
+      {...props}
+    />
+  );
+}
+
+// Item
+export function AutocompleteItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Item>) {
+  return (
+    <AutocompletePrimitive.Item
+      data-slot="autocomplete-item"
+      className={`app-shell-search-option ${className ?? ""}`}
+      {...props}
+    />
+  );
+}
+
+// Content (combines Portal, Positioner, and Popup)
+export interface AutocompleteContentProps extends React.ComponentProps<
+  typeof AutocompletePrimitive.Popup
+> {
+  align?: AutocompletePrimitive.Positioner.Props["align"];
+  sideOffset?: AutocompletePrimitive.Positioner.Props["sideOffset"];
+  alignOffset?: AutocompletePrimitive.Positioner.Props["alignOffset"];
+  side?: AutocompletePrimitive.Positioner.Props["side"];
+  anchor?: AutocompletePrimitive.Positioner.Props["anchor"];
+  showBackdrop?: boolean;
+}
+
+export function AutocompleteContent({
+  className,
+  children,
+  showBackdrop = false,
+  align = "start",
+  sideOffset = 4,
+  alignOffset = 0,
+  side = "bottom",
+  anchor,
+  ...props
+}: AutocompleteContentProps) {
+  const useServicesLayout = Boolean(
+    typeof className === "string" &&
+      className.includes("app-shell-services-dropdown")
+  );
+
+  return (
+    <AutocompletePortal>
+      {showBackdrop && <AutocompleteBackdrop />}
+      <AutocompletePositioner
+        className={useServicesLayout ? "app-shell-search-positioner-services" : undefined}
+        align={align}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        side={side}
+        anchor={anchor}
+      >
+        <AutocompletePrimitive.Popup
+          data-slot="autocomplete-popup"
+          className={`app-shell-search-dropdown ${className ?? ""}`}
+          {...props}
+        >
+          {children}
+        </AutocompletePrimitive.Popup>
+      </AutocompletePositioner>
+    </AutocompletePortal>
+  );
+}
+
+// Group
+export function AutocompleteGroup({
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Group>) {
+  return (
+    <AutocompletePrimitive.Group data-slot="autocomplete-group" {...props} />
+  );
+}
+
+// Group Label
+export function AutocompleteGroupLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>) {
+  return (
+    <AutocompletePrimitive.GroupLabel
+      data-slot="autocomplete-group-label"
+      className={`app-shell-search-group-label ${className ?? ""}`}
+      {...props}
+    />
+  );
+}
+
+// Empty state
+export function AutocompleteEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Empty>) {
+  return (
+    <AutocompletePrimitive.Empty
+      data-slot="autocomplete-empty"
+      className={`app-shell-search-empty ${className ?? ""}`}
+      {...props}
+    />
+  );
+}
+
+// Clear button
+export function AutocompleteClear({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Clear>) {
+  return (
+    <AutocompletePrimitive.Clear
+      data-slot="autocomplete-clear"
+      className={`app-shell-search-clear ${className ?? ""}`}
+      {...props}
+    >
+      <ClearIcon />
+    </AutocompletePrimitive.Clear>
+  );
+}
+
+// Trigger button
+export function AutocompleteTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Trigger>) {
+  return (
+    <AutocompletePrimitive.Trigger
+      data-slot="autocomplete-trigger"
+      className={`app-shell-search-trigger ${className ?? ""}`}
+      {...props}
+    >
+      <ChevronIcon />
+    </AutocompletePrimitive.Trigger>
+  );
+}
+
+// Icons
+const ClearIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M12 4L4 12M4 4L12 12"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const ChevronIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M4 6L8 10L12 6"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/components/search/GlobalSearch.tsx

@@ -0,0 +1,187 @@
+import React, { useCallback, useMemo, useRef } from "react";
+import {
+  Autocomplete,
+  AutocompleteContent,
+  AutocompleteEmpty,
+  AutocompleteInput,
+  AutocompleteItem,
+  AutocompleteList,
+} from "./Autocomplete";
+
+// Search icon
+const SearchIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M11.5 11.5L14.5 14.5M7.5 13C4.18629 13 1.5 10.3137 1.5 7C1.5 3.68629 4.18629 1 7.5 1C10.8137 1 13.5 3.68629 13.5 7C13.5 10.3137 10.8137 13 7.5 13Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export interface SearchOption {
+  value: string;
+  label?: string;
+  description?: string;
+  tags?: string[];
+}
+
+export interface GlobalSearchProps {
+  /** Current search input value */
+  value: string;
+  /** Callback when input value changes */
+  onChange: (value: string) => void;
+  /** Callback when an option is selected */
+  onSelect: (option: SearchOption) => void;
+  /** Placeholder text for the search input */
+  placeholder?: string;
+  /** List of search suggestions/options */
+  options: SearchOption[];
+  /** Content to show when there are no results */
+  empty?: React.ReactNode;
+  /** Loading state */
+  loading?: boolean;
+  /** Aria label for accessibility */
+  ariaLabel?: string;
+}
+
+export function GlobalSearch({
+  value,
+  onChange,
+  onSelect,
+  placeholder = "Search",
+  options,
+  empty = "No results found",
+  loading = false,
+  ariaLabel = "Search",
+}: GlobalSearchProps) {
+  // Track last typed value to detect selection
+  const lastTypedValue = useRef(value);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Options are already filtered by the parent component (AppShell uses searchServices)
+  // No need to re-filter here - just use the options as-is
+  const filteredOptions = options;
+  const hasQuery = value.trim().length > 0;
+  const groupedOptions = useMemo(() => {
+    const groups = new Map<string, SearchOption[]>();
+
+    filteredOptions.forEach((option) => {
+      const groupName = option.tags?.[0] ?? "Services";
+      const existing = groups.get(groupName) ?? [];
+      existing.push(option);
+      groups.set(groupName, existing);
+    });
+
+    return Array.from(groups.entries()).map(([title, items]) => ({ title, items }));
+  }, [filteredOptions]);
+
+  // Convert option to display string
+  const itemToString = useCallback((item: unknown): string => {
+    const option = item as SearchOption | null;
+    return option?.label ?? option?.value ?? "";
+  }, []);
+
+  // Handle value changes - detect if an option was selected
+  const handleValueChange = useCallback(
+    (newValue: string) => {
+      // Check if the new value matches an option exactly (indicating selection)
+      const matchedOption = options.find(
+        (option) => (option.label ?? option.value) === newValue
+      );
+
+      if (matchedOption && newValue !== lastTypedValue.current) {
+        // Option was selected
+        onSelect(matchedOption);
+      }
+
+      lastTypedValue.current = newValue;
+      onChange(newValue);
+    },
+    [options, onChange, onSelect]
+  );
+
+  return (
+    // suppressHydrationWarning: browser extensions (Dashlane, 1Password, etc.) inject attributes before hydration
+    <div
+      ref={containerRef}
+      className="app-shell-search-input-wrapper"
+      suppressHydrationWarning
+    >
+      <Autocomplete
+        value={value}
+        onValueChange={handleValueChange}
+        items={filteredOptions}
+        itemToStringValue={itemToString}
+        mode="none"
+      >
+        <AutocompleteInput
+          placeholder={placeholder}
+          aria-label={ariaLabel}
+          icon={<SearchIcon />}
+          loading={loading}
+          showClear
+        />
+        <AutocompleteContent className="app-shell-services-dropdown">
+          <AutocompleteEmpty>{hasQuery ? empty : ""}</AutocompleteEmpty>
+          {filteredOptions.length > 0 && (
+            <div className="app-shell-services-menu" role="menu">
+              <div className="app-shell-services-categories" role="presentation">
+                <div className="app-shell-services-categories-title">Categories</div>
+                <ul>
+                  {groupedOptions.map((group) => (
+                    <li key={group.title}>
+                      <button
+                        type="button"
+                        className="app-shell-services-category"
+                        onMouseDown={(event) => event.preventDefault()}
+                        aria-label={group.title}
+                      >
+                        {group.title}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div className="app-shell-services-divider" aria-hidden="true" />
+              <div className="app-shell-services-list" role="presentation">
+                {groupedOptions.map((group) => (
+                  <div className="app-shell-services-group" key={group.title}>
+                    <div className="app-shell-services-group-title">{group.title}</div>
+                    <AutocompleteList>
+                      {group.items.map((option) => (
+                        <AutocompleteItem
+                          key={option.value}
+                          value={option}
+                          className="app-shell-services-item"
+                        >
+                          <span className="app-shell-services-item-text">
+                            {option.label ?? option.value}
+                          </span>
+                          {option.description ? (
+                            <span className="app-shell-services-item-description">
+                              {option.description}
+                            </span>
+                          ) : null}
+                        </AutocompleteItem>
+                      ))}
+                    </AutocompleteList>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </AutocompleteContent>
+      </Autocomplete>
+    </div>
+  );
+}