@alexgorbatchev/shadcn 0.0.19 → 0.0.21

package/llms/components/navigation/Command.md

@@ -0,0 +1,471 @@
+# Command
+
+Story: @alexgorbatchev/shadcn/components/navigation/Command
+Source: src/components/stories/navigation/Command.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/navigation/Command.stories.tsx)
+
+## Public imports
+
+```tsx
+import { DirectionProvider, Button, DialogTrigger } from "@alexgorbatchev/shadcn";
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@alexgorbatchev/shadcn/command";
+```
+
+## Supporting imports
+
+```tsx
+import { useState } from "react";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { CalendarIcon, SettingsIcon, UserIcon } from "lucide-react";
+```
+
+## Default component
+
+```tsx
+Command
+```
+
+## Default args
+
+```tsx
+{ loop: true }
+```
+
+## Default render
+
+```tsx
+function Render(args) {
+    const [action, setAction] = useState("None");
+    return (<div className="w-80 border border-border">
+        <Command {...args} label="Search commands">
+          <CommandInput placeholder="Search commands" aria-label="Search commands"/>
+          <CommandList label="Commands">
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Workspace">
+              <CommandItem value="new-file" keywords={["create"]} onSelect={setAction}>
+                New file<CommandShortcut>Ctrl+N</CommandShortcut>
+              </CommandItem>
+              <CommandItem value="delete" disabled>
+                Delete workspace
+              </CommandItem>
+              <CommandItem value="settings" onSelect={setAction}>
+                Settings
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Help">
+              <CommandItem value="support" onSelect={setAction}>
+                Contact support
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+        <output aria-label="Executed command">{action}</output>
+      </div>);
+}
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### Default
+
+```tsx
+{}
+```
+
+### Compact
+
+```tsx
+{
+    args: { density: "compact" }
+}
+```
+
+### ExternalFiltering
+
+```tsx
+{
+    args: { shouldFilter: false }
+}
+```
+
+### Dialog
+
+```tsx
+{
+    render: function Render() {
+        const [isOpen, setOpen] = useState(false);
+        return (<>
+        <Button onClick={() => setOpen(true)}>Open command palette</Button>
+        <CommandDialog open={isOpen} onOpenChange={setOpen} density="compact" showCloseButton>
+          <Command label="Search commands">
+            <CommandInput />
+            <CommandList>
+              <CommandGroup heading="Workspace">
+                <CommandItem value="settings" onSelect={() => setOpen(false)}>
+                  Settings
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </CommandDialog>
+      </>);
+    }
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    decorators: [
+        (Story) => (<DirectionProvider direction="rtl">
+        <div dir="rtl">
+          <Story />
+        </div>
+      </DirectionProvider>),
+    ]
+}
+```
+
+### CheckedItem
+
+```tsx
+{
+    render: function Render() {
+        const [selection, setSelection] = useState("calendar");
+        return (<div className="w-80">
+        <Command label="Choose a destination">
+          <CommandInput aria-label="Find destination"/>
+          <CommandList label="Destinations">
+            <CommandGroup heading="Navigation">
+              <CommandItem value="calendar" data-checked={selection === "calendar"} onSelect={setSelection}>
+                <span>Calendar</span>
+              </CommandItem>
+              <CommandItem value="settings" data-checked={selection === "settings"} onSelect={setSelection}>
+                <span>Settings</span>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+        <output aria-label="Chosen destination">{selection}</output>
+      </div>);
+    }
+}
+```
+
+### RightToLeftCheckedItem
+
+```tsx
+{
+    render: function Render() {
+        const [selection, setSelection] = useState("calendar");
+        return (<div className="w-80">
+        <Command label="Choose a destination">
+          <CommandInput aria-label="Find destination"/>
+          <CommandList label="Destinations">
+            <CommandGroup heading="Navigation">
+              <CommandItem value="calendar" data-checked={selection === "calendar"} onSelect={setSelection}>
+                <span>Calendar</span>
+              </CommandItem>
+              <CommandItem value="settings" data-checked={selection === "settings"} onSelect={setSelection}>
+                <span>Settings</span>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+        <output aria-label="Chosen destination">{selection}</output>
+      </div>);
+    },
+    decorators: RightToLeft.decorators
+}
+```
+
+### Shortcuts
+
+```tsx
+{
+    render: function Render() {
+        const [isOpen, setOpen] = useState(false);
+        const [action, setAction] = useState("None");
+        return (<>
+        <Button onClick={() => setOpen(true)}>Open account commands</Button>
+        <CommandDialog open={isOpen} onOpenChange={setOpen} title="Account commands" description="Choose an account action." showCloseButton>
+          <Command label="Account actions">
+            <CommandInput />
+            <CommandList label="Account actions">
+              <CommandEmpty>No account actions.</CommandEmpty>
+              <CommandGroup heading="Account">
+                <CommandItem value="profile" onSelect={(value) => {
+                setAction(value);
+                setOpen(false);
+            }}>
+                  <UserIcon aria-hidden="true"/>
+                  <span>Profile</span>
+                  <CommandShortcut>Ctrl+P</CommandShortcut>
+                </CommandItem>
+                <CommandItem value="settings" onSelect={(value) => {
+                setAction(value);
+                setOpen(false);
+            }}>
+                  <SettingsIcon aria-hidden="true"/>
+                  <span>Settings</span>
+                  <CommandShortcut>Ctrl+S</CommandShortcut>
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </CommandDialog>
+        <output aria-label="Account command">{action}</output>
+      </>);
+    }
+}
+```
+
+### RightToLeftShortcuts
+
+```tsx
+{
+    render: function Render() {
+        const [isOpen, setOpen] = useState(false);
+        const [action, setAction] = useState("None");
+        return (<>
+        <Button onClick={() => setOpen(true)}>Open account commands</Button>
+        <CommandDialog open={isOpen} onOpenChange={setOpen} title="Account commands" description="Choose an account action." showCloseButton>
+          <Command label="Account actions">
+            <CommandInput />
+            <CommandList label="Account actions">
+              <CommandEmpty>No account actions.</CommandEmpty>
+              <CommandGroup heading="Account">
+                <CommandItem value="profile" onSelect={(value) => {
+                setAction(value);
+                setOpen(false);
+            }}>
+                  <UserIcon aria-hidden="true"/>
+                  <span>Profile</span>
+                  <CommandShortcut>Ctrl+P</CommandShortcut>
+                </CommandItem>
+                <CommandItem value="settings" onSelect={(value) => {
+                setAction(value);
+                setOpen(false);
+            }}>
+                  <SettingsIcon aria-hidden="true"/>
+                  <span>Settings</span>
+                  <CommandShortcut>Ctrl+S</CommandShortcut>
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </CommandDialog>
+        <output aria-label="Account command">{action}</output>
+      </>);
+    },
+    decorators: RightToLeft.decorators
+}
+```
+
+### Groups
+
+```tsx
+{
+    render: function Render() {
+        const [isOpen, setOpen] = useState(false), [action, setAction] = useState("None");
+        return (<>
+        <Button onClick={() => setOpen(true)}>Open grouped commands</Button>
+        <CommandDialog open={isOpen} onOpenChange={setOpen} title="Grouped commands">
+          <Command label="Grouped actions">
+            <CommandInput />
+            <CommandList label="Grouped actions">
+              <CommandEmpty>No grouped actions.</CommandEmpty>
+              <CommandGroup heading="Suggestions">
+                <CommandItem value="calendar" onSelect={setAction}>
+                  <CalendarIcon aria-hidden="true"/>
+                  Calendar
+                </CommandItem>
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup heading="Settings">
+                <CommandItem value="profile" onSelect={setAction}>
+                  <UserIcon aria-hidden="true"/>
+                  Profile
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </CommandDialog>
+        <output aria-label="Grouped command">{action}</output>
+      </>);
+    }
+}
+```
+
+### RightToLeftGroups
+
+```tsx
+{
+    render: function Render() {
+        const [isOpen, setOpen] = useState(false), [action, setAction] = useState("None");
+        return (<>
+        <Button onClick={() => setOpen(true)}>Open grouped commands</Button>
+        <CommandDialog open={isOpen} onOpenChange={setOpen} title="Grouped commands">
+          <Command label="Grouped actions">
+            <CommandInput />
+            <CommandList label="Grouped actions">
+              <CommandEmpty>No grouped actions.</CommandEmpty>
+              <CommandGroup heading="Suggestions">
+                <CommandItem value="calendar" onSelect={setAction}>
+                  <CalendarIcon aria-hidden="true"/>
+                  Calendar
+                </CommandItem>
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup heading="Settings">
+                <CommandItem value="profile" onSelect={setAction}>
+                  <UserIcon aria-hidden="true"/>
+                  Profile
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </CommandDialog>
+        <output aria-label="Grouped command">{action}</output>
+      </>);
+    },
+    decorators: RightToLeft.decorators
+}
+```
+
+### Scrollable
+
+```tsx
+{
+    render: function Render() {
+        const [isOpen, setOpen] = useState(false), [action, setAction] = useState("None");
+        return (<>
+        <Button onClick={() => setOpen(true)}>Open project commands</Button>
+        <CommandDialog open={isOpen} onOpenChange={setOpen} title="Project commands">
+          <Command label="Project actions">
+            <CommandInput />
+            <CommandList label="Project actions">
+              <CommandEmpty>No project actions.</CommandEmpty>
+              <CommandGroup heading="Projects">
+                {Array.from({ length: 40 }, (_, index) => (<CommandItem key={index} value={`project-${index + 1}`} onSelect={setAction}>
+                    Project {index + 1}
+                  </CommandItem>))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </CommandDialog>
+        <output aria-label="Project command">{action}</output>
+      </>);
+    }
+}
+```
+
+### RightToLeftScrollable
+
+```tsx
+{
+    render: function Render() {
+        const [isOpen, setOpen] = useState(false), [action, setAction] = useState("None");
+        return (<>
+        <Button onClick={() => setOpen(true)}>Open project commands</Button>
+        <CommandDialog open={isOpen} onOpenChange={setOpen} title="Project commands">
+          <Command label="Project actions">
+            <CommandInput />
+            <CommandList label="Project actions">
+              <CommandEmpty>No project actions.</CommandEmpty>
+              <CommandGroup heading="Projects">
+                {Array.from({ length: 40 }, (_, index) => (<CommandItem key={index} value={`project-${index + 1}`} onSelect={setAction}>
+                    Project {index + 1}
+                  </CommandItem>))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </CommandDialog>
+        <output aria-label="Project command">{action}</output>
+      </>);
+    },
+    decorators: RightToLeft.decorators
+}
+```
+
+### Payload
+
+```tsx
+{
+    render: function Render() {
+        const [handle] = useState(() => DialogPrimitive.createHandle<string>());
+        const [selected, setSelected] = useState("None");
+        return (<>
+        <div className="flex gap-control-gap">
+          <DialogTrigger handle={handle} payload="Alex" render={<Button />}>
+            Commands for Alex
+          </DialogTrigger>
+          <DialogTrigger handle={handle} payload="Blair" render={<Button />}>
+            Commands for Blair
+          </DialogTrigger>
+          <Button onClick={() => handle.openWithPayload("Casey")}>Commands for Casey</Button>
+        </div>
+        <CommandDialog handle={handle} title="Account commands" showCloseButton>
+          {({ payload }) => (<Command label="Payload actions">
+              <CommandInput />
+              <CommandList>
+                <CommandGroup heading={payload?.toUpperCase()}>
+                  <CommandItem value="profile" onSelect={() => {
+                    setSelected(`Profile for ${payload?.toUpperCase()}`);
+                    handle.close();
+                }}>
+                    View profile for {payload}
+                  </CommandItem>
+                </CommandGroup>
+              </CommandList>
+            </Command>)}
+        </CommandDialog>
+        <output aria-label="Payload command">{selected}</output>
+      </>);
+    }
+}
+```
+
+### RightToLeftPayload
+
+```tsx
+{
+    render: function Render() {
+        const [handle] = useState(() => DialogPrimitive.createHandle<string>());
+        const [selected, setSelected] = useState("None");
+        return (<>
+        <div className="flex gap-control-gap">
+          <DialogTrigger handle={handle} payload="Alex" render={<Button />}>
+            Commands for Alex
+          </DialogTrigger>
+          <DialogTrigger handle={handle} payload="Blair" render={<Button />}>
+            Commands for Blair
+          </DialogTrigger>
+          <Button onClick={() => handle.openWithPayload("Casey")}>Commands for Casey</Button>
+        </div>
+        <CommandDialog handle={handle} title="Account commands" showCloseButton>
+          {({ payload }) => (<Command label="Payload actions">
+              <CommandInput />
+              <CommandList>
+                <CommandGroup heading={payload?.toUpperCase()}>
+                  <CommandItem value="profile" onSelect={() => {
+                    setSelected(`Profile for ${payload?.toUpperCase()}`);
+                    handle.close();
+                }}>
+                    View profile for {payload}
+                  </CommandItem>
+                </CommandGroup>
+              </CommandList>
+            </Command>)}
+        </CommandDialog>
+        <output aria-label="Payload command">{selected}</output>
+      </>);
+    },
+    decorators: RightToLeft.decorators
+}
+```