Merge pull request #6 from workfloworchestrator/1602-pydantic-forms-code

1602 Pydantic forms ui - first working field

Author: DutchBen

backend/main.py

@@ -55,13 +55,12 @@ class TestForm(FormPage):
 
         form_data_1 = yield TestForm
 
-        class TestForm2(SubmitFormPage):
-            model_config = ConfigDict(title="Form 2 Title")
-
-            name_2: str | None = None
-
-        form_data_2 = yield TestForm2
-        return form_data_1.model_dump() | form_data_2.model_dump()
+        # class TestForm2(SubmitFormPage):
+        #    model_config = ConfigDict(title="Form 2 Title")
+        #
+        #    name_2: str | None = None
+        #    form_data_2 = yield TestForm2
+        return form_data_1.model_dump() #| form_data_2.model_dump()
 
     data = post_form(form_generator, state={}, user_inputs=form_data)
     return data

frontend/.changeset/config.json

@@ -1,10 +1,11 @@
 {
-    "$schema": "https://unpkg.com/@changesets/config@2.0.0/schema.json",
+    "$schema": "https://unpkg.com/@changesets/config@3.0.5/schema.json",
     "changelog": "@changesets/cli/changelog",
-    "baseBranch": "main",
     "commit": false,
     "fixed": [],
     "linked": [],
-    "access": "public",
-    "updateInternalDependencies": "patch"
+    "access": "restricted",
+    "baseBranch": "main",
+    "updateInternalDependencies": "patch",
+    "ignore": []
 }

…ntend/.changeset/selfish-ravens-smile.md frontend/.changeset/little-hats-grab.mdfrontend/.changeset/selfish-ravens-smile.md renamed to frontend/.changeset/little-hats-grab.md frontend/.changeset/selfish-ravens-smile.md renamed to frontend/.changeset/little-hats-grab.md

@@ -3,4 +3,4 @@
 'example': patch
 ---
 
-Tests npm publish
+Initial publish trigger

frontend/.changeset/serious-cheetahs-jump.md

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

frontend/.changeset/silly-mirrors-love.md

@@ -3,19 +3,19 @@
     "version": "0.1.0",
     "private": true,
     "scripts": {
-        "dev": "next dev --turbopack",
+        "dev": "next dev",
         "build": "next build",
         "start": "next start",
         "test": "jest --passWithNoTests",
         "tsc": "tsc --noEmit",
-        "lint": "next lint"
+        "lint": "next lint",
+        "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
     },
     "dependencies": {
+        "next": "^15.1.3",
         "pydantic-forms": "*",
-        "next": "15.0.3",
         "react": "18.*",
-        "react-dom": "18.*",
-        "swr": "^2.2.5"
+        "react-dom": "18.*"
     },
     "devDependencies": {
         "@orchestrator-ui/eslint-config-custom": "^1.4.1",

frontend/apps/example/next-env.d.ts

@@ -1,32 +1,40 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import PydanticForm from 'pydantic-forms';
+import type { PydanticFormProvider } from 'pydantic-forms';
 
-// import PydanticForm from 'pydantic-forms';
 import styles from './page.module.css';
 
 export default function Home() {
-    const [formDefinition, setFormDefinition] = useState(null);
-
-    useEffect(() => {
-        fetch('http://localhost:8000/form', {
+    const pydanticFormProvider: PydanticFormProvider = async ({
+        requestBody,
+    }) => {
+        const fetchResult = await fetch('http://localhost:8000/form', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
             },
-            body: JSON.stringify([]),
-        })
-            .then((response) => response.json())
-            .then((data) => {
-                setFormDefinition(data.form);
-            });
-    }, []);
+            body: JSON.stringify(requestBody),
+        });
+        const jsonResult = await fetchResult.json();
+        return jsonResult;
+    };
 
     return (
         <div className={styles.page}>
             <h1>Pydantic Form</h1>
 
-            <div>{JSON.stringify(formDefinition)}</div>
+            <PydanticForm
+                id="theForm"
+                onSuccess={() => {
+                    alert('Form submitted successfully');
+                }}
+                config={{
+                    formProvider: pydanticFormProvider,
+                }}
+                headerComponent={<div>HEADER COMPONENT</div>}
+                footerComponent={<div>FOOTER COMPONENT</div>}
+            />
         </div>
     );
 }