Merge pull request IQSS#368 from IQSS/feature/338-form-validation-lib…

…rary

Feature/338 form validation library

.eslintrc.json

@@ -66,6 +66,14 @@
         "trailingComma": "none",
         "bracketSameLine": true
       }
+    ],
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      {
+        "checksVoidReturn": {
+          "attributes": false
+        }
+      }
     ]
   },
   "overrides": [

.stylelintrc.json

@@ -14,7 +14,7 @@
     "selector-pseudo-class-no-unknown": [
       true,
       {
-        "ignorePseudoClasses": ["export"]
+        "ignorePseudoClasses": ["export", "global"]
       }
     ],
     "property-no-unknown": [

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-pr132.dd49caf",
+    "@iqss/dataverse-client-javascript": "2.0.0-pr141.2d54907",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",
@@ -33,6 +33,7 @@
     "moment-timezone": "0.5.43",
     "react-bootstrap": "2.7.2",
     "react-bootstrap-icons": "1.10.3",
+    "react-hook-form": "7.51.2",
     "react-i18next": "12.1.5",
     "react-infinite-scroll-hook": "4.1.1",
     "react-loader-spinner": "5.3.4",

packages/design-system/src/lib/components/form/form-group/form-element/FormCheckbox.tsx

@@ -10,21 +10,22 @@ interface FormCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   validFeedback?: string
 }
 
-export function FormCheckbox({
-  label,
-  id,
-  isValid,
-  isInvalid,
-  validFeedback,
-  invalidFeedback,
-  ...props
-}: FormCheckboxProps) {
+export const FormCheckbox = React.forwardRef(function FormCheckbox(
+  { label, id, isValid, isInvalid, validFeedback, invalidFeedback, ...props }: FormCheckboxProps,
+  ref
+) {
   return (
     <FormBS.Check type="checkbox" id={id}>
-      <FormBS.Check.Input type="checkbox" isValid={isValid} isInvalid={isInvalid} {...props} />
+      <FormBS.Check.Input
+        type="checkbox"
+        isValid={isValid}
+        isInvalid={isInvalid}
+        ref={ref as React.ForwardedRef<HTMLInputElement>}
+        {...props}
+      />
       <FormBS.Check.Label>{label}</FormBS.Check.Label>
       <FormBS.Control.Feedback type="invalid">{invalidFeedback}</FormBS.Control.Feedback>
       <FormBS.Control.Feedback type="valid">{validFeedback}</FormBS.Control.Feedback>
     </FormBS.Check>
   )
-}
+})

packages/design-system/src/lib/components/form/form-group/form-element/FormFeedback.tsx

@@ -15,7 +15,7 @@ export function FormFeedback({
   return withinMultipleFieldsGroup ? (
     <FormControl.Feedback type={type}>{children}</FormControl.Feedback>
   ) : (
-    <FormControl.Feedback as={Col} sm={{ offset: 3, span: 9 }} type={type}>
+    <FormControl.Feedback as={Col} sm={{ offset: 3 }} type={type}>
       {children}
     </FormControl.Feedback>
   )

packages/design-system/src/lib/components/form/form-group/form-element/FormInput.tsx

@@ -14,16 +14,19 @@ interface FormInputProps extends React.HTMLAttributes<FormInputElement> {
   disabled?: boolean
 }
 
-export function FormInput({
-  type = 'text',
-  name,
-  readOnly,
-  isValid,
-  isInvalid,
-  disabled,
-  withinMultipleFieldsGroup,
-  ...props
-}: FormInputProps) {
+export const FormInput = React.forwardRef(function FormInput(
+  {
+    type = 'text',
+    name,
+    readOnly,
+    isValid,
+    isInvalid,
+    disabled,
+    withinMultipleFieldsGroup,
+    ...props
+  }: FormInputProps,
+  ref
+) {
   return (
     <FormElementLayout
       withinMultipleFieldsGroup={withinMultipleFieldsGroup}
@@ -37,8 +40,9 @@ export function FormInput({
         isValid={isValid}
         isInvalid={isInvalid}
         disabled={disabled}
+        ref={ref as React.ForwardedRef<HTMLInputElement>}
         {...props}
       />
     </FormElementLayout>
   )
-}
+})

packages/design-system/src/lib/components/form/form-group/form-element/FormSelect.tsx

@@ -7,14 +7,15 @@ interface FormSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElem
   withinMultipleFieldsGroup?: boolean
 }
 
-export function FormSelect({
-  withinMultipleFieldsGroup,
-  children,
-  ...props
-}: PropsWithChildren<FormSelectProps>) {
+export const FormSelect = React.forwardRef(function FormSelect(
+  { withinMultipleFieldsGroup, children, ...props }: PropsWithChildren<FormSelectProps>,
+  ref
+) {
   return (
     <FormElementLayout withinMultipleFieldsGroup={withinMultipleFieldsGroup}>
-      <FormBS.Select {...props}>{children}</FormBS.Select>
+      <FormBS.Select ref={ref as React.ForwardedRef<HTMLSelectElement>} {...props}>
+        {children}
+      </FormBS.Select>
     </FormElementLayout>
   )
-}
+})

packages/design-system/src/lib/components/form/form-group/form-element/FormTextArea.tsx

@@ -11,20 +11,25 @@ interface FormTextAreaProps extends Omit<React.HTMLAttributes<FormInputElement>,
   isInvalid?: boolean
 }
 
-export function FormTextArea({
-  name,
-  disabled,
-  isValid,
-  isInvalid,
-  withinMultipleFieldsGroup,
-  ...props
-}: FormTextAreaProps) {
+export const FormTextArea = React.forwardRef(function FormTextArea(
+  { name, disabled, isValid, isInvalid, withinMultipleFieldsGroup, ...props }: FormTextAreaProps,
+  ref
+) {
   return (
     <FormElementLayout
       withinMultipleFieldsGroup={withinMultipleFieldsGroup}
       isInvalid={isInvalid}
       isValid={isValid}>
-      <FormBS.Control as="textarea" rows={5} disabled={disabled} name={name} {...props} />
+      <FormBS.Control
+        as="textarea"
+        rows={5}
+        disabled={disabled}
+        name={name}
+        isValid={isValid}
+        isInvalid={isInvalid}
+        ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
+        {...props}
+      />
     </FormElementLayout>
   )
-}
+})

public/locales/en/createDataset.json

@@ -6,31 +6,14 @@
   },
   "requiredFields": "Asterisks indicate required fields",
   "datasetForm": {
-    "fields": {
-      "title": {
-        "label": "Title",
-        "tooltip": "The main title of the Dataset",
-        "feedback": "Title is required."
-      },
-      "authorName": {
-        "label": "Author Name",
-        "tooltip": "The name of the author, such as the person's name or the name of an organization",
-        "feedback": "Author name is required."
-      },
-      "datasetContactEmail": {
-        "label": "Point of Contact E-mail",
-        "tooltip": "The point of contact's e-mail address",
-        "feedback": "Point of Contact E-mail is required."
-      },
-      "dsDescriptionValue": {
-        "label": "Description Text",
-        "tooltip": "A summary describing the purpose, nature and scope of the Dataset",
-        "feedback": "Description Text is required."
-      },
-      "subject": {
-        "label": "Subject",
-        "tooltip": "The area of study relevant to the Dataset",
-        "feedback": "Subject is required."
+    "field": {
+      "required": "{{displayName}} is required",
+      "invalid": {
+        "url": "{{displayName}} is not a valid URL",
+        "email": "{{displayName}} is not a valid email",
+        "int": "{{displayName}} is not a valid integer",
+        "float": "{{displayName}} is not a valid float",
+        "date": "{{displayName}} is not a valid date. Please use the format {{dateFormat}}"
       }
     },
     "status": {