@sjolystinnovation/app-kit 0.17.0 → 0.18.0

package/README.md

@@ -264,6 +264,10 @@ export const getRecipe = (id: number) =>
 `target`, so an edit shows at once. It posts to `/api/revalidate` unless `endpoint` says otherwise.
 It never throws. On failure the pages' own revalidate window is the fallback.
 
+`apiFieldErrors(error)` reads the per-field messages of an ASP.NET validation problem from a failed
+call or its body, keyed in camelCase to match the form: `{ errors: { OrgNumber: ["..."] } }` becomes
+`{ orgNumber: ["..."] }`. It answers null when there are none, so the form falls back to one message.
+
 `createPublicClient(baseURL)` is the same without the session, for the API's anonymous endpoints. An
 empty `baseURL` throws, and requests only go to `baseURL`.
 
@@ -1016,6 +1020,20 @@ const gargeRule = passwordSchema().max(128, "Be at most 128 characters long.");
 
 `PASSWORD_MIN_LENGTH` holds the minimum, for hint text.
 
+### `zodFieldErrors(error, options?)`
+
+From `@sjolystinnovation/app-kit/validation`. A failed parse's issues by the top-level field they
+belong to, for showing beside each input. Each field gets its first issue's message, or every message
+in order with `all: true`. `message` replaces zod's text, such as with the app's own translations.
+Issues that belong to no field are left out.
+
+```ts
+import { zodFieldErrors } from "@sjolystinnovation/app-kit/validation";
+
+const parsed = contactSchema.safeParse(form);
+if (!parsed.success) setErrors(zodFieldErrors(parsed.error, { message: (issue) => issueMessage(issue, dict) }));
+```
+
 ## Theming
 
 The components draw every colour, corner radius and label size from theme variables with a light

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sjolystinnovation/app-kit",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Building blocks for Next.js apps that sign in against a JWT API through next-auth",
   "license": "Apache-2.0",
   "author": "Sjølyst Innovation AS",

package/src/api/apiFieldErrors.ts

@@ -0,0 +1,23 @@
+import axios from "axios";
+
+/**
+ * The per-field messages of an ASP.NET validation problem, keyed by the field's name in camelCase so
+ * they match the form's own names: `{ errors: { OrgNumber: ["..."] } }` becomes
+ * `{ orgNumber: ["..."] }`. Takes the failed axios call or the response body. Answers null when there
+ * are no field errors, so the caller falls back to one message for the whole form.
+ */
+export function apiFieldErrors(error: unknown): Record<string, string[]> | null {
+  const data = axios.isAxiosError(error) ? error.response?.data : error;
+  const errors = data && typeof data === "object" ? (data as { errors?: unknown }).errors : undefined;
+  if (!errors || typeof errors !== "object" || Array.isArray(errors)) return null;
+
+  // A Map, so a field named like an Object property such as "constructor" is still just a field.
+  const fields = new Map<string, string[]>();
+  for (const [key, value] of Object.entries(errors as Record<string, unknown>)) {
+    const messages = (Array.isArray(value) ? value : [value]).filter((m): m is string => typeof m === "string" && m !== "");
+    if (messages.length === 0) continue;
+    const field = key.charAt(0).toLowerCase() + key.slice(1);
+    fields.set(field, [...(fields.get(field) ?? []), ...messages]);
+  }
+  return fields.size > 0 ? Object.fromEntries(fields) : null;
+}

package/src/api/index.ts

@@ -1,3 +1,4 @@
+export { apiFieldErrors } from "./apiFieldErrors";
 export { createApiClient } from "./createApiClient";
 export { request } from "./request";
 export { requestRevalidate } from "./requestRevalidate";

package/src/validation/fieldErrors.ts

@@ -0,0 +1,34 @@
+import type { z } from "zod";
+
+/** Picks the text shown for an issue, such as a translated message by the issue's code. */
+export type IssueMessage = (issue: z.core.$ZodIssue) => string;
+
+/**
+ * A failed parse's issues by the top-level field they belong to, for showing beside each input. By
+ * default each field gets its first issue's message. With `all: true` it gets every message, in order.
+ * `message` replaces zod's text, such as with the app's own translations. Issues without a field,
+ * from a refinement of the whole object, are left out.
+ */
+export function zodFieldErrors<T>(
+  error: z.ZodError<T>,
+  options?: { all?: false; message?: IssueMessage },
+): Partial<Record<Extract<keyof T, string>, string>>;
+export function zodFieldErrors<T>(
+  error: z.ZodError<T>,
+  options: { all: true; message?: IssueMessage },
+): Partial<Record<Extract<keyof T, string>, string[]>>;
+export function zodFieldErrors<T>(
+  error: z.ZodError<T>,
+  options: { all?: boolean; message?: IssueMessage } = {},
+): object {
+  // A Map, so a field named like an Object property such as "constructor" is still just a field.
+  const errors = new Map<string, string[]>();
+  for (const issue of error.issues) {
+    const field = issue.path[0];
+    if (typeof field !== "string") continue;
+    const messages = errors.get(field) ?? [];
+    messages.push(options.message ? options.message(issue) : issue.message);
+    errors.set(field, messages);
+  }
+  return Object.fromEntries([...errors].map(([field, messages]) => [field, options.all ? messages : messages[0]]));
+}

package/src/validation/index.ts

@@ -1,2 +1,4 @@
 export { PASSWORD_MIN_LENGTH, defaultPasswordStrings, passwordSchema } from "./password";
 export type { PasswordStrings } from "./password";
+export { zodFieldErrors } from "./fieldErrors";
+export type { IssueMessage } from "./fieldErrors";