[docs] Dynamic forms guide (#319)

* [docs] WIP: Add dynamic forms guide

* [docs] Add `Dynamic forms` guide

Author: x0k

.changeset/wicked-things-eat.md

@@ -0,0 +1,5 @@
+---
+"docs2": minor
+---
+
+Add `Dynamic forms` guide

apps/docs2/src/content/docs/guides/dependencies.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { SimpleForm, type Schema, type UiSchema } from "@sjsf/form";
+
+  import * as defaults from "@/lib/form/defaults";
+
+  const schema = {
+    type: "object",
+    properties: {
+      foo: {
+        type: "string",
+        description:
+          "If you enter anything here then `bar` will become required",
+      },
+      bar: {
+        type: "string",
+        description: "If you enter anything here then `baz` will appear",
+      },
+    },
+    dependencies: {
+      foo: ["bar"],
+      bar: {
+        properties: {
+          baz: {
+            enum: ["string", "number", "boolean"],
+            description:
+              "If you select anything here, the corresponding field will appear",
+          },
+        },
+      },
+      baz: {
+        oneOf: [
+          {
+            properties: {
+              baz: {
+                const: "string",
+              },
+              string: {
+                type: "string",
+              },
+            },
+          },
+          {
+            properties: {
+              baz: {
+                const: "number",
+              },
+              number: {
+                type: "number",
+              },
+            },
+          },
+          {
+            properties: {
+              baz: {
+                const: "boolean",
+              },
+              boolean: {
+                type: "boolean",
+              },
+            },
+          },
+        ],
+      },
+    },
+  } as const satisfies Schema;
+
+  const uiSchema: UiSchema = {
+    baz: {
+      "ui:components": {
+        stringField: "enumField",
+      },
+    },
+  };
+</script>
+
+<SimpleForm {...defaults} {schema} {uiSchema} />

apps/docs2/src/content/docs/guides/dynamic-forms.mdx

@@ -0,0 +1,77 @@
+---
+title: Dynamic forms
+sidebar:
+  order: 57
+---
+
+import { Code, Card, LinkCard, Tabs, TabItem } from '@astrojs/starlight/components';
+
+import FormCard from '@/components/form-card.astro'
+
+import OneOfForm from './one-of.svelte'
+import oneOfFromCode from './one-of.svelte?raw'
+
+import DependenciesForm from './dependencies.svelte'
+import dependenciesFormCode from './dependencies.svelte?raw'
+
+import IfElseThenFrom from './if-then-else.svelte'
+import ifElseThenFromCode from './if-then-else.svelte?raw'
+
+Using the following JSON Schema keywords, you can build forms that change in
+response to user input.
+
+## oneOf / anyOf
+
+Fields `oneOf` or `anyOf` can be used as a **virtual selector**.
+This selector **does not modify form data directly** but determines which schema is active.
+
+When the form is initialized with `initialValue`, SJSF **automatically selects the most suitable schema** based on the data.
+
+<Tabs>
+  <TabItem label="Form">
+    <FormCard>
+      <OneOfForm client:only="svelte" />
+    </FormCard>
+  </TabItem>
+  <TabItem label="form.svelte">
+    <Code code={oneOfFromCode} lang="svelte" />
+  </TabItem>
+</Tabs>
+
+
+## dependencies
+
+The `dependencies` keyword allows you to declare relationships between fields,
+where the presence or value of one field affects the schema of others.
+
+<Tabs>
+  <TabItem label="Form">
+    <FormCard>
+      <DependenciesForm client:only="svelte" />
+    </FormCard>
+  </TabItem>
+  <TabItem label="form.svelte">
+    <Code code={dependenciesFormCode} lang="svelte" />
+  </TabItem>
+</Tabs>
+
+## if/then/else
+
+The `if/then/else` keywords allow you to define conditional schema branches based on form data.
+
+<Tabs>
+  <TabItem label="Form">
+    <FormCard>
+      <IfElseThenFrom client:only="svelte" />
+    </FormCard>
+  </TabItem>
+  <TabItem label="form.svelte">
+    <Code code={ifElseThenFromCode} lang="svelte" />
+  </TabItem>
+</Tabs>
+
+
+## patternProperties
+
+If your schema uses the `patternProperties` keyword, see the [advanced example](/examples/advanced/)
+`pattern-properties-validator` to improve the user experience.

apps/docs2/src/content/docs/guides/if-then-else.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { SimpleForm, type Schema } from "@sjsf/form";
+
+  import * as defaults from "@/lib/form/defaults";
+
+  const schema = {
+    type: "object",
+    properties: {
+      isCompany: {
+        type: "boolean",
+        title: "Registering as a company",
+      },
+    },
+    required: ["isCompany"],
+    if: {
+      properties: {
+        isCompany: { const: true },
+      },
+      required: ["isCompany"],
+    },
+    then: {
+      properties: {
+        companyName: {
+          type: "string",
+          title: "Company name",
+        },
+      },
+      required: ["companyName"],
+    },
+    else: {
+      properties: {
+        fullName: {
+          type: "string",
+          title: "Full name",
+        },
+      },
+      required: ["fullName"],
+    },
+  } as const satisfies Schema;
+</script>
+
+<SimpleForm {...defaults} {schema} />

apps/docs2/src/content/docs/guides/one-of.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { SimpleForm, type Schema } from "@sjsf/form";
+
+  import * as defaults from "@/lib/form/defaults";
+
+  const schema = {
+    type: "object",
+    properties: {
+      common: {
+        type: "string",
+      },
+    },
+    oneOf: [
+      {
+        title: "Foo schema",
+        properties: {
+          foo: {
+            type: "string",
+          },
+        },
+      },
+      {
+        title: "Bar schema",
+        properties: {
+          bar: {
+            type: "string",
+          },
+        },
+      },
+    ],
+  } as const satisfies Schema;
+
+  const initialValue = {
+    common: "hello",
+    bar: "world",
+  };
+</script>
+
+<SimpleForm {...defaults} {schema} {initialValue} />