chore: update dependencies

.eslintrc.json

@@ -20,6 +20,11 @@
     "react-hooks/exhaustive-deps": "warn",
     "react/no-unknown-property": [2, { "ignore": ["jsx", "global"] }],
     "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      { "argsIgnorePattern": "^_" }
+    ],
+
     "no-console": "warn"
   }
 }

components/Alert.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 
 interface Props {
-  title: string;
-  message: string;
-  onClose: () => void;
+  title?: string;
+  message?: string;
+  onClose?: () => void;
 }
 
-const Alert = ({ title, message, onClose }: Props) => {
+const Alert = ({
+  title = 'Error',
+  message = 'There was a problem with the request',
+  onClose,
+}: Props) => {
   return (
     <div
       className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
@@ -31,9 +35,4 @@ const Alert = ({ title, message, onClose }: Props) => {
   );
 };
 
-Alert.defaultProps = {
-  title: 'Error',
-  message: 'There was a problem with the request',
-};
-
 export default Alert;

components/ConfirmationBox.tsx

@@ -5,15 +5,22 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Typography from '@mui/material/Typography';
 import Image from 'next/image';
-import PropTypes from 'prop-types';
+
+type ConfirmationBoxProps = {
+  data?: { label: string; value: string }[];
+  open: boolean;
+  disclaimers?: string[];
+  handleClose: () => void;
+  handleSubmitData: () => void;
+};
 
 const ConfirmationBox = ({
-  data,
+  data = [],
   open,
-  disclaimers,
+  disclaimers = [],
   handleClose,
   handleSubmitData,
-}) => {
+}: ConfirmationBoxProps) => {
   return (
     <Dialog
       onClose={handleClose}
@@ -99,21 +106,4 @@ const ConfirmationBox = ({
   );
 };
 
-ConfirmationBox.propTypes = {
-  data: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string,
-      label: PropTypes.string,
-    })
-  ).isRequired,
-  disclaimers: PropTypes.array,
-  open: PropTypes.bool.isRequired,
-  handleClose: PropTypes.func.isRequired,
-  handleSubmitData: PropTypes.func.isRequired,
-};
-
-ConfirmationBox.defaultProps = {
-  disclaimers: [],
-};
-
 export default ConfirmationBox;

components/Input.tsx

@@ -1,24 +1,37 @@
 import FormHelperText from '@mui/material/FormHelperText';
 import TextField from '@mui/material/TextField';
-import PropTypes from 'prop-types';
 import { ChangeEvent } from 'react';
 import { Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { errorMessage } from '../util/validator';
 
+type InputProps = {
+  errors?: any;
+  name: string;
+  control: any;
+  placeholder?: string;
+  information?: string;
+  onBlur?: (name: string, value: string) => void;
+  type?: 'text' | 'number' | 'password' | 'email' | 'string';
+  upperCase?: boolean;
+  inputMode?: 'text' | 'numeric' | 'decimal' | 'tel' | 'email' | 'url' | 'none';
+  maxLength?: number;
+  isCurrency?: boolean;
+};
+
 const Input = ({
   errors,
   name,
   control,
   placeholder,
   information,
-  onBlur,
-  type,
+  onBlur = (_, __) => {},
+  type = 'text',
   upperCase,
-  inputMode,
+  inputMode = 'none',
   maxLength,
   isCurrency,
-}) => {
+}: InputProps) => {
   const { t } = useTranslation();
   const formatInput = (
     e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
@@ -93,33 +106,4 @@ const Input = ({
   );
 };
 
-Input.propTypes = {
-  errors: PropTypes.shape({
-    message: PropTypes.string,
-    type: PropTypes.string,
-  }),
-  name: PropTypes.string.isRequired,
-  placeholder: PropTypes.string,
-  control: PropTypes.object.isRequired,
-  information: PropTypes.string,
-  onBlur: PropTypes.func.isRequired,
-  type: PropTypes.string,
-  autoComplete: PropTypes.string,
-  inputMode: PropTypes.string,
-  upperCase: PropTypes.bool,
-  maxLength: PropTypes.number,
-  isCurrency: PropTypes.bool,
-};
-
-Input.defaultProps = {
-  errors: null,
-  placeholder: '',
-  information: '',
-  type: 'text',
-  inputMode: 'none',
-  autoComplete: 'off',
-  upperCase: false,
-  onBlur: () => null,
-};
-
 export default Input;

components/Loading.tsx

@@ -4,11 +4,11 @@ import cn from 'classnames';
 import styles from './Loading.module.scss';
 
 interface Props {
-  label: string | null | undefined;
-  className: string;
+  label?: string;
+  className?: string;
 }
 
-const Loading = ({ label, className }: Props) => {
+const Loading = ({ label = 'Loading...', className }: Props) => {
   return (
     <div className={cn(styles.wrapper, className)}>
       <CircularProgress />
@@ -17,9 +17,4 @@ const Loading = ({ label, className }: Props) => {
   );
 };
 
-Loading.defaultProps = {
-  label: 'Loading...',
-  className: '',
-};
-
 export default Loading;

components/Select.tsx

@@ -3,14 +3,13 @@ import FormControl from '@mui/material/FormControl';
 import FormHelperText from '@mui/material/FormHelperText';
 import InputLabel from '@mui/material/InputLabel';
 import MaterialSelect from '@mui/material/Select';
-import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
 import { Control, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { errorMessage } from '../util/validator';
 
 interface SelectProps {
-  defaultValue: unknown;
+  defaultValue?: unknown;
   control: Control<any>;
   name: string;
   placeholder: string;
@@ -68,27 +67,4 @@ const Select = ({
   );
 };
 
-Select.propTypes = {
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      value: PropTypes.string,
-    })
-  ).isRequired,
-  errors: PropTypes.shape({
-    message: PropTypes.string,
-    type: PropTypes.string,
-  }),
-  name: PropTypes.string.isRequired,
-  control: PropTypes.object.isRequired,
-  placeholder: PropTypes.string,
-  defaultValue: PropTypes.string,
-};
-
-Select.defaultProps = {
-  errors: null,
-  placeholder: '',
-  defaultValue: '',
-};
-
 export default Select;

components/Success.tsx

@@ -2,12 +2,16 @@ import cn from 'classnames';
 import CheckCircle from './Images/CheckCircle';
 
 type Props = {
-  label: string | undefined | null;
-  color: string;
-  className: string;
+  label?: string;
+  color?: string;
+  className?: string;
 };
 
-const Success = ({ label, color, className }: Props) => {
+const Success = ({
+  label = 'Success',
+  color = '#1B66D6',
+  className,
+}: Props) => {
   return (
     <div className={cn('success-div p-10', className)}>
       <div className="text-center">
@@ -26,10 +30,4 @@ const Success = ({ label, color, className }: Props) => {
   );
 };
 
-Success.defaultProps = {
-  label: 'Success',
-  color: '#1B66D6',
-  className: '',
-};
-
 export default Success;