macro checkbox args + search & replace imporved

packages/web/src/utility/forms.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import Select from 'react-select';
 import Creatable from 'react-select/creatable';
-import { TextField, SelectField } from './inputs';
+import { TextField, SelectField, CheckboxField } from './inputs';
 import { Field, useFormikContext } from 'formik';
 import FormStyledButton from '../widgets/FormStyledButton';
 import {
@@ -49,6 +49,26 @@ export function FormTextField({ label, ...other }) {
   );
 }
 
+export function FormCheckboxFieldRaw({ name = undefined, ...other }) {
+  const { values, setFieldValue } = useFormikContext();
+  const handleChange = (event) => {
+    setFieldValue(name, event.target.checked);
+  };
+  return <CheckboxField name={name} checked={!!values[name]} onChange={handleChange} {...other} />;
+  // return <Field {...other} as={CheckboxField} />;
+}
+
+export function FormCheckboxField({ label, ...other }) {
+  return (
+    <FormRow>
+      <FormLabel>{label}</FormLabel>
+      <FormValue>
+        <FormCheckboxFieldRaw {...other} />
+      </FormValue>
+    </FormRow>
+  );
+}
+
 export function FormSelectFieldRaw({ children, ...other }) {
   return (
     <Field {...other} as={SelectField}>

packages/web/src/utility/inputs.js

@@ -16,3 +16,7 @@ export function SelectField({ children = null, options = [], ...other }) {
     </select>
   );
 }
+
+export function CheckboxField({ editorRef = undefined, ...other }) {
+  return <input type="checkbox" {...other} ref={editorRef}></input>;
+}