Merge pull request #26 from x0k/next

Preparations for SvelteKit integration

.changeset/late-pianos-hope.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/ajv8-validator": patch
+---
+
+Fix peer dependency specifier

.changeset/light-experts-flash.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/skeleton-theme": patch
+---
+
+Fix peer dependency specifier

.changeset/modern-plums-confess.md

@@ -0,0 +1,5 @@
+---
+"docs": minor
+---
+
+Add Zod integration guide

.changeset/nasty-onions-live.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": minor
+---
+
+Add `preventDataLoss` function for handling `beforeunload` event

.changeset/popular-geckos-taste.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/zod-integration": minor
+---
+
+Add `@sjsf/zod-integration` package

.changeset/rare-snails-clap.md

@@ -0,0 +1,7 @@
+---
+"@sjsf/form": patch
+---
+
+Changed the value of `DEFAULT_ID_SEPARATOR`
+
+This change may be a BREAKING change for you if you code implicitly depends on this constant.

.changeset/rotten-scissors-shake.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/shadcn-theme": patch
+---
+
+Fix peer dependency specifier

.changeset/strange-laws-smell.md

@@ -0,0 +1,5 @@
+---
+"docs": minor
+---
+
+Add `preventDataLoss` guide

.changeset/stupid-crabs-teach.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": patch
+---
+
+Remove forced `undefined` for `value` in `onSubmit` handler of the form

.changeset/stupid-elephants-help.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": minor
+---
+
+Allow to pass multiple arguments to `mutation.run` method

.changeset/tiny-cups-unite.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": minor
+---
+
+Add form option `pseudoIdSeparator`

.changeset/twenty-suns-buy.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/ajv8-validator": minor
+---
+
+Add `createValidator` function

.changeset/warm-zoos-shop.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": patch
+---
+
+Allow to pass a `Map` and `Array` to the `initialErrors` form option

README.md

@@ -18,19 +18,12 @@ npm install @sjsf/form @sjsf/ajv8-validator ajv@8
 
 ```svelte
 <script lang="ts">
-  import Ajv from 'ajv';
   import { useForm, SimpleForm, type Schema } from '@sjsf/form';
   import { translation } from '@sjsf/form/translations/en';
   import { theme } from '@sjsf/form/basic-theme';
-  import {
-    AjvValidator,
-    addFormComponents,
-    DEFAULT_AJV_CONFIG,
-  } from "@sjsf/ajv8-validator";
-
-  const validator = new AjvValidator(
-    addFormComponents(new Ajv(DEFAULT_AJV_CONFIG))
-  );
+  import { createValidator } from "@sjsf/ajv8-validator";
+
+  const validator = createValidator();
 
   const schema: Schema = {
     type: 'object',

apps/docs/package.json

@@ -14,20 +14,23 @@
     "@sjsf/daisyui-theme": "workspace:*",
     "@sjsf/flowbite-theme": "workspace:*",
     "@sjsf/form": "workspace:*",
-    "@sjsf/skeleton-theme": "workspace:*",
     "@sjsf/shadcn-theme": "workspace:*",
+    "@sjsf/skeleton-theme": "workspace:*",
+    "@sjsf/zod-integration": "workspace:*",
     "ajv": "catalog:",
-    "mermaid": "^11.3.0",
-    "svg-pan-zoom": "github:bumbu/svg-pan-zoom"
+    "mermaid": "^11.4.0",
+    "svg-pan-zoom": "github:bumbu/svg-pan-zoom",
+    "zod": "catalog:",
+    "zod-to-json-schema": "^3.23.5"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/starlight": "^0.28.3",
-    "@astrojs/svelte": "^5.7.2",
-    "astro": "^4.16.6",
-    "astro-vtbot": "^1.10.3",
+    "@astrojs/starlight": "^0.28.6",
+    "@astrojs/svelte": "^5.7.3",
+    "astro": "^4.16.10",
+    "astro-vtbot": "^1.10.6",
     "sharp": "^0.33.5",
-    "starlight-package-managers": "^0.7.0",
+    "starlight-package-managers": "^0.8.0",
     "svelte": "catalog:"
   }
 }

apps/docs/src/components/custom-form.ts

@@ -1,22 +1,16 @@
-import Ajv, { type ErrorObject } from "ajv";
-import { useForm, type UseFormOptions } from "@sjsf/form";
+import type { ErrorObject } from "ajv";
+import { useForm, type FormAPI, type UseFormOptions } from "@sjsf/form";
 import { translation } from "@sjsf/form/translations/en";
 import { theme } from "@sjsf/form/basic-theme";
-import {
-  AjvValidator,
-  addFormComponents,
-  DEFAULT_AJV_CONFIG,
-} from "@sjsf/ajv8-validator";
+import { createValidator } from "@sjsf/ajv8-validator";
 
 type Defaults = "widgets" | "components" | "validator" | "translation";
 
-export type CustomOptions<T> = Omit<UseFormOptions<T, ErrorObject>, Defaults> &
-  Partial<Pick<UseFormOptions<T, ErrorObject>, Defaults>>;
+export type CustomOptions<T, E> = Omit<UseFormOptions<T, E>, Defaults> &
+  Partial<Pick<UseFormOptions<T, E>, Defaults>>;
 
-export function useCustomForm<T>(options: CustomOptions<T>) {
-  const validator = new AjvValidator(
-    addFormComponents(new Ajv(DEFAULT_AJV_CONFIG))
-  );
+export function useCustomForm<T, E = ErrorObject>(options: CustomOptions<T, E>): FormAPI<T, E> {
+  const validator = createValidator();
   return useForm(
     Object.setPrototypeOf(options, {
       ...theme,

apps/docs/src/content/docs/api-reference/widgets.mdx

@@ -11,10 +11,7 @@ interface RequiredAttributes {
   id: string;
   name: string;
   required: boolean;
-  readonly: boolean;
   disabled: boolean;
-  onfocus: (e: Event) => void;
-  onblur: (e: Event) => void;
 }
 
 interface WidgetCommonProps<V, A> {

apps/docs/src/content/docs/guides/_live-validation.svelte

@@ -1,17 +1,10 @@
 <script lang="ts">
-  import Ajv from "ajv";
   import { useForm, SimpleForm, type Schema } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/form/basic-theme";
-  import {
-    AjvValidator,
-    addFormComponents,
-    DEFAULT_AJV_CONFIG,
-  } from "@sjsf/ajv8-validator";
+  import { createValidator } from "@sjsf/ajv8-validator";
 
-  const validator = new AjvValidator(
-    addFormComponents(new Ajv(DEFAULT_AJV_CONFIG))
-  );
+  const validator = createValidator();
 
   const schema: Schema = {
     type: "string",

apps/docs/src/content/docs/guides/_minimal-setup.svelte

@@ -1,17 +1,10 @@
 <script lang="ts">
-  import Ajv from "ajv";
   import { type Schema, useForm, SimpleForm } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/form/basic-theme";
-  import {
-    AjvValidator,
-    addFormComponents,
-    DEFAULT_AJV_CONFIG,
-  } from "@sjsf/ajv8-validator";
+  import { createValidator } from "@sjsf/ajv8-validator";
 
-  const validator = new AjvValidator(
-    addFormComponents(new Ajv(DEFAULT_AJV_CONFIG))
-  );
+  const validator = createValidator();
 
   const schema: Schema = {
     type: "string",

apps/docs/src/content/docs/guides/_prevent-data-loss.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { FormContent } from "@sjsf/form";
+  import { preventDataLoss } from "@sjsf/form/prevent-data-loss.svelte";
+
+  import { useCustomForm } from "@/components/custom-form";
+
+  const form = useCustomForm({
+    schema: { type: "string" },
+  });
+
+  preventDataLoss(form);
+</script>
+
+<FormContent bind:value={form.formValue} />
+
+<button
+  style="width: 100%; padding: 0.5rem;"
+  onclick={() => {
+    window.location.reload();
+  }}
+>
+  Reload page
+</button>

apps/docs/src/content/docs/guides/labels-and-icons.mdx

@@ -106,7 +106,7 @@ Usage:
   Playground
 </LinkButton>
 
-### Radic icons
+### Radix icons
 
 Installation:
 

apps/docs/src/content/docs/guides/prevent-data-loss.mdx

@@ -0,0 +1,23 @@
+---
+title: Prevent data loss
+sidebar:
+  order: 4
+---
+
+import { Code, Card } from '@astrojs/starlight/components'
+
+import Form from './_prevent-data-loss.svelte'
+import formCode from './_prevent-data-loss.svelte?raw'
+
+You can prevent data loss due to accidentally closing or reloading a tab by using
+the `preventDataLoss` function.
+
+## Example
+
+Try to change the value of the form and reload the page.
+
+<Code code={formCode} lang="svelte" />
+
+<Card>
+  <Form client:only="svelte" />
+</Card>

apps/docs/src/content/docs/guides/value-vs-form-value.mdx

@@ -1,7 +1,7 @@
 ---
 title: "`value` vs `formValue`"
 sidebar:
-  order: 4
+  order: 5
 ---
 
 Once a form is created, you have access to its state through the `value` and `formValue` properties.

apps/docs/src/content/docs/integrations/_generic-backend.svelte

@@ -56,10 +56,7 @@
         },
       },
     },
-    onSubmit(config: Config | undefined) {
-      if (!config) return;
-      mutation.run(config);
-    },
+    onSubmit: mutation.run,
     get disabled() {
       return mutation.isProcessed;
     },

apps/docs/src/content/docs/integrations/_zod.astro

@@ -0,0 +1,9 @@
+---
+import { ShadowHost } from '@/components/shadow'
+
+import Form from './_zod.svelte'
+---
+
+<ShadowHost client:only="svelte">
+  <Form client:only="svelte" />
+</ShadowHost>

apps/docs/src/content/docs/integrations/_zod.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { SimpleForm, type Schema, type UiSchema } from "@sjsf/form";
+  import { createValidator } from "@sjsf/ajv8-validator";
+  import { withZod } from "@sjsf/zod-integration";
+  import { zodToJsonSchema } from "zod-to-json-schema";
+  import { z } from "zod";
+
+  import { useCustomForm } from "@/components/custom-form";
+
+  const schema = z.object({
+    id: z
+      .string()
+      .regex(new RegExp("\\d+"), "Must be a number")
+      .min(8)
+      .optional(),
+    active: z.boolean().optional(),
+    skills: z.array(z.string().min(5)).min(4).optional(),
+    multipleChoicesList: z
+      .array(z.enum(["foo", "bar", "fuzz"]))
+      .max(2)
+      .optional(),
+  });
+
+  type Value = z.infer<typeof schema>;
+
+  const uiSchema: UiSchema = {
+    id: {
+      "ui:options": {
+        title: "Identifier",
+      },
+    },
+    active: {
+      "ui:options": {
+        title: "Active",
+      },
+    },
+    multipleChoicesList: {
+      "ui:options": {
+        title: "Pick max two items",
+      },
+    },
+  };
+
+  const validator = withZod(createValidator(), { schema, uiSchema });
+
+  let value = $state<Value>();
+
+  const form = useCustomForm({
+    schema: zodToJsonSchema(schema) as Schema,
+    uiSchema,
+    validator,
+    initialValue: {
+      id: "Invalid",
+      skills: ["karate", "budo", "aikido"],
+      multipleChoicesList: ["foo", "bar", "fuzz"],
+    },
+    onSubmit(data: Value) {
+      value = data;
+    },
+  });
+</script>
+
+<SimpleForm
+  {form}
+  novalidate
+  style="display: flex; flex-direction: column; gap: 1rem;"
+/>
+
+<pre>{JSON.stringify(value, null, 2)}</pre>