Migrating from formik and yup

[W1ckh3ad]

Hello there,

I will share my thoughts and results from my migration formik & yup to @ts-react/form

Intro

Some information about me and my workplace:

I am building a web platform handling different tasks (on this project since august 2021).
These applications are heavy on tables, interactivity, and forms.

At first I've passed every prop to every field from the render function in formik, this got tricky after using more web components with different custom events.

Forms got an upgrade after I've implemented the useField hook from formik, this resulted in four fewer props for each field in every form. useField takes the name prop and provides these four props. The drawback: it's not typesafe, it's easy to misspell one name and it doesn't throw an error. (Yes I could wrap useField and throw if value is null or undefined, but we often init with many undefined values) Additionally it's still repetitive with the schema and the usage of these components.

Concerning tables it was much more boilerplate, but after discovering @tanstack/table I was hyped, this library blew my mind. It immensely reduced the code creating tables, but I was still missing a better solution for forms

For one of these projects (migration from an asp.net core web app with jquery ) I needed a form with over 30 fields, and editing this form in asp.net core was annoying, it has 3 similar implementations but they were in different files. I started thinking, how about binding components to properties in an object and giving it a prop to render maybe different components or change props

naive implementation

The fields got all an alias, buts its matching in this snippet.

import CustomField7Select from '@src/components/utils/selects/customField7';
import CustomField11sSelect from '@src/components/utils/selects/customField11s';
import CustomField12Select from '@src/components/utils/selects/customField12';
import { DataModel } from '@src/models';
import { modelConfig } from '@src/utils';
import { header } from '@src/utils/columns';
import { useHttpQueryFactoryWithExtractor } from 'packages-core/hooks';
import { ReadonlyDate, Select, TextArea, TextField } from 'packages-core/lib/formik';
import { createElement, CSSProperties, ReactNode, useMemo } from 'packages-core/lib/react';
import { KeyArrayOf, KeyOf } from 'packages-core/lib/typescript';
import { Form, Formik, OnSubmit } from 'packages-core/lib/formik';
import FormBody from './formBody';

// this styles will apply thse grid styles 
// max-width: 1200px;
// margin: 0 auto;
// display: grid;
// grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
// grid-template-rows: 1fr 1fr auto 1fr 1fr auto 1fr 1fr auto 1fr 1fr;
// gap: 12px 12px;
// grid-template-areas:
// each element in this form will get a class matching the field name (key)
// this these styles will add a matching grid-area name to it
// to enable the positioning in the following code
import styles from './index.module.css';


type DataModelBodyTypes = 'edit' | 'add' | 'transfer';

const useColumnSelectData = (columns: KeyArrayOf<DataModel>, enabled: boolean) =>
  useHttpQueryFactoryWithExtractor<string[]>(
    [modelConfig.tableName, 'valid', columns],
    modelConfig.path,
    (data) => data.data,
    { enabled }
  );

const useMap = (type: DataModelBodyTypes) => {
  const map: Record<
    KeyOf<DataModel>,
    {
      comp:
        | typeof TextArea
        | typeof TextField
        | typeof Select
        | (() => ReactNode)
        | typeof ReadonlyDate;
      type?: 'number';
      time?: boolean;
      dateTime?: boolean;
      readonly?: boolean;
    }
  > = useMemo(
    () => ({
      typ: { comp: TextField, readonly: true },
      customField1: { comp: TextField, readonly: type !== 'add' },
      customField2: { comp: TextField, readonly: type !== 'add' },
      customField3: { comp: TextArea },
      customField4: { comp: TextField, readonly: true },
      customField5: { comp: TextField, type: 'number', readonly: type !== 'add' },
      customField6: { comp: TextField, type: 'number', readonly: type !== 'add' },
      id:
        type === 'add'
          ? { comp: Select }
          : { comp: TextField, type: 'number', readonly: type === 'edit' },
      ident: { comp: TextField, readonly: true },
      kdnr: { comp: TextField, type: 'number', readonly: type !== 'add' },
      customField7: { comp: CustomField7Select },
      customField8: type === 'edit' ? { comp: TextField, readonly: true } : { comp: Select },
      customField9: { comp: TextField, readonly: type !== 'add' },
      customField10: { comp: TextField },
      customField11: { comp: CustomField11sSelect },
      customField12: type === 'transfer' ? { comp: TextField, readonly: true } : { comp: CustomField12Select },
      customField13: { comp: TextField, readonly: true },
      customField14: { comp: TextField, readonly: true },
      customField15: { comp: TextField, readonly: true },
      name: { comp: TextArea, readonly: type === 'transfer' },
      customField16: { comp: TextField, type: 'number', readonly: type === 'edit' },
      customField17: { comp: TextField, readonly: type !== 'add' },
      customField18: { comp: TextField, readonly: true },
      customField19: { comp: TextField, readonly: type !== 'add' },
      customField20: { comp: TextField, readonly: true },
      customField21: { comp: TextField, readonly: true },
      customField22: { comp: TextField, readonly: true },
      customField23: { comp: TextField, type: 'number', readonly: type !== 'add' },
      customField24: { comp: TextField, readonly: type !== 'add' },
      customField25: { comp: TextField, readonly: true },
      customField26: { comp: TextField, type: 'number', readonly: type !== 'add' },
      customField27: { comp: TextField, type: 'number', readonly: type !== 'add' },
      customField28: { comp: TextField, readonly: type !== 'add' },
      customField29: { comp: TextField, readonly: type !== 'add' },
      customField30: type === 'add' ? { comp: Select } : { comp: TextField, type: 'number', readonly: true },
      customField31: { comp: ReadonlyDate, dateTime: true },
      customField32: { comp: TextField, readonly: true },
      customField33: { comp: ReadonlyDate, dateTime: true },
    }),
    []
  );
  return map;
};

const editStyles = {
  display: 'grid',
  gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr',
  gridTemplateRows:
    '1fr 1fr auto 1fr 1fr auto 1fr 1fr auto 1fr 1fr 1fr auto 1fr auto 1fr 1fr auto auto',
  gap: '12px 12px',

  gridTemplateAreas: `'name name name name name name kdnr kdnr customField6 customField6 customField23 customField23'
     'name name name name name name customField5 customField5 customField26 customField26 customField27 customField27'
     'space-1 space-1 space-1 space-1 space-1 space-1 space-1 space-1 space-1 space-1 space-1 space-1'
     'customField24 customField24 customField24 customField24 customField24 customField24 customField12 customField12 customField12 customField16 customField16 customField16'
     'customField19 customField19 customField17 customField17 customField17 customField17 customField30 customField30 customField30 id id id'
     'space-2 space-2 space-2 space-2 space-2 space-2 space-2 space-2 space-2 space-2 space-2 space-2'
     'customField29 customField29 customField29 customField29 customField28 customField28 customField11 customField11 customField11 customField7 customField7 customField7'
     'customField1 customField1 customField1 customField2 customField2 customField2 customField8 customField8 customField10 customField10 customField9 customField9'
     'space-3 space-3 space-3 space-3 space-3 space-3 space-3 space-3 space-3 space-3 space-3 space-3'
     'customField20 customField20 customField20 customField20 customField20 customField20 customField18 customField18 customField18 customField18 customField18 customField18'
     'customField32 customField32 customField32 customField25 customField25 customField25 customField15 customField15 customField15 customField4 customField4 customField4'
     'customField13 customField13 customField13 customField13 customField13 customField13 customField14 customField14 customField14 customField14 customField14 customField14'
     'space-4 space-4 space-4 space-4 space-4 space-4 space-4 space-4 space-4 space-4 space-4 space-4'
     'customField21 customField21 customField21 customField21 customField22 customField22 customField22 customField22 ident ident ident ident'
     'space-5 space-5 space-5 space-5 space-5 space-5 space-5 space-5 space-5 space-5 space-5 space-5'
     'customField3 customField3 customField3 customField3 customField3 customField3 customField3 customField3 customField33 customField33 customField33 customField33'
     'customField3 customField3 customField3 customField3 customField3 customField3 customField3 customField3 customField31 customField31 customField31 customField31'
     'space-6 space-6 space-6 space-6 space-6 space-6 space-6 space-6 space-6 space-6 space-6 space-6'`,
} as CSSProperties;

const addStyles = {
  display: 'grid',
  gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr',
  gridTemplateRows: '1fr 1fr auto 1fr 1fr auto 1fr 1fr auto 1fr 1fr auto',
  gap: '12px 12px',
  gridTemplateAreas: `'name name name name name name kdnr kdnr customField6 customField6 customField23 customField23'
  'name name name name name name customField5 customField5 customField26 customField26 customField27 customField27'
  'space-1 space-1 space-1 space-1 space-1 space-1 space-1 space-1 space-1 space-1 space-1 space-1'
  'customField24 customField24 customField24 customField24 customField24 customField24 customField12 customField12 customField12 customField16 customField16 customField16'
  'customField19 customField19 customField17 customField17 customField17 customField17 customField30 customField30 customField30 id id id'
  'space-2 space-2 space-2 space-2 space-2 space-2 space-2 space-2 space-2 space-2 space-2 space-2'
  'customField29 customField29 customField29 customField29 customField28 customField28 customField11 customField11 customField11 customField7 customField7 customField7'
  'customField1 customField1 customField1 customField2 customField2 customField2 customField8 customField8 customField10 customField10 customField9 customField9'
  'space-3 space-3 space-3 space-3 space-3 space-3 space-3 space-3 space-3 space-3 space-3 space-3'
  'customField3 customField3 customField3 customField3 customField3 customField3 customField3 customField3 customField3 customField3 customField3 customField3'
  'customField3 customField3 customField3 customField3 customField3 customField3 customField3 customField3 customField3 customField3 customField3 customField3'`,
} as CSSProperties;

const addBooleansIfTrue = (target: any, values: any) => {
  Object.entries(values).forEach(([key, val]) => {
    if (val === true) {
      target[key] = true;
    }
  });

  return target;
};

const getRenderObjectFromStyles = (
  css: CSSProperties
): { inputs: string[]; spacersCount: number; styles: CSSProperties } =>
  [
    ...new Set(
      css?.gridTemplateAreas
        ?.split("'")
        .join('')
        .split(' ')
        .map((x) => x.trim())
        .filter((x) => !!x)
    ),
  ].reduce(
    (p, c) => {
      if (c.startsWith('space')) {
        p.spacersCount++;
      } else {
        p.inputs.push(c);
      }
      return p;
    },
    { inputs: [] as string[], spacersCount: 0, styles: css }
  );

const render = {
  edit: getRenderObjectFromStyles(editStyles),
  add: getRenderObjectFromStyles(addStyles),
  transfer: getRenderObjectFromStyles(addStyles),
};

const FormBody = ({ type }: { type: DataModelBodyTypes }) => {
  const map = useMap(type);
  const spaces = new Array(6)
    .fill(0)
    .map((_x, i) => <scale-divider key={i} class={styles['space-' + (i + 1)]} />);

  return (
    <div style={render[type as keyof typeof render].styles}>
      {Object.entries(map)
        .filter(([key]) => render[type].inputs.includes(key))
        .map(([key, value]) => {
          const props: any = {
            name: key,
            className: styles[key],
            label: header[key as keyof typeof header],
            key,
          };
          addBooleansIfTrue(props, value);
          return createElement(value.comp as any, props, null);
        })}
      {spaces.map((x) => x)}
    </div>
  );
};


interface ICustomerFormProps {
  onSubmit: OnSubmit<DataModel>;
  model: DataModel;
  type: DataModelBodyTypes;
}

const CustomerForm = ({ model, onSubmit, type }: ICustomerFormProps) => {
  return (
    <Formik initialValues={model} onSubmit={onSubmit}>
      {() => (
        <Form className={styles.form} id="customer-form" shouldFocusOnError>
          <FormBody type={type} />
        </Form>
      )}
    </Formik>
  );
};

export default CustomerForm;

This worked but wasn't shipped, I've paused this topic until, I've discovered @ts-react/form while scrolling twitter, thanks theo :D.

My expectations

• this will clear all unnecessary boilerplate
• fix typesafety (not matching name prop)

create an huge map and only create the schemas for each form with a grid layout

My todos

• migrate formik components
• build a grid helper
• build one huge map
• build many custom (branded) schemas
• test it

Migrating components

My components in my `formik` directory

Name
----
autocomplete
checkbox
checkboxGroup
datePicker
dnd
file
focusError
form
mulltistepform
radio
readonlyDate
searchableSelect
select
slider
submitButton
switch
textField
toggleGroup
dnd.ts
index.tsx

The differences

• hooks returns in different format
• hook doesn't need parameter

- const [field, meta, helpers] = useField(props.name);
+ const { error, field } = useTsController<boolean | string[] | undefined>();

NOTE: formik's field.onChange consumes an event and react-hook-form consumes a value

What isn't migrated yet?

Focus errored field

When the form validation throws an error, the first field with an error gets focused, this can't be implemented as of today mentioned in #16

isSubmitting state

formik provides an variable isSubmitting, this can be set with helpers and has not any default behaviour.

I wrapped the onSubmit handler in `formik` and returned the component with this handler

export const Formik = <T extends object>({
  initialValues,
  onSubmit,
  validationSchema,
  children,
  onSuccessSettled,
}: IFormikProps<T>) => {
  const handleSubmit: OnSubmit<T> = useCallback(
    (values, helpers) => {
      helpers.setSubmitting(true);
      try {
        const res = onSubmit(values, helpers);
        if ((res as any).then) {
          (res as Promise<void>)
            .then(() => {
              helpers.setSubmitting(false);
              onSuccessSettled?.();
            })
            .catch(() => helpers.setSubmitting(false));
        } else {
          helpers.setSubmitting(false);
          onSuccessSettled?.();
        }
      } catch (error) {
        helpers.setSubmitting(false);
      }
    },
    [onSubmit]
  );
  return (
    <FormikImple
      initialValues={initialValues}
      onSubmit={handleSubmit}
      validationSchema={validationSchema}
    >
      {children}
    </FormikImple>
  );
};

First Edit:

Accessing FormState

There isn't any FormProvider provider yet ( #31, #33 )
Example: Allowing to mutate other fields value

Can't pass a custom onChange with editing some other fields value

Dependent Field Props

The props of one field can be dependent on the value of another field. Like setting a span of two dates where one can't be higher than the other.

Wrapping some fields inside an custom component

I have usecases, where some fields are wrapped inside an accordion.

Multistepform

After I sucessfulle implemented all features for one form, I will try the MultiStepForm

Helper for Array rendering

Select which load options with react-query hook as props

I' ve already build for another feature in this project a provider, which gets an config, creates a fetchFn and has as the value the custom react-query hook.
The components calls with useContext the provider and call the returned function, this returns the ObeserverResult.
Remembering this, it should be possible to pass an query hook as prop to components.

More coming soon :)

[iway1]

Thanks for sharing - looking forward to hearing your updates. Form Provider has been added, creating a release for that later tonight.