checkbox field

dashboard/src/components/form-refactor/PorterForm.tsx

@@ -5,6 +5,7 @@ import Heading from "../values-form/Heading";
 import Helper from "../values-form/Helper";
 import StringInput from "./field-components/StringInput";
 import { PorterFormContext } from "./PorterFormContextProvider";
+import Checkbox from "./field-components/Checkbox";
 
 interface Props {}
 
@@ -23,6 +24,8 @@ const PorterForm: React.FC<Props> = () => {
         return <Helper>{field.label}</Helper>;
       case "string-input":
         return <StringInput id={id} {...field} />;
+      case "checkbox":
+        return <Checkbox id={id} {...field} />;
     }
     return <p>Not Implemented: {(field as any).type}</p>;
   };

dashboard/src/components/form-refactor/field-components/Checkbox.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { CheckboxField, CheckboxFieldState } from "../types";
+import CheckboxRow from "../../values-form/CheckboxRow";
+import useFormField from "../hooks/useFormField";
+
+interface Props extends CheckboxField {
+  id: string;
+}
+
+const Checkbox: React.FC<Props> = ({ id, label, required, variable }) => {
+  const { state, variables, mutateVars } = useFormField<CheckboxFieldState>(
+    id,
+    {
+      initValue: {},
+      initValidation: {
+        validated: !required,
+      },
+    }
+  );
+
+  if (state == undefined) {
+    return <></>;
+  }
+
+  return (
+    <CheckboxRow
+      isRequired={required}
+      checked={variables[variable]}
+      toggle={() => {
+        mutateVars((vars) => {
+          return {
+            ...vars,
+            [variable]: !vars[variable],
+          };
+        });
+      }}
+      label={label}
+    />
+  );
+};
+
+export default Checkbox;

dashboard/src/components/form-refactor/field-components/StringInput.tsx

@@ -18,9 +18,7 @@ const StringInput: React.FC<Props> = ({
   const { state, variables, mutateVars } = useFormField<StringInputFieldState>(
     id,
     {
-      initValue: {
-        value: "",
-      },
+      initValue: {},
       initValidation: {
         validated: !required,
       },

dashboard/src/components/form-refactor/types.ts

@@ -24,7 +24,14 @@ export interface StringInputField {
   info?: string;
 }
 
-export type FormField = HeadingField|SubtitleField|StringInputField;
+export interface CheckboxField {
+  type: "checkbox";
+  label?: string;
+  variable: string;
+  required?: boolean;
+}
+
+export type FormField = HeadingField|SubtitleField|StringInputField|CheckboxField;
 
 export interface Section {
   name: string;
@@ -46,8 +53,9 @@ export interface PorterFormData {
 // internal field state interfaces
 
 export interface StringInputFieldState {}
+export interface CheckboxFieldState {}
 
-export type PorterFormFieldFieldState = StringInputFieldState;
+export type PorterFormFieldFieldState = StringInputFieldState|CheckboxFieldState;
 
 // reducer interfaces
 

dashboard/src/components/values-form/FormDebugger.tsx

@@ -284,6 +284,10 @@ tabs:
       required: true
       label: Required Field B
       variable: field_b
+    - type: checkbox
+      required: true
+      label: Checkbox C
+      variable: checkbox_c
     - type: subtitle
       label: "Note: Hidden required fields aren't supported yet (global only)"
   - name: controlled-by-external