Merge pull request #37 from aleph-im/feature/form-validation

Feature/form validation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "front-aleph-cloud",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -11,8 +11,9 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
-    "@aleph-front/aleph-core": "^1.3.4",
+    "@aleph-front/aleph-core": "^1.3.13",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@hookform/resolvers": "^3.1.1",
     "@types/node": "18.14.1",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
@@ -24,11 +25,13 @@
     "next": "^13.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.45.2",
     "react-loader-spinner": "^5.3.4",
-    "styled-components": "^5.3.6",
+    "styled-components": "^5.3.10",
     "typescript": "4.9.5",
     "usehooks-ts": "^2.9.1",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@babel/plugin-syntax-typescript": "^7.21.4",

src/components/common/HiddenFileInput/cmp.tsx

@@ -1,76 +1,85 @@
-import React, { ChangeEvent, memo, useCallback, useRef, useState } from 'react'
-import { Button, Icon } from '@aleph-front/aleph-core'
+import React, {
+  ChangeEvent,
+  ForwardedRef,
+  forwardRef,
+  memo,
+  useCallback,
+  useRef,
+} from 'react'
+import { Button, FormError, Icon } from '@aleph-front/aleph-core'
 import { HiddenFileInputProps } from './types'
 import { StyledHiddenFileInput } from './styles'
 import { ellipseAddress } from '@/helpers/utils'
 
 export const HiddenFileInput = memo(
-  ({ onChange, accept, value, children }: HiddenFileInputProps) => {
-    const inputRef = useRef<HTMLInputElement>(null)
-    const [state, setState] = useState<File | undefined>(undefined)
+  forwardRef(
+    (
+      { onChange, accept, value, children, error }: HiddenFileInputProps,
+      ref: ForwardedRef<HTMLDivElement>,
+    ) => {
+      const inputRef = useRef<HTMLInputElement>(null)
 
-    const file = value || state
+      const handleClick = useCallback(() => {
+        if (!inputRef.current) return
+        inputRef.current.click()
+      }, [])
 
-    const handleClick = useCallback(() => {
-      if (!inputRef.current) return
-      inputRef.current.click()
-    }, [])
+      const handleRemoveFile = useCallback(() => {
+        onChange(undefined)
+      }, [onChange])
 
-    const handleRemoveFile = useCallback(() => {
-      setState(undefined)
-      onChange(undefined)
-    }, [onChange])
+      const handleChange = useCallback(
+        (e: ChangeEvent<HTMLInputElement>) => {
+          // This is verbose to avoid a type error on e.target.files[0] being undefined
+          const target = e.target as HTMLInputElement
+          const { files } = target
 
-    const handleChange = useCallback(
-      (e: ChangeEvent<HTMLInputElement>) => {
-        // This is verbose to avoid a type error on e.target.files[0] being undefined
-        const target = e.target as HTMLInputElement
-        const { files } = target
+          if (files) {
+            const fileUploaded = files[0]
+            onChange(fileUploaded)
+          }
+        },
+        [onChange],
+      )
 
-        if (files) {
-          const fileUploaded = files[0]
-          setState(fileUploaded)
-          onChange(fileUploaded)
-        }
-      },
-      [onChange],
-    )
+      return (
+        <div tabIndex={-1} ref={ref}>
+          {value ? (
+            <Button
+              onClick={handleRemoveFile}
+              type="button"
+              color="main2"
+              kind="neon"
+              size="regular"
+              variant="tertiary"
+            >
+              {ellipseAddress(value.name)} <Icon name="trash" tw="ml-5" />
+            </Button>
+          ) : (
+            <Button
+              onClick={handleClick}
+              type="button"
+              color="main0"
+              kind="neon"
+              size="regular"
+              variant="primary"
+            >
+              {children}
+            </Button>
+          )}
 
-    return (
-      <>
-        {file ? (
-          <Button
-            onClick={handleRemoveFile}
-            type="button"
-            color="main2"
-            kind="neon"
-            size="regular"
-            variant="tertiary"
-          >
-            {ellipseAddress(file.name)} <Icon name="trash" tw="ml-5" />
-          </Button>
-        ) : (
-          <Button
-            onClick={handleClick}
-            type="button"
-            color="main0"
-            kind="neon"
-            size="regular"
-            variant="primary"
-          >
-            {children}
-          </Button>
-        )}
+          {error && <FormError error={error} />}
 
-        <StyledHiddenFileInput
-          type="file"
-          ref={inputRef}
-          onChange={handleChange}
-          accept={accept}
-        />
-      </>
-    )
-  },
+          <StyledHiddenFileInput
+            type="file"
+            ref={inputRef}
+            onChange={handleChange}
+            accept={accept}
+          />
+        </div>
+      )
+    },
+  ),
 )
 HiddenFileInput.displayName = 'HiddenFileInput'
 

src/components/common/HiddenFileInput/types.tsx

@@ -1,6 +1,9 @@
+import { FieldError } from 'react-hook-form'
+
 export type HiddenFileInputProps = {
   onChange: (files?: File) => void
   accept?: string
   value?: File
   children: React.ReactNode
+  error?: FieldError
 }