From e2a2e42712b6a4d831d028557366982bdb920125 Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Wed, 16 Nov 2022 14:46:04 -0500
Subject: [PATCH] updated a couple form components to work with carbon w/
 burnettk cullerton

---
 .../src/components/ProcessGroupForm.tsx       |  6 +---
 .../BaseInputTemplate/BaseInputTemplate.tsx   | 36 +++++++++++--------
 .../carbon/SubmitButton/SubmitButton.tsx      | 31 ++++++++--------
 .../src/themes/carbon/index.css               |  3 ++
 .../src/themes/carbon/index.ts                |  1 +
 5 files changed, 42 insertions(+), 35 deletions(-)
 create mode 100644 spiffworkflow-frontend/src/themes/carbon/index.css

diff --git a/spiffworkflow-frontend/src/components/ProcessGroupForm.tsx b/spiffworkflow-frontend/src/components/ProcessGroupForm.tsx
index 3d51adeb..e427f43b 100644
--- a/spiffworkflow-frontend/src/components/ProcessGroupForm.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessGroupForm.tsx
@@ -165,11 +165,7 @@ export default function ProcessGroupForm({
   };
 
   const formButtons = () => {
-    const buttons = [
-      <Button kind="secondary" type="submit">
-        Submit
-      </Button>,
-    ];
+    const buttons = [<Button type="submit">Submit</Button>];
     if (mode === 'edit') {
       buttons.push(
         <ButtonWithConfirmation
diff --git a/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
index 1a9ad5a1..83aebaca 100644
--- a/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
+// @ts-ignore
+import { TextInput } from '@carbon/react';
 import { getInputProps, WidgetProps } from '@rjsf/utils';
 
 function BaseInputTemplate({
@@ -19,10 +20,9 @@ function BaseInputTemplate({
   schema,
   uiSchema,
   rawErrors = [],
-  formContext,
   registry,
-  ...textFieldProps
-}: WidgetProps) {
+}: // ...textFieldProps
+WidgetProps) {
   const inputProps = getInputProps(schema, type, options);
   // Now we need to pull out the step, min, max into an inner `inputProps` for material-ui
   const { step, min, max, ...rest } = inputProps;
@@ -35,13 +35,18 @@ function BaseInputTemplate({
     },
     ...rest,
   };
-  const _onChange = ({
+  const localOnChange = ({
+    // eslint-disable-next-line no-shadow
     target: { value },
-  }: React.ChangeEvent<HTMLInputElement>) =>
+  }: React.ChangeEvent<HTMLInputElement>) => {
     onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
-    onBlur(id, value);
-  const _onFocus = ({
+  };
+  const localOnBlur = ({
+    // eslint-disable-next-line no-shadow
+    target: { value },
+  }: React.FocusEvent<HTMLInputElement>) => onBlur(id, value);
+  const localOnFocus = ({
+    // eslint-disable-next-line no-shadow
     target: { value },
   }: React.FocusEvent<HTMLInputElement>) => onFocus(id, value);
 
@@ -50,7 +55,7 @@ function BaseInputTemplate({
 
   return (
     <>
-      <TextField
+      <TextInput
         id={id}
         name={id}
         placeholder={placeholder}
@@ -58,19 +63,20 @@ function BaseInputTemplate({
         autoFocus={autofocus}
         required={required}
         disabled={disabled || readonly}
-        {...otherProps}
         value={value || value === 0 ? value : ''}
         error={rawErrors.length > 0}
-        onChange={_onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
-        {...(textFieldProps as TextFieldProps)}
+        onChange={localOnChange}
+        onBlur={localOnBlur}
+        onFocus={localOnFocus}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...otherProps}
       />
       {schema.examples && (
         <datalist id={`examples_${id}`}>
           {(schema.examples as string[])
             .concat(schema.default ? ([schema.default] as string[]) : [])
             .map((example: any) => {
+              // eslint-disable-next-line jsx-a11y/control-has-associated-label
               return <option key={example} value={example} />;
             })}
         </datalist>
diff --git a/spiffworkflow-frontend/src/themes/carbon/SubmitButton/SubmitButton.tsx b/spiffworkflow-frontend/src/themes/carbon/SubmitButton/SubmitButton.tsx
index b61d30c8..07a6298d 100644
--- a/spiffworkflow-frontend/src/themes/carbon/SubmitButton/SubmitButton.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/SubmitButton/SubmitButton.tsx
@@ -1,29 +1,30 @@
 import React from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
+// import Box from '@mui/material/Box';
+// @ts-ignore
+import { Button } from '@carbon/react';
 import { SubmitButtonProps, getSubmitButtonOptions } from '@rjsf/utils';
 
-const SubmitButton: React.ComponentType<SubmitButtonProps> = (props) => {
+// const SubmitButton: React.ComponentType<SubmitButtonProps> = (props) => {
+function SubmitButton(props: SubmitButtonProps) {
+  const { uiSchema } = props;
   const {
     submitText,
     norender,
     props: submitButtonProps,
-  } = getSubmitButtonOptions(props.uiSchema);
+  } = getSubmitButtonOptions(uiSchema);
   if (norender) {
     return null;
   }
   return (
-    <Box marginTop={3}>
-      <Button
-        type="submit"
-        variant="contained"
-        color="primary"
-        {...submitButtonProps}
-      >
-        {submitText}
-      </Button>
-    </Box>
+    <Button
+      className="react-json-schema-form-submit-button"
+      type="submit"
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...submitButtonProps}
+    >
+      {submitText}
+    </Button>
   );
-};
+}
 
 export default SubmitButton;
diff --git a/spiffworkflow-frontend/src/themes/carbon/index.css b/spiffworkflow-frontend/src/themes/carbon/index.css
new file mode 100644
index 00000000..d44ae7e5
--- /dev/null
+++ b/spiffworkflow-frontend/src/themes/carbon/index.css
@@ -0,0 +1,3 @@
+button.react-json-schema-form-submit-button {
+  margin-top: 1.5em;
+}
diff --git a/spiffworkflow-frontend/src/themes/carbon/index.ts b/spiffworkflow-frontend/src/themes/carbon/index.ts
index 7da74d8f..cc3d2254 100644
--- a/spiffworkflow-frontend/src/themes/carbon/index.ts
+++ b/spiffworkflow-frontend/src/themes/carbon/index.ts
@@ -1,4 +1,5 @@
 import MuiForm from './MuiForm/MuiForm';
+import './index.css';
 
 export { default as Form } from './MuiForm';
 export { default as Templates } from './Templates';