Production Update 24.8.2023

Production Update 24.8.2023

.eslintrc.js

@@ -1,5 +1,10 @@
 module.exports = {
-  extends: ['airbnb-typescript-prettier'],
+  root: true,
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: './tsconfig.eslint.json',
@@ -10,7 +15,7 @@ module.exports = {
     ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
     sourceType: 'module', // Allows for the use of imports
   },
-  plugins: ['jest'],
+  plugins: ['jest', '@typescript-eslint', 'react-hooks'],
   env: { 'jest/globals': true },
   rules: {
     'no-use-before-define': 'off',
@@ -21,63 +26,24 @@ module.exports = {
     'no-shadow': 'off',
     '@typescript-eslint/no-shadow': 'error',
     'object-curly-spacing': ['warn', 'always'],
-    'react/jsx-indent': [2, 2],
     'react/jsx-props-no-spreading': 'off',
     'import/prefer-default-export': 'off',
     'react-hooks/exhaustive-deps': 'off',
     'no-underscore-dangle': ['error', { allow: ['__typename', '_env_'] }],
-    'jsx-a11y/label-has-associated-control': [
-      'warn',
-      {
-        required: {
-          some: ['nesting', 'id'],
-        },
-      },
-    ],
-    'jsx-a11y/label-has-for': [
-      'warn',
-      {
-        required: {
-          some: ['nesting', 'id'],
-        },
-      },
-    ],
-    'import/no-extraneous-dependencies': [
-      'error',
-      {
-        devDependencies: [
-          '**/setupTests.ts',
-          '**/*.test.tsx',
-          '**/testUtils/*.tsx',
-          '**/*.spec.ts',
-        ],
-      },
-    ],
     'no-param-reassign': [
       'error',
       {
         props: true,
         ignorePropertyModificationsFor: ['state'],
       },
     ],
-    'prettier/prettier': [
-      'error',
-      {
-        endOfLine: 'auto',
-      },
-    ],
   },
   settings: {
     react: {
       version: 'detect',
     },
   },
   overrides: [
-    {
-      files: ['*.js'],
-      parser: 'babel-eslint',
-      rules: {},
-    },
     {
       files: ['**/*.test.tsx', '**/*.test.ts'],
       env: {

.github/workflows/ci-dev.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '14.x'
+          node-version: '16.x'
       - run: yarn --frozen-lockfile
       - run: yarn lint
       - run: yarn test

.github/workflows/ci-main.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '14.x'
+          node-version: '16.x'
       - run: yarn --frozen-lockfile
       - run: yarn lint
       - run: yarn test

.github/workflows/ci-pr.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '14.x'
+          node-version: '16.x'
       - run: yarn --frozen-lockfile
       - run: yarn lint
       - run: yarn test

.nvmrc

@@ -1 +1 @@
-v14.20.0
+v16.15.0

Dockerfile-local

@@ -1,5 +1,5 @@
-FROM node:14-alpine as staticbuilder
-ADD --chown=node:node . /builder/
+FROM node:16-alpine as staticbuilder
+COPY . /builder/
 WORKDIR /builder
 RUN yarn && yarn cache clean --force
 RUN REACT_APP_DISABLE_SENTRY=1 yarn build

README.md

@@ -1,8 +1,8 @@
-# Haitaton Beta UI
+# Haitaton UI
 
 ## Requirements
 
-- Node 12.x
+- Node 16.x
 - Yarn
 - Git
 - Docker

cypress/support/commands.ts

@@ -24,7 +24,6 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
-// eslint-disable-next-line import/no-extraneous-dependencies
 import 'cypress-localstorage-commands';
 
 Cypress.Commands.add('mapDrawButton', (name) => cy.get(`[data-testid=draw-control-${name}]`));

package.json

@@ -12,8 +12,8 @@
     "serve-local": "ws --spa index.html -d build -p 3001 --rewrite '/api/(.*) -> http://localhost:3000/$1' --rewrite '/auth/(.*) -> http://localhost:3030/auth/$1'",
     "build-and-serve": "yarn run build && yarn run serve",
     "update-runtime-env": "ts-node -P ./scripts/tsconfig.json --files scripts/update-runtime-env.ts",
-    "test": "TEST=true yarn run update-runtime-env && DEBUG_PRINT_LIMIT=50000 react-scripts test --env=jest-environment-jsdom-sixteen",
-    "testCI": "CI=true react-scripts test --env=jest-environment-jsdom-sixteen",
+    "test": "TEST=true yarn run update-runtime-env && DEBUG_PRINT_LIMIT=50000 react-scripts test",
+    "testCI": "CI=true react-scripts test",
     "eject": "react-scripts eject",
     "type-check": "tsc --pretty --noEmit",
     "format": "prettier --write",
@@ -28,13 +28,13 @@
     "locales:import": "ts-node -P ./scripts/tsconfig.json ./scripts/translate-excel-to-json.ts"
   },
   "dependencies": {
-    "@axe-core/react": "^4.1.1",
-    "@babel/runtime": "^7.21.0",
-    "@chakra-ui/react": "^1.0.1",
-    "@chakra-ui/theme-tools": "^1.0.1",
-    "@emotion/core": "^10.0.35",
-    "@emotion/react": "^11.1.1",
-    "@emotion/styled": "^10.0.27",
+    "@axe-core/react": "^4.7.3",
+    "@babel/runtime": "^7.22.6",
+    "@chakra-ui/react": "^2.8.0",
+    "@chakra-ui/theme-tools": "^2.1.0",
+    "@emotion/core": "^11.0.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^2.9.8",
     "@popperjs/core": "^2.5.4",
     "@reduxjs/toolkit": "^1.5.0",
@@ -47,9 +47,9 @@
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/ol": "^6.4.2",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-helmet": "^6.1.0",
+    "@types/react": "^18.2.18",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-helmet": "^6.1.6",
     "@types/react-redux": "^7.1.9",
     "@types/react-table": "^7.7.12",
     "@types/turf": "^3.5.32",
@@ -60,12 +60,11 @@
     "cypress-axe": "^0.12.2",
     "date-fns": "^2.16.1",
     "emotion-theming": "^10.0.27",
-    "eslint-config-airbnb-typescript-prettier": "^4.1.0",
-    "framer-motion": "^3.3.0",
+    "framer-motion": "^10.15.0",
     "geojson": "^0.5.0",
-    "hds-core": "^2.13.0",
-    "hds-design-tokens": "^2.13.0",
-    "hds-react": "^2.13.0",
+    "hds-core": "^2.16.0",
+    "hds-design-tokens": "^2.16.0",
+    "hds-react": "^2.16.0",
     "http-proxy-middleware": "^1.0.6",
     "i18next": "^19.8.2",
     "i18next-browser-languagedetector": "^7.0.1",
@@ -75,45 +74,44 @@
     "local-web-server": "^4.2.1",
     "lodash": "^4.17.21",
     "msw": "^0.49.0",
-    "oidc-client": "^1.10.1",
+    "oidc-client": "^1.11.5",
     "ol": "^7.4.0",
     "proj4": "^2.6.3",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.35.0",
-    "react-i18next": "^11.7.3",
+    "react-i18next": "^12.0.0",
     "react-query": "^3.39.2",
-    "react-redux": "^7.2.1",
+    "react-redux": "^8.0.5",
     "react-router-dom": "^6.13.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.1",
     "react-table": "^7.8.0",
     "redux-thunk": "^2.3.0",
-    "sass": "^1.54.0",
+    "sass": "^1.64.2",
     "ts-enum-util": "^4.0.2",
     "typescript": "^4.8.3",
     "yup": "^0.32.5"
   },
   "devDependencies": {
-    "@testing-library/dom": "^7.24.2",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.0.4",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/proj4": "^2.5.0",
-    "@typescript-eslint/eslint-plugin": "^4.14.0",
-    "@typescript-eslint/parser": "^4.14.0",
-    "cypress-localstorage-commands": "^1.4.1",
-    "eslint-config-airbnb-typescript": "^12.0.0",
-    "eslint-import-resolver-typescript": "^2.3.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
+    "cypress-localstorage-commands": "^2.2.3",
+    "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-cypress": "^2.11.2",
-    "eslint-plugin-jest": "^24.1.5",
+    "eslint-plugin-jest": "^27.2.3",
     "husky": "^4.3.0",
     "jest-canvas-mock": "^2.3.1",
-    "jest-environment-jsdom": "^26.0.1",
-    "jest-environment-jsdom-sixteen": "^1.0.3",
-    "lint-staged": "^10.3.0",
-    "prettier": "^2.2.1",
-    "prettier-eslint": "^12.0.0",
+    "jest-environment-jsdom": "^29.6.2",
+    "lint-staged": "^13.2.3",
+    "prettier": "^3.0.1",
+    "prettier-eslint": "^15.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "start-server-and-test": "^1.12.0",
     "stylelint": "^13.7.2",

src/common/components/HDSConfirmationDialog/ConfirmationDialog.tsx

@@ -20,7 +20,7 @@ type Props = {
   isLoading?: boolean;
 };
 
-const ConfirmationDialog: React.FC<Props> = ({
+const ConfirmationDialog: React.FC<React.PropsWithChildren<Props>> = ({
   title,
   description,
   isOpen,

src/common/components/Linkbox/Linkbox.tsx

@@ -5,7 +5,12 @@ import { Linkbox as HDSLinkbox, LinkboxProps } from 'hds-react';
 /*
  * Wrapper for HDS Linkbox component that works with React Router
  */
-const Linkbox: React.FC<LinkboxProps> = ({ onClick, href: to, external, ...rest }) => {
+const Linkbox: React.FC<React.PropsWithChildren<LinkboxProps>> = ({
+  onClick,
+  href: to,
+  external,
+  ...rest
+}) => {
   const href = useHref(to || '');
   const handleClick = useLinkClickHandler(to || '');
 

src/common/components/app/App.tsx

@@ -15,7 +15,7 @@ import '../../../assets/styles/reset.css';
 
 const queryClient = new QueryClient();
 
-const App: React.FC = () => (
+const App: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Router>
     <Provider store={store}>
       <QueryClientProvider client={queryClient}>

src/common/components/app/Layout.tsx

@@ -9,7 +9,7 @@ type Props = {
   children: React.ReactNode;
 };
 
-const Layout: React.FC<Props> = ({ children }) => {
+const Layout: React.FC<React.PropsWithChildren<Props>> = ({ children }) => {
   return (
     <App>
       <div className={styles.layoutContainer}>

src/common/components/app/app.scss

@@ -32,11 +32,6 @@ body {
   min-height: 100vh;
 }
 
-.chakra-modal__overlay {
-  background: #333;
-  opacity: 0.2;
-}
-
 #haitaton-app {
   overflow: initial !important;
 }

src/common/components/app/theme.ts

@@ -1,5 +1,4 @@
 import { extendTheme } from '@chakra-ui/react';
-import { createBreakpoints } from '@chakra-ui/theme-tools';
 
 /* export const space = {
   ...theme.space,
@@ -17,34 +16,16 @@ import { createBreakpoints } from '@chakra-ui/theme-tools';
   '5xl': '4.5rem',
 }; */
 
-const breakpoints = createBreakpoints({
+const breakpoints = {
   sm: '320px',
   md: '576px',
   lg: '768px',
   xl: '992px',
   xxl: '1248px',
-});
+};
 
 const customTheme = extendTheme({
   breakpoints,
-  components: {
-    Drawer: {
-      variants: {
-        // https://github.com/chakra-ui/chakra-ui/issues/2399
-        alwaysOpen: {
-          // eslint-disable-next-line
-          // @ts-ignore, false positive
-          parts: ['dialog, dialogContainer'],
-          dialog: {
-            pointerEvents: 'auto',
-          },
-          dialogContainer: {
-            pointerEvents: 'none',
-          },
-        },
-      },
-    },
-  },
 });
 
 export default customTheme;

src/common/components/autocomplete/Autocomplete.tsx

@@ -29,7 +29,7 @@ const findSelected = (options: Option[], defaultValue?: Partial<Option>) =>
       })
     : { label: '', value: null };
 
-const Autocomplete: React.FC<PropTypes> = ({
+const Autocomplete: React.FC<React.PropsWithChildren<PropTypes>> = ({
   id,
   options,
   value,

src/common/components/checkbox/Checkbox.tsx

@@ -10,7 +10,7 @@ type PropTypes = {
   label: string;
   disabled?: boolean;
 };
-const CheckboxComp: React.FC<PropTypes> = (props) => {
+const CheckboxComp: React.FC<React.PropsWithChildren<PropTypes>> = (props) => {
   const { name, id, rules, defaultValue, label, disabled } = props;
   const { control } = useFormContext();
 

src/common/components/confirmationDialog/ConfirmationDialog.tsx

@@ -9,7 +9,7 @@ import ConfirmationDialogUI from './ConfirmationDialogUI';
 
 import './Dialog.styles.scss';
 
-const ConfirmationDialog: React.FC = () => {
+const ConfirmationDialog: React.FC<React.PropsWithChildren<unknown>> = () => {
   const isDialogOpenVal = useSelector(getIsDialogOpen());
   const redirectUrl = useSelector(getRedirectUrl());
   const dispatch = useDispatch();