fixed some of the form widgets w/ burnettk cullerton

spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx

@@ -90,7 +90,7 @@ export default function BaseInputTemplate<
   let errorMessageForField = null;
   if (rawErrors && rawErrors.length > 0) {
     invalid = true;
-    errorMessageForField = `${labelToUse} ${rawErrors[0]}`;
+    errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`;
   }
 
   return (

spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx

@@ -17,6 +17,7 @@ function SelectWidget({
   onBlur,
   onFocus,
   uiSchema,
+  placeholder,
   rawErrors = [],
 }: WidgetProps) {
   const { enumOptions, enumDisabled } = options;
@@ -44,12 +45,20 @@ function SelectWidget({
     labelToUse = `${labelToUse}*`;
   }
 
+  let invalid = false;
+  let errorMessageForField = null;
+  if (rawErrors && rawErrors.length > 0) {
+    invalid = true;
+    errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`;
+  }
+
   return (
     <Select
       id={id}
       name={id}
       labelText={labelToUse}
       select
+      helperText={placeholder}
       value={typeof value === 'undefined' ? emptyValue : value}
       disabled={disabled || readonly}
       autoFocus={autofocus}
@@ -57,6 +66,8 @@ function SelectWidget({
       onChange={_onChange}
       onBlur={_onBlur}
       onFocus={_onFocus}
+      invalid={invalid}
+      invalidText={errorMessageForField}
       InputLabelProps={{
         shrink: true,
       }}

spiffworkflow-frontend/src/themes/carbon/TextareaWidget/TextareaWidget.tsx

@@ -1,20 +1,98 @@
-import React from 'react';
-import { getTemplate, WidgetProps } from '@rjsf/utils';
+import React, { FocusEvent, useCallback } from 'react';
+// @ts-ignore
+import { TextArea } from '@carbon/react';
+import {
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
 
-function TextareaWidget(props: WidgetProps) {
-  const { options, registry } = props;
-  const BaseInputTemplate = getTemplate<'BaseInputTemplate'>(
-    'BaseInputTemplate',
-    registry,
-    options
+/** The `TextareaWidget` is a widget for rendering input fields as textarea.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function TextareaWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({
+  id,
+  options = {},
+  value,
+  required,
+  disabled,
+  readonly,
+  autofocus = false,
+  onChange,
+  onBlur,
+  onFocus,
+  label,
+  schema,
+  uiSchema,
+  placeholder,
+  rawErrors = [],
+}: WidgetProps<T, S, F>) {
+  const handleChange = useCallback(
+    ({ target: { value } }: React.ChangeEvent<HTMLTextAreaElement>) =>
+      onChange(value === '' ? options.emptyValue : value),
+    [onChange, options.emptyValue]
   );
 
-  let rows: string | number = 5;
-  if (typeof options.rows === 'string' || typeof options.rows === 'number') {
-    rows = options.rows;
+  const handleBlur = useCallback(
+    ({ target: { value } }: FocusEvent<HTMLTextAreaElement>) =>
+      onBlur(id, value),
+    [onBlur, id]
+  );
+
+  const handleFocus = useCallback(
+    ({ target: { value } }: FocusEvent<HTMLTextAreaElement>) =>
+      onFocus(id, value),
+    [id, onFocus]
+  );
+
+  let labelToUse = label;
+  if (uiSchema && uiSchema['ui:title']) {
+    labelToUse = uiSchema['ui:title'];
+  } else if (schema && schema.title) {
+    labelToUse = schema.title;
+  }
+  if (required) {
+    labelToUse = `${labelToUse}*`;
   }
 
-  return <BaseInputTemplate {...props} multiline rows={rows} />;
+  let invalid = false;
+  let errorMessageForField = null;
+  if (rawErrors && rawErrors.length > 0) {
+    invalid = true;
+    errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`;
+  }
+
+  return (
+    <TextArea
+      id={id}
+      name={id}
+      className="form-control"
+      value={value || ''}
+      labelText={labelToUse}
+      placeholder={placeholder}
+      required={required}
+      disabled={disabled}
+      readOnly={readonly}
+      autoFocus={autofocus}
+      rows={options.rows}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      onChange={handleChange}
+      invalid={invalid}
+      invalidText={errorMessageForField}
+    />
+  );
 }
 
+TextareaWidget.defaultProps = {
+  autofocus: false,
+  options: {},
+};
+
 export default TextareaWidget;