Skip to content

refactor: migrate remaining form components to new standard #3996

@gpaoloni

Description

@gpaoloni

In #1176 (and #3053, among some other commits), we started a migration to move "form input components" out from the older plugin-hrm-form/src/components/common/forms/formGenerators.tsx, and into the newer and better scoped plugin-hrm-form/src/components/forms/components/.

Your task is to migrate the rest of the FormInputTypes from plugin-hrm-form/src/components/common/forms/formGenerators.tsx to the newer plugin-hrm-form/src/components/forms/components/ version.
The entire list of components that need to be migrated are:

  • FormInputType.SearchInput
  • FormInputType.NumericInput
  • FormInputType.Email
  • FormInputType.RadioInput
  • FormInputType.ListboxMultiselect
  • FormInputType.MixedCheckbox
  • FormInputType.TimeInput
  • FormInputType.DateInput
  • FormInputType.FileUpload

Here are the specs you must comply with:

  • Each input type must be refactored in a separate PR. The PRs should compose a chain of PRs, to avoid merge conflicts. This means that the PR that refactors FormInputType.SearchInput should base off of master, then FormInputType.NumericInput should base off of the one where FormInputType.SearchInput is refactored, and so on.
  • Each input type that is migrated should live in it's own folder under plugin-hrm-form/src/components/forms/components/, where (using RadioInput as example, but analogous to the rest of the components):
    • A folder named after the input type (e.g. RadioInput/) is where the different files will be placed.
    • A .tsx file named after the input type (e.g. RadioInput/RadioInput.tsx) is the file where the component is defined. This file should contain two React components:
      • One named after the input type, with a UI suffix (e.g. RadioInput). This is a stateless components, that receives all the necessary information as props and renders the information accordingly.
      • One named after the input type (e.g. RadioInput). This is a stateful component, that only renders the above one, passing the necessary props. All of the state and hooks needed for the "UI" component is handled here.
    • A styles.tsx file (e.g. RadioInput/styles.tsx), where all the styles specific for this UI component is placed.
      • If the styles were previously part of a file like plugin-hrm-form/src/styles/HrmStyles.tsx and there are no other references to it, then remove it from the original location.
      • If the styles are still used by other components, keep them where they are.
      • If in the process, is obvious that a style is shared between different components in plugin-hrm-form/src/components/forms/components/, move the style to the shared plugin-hrm-form/src/components/forms/components/styles.tsx`.
    • If it's obvious that one particular input type is a "variant" of another one (e.g. NumericInput and EmailInput are variants of the plain FormInput but with extra pattern rules), avoid duplicating the "UI" component, instead follow the pattern used in the plugin-hrm-form/src/components/forms/components/FormSelect/ directory: FormSelect.tsx and DependentFormSelect.tsx, both share the same FormSelectUI.tsx component.
  • The resulting component should be used in createInput (plugin-hrm-form/src/components/forms/inputGenerator.tsx), in the corresponding case statement.

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions