create-nexst-monorepo 0.1.0

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

@@ -0,0 +1,239 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { AlertCircle, Info, Mail, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { expect, fn, userEvent, within } from "storybook/test";
+import { Button } from "../button/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+
+const meta = {
+  component: Dialog,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Dialog>;
+
+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 dialog/i });
+
+    await expect(trigger).toBeInTheDocument();
+
+    await userEvent.click(trigger);
+
+    const dialog = await within(document.body).findByRole("dialog");
+
+    await expect(dialog).toBeInTheDocument();
+
+    const title = within(dialog).getByText(/dialog title/i);
+
+    await expect(title).toBeInTheDocument();
+  },
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Dialog Title</DialogTitle>
+          <DialogDescription>
+            This is a description of what this dialog does. It provides context to the user.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <p className="text-sm">
+            This is the main content of the dialog. You can put any content here.
+          </p>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="secondary">Cancel</Button>
+          </DialogClose>
+          <Button onClick={fn()}>Confirm</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+export const WithForm: Story = {
+  args: {},
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <Dialog onOpenChange={setOpen} open={open}>
+        <DialogTrigger asChild>
+          <Button>
+            <Mail size={16} />
+            Send Email
+          </Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Send Email</DialogTitle>
+            <DialogDescription>
+              Compose and send an email to the selected recipients.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="to">
+                To
+              </label>
+              <input
+                aria-label="To"
+                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"
+                id="to"
+                placeholder="recipient@example.com"
+                type="email"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="subject">
+                Subject
+              </label>
+              <input
+                aria-label="Subject"
+                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"
+                id="subject"
+                placeholder="Email subject"
+                type="text"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="message">
+                Message
+              </label>
+              <textarea
+                aria-label="Message"
+                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"
+                id="message"
+                placeholder="Type your message here..."
+                rows={4}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="secondary">Cancel</Button>
+            </DialogClose>
+            <Button onClick={() => setOpen(false)}>Send</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+};
+
+export const Destructive: Story = {
+  args: {},
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="destructive">
+          <Trash2 size={16} />
+          Delete Account
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertCircle className="text-destructive h-5 w-5" />
+            Are you absolutely sure?
+          </DialogTitle>
+          <DialogDescription>
+            This action cannot be undone. This will permanently delete your account and remove your
+            data from our servers.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="secondary">Cancel</Button>
+          </DialogClose>
+          <Button onClick={fn()} variant="destructive">
+            Delete Account
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+export const Information: Story = {
+  args: {},
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <Info size={16} />
+          Learn More
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>About This Feature</DialogTitle>
+          <DialogDescription>
+            Learn more about how this feature works and how it can benefit you.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4 text-sm">
+          <p>
+            This feature allows you to manage your account settings efficiently. You can update your
+            profile information, change your password, and configure notification preferences.
+          </p>
+          <p>
+            All changes are saved automatically and synchronized across all your devices in
+            real-time.
+          </p>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button>Got it</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+export const NoDescription: Story = {
+  args: {},
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Simple Dialog</Button>
+      </DialogTrigger>
+      <DialogContent aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>Simple Dialog</DialogTitle>
+        </DialogHeader>
+        <div className="py-4">
+          <p className="text-sm">
+            This dialog doesn't have a description, just a title and content.
+          </p>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button>Close</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};

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

@@ -0,0 +1,136 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { useTranslations } from "next-intl";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+function DialogOverlay({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+  ref?: React.RefObject<null | React.ComponentRef<typeof DialogPrimitive.Overlay>>;
+}) {
+  return (
+    <DialogPrimitive.Overlay
+      className={cn(
+        "fixed inset-0 z-50 bg-black/70 backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+}
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+function DialogContent({
+  children,
+  className,
+  hideClose = false,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+  hideClose?: boolean;
+  ref?: React.RefObject<null | React.ComponentRef<typeof DialogPrimitive.Content>>;
+}) {
+  const t = useTranslations("Common");
+
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        className={cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-3xl translate-x-[-50%] translate-y-[-50%] gap-4 rounded-3xl border border-border/70 bg-popover p-6 shadow-2xl backdrop-blur-xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%]",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+        {!hideClose && (
+          <DialogPrimitive.Close className="ring-offset-background hover:bg-accent focus:ring-ring absolute top-4 right-4 rounded-full p-1.5 opacity-70 transition-all hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
+            <X className="h-4 w-4" />
+            <span className="sr-only">{t("a11y.close")}</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+  );
+}
+DialogHeader.displayName = "DialogHeader";
+
+function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+      {...props}
+    />
+  );
+}
+DialogFooter.displayName = "DialogFooter";
+
+function DialogTitle({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
+  ref?: React.RefObject<null | React.ComponentRef<typeof DialogPrimitive.Title>>;
+}) {
+  return (
+    <DialogPrimitive.Title
+      className={cn(
+        "text-xl font-semibold leading-tight tracking-tight text-foreground",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+}
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+function DialogDescription({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
+  ref?: React.RefObject<null | React.ComponentRef<typeof DialogPrimitive.Description>>;
+}) {
+  return (
+    <DialogPrimitive.Description
+      className={cn("text-sm leading-relaxed text-muted-foreground", className)}
+      ref={ref}
+      {...props}
+    />
+  );
+}
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+};

package/template/apps/web/src/components/dialog-buttons.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, within } from "storybook/test";
+import { DialogButtons } from "./dialog-buttons";
+
+/** Cancel / submit row shared by every `ResponsiveDialog` form. */
+const meta = {
+  args: {
+    buttonLoadingText: "Saving…",
+    buttonText: "Save",
+    isPending: false,
+    setOpen: () => {},
+  },
+  component: DialogButtons,
+  decorators: [
+    (Story) => (
+      <div className="w-96">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DialogButtons>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole("button", { name: "Save" })).toBeEnabled();
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    buttonLoadingText: "Deleting…",
+    buttonText: "Delete",
+    buttonVariant: "destructive",
+  },
+};
+
+export const Pending: Story = {
+  args: { isPending: true },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole("button", { name: /saving/i })).toBeDisabled();
+  },
+};
+
+export const SubmitDisabled: Story = {
+  args: { buttonDisabled: true },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole("button", { name: "Save" })).toBeDisabled();
+  },
+};

package/template/apps/web/src/components/dialog-buttons.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import type { Dispatch, SetStateAction } from "react";
+import { Button } from "./button/button";
+
+type Props = {
+  buttonDisabled?: boolean;
+  buttonLoadingText: string;
+  buttonText: string;
+  buttonVariant?: "destructive" | "primary";
+  isPending: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+export function DialogButtons({
+  buttonDisabled,
+  buttonLoadingText,
+  buttonText,
+  buttonVariant,
+  isPending,
+  setOpen,
+}: Props) {
+  const t = useTranslations("Common");
+
+  return (
+    <section className="w-full gap-2.5 md:flex md:justify-end">
+      <Button
+        className="hidden md:flex"
+        disabled={isPending}
+        onClick={() => setOpen(false)}
+        type="button"
+        variant="secondary"
+      >
+        {t("cancel")}
+      </Button>
+      <Button
+        className="mt-7 w-full md:mt-0 md:w-auto"
+        disabled={buttonDisabled}
+        isLoading={isPending}
+        type="submit"
+        variant={buttonVariant || "primary"}
+      >
+        {isPending ? buttonLoadingText : buttonText}
+      </Button>
+    </section>
+  );
+}