Merge pull request #27 from workfloworchestrator/1713-add-list-field

add list field

Author: gstewart86

.gitignore

@@ -19,4 +19,5 @@ __pycache__/
 test
 .idea
 todo.md
-venv
+venv/
+.venv/

README.md

@@ -31,6 +31,8 @@ $ npm run dev
 
 Visit [http://127.0.0.1:3000][5] to view the generated form
 
+to also regenerate the pydantic forms ui package, also perform those steps in `pydantic-forms-ui/frontend/packages/pydantic-forms/`
+
 ## Contributing
 
 When setting up this repo to contribute initialize the pre-commit hooks using [pre-commit][6] (eq. `brew install pre-commit`).

backend/main.py

@@ -102,15 +102,25 @@ class MultiCheckBoxChoices(Choice):
     _4 = ("4", "Option 4")
 
 
+class ListChoices(Choice):
+    _0 = ("0", "Option 0")
+    _1 = ("1", "Option 1")
+    _2 = ("2", "Option 2")
+    _3 = ("3", "Option 3")
+    _4 = ("4", "Option 4")
+    _5 = ("5", "Option 5")
+    _6 = ("6", "Option 6")
+
+
 @app.post("/form")
 async def form(form_data: list[dict] = []):
     def form_generator(state: State):
         class TestForm(FormPage):
             model_config = ConfigDict(title="Form Title")
 
-            number: NumberExample
+            number: NumberExample = 3
             text: Annotated[str, Field(min_length=3, max_length=12)] = "Default text"
-            textArea: LongText
+            textArea: LongText = "Default text area"
             divider: Divider
             label: Label = "Label"
             hidden: Hidden = "Hidden"
@@ -119,7 +129,9 @@ class TestForm(FormPage):
             # When there are <= 3 choices a radio group will be rendered
             radio: RadioChoices = "3"
             checkbox: bool = True
-            multicheckbox: choice_list(MultiCheckBoxChoices, min_items=3)
+            # When there are <= 5 choices in a list a set of checkboxes are rendered
+            multicheckbox: choice_list(MultiCheckBoxChoices) = ["1", "2"]
+            list: choice_list(ListChoices) = [0, 1]
 
         form_data_1 = yield TestForm
 

frontend/packages/pydantic-forms/src/components/defaultComponentMatchers.ts

@@ -10,6 +10,7 @@ import {
     HiddenField,
     IntegerField,
     LabelField,
+    ListField,
     MultiCheckboxField,
     RadioField,
     TextAreaField,
@@ -133,15 +134,25 @@ const defaultComponentMatchers: PydanticComponentMatcher[] = [
             isControlledElement: true,
         },
         matcher(field) {
-            // Use this component when we have multiple boolean options (5 or more)
             return (
                 field.type === PydanticFormFieldType.ARRAY &&
                 field.options.length <= 5
             );
         },
         validator: zodValidationPresets.array,
     },
+    {
+        id: 'list',
+        ElementMatch: {
+            Element: ListField,
+            isControlledElement: true,
+        },
+        matcher(field) {
+            return field.type === PydanticFormFieldType.ARRAY;
+        },
+        validator: zodValidationPresets.array,
+    },
 ];
 
-// If nothing  matches, it defaults to Text field in the mapToComponent function
+// If nothing matches, it defaults to Text field in the mapToComponent function
 export default defaultComponentMatchers;

frontend/packages/pydantic-forms/src/components/fields/ListField.tsx

@@ -0,0 +1,50 @@
+/**
+ * Pydantic Forms
+ *
+ * List component for multiple choice items
+ */
+import React, { useState } from 'react';
+
+import {
+    PydanticFormControlledElementProps,
+    PydanticFormFieldOption,
+} from '@/types';
+
+export const ListField = ({
+    value,
+    onChange,
+    onBlur,
+    disabled,
+    pydanticFormField,
+}: PydanticFormControlledElementProps & {
+    options?: Array<{ value: string; label: string }>;
+}) => {
+    const [listItems, setListItems] = useState(value || []);
+
+    return (
+        <div>
+            <select
+                onBlur={onBlur}
+                disabled={disabled}
+                value={listItems}
+                onChange={(e) => {
+                    const selectedValues = Array.from(
+                        e.currentTarget.selectedOptions,
+                        (option) => option.value,
+                    );
+                    setListItems(selectedValues);
+                    onChange(selectedValues);
+                }}
+                multiple
+            >
+                {pydanticFormField.options.map(
+                    (option: PydanticFormFieldOption) => (
+                        <option key={option.value} value={option.value}>
+                            {option.label}
+                        </option>
+                    ),
+                )}
+            </select>
+        </div>
+    );
+};

frontend/packages/pydantic-forms/src/components/fields/index.ts

@@ -10,3 +10,4 @@ export * from './HiddenField';
 export * from './DropdownField';
 export * from './RadioField';
 export * from './MultiCheckboxField';
+export * from './ListField';

frontend/packages/pydantic-forms/src/components/zodValidations.ts

@@ -113,22 +113,22 @@ export const zodValidationPresets: PydanticFormZodValidationPresets = {
     array: (field) => {
         const { minimum, maximum } = field?.validation ?? {};
 
-        let arraySchema = z.array(z.boolean());
+        let validationRule = z.array(z.boolean());
 
         if (minimum) {
-            arraySchema = arraySchema.min(
+            validationRule = validationRule.min(
                 minimum,
                 `Dit veld heeft een minimum waarde van ${minimum}`,
             );
         }
 
         if (maximum) {
-            arraySchema = arraySchema.max(
+            validationRule = validationRule.max(
                 maximum,
                 `Dit veld heeft een maximum waarde van ${maximum}`,
             );
         }
 
-        return arraySchema;
+        return validationRule;
     },
 };