Merge pull request #21 from workfloworchestrator/1694-label-and-divider

1694 label and divider

Author: DutchBen

.gitignore

@@ -18,3 +18,4 @@ __pycache__/
 .vscode
 test
 .idea
+todo.md

backend/main.py

@@ -1,6 +1,16 @@
 from dataclasses import dataclass
 from typing import Annotated, ClassVar, Iterator
-from annotated_types import SLOTS, BaseMetadata, GroupedMetadata
+from annotated_types import (
+    SLOTS,
+    BaseMetadata,
+    GroupedMetadata,
+    Ge,
+    Le,
+    MultipleOf,
+    Predicate,
+    doc,
+)
+
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 
@@ -11,6 +21,14 @@
 from pydantic_forms.exceptions import FormException
 from pydantic_forms.core import FormPage as PydanticFormsFormPage
 from pydantic_forms.types import JSON
+from pydantic_forms.validators import LongText, Label, Divider, Hidden
+
+# Choice,
+# CustomerId,
+# DisplaySubscription,
+# ListOfOne,
+# ListOfTwo,
+# migration_summary
 
 
 class FormPage(PydanticFormsFormPage):
@@ -46,14 +64,29 @@ def __iter__(self) -> Iterator[BaseMetadata]:
         yield Field(json_schema_extra=self.props)
 
 
+def example_backend_validation(val: int) -> bool:
+    if val == 9:
+        raise ValueError("Value cannot be 9")
+    return True
+
+
+NumberExample = Annotated[
+    int, Ge(1), Le(10), MultipleOf(multiple_of=3), Predicate(example_backend_validation)
+]
+
+
 @app.post("/form")
 async def form(form_data: list[dict] = []):
     def form_generator(state: State):
         class TestForm(FormPage):
             model_config = ConfigDict(title="Form Title")
 
-            name: Annotated[str, Field(min_length=3)]
-            # input: Annotated[str, ExtraData(props={"prop1": "val", "prop2": "val"})]
+            number: NumberExample
+            text: Annotated[str, Field(min_length=3, max_length=12)] = "Default text"
+            textArea: LongText
+            divider: Divider
+            label: Label = "Label"
+            hidden: Hidden = "Hidden"
 
         form_data_1 = yield TestForm
 

frontend/apps/example/src/app/page.tsx

@@ -60,21 +60,25 @@ export default function Home() {
     const componentMatcher = (
         currentMatchers: PydanticComponentMatcher[],
     ): PydanticComponentMatcher[] => {
+        return currentMatchers;
         return [
+            ...currentMatchers,
             {
                 id: 'textarea',
-                Element: TextArea,
+                ElementMatch: {
+                    Element: TextArea,
+                    isControlledElement: true,
+                },
                 matcher(field) {
                     return field.type === PydanticFormFieldType.STRING;
                 },
             },
-            ...currentMatchers,
         ];
     };
 
     return (
         <div className={styles.page}>
-            <h1 style={{ marginBottom: '40px' }}>Pydantic Form</h1>
+            <h1 style={{ marginBottom: '20px' }}>Pydantic Form</h1>
 
             <PydanticForm
                 id="theForm"

frontend/apps/example/src/fields/TextArea.tsx

@@ -1,19 +1,19 @@
-import React from 'react';
-
-import type {
-    PydanticFormFieldElement,
-    PydanticFormFieldElementProps,
-} from 'pydantic-forms';
-
 /**
  * Pydantic Forms
  *
  * Text component
  */
-export const TextArea: PydanticFormFieldElement = ({
+import React from 'react';
+
+import type {
+    PydanticFormControlledElement,
+    PydanticFormControlledElementProps,
+} from 'pydantic-forms';
+
+export const TextArea: PydanticFormControlledElement = ({
     value,
     onChange,
-}: PydanticFormFieldElementProps) => {
+}: PydanticFormControlledElementProps) => {
     return (
         <textarea
             defaultValue={value}