create-nexst-monorepo 0.1.0

package/template/apps/web/src/components/drawer/drawer.stories.tsx

@@ -0,0 +1,251 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { Filter, Menu, Settings, User } from "lucide-react";
+import { useState } from "react";
+import { expect, fn, userEvent, within } from "storybook/test";
+import { Button } from "../button/button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./drawer";
+
+const meta = {
+  component: Drawer,
+  parameters: {
+    layout: "centered",
+    viewport: {
+      defaultViewport: "mobile1",
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button", { name: /open drawer/i });
+
+    await expect(trigger).toBeInTheDocument();
+
+    await userEvent.click(trigger);
+  },
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>
+          <Menu size={16} />
+          Open Drawer
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Drawer Title</DrawerTitle>
+          <DrawerDescription>
+            This is a drawer component that slides up from the bottom of the screen.
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="px-4 py-6">
+          <p className="text-sm">
+            Drawers are commonly used on mobile devices to show additional options or forms.
+          </p>
+        </div>
+        <DrawerFooter>
+          <Button onClick={fn()}>Confirm</Button>
+          <DrawerClose asChild>
+            <Button variant="secondary">Cancel</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+export const WithForm: Story = {
+  args: {},
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <Drawer onOpenChange={setOpen} open={open}>
+        <DrawerTrigger asChild>
+          <Button>
+            <User size={16} />
+            Edit Profile
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader className="text-left">
+            <DrawerTitle>Edit Profile</DrawerTitle>
+            <DrawerDescription>Make changes to your profile information.</DrawerDescription>
+          </DrawerHeader>
+          <div className="space-y-4 px-4 py-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="name">
+                Name
+              </label>
+              <input
+                aria-label="Name"
+                className="border-input bg-background ring-offset-background focus-visible:ring-ring w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none"
+                defaultValue="John Doe"
+                id="name"
+                placeholder="Enter your name"
+                type="text"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="email">
+                Email
+              </label>
+              <input
+                aria-label="Email"
+                className="border-input bg-background ring-offset-background focus-visible:ring-ring w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none"
+                defaultValue="john@example.com"
+                id="email"
+                placeholder="your.email@example.com"
+                type="email"
+              />
+            </div>
+          </div>
+          <DrawerFooter>
+            <Button onClick={() => setOpen(false)}>Save Changes</Button>
+            <DrawerClose asChild>
+              <Button variant="secondary">Cancel</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    );
+  },
+};
+
+export const FilterDrawer: Story = {
+  args: {},
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">
+          <Filter size={16} />
+          Filters
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader className="text-left">
+          <DrawerTitle>Filter Options</DrawerTitle>
+          <DrawerDescription>Customize your search with these filter options.</DrawerDescription>
+        </DrawerHeader>
+        <div className="space-y-4 px-4 py-4">
+          <div className="space-y-2">
+            <p className="text-sm font-medium">Category</p>
+            <select className="border-input bg-background ring-offset-background focus-visible:ring-ring w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none">
+              <option>All Categories</option>
+              <option>Documents</option>
+              <option>Images</option>
+              <option>Videos</option>
+            </select>
+          </div>
+          <div className="space-y-2">
+            <p className="text-sm font-medium">Date Range</p>
+            <select className="border-input bg-background ring-offset-background focus-visible:ring-ring w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none">
+              <option>Any Time</option>
+              <option>Last 7 days</option>
+              <option>Last 30 days</option>
+              <option>Last Year</option>
+            </select>
+          </div>
+        </div>
+        <DrawerFooter>
+          <Button>Apply Filters</Button>
+          <DrawerClose asChild>
+            <Button variant="secondary">Reset</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+export const SettingsDrawer: Story = {
+  args: {},
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="ghost">
+          <Settings size={16} />
+          Settings
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader className="text-left">
+          <DrawerTitle>Settings</DrawerTitle>
+          <DrawerDescription>Manage your application preferences.</DrawerDescription>
+        </DrawerHeader>
+        <div className="space-y-3 px-4 py-4">
+          <div className="border-border bg-accent/50 flex items-center justify-between rounded-lg border p-3">
+            <div>
+              <p className="text-sm font-medium">Enable Notifications</p>
+              <p className="text-muted-foreground text-xs">Receive updates about your activity</p>
+            </div>
+            <input
+              aria-label="Enable Notifications"
+              className="h-4 w-4"
+              defaultChecked
+              type="checkbox"
+            />
+          </div>
+          <div className="border-border bg-accent/50 flex items-center justify-between rounded-lg border p-3">
+            <div>
+              <p className="text-sm font-medium">Dark Mode</p>
+              <p className="text-muted-foreground text-xs">Switch to dark theme</p>
+            </div>
+            <input aria-label="Dark Mode" className="h-4 w-4" type="checkbox" />
+          </div>
+          <div className="border-border bg-accent/50 flex items-center justify-between rounded-lg border p-3">
+            <div>
+              <p className="text-sm font-medium">Auto-Save</p>
+              <p className="text-muted-foreground text-xs">Automatically save changes</p>
+            </div>
+            <input aria-label="Auto-Save" className="h-4 w-4" defaultChecked type="checkbox" />
+          </div>
+        </div>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button>Close</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+export const NoDescription: Story = {
+  args: {},
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open Simple Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader className="text-left">
+          <DrawerTitle>Simple Drawer</DrawerTitle>
+        </DrawerHeader>
+        <div className="px-4 py-6">
+          <p className="text-sm">This drawer doesn't have a description.</p>
+        </div>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button>Close</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};

package/template/apps/web/src/components/drawer/drawer.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn } from "@/lib/utils";
+
+type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;
+
+const Drawer: React.FC<DrawerProps> = ({ shouldScaleBackground = true, ...props }) => {
+  return <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />;
+};
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+function DrawerOverlay({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {
+  ref?: React.RefObject<null | React.ComponentRef<typeof DrawerPrimitive.Overlay>>;
+}) {
+  return (
+    <DrawerPrimitive.Overlay
+      className={cn("fixed inset-0 z-50 bg-black/60 backdrop-blur-sm", className)}
+      ref={ref}
+      {...props}
+    />
+  );
+}
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+function DrawerContent({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+  ref?: React.RefObject<null | React.ComponentRef<typeof DrawerPrimitive.Content>>;
+}) {
+  return (
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        className={cn(
+          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-3xl border border-border/70 bg-popover shadow-2xl",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      >
+        <div className="bg-border mx-auto mt-4 h-1.5 w-12 rounded-full" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+DrawerContent.displayName = "DrawerContent";
+
+function DrawerHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("grid gap-2 p-4 text-center sm:text-left", className)} {...props} />;
+}
+DrawerHeader.displayName = "DrawerHeader";
+
+function DrawerFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />;
+}
+DrawerFooter.displayName = "DrawerFooter";
+
+function DrawerTitle({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {
+  ref?: React.RefObject<null | React.ComponentRef<typeof DrawerPrimitive.Title>>;
+}) {
+  return (
+    <DrawerPrimitive.Title
+      className={cn(
+        "text-xl font-semibold leading-tight tracking-tight text-foreground",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+}
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+function DrawerDescription({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {
+  ref?: React.RefObject<null | React.ComponentRef<typeof DrawerPrimitive.Description>>;
+}) {
+  return (
+    <DrawerPrimitive.Description
+      className={cn("text-sm leading-relaxed text-muted-foreground", className)}
+      ref={ref}
+      {...props}
+    />
+  );
+}
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+};

package/template/apps/web/src/components/dropdown-menu/dropdown-menu.stories.tsx

@@ -0,0 +1,329 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import {
+  Cloud,
+  CreditCard,
+  Globe,
+  Keyboard,
+  LifeBuoy,
+  LogOut,
+  Mail,
+  MessageSquare,
+  Moon,
+  Plus,
+  PlusCircle,
+  Settings,
+  Sun,
+  Trash2,
+  User,
+  UserPlus,
+  Users,
+} from "lucide-react";
+import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
+import { Avatar } from "@/components/avatar/avatar";
+import { Button } from "@/components/button/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+
+const meta: Meta<typeof DropdownMenu> = {
+  component: DropdownMenu,
+  parameters: {
+    // Radix hides the rest of the page (aria-hidden) while the popup is open; axe then flags
+    // the story root's focusable elements. Focus is trapped in the popup, so nothing is reachable.
+    a11y: { config: { rules: [{ enabled: false, id: "aria-hidden-focus" }] } },
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    await userEvent.click(within(canvasElement).getByRole("button", { name: "Open Menu" }));
+
+    const menu = await within(document.body).findByRole("menu");
+    await expect(within(menu).getByText("Profile")).toBeInTheDocument();
+    await expect(within(menu).getByText("Billing")).toBeInTheDocument();
+  },
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open Menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <User />
+            Profile
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <CreditCard />
+            Billing
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Settings />
+            Settings
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Keyboard />
+            Keyboard shortcuts
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <Users />
+            Team
+          </DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <UserPlus />
+              Invite users
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>
+                  <Mail />
+                  Email
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <MessageSquare />
+                  Message
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <PlusCircle />
+                  More...
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuItem>
+            <Plus />
+            New Team
+            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <Globe />
+          GitHub
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <LifeBuoy />
+          Support
+        </DropdownMenuItem>
+        <DropdownMenuItem disabled>
+          <Cloud />
+          API
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOut />
+          Log out
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};
+
+export const UserProfile: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          className="focus-visible:ring-brand-400 rounded-full outline-none focus-visible:ring-2"
+          type="button"
+        >
+          <Avatar color="blue" fallback="JD" size="md" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel>
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm leading-none font-medium">John Doe</p>
+            <p className="text-muted-foreground text-xs leading-none">john.doe@example.com</p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <User />
+            My Profile
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Settings />
+            Settings
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <Sun className="scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+            <Moon className="absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+            Theme
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>
+                <Sun />
+                Light
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Moon />
+                Dark
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Settings />
+                System
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOut />
+          Log out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};
+
+export const ContextMenu: Story = {
+  render: () => (
+    <div className="flex flex-col items-center gap-4">
+      <p className="text-muted-foreground mb-2 text-sm">Right-click on the card</p>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            aria-label="Document.pdf actions"
+            className="focus-visible:ring-ring/40 w-64 cursor-context-menu rounded-[18px] border border-white/50 bg-white/30 p-6 text-left backdrop-blur-[26px] outline-none focus-visible:ring-2 dark:border-white/20 dark:bg-white/5"
+            type="button"
+          >
+            <span className="mb-2 block font-semibold">Document.pdf</span>
+            <span className="text-muted-foreground block text-sm">Click to open context menu</span>
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-48">
+          <DropdownMenuItem>
+            <User />
+            Open
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Settings />
+            Rename
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <CreditCard />
+            Share
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Users />
+            Collaborate
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem destructive>
+            <Trash2 />
+            Delete
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  ),
+};
+
+export const WithCheckboxes: Story = {
+  render: () => {
+    const [showStatusBar, setShowStatusBar] = useState(true);
+    const [showActivityBar, setShowActivityBar] = useState(false);
+    const [showPanel, setShowPanel] = useState(false);
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline">View Options</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuCheckboxItem checked={showStatusBar} onCheckedChange={setShowStatusBar}>
+            Status Bar
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem checked={showActivityBar} onCheckedChange={setShowActivityBar}>
+            Activity Bar
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
+            Panel
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+};
+
+export const WithRadioGroup: Story = {
+  render: () => {
+    const [position, setPosition] = useState("bottom");
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline">Position: {position}</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+          <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuRadioGroup onValueChange={setPosition} value={position}>
+            <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+};
+
+export const Simple: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button size="sm" variant="outline">
+          Actions
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem>Edit</DropdownMenuItem>
+        <DropdownMenuItem>Duplicate</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem destructive>Delete</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};