@indietabletop/appkit 4.1.1 → 5.0.0-0

package/lib/Letterhead/index.tsx

@@ -7,7 +7,7 @@ import { ExternalLink } from "../ExternalLink.tsx";
 import {
   FormSubmitButton,
   type FormSubmitButtonProps,
-} from "../FormSubmitButton.tsx";
+} from "../form/FormSubmitButton.tsx";
 import { IndieTabletopClubLogo } from "../IndieTabletopClubLogo.tsx";
 import { IndieTabletopClubSymbol } from "../IndieTabletopClubSymbol.tsx";
 import { LoadingIndicator } from "../LoadingIndicator.tsx";

package/lib/LetterheadForm/index.tsx

@@ -5,11 +5,10 @@ import {
   FormInput,
   type FormInputProps,
   FormLabel,
-  useFormContext,
-  useStoreState,
 } from "@ariakit/react";
 import { type ReactNode } from "react";
 import { cx } from "../class-names.ts";
+import { SubmitErrorAlert } from "../form/SubmitErrorAlert.tsx";
 import * as css from "./style.css.ts";
 
 export type LetterheadTextFieldProps = FormInputProps & {
@@ -101,16 +100,7 @@ type LetterheadSubmitErrorProps = {
  * is no need to guard it with an if statement.
  */
 export function LetterheadSubmitError(props: LetterheadSubmitErrorProps) {
-  const form = useFormContext();
-  const message = useStoreState(form, (s) => {
-    return s?.errors[props.name] as string | undefined;
-  });
-
-  return (
-    <div role="alert" className={css.submitError}>
-      {message}
-    </div>
-  );
+  return <SubmitErrorAlert {...props} className={css.submitError} />;
 }
 
 export function LetterheadHeader(props: { children: ReactNode }) {

package/lib/LetterheadForm/style.css.ts

@@ -82,10 +82,6 @@ export const submitError = style({
   backgroundColor: Color.PALE_GRAY,
   borderRadius: "0.75rem",
   textAlign: "start",
-
-  ":empty": {
-    display: "none",
-  },
 });
 
 export const header = style({

package/lib/{FormSubmitButton.tsx → form/FormSubmitButton.tsx}

@@ -5,7 +5,7 @@ import {
   useStoreState,
 } from "@ariakit/react";
 import type { ReactNode } from "react";
-import { fadeIn } from "./animations.css.ts";
+import { fadeIn } from "../animations.css.ts";
 
 export type FormSubmitButtonProps = FormSubmitProps & {
   children: ReactNode;

package/lib/form/SubmitErrorAlert.tsx

@@ -0,0 +1,21 @@
+import { useFormContext, useStoreState } from "@ariakit/react";
+import { cx } from "../class-names.ts";
+import { submitErrorAlert } from "./style.css.ts";
+
+export type SubmitErrorMessageProps = {
+  name: string;
+  className?: string;
+};
+
+export function SubmitErrorAlert(props: SubmitErrorMessageProps) {
+  const form = useFormContext();
+  const message = useStoreState(form, (s) => {
+    return s?.errors[props.name] as string | undefined;
+  });
+
+  return (
+    <div role="alert" {...cx(props, submitErrorAlert.container)}>
+      {message}
+    </div>
+  );
+}

package/lib/form/style.css.ts

@@ -0,0 +1,9 @@
+import { style } from "@vanilla-extract/css";
+
+export const submitErrorAlert = {
+  container: style({
+    ":empty": {
+      display: "none",
+    },
+  }),
+};

package/lib/index.ts

@@ -8,7 +8,8 @@ export * from "./AuthCard/AuthCard.tsx";
 export * from "./DialogTrigger/index.tsx";
 export * from "./DocumentTitle/DocumentTitle.tsx";
 export * from "./ExternalLink.tsx";
-export * from "./FormSubmitButton.tsx";
+export * from "./form/FormSubmitButton.tsx";
+export * from "./form/SubmitErrorAlert.tsx";
 export * from "./FullscreenDismissBlocker.tsx";
 export * from "./IndieTabletopClubLogo.tsx";
 export * from "./IndieTabletopClubSymbol.tsx";

package/lib/use-form.ts

@@ -1,6 +1,7 @@
 import { type FormStoreState, useFormStore } from "@ariakit/react";
 import { useState } from "react";
 import { Failure, Success } from "./async-op.ts";
+import { caughtValueToString } from "./caught-value.ts";
 
 type Validator<T> = (value: T) => string | null;
 
@@ -39,17 +40,21 @@ export function useForm<T extends object, R>(props: {
   });
 
   form.useSubmit(async (state) => {
-    const submitOp = await props.onSubmit(state);
+    try {
+      const submitOp = await props.onSubmit(state);
 
-    if (submitOp.isFailure) {
-      form.setError(submitName, submitOp.failure);
-    }
+      if (submitOp.isFailure) {
+        form.setError(submitName, submitOp.failure);
+      }
 
-    if (submitOp.isSuccess) {
-      await props.onSuccess?.(submitOp.value, state);
-    }
+      if (submitOp.isSuccess) {
+        await props.onSuccess?.(submitOp.value, state);
+      }
 
-    setOp(submitOp);
+      setOp(submitOp);
+    } catch (error) {
+      form.setError(submitName, caughtValueToString(error));
+    }
   });
 
   form.useValidate((state) => {

package/package.json

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