Split codebase (#455)

apps/yaak-client/components/core/Dialog.tsx

@@ -0,0 +1,129 @@
+import type { DialogSize } from "@yaakapp-internal/plugins";
+import { Heading, Overlay } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import * as m from "motion/react-m";
+import type { ReactNode } from "react";
+import { useMemo } from "react";
+import { IconButton } from "./IconButton";
+
+export interface DialogProps {
+  children: ReactNode;
+  open: boolean;
+  onClose?: () => void;
+  disableBackdropClose?: boolean;
+  title?: ReactNode;
+  description?: ReactNode;
+  className?: string;
+  size?: DialogSize;
+  hideX?: boolean;
+  noPadding?: boolean;
+  noScroll?: boolean;
+  vAlign?: "top" | "center";
+}
+
+export function Dialog({
+  children,
+  className,
+  size = "full",
+  open,
+  onClose,
+  disableBackdropClose,
+  title,
+  description,
+  hideX,
+  noPadding,
+  noScroll,
+  vAlign = "center",
+}: DialogProps) {
+  const titleId = useMemo(() => Math.random().toString(36).slice(2), []);
+  const descriptionId = useMemo(
+    () => (description ? Math.random().toString(36).slice(2) : undefined),
+    [description],
+  );
+
+  return (
+    <Overlay open={open} onClose={disableBackdropClose ? undefined : onClose} portalName="dialog">
+      <div
+        role="dialog"
+        className={classNames(
+          "py-4 x-theme-dialog absolute inset-0 pointer-events-none",
+          "h-full flex flex-col items-center justify-center",
+          vAlign === "top" && "justify-start",
+          vAlign === "center" && "justify-center",
+        )}
+        aria-labelledby={titleId}
+        aria-describedby={descriptionId}
+        tabIndex={-1}
+        onKeyDown={(e) => {
+          // NOTE: We handle Escape on the element itself so that it doesn't close multiple
+          //   dialogs and can be intercepted by children if needed.
+          if (e.key === "Escape") {
+            onClose?.();
+            e.stopPropagation();
+            e.preventDefault();
+          }
+        }}
+      >
+        <m.div
+          initial={{ top: 5, scale: 0.97 }}
+          animate={{ top: 0, scale: 1 }}
+          className={classNames(
+            className,
+            "grid grid-rows-[auto_auto_minmax(0,1fr)]",
+            "grid-cols-1", // must be here for inline code blocks to correctly break words
+            "relative bg-surface pointer-events-auto",
+            "rounded-lg",
+            "border border-border-subtle shadow-lg shadow-[rgba(0,0,0,0.1)]",
+            "min-h-[10rem]",
+            "max-w-[calc(100vw-5rem)] max-h-[calc(100vh-5rem)]",
+            size === "sm" && "w-[30rem]",
+            size === "md" && "w-[50rem]",
+            size === "lg" && "w-[70rem]",
+            size === "full" && "w-[100vw] h-[100vh]",
+            size === "dynamic" && "min-w-[20rem] max-w-[100vw]",
+          )}
+        >
+          {title ? (
+            <Heading className="px-6 mt-4 mb-2" level={1} id={titleId}>
+              {title}
+            </Heading>
+          ) : (
+            <span />
+          )}
+
+          {description ? (
+            <div className="min-h-0 px-6 text-text-subtle mb-3" id={descriptionId}>
+              {description}
+            </div>
+          ) : (
+            <span />
+          )}
+
+          <div
+            className={classNames(
+              "h-full w-full grid grid-cols-[minmax(0,1fr)] grid-rows-1",
+              !noPadding && "px-6 py-2",
+              !noScroll && "overflow-y-auto overflow-x-hidden",
+            )}
+          >
+            {children}
+          </div>
+
+          {/*Put close at the end so that it's the last thing to be tabbed to*/}
+          {!hideX && (
+            <div className="ml-auto absolute right-1 top-1">
+              <IconButton
+                className="opacity-70 hover:opacity-100"
+                onClick={onClose}
+                title="Close dialog (Esc)"
+                aria-label="Close"
+                size="sm"
+                icon="x"
+              />
+            </div>
+          )}
+        </m.div>
+      </div>
+    </Overlay>
+  );
+}