Command palette

import { Button } from "@bosunkit/components/button";
import { CommandPalette, type CommandGroup, type CommandItem } from "@bosunkit/components/command-palette";
import { Kbd } from "@bosunkit/components/kbd";
import { BookOpen, FileText, HelpCircle, Settings, Users } from "lucide-react";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";
export const description: string =
  "Search names and keywords, move with the arrow keys, and choose with Enter or a press. Selection is reported locally; the example performs no navigation or writes.";
const groups: readonly CommandGroup[] = [
  {
    id: "pages",
    label: "Destinations",
    items: [
      {
        id: "reports",
        label: "Open reports",
        description: "Browse the report library",
        keywords: ["updates", "engineering"],
        icon: <FileText />,
        shortcut: "G R",
      },
      {
        id: "crew",
        label: "Open crew directory",
        description: "People and contact details",
        keywords: ["team", "people"],
        icon: <Users />,
        shortcut: "G C",
      },
      { id: "design", label: "Open design foundations", description: "Type, spacing and themes", icon: <BookOpen /> },
    ],
  },
  {
    id: "tools",
    label: "Tools",
    items: [
      { id: "settings", label: "Open workspace settings", icon: <Settings /> },
      {
        id: "access",
        label: "Manage publishing access",
        description: "Unavailable in this read-only example",
        disabled: true,
        icon: <Users />,
      },
      { id: "help", label: "Show keyboard help", icon: <HelpCircle /> },
    ],
  },
];
export default function Showcase(): ReactElement {
  const [open, setOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false);
  const [query, setQuery]: [string, Dispatch<SetStateAction<string>>] = useState("");
  const [chosen, setChosen]: [string, Dispatch<SetStateAction<string>>] = useState("No command selected.");
  return (
    <div style={{ display: "grid", gap: "var(--space-md)" }}>
      <div>
        <Button
          onClick={(): void => {
            setQuery("");
            setOpen(true);
          }}
        >
          Find a destination or action
        </Button>
      </div>
      <p role="status">{chosen}</p>
      <CommandPalette
        open={open}
        onOpenChange={setOpen}
        title="Go to or do something"
        description="Choose from destinations and workspace tools."
        closeLabel="Close command menu"
        searchLabel="Search commands"
        clearLabel="Clear command search"
        placeholder="Search pages, actions or keywords…"
        emptyText="No commands match. Try another word."
        loadingText="Loading commands…"
        groups={groups}
        query={query}
        onQueryChange={setQuery}
        onSelect={(item: CommandItem): void => {
          setChosen(`Selected: ${item.label}. This preview does not run the action.`);
        }}
        footer={
          <span>
            <Kbd>↑</Kbd> <Kbd>↓</Kbd> Move · <Kbd>Enter</Kbd> Choose · <Kbd>Esc</Kbd> Close
          </span>
        }
      />
    </div>
  );
}

import { Button } from "@bosunkit/components/button";
import { CommandPalette, type CommandGroup, type CommandItem } from "@bosunkit/components/command-palette";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";
export const description: string =
  "Choosing a report type opens a second command group in the same dialog. Back restores the first group, and choosing a template closes the example.";
const root: readonly CommandGroup[] = [
  {
    id: "types",
    label: "Report types",
    items: [
      { id: "daily", label: "Daily commit report", description: "Open its available templates" },
      { id: "technical", label: "Technical report", description: "Open its available templates" },
    ],
  },
];
export default function DrillDown(): ReactElement {
  const [open, setOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false);
  const [kind, setKind]: [string, Dispatch<SetStateAction<string>>] = useState("");
  const [query, setQuery]: [string, Dispatch<SetStateAction<string>>] = useState("");
  const [chosen, setChosen]: [string, Dispatch<SetStateAction<string>>] = useState("No template selected.");
  const groups: readonly CommandGroup[] =
    kind === ""
      ? root
      : [
          {
            id: "templates",
            label: kind,
            items: [
              { id: "concise", label: "Concise update", description: "Summary, evidence and next actions" },
              { id: "detailed", label: "Detailed review", description: "Methods, findings, limits and references" },
            ],
          },
        ];
  return (
    <div style={{ display: "grid", gap: "var(--space-md)" }}>
      <div>
        <Button
          onClick={(): void => {
            setKind("");
            setQuery("");
            setOpen(true);
          }}
        >
          Choose a report template
        </Button>
      </div>
      <p role="status">{chosen}</p>
      <CommandPalette
        open={open}
        onOpenChange={setOpen}
        title={kind === "" ? "Choose report type" : "Choose template"}
        closeLabel="Close template chooser"
        searchLabel="Find a template"
        clearLabel="Clear template search"
        emptyText="No matching templates."
        loadingText="Loading templates…"
        groups={groups}
        query={query}
        onQueryChange={setQuery}
        closeOnSelect={false}
        onSelect={(item: CommandItem): void => {
          if (kind === "") {
            setKind(item.label);
            setQuery("");
          } else {
            setChosen(`${kind}: ${item.label}`);
            setOpen(false);
          }
        }}
        footer={
          kind === "" ? (
            "Choose a type to see its templates."
          ) : (
            <Button
              variant="ghost"
              onClick={(): void => {
                setKind("");
                setQuery("");
              }}
            >
              Back to report types
            </Button>
          )
        }
      />
    </div>
  );
}

import { Button } from "@bosunkit/components/button";
import { CommandPalette, type CommandGroup, type CommandItem } from "@bosunkit/components/command-palette";
import { Switch } from "@bosunkit/components/switch";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";
export const description: string =
  "Simulate caller-owned loading and empty results. A loading menu keeps the query editable and blocks commands until results are supplied; no network request is made.";
const groups: readonly CommandGroup[] = [
  { id: "results", label: "Available results", items: [{ id: "draft", label: "Open latest draft" }] },
];
export default function Loading(): ReactElement {
  const [open, setOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false);
  const [busy, setBusy]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(true);
  const [empty, setEmpty]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false);
  const [selected, setSelected]: [string, Dispatch<SetStateAction<string>>] = useState("No selection.");
  return (
    <div style={{ display: "grid", gap: "var(--space-md)" }}>
      <div>
        <Button
          onClick={(): void => {
            setOpen(true);
          }}
        >
          Preview loading and empty states
        </Button>
      </div>
      <p role="status">{selected}</p>
      <CommandPalette
        open={open}
        onOpenChange={setOpen}
        title="Find a draft"
        closeLabel="Close draft search"
        searchLabel="Search drafts"
        clearLabel="Clear draft search"
        emptyText="No draft results. Try another query."
        loadingText="Loading draft results…"
        groups={empty ? [] : groups}
        busy={busy}
        onSelect={(item: CommandItem): void => {
          setSelected(item.label);
        }}
        footer={
          <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--space-lg)" }}>
            <label style={{ display: "flex", alignItems: "center", gap: "var(--space-sm)" }}>
              <Switch checked={busy} onCheckedChange={setBusy} />
              Simulate loading
            </label>
            <label style={{ display: "flex", alignItems: "center", gap: "var(--space-sm)" }}>
              <Switch checked={empty} onCheckedChange={setEmpty} />
              Empty result set
            </label>
          </div>
        }
      />
    </div>
  );
}