From 7beb1466bf31aebca197d5d5277bb017d29688e5 Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sleede.com>
Date: Tue, 5 Apr 2022 14:25:58 +0200
Subject: [PATCH] (archi) organize react-hook-form components in a separate
 folder

---
 .../authentication-provider/provider-form.tsx        |  8 ++++----
 .../{base/rhf-input.tsx => form/form-input.tsx}      | 12 ++++++------
 .../form-multi-select.tsx}                           | 10 +++++-----
 .../{base/fab-select.tsx => form/form-select.tsx}    | 12 ++++++------
 .../plan-categories/plan-category-form.tsx           |  6 +++---
 app/frontend/src/stylesheets/application.scss        |  3 ++-
 .../{base/rhf-input.scss => form/form-input.scss}    |  2 +-
 .../{base/fab-select.scss => form/form-select.scss}  |  4 ++--
 8 files changed, 29 insertions(+), 28 deletions(-)
 rename app/frontend/src/javascript/components/{base/rhf-input.tsx => form/form-input.tsx} (72%)
 rename app/frontend/src/javascript/components/{base/fab-multi-select.tsx => form/form-multi-select.tsx} (74%)
 rename app/frontend/src/javascript/components/{base/fab-select.tsx => form/form-select.tsx} (72%)
 rename app/frontend/src/stylesheets/modules/{base/rhf-input.scss => form/form-input.scss} (99%)
 rename app/frontend/src/stylesheets/modules/{base/fab-select.scss => form/form-select.scss} (98%)

diff --git a/app/frontend/src/javascript/components/authentication-provider/provider-form.tsx b/app/frontend/src/javascript/components/authentication-provider/provider-form.tsx
index f628f7a92..14675b889 100644
--- a/app/frontend/src/javascript/components/authentication-provider/provider-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/provider-form.tsx
@@ -4,9 +4,9 @@ import { react2angular } from 'react2angular';
 import { AuthenticationProvider } from '../../models/authentication-provider';
 import { Loader } from '../base/loader';
 import { IApplication } from '../../models/application';
-import { RHFInput } from '../base/rhf-input';
+import { FormInput } from '../form/form-input';
 import { useTranslation } from 'react-i18next';
-import { FabSelect } from '../base/fab-select';
+import { FormSelect } from '../form/form-select';
 
 declare const Application: IApplication;
 
@@ -46,8 +46,8 @@ export const ProviderForm: React.FC<ProviderFormProps> = ({ action, provider, on
 
   return (
     <form className="provider-form" onSubmit={handleSubmit(onSubmit)}>
-      <RHFInput id="name" register={register} readOnly={action === 'update'} rules={{ required: true }} label={t('app.shared.authentication.name')} />
-      <FabSelect id="providable_type" control={control} options={buildProvidableTypeOptions()} label={t('app.shared.authentication.authentication_type')} rules={{ required: true }} />
+      <FormInput id="name" register={register} readOnly={action === 'update'} rules={{ required: true }} label={t('app.shared.authentication.name')} />
+      <FormSelect id="providable_type" control={control} options={buildProvidableTypeOptions()} label={t('app.shared.authentication.authentication_type')} rules={{ required: true }} />
       <input type={'submit'} />
     </form>
   );
diff --git a/app/frontend/src/javascript/components/base/rhf-input.tsx b/app/frontend/src/javascript/components/form/form-input.tsx
similarity index 72%
rename from app/frontend/src/javascript/components/base/rhf-input.tsx
rename to app/frontend/src/javascript/components/form/form-input.tsx
index cb2acb672..456be40c7 100644
--- a/app/frontend/src/javascript/components/base/rhf-input.tsx
+++ b/app/frontend/src/javascript/components/form/form-input.tsx
@@ -4,7 +4,7 @@ import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FieldPath } from 'react-hook-form/dist/types/path';
 import { FormComponent } from '../../models/form-component';
 
-interface RHFInputProps<TFieldValues> extends InputHTMLAttributes<HTMLInputElement>, FormComponent<TFieldValues>{
+interface FormInputProps<TFieldValues> extends InputHTMLAttributes<HTMLInputElement>, FormComponent<TFieldValues>{
   id: string,
   label?: string,
   tooltip?: string,
@@ -16,10 +16,10 @@ interface RHFInputProps<TFieldValues> extends InputHTMLAttributes<HTMLInputEleme
 /**
  * This component is a template for an input component to use within React Hook Form
  */
-export const RHFInput = <TFieldValues extends FieldValues>({ id, register, label, tooltip, defaultValue, icon, className, rules, readOnly, disabled, type, addOn, addOnClassName, placeholder, error, step }: RHFInputProps<TFieldValues>) => {
+export const FormInput = <TFieldValues extends FieldValues>({ id, register, label, tooltip, defaultValue, icon, className, rules, readOnly, disabled, type, addOn, addOnClassName, placeholder, error, step }: FormInputProps<TFieldValues>) => {
   // Compose classnames from props
   const classNames = `
-    rhf-input ${className || ''}
+    form-input ${className || ''}
     ${error && error[id] ? 'is-incorrect' : ''}
     ${rules && rules.required ? 'is-required' : ''}
     ${readOnly ? 'is-readOnly' : ''}
@@ -27,12 +27,12 @@ export const RHFInput = <TFieldValues extends FieldValues>({ id, register, label
 
   return (
     <label className={classNames}>
-      {label && <div className='rhf-input-header'>
+      {label && <div className='form-input-header'>
         <p>{label}</p>
         {/* TODO: Create tooltip component */}
         {tooltip && <span>{tooltip}</span>}
       </div>}
-      <div className='rhf-input-field'>
+      <div className='form-input-field'>
         {icon && <span className="icon">{icon}</span>}
         <input id={id}
           {...register(id as FieldPath<TFieldValues>, {
@@ -47,7 +47,7 @@ export const RHFInput = <TFieldValues extends FieldValues>({ id, register, label
           placeholder={placeholder} />
         {addOn && <span className={`addon ${addOnClassName || ''}`}>{addOn}</span>}
       </div>
-      {(error && error[id]) && <div className="rhf-input-error">{error[id].message}</div> }
+      {(error && error[id]) && <div className="form-input-error">{error[id].message}</div> }
     </label>
   );
 };
diff --git a/app/frontend/src/javascript/components/base/fab-multi-select.tsx b/app/frontend/src/javascript/components/form/form-multi-select.tsx
similarity index 74%
rename from app/frontend/src/javascript/components/base/fab-multi-select.tsx
rename to app/frontend/src/javascript/components/form/form-multi-select.tsx
index f17997a95..82aa13232 100644
--- a/app/frontend/src/javascript/components/base/fab-multi-select.tsx
+++ b/app/frontend/src/javascript/components/form/form-multi-select.tsx
@@ -6,7 +6,7 @@ import { FieldPath } from 'react-hook-form/dist/types/path';
 import { FieldPathValue, UnpackNestedValue } from 'react-hook-form/dist/types';
 import { FormControlledComponent } from '../../models/form-component';
 
-interface FabSelectProps<TFieldValues, TContext extends object, TOptionValue> extends SelectHTMLAttributes<HTMLSelectElement>, FormControlledComponent<TFieldValues, TContext> {
+interface FormSelectProps<TFieldValues, TContext extends object, TOptionValue> extends SelectHTMLAttributes<HTMLSelectElement>, FormControlledComponent<TFieldValues, TContext> {
   id: string,
   label?: string,
   options: Array<selectOption<TOptionValue>>,
@@ -23,19 +23,19 @@ type selectOption<TOptionValue> = { value: TOptionValue, label: string };
  * This component is a wrapper around react-select to use with react-hook-form.
  * It is a multi-select component.
  */
-export const FabMultiSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, className, control, placeholder, options, valuesDefault, error, rules, disabled }: FabSelectProps<TFieldValues, TContext, TOptionValue>) => {
+export const FormMultiSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, className, control, placeholder, options, valuesDefault, error, rules, disabled }: FormSelectProps<TFieldValues, TContext, TOptionValue>) => {
   const classNames = `
-    fab-multi-select ${className || ''}
+    form-multi-select ${className || ''}
     ${error && error[id] ? 'is-incorrect' : ''}
     ${rules && rules.required ? 'is-required' : ''}
     ${disabled ? 'is-disabled' : ''}`;
 
   return (
     <label className={classNames}>
-      {label && <div className="fab-multi-select-header">
+      {label && <div className="form-multi-select-header">
         <p>{label}</p>
       </div>}
-      <div className="fab-multi-select-field">
+      <div className="form-multi-select-field">
         <Controller name={id as FieldPath<TFieldValues>}
                     control={control}
                     defaultValue={valuesDefault as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>}
diff --git a/app/frontend/src/javascript/components/base/fab-select.tsx b/app/frontend/src/javascript/components/form/form-select.tsx
similarity index 72%
rename from app/frontend/src/javascript/components/base/fab-select.tsx
rename to app/frontend/src/javascript/components/form/form-select.tsx
index b4f4ffa32..931f8c618 100644
--- a/app/frontend/src/javascript/components/base/fab-select.tsx
+++ b/app/frontend/src/javascript/components/form/form-select.tsx
@@ -6,7 +6,7 @@ import { FieldPath } from 'react-hook-form/dist/types/path';
 import { FieldPathValue, UnpackNestedValue } from 'react-hook-form/dist/types';
 import { FormControlledComponent } from '../../models/form-component';
 
-interface FabSelectProps<TFieldValues, TContext extends object, TOptionValue> extends SelectHTMLAttributes<HTMLSelectElement>, FormControlledComponent<TFieldValues, TContext> {
+interface FormSelectProps<TFieldValues, TContext extends object, TOptionValue> extends SelectHTMLAttributes<HTMLSelectElement>, FormControlledComponent<TFieldValues, TContext> {
   id: string,
   label?: string,
   options: Array<selectOption<TOptionValue>>,
@@ -22,25 +22,25 @@ type selectOption<TOptionValue> = { value: TOptionValue, label: string };
 /**
  * This component is a wrapper for react-select to use with react-hook-form
  */
-export const FabSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, className, control, placeholder, options, valueDefault, error, rules, disabled }: FabSelectProps<TFieldValues, TContext, TOptionValue>) => {
+export const FormSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, className, control, placeholder, options, valueDefault, error, rules, disabled }: FormSelectProps<TFieldValues, TContext, TOptionValue>) => {
   const classNames = `
-    fab-select ${className || ''}
+    form-select ${className || ''}
     ${error && error[id] ? 'is-incorrect' : ''}
     ${rules && rules.required ? 'is-required' : ''}
     ${disabled ? 'is-disabled' : ''}`;
 
   return (
     <label className={classNames}>
-      {label && <div className="fab-select-header">
+      {label && <div className="form-select-header">
         <p>{label}</p>
       </div>}
-      <div className="fab-select-field">
+      <div className="form-select-field">
         <Controller name={id as FieldPath<TFieldValues>}
                     control={control}
                     defaultValue={valueDefault as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>}
                     render={({ field: { onChange, value, ref } }) =>
           <Select inputRef={ref}
-                  className="fab-select-field-input"
+                  className="form-select-field-input"
                   value={options.find(c => c.value === value)}
                   onChange={val => onChange(val.value)}
                   placeholder={placeholder}
diff --git a/app/frontend/src/javascript/components/plan-categories/plan-category-form.tsx b/app/frontend/src/javascript/components/plan-categories/plan-category-form.tsx
index c02872ac6..92405342d 100644
--- a/app/frontend/src/javascript/components/plan-categories/plan-category-form.tsx
+++ b/app/frontend/src/javascript/components/plan-categories/plan-category-form.tsx
@@ -5,7 +5,7 @@ import { PlanCategory } from '../../models/plan-category';
 import { Loader } from '../base/loader';
 import { useForm, Controller, SubmitHandler } from 'react-hook-form';
 import { FabTextEditor } from '../base/text-editor/fab-text-editor';
-import { RHFInput } from '../base/rhf-input';
+import { FormInput } from '../form/form-input';
 import { FabAlert } from '../base/fab-alert';
 import { FabButton } from '../base/fab-button';
 
@@ -45,13 +45,13 @@ const PlanCategoryFormComponent: React.FC<PlanCategoryFormProps> = ({ action, ca
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <RHFInput id='name' register={register} rules={{ required: 'true' }} label={t('app.admin.manage_plan_category.name')} />
+      <FormInput id='name' register={register} rules={{ required: 'true' }} label={t('app.admin.manage_plan_category.name')} />
 
       <Controller name="description" control={control} render={({ field: { onChange, value } }) =>
         <FabTextEditor label={t('app.admin.manage_plan_category.description')} onChange={onChange} content={value} limit={100} />
       } />
 
-      <RHFInput id='weight' register={register} type='number' label={t('app.admin.manage_plan_category.significance')} />
+      <FormInput id='weight' register={register} type='number' label={t('app.admin.manage_plan_category.significance')} />
       <FabAlert level="info" className="significance-info">
         {t('app.admin.manage_plan_category.info')}
       </FabAlert>
diff --git a/app/frontend/src/stylesheets/application.scss b/app/frontend/src/stylesheets/application.scss
index 8d2593514..b06328081 100644
--- a/app/frontend/src/stylesheets/application.scss
+++ b/app/frontend/src/stylesheets/application.scss
@@ -22,7 +22,8 @@
 @import "modules/base/fab-popover";
 @import "modules/base/fab-text-editor";
 @import "modules/base/labelled-input";
-@import "modules/base/rhf-input";
+@import "modules/form/form-input";
+@import "modules/form/form-select";
 @import "modules/machines/machine-card";
 @import "modules/machines/machines-filters";
 @import "modules/machines/machines-list";
diff --git a/app/frontend/src/stylesheets/modules/base/rhf-input.scss b/app/frontend/src/stylesheets/modules/form/form-input.scss
similarity index 99%
rename from app/frontend/src/stylesheets/modules/base/rhf-input.scss
rename to app/frontend/src/stylesheets/modules/form/form-input.scss
index 3efe1ab21..b17878f89 100644
--- a/app/frontend/src/stylesheets/modules/base/rhf-input.scss
+++ b/app/frontend/src/stylesheets/modules/form/form-input.scss
@@ -1,4 +1,4 @@
-.rhf-input {
+.form-input {
   width: 100%;
   margin-bottom: 1.6rem;
 
diff --git a/app/frontend/src/stylesheets/modules/base/fab-select.scss b/app/frontend/src/stylesheets/modules/form/form-select.scss
similarity index 98%
rename from app/frontend/src/stylesheets/modules/base/fab-select.scss
rename to app/frontend/src/stylesheets/modules/form/form-select.scss
index eb35845ec..6cd6f07c6 100644
--- a/app/frontend/src/stylesheets/modules/base/fab-select.scss
+++ b/app/frontend/src/stylesheets/modules/form/form-select.scss
@@ -1,5 +1,5 @@
-.fab-select,
-.fab-multi-select {
+.form-select,
+.form-multi-select {
   width: 100%;
   margin-bottom: 1.6rem;