SPIKE Look at moving away from Redux Form for CMS 6

[maxime-rainville]

Redux Form is no longer in active development.

The maintainer of Redux Form recommend migrating to React Final Form instead.

Redux form is used by our form schema abstraction.

Timebox

• 3 days ... with possible follow up

Objectives of the SPIKE

• Better understand how form schema is put together and what's it's interconnectivity with Redux is.
• The basic approach to form schema is retained (communicate a form structure with JSON)
• Review React Final Form's feature set evaluate what a migration would entail.
• Research other Library that might fulfil a similar function to ReduxForm or React Final Form.
• Review if we need a Form Library at all given the form schema use case.
• Present finding at an architecture catch up.

Note

This is really about rendering forms. If you can fine a library that comes with its own form schema standard, that would also be acceptable.

[maxime-rainville]

There appears to be a lot of specs for JSON Form schema:

• https://cloud.google.com/service-catalog/docs/form-schema-overview
• https://github.com/rjsf-team/react-jsonschema-form
• https://json-schema.org/blog/posts/remote-case-study
• https://github.com/restspace/schema-form
• https://github.com/formio/formio.js/wiki/Form-JSON-Schema

Maybe we should look at picking one approach used by someone else instead of maintaining our own.

[emteknetnz]

Recommendation:

• Either swap out redux-form to react-hook-form, OR
• Just keep using redux-form for a while longer as it still works for us and isn't technically broken
• Keep redux form state management as is
• Keep formschema as is

Existing setup - FormSchema

• FormSchema is a JSON representation of a Silverstripe Form class, including both the structure (schema) of the form, and the values (state) of the form as well as any validation errors
• While there are other more standardised FormSchema's out there, ours is fine for what it does so I see no reason to invest any effort in changing it, unless we really want to get rid of redux.

Existing setup - redux form state management:

• We use redux-form which uses redux to manage form state
• FormSchema also uses redux to store formstate (I'm not sure which has precedence)
• There's also a 'schema state overrides' that overrides whatever redux-form + formschema has set which happens on several react components via setSchemaStateOverrides()
• There's a bunch of existing logic so any attempt to refactor or even remove redux seems like a large amount of effort
• If we did want to refactor/remove redux form state management, recommend this done independently of swapping out the form library so that we reduce implementation complexity.

Existing setup - notable react components are:

• components/FormBuilder/FormBuilderLoader handles all the XHR formschema + redux stuff
• components/FormBuilder/FormBuilder turns the FormSchema JSON into react components using Injector
• components/Form/Form - renders the tag
• containers/Form/Form - wraps redux-form HOC around components/Form/Form

Redux-form:

• Uses redux to manage form state, which complicates things
• redux-form/redux-form - 12.6k stars, last commit 1 year ago, 475 issues
• Last commit was to update package.json, so no longer being actively worked on
• Github readme recommends that people use react-final-form instead

React-final-form:

• Written by the same person who made redux-form
• final-form/react-final-form - 7.3K stars,last commit 1 year ago, 367 issues
• final-form/final-form - 3k stars, last commit 9 months ago, 98 issues
• Does not use redux
• react-final-form is a react wrapper around final-form which is framework agnostic
• Clearer migration path as they use similar API
• However does not use redux, so we'd still need to hook up redux which probably negates a lot of the migration simplicity
• I did spend around half a day attempting to follow migration path, however I got nowhere. The complexity and difficulty was in our existing setup which is complicated.
• Maintenance support doesn't look good, one man band, docs look pretty rough
• Can be used with class components, so doesn't need to refactor class component
• Syntax not as nice as react-hook-form or formik
• Looks like the worst option

import { Form, Field } from 'react-final-form'

export function MyForm {
  return <Form
    onSubmit={onSubmit}
    validate={validate}
    render={({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <Field
          name="bio"
          render={({ input, meta }) => (
            <div>
              <label>Bio</label>
              <textarea {...input} />
              {meta.touched && meta.error && <span>{meta.error}</span>}
            </div>
          )}
        />
// ...

React-hook-form:

• react-hook-form/react-hook-form - 39.7k stars last commit 3 weeks ago, 26 issues
• Does not use redux
• Would require refactoring <FormBuilder> to a functional component
• Along with formik, looks like one of the most popular two react form frameworks
• Looks as though it has the most active community in terms of fixing github issues. Docs look really good.
• The useForm() hook provides a register() method that binds react-hook-form to
• Recommend we use this over react-final-form or formik

import { useState } from "react";
import { useForm } from "react-hook-form";

export function MyForm() {
  const { register, handleSubmit } = useForm();
  const [data, setData] = useState('');
  return (
    <form onSubmit={handleSubmit((data) => setData(JSON.stringify(data)))}>
      <Header />
      <input {...register("firstName")} placeholder="First name" />
// ...

Formik

• jaredpalmer/formik - 33.5k stars, last commit 1 week ago, 689 issues
• Support looks good, though lots of unresolved issues. Docs look good
• Does not use redux
• Would require refactoring <FormBuilder> to a functional component
• Along with formik, looks like one of the most popular two react form frameworks
• Looks very similar to react-hook-form, though not quite as nice IMO
• Don't recommend we use, see no reason to use over react-hook-form

import React from 'react';
import { useFormik } from 'formik';

export function MyForm() {
  const formik = useFormik({
    initialValues: objectOfData,
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="firstName">First Name</label>
      <input
        id="firstName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.firstName}
      />
// ....

[GuySartorelli]

Spike complete and discussed. Next step is #1747