Merge pull request #22 from x0k/use-form

New `useForm` API

.changeset/mean-bugs-end.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": minor
+---
+
+Implement `useForm` API, Add `FormContent` and `SubmitButton` components

.github/workflows/deploy-pages.yaml

@@ -0,0 +1,54 @@
+name: Deploy to GitHub Pages
+on:
+  release:
+    types: [published]
+
+permissions:
+  id-token: write
+  contents: write
+  pages: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Checkout code repository
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with:
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
+      - name: Build
+        run: pnpm run build --filter="./apps/*"
+
+      - name: Merge apps build outputs
+        run: mv apps/playground/dist apps/docs/dist/playground
+
+      - name: Upload Pages Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "apps/docs/dist/"
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/release.yml → .github/workflows/version-and-publish.yaml

@@ -1,4 +1,4 @@
-name: Release
+name: Version and Publish
 on:
   push:
     branches:
@@ -10,7 +10,6 @@ permissions:
   id-token: write
   contents: write
   pull-requests: write
-  pages: write
 
 jobs:
   version:
@@ -41,9 +40,9 @@ jobs:
             ${{ runner.os }}-turbo-
 
       - name: Build
-        run: pnpm run ci:build
+        run: pnpm run ci:build --filter="@sjsf/*"
 
-      - name: create and publish versions
+      - name: Create and publish versions
         uses: changesets/action@v1
         with:
           version: pnpm ci:version
@@ -53,23 +52,3 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Merge apps build outputs
-        run: mv apps/playground/dist apps/docs/dist/playground
-
-      - name: Upload Pages Artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: "apps/docs/dist/"
-
-  deploy:
-    needs: version
-    runs-on: ubuntu-latest
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
-

README.md

@@ -19,7 +19,7 @@ npm install @sjsf/form @sjsf/ajv8-validator ajv@8
 ```svelte
 <script lang="ts">
   import Ajv from 'ajv';
-  import { Form } from '@sjsf/form';
+  import { useForm, SimpleForm, type Schema } from '@sjsf/form';
   import { translation } from '@sjsf/form/translations/en';
   import { theme } from '@sjsf/form/basic-theme';
   import {
@@ -31,32 +31,32 @@ npm install @sjsf/form @sjsf/ajv8-validator ajv@8
   const validator = new AjvValidator(
     addFormComponents(new Ajv(DEFAULT_AJV_CONFIG))
   );
-</script>
 
-<Form
-  {...theme}
-  schema={{
-    title: 'Tasks',
-    type: 'array',
-    items: {
-      type: 'object',
-      properties: {
-        name: {
-          type: 'string',
-          title: 'Name',
-        },
-        description: {
-          type: 'string',
-          title: 'Description',
-        },
+  const schema: Schema = {
+    type: 'object',
+    properties: {
+      name: {
+        type: 'string',
+        title: 'Name',
+      },
+      description: {
+        type: 'string',
+        title: 'Description',
       },
-      required: ["name"]
     },
-  }}
-  {validator}
-  {translation}
-  onSubmit={console.log}
-/>
+    required: ["name"]
+  }
+
+  const form = useForm({
+    ...theme,
+    schema,
+    validator,
+    translation,
+    onSubmit: console.log,
+  })
+</script>
+
+<SimpleForm {form} />
 ```
 
 ## License

apps/docs/src/theme.svelte.ts → apps/docs/src/astro.svelte.ts

@@ -14,7 +14,7 @@ const loadTheme = (): Theme =>
 const getPreferredColorScheme = (): DarkOrLight =>
   matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
 
-export function astroTheme() {
+export function useAstro() {
   let theme = $state(loadTheme());
 
   $effect(() => {

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

@@ -0,0 +1,27 @@
+import Ajv, { type ErrorObject } from "ajv";
+import { useForm, 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";
+
+type Defaults = "widgets" | "components" | "validator" | "translation";
+
+export type CustomOptions<T> = Omit<UseFormOptions<T, ErrorObject>, Defaults> &
+  Partial<Pick<UseFormOptions<T, ErrorObject>, Defaults>>;
+
+export function useCustomForm<T>(options: CustomOptions<T>) {
+  const validator = new AjvValidator(
+    addFormComponents(new Ajv(DEFAULT_AJV_CONFIG))
+  );
+  return useForm(
+    Object.setPrototypeOf(options, {
+      ...theme,
+      validator,
+      translation,
+    })
+  );
+}

apps/docs/src/content/docs/_schema.ts

@@ -87,7 +87,7 @@ export const uiSchema: UiSchemaRoot = {
   },
 };
 
-export const initialData = {
+export const initialValue = {
   lastName: "Norris",
   age: 75,
   bio: "Roundhouse kicking asses since 1940",

apps/docs/src/content/docs/_with-basic.svelte

@@ -1,22 +1,21 @@
 <script lang="ts">
-  import { Form } from "@sjsf/form";
+  import { useForm, SimpleForm } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/form/basic-theme";
 
-  import { schema, uiSchema, initialData } from "./_schema";
+  import { schema, uiSchema, initialValue } from "./_schema";
   import { validator } from "./_validator";
 
-  let value = $state(initialData);
+  const form = useForm({
+    ...theme,
+    initialValue,
+    schema,
+    uiSchema,
+    validator,
+    translation,
+  });
 </script>
 
-<Form
-  bind:value
-  {...theme}
-  {schema}
-  {uiSchema}
-  {validator}
-  {translation}
-  onSubmit={console.log}
-/>
+<SimpleForm {form} style="display: flex; flex-direction: column; gap: 1rem;" />
 
-<pre>{JSON.stringify(value, null, 2)}</pre>
+<pre>{JSON.stringify(form.value, null, 2)}</pre>

apps/docs/src/content/docs/_with-daisyui.svelte

@@ -1,28 +1,30 @@
 <script lang="ts">
-  import { Form } from "@sjsf/form";
+  import { SimpleForm, useForm } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/daisyui-theme";
 
-  import { astroTheme } from "@/theme.svelte";
+  import { useAstro } from "@/astro.svelte";
 
-  import { schema, uiSchema, initialData } from "./_schema";
-  import { validator } from './_validator'
+  import { schema, uiSchema, initialValue } from "./_schema";
+  import { validator } from "./_validator";
 
-  let value = $state(initialData);
+  const astro = useAstro();
 
-  const astro = astroTheme();
+  const form = useForm({
+    ...theme,
+    initialValue,
+    schema,
+    uiSchema,
+    validator,
+    translation,
+  });
 </script>
 
-<Form
+<SimpleForm
+  {form}
   style="background-color: transparent; margin-bottom: 1rem;"
-  bind:value
-  {...theme}
-  {schema}
-  {uiSchema}
-  {validator}
-  {translation}
+  class="flex flex-col gap-4"
   data-theme={astro.darkOrLight}
-  onSubmit={console.log}
 />
 
-<pre>{JSON.stringify(value, null, 2)}</pre>
+<pre>{JSON.stringify(form.value, null, 2)}</pre>

apps/docs/src/content/docs/_with-flowbite.svelte

@@ -1,27 +1,25 @@
 <script lang="ts">
-  import { Form } from "@sjsf/form";
+  import { SimpleForm, useForm } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/flowbite-theme";
 
-  import { astroTheme } from "@/theme.svelte";
+  import { useAstro } from "@/astro.svelte";
 
-  import { schema, uiSchema, initialData } from "./_schema";
+  import { schema, uiSchema, initialValue } from "./_schema";
   import { validator } from "./_validator";
 
-  let value = $state(initialData);
+  const astro = useAstro();
 
-  const astro = astroTheme();
+  const form = useForm({
+    ...theme,
+    initialValue,
+    schema,
+    uiSchema,
+    validator,
+    translation,
+  });
 </script>
 
-<Form
-  class="flex flex-col gap-4 mb-4 {astro.darkOrLight}"
-  bind:value
-  {...theme}
-  {schema}
-  {uiSchema}
-  {validator}
-  {translation}
-  onSubmit={console.log}
-/>
+<SimpleForm {form} class="flex flex-col gap-4 mb-4 {astro.darkOrLight}" />
 
-<pre>{JSON.stringify(value, null, 2)}</pre>
+<pre>{JSON.stringify(form.value, null, 2)}</pre>