add list field component, matcher, export, and main.py example entry

fix a couple mismatched var names
add an element to the dev section of the readme

Author: gstewart86

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,6 +102,16 @@ 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):
@@ -119,7 +129,8 @@ 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)
+            multicheckbox: choice_list(MultiCheckBoxChoices)
+            list: choice_list(ListChoices) = "0"
 
         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.label}>
+              {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;
     },
 };