Merge pull request #62 from workfloworchestrator/1830-listfield

1830 listfield

Author: DutchBen

backend/main.py

@@ -28,6 +28,7 @@
     Hidden,
     Choice,
     choice_list,
+    unique_conlist
 )
 
 # Choice,
@@ -81,7 +82,6 @@ def example_backend_validation(val: int) -> bool:
     int, Ge(1), Le(10), MultipleOf(multiple_of=3), Predicate(example_backend_validation)
 ]
 
-
 class DropdownChoices(Choice):
     _1 = ("1", "Option 1")
     _2 = ("2", "Option 2")
@@ -122,14 +122,32 @@ class Person(BaseModel):
     age: Annotated[int, Ge(18), Le(99)]
     education: Education
 
+def example_list_validation(val: int) -> bool:
+    return True
+
+TestList = Annotated[
+    unique_conlist(str, min_items=2, max_items=5), Predicate(example_backend_validation)
+]
+
+TestExampleNumberList = Annotated[
+    unique_conlist(NumberExample, min_items=2, max_items=5), Predicate(example_list_validation)
+]
+
+TestPersonList = Annotated[
+    unique_conlist(Person, min_items=2, max_items=5), Predicate(example_list_validation)
+]
 
 @app.post("/form")
 async def form(form_data: list[dict] = []):
     def form_generator(state: State):
         class TestForm0(FormPage):
             model_config = ConfigDict(title="Form Title Page 0")
 
-            number0: Annotated[int, Ge(18), Le(99)] = 17
+            numberList: TestExampleNumberList
+            # personList: TestPersonList = []
+            # ingleNumber: NumberExample
+
+            # number0: Annotated[int, Ge(18), Le(99)] = 17
 
         form_data_0 = yield TestForm0
 

frontend/.changeset/crazy-adults-lick.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': minor
+---
+
+Adds array field

frontend/package-lock.json

@@ -1,6 +1,7 @@
 {
     "name": "pydantic-forms",
     "version": "0.0.20",
+    "type": "module",
     "description": "Library that turns JSONSchema into frontend forms",
     "author": {
         "name": "Workflow Orchestrator Programme",

frontend/packages/pydantic-forms/package.json

@@ -28,15 +28,16 @@ export const getMatcher = (
 };
 
 export const getClientSideValidationRule = (
-    field: PydanticFormField,
+    field: PydanticFormField | undefined,
     rhf?: ReturnType<typeof useForm>,
     customComponentMatcher?: PydanticFormsContextConfig['componentMatcher'],
 ) => {
+    if (!field) return z.unknown();
     const matcher = getMatcher(customComponentMatcher);
 
     const componentMatch = matcher(field);
 
-    let validationRule = componentMatch?.validator?.(field, rhf) ?? z.string();
+    let validationRule = componentMatch?.validator?.(field, rhf) ?? z.unknown();
 
     if (!field.required) {
         validationRule = validationRule.optional();
@@ -49,30 +50,40 @@ export const getClientSideValidationRule = (
     return validationRule;
 };
 
-export const componentMatcher = (
+export const componentsMatcher = (
     properties: Properties,
     customComponentMatcher: PydanticFormsContextConfig['componentMatcher'],
 ): PydanticFormComponents => {
-    const matcher = getMatcher(customComponentMatcher);
-
     const components: PydanticFormComponents = Object.entries(properties).map(
         ([, pydanticFormField]) => {
-            const matchedComponent = matcher(pydanticFormField);
-
-            const ElementMatch: ElementMatch = matchedComponent
-                ? matchedComponent.ElementMatch
-                : {
-                      Element: TextField,
-                      isControlledElement: true,
-                  };
-
-            // Defaults to textField when there are no matches
-            return {
-                Element: ElementMatch,
-                pydanticFormField: pydanticFormField,
-            };
+            return fieldToComponentMatcher(
+                pydanticFormField,
+                customComponentMatcher,
+            );
         },
     );
 
     return components;
 };
+
+const defaultComponent: ElementMatch = {
+    Element: TextField,
+    isControlledElement: true,
+};
+
+export const fieldToComponentMatcher = (
+    pydanticFormField: PydanticFormField,
+    customComponentMatcher: PydanticFormsContextConfig['componentMatcher'],
+) => {
+    const matcher = getMatcher(customComponentMatcher);
+    const matchedComponent = matcher(pydanticFormField);
+
+    const ElementMatch: ElementMatch = matchedComponent
+        ? matchedComponent.ElementMatch
+        : defaultComponent; // Defaults to textField when there are no matches
+
+    return {
+        Element: ElementMatch,
+        pydanticFormField: pydanticFormField,
+    };
+};

frontend/packages/pydantic-forms/src/components/componentMatcher.tsx

@@ -4,24 +4,26 @@
  * We will search for the first field that returns a positive match
  */
 import {
+    ArrayField,
     CheckboxField,
     DividerField,
     DropdownField,
     HiddenField,
     IntegerField,
     LabelField,
-    ListField,
     MultiCheckboxField,
+    MultiSelectField,
+    ObjectField,
     RadioField,
     TextAreaField,
+    TextField,
 } from '@/components/fields';
 import {
     PydanticComponentMatcher,
     PydanticFormFieldFormat,
     PydanticFormFieldType,
 } from '@/types';
 
-import { ObjectField } from './fields/ObjectField';
 import { zodValidationPresets } from './zodValidationsPresets';
 
 const defaultComponentMatchers: PydanticComponentMatcher[] = [
@@ -137,21 +139,25 @@ const defaultComponentMatchers: PydanticComponentMatcher[] = [
         matcher(field) {
             return (
                 field.type === PydanticFormFieldType.ARRAY &&
+                field.options.length > 0 &&
                 field.options.length <= 5
             );
         },
-        validator: zodValidationPresets.array,
+        validator: zodValidationPresets.multiSelect,
     },
     {
         id: 'list',
         ElementMatch: {
-            Element: ListField,
+            Element: MultiSelectField,
             isControlledElement: true,
         },
         matcher(field) {
-            return field.type === PydanticFormFieldType.ARRAY;
+            return (
+                field.options.length > 0 &&
+                field.type === PydanticFormFieldType.ARRAY
+            );
         },
-        validator: zodValidationPresets.array,
+        validator: zodValidationPresets.multiSelect,
     },
     {
         id: 'object',
@@ -163,6 +169,27 @@ const defaultComponentMatchers: PydanticComponentMatcher[] = [
             return field.type === PydanticFormFieldType.OBJECT;
         },
     },
+    {
+        id: 'array',
+        ElementMatch: {
+            Element: ArrayField,
+            isControlledElement: true,
+        },
+        matcher(field) {
+            return field.type === PydanticFormFieldType.ARRAY;
+        },
+    },
+    {
+        id: 'text',
+        ElementMatch: {
+            Element: TextField,
+            isControlledElement: true,
+        },
+        matcher(field) {
+            return field.type === PydanticFormFieldType.STRING;
+        },
+        validator: zodValidationPresets.string,
+    },
 ];
 
 // If nothing matches, it defaults to Text field in the mapToComponent function

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import { useFieldArray } from 'react-hook-form';
+
+import { usePydanticFormContext } from '@/core';
+import { fieldToComponentMatcher } from '@/core';
+import { PydanticFormElementProps } from '@/types';
+import { itemizeArrayItem } from '@/utils';
+
+import { RenderFields } from '../render';
+
+export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
+    const { rhf, config } = usePydanticFormContext();
+    const { control } = rhf;
+    const { id: arrayName, arrayItem } = pydanticFormField;
+    const { minItems, maxItems } = pydanticFormField.validations;
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: arrayName,
+    });
+    if (!arrayItem) return '';
+
+    const component = fieldToComponentMatcher(
+        arrayItem,
+        config?.componentMatcher,
+    );
+
+    const renderField = (field: Record<'id', string>, index: number) => {
+        const arrayField = itemizeArrayItem(index, arrayItem);
+
+        return (
+            <div
+                key={field.id}
+                style={{
+                    display: 'flex',
+                    gap: '10px',
+                    alignItems: 'center',
+                    margin: '4px 0',
+                }}
+            >
+                <RenderFields
+                    components={[
+                        {
+                            Element: component.Element,
+                            pydanticFormField: arrayField,
+                        },
+                    ]}
+                    extraTriggerFields={[arrayName]}
+                />
+                {!minItems ||
+                    (minItems && fields.length > minItems && (
+                        <span
+                            style={{ fontSize: '24px' }}
+                            onClick={() => remove(index)}
+                        >
+                            -
+                        </span>
+                    ))}
+            </div>
+        );
+    };
+
+    return (
+        <div
+            style={{
+                border: 'thin solid green',
+                padding: '1rem',
+                marginTop: '16px',
+                display: 'flex',
+                flexDirection: 'column',
+                flexGrow: 1,
+            }}
+        >
+            {fields.map(renderField)}
+
+            {(!maxItems || (maxItems && fields.length < maxItems)) && (
+                <div
+                    onClick={() => {
+                        append({
+                            [arrayName]: undefined,
+                        });
+                    }}
+                    style={{
+                        cursor: 'pointer',
+                        fontSize: '32px',
+                        display: 'flex',
+                        justifyContent: 'end',
+                        marginTop: '8px',
+                        marginBottom: '8px',
+                        padding: '16px',
+                    }}
+                >
+                    +
+                </div>
+            )}
+        </div>
+    );
+};

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

@@ -19,10 +19,21 @@ export const FormRow = ({
 }: FormRowProps) => {
     return (
         <div>
-            <label>
-                {title} {required && <span style={{ color: 'red' }}>*</span>}
-            </label>
-            {description && <div>{description}</div>}
+            {title && (
+                <label
+                    style={{
+                        margin: '8px 0',
+                        display: 'block',
+                        fontWeight: '600',
+                    }}
+                >
+                    {title}{' '}
+                    {required && <span style={{ color: 'red' }}>*</span>}
+                </label>
+            )}
+            {description && (
+                <div style={{ margin: '4px 0' }}>{description}</div>
+            )}
             {children}
             {error}
         </div>

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

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { isObject } from 'lodash';
+
 import type { PydanticFormControlledElementProps } from '@/types';
 
 export const IntegerField = ({
@@ -16,8 +18,12 @@ export const IntegerField = ({
                 onChange(value);
             }}
             disabled={disabled}
-            value={value}
+            value={!isObject(value) ? value : ''} // Value can be an object when it is created from an ArrayField
             type="number"
+            style={{
+                padding: '8px',
+                margin: '8px 0',
+            }}
         />
     );
 };