@indietabletop/appkit 4.1.0 → 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/store/store.ts

@@ -212,7 +212,7 @@ const config = setup({
 export const machine = config.createMachine({
   /** @xstate-layout N4IgpgJg5mDOIC5QEMAOqDEAnOYAuA2gAwC6ioqA9rAJZ42UB25IAHogLQBMRAbAHQBOQbwCMggOy8ALES7DRAGhABPTvIn8AzAA5B0rdN4BWCRKKDRvAL7XlaVPwCujZE7wALMI3oBjZHiQGL5OWDg+AKqwYFjEZEggVLT0TCzsCMai0vzSejrGRIayvLwSymoIHLmi-MZcvIa6+bk8xrb26M6u7l4+NP6BEMGh4XhRMQSi8RTUdAzMCem5RPw6WlziZryWEqJKqojCK1oSgvXrRMZXRu0gDl1unt5+AUEhYc-jsVzTibMpC1ASx05UOolu9xcj16L0GGGiWAAbjEvnEWEk5qlFoguDoiKDKntwXY7p1oc9+q8hu9RqjSOj-vM0ohpCIhKJClwuFIdnsCaIuEZ+LxcdzpLtpFxMhCyT0KQM3iNPgjJr8MQDmYSOfzBDLHOS+gqhtFYLQmABJRgAM0oaIS6qZ2IQOiF6y0gh0OismQken5goEIp0YolUuJHX1csNVPhcDNjAAoqxUDQcBA7TNko6gYhDDUtIUBUQDBIpTxeASOO6uPwNroJNIBcZPQ2bCT7gbYZB+LAVIxfD2+74aIwoBgIEwwD28K9+B2o12IIP+8vh6OM38s1icwguTJaqIG4IC3sG1oCdzjPxzJJjFpxBz78W9XOF5TBqvVyOx6gnLAPBuDrbmwiAckQNT6HogimPopiGAS0imPwoh6Fy5iSmsegvp277dr2K74WuUD8L+AA2pHfuOk78COiKUAA1lO85PNGH6EV+o4kU45HfggtGUAM8xxIBjLAekRbZPk+gGAWLolOeBwIFYqynMe+QSuB0nYW+RqfoR35cTxo4YDEWCUFgJGkQENpYAAtnOsosYuelDgZZEUaOfGMHRglMMJ9L2qJgIgUpWTZGI5imKWDY6BWilZFotasiYDS5MYurto5MK4Uu7H6Zxv7-pRE6MFO-GMQ5kZOTlLn9m5f4eLx-G+Yw-lqkFmpWL6qzgeYBZELs3L7BUBbIXwBSiLouJiMGXDadVul5a5BUNZRpnmZZ1nmfZzHZYtQ4ccRhWNZ5zUBEJpAiVuwXicYJSrDJvAuni+goRegq1IYZYeqeWRtJlVV7VSn40BApFgBgx1XZiN2gYIfAHkeJxELFLoElI2QodBJ6CnoDbzUDbEHaD4OQ9xpHQxqTobPUPUCp6hQlFKxgEg0gi1FyxjSIhWiyVKBPysD7EkxDlPZiFKFiNovMnOYoqIVwBJeolMtaHUkoNMG4akoDgtEyuADuyBzMZUMBZmMOdVINY+qyBY-WUilPTWWOtJK7oNBIAusXhB1GybY6sLAM6BHOVqBFgAAUogFEQACUGC7XrvuG8b9Drubm6W06WRcrW1vine0HSQSzaaCKyO8EQcgDdztgkowlAQHALAOAy12atwXNCCImwyHICiVmIAhyKlTRc8GL5QjpVLt9nO4cIe2TmIU1exWXa+VkYNQx8GDQyJN-X-RGr4LbPgUd06wbZFwuiXEjIjHlvUjCgYrLwwK3ImN7zkjmAFFQBoAAI3BnPKmO5PSJVOOBXQx4Ni+gJEcVYVxgymCsDoUsc0Aan0JinXwYDxbpAwTWW+eJTB20fgpCoVZuav0MEcT+Uhj46xwcnXKB18pQAIWJQ4PBax33IceShlZDw6Doe-cCaEZBthPjhfaBFlpHXJt+bhsMEAiDEaQ++FDthUNAuFca4FeqyA9BlWRM99YDk4VxIqo5VGdQwjkBoVgUYum9HopSkleZ8DVjwSaVhDw-xqktOqnFCKQHsTnSwNRIrNmELkSUjsKiTW0HdWOHozC3zqDoIJ8irGKP4FaY24MICRJ3H4zQaDGzpQ5DHBBilb7s0PDFQUgoRBbFyULYmYMwBlJChsFC2hJEYLWOYDB6MRSpIihIK4DYhqdMsfwf26cuEX3nhLRsYiTiHyyKWSUAoJk1jVtM2ZiStD12sEAA */
   id: "app",
-  context: createInitialContext(),
+  context: () => createInitialContext(),
 
   invoke: {
     id: "auth",

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.0",
+  "version": "5.0.0-0",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",