refactor: use Formik field wrappers as components

TACC · May 20, 2024 · c03ee3a · c03ee3a
1 parent e9a50e1
commit c03ee3a
Show file tree

Hide file tree

Showing 12 changed files with 154 additions and 56 deletions.
diff --git a/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepOne.tsx b/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepOne.tsx
@@ -1,19 +1,22 @@
 import { FormikInput } from '@tacc/core-components';
 import * as Yup from 'yup';
 import { UIWizardStep, useWizardValues, InitialValueGenerator } from '..';
+import { Field } from 'formik';
 
 export const StepOne: React.FC = () => {
   const { extra } = useWizardValues();
   return (
     <div>
       <h2>Step One: Extra value two is {extra.extraTwo}</h2>
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldOne"
         required={true}
         label="Field One"
         description="The first form field"
       />
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldTwo"
         required={false}
         label="Field Two"

diff --git a/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepThree.tsx b/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepThree.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
 import { FormGroup } from 'reactstrap';
 import { Collapse, Button } from '@tacc/core-components';
-import { FieldArray, useFormikContext, FieldArrayRenderProps } from 'formik';
+import {
+  FieldArray,
+  useFormikContext,
+  FieldArrayRenderProps,
+  Field,
+} from 'formik';
 import { FormikInput, FormikCheck } from '@tacc/core-components';
 import * as Yup from 'yup';
 import fieldArrayStyles from './FieldArray.module.css';
@@ -34,13 +39,15 @@ const UIWizardComplexFieldRender: React.FC<UIWizardComplexFieldRenderProps> = ({
       note="more values inside"
       className={fieldArrayStyles.item}
     >
-      <FormikInput
+      <Field
+        component={FormikInput}
         name={`${innerKey}.name`}
         label="Name"
         required={true}
         description="Name field of this object"
       />
-      <FormikCheck
+      <Field
+        component={FormikCheck}
         name={`${innerKey}.include`}
         label="Include"
         required={false}
@@ -114,7 +121,8 @@ const OuterItemRender: React.FC<FieldArrayOfArraysRenderProps> = ({
       title={`Field Array ${outerIndex}`}
       className={fieldArrayStyles.item}
     >
-      <FormikInput
+      <Field
+        component={FormikInput}
         name={`fieldArrayOfArrays.${outerIndex}.name`}
         label="Name"
         required={true}

diff --git a/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepTwo.tsx b/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepTwo.tsx
@@ -8,7 +8,12 @@ import React from 'react';
 import { Button } from '@tacc/core-components';
 import fieldArrayStyles from './FieldArray.module.css';
 import { Collapse } from '@tacc/core-components';
-import { FieldArray, useFormikContext, FieldArrayRenderProps } from 'formik';
+import {
+  FieldArray,
+  useFormikContext,
+  FieldArrayRenderProps,
+  Field,
+} from 'formik';
 import { FormikInput, FormikCheck } from '@tacc/core-components';
 import {
   UIWizardStep,
@@ -37,13 +42,15 @@ const UIWizardComplexFieldRender: React.FC<UIWizardComplexFieldProps> = ({
       note="more values inside"
       className={fieldArrayStyles.item}
     >
-      <FormikInput
+      <Field
+        component={FormikInput}
         name={`fieldArray.${index}.name`}
         label="Name"
         required={true}
         description="Name field of this object"
       />
-      <FormikCheck
+      <Field
+        component={FormikCheck}
         name={`fieldArray.${index}.include`}
         label="Include"
         required={false}

diff --git a/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepOne.tsx b/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepOne.tsx
@@ -2,18 +2,21 @@ import { FormikInput } from '@tacc/core-components';
 import { WizardStep } from '@tacc/core-components';
 import * as Yup from 'yup';
 import { useWizardValues, UIWizardSchema } from '..';
+import { Field } from 'formik';
 
 export const StepOne: React.FC = () => {
   return (
     <div>
       <h2>Step One</h2>
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldOne"
         required={true}
         label="Name"
         description="The first form field"
       />
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldTwo"
         required={false}
         label="Description"

diff --git a/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepThree.tsx b/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepThree.tsx
@@ -2,12 +2,14 @@ import { FormikInput } from '@tacc/core-components';
 import { WizardStep } from '@tacc/core-components';
 import * as Yup from 'yup';
 import { useWizardValues, UIWizardSchema } from '..';
+import { Field } from 'formik';
 
 export const StepThree: React.FC = () => {
   return (
     <div>
       <h2>Step Three</h2>
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldFour"
         required={true}
         label="Field Four"

diff --git a/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepTwo.tsx b/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepTwo.tsx
@@ -2,12 +2,14 @@ import { FormikInput } from '@tacc/core-components';
 import { WizardStep } from '@tacc/core-components';
 import * as Yup from 'yup';
 import { useWizardValues, UIWizardSchema } from '..';
+import { Field } from 'formik';
 
 export const StepTwo: React.FC = () => {
   return (
     <div>
       <h2>Step Two</h2>
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldThree"
         required={true}
         label="Field Three"

diff --git a/libs/tup-components/src/auth/LoginComponent/LoginComponent.tsx b/libs/tup-components/src/auth/LoginComponent/LoginComponent.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useLocation, Location, useSearchParams } from 'react-router-dom';
 import { useAuth } from '@tacc/tup-hooks';
-import { Formik, Form } from 'formik';
+import { Formik, Form, Field } from 'formik';
 import { FormikInput } from '@tacc/core-components';
 import { Button } from '@tacc/core-components';
 import styles from './LoginComponent.module.css';
@@ -86,7 +86,7 @@ const LoginComponent: React.FC<LoginProps> = ({ className }) => {
   // FAQ: To use inline messaging for required fields (instead of browser):
   //      1. Uncomment this constant definition
   //      2. Pass this constant to <Formik>; validationSchema={validationSchema}
-  //      3. Remove `required` attribute from <FormikInput>'s
+  //      3. Remove `required` attribute from <Field>s
   // const validationSchema = Yup.object({
   //   username: Yup.string().required(),
   //   password: Yup.string().required(),
@@ -116,14 +116,16 @@ const LoginComponent: React.FC<LoginProps> = ({ className }) => {
       <Formik initialValues={initialValues} onSubmit={onSubmit}>
         <Form className="c-form">
           <LoginError status={status} isError={isError} />
-          <FormikInput
+          <Field
+            component={FormikInput}
             name="username"
             label="Username"
             type="text"
             autoComplete="username"
             required
           />
-          <FormikInput
+          <Field
+            component={FormikInput}
             name="password"
             label="Password"
             type="password"

diff --git a/libs/tup-components/src/projects/details/ProjectEdit/ProjectEditForm.tsx b/libs/tup-components/src/projects/details/ProjectEdit/ProjectEditForm.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Formik, Form, FormikHelpers } from 'formik';
+import { Formik, Form, FormikHelpers, Field } from 'formik';
 //import ReCAPTCHA from 'react-google-recaptcha';
 import {
   useProjects,
@@ -71,28 +71,36 @@ export const ProjectAbstractEditForm: React.FC<{
     >
       {({ isValid }) => (
         <Form>
-          <FormikInput
+          <Field
+            component={FormikInput}
             style={{ maxWidth: '100%' }}
             name="title"
             label="Title"
             required
           />
-          <FormikTextarea
+          <Field
+            component={FormikTextarea}
             rows={5}
             style={{ maxWidth: '100%', resize: 'none' }}
             name="description"
             label="Description"
             required
           />
-          <FormikSelect label="Field of Science" name="fieldId" required>
+          <Field
+            component={FormikSelect}
+            label="Field of Science"
+            name="fieldId"
+            required
+          >
             {scienceFields.map((field) => (
               <option key={field.id} value={field.id}>
                 {[...new Array(field.depth)].map((_) => '--- ')}
                 {field.id === 1 ? 'Select Field of Science' : field.name}
               </option>
             ))}
-          </FormikSelect>
-          <FormikSelect
+          </Field>
+          <Field
+            component={FormikSelect}
             label="Secondary Field of Science"
             name="secondaryFieldId"
           >
@@ -104,8 +112,9 @@ export const ProjectAbstractEditForm: React.FC<{
                   : field.name}
               </option>
             ))}
-          </FormikSelect>
-          <FormikInput
+          </Field>
+          <Field
+            component={FormikInput}
             name="chargeCode"
             label="Charge Code"
             description="Project Charge Code cannot be changed."

diff --git a/libs/tup-components/src/projects/details/grants/ProjectGrantFormFields.tsx b/libs/tup-components/src/projects/details/grants/ProjectGrantFormFields.tsx
@@ -5,40 +5,66 @@ import { FormikInput, FormikSelect } from '@tacc/core-components';
 import { LoadingSpinner } from '@tacc/core-components';
 
 import styles from './ProjectGrantForm.module.css';
+import { Field } from 'formik';
 
 const ProjectGrantFormFields: React.FC = () => {
   const scienceFields = useProjectScienceField().data ?? [];
   if (!scienceFields.length) return <LoadingSpinner />;
   return (
     <>
       <div className={styles['title-row']}>
-        <FormikInput name="title" label="Title" required />
-        <FormikInput name="grantNumber" label="Grant Number" />
+        <Field component={FormikInput} name="title" label="Title" required />
+        <Field
+          component={FormikInput}
+          name="grantNumber"
+          label="Grant Number"
+        />
       </div>
-      <FormikInput name="piName" label="PI Name" required />
+      <Field component={FormikInput} name="piName" label="PI Name" required />
 
-      <FormikSelect label="Field of Science" name="fieldId" required>
+      <Field
+        component={FormikSelect}
+        label="Field of Science"
+        name="fieldId"
+        required
+      >
         {scienceFields.map((field) => (
           <option key={field.id} value={field.id}>
             {[...new Array(field.depth)].map((_) => '--- ')}
             {field.id === 1 ? 'Select Field of Science' : field.name}
           </option>
         ))}
-      </FormikSelect>
-      <FormikInput name="fundingAgency" label="Funding Agency" />
+      </Field>
+      <Field
+        component={FormikInput}
+        name="fundingAgency"
+        label="Funding Agency"
+      />
 
-      <FormikInput name="awardNumber" label="Award Number" />
-      <FormikInput
+      <Field component={FormikInput} name="awardNumber" label="Award Number" />
+      <Field
+        component={FormikInput}
         name="awardAmount"
         label="Award Amount"
         description="Please provide a number value; do not use commas.
                             This information will not be displayed publicly"
       />
       <div className={styles['date-row']}>
-        <FormikInput name="start" label="Start Date" type="date" />
-        <FormikInput name="end" label="End Date" type="date" />
+        <Field
+          component={FormikInput}
+          name="start"
+          label="Start Date"
+          type="date"
+        />
+        <Field
+          component={FormikInput}
+          name="end"
+          label="End Date"
+          type="date"
+        />
       </div>
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="nsfStatusCode"
         label="NSF Status Code"
         description="Typical status codes are: Pending, Recommended,

diff --git a/libs/tup-components/src/projects/details/publications/ProjectPublicationFormFIelds.tsx b/libs/tup-components/src/projects/details/publications/ProjectPublicationFormFIelds.tsx
@@ -7,19 +7,31 @@ import styles from './ProjectPublicationForm.module.css';
 const ProjectPublicationFormFields: React.FC = () => {
   return (
     <>
-      <FormikInput name="title" label="Publication Title" required />
-      <FormikInput
+      <Field
+        component={FormikInput}
+        name="title"
+        label="Publication Title"
+        required
+      />
+      <Field
+        component={FormikInput}
         name="authors"
         label="Authors"
         required
         description="Separate multiple authors with a comma"
       />
       <div className={styles['form-row']}>
-        <FormikInput name="yearPublished" label="Year Published" required />
-        <FormikInput name="publisher" label="Publisher" />
-        <FormikInput name="venue" label="Venue" />
+        <Field
+          component={FormikInput}
+          name="yearPublished"
+          label="Year Published"
+          required
+        />
+        <Field component={FormikInput} name="publisher" label="Publisher" />
+        <Field component={FormikInput} name="venue" label="Venue" />
       </div>
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="url"
         label="URL"
         description="Provide a URL for the publication"