@indietabletop/appkit 3.2.0-10 → 3.2.0-12

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/LetterheadForm/style.css.ts

@@ -19,6 +19,7 @@ export const fieldLabel = style([
     fontSize: "0.75rem",
     fontWeight: 600,
     marginBottom: "0.5rem",
+    textAlign: "start",
   },
 ]);
 
@@ -31,6 +32,7 @@ export const fieldInput = style([
     fontSize: "1rem",
     lineHeight: "1.25rem",
     padding: "1rem 0 1rem 1rem",
+    textAlign: "start",
 
     ":read-only": {
       backgroundColor: "hsl(0 0% 0% / 0.05)",
@@ -50,6 +52,7 @@ export const fieldIssue = style({
   color: Color.PURPLE,
   fontSize: "0.875rem",
   marginTop: "0.5rem",
+  textAlign: "start",
 
   ":empty": {
     display: "none",
@@ -60,6 +63,7 @@ export const fieldHint = style({
   color: Color.MID_GRAY,
   fontSize: "0.875rem",
   marginTop: "0.5rem",
+  textAlign: "start",
 
   selectors: {
     [`${fieldIssue}:not(:empty) + &`]: {
@@ -73,6 +77,7 @@ export const submitError = style({
   color: Color.PURPLE,
   backgroundColor: Color.PALE_GRAY,
   borderRadius: "0.75rem",
+  textAlign: "start",
 
   ":empty": {
     display: "none",

package/lib/failureMessages.test.ts

@@ -10,6 +10,11 @@ describe("getFetchFailureMessages", () => {
 
     expect(result).toMatchInlineSnapshot(`
       {
+        "action": {
+          "href": "~/",
+          "label": "Go back",
+          "type": "LINK",
+        },
         "description": "The link you have followed might be broken.",
         "title": "Not found",
       }
@@ -21,6 +26,10 @@ describe("getFetchFailureMessages", () => {
 
     expect(result).toMatchInlineSnapshot(`
       {
+        "action": {
+          "label": "Reload app",
+          "type": "RELOAD",
+        },
         "description": "This is probably an issue with our servers. You can try refreshing.",
         "title": "Ooops, something went wrong",
       }
@@ -35,6 +44,11 @@ describe("getFetchFailureMessages", () => {
 
     expect(result).toMatchInlineSnapshot(`
       {
+        "action": {
+          "href": "~/",
+          "label": "Go back",
+          "type": "LINK",
+        },
         "description": "The link you have followed might be broken.",
         "title": "Army not found",
       }
@@ -54,6 +68,11 @@ describe("getFetchFailureMessages", () => {
 
     expect(result).toMatchInlineSnapshot(`
       {
+        "action": {
+          "href": "~/",
+          "label": "Go back",
+          "type": "LINK",
+        },
         "description": "It might have been deleted.",
         "title": "Army not found",
       }
@@ -65,6 +84,10 @@ describe("getFetchFailureMessages", () => {
 
     expect(result).toMatchInlineSnapshot(`
       {
+        "action": {
+          "label": "Retry request",
+          "type": "REFETCH",
+        },
         "description": "Check your interent connection and try again.",
         "title": "No connection",
       }
@@ -76,6 +99,10 @@ describe("getFetchFailureMessages", () => {
 
     expect(result).toMatchInlineSnapshot(`
       {
+        "action": {
+          "label": "Reload app",
+          "type": "RELOAD",
+        },
         "description": "This is probably an issue on our side. You can try refreshing.",
         "title": "Ooops, something went wrong",
       }
@@ -87,6 +114,10 @@ describe("getFetchFailureMessages", () => {
 
     expect(result).toMatchInlineSnapshot(`
       {
+        "action": {
+          "label": "Reload app",
+          "type": "RELOAD",
+        },
         "description": "This is probably an issue on our side. You can try refreshing.",
         "title": "Ooops, something went wrong",
       }

package/lib/failureMessages.ts

@@ -29,23 +29,44 @@ function createFailureMessageGetter<T>(
   };
 }
 
-export const getFetchFailureMessages = createFailureMessageGetter(
+export type FetchFailureAction =
+  | {
+      type: "LINK";
+      href: string;
+      label: string;
+    }
+  | {
+      type: "RELOAD" | "REFETCH";
+      label: string;
+    };
+
+export type FetchFailure = {
+  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" },
     },
     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" },
     },
   },
   {

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";

package/package.json

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