Merge pull request #25 from workfloworchestrator/1711-Pydanticforms-basic--Multiselect-checkboxes

[1711] enable multicheckbox

Author: pboers1988

backend/main.py

@@ -21,7 +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
+from pydantic_forms.validators import (
+    LongText,
+    Label,
+    Divider,
+    Hidden,
+    Choice,
+    choice_list,
+)
 
 # Choice,
 # CustomerId,
@@ -88,6 +95,13 @@ class RadioChoices(Choice):
     _3 = ("3", "Option 3")
 
 
+class MultiCheckBoxChoices(Choice):
+    _1 = ("1", "Option 1")
+    _2 = ("2", "Option 2")
+    _3 = ("3", "Option 3")
+    _4 = ("4", "Option 4")
+
+
 @app.post("/form")
 async def form(form_data: list[dict] = []):
     def form_generator(state: State):
@@ -105,6 +119,7 @@ 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)
 
         form_data_1 = yield TestForm
 

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

@@ -10,6 +10,7 @@ import {
     HiddenField,
     IntegerField,
     LabelField,
+    MultiCheckboxField,
     RadioField,
     TextAreaField,
 } from '@/components/fields';
@@ -125,6 +126,20 @@ const defaultComponentMatchers: PydanticComponentMatcher[] = [
             return field.type === PydanticFormFieldType.BOOLEAN;
         },
     },
+    {
+        id: 'multicheckbox',
+        ElementMatch: {
+            Element: MultiCheckboxField,
+            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
+            );
+        },
+    },
 ];
 
 // If nothing  matches, it defaults to Text field in the mapToComponent function

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

@@ -0,0 +1,53 @@
+/**
+ * Pydantic Forms
+ *
+ * MultiCheckbox component for handling multiple boolean selections
+ */
+import React from 'react';
+
+import {
+    PydanticFormControlledElementProps,
+    PydanticFormFieldOption,
+} from '@/types';
+
+export const MultiCheckboxField = ({
+    value,
+    onChange,
+    pydanticFormField,
+}: PydanticFormControlledElementProps) => {
+    const { options, id } = pydanticFormField;
+
+    const handleCheckboxChange = (optionId: string, optionValue: string) => {
+        const currentValue = value as string[];
+        const newValue = currentValue.includes(optionValue)
+            ? currentValue.filter((item) => item !== optionValue)
+            : [...currentValue, optionValue];
+
+        onChange(newValue);
+    };
+
+    return (
+        <div>
+            {options.map((option: PydanticFormFieldOption) => {
+                // Extract the unique ID for this option
+                const optionId = `${id}-${option.value}`;
+
+                return (
+                    <label key={optionId}>
+                        <input
+                            type="checkbox"
+                            id={optionId}
+                            name={optionId}
+                            value={option.value}
+                            checked={(value as string[]).includes(option.value)}
+                            onChange={() =>
+                                handleCheckboxChange(optionId, option.value)
+                            }
+                        />
+                        <span>{option.label || option.value}</span>
+                    </label>
+                );
+            })}
+        </div>
+    );
+};

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

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