upgrades

.eslintrc

@@ -116,7 +116,9 @@
     {
       "files": "**/*.{ts,tsx}",
       "rules": {
-        "react/require-default-props": "off"
+        "react/require-default-props": "off",
+        "no-shadow": "off",
+        "@typescript-eslint/no-shadow": "error",
       }
     }
   ],

.gitignore

@@ -25,6 +25,7 @@ lib
 
 # Ignore Jetbrains IDE settings
 /.idea
+/.vscode
 
 npm-debug.log*
 yarn-debug.log*

.node-version

@@ -1 +1 @@
-18.18.2
+20.12.1

package.json

@@ -19,8 +19,6 @@
     "@tiptap/pm": "^2.0.3",
     "@tiptap/react": "^2.0.3",
     "@tiptap/suggestion": "^2.1.13",
-    "@typescript-eslint/eslint-plugin": "^2",
-    "@typescript-eslint/parser": "^2",
     "react-bootstrap": "^2.5.0",
     "react-currency-input-field": "^3.6.10",
     "react-loading-skeleton": "^3.1.0",
@@ -70,12 +68,12 @@
     "bootstrap": "5.1",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
-    "react": "^16.12.0",
+    "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.0.2",
-    "react-dom": "^16.12.0",
+    "react-dom": "^18.2.0",
     "react-modal": "^3.12.1",
     "react-popper": "^2.2.3",
-    "react-tracking": "^8.1.0"
+    "react-tracking": "^9.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
@@ -109,13 +107,16 @@
     "@storybook/addons": "^7.6.17",
     "@storybook/react": "^8.0.5",
     "@storybook/react-webpack5": "^8.0.5",
+    "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^14.2.2",
     "@testing-library/react-hooks": "^3.2.1",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.5",
     "@types/react-dom": "^16.0.0",
     "@types/testing-library__jest-dom": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.21",
+    "@typescript-eslint/parser": "^6.21",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^27.4.6",
     "babel-loader": "^8.0.6",
@@ -128,27 +129,26 @@
     "css-loader": "^6.8.1",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-react-app": "^5.2.1",
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-flowtype": "^4.7.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^2.5.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-utils": "^1.4.3",
     "file-loader": "^6.2.0",
     "jest": "^27.4.6",
     "jest-css-modules-transform": "^4.3.0",
     "node-sass": "^8.0.0",
     "nodemon": "^3.0.1",
     "prop-types": "^15.6.1",
-    "react": "^18.0.2",
+    "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.0.2",
-    "react-dom": "^18.0.2",
+    "react-dom": "^18.2.0",
     "react-modal": "^3.12.1",
     "react-popper": "^2.2.3",
     "react-test-renderer": "^18.0.2",
-    "react-tracking": "8.1.0",
+    "react-tracking": "^9.3",
     "sass-loader": "^10.4.1",
     "storybook": "^8.0.5",
     "storybook-addon-designs": "6.3.1",
@@ -161,7 +161,6 @@
     "@babel/helper-create-regexp-features-plugin": "^7.22.15",
     "istanbul-lib-instrument": "^6.0.0",
     "jackspeak": "2.1.1",
-    "make-dir": "4.0.0",
     "normalize-package-data": "^3.0.0",
     "semver": "^7.5.3"
   },
@@ -171,7 +170,7 @@
     "scss"
   ],
   "engines": {
-    "node": ">= 16 < 19",
+    "node": ">= 20",
     "yarn": "^ 1.22"
   },
   "main": "lib/index",
@@ -193,5 +192,9 @@
   },
   "readme": "https://github.com/user-interviews/ui-design-system#readme",
   "homepage": "https://github.com/user-interviews/ui-design-system",
-  "_id": "@user-interviews/[email protected]"
-}
+  "_id": "@user-interviews/[email protected]",
+  "volta": {
+    "node": "20.12.1",
+    "yarn": "1.22.21"
+  }
+}

src/InputLabel/InputLabel.jsx

@@ -8,7 +8,6 @@ import 'scss/forms/input_label.scss';
 
 const InputLabel = ({
   className,
-  elementType,
   labelHtmlFor,
   text,
   required,
@@ -38,7 +37,6 @@ const InputLabel = ({
 
 InputLabel.propTypes = {
   className: PropTypes.string,
-  elementType: PropTypes.string,
   labelHelperText: PropTypes.string,
   labelHtmlFor: PropTypes.string,
   required: PropTypes.bool,
@@ -48,7 +46,6 @@ InputLabel.propTypes = {
 
 InputLabel.defaultProps = {
   className: '',
-  elementType: undefined,
   labelHelperText: undefined,
   labelHtmlFor: '',
   required: false,

src/InputLegend/InputLegend.jsx

@@ -9,7 +9,6 @@ import 'scss/forms/input_label.scss';
 
 const InputLegend = ({
   className,
-  elementType,
   labelHtmlFor,
   text,
   required,
@@ -39,7 +38,6 @@ const InputLegend = ({
 
 InputLegend.propTypes = {
   className: PropTypes.string,
-  elementType: PropTypes.string,
   labelHelperText: PropTypes.string,
   labelHtmlFor: PropTypes.string,
   required: PropTypes.bool,
@@ -49,7 +47,6 @@ InputLegend.propTypes = {
 
 InputLegend.defaultProps = {
   className: '',
-  elementType: undefined,
   labelHelperText: undefined,
   labelHtmlFor: '',
   required: false,

src/Layout/SidebarView/SidebarView.jsx

@@ -145,7 +145,6 @@ export default class SidebarView extends Component {
     const sidebarClassName = classNames(
       this.props.className,
       {
-        // eslint-disable-next-line @typescript-eslint/camelcase
         SidebarView__sidebar: true,
         'SidebarView__sidebar--open': this.props.isSidebarOpen,
         'SidebarView__sidebar--openable': this.props.isSidebarOpenable,

src/RichTextEditor/RichTextEditor.tsx

@@ -1,10 +1,11 @@
 import type { IOptions } from 'sanitize-html';
-import type { AriaAttributes } from 'react';
 import type { Extension, Node as TipTapNode, Mark } from '@tiptap/core';
 
 import './RichTextEditor.scss';
 
-import React, { forwardRef, type ForwardedRef, useImperativeHandle } from 'react';
+import React, {
+ forwardRef, useImperativeHandle, type AriaAttributes, type ForwardedRef,
+} from 'react';
 
 import classNames from 'classnames';