add Checkbox field

Author: gstewart86

.gitignore

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

backend/main.py

@@ -21,7 +21,7 @@
 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
+from pydantic_forms.validators import LongText, Label, Divider
 
 # Choice,
 # CustomerId,
@@ -86,7 +86,7 @@ class TestForm(FormPage):
             textArea: LongText
             divider: Divider
             label: Label = "Label"
-            hidden: Hidden = "Hidden"
+            checkbox: bool = True
 
         form_data_1 = yield TestForm
 

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

@@ -9,6 +9,7 @@ import {
     IntegerField,
     LabelField,
     TextAreaField,
+    CheckboxField
 } from '@/components/fields';
 import {
     PydanticComponentMatcher,
@@ -83,6 +84,19 @@ const defaultComponentMatchers: PydanticComponentMatcher[] = [
             );
         },
     },
+    {
+        id: 'checkbox',
+        ElementMatch: {
+            Element: CheckboxField,
+            isControlledElement: true,
+        },
+        matcher(field) {
+            return (
+                field.type === PydanticFormFieldType.BOOLEAN
+            );
+        }
+    },
 ];
+
 // If nothing  matches, it defaults to Text field in the mapToComponent function
 export default defaultComponentMatchers;

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

@@ -0,0 +1,20 @@
+import { PydanticFormControlledElementProps } from '@/types';
+
+export const CheckboxField = ({ 
+  onChange, 
+  onBlur, 
+  value, 
+  name,
+  pydanticFormField
+}: PydanticFormControlledElementProps) => {
+  console.log(pydanticFormField);
+  return (
+    <input
+      type="checkbox"
+      checked={value}
+      onChange={() => onChange(!value)}
+      onBlur={onBlur}
+      name={name}
+    />
+  );
+};

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

@@ -3,6 +3,7 @@ export * from './FormRow';
 export * from './TextField';
 export * from './IntegerField';
 export * from './TextAreaField';
+export * from './CheckboxField';
 export * from './LabelField';
 export * from './DividerField';
 export * from './HiddenField';

frontend/packages/pydantic-forms/src/core/mapFieldToComponent.ts

@@ -84,9 +84,11 @@ export const getComponentMatcher = (
             return matcher(field);
         });
 
+        console.log('Matched component __' + matchedComponent?.matcher)
         if (matchedComponent) return matchedComponent;
 
         // Defaults to textField when there are no matches
+        console.log('No match found for field ' + field.id);
         return {
             id: 'textfield',
             ElementMatch: {