feat: add command and combobox components

2026-03-19 18:16:50 +08:00
parent b7d17383bf
commit 71ebb010b9
12 changed files with 1318 additions and 0 deletions
@@ -0,0 +1,109 @@
+import { useState } from "react";
+
+import {
+  Button,
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
+} from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const inlineItems = [
+  {
+    heading: "Navigation",
+    items: [
+      { label: "Open docs", shortcut: "G D", value: "open-docs" },
+      { label: "Go to releases", shortcut: "G R", value: "go-releases" }
+    ]
+  },
+  {
+    heading: "Actions",
+    items: [
+      { label: "Publish update", shortcut: "P U", value: "publish-update" },
+      { label: "Invite reviewer", shortcut: "I R", value: "invite-reviewer" }
+    ]
+  }
+];
+
+function InlineCommandShowcase() {
+  return (
+    <Command className="w-[520px]">
+      <CommandInput placeholder="Search across the workspace" />
+      <CommandList>
+        <CommandEmpty>No matching actions.</CommandEmpty>
+        {inlineItems.map((group, index) => (
+          <div key={group.heading}>
+            <CommandGroup heading={group.heading}>
+              {group.items.map((item) => (
+                <CommandItem key={item.value} value={item.value}>
+                  {item.label}
+                  <CommandShortcut>{item.shortcut}</CommandShortcut>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+            {index < inlineItems.length - 1 ? <CommandSeparator /> : null}
+          </div>
+        ))}
+      </CommandList>
+    </Command>
+  );
+}
+
+function DialogCommandShowcase() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="flex justify-center">
+      <Button onClick={() => setOpen(true)}>Open command palette</Button>
+      <CommandDialog onOpenChange={setOpen} open={open}>
+        <CommandInput placeholder="Type a command or search" />
+        <CommandList>
+          <CommandEmpty>No commands available.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem value="launch-checklist">Launch checklist</CommandItem>
+            <CommandItem value="rollout-audit">Rollout audit</CommandItem>
+            <CommandItem value="brand-theme">Brand theme tokens</CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="People">
+            <CommandItem value="jordan-lee">
+              Jordan Lee
+              <CommandShortcut>@</CommandShortcut>
+            </CommandItem>
+            <CommandItem value="avery-carter">
+              Avery Carter
+              <CommandShortcut>@</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+    </div>
+  );
+}
+
+const meta = {
+  title: "Components/Command",
+  component: InlineCommandShowcase,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof InlineCommandShowcase>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: () => <InlineCommandShowcase />
+};
+
+export const DialogPalette: Story = {
+  render: () => <DialogCommandShowcase />
+};