Search input

import { SearchSuggestions, type SearchSuggestion } from "@bosunkit/components/search-input";
import { Box } from "@bosunkit/components/box";
import { Stack } from "@bosunkit/components/stack";
import { Text } from "@bosunkit/components/text";
import { useState, type CSSProperties, type Dispatch, type ReactElement, type SetStateAction } from "react";

interface Vessel extends SearchSuggestion {
  mmsi: string;
  callSign: string;
}

const VESSELS: readonly Vessel[] = [
  { value: "windgrazer", label: "Windgrazer", mmsi: "244123456", callSign: "PCWY" },
  { value: "althea", label: "Althea", mmsi: "244234567", callSign: "PDAL" },
  { value: "northwind", label: "North Wind", mmsi: "235098765", callSign: "MNTW7" },
  { value: "sea-lark", label: "Sea Lark", mmsi: "227123456", callSign: "FSLK" },
];

const MATCH_STYLE: CSSProperties = { background: "var(--accent-dim)", color: "inherit", fontWeight: "bold" };

function highlight(text: string, query: string): ReactElement {
  const start: number = text.toLowerCase().indexOf(query);
  return start < 0 || query === "" ? (
    <>{text}</>
  ) : (
    <>
      {text.slice(0, start)}
      <mark style={MATCH_STYLE}>{text.slice(start, start + query.length)}</mark>
      {text.slice(start + query.length)}
    </>
  );
}

export const description: string =
  "Search the example vessels by name, MMSI or call sign. Try wind, 244 or PCWY, then choose a vessel to see its details.";

export default function Find(): ReactElement {
  const [query, setQuery]: [string, Dispatch<SetStateAction<string>>] = useState<string>("");
  const [selected, setSelected]: [Vessel | null, Dispatch<SetStateAction<Vessel | null>>] = useState<Vessel | null>(
    null,
  );
  const wanted: string = query.trim().toLowerCase();
  const shown: readonly Vessel[] =
    wanted === ""
      ? []
      : VESSELS.filter((vessel: Vessel): boolean =>
          [vessel.label, vessel.mmsi, vessel.callSign].some((text: string): boolean =>
            text.toLowerCase().includes(wanted),
          ),
        );
  const status: string =
    wanted === ""
      ? "Type a name, MMSI or call sign to find a vessel."
      : shown.length === 0
        ? "No vessels match. Try fewer letters or check the identifier."
        : `${String(shown.length)} ${shown.length === 1 ? "vessel matches" : "vessels match"}. Choose one to see its details.`;
  return (
    <Stack space="md">
      <SearchSuggestions
        label="Find a vessel"
        placeholder="Name, MMSI or call sign"
        hint="Try wind, 244 or PCWY. Use the arrow keys and Enter, or tap a result."
        value={query}
        onValueChange={setQuery}
        items={shown}
        onSelect={(item: SearchSuggestion): void => {
          setSelected(VESSELS.find((vessel: Vessel): boolean => vessel.value === item.value) ?? null);
        }}
        status={status}
        clearLabel="Clear the vessel search"
        renderItem={(item: SearchSuggestion): ReactElement => {
          const vessel: Vessel | undefined = VESSELS.find((entry: Vessel): boolean => entry.value === item.value);
          return (
            <span>
              {highlight(item.label, wanted)}
              <br />
              <Text as="span" size="sm" family="mono">
                {highlight(vessel?.mmsi ?? "", wanted)} · {highlight(vessel?.callSign ?? "", wanted)}
              </Text>
            </span>
          );
        }}
      />
      {selected === null ? (
        <Text color="text-dim">Details appear here when you choose a vessel.</Text>
      ) : (
        <section aria-label="Vessel details" aria-live="polite">
          <Box background="surface2" padding="md" radius="md">
            <Stack space="sm">
              <Text>{selected.label}</Text>
              <Text family="mono">MMSI: {selected.mmsi}</Text>
              <Text family="mono">Call sign: {selected.callSign}</Text>
            </Stack>
          </Box>
        </section>
      )}
    </Stack>
  );
}

import { SearchInput } from "@bosunkit/components/search-input";
import { Label } from "@bosunkit/components/label";
import { Stack } from "@bosunkit/components/stack";
import { Text } from "@bosunkit/components/text";
import { useId, useState, type ChangeEvent, type Dispatch, type ReactElement, type SetStateAction } from "react";

const RECORDS: readonly string[] = ["Anchor watch", "Anchor windlass service", "Engine maintenance", "Radio check"];
export const description: string =
  "Type anchor to narrow the list, zzzz for no matches, and clear to restore every record. The field keeps normal search semantics.";

export default function Filter(): ReactElement {
  const id: string = useId();
  const [query, setQuery]: [string, Dispatch<SetStateAction<string>>] = useState<string>("");
  const shown: readonly string[] = RECORDS.filter((record: string): boolean =>
    record.toLowerCase().includes(query.trim().toLowerCase()),
  );
  return (
    <Stack space="sm">
      <Label htmlFor={id}>Filter the records</Label>
      <SearchInput
        id={id}
        value={query}
        onChange={(event: ChangeEvent<HTMLInputElement>): void => {
          setQuery(event.target.value);
        }}
        onClear={
          query === ""
            ? undefined
            : (): void => {
                setQuery("");
              }
        }
        clearLabel="Clear the record filter"
      />
      <span role="status" aria-atomic="true">
        {shown.length === 0
          ? "No records match. Try fewer words or clear the filter."
          : `${String(shown.length)} ${shown.length === 1 ? "record" : "records"} shown.`}
      </span>
      <ul aria-label="Filtered records">
        {shown.map((record: string): ReactElement => (
          <li key={record}>
            <Text as="span">{record}</Text>
          </li>
        ))}
      </ul>
    </Stack>
  );
}

import { SearchSuggestions, type SearchSuggestion } from "@bosunkit/components/search-input";
import { Box } from "@bosunkit/components/box";
import { Stack } from "@bosunkit/components/stack";
import { Text } from "@bosunkit/components/text";
import { useState, type CSSProperties, type Dispatch, type ReactElement, type SetStateAction } from "react";

const RECORDS: readonly SearchSuggestion[] = [
  { value: "watch", label: "Anchor watch" },
  { value: "windlass", label: "Anchor windlass service" },
  { value: "plan", label: "Anchorage plan" },
];
const MATCH_STYLE: CSSProperties = { background: "var(--accent-dim)", color: "inherit", fontWeight: "bold" };

export const description: string =
  "Type windlass, or use the arrow keys and Enter to choose a record. Escape dismisses the list and keeps your query.";

export default function Results(): ReactElement {
  const [query, setQuery]: [string, Dispatch<SetStateAction<string>>] = useState<string>("anchor");
  const [chosen, setChosen]: [SearchSuggestion | null, Dispatch<SetStateAction<SearchSuggestion | null>>] =
    useState<SearchSuggestion | null>(null);
  const wanted: string = query.trim().toLowerCase();
  const shown: readonly SearchSuggestion[] =
    wanted === ""
      ? []
      : RECORDS.filter((entry: SearchSuggestion): boolean => entry.label.toLowerCase().includes(wanted));
  const status: string =
    wanted === ""
      ? "Type to search the records."
      : shown.length === 0
        ? "No matches. Try fewer words."
        : `${String(shown.length)} ${shown.length === 1 ? "match" : "matches"} for ${query}`;
  return (
    <Stack space="md">
      <SearchSuggestions
        label="Search the records"
        value={query}
        onValueChange={setQuery}
        items={shown}
        onSelect={setChosen}
        clearLabel="Clear the search"
        status={status}
        renderItem={(item: SearchSuggestion): ReactElement => {
          const start: number = item.label.toLowerCase().indexOf(wanted);
          return (
            <span>
              {item.label.slice(0, start)}
              <mark style={MATCH_STYLE}>{item.label.slice(start, start + wanted.length)}</mark>
              {item.label.slice(start + wanted.length)}
            </span>
          );
        }}
      />
      {chosen === null ? null : (
        <section aria-label="Selected record">
          <Box background="surface2" padding="md" radius="md">
            <Text>{chosen.label}</Text>
          </Box>
        </section>
      )}
    </Stack>
  );
}

import { SearchInput } from "@bosunkit/components/search-input";
import { Button } from "@bosunkit/components/button";
import { Label } from "@bosunkit/components/label";
import { Stack } from "@bosunkit/components/stack";
import {
  useId,
  useState,
  type ChangeEvent,
  type Dispatch,
  type SubmitEvent,
  type ReactElement,
  type SetStateAction,
} from "react";

const RECORDS: readonly string[] = ["Anchor watch", "Anchor windlass service", "Engine maintenance"];
export const description: string =
  "Type anchor, then press Enter or Search records. Results change only when submitted. This example matches literal text and ignores letter case.";

export default function Syntax(): ReactElement {
  const id: string = useId();
  const [draft, setDraft]: [string, Dispatch<SetStateAction<string>>] = useState<string>("");
  const [query, setQuery]: [string | null, Dispatch<SetStateAction<string | null>>] = useState<string | null>(null);
  const shown: readonly string[] =
    query === null || query === ""
      ? []
      : RECORDS.filter((record: string): boolean => record.toLowerCase().includes(query.toLowerCase()));
  return (
    <form
      role="search"
      aria-label="Submitted record search"
      onSubmit={(event: SubmitEvent<HTMLFormElement>): void => {
        event.preventDefault();
        setQuery(draft.trim());
      }}
    >
      <Stack space="sm">
        <Label htmlFor={id}>Search records on submit</Label>
        <SearchInput
          id={id}
          value={draft}
          onChange={(event: ChangeEvent<HTMLInputElement>): void => {
            setDraft(event.target.value);
          }}
          hint="Matches literal text, ignoring letter case. Quotes, |, * and - have no special meaning in this example."
          onClear={
            draft === ""
              ? undefined
              : (): void => {
                  setDraft("");
                  setQuery(null);
                }
          }
          clearLabel="Clear the submitted search"
        />
        <Button type="submit" disabled={draft.trim() === ""} motion={false}>
          Search records
        </Button>
        <span role="status" aria-atomic="true">
          {query === null || query === ""
            ? "Enter a query, then search."
            : shown.length === 0
              ? "No matches. Try fewer words."
              : `${String(shown.length)} ${shown.length === 1 ? "match" : "matches"} for ${query}.`}
        </span>
        <ul aria-label="Submitted results">
          {shown.map((record: string): ReactElement => (
            <li key={record}>{record}</li>
          ))}
        </ul>
      </Stack>
    </form>
  );
}

import { SearchSuggestions, type SearchSuggestion } from "@bosunkit/components/search-input";
import { Button } from "@bosunkit/components/button";
import { Inline } from "@bosunkit/components/inline";
import { SectionMessage } from "@bosunkit/components/section-message";
import { Stack } from "@bosunkit/components/stack";
import { Text } from "@bosunkit/components/text";
import {
  useEffect,
  useRef,
  useState,
  type Dispatch,
  type ReactElement,
  type RefObject,
  type SetStateAction,
} from "react";

export const description: string =
  "Choose a slow or failed response, then search for anchor. Retry keeps your query; changing it cancels the previous lookup.";

type ResponseMode = "normal" | "slow" | "failed";
export type DirectoryLookup = (
  query: string,
  signal: AbortSignal,
  mode: ResponseMode,
) => Promise<readonly SearchSuggestion[]>;
type Result = { query: string; mode: ResponseMode; attempt: number } & (
  { phase: "ready"; items: readonly SearchSuggestion[] } | { phase: "failed" }
);
const RECORDS: readonly SearchSuggestion[] = [
  { value: "watch", label: "Anchor watch" },
  { value: "windlass", label: "Anchor windlass service" },
  { value: "engine", label: "Engine maintenance" },
];

/** A local directory with a controllable delay and failure; no network or vessel data. */
const lookupDirectory: DirectoryLookup = (
  query: string,
  signal: AbortSignal,
  mode: ResponseMode,
): Promise<readonly SearchSuggestion[]> =>
  new Promise((resolve: (items: readonly SearchSuggestion[]) => void, reject: (error: Error) => void): void => {
    if (signal.aborted) {
      reject(new Error("Lookup canceled"));
      return;
    }
    const cancel: () => void = (): void => {
      window.clearTimeout(timer);
      reject(new Error("Lookup canceled"));
    };
    const timer: number = window.setTimeout(
      (): void => {
        signal.removeEventListener("abort", cancel);
        if (mode === "failed") reject(new Error("Example directory unavailable"));
        else resolve(RECORDS.filter((record: SearchSuggestion): boolean => record.label.toLowerCase().includes(query)));
      },
      mode === "slow" ? 1600 : 500,
    );
    signal.addEventListener("abort", cancel, { once: true });
  });

/** The injectable lookup lets the browser test resolve requests out of order. */
export default function Remote({ lookup = lookupDirectory }: { lookup?: DirectoryLookup }): ReactElement {
  const [query, setQuery]: [string, Dispatch<SetStateAction<string>>] = useState<string>("");
  const [mode, setMode]: [ResponseMode, Dispatch<SetStateAction<ResponseMode>>] = useState<ResponseMode>("normal");
  const [attempt, setAttempt]: [number, Dispatch<SetStateAction<number>>] = useState<number>(0);
  const [result, setResult]: [Result | null, Dispatch<SetStateAction<Result | null>>] = useState<Result | null>(null);
  const [chosen, setChosen]: [SearchSuggestion | null, Dispatch<SetStateAction<SearchSuggestion | null>>] =
    useState<SearchSuggestion | null>(null);
  const field: RefObject<HTMLDivElement | null> = useRef<HTMLDivElement | null>(null);
  const wanted: string = query.trim().toLowerCase();
  const current: Result | null =
    result?.query === wanted && result.mode === mode && result.attempt === attempt ? result : null;
  useEffect((): (() => void) | undefined => {
    if (wanted === "") return undefined;
    const controller: AbortController = new AbortController();
    // A transport may finish after abort. Only the current effect may publish its response.
    void lookup(wanted, controller.signal, mode).then(
      (items: readonly SearchSuggestion[]): void => {
        if (!controller.signal.aborted) setResult({ query: wanted, mode, attempt, phase: "ready", items });
      },
      (): void => {
        if (!controller.signal.aborted) setResult({ query: wanted, mode, attempt, phase: "failed" });
      },
    );
    return (): void => {
      controller.abort();
    };
  }, [wanted, mode, attempt, lookup]);
  const items: readonly SearchSuggestion[] = current?.phase === "ready" ? current.items : [];
  const status: string =
    wanted === ""
      ? "Type to search the example directory."
      : current === null
        ? "Searching the example directory…"
        : current.phase === "failed"
          ? "Couldn't search because the example directory is unavailable. Your query is kept. Retry the search."
          : items.length === 0
            ? "No matches. Try fewer words."
            : `${String(items.length)} ${items.length === 1 ? "match" : "matches"}.`;
  return (
    <Stack space="md">
      <Text size="sm">Example controls: choose how the local directory responds.</Text>
      <Inline space="sm">
        <Button
          type="button"
          aria-pressed={mode === "normal"}
          onClick={(): void => {
            setMode("normal");
          }}
          motion={false}
        >
          Normal response
        </Button>
        <Button
          type="button"
          aria-pressed={mode === "slow"}
          onClick={(): void => {
            setMode("slow");
          }}
          motion={false}
        >
          Slow response
        </Button>
        <Button
          type="button"
          aria-pressed={mode === "failed"}
          onClick={(): void => {
            setMode("failed");
          }}
          motion={false}
        >
          Failed response
        </Button>
      </Inline>
      <div ref={field}>
        <SearchSuggestions
          label="Search the directory"
          value={query}
          onValueChange={(next: string): void => {
            setQuery(next);
            setAttempt((previous: number): number => previous + 1);
          }}
          items={items}
          onSelect={setChosen}
          status={status}
          clearLabel="Clear the directory search"
          hint="Search for anchor or engine. Change the query during a slow response to cancel that lookup."
        />
      </div>
      {wanted !== "" && current?.phase === "failed" ? (
        <SectionMessage kind="error" title="The example directory is unavailable">
          <Button
            type="button"
            onClick={(): void => {
              setMode("normal");
              setAttempt((previous: number): number => previous + 1);
              field.current?.querySelector("input")?.focus();
            }}
            motion={false}
          >
            Retry the search
          </Button>
        </SectionMessage>
      ) : null}
      {chosen === null ? null : (
        <section aria-label="Directory record">
          <Text>{chosen.label}</Text>
        </section>
      )}
    </Stack>
  );
}

import { SearchInput } from "@bosunkit/components/search-input";
import { Label } from "@bosunkit/components/label";
import { Stack } from "@bosunkit/components/stack";
import { useId, useState, type ChangeEvent, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Edit or clear the first query. The disabled and read-only fields keep their text. A wrapped hint leaves the clear button aligned with the field.";

export default function States(): ReactElement {
  const id: string = useId();
  const [query, setQuery]: [string, Dispatch<SetStateAction<string>>] = useState<string>("Windgrazer");
  const clear: () => void = (): void => {
    setQuery("");
  };
  return (
    <Stack space="md">
      <Stack space="sm">
        <Label htmlFor={`${id}-editable`}>Editable vessel search</Label>
        <SearchInput
          id={`${id}-editable`}
          value={query}
          onChange={(event: ChangeEvent<HTMLInputElement>): void => {
            setQuery(event.target.value);
          }}
          onClear={query === "" ? undefined : clear}
          clearLabel="Clear the editable search"
          hint="Search by the vessel name, its MMSI or its call sign. This example matches literal text and ignores letter case."
        />
      </Stack>
      <Stack space="sm">
        <Label htmlFor={`${id}-disabled`}>Disabled vessel search</Label>
        <SearchInput
          id={`${id}-disabled`}
          defaultValue="Althea"
          disabled
          onClear={clear}
          clearLabel="Clear the disabled search"
        />
      </Stack>
      <Stack space="sm">
        <Label htmlFor={`${id}-readonly`}>Read-only vessel search</Label>
        <SearchInput
          id={`${id}-readonly`}
          defaultValue="Sea Lark"
          readOnly
          onClear={clear}
          clearLabel="Clear the read-only search"
        />
      </Stack>
    </Stack>
  );
}