Merge pull request #26 from aerian-studios/upgrade-yarn

Package upgrades

.gitignore

@@ -1,3 +1,10 @@
 /node_modules/
 /build
-.npmrc
+.npmrc
+.idea
+
+.pnp.*
+.yarn/*
+
+
+.DS_Store

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -12,7 +12,7 @@ yarn add @aerian-studios/[email protected]
 
 # Form
 
-The `Form` component is an implimentation of `react-hook-form`. 
+The `Form` component is an implementation of `react-hook-form`. 
 The component has 2 required props `onSubmitFn` and `validationSchema`.
 
 - onSubmitFn:

package.json

@@ -11,19 +11,17 @@
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "dependencies": {
-    "@hookform/error-message": "^0.0.2",
-    "@hookform/resolvers": "^0.0.5",
-    "react-hook-form": "^6.0.1",
+    "@hookform/error-message": "^0",
+    "@hookform/resolvers": "^0",
+    "react-hook-form": "^6",
     "react-select": "^3.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.4",
-    "@hookform/error-message": "^0.0.2",
-    "@hookform/resolvers": "^0.0.5",
+    "@babel/core": "^7.23.7",
     "@storybook/addon-a11y": "^5.3.19",
     "@storybook/addon-docs": "^5.3.19",
     "@storybook/addon-knobs": "^5.3.19",
@@ -36,16 +34,19 @@
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",
     "cssnano": "^4.1.10",
-    "node-sass": "^4.14.1",
     "postcss-import": "^12.0.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-hook-form": "^6.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-select": "^3.1.0",
     "resolve-url-loader": "^3.1.1",
-    "sass-loader": "^9.0.0",
+    "sass-loader": "^14.0.0",
     "typescript": "^3.9.6",
     "yalc": "^1.0.0-pre.37",
     "yup": "^0.29.1"
-  }
+  },
+  "volta": {
+        "node": "20.11.0",
+        "yarn": "3.7.0"
+    },
+    "packageManager": "[email protected]"
 }

src/components/Form/Form.tsx

@@ -1,14 +1,14 @@
-import React, { HTMLAttributes } from "react";
+import React, { type HTMLAttributes } from "react";
 import * as yup from "yup";
-import { useForm, SubmitHandler } from "react-hook-form";
+import { useForm, type SubmitHandler } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers";
 import cx from "classnames";
 
 import { FormContext } from "./useFormContext";
 
 import styles from "./Form.module.scss";
-import { UnpackNestedValue } from "react-hook-form/dist/types/form";
-import { DeepPartial } from "react-hook-form/dist/types/utils";
+import type { UnpackNestedValue } from "react-hook-form/dist/types/form";
+import type { DeepPartial } from "react-hook-form/dist/types/utils";
 
 export interface FormProps<T extends object>
   extends HTMLAttributes<HTMLElement> {
@@ -78,7 +78,7 @@ export function Form<T extends object>({
   // on reset use reset to the intial values
   const handleReset = () => {
     methods.reset(defaultValues);
-    onResetFn && onResetFn();
+    onResetFn?.();
   };
 
   // when form loads set its initial values as defaults

src/components/FormElements/FormElements.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, HTMLAttributes } from "react";
+import React, { useCallback, useEffect, type HTMLAttributes } from "react";
 import { Controller } from "react-hook-form";
 import cx from "classnames";
 import { ErrorMessage } from "@hookform/error-message";
@@ -282,6 +282,7 @@ export const FormSelect: React.FC<SelectProps> = ({
   const calculatedDefaultValue =
     defaultValue === null || defaultValue ? defaultValue : options[0];
 
+
   return (
     <ControlledElement
       Component={Select}
@@ -292,24 +293,24 @@ export const FormSelect: React.FC<SelectProps> = ({
       controlledDefault={calculatedDefaultValue}
       className={className}
       {...rest}
-    ></ControlledElement>
+    />
   );
 };
 
-interface WrapComponentProps extends Record<string, any> {
+interface WrapComponentProps extends Record<string, unknown> {
   name: string;
   label: string;
-  Component: React.FC<any>;
+  Component: React.FC<unknown>;
 }
 
 // typings - pass in component props
-export const ControlledElement: React.FC<WrapComponentProps> = ({
+export const ControlledElement = ({
   Component,
   name,
   label,
   defaultValue,
   ...rest
-}) => {
+}: WrapComponentProps) => {
   const { control } = useFormContext(name);
   return (
     <Controller
@@ -361,7 +362,7 @@ export const FormTagSelector: React.FC<TagSelectorProps> = ({
     tag: string
   ) => {
     event.preventDefault();
-    let newTags = [...tags];
+    const newTags = [...tags];
     newTags.splice(tags.indexOf(tag), 1);
     setTags(newTags);
     setValue(name, newTags);