[docs] Fix custom form

Author: x0k

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

@@ -0,0 +1,46 @@
+<script lang="ts" generics="T">
+  import { SvelteMap } from "svelte/reactivity";
+  import Ajv, { type ErrorObject } from "ajv";
+  import { Form, type FormProps } 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";
+
+  type Defaults = "widgets" | "components" | "validator" | "translation";
+
+  type Props<T> = Omit<FormProps<T, ErrorObject>, Defaults> &
+    Partial<Pick<FormProps<T, ErrorObject>, Defaults>>;
+
+  let {
+    value = $bindable(),
+    form = $bindable(),
+    isSubmitted = $bindable(false),
+    errors = $bindable(new SvelteMap()),
+    validator = new AjvValidator(
+      addFormComponents(new Ajv(DEFAULT_AJV_CONFIG))
+    ),
+    ...rest
+  }: Props<T> = $props();
+
+  let self: Form<T, ErrorObject>;
+
+  export function validate() {
+    return self.validate();
+  }
+</script>
+
+<Form
+  bind:this={self}
+  {translation}
+  {...theme}
+  {...rest}
+  {validator}
+  bind:value
+  bind:form
+  bind:isSubmitted
+  bind:errors
+/>

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

@@ -3,7 +3,7 @@
   import type { Errors } from "@sjsf/form";
   import { SvelteMap } from 'svelte/reactivity';
 
-  import { CustomForm } from "@/components/custom-form";
+  import CustomForm from "@/components/custom-form.svelte";
 
   import { objectSchema } from './_demo-schemas';
 

apps/docs/src/content/docs/guides/_errors-list.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { focusOnFirstError } from "@sjsf/form/focus-on-first-error";
 
-  import { CustomForm } from "@/components/custom-form";
+  import CustomForm from "@/components/custom-form.svelte";
 
   import { objectSchema } from "./_demo-schemas";
 </script>

apps/docs/src/content/docs/guides/_focus-on-first-error.svelte

@@ -3,7 +3,7 @@
 
   import type { Schema, Errors } from "@sjsf/form";
 
-  import { CustomForm } from "@/components/custom-form";
+  import CustomForm from "@/components/custom-form.svelte";
   import type { ErrorObject } from "ajv";
 
   const schema: Schema = {

apps/docs/src/content/docs/guides/_form-data.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { ON_CHANGE, ON_INPUT, AFTER_SUBMITTED } from "@sjsf/form";
 
-  import { CustomForm } from "@/components/custom-form";
+  import CustomForm from "@/components/custom-form.svelte";
 
   import { objectSchema } from "./_demo-schemas";
 </script>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Schema, UiSchemaRoot } from "@sjsf/form";
 
-  import { CustomForm } from "@/components/custom-form";
+  import CustomForm from "@/components/custom-form.svelte";
 
   const schema: Schema = {
     title: "Schema title",

apps/docs/src/content/docs/guides/_ui-schema.svelte

@@ -6,9 +6,9 @@ sidebar:
 
 import { Code } from '@astrojs/starlight/components';
 
-import customFormCode from '@/components/custom-form?raw';
+import customFormCode from '@/components/custom-form.svelte?raw';
 
 Even with a simple setup, resulting code is very verbose.
 Therefore, after choosing a theme, validator and translation, it is convenient to create a custom component.
 
-<Code code={customFormCode} lang="typescript" title="custom-form.ts" />
+<Code code={customFormCode} lang="svelte" title="custom-form.svelte" />

apps/docs/src/content/docs/guides/custom-form.mdx

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { theme } from "@sjsf/form/basic-theme";
 
-  import { CustomForm } from '@/components/custom-form'
+  import CustomForm from "@/components/custom-form.svelte";
 
   import { schema, uiSchema } from "./_demo-schema";
 

apps/docs/src/content/docs/themes/_basic-theme.svelte

@@ -2,7 +2,7 @@
   import { theme } from "@sjsf/daisyui-theme";
 
   import { astroTheme } from "@/theme.svelte";
-  import { CustomForm } from "@/components/custom-form";
+  import CustomForm from "@/components/custom-form.svelte";
 
   import { schema, uiSchema } from "./_demo-schema";