gladvn 0.2.14

package/src/dev/showcase/command.tsx

@@ -0,0 +1,245 @@
+import { Button } from "../../components/micro/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "../../components/micro/command";
+import { CommandDialog } from "../../components/macro/command-preset";
+import {
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
+import {
+  CalculatorIcon,
+  CalendarIcon,
+  CreditCardIcon,
+  SettingsIcon,
+  SmileIcon,
+  UserIcon,
+} from "lucide-react";
+import { useState } from "react";
+
+function CommandMicroShowcase() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="space-y-10 mt-6">
+      <ExampleGrid>
+        <ExampleSection
+          label="Default"
+          description="Bảng lệnh có thể tìm kiếm với các mục được nhóm."
+          codeString={`<Command className="border border-border rounded-xl shadow-sm overflow-hidden bg-background w-full">
+    <CommandInput placeholder="Type a command or search..." />
+    <CommandList>
+      <CommandEmpty>No results found.</CommandEmpty>
+      <CommandGroup heading="Suggestions">
+        <CommandItem>
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          <span>Calendar</span>
+        </CommandItem>
+        <CommandItem>
+          <SmileIcon className="mr-2 h-4 w-4" />
+          <span>Search Emoji</span>
+        </CommandItem>
+        <CommandItem disabled>
+          <CalculatorIcon className="mr-2 h-4 w-4" />
+          <span>Calculator</span>
+        </CommandItem>
+      </CommandGroup>
+      <CommandSeparator />
+      <CommandGroup heading="Settings">
+        <CommandItem>
+          <UserIcon className="mr-2 h-4 w-4" />
+          <span>Profile</span>
+          <CommandShortcut>⌘P</CommandShortcut>
+        </CommandItem>
+        <CommandItem>
+          <CreditCardIcon className="mr-2 h-4 w-4" />
+          <span>Billing</span>
+          <CommandShortcut>⌘B</CommandShortcut>
+        </CommandItem>
+        <CommandItem>
+          <SettingsIcon className="mr-2 h-4 w-4" />
+          <span>Settings</span>
+          <CommandShortcut>⌘S</CommandShortcut>
+        </CommandItem>
+      </CommandGroup>
+    </CommandList>
+  </Command>
+`}
+        >
+          <Command className="border border-border rounded-xl shadow-sm overflow-hidden bg-background w-full">
+            <CommandInput placeholder="Type a command or search..." />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup heading="Suggestions">
+                <CommandItem>
+                  <CalendarIcon className="mr-2 h-4 w-4" />
+                  <span>Calendar</span>
+                </CommandItem>
+                <CommandItem>
+                  <SmileIcon className="mr-2 h-4 w-4" />
+                  <span>Search Emoji</span>
+                </CommandItem>
+                <CommandItem disabled>
+                  <CalculatorIcon className="mr-2 h-4 w-4" />
+                  <span>Calculator</span>
+                </CommandItem>
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup heading="Settings">
+                <CommandItem>
+                  <UserIcon className="mr-2 h-4 w-4" />
+                  <span>Profile</span>
+                  <CommandShortcut>⌘P</CommandShortcut>
+                </CommandItem>
+                <CommandItem>
+                  <CreditCardIcon className="mr-2 h-4 w-4" />
+                  <span>Billing</span>
+                  <CommandShortcut>⌘B</CommandShortcut>
+                </CommandItem>
+                <CommandItem>
+                  <SettingsIcon className="mr-2 h-4 w-4" />
+                  <span>Settings</span>
+                  <CommandShortcut>⌘S</CommandShortcut>
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </ExampleSection>
+
+        <ExampleSection
+          label="Flat List"
+          description="Nhóm duy nhất không có tiêu đề."
+          codeString={`<Command className="border border-border rounded-xl shadow-sm overflow-hidden bg-background w-full">
+    <CommandInput placeholder="Search actions..." />
+    <CommandList>
+      <CommandEmpty>No actions found.</CommandEmpty>
+      <CommandGroup>
+        <CommandItem>
+          <UserIcon className="mr-2 h-4 w-4" />
+          <span>View Profile</span>
+        </CommandItem>
+        <CommandItem>
+          <SettingsIcon className="mr-2 h-4 w-4" />
+          <span>Open Settings</span>
+        </CommandItem>
+        <CommandItem>
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          <span>Schedule Meeting</span>
+        </CommandItem>
+        <CommandItem>
+          <CreditCardIcon className="mr-2 h-4 w-4" />
+          <span>Manage Billing</span>
+        </CommandItem>
+      </CommandGroup>
+    </CommandList>
+  </Command>
+`}
+        >
+          <Command className="border border-border rounded-xl shadow-sm overflow-hidden bg-background w-full">
+            <CommandInput placeholder="Search actions..." />
+            <CommandList>
+              <CommandEmpty>No actions found.</CommandEmpty>
+              <CommandGroup>
+                <CommandItem>
+                  <UserIcon className="mr-2 h-4 w-4" />
+                  <span>View Profile</span>
+                </CommandItem>
+                <CommandItem>
+                  <SettingsIcon className="mr-2 h-4 w-4" />
+                  <span>Open Settings</span>
+                </CommandItem>
+                <CommandItem>
+                  <CalendarIcon className="mr-2 h-4 w-4" />
+                  <span>Schedule Meeting</span>
+                </CommandItem>
+                <CommandItem>
+                  <CreditCardIcon className="mr-2 h-4 w-4" />
+                  <span>Manage Billing</span>
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </ExampleSection>
+      </ExampleGrid>
+
+      <ExampleSection
+        label="Dialog Menu"
+        description="Menu lệnh được hiển thị bên trong dialog."
+        codeString={`<Button onClick={() => setOpen(true)}>Open Command Palette</Button>
+<CommandDialog open={open} onOpenChange={setOpen}>
+  <CommandInput placeholder="Type a command or search..." />
+  <CommandList>
+    <CommandEmpty>No results found.</CommandEmpty>
+    <CommandGroup heading="Suggestions">
+      <CommandItem>
+        <CalendarIcon className="mr-2 h-4 w-4" />
+        <span>Calendar</span>
+      </CommandItem>
+      <CommandItem>
+        <SmileIcon className="mr-2 h-4 w-4" />
+        <span>Search Emoji</span>
+      </CommandItem>
+    </CommandGroup>
+  </CommandList>
+</CommandDialog>
+`}
+      >
+        <Button onClick={() => setOpen(true)}>Open Command Palette</Button>
+        <CommandDialog open={open} onOpenChange={setOpen}>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Suggestions">
+              <CommandItem>
+                <CalendarIcon className="mr-2 h-4 w-4" />
+                <span>Calendar</span>
+              </CommandItem>
+              <CommandItem>
+                <SmileIcon className="mr-2 h-4 w-4" />
+                <span>Search Emoji</span>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </CommandDialog>
+      </ExampleSection>
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────────────────
+// SECTION 3: Entry point
+// ──────────────────────────────────────────────────────────
+export default function CommandShowcase() {
+  return (
+    <Showcase
+      title="Command"
+      description="Command palette có tìm kiếm, kích hoạt bằng phím tắt (⌘K)."
+      generalConcept={
+        <ShowcaseDocs>
+          <DocsP>
+            Dùng để tạo các bảng lệnh (command palette) hoặc menu chọn có khả
+            năng tìm kiếm nhanh, thường kích hoạt bằng phím tắt (như Cmd+K).
+            Thích hợp cho các ứng dụng có nhiều chức năng phức tạp cần điều
+            hướng nhanh.
+          </DocsP>
+        </ShowcaseDocs>
+      }
+      tabs={[
+        {
+          label: "Micro (Primitive)",
+          content: <CommandMicroShowcase />,
+        },
+      ]}
+    />
+  );
+}

package/src/dev/showcase/context-menu.tsx

@@ -0,0 +1,239 @@
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+  ContextMenuPortal,
+} from "../../components/micro/context-menu";
+import {
+  DocsP,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
+
+import { useState } from "react";
+
+// ──────────────────────────────────────────────────────────
+// SECTION 2: Micro Content (không export)
+// ──────────────────────────────────────────────────────────
+function ContextMenuMicroShowcase() {
+  const [showBookmarks, setShowBookmarks] = useState(true);
+  const [showFullUrls, setShowFullUrls] = useState(false);
+  const [person, setPerson] = useState("pedro");
+
+  return (
+    <div className="space-y-10 mt-6">
+      <ExampleSection
+        label="Full Context Menu"
+        description="Nhấp chuột phải vào khu vực bên dưới để mở."
+        codeString={`<ContextMenu>
+  <ContextMenuTrigger className="flex h-[150px] w-full max-w-[400px] items-center justify-center rounded-md border border-border border-dashed text-sm">
+    Right click here
+  </ContextMenuTrigger>
+  <ContextMenuPortal><ContextMenuContent className="w-64">
+    <ContextMenuItem inset>
+      Back
+      <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+    </ContextMenuItem>
+    <ContextMenuItem inset disabled>
+      Forward
+      <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+    </ContextMenuItem>
+    <ContextMenuItem inset>
+      Reload
+      <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+    </ContextMenuItem>
+    <ContextMenuSub>
+      <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+      <ContextMenuPortal><ContextMenuSubContent className="w-48">
+        <ContextMenuItem>
+          Save Page As...
+          <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+        <ContextMenuItem>Name Window...</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>Developer Tools</ContextMenuItem>
+      </ContextMenuSubContent></ContextMenuPortal>
+    </ContextMenuSub>
+    <ContextMenuSeparator />
+    <ContextMenuCheckboxItem
+      checked={showBookmarks}
+      onCheckedChange={setShowBookmarks}
+    >
+      Show Bookmarks Bar
+      <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+    </ContextMenuCheckboxItem>
+    <ContextMenuCheckboxItem
+      checked={showFullUrls}
+      onCheckedChange={setShowFullUrls}
+    >
+      Show Full URLs
+    </ContextMenuCheckboxItem>
+    <ContextMenuSeparator />
+    <ContextMenuGroup>
+      <ContextMenuLabel inset>People</ContextMenuLabel>
+      <ContextMenuSeparator />
+      <ContextMenuRadioGroup value={person} onValueChange={setPerson}>
+        <ContextMenuRadioItem value="pedro">
+          Pedro Duarte
+        </ContextMenuRadioItem>
+        <ContextMenuRadioItem value="colm">
+          Colm Tuite
+        </ContextMenuRadioItem>
+      </ContextMenuRadioGroup>
+    </ContextMenuGroup>
+  </ContextMenuContent></ContextMenuPortal>
+</ContextMenu>
+`}
+      >
+        <ContextMenu>
+          <ContextMenuTrigger className="flex h-[150px] w-full max-w-[400px] items-center justify-center rounded-md border border-border border-dashed text-sm">
+            Right click here
+          </ContextMenuTrigger>
+
+          <ContextMenuPortal>
+            <ContextMenuContent className="w-64">
+              <ContextMenuItem inset>
+                Back
+                <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuItem inset disabled>
+                Forward
+                <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuItem inset>
+                Reload
+                <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuSub>
+                <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+
+                <ContextMenuPortal>
+                  <ContextMenuSubContent className="w-48">
+                    <ContextMenuItem>
+                      Save Page As...
+                      <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+                    </ContextMenuItem>
+                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+                    <ContextMenuItem>Name Window...</ContextMenuItem>
+                    <ContextMenuSeparator />
+                    <ContextMenuItem>Developer Tools</ContextMenuItem>
+                  </ContextMenuSubContent>
+                </ContextMenuPortal>
+              </ContextMenuSub>
+              <ContextMenuSeparator />
+              <ContextMenuCheckboxItem
+                checked={showBookmarks}
+                onCheckedChange={setShowBookmarks}
+              >
+                Show Bookmarks Bar
+                <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+              </ContextMenuCheckboxItem>
+              <ContextMenuCheckboxItem
+                checked={showFullUrls}
+                onCheckedChange={setShowFullUrls}
+              >
+                Show Full URLs
+              </ContextMenuCheckboxItem>
+              <ContextMenuSeparator />
+              <ContextMenuGroup>
+                <ContextMenuLabel inset>People</ContextMenuLabel>
+                <ContextMenuSeparator />
+                <ContextMenuRadioGroup value={person} onValueChange={setPerson}>
+                  <ContextMenuRadioItem value="pedro">
+                    Pedro Duarte
+                  </ContextMenuRadioItem>
+                  <ContextMenuRadioItem value="colm">
+                    Colm Tuite
+                  </ContextMenuRadioItem>
+                </ContextMenuRadioGroup>
+              </ContextMenuGroup>
+            </ContextMenuContent>
+          </ContextMenuPortal>
+        </ContextMenu>
+      </ExampleSection>
+
+      <ExampleSection
+        label="Destructive Variant"
+        description="Context menu với các action nguy hiểm hiển thị màu destructive."
+        codeString={`<ContextMenu>
+  <ContextMenuTrigger className="flex h-[100px] w-full max-w-[300px] items-center justify-center rounded-md border border-border border-dashed text-sm">
+    Right click here
+  </ContextMenuTrigger>
+  <ContextMenuPortal><ContextMenuContent className="w-52">
+    <ContextMenuItem>
+      Rename
+      <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+    </ContextMenuItem>
+    <ContextMenuItem>Duplicate</ContextMenuItem>
+    <ContextMenuSeparator />
+    <ContextMenuItem variant="destructive">
+      Delete
+      <ContextMenuShortcut>⌫</ContextMenuShortcut>
+    </ContextMenuItem>
+  </ContextMenuContent></ContextMenuPortal>
+</ContextMenu>
+`}
+      >
+        <ContextMenu>
+          <ContextMenuTrigger className="flex h-[100px] w-full max-w-[300px] items-center justify-center rounded-md border border-border border-dashed text-sm">
+            Right click here
+          </ContextMenuTrigger>
+
+          <ContextMenuPortal>
+            <ContextMenuContent className="w-52">
+              <ContextMenuItem>
+                Rename
+                <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuItem>Duplicate</ContextMenuItem>
+              <ContextMenuSeparator />
+              <ContextMenuItem variant="destructive">
+                Delete
+                <ContextMenuShortcut>⌫</ContextMenuShortcut>
+              </ContextMenuItem>
+            </ContextMenuContent>
+          </ContextMenuPortal>
+        </ContextMenu>
+      </ExampleSection>
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────────────────
+// SECTION 3: Entry point (export default)
+// ──────────────────────────────────────────────────────────
+export default function ContextMenuShowcase() {
+  return (
+    <Showcase
+      title="Context Menu"
+      description="Menu ngữ cảnh hiển thị khi click chuột phải — dùng cho các hành động nhanh."
+      generalConcept={
+        <ShowcaseDocs>
+          <DocsP>
+            Dùng để hiển thị danh sách các tuỳ chọn hoặc hành động liên quan tới
+            phần tử mà người dùng vừa nhấp chuột phải vào.
+          </DocsP>
+        </ShowcaseDocs>
+      }
+      tabs={[
+        {
+          label: "Micro (Primitive)",
+          content: <ContextMenuMicroShowcase />,
+        },
+      ]}
+    />
+  );
+}