@indietabletop/appkit 3.2.0-12 → 3.2.0-14

package/lib/ModalDialog/index.tsx

@@ -0,0 +1,28 @@
+import { Dialog, type DialogProps } from "@ariakit/react";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+import type { ReactNode } from "react";
+import { cx } from "../class-names.ts";
+import * as css from "./style.css.ts";
+
+type Size = NonNullable<NonNullable<RecipeVariants<typeof css.dialog>>["size"]>;
+
+export type ModalDialogProps = Omit<DialogProps, "modal" | "backdrop"> & {
+  children: ReactNode;
+  size: Size;
+  backdropClassName?: string;
+};
+
+export function ModalDialog(props: ModalDialogProps) {
+  const { size, backdropClassName, className, ...dialogProps } = props;
+
+  return (
+    <Dialog
+      {...dialogProps}
+      {...cx(className, css.dialog({ size }))}
+      backdrop={<div {...cx(css.backdrop, backdropClassName)} />}
+      modal
+    >
+      {props.children}
+    </Dialog>
+  );
+}

package/lib/ModalDialog/style.css.ts

@@ -0,0 +1,87 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { MinWidth } from "../media.ts";
+
+const scaleTransition = {
+  transition: "transform 200ms, opacity 200ms",
+  transform: "scale(1.1)",
+
+  selectors: {
+    "&[data-enter]": {
+      opacity: 1,
+      transform: "scale(1)",
+    },
+
+    "&[data-leave]": {
+      opacity: 0,
+      transform: "scale(0.9)",
+    },
+  },
+};
+
+const translateTransition = {
+  transition: "transform 200ms, opacity 200ms",
+  transform: "translateY(5rem)",
+
+  selectors: {
+    "&[data-enter]": {
+      opacity: 1,
+      transform: "translateY(0)",
+    },
+
+    "&[data-leave]": {
+      opacity: 0,
+      transform: "translateY(5rem)",
+    },
+  },
+};
+
+export const dialog = recipe({
+  base: {
+    position: "fixed",
+    inset: 0,
+    zIndex: 100,
+    margin: "auto",
+    overflow: "auto",
+    opacity: 0,
+    backgroundColor: "white",
+  },
+
+  variants: {
+    size: {
+      large: {
+        ...translateTransition,
+        inlineSize: "100%",
+        blockSize: "100%",
+
+        "@media": {
+          [MinWidth.MEDIUM]: {
+            ...scaleTransition,
+            blockSize: "fit-content",
+            maxInlineSize: "40rem",
+            maxBlockSize: "90%",
+            borderRadius: "1rem",
+          },
+        },
+      },
+
+      small: {
+        ...scaleTransition,
+        inlineSize: "min(24rem, 90svw)",
+        blockSize: "fit-content",
+        borderRadius: "1rem",
+      },
+    },
+  },
+});
+
+export const backdrop = style({
+  backgroundColor: "black",
+  opacity: 0,
+  transition: "opacity 200ms",
+  selectors: {
+    "&[data-enter]": {
+      opacity: 0.4,
+    },
+  },
+});

package/lib/failureMessages.ts

@@ -40,41 +40,52 @@ export type FetchFailureAction =
       label: string;
     };
 
-export type FetchFailure = {
+export type FetchFailureMessages = {
   title: string;
   description: string;
   action: FetchFailureAction;
 };
 
-export const getFetchFailureMessages = createFailureMessageGetter<FetchFailure>(
-  {
-    404: {
-      title: `Not found`,
-      description: `The link you have followed might be broken.`,
-      action: { type: "LINK", href: "~/", label: "Go back" },
-    },
-    500: {
-      title: `Ooops, something went wrong`,
-      description: `This is probably an issue with our servers. You can try refreshing.`,
-      action: { type: "RELOAD", label: "Reload app" },
-    },
-    connection: {
-      title: `No connection`,
-      description: `Check your interent connection and try again.`,
-      action: { type: "REFETCH", label: "Retry request" },
+export const getFetchFailureMessages =
+  createFailureMessageGetter<FetchFailureMessages>(
+    {
+      401: {
+        title: "Not logged in",
+        description: "You must be logged in to view this page.",
+        action: { type: "LINK", href: "~/login", label: "Go to login" },
+      },
+      403: {
+        title: "Not authorized",
+        description: "You might be logged into the wrong account.",
+        action: { type: "LINK", href: "~/login", label: "Go to login" },
+      },
+      404: {
+        title: `Not found`,
+        description: `The link you have followed might be broken.`,
+        action: { type: "LINK", href: "~/", label: "Go back" },
+      },
+      500: {
+        title: `Ooops, something went wrong`,
+        description: `This is probably an issue with our servers. You can try refreshing.`,
+        action: { type: "RELOAD", label: "Reload app" },
+      },
+      connection: {
+        title: `No connection`,
+        description: `Check your interent connection and try again.`,
+        action: { type: "REFETCH", label: "Retry request" },
+      },
+      fallback: {
+        title: `Ooops, something went wrong`,
+        description: `This is probably an issue on our side. You can try refreshing.`,
+        action: { type: "RELOAD", label: "Reload app" },
+      },
     },
-    fallback: {
-      title: `Ooops, something went wrong`,
-      description: `This is probably an issue on our side. You can try refreshing.`,
-      action: { type: "RELOAD", label: "Reload app" },
+    {
+      onOverride(fallback, override) {
+        return { ...fallback, ...override };
+      },
     },
-  },
-  {
-    onOverride(fallback, override) {
-      return { ...fallback, ...override };
-    },
-  },
-);
+  );
 
 export const getSubmitFailureMessage = createFailureMessageGetter(
   {

package/lib/index.ts

@@ -7,6 +7,7 @@ export * from "./IndieTabletopClubSymbol.tsx";
 export * from "./Letterhead/index.tsx";
 export * from "./LetterheadForm/index.tsx";
 export * from "./LoadingIndicator.tsx";
+export * from "./ModalDialog/index.tsx";
 export * from "./ServiceWorkerHandler.tsx";
 
 // Hooks

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indietabletop/appkit",
-  "version": "3.2.0-12",
+  "version": "3.2.0-14",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",