@indietabletop/appkit 3.2.0-11 → 3.2.0-13

package/lib/DialogTrigger/index.tsx

@@ -0,0 +1,36 @@
+import {
+  DialogProvider,
+  useDialogContext,
+  useStoreState,
+} from "@ariakit/react";
+import type { ReactElement, ReactNode } from "react";
+
+function DialogGuard(props: { children: ReactNode }) {
+  const dialog = useDialogContext();
+  const isMounted = useStoreState(dialog, (store) => store?.mounted);
+  if (!isMounted) {
+    return null;
+  }
+  return props.children;
+}
+
+/**
+ * Wraps AriaKit's DialogProvider, but take a tuple of Dialog a DialogDisclosure
+ * elements as children, and makes sense that the Dialog component is not
+ * rendered when it is hidden.
+ *
+ * This is important in cases where the dialog contains a form that should only
+ * be initialized and re-initialized when the dialog opens, not when it is first
+ * rendered.
+ */
+export function DialogTrigger(props: {
+  children: [ReactElement, ReactElement];
+}) {
+  const [dialog, button] = props.children;
+  return (
+    <DialogProvider>
+      <DialogGuard>{dialog}</DialogGuard>
+      {button}
+    </DialogProvider>
+  );
+}

package/lib/Letterhead/style.css.ts

@@ -2,7 +2,7 @@ import { createTheme, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { textVariants } from "../atomic.css.ts";
 import { manofa, minion } from "../common.css.ts";
-import { Hover } from "../media.ts";
+import { Hover, MinWidth } from "../media.ts";
 
 const align = {
   start: textVariants({ textAlign: "start" }),
@@ -11,7 +11,7 @@ const align = {
 };
 
 export const [letterheadTheme, { padding, footerMargin }] = createTheme({
-  padding: "clamp(1rem, 8vw, 4rem)",
+  padding: "1.25rem",
   footerMargin: "3rem",
 });
 
@@ -25,6 +25,14 @@ export const letterhead = recipe({
       borderRadius: "1rem",
       marginInline: "auto",
       maxInlineSize: "36rem",
+
+      "@media": {
+        [MinWidth.SMALL]: {
+          vars: {
+            [padding]: `clamp(1.5rem, 8%, 4rem)`,
+          },
+        },
+      },
     },
   ],
 

package/lib/ModalDialog/index.tsx

@@ -0,0 +1,25 @@
+import { Dialog, type DialogProps } from "@ariakit/react";
+import type { ReactNode } from "react";
+import { cx } from "../class-names.ts";
+import * as css from "./style.css.ts";
+
+export type ModalDialogProps = Omit<DialogProps, "modal" | "backdrop"> & {
+  children: ReactNode;
+  variant: "form" | "confirm";
+  backdropClassName?: string;
+};
+
+export function ModalDialog(props: ModalDialogProps) {
+  const { variant, backdropClassName, className, ...dialogProps } = props;
+
+  return (
+    <Dialog
+      {...dialogProps}
+      {...cx(className, css.dialog({ variant }))}
+      backdrop={<div {...cx(css.backdrop, backdropClassName)} />}
+      modal
+    >
+      {props.children}
+    </Dialog>
+  );
+}

package/lib/ModalDialog/style.css.ts

@@ -0,0 +1,87 @@
+import { style, type ComplexStyleRule } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { MinWidth } from "../media.ts";
+
+const scaleTransition: ComplexStyleRule = {
+  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: ComplexStyleRule = {
+  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: {
+    variant: {
+      form: {
+        ...translateTransition,
+        inlineSize: "100%",
+        blockSize: "100%",
+
+        "@media": {
+          [MinWidth.MEDIUM]: {
+            ...scaleTransition,
+            blockSize: "fit-content",
+            maxInlineSize: "40rem",
+            maxBlockSize: "90%",
+            borderRadius: "1rem",
+          },
+        },
+      },
+
+      confirm: {
+        ...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

@@ -1,4 +1,5 @@
 // Components
+export * from "./DialogTrigger/index.tsx";
 export * from "./ExternalLink.tsx";
 export * from "./FormSubmitButton.tsx";
 export * from "./FullscreenDismissBlocker.tsx";
@@ -6,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-11",
+  "version": "3.2.0-13",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",