-
Notifications
You must be signed in to change notification settings - Fork 10
Open
Description
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.SearchInputFormInputType.NumericInputFormInputType.EmailFormInputType.RadioInputFormInputType.ListboxMultiselectFormInputType.MixedCheckboxFormInputType.TimeInputFormInputType.DateInputFormInputType.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.SearchInputshould base off of master, thenFormInputType.NumericInputshould base off of the one whereFormInputType.SearchInputis 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 (usingRadioInputas 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
.tsxfile 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
UIsuffix (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.
- One named after the input type, with a
- A
styles.tsxfile (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.tsxand 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 sharedplugin-hrm-form/src/components/forms/components/styles.tsx`.
- If the styles were previously part of a file like
- If it's obvious that one particular input type is a "variant" of another one (e.g.
NumericInputandEmailInputare variants of the plainFormInputbut with extrapatternrules), avoid duplicating the "UI" component, instead follow the pattern used in theplugin-hrm-form/src/components/forms/components/FormSelect/directory:FormSelect.tsxandDependentFormSelect.tsx, both share the sameFormSelectUI.tsxcomponent.
- A folder named after the input type (e.g.
- The resulting component should be used in
createInput(plugin-hrm-form/src/components/forms/inputGenerator.tsx), in the correspondingcasestatement.
Reactions are currently unavailable