ruler-components 0.1.0 → 0.1.2

package/components/docs/menu-doc-page.tsx

@@ -1,373 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import {
-  Check,
-  Copy,
-  Download,
-  FileText,
-  Folder,
-  LayoutDashboard,
-  LogOut,
-  Menu as MenuIcon,
-  Pencil,
-  Plus,
-  Settings,
-  Share2,
-  Star,
-  Trash2,
-  User,
-  Users,
-} from "lucide-react";
-import { Menu, MenuItem, MenuLabel, MenuDivider, type MenuProps } from "@/components/ui/menu";
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Tooltip } from "@/components/ui/tooltip";
-import {
-  DocsAccessibility,
-  DocsApiSection,
-  DocsApiTable,
-  DocsPage,
-  DocsPageHeader,
-  DocsSection,
-  DocsSectionGrid,
-} from "@/components/docs/docs-page";
-import { cn } from "@/lib/cn";
-
-const MENU_API_ROWS = [
-  { prop: "variant", type: '"default" | "ghost"', default: '"default"', description: "Bordered surface or a transparent list" },
-  { prop: "children", type: "ReactNode", default: "—", description: "MenuItem, MenuLabel, and MenuDivider elements" },
-  { prop: "className", type: "string", default: "—", description: "Additional CSS classes" },
-];
-
-const ITEM_API_ROWS = [
-  { prop: "label", type: "string", default: "—", description: "Row text" },
-  { prop: "icon", type: "LucideIcon", default: "—", description: "Optional leading icon" },
-  { prop: "shortcut", type: "string", default: "—", description: "Trailing keyboard shortcut hint, e.g. \"⌘K\"" },
-  { prop: "selected", type: "boolean", default: "false", description: "Shows a trailing check mark" },
-  { prop: "disabled", type: "boolean", default: "false", description: "Disables the item" },
-  { prop: "onClick", type: "() => void", default: "—", description: "Called when the item is chosen" },
-  { prop: "variant", type: '"default" | "destructive"', default: '"default"', description: "Red styling for irreversible actions like delete" },
-];
-
-const ACCESSIBILITY_ITEMS = [
-  "Menu carries role=\"menu\" and each MenuItem is a real <button> with role=\"menuitem\" — reachable and activatable via keyboard by default.",
-  "MenuDivider carries role=\"separator\" — it's structural, not another option.",
-  "Disabled items use the native disabled attribute, so they're skipped by screen readers and keyboard focus.",
-  "Pair the destructive item variant with an explicit label, like \"Delete\" rather than a bare icon.",
-  "Unlike Dropdown, Menu has no built-in open/close behavior — wire up your own trigger (a click, a right-click, a route) and unmount the Menu when it should close.",
-];
-
-type Variant = NonNullable<MenuProps["variant"]>;
-
-const VARIANTS: { value: Variant; label: string }[] = [
-  { value: "default", label: "Default" },
-  { value: "ghost", label: "Ghost" },
-];
-
-function codeFor(variant: Variant, withIcons: boolean, withShortcuts: boolean, withDestructive: boolean) {
-  const props = variant !== "default" ? ` variant="${variant}"` : "";
-  const icon = (name: string) => (withIcons ? ` icon={${name}}` : "");
-  const shortcut = (key: string) => (withShortcuts ? ` shortcut="${key}"` : "");
-  const items = [
-    `<MenuItem label="Rename"${icon("Pencil")}${shortcut("⌘R")} />`,
-    `<MenuItem label="Duplicate"${icon("Copy")}${shortcut("⌘D")} />`,
-    `<MenuItem label="Share"${icon("Share2")} />`,
-  ];
-  if (withDestructive) {
-    items.push("<MenuDivider />");
-    items.push(`<MenuItem label="Delete"${icon("Trash2")} variant="destructive" />`);
-  }
-  const body = items.join("\n  ");
-  return `<Menu${props}>\n  ${body}\n</Menu>`;
-}
-
-export function MenuDocPage() {
-  const [variant, setVariant] = useState<Variant>("default");
-  const [withIcons, setWithIcons] = useState(true);
-  const [withShortcuts, setWithShortcuts] = useState(true);
-  const [withDestructive, setWithDestructive] = useState(true);
-  const [copied, setCopied] = useState(false);
-
-  const [view, setView] = useState<"grid" | "list">("grid");
-  const [favorited, setFavorited] = useState(true);
-
-  const snippet = codeFor(variant, withIcons, withShortcuts, withDestructive);
-
-  function copySnippet() {
-    navigator.clipboard.writeText(snippet).catch(() => {});
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  }
-
-  return (
-    <DocsPage>
-      <DocsPageHeader
-        icon={MenuIcon}
-        title="Menu"
-        description="A standalone list of actions — the visual surface behind a context menu, command palette, or sidebar, rendered inline rather than anchored to a trigger."
-      />
-
-      <DocsSection
-        first
-        title="Playground"
-        description="Build a menu and copy the exact markup — icons, shortcuts, and a destructive action, live."
-      >
-        <div className="overflow-hidden rounded-2xl border border-zinc-200 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:border-zinc-800 dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)]">
-          <div className="relative flex min-h-[16rem] items-center justify-center overflow-hidden bg-zinc-50 p-6 dark:bg-zinc-900/40">
-            <div
-              aria-hidden
-              className="pointer-events-none absolute inset-0 opacity-[0.4] dark:opacity-[0.15]"
-              style={{
-                backgroundImage:
-                  "linear-gradient(to right, rgb(161 161 170 / 0.35) 1px, transparent 1px), linear-gradient(to bottom, rgb(161 161 170 / 0.35) 1px, transparent 1px)",
-                backgroundSize: "24px 24px",
-              }}
-            />
-            <div
-              key={`${variant}-${withIcons}-${withShortcuts}-${withDestructive}`}
-              className="relative animate-[pagination-pop_0.2s_ease-out]"
-            >
-              <Menu variant={variant}>
-                <MenuItem
-                  label="Rename"
-                  icon={withIcons ? Pencil : undefined}
-                  shortcut={withShortcuts ? "⌘R" : undefined}
-                />
-                <MenuItem
-                  label="Duplicate"
-                  icon={withIcons ? Copy : undefined}
-                  shortcut={withShortcuts ? "⌘D" : undefined}
-                />
-                <MenuItem label="Share" icon={withIcons ? Share2 : undefined} />
-                {withDestructive && (
-                  <>
-                    <MenuDivider />
-                    <MenuItem
-                      label="Delete"
-                      icon={withIcons ? Trash2 : undefined}
-                      variant="destructive"
-                    />
-                  </>
-                )}
-              </Menu>
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-5 border-t border-zinc-200 p-5 dark:border-zinc-800">
-            <div className="flex flex-wrap items-start justify-between gap-6">
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Variant
-                </p>
-                <div className="flex flex-wrap items-center gap-1 rounded-lg border border-zinc-200 bg-zinc-50 p-1 dark:border-zinc-800 dark:bg-zinc-900/60">
-                  {VARIANTS.map((v) => (
-                    <button
-                      key={v.value}
-                      type="button"
-                      onClick={() => setVariant(v.value)}
-                      className={cn(
-                        "rounded-md px-3 py-1.5 text-xs font-medium uppercase tracking-wide transition-colors",
-                        variant === v.value
-                          ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
-                          : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
-                      )}
-                    >
-                      {v.label}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Icons
-                </p>
-                <button
-                  type="button"
-                  onClick={() => setWithIcons((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    withIcons
-                      ? "border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900"
-                      : "border-zinc-200 text-zinc-500 hover:border-zinc-300 dark:border-zinc-700 dark:text-zinc-400"
-                  )}
-                >
-                  {withIcons ? "On" : "Off"}
-                </button>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Shortcuts
-                </p>
-                <button
-                  type="button"
-                  onClick={() => setWithShortcuts((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    withShortcuts
-                      ? "border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900"
-                      : "border-zinc-200 text-zinc-500 hover:border-zinc-300 dark:border-zinc-700 dark:text-zinc-400"
-                  )}
-                >
-                  {withShortcuts ? "On" : "Off"}
-                </button>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Destructive item
-                </p>
-                <button
-                  type="button"
-                  onClick={() => setWithDestructive((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    withDestructive
-                      ? "border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900"
-                      : "border-zinc-200 text-zinc-500 hover:border-zinc-300 dark:border-zinc-700 dark:text-zinc-400"
-                  )}
-                >
-                  {withDestructive ? "On" : "Off"}
-                </button>
-              </div>
-            </div>
-
-            <div className="flex items-center justify-between gap-3 rounded-xl bg-zinc-900 px-4 py-3 dark:bg-black">
-              <pre className="overflow-x-auto font-mono text-[13px] leading-relaxed text-zinc-100">
-                <code>{snippet}</code>
-              </pre>
-              <Tooltip content={copied ? "Copied!" : "Copy code"}>
-                <button
-                  type="button"
-                  onClick={copySnippet}
-                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-white/10 hover:text-white"
-                >
-                  {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
-                </button>
-              </Tooltip>
-            </div>
-          </div>
-        </div>
-      </DocsSection>
-
-      <DocsSection
-        title="Menu vs. Dropdown"
-        description="Menu is the list itself — Dropdown wraps it with a trigger, positioning, and open/close behavior."
-      >
-        <div className="grid gap-3 sm:grid-cols-2">
-          <div className="rounded-xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
-            <p className="text-sm font-semibold text-zinc-900 dark:text-white">Use Menu when</p>
-            <p className="mt-1.5 text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">
-              The list is always visible — a sidebar, a right-click context menu you position yourself, or the
-              options pane inside a command palette.
-            </p>
-          </div>
-          <div className="rounded-xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
-            <p className="text-sm font-semibold text-zinc-900 dark:text-white">Use Dropdown when</p>
-            <p className="mt-1.5 text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">
-              You need a button that opens/closes a floating panel — an account menu, a select, a filter. Dropdown
-              is built on the same item styling as Menu.
-            </p>
-          </div>
-        </div>
-      </DocsSection>
-
-      <DocsSection title="In context" description="Menu rarely stands alone — here's how it reads inside real UI.">
-        <DocsSectionGrid className="lg:grid-cols-[1fr_1.1fr]">
-          <Card>
-            <CardHeader>
-              <div className="flex items-center justify-between gap-3">
-                <div>
-                  <CardTitle>Right-click menu</CardTitle>
-                  <CardDescription>Positioned by the caller at the click coordinates.</CardDescription>
-                </div>
-                <Badge variant="outline">Context menu</Badge>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <div className="flex flex-col gap-3">
-                <div
-                  className="flex h-24 items-center justify-center rounded-lg border border-dashed border-zinc-300 text-xs text-zinc-400 dark:border-zinc-700 dark:text-zinc-600"
-                  onContextMenu={(e) => e.preventDefault()}
-                >
-                  Right-click target (menu shown below for reference)
-                </div>
-                <Menu className="w-48">
-                  <MenuItem label="Cut" shortcut="⌘X" />
-                  <MenuItem label="Copy" shortcut="⌘C" />
-                  <MenuItem label="Paste" shortcut="⌘V" />
-                  <MenuDivider />
-                  <MenuItem label="Inspect" icon={FileText} />
-                </Menu>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-zinc-100 dark:bg-zinc-800">
-                  <LayoutDashboard className="h-5 w-5 text-zinc-600 dark:text-zinc-300" />
-                </div>
-                <div>
-                  <CardTitle>Sidebar navigation</CardTitle>
-                  <CardDescription>Grouped, always-visible — no open/close state needed.</CardDescription>
-                </div>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <Menu variant="ghost" className="w-full">
-                <MenuLabel>Workspace</MenuLabel>
-                <MenuItem label="Dashboard" icon={LayoutDashboard} selected />
-                <MenuItem label="Projects" icon={Folder} />
-                <MenuItem label="Team" icon={Users} />
-                <MenuDivider />
-                <MenuLabel>Account</MenuLabel>
-                <MenuItem label="Profile" icon={User} />
-                <MenuItem label="Settings" icon={Settings} />
-                <MenuItem label="Log out" icon={LogOut} variant="destructive" />
-              </Menu>
-            </CardContent>
-          </Card>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection
-        title="Command palette"
-        description="Grouped, keyboard-first actions — the pattern behind ⌘K launchers."
-      >
-        <Card className="max-w-lg">
-          <CardContent className="pt-6">
-            <div className="mb-1 flex items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900">
-              <span className="text-sm text-zinc-400">Type a command or search...</span>
-            </div>
-            <Menu variant="ghost" className="w-full">
-              <MenuLabel>Suggestions</MenuLabel>
-              <MenuItem label="New file" icon={Plus} shortcut="⌘N" />
-              <MenuItem label="Export as PDF" icon={Download} shortcut="⌘E" />
-              <MenuDivider />
-              <MenuLabel>Actions</MenuLabel>
-              <MenuItem
-                label={favorited ? "Remove from favorites" : "Add to favorites"}
-                icon={Star}
-                onClick={() => setFavorited((v) => !v)}
-              />
-              <MenuItem
-                label={`View as ${view === "grid" ? "list" : "grid"}`}
-                onClick={() => setView((v) => (v === "grid" ? "list" : "grid"))}
-              />
-            </Menu>
-          </CardContent>
-        </Card>
-      </DocsSection>
-
-      <DocsApiSection>
-        <DocsApiTable title="API Reference — Menu" rows={MENU_API_ROWS} />
-        <DocsApiTable title="API Reference — MenuItem" rows={ITEM_API_ROWS} />
-        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
-      </DocsApiSection>
-    </DocsPage>
-  );
-}