feat: Add simple input validation

equinor · Oct 25, 2023 · 14f7e5d · 14f7e5d
1 parent 4112c9f
commit 14f7e5d
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 223 deletions.
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "@equinor/eds-data-grid-react": "^0.1.0-beta.2",
     "@equinor/eds-icons": "^0.19.1",
     "@equinor/eds-tokens": "^0.9.0",
+    "@hookform/resolvers": "^3.3.2",
     "@tanstack/react-query": "^4.32.6",
     "@tanstack/react-query-devtools": "^4.36.1",
     "@tanstack/react-table": "^8.9.1",
@@ -24,11 +25,13 @@
     "openapi-typescript-codegen": "^0.25.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.47.0",
     "react-router-dom": "^6.8.0",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.9",
     "typescript": "^4.9.4",
-    "web-vitals": "^2.1.0"
+    "web-vitals": "^2.1.0",
+    "zod": "^3.22.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -70,4 +73,4 @@
     "openapi-typescript": "^6.3.9",
     "prettier": "^2.8.2"
   }
-}
+}
diff --git a/src/components/AreaCoordinates/AreaCoordinates.styled.tsx b/src/components/AreaCoordinates/AreaCoordinates.styled.tsx
@@ -19,6 +19,10 @@ export const CoordinateGroup = styled.div`
   display: flex;
   flex-direction: column;
 
+  > .autocomplete-error {
+    color: red;
+  }
+
   > .autocomplete-error {
     > div {
       > div {
@@ -33,6 +37,8 @@ export const CoordinateGroup = styled.div`
         border: solid 2px red;
       }
     }
+
+    color: red;
   }
 `;