Merge pull request #117 from classmodel/form-refactor

Form refactor

Author: sverhoeven

.github/workflows/deploy.yml

@@ -37,6 +37,12 @@ jobs:
         run: pnpm run docs --out ../../apps/class-solid/.output/public/docs
         working-directory: ./packages/class
 
+      - name: Form example app
+        run: | 
+          BASE_URL='/class-web/form' pnpm example:build
+          mv example-dist ../../apps/class-solid/.output/public/form
+        working-directory: ./packages/form
+
       - name: upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

.github/workflows/publish-package.yml

@@ -5,15 +5,15 @@ on:
     types: [published]
 
 jobs:
-  publish:
+  publish-class:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "22"
           cache: "pnpm"
           cache-dependency-path: ./pnpm-lock.yaml
           registry-url: https://registry.npmjs.org/
@@ -29,3 +29,27 @@ jobs:
         working-directory: packages/class
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+  publish-form:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "pnpm"
+          cache-dependency-path: ./pnpm-lock.yaml
+          registry-url: https://registry.npmjs.org/
+      - run: pnpm install
+      - run: pnpm build
+        working-directory: packages/form
+      - run: |
+          if [[ $GITHUB_REF_NAME == *next* ]]; then
+            pnpm publish --tag next --no-git-checks
+          else
+            pnpm publish --no-git-checks
+          fi
+        working-directory: packages/form
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/quality.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "22"
           cache: "pnpm"
           cache-dependency-path: ./pnpm-lock.yaml
       - name: Install dependencies
@@ -36,7 +36,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "22"
           cache: "pnpm"
           cache-dependency-path: ./pnpm-lock.yaml
       - name: Install dependencies

.github/workflows/test.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "22"
           cache: "pnpm"
           cache-dependency-path: ./pnpm-lock.yaml
       - name: Install dependencies
@@ -36,7 +36,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "22"
           cache: "pnpm"
           cache-dependency-path: ./pnpm-lock.yaml
       - name: Install dependencies

README.md

@@ -23,6 +23,8 @@ The class model can be run from the command line, see [packages/class/README.md]
 
 The class model can be used a package or library, see [packages/class/README.md](packages/class/README.md#package-usage) for more information.
 
+The app uses a form component that has been generalized into a package, see [packages/form/README.md](packages/form/README.md) for more information.
+
 ## Developers
 
 This repository is a so-called monorepo, where multiple packages and application

apps/class-solid/package.json

@@ -1,7 +1,7 @@
 {
   "name": "class-solid",
   "private": true,
-  "version": "0.0.15",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vinxi dev",
@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@classmodel/class": "workspace:*",
+    "@classmodel/form": "workspace:*",
     "@kobalte/core": "^0.13.3",
-    "@modular-forms/solid": "^0.23.0",
     "@solid-primitives/refs": "^1.0.8",
     "@solidjs/router": "^0.14.1",
     "@solidjs/start": "^1.0.4",

apps/class-solid/src/components/ExperimentConfigForm.tsx

@@ -1,12 +1,8 @@
 import type { Config } from "@classmodel/class/config";
-import { pruneConfig } from "@classmodel/class/config_utils";
-import { type SubmitHandler, createForm } from "@modular-forms/solid";
+import { Form } from "@classmodel/form";
 import { createMemo } from "solid-js";
-import { unwrap } from "solid-js/store";
 import type { ExperimentConfig } from "~/lib/experiment_config";
 import { findPresetByName } from "~/lib/presets";
-import { ObjectField } from "./ObjectField";
-import { ajvForm } from "./ajvForm";
 
 export function ExperimentConfigForm({
   id,
@@ -19,34 +15,13 @@ export function ExperimentConfigForm({
 }) {
   const preset = createMemo(() => findPresetByName(experiment.preset));
 
-  const initialValues = createMemo(() =>
-    pruneConfig(unwrap(experiment.reference), unwrap(preset().config)),
-  );
-  const [_, { Form, Field }] = createForm<Config>({
-    initialValues: initialValues(),
-    validate: ajvForm(preset().validate),
-  });
-
-  const handleSubmit: SubmitHandler<Config> = (values, event) => {
-    // Use ajv to coerce strings to numbers and fill in defaults
-    preset().validate(values);
-    onSubmit(values);
-  };
-
   return (
     <Form
       id={id}
-      onSubmit={handleSubmit}
-      shouldActive={false} // Also return from collapsed fields
-      shouldDirty={false} // ~Don't return empty strings for unset fields~
-    >
-      <div>
-        <ObjectField
-          schema={preset().schema}
-          value={initialValues()}
-          Field={Field}
-        />
-      </div>
-    </Form>
+      onSubmit={onSubmit}
+      values={experiment.reference}
+      defaults={preset().config}
+      schema={preset().schema}
+    />
   );
 }