@stackshift-ui/dialog 1.0.0-beta.1

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@stackshift-ui/dialog",
+  "description": "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.",
+  "version": "1.0.0-beta.1",
+  "private": false,
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**",
+    "src"
+  ],
+  "author": "WebriQ <info@webriq.com>",
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.7.0",
+    "@types/react": "^18.3.9",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.1.1",
+    "esbuild-plugin-rdi": "^0.0.0",
+    "esbuild-plugin-react18": "^0.2.5",
+    "esbuild-plugin-react18-css": "^0.0.4",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.2",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^2.1.1",
+    "@stackshift-ui/eslint-config": "6.0.10",
+    "@stackshift-ui/typescript-config": "6.0.10"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.14",
+    "classnames": "^2.5.1",
+    "lucide-react": "^0.468.0",
+    "@stackshift-ui/scripts": "6.1.0-beta.0",
+    "@stackshift-ui/system": "6.1.0-beta.0"
+  },
+  "peerDependencies": {
+    "@stackshift-ui/system": ">=6.1.0-beta.0",
+    "@types/react": "16.8 - 19",
+    "next": "10 - 14",
+    "react": "16.8 - 19",
+    "react-dom": "16.8 - 19"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig-build.json",
+    "clean": "rm -rf dist",
+    "dev": "tsup --watch && tsc -p tsconfig-build.json -w",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "test": "vitest run --coverage"
+  }
+}

package/src/dialog.test.tsx

@@ -0,0 +1,88 @@
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, test } from "vitest";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+
+describe.concurrent("dialog", () => {
+  afterEach(cleanup);
+
+  test("Dummy test - test if renders without errors", async ({ expect }) => {
+    const clx = "my-class";
+
+    const user = userEvent.setup();
+
+    const { unmount } = render(
+      <Dialog>
+        <DialogTrigger asChild data-testid="dialog-trigger-1">
+          <button>Open Dialog</button>
+        </DialogTrigger>
+        <DialogContent data-testid="dialog-container-1" className={clx}>
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+            <DialogDescription>Dialog Description</DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>,
+    );
+
+    const trigger = screen.getByTestId("dialog-trigger-1");
+    expect(trigger).toBeInTheDocument();
+
+    await user.click(trigger);
+
+    const dialog = await screen.findByTestId("dialog-container-1");
+
+    expect(dialog).toBeInTheDocument();
+
+    unmount();
+  });
+
+  test("Common: Dialog - test if closes when clicking outside", async ({ expect }) => {
+    const user = userEvent.setup();
+    const { unmount } = render(
+      <>
+        <button data-testid="outside-button">Outside Button</button>
+        <Dialog>
+          <DialogTrigger asChild data-testid="dialog-trigger">
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent data-testid="dialog-container">
+            <DialogHeader>
+              <DialogTitle>Dialog Title</DialogTitle>
+              <DialogDescription>Dialog Description</DialogDescription>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      </>,
+    );
+
+    const outsideButton = screen.getByTestId("outside-button");
+    expect(outsideButton).toBeInTheDocument();
+
+    const trigger = screen.getByTestId("dialog-trigger");
+    expect(trigger).toBeInTheDocument();
+
+    await user.click(trigger);
+
+    await waitFor(() => {
+      const dialog = screen.getByTestId("dialog-container");
+      expect(dialog).toBeInTheDocument();
+    });
+
+    await user.click(outsideButton);
+
+    waitFor(() => {
+      const dialog = screen.queryByTestId("dialog-container");
+      expect(dialog).not.toBeInTheDocument();
+    });
+
+    unmount();
+  });
+});

package/src/dialog.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+
+const displayName = "Dialog";
+const displayNameTrigger = "DialogTrigger";
+const displayNamePortal = "DialogPortal";
+const displayNameClose = "DialogClose";
+const displayNameOverlay = "DialogOverlay";
+const displayNameContent = "DialogContent";
+const displayNameHeader = "DialogHeader";
+const displayNameFooter = "DialogFooter";
+const displayNameTitle = "DialogTitle";
+const displayNameDescription = "DialogDescription";
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return <Component as={DialogPrimitive.Root} data-slot="dialog" {...props} />;
+}
+Dialog.displayName = displayName;
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  const { [displayNameTrigger]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return <Component as={DialogPrimitive.Trigger} data-slot="dialog-trigger" {...props} />;
+}
+DialogTrigger.displayName = displayNameTrigger;
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  const { [displayNamePortal]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return <Component as={DialogPrimitive.Portal} data-slot="dialog-portal" {...props} />;
+}
+DialogPortal.displayName = displayNamePortal;
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  const { [displayNameClose]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return <Component as={DialogPrimitive.Close} data-slot="dialog-close" {...props} />;
+}
+DialogClose.displayName = displayNameClose;
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  const { [displayNameOverlay]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={DialogPrimitive.Overlay}
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+DialogOverlay.displayName = displayNameOverlay;
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  const { [displayNameContent]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <Component
+        as={DialogPrimitive.Content}
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}>
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </Component>
+    </DialogPortal>
+  );
+}
+DialogContent.displayName = displayNameContent;
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  const { [displayNameHeader]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+DialogHeader.displayName = displayNameHeader;
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  const { [displayNameFooter]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      data-slot="dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+DialogFooter.displayName = displayNameFooter;
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  const { [displayNameTitle]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={DialogPrimitive.Title}
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+DialogTitle.displayName = displayNameTitle;
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  const { [displayNameDescription]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={DialogPrimitive.Description}
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+DialogDescription.displayName = displayNameDescription;
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./dialog";

package/src/setupTests.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+
+export { };
+