SST-57 Updated client dependencies to latest where possible. Added St…

…ripe JS libraries

client-html/package.json

@@ -14,101 +14,97 @@
   },
   "devDependencies": {
     "@swc/cli": "^0.5.2",
-    "@swc/core": "^1.9.3",
-    "@swc/jest": "^0.2.24",
-    "@testing-library/dom": "^8.17.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.0.0",
-    "@types/lodash.debounce": "4.0.7",
-    "@types/lodash.isempty": "4.4.7",
-    "@types/lodash.isequal": "4.5.6",
-    "@types/react": "^18.0.18",
-    "@types/react-dom": "18.0.6",
+    "@swc/core": "^1.10.1",
+    "@swc/jest": "^0.2.37",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.14",
+    "@types/lodash.debounce": "4.0.9",
+    "@types/lodash.isempty": "4.4.9",
+    "@types/lodash.isequal": "4.5.8",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "19.0.2",
     "@types/react-redux": "7.*",
     "@types/react-router-dom": "5.3.3",
-    "@types/react-window": "^1.8.5",
+    "@types/react-window": "^1.8.8",
     "@types/recharts": "1.*",
     "@types/redux-form": "8.*",
     "@types/webpack": "5.*",
-    "@types/webpack-env": "1.18.0",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.6.0",
-    "ajv": "^7.2.4",
+    "@types/webpack-env": "1.18.5",
+    "ajv": "^8.17.1",
     "antlr4ts-cli": "0.5.0-alpha.4",
     "clean-webpack-plugin": "4.0.0",
-    "compression-webpack-plugin": "10.0.0",
-    "css-loader": "6.7.1",
+    "compression-webpack-plugin": "11.1.0",
+    "css-loader": "7.1.2",
     "eslint": "^8.48.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-import-resolver-typescript": "^3.6.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "6.*",
-    "fork-ts-checker-webpack-plugin": "7.2.13",
+    "fork-ts-checker-webpack-plugin": "9.0.2",
     "html-webpack-plugin": "5.*",
-    "jest": "^29.0.2",
-    "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^29.0.2",
-    "jest-junit": "^14.0.1",
+    "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-junit": "^16.0.0",
     "jest-transform-stub": "^2.0.0",
-    "mini-css-extract-plugin": "2.6.1",
+    "mini-css-extract-plugin": "2.9.2",
     "raw-loader": "4.*",
     "redux-logger": "3.*",
-    "source-map-loader": "^4.0.1",
-    "style-loader": "^3.3.3",
+    "source-map-loader": "^5.0.0",
+    "style-loader": "^4.0.0",
     "swc-loader": "^0.2.6",
-    "terser-webpack-plugin": "5.3.6",
-    "tsconfig-paths-webpack-plugin": "4.0.0",
-    "typescript": "^5.6.2",
+    "terser-webpack-plugin": "5.3.11",
+    "tsconfig-paths-webpack-plugin": "4.2.0",
+    "typescript": "^5.7.2",
     "webpack-bugsnag-plugins": "1.*",
     "webpack-dev-server": "^5.1.0",
     "webpack-pwa-manifest": "4.*",
     "workbox-webpack-plugin": "^7.3.0",
     "zip-webpack-plugin": "4.*"
   },
   "dependencies": {
-    "@atlaskit/tree": "^8.11.0",
-    "@bugsnag/js": "7.17.0",
-    "@bugsnag/plugin-react": "7.17.0",
-    "@mui/x-tree-view": "^7.18.0",
+    "@atlaskit/tree": "^8.12.0",
+    "@bugsnag/js": "8.1.2",
+    "@bugsnag/plugin-react": "8.1.1",
+    "@mui/x-tree-view": "^7.23.2",
     "@react-loadable/revised": "^1.5.0",
-    "@tanstack/react-table": "^8.7.6",
+    "@stripe/react-stripe-js": "^3.1.1",
+    "@stripe/stripe-js": "^5.3.0",
+    "@tanstack/react-table": "^8.20.6",
     "antlr4-c3": "2.2.1",
     "antlr4ts": "0.5.0-alpha.4",
-    "assert": "^2.0.0",
-    "async": "^3.2.4",
-    "axios": "^1.7.7",
+    "assert": "^2.1.0",
+    "async": "^3.2.6",
+    "axios": "^1.7.9",
     "axios-mock-adapter": "1.21.2",
     "d3": "v3",
     "decimal.js-light": "2.*",
     "eslint-import-resolver-webpack": "0.*",
-    "ish-ui": "^1.1.2",
+    "ish-ui": "^1.1.4",
     "lodash.debounce": "4.*",
     "lodash.isempty": "4.*",
     "lodash.isequal": "4.*",
     "qrcode.react": "3.1.0",
     "react-awesome-gravatar": "2.*",
     "react-beautiful-dnd-next": "^11.0.5",
     "react-pose": "4.*",
-    "react-redux": "^8.0.0",
+    "react-redux": "^9.2.0",
     "react-router": "5.*",
     "react-router-dom": "5.*",
     "react-virtualized-auto-sizer": "1.*",
-    "recharts": "^2.1.14",
+    "recharts": "^2.15.0",
     "redux-form": "^8.3.10",
     "redux-observable": "^2.0.0",
     "rxjs": "^7.8.1",
-    "uuid": "8.*",
+    "uuid": "11.*",
     "webpack-cli": "^5.1.4"
   },
   "overrides": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "webpack": "^5.95.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-redux": "^9.2.0",
+    "redux": "^5.0.1"
   },
   "jest": {
     "testEnvironment": "jsdom",

client-html/src/js/common/components/dialog/RouteChangeConfirm.tsx

@@ -6,17 +6,17 @@
  *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
  */
 
-import ErrorOutline from "@mui/icons-material/ErrorOutline";
-import Button from "@mui/material/Button";
-import { ShowConfirmCaller } from "ish-ui";
-import * as React from "react";
-import { useEffect, useRef } from "react";
-import { connect } from "react-redux";
-import { RouteComponentProps, withRouter } from "react-router-dom";
-import { Dispatch } from "redux";
-import { isInvalid, submit } from "redux-form";
-import { State } from "../../../reducers/state";
-import { closeConfirm, setNextLocation, showConfirm } from "../../actions";
+import ErrorOutline from '@mui/icons-material/ErrorOutline';
+import Button from '@mui/material/Button';
+import { ShowConfirmCaller } from 'ish-ui';
+import * as React from 'react';
+import { useEffect, useRef } from 'react';
+import { connect } from 'react-redux';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { Dispatch } from 'redux';
+import { isInvalid, submit } from 'redux-form';
+import { State } from '../../../reducers/state';
+import { closeConfirm, setNextLocation, showConfirm } from '../../actions';
 
 interface Props {
   when: boolean;
@@ -48,7 +48,7 @@ const RouteChangeConfirm = (
   }: Props & RouteComponentProps
 ) => {
 
-  const unblock = useRef<any>();
+  const unblock = useRef<any>(undefined);
 
   function onCancel() {
     setNextLocation("");

client-html/src/js/common/components/form/FormSubmitButton.tsx

@@ -6,12 +6,12 @@
 *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
 */
 
-import ErrorOutline from "@mui/icons-material/ErrorOutline";
-import { Collapse } from "@mui/material";
-import Button from "@mui/material/Button";
-import React, { useEffect, useRef } from "react";
-import { IS_JEST } from "../../../constants/EnvironmentConstants";
-import { useAppSelector } from "../../utils/hooks";
+import ErrorOutline from '@mui/icons-material/ErrorOutline';
+import { Collapse } from '@mui/material';
+import Button from '@mui/material/Button';
+import React, { useEffect, useRef } from 'react';
+import { IS_JEST } from '../../../constants/EnvironmentConstants';
+import { useAppSelector } from '../../utils/hooks';
 
 interface Props {
   disabled: boolean;
@@ -29,7 +29,7 @@ const FormSubmitButton = React.memo<Props>(({
                                               text = "Save",
                                               className,
                                             }) => {
-  const ref = useRef<HTMLButtonElement>();
+  const ref = useRef<HTMLButtonElement>(undefined);
   const defaultPrevented = useRef(false);
 
   const isFieldProcessing = useAppSelector(state => Boolean(Object.keys(state.fieldProcessing).length));

client-html/src/js/common/components/form/ToogleCheckbox.tsx

@@ -37,7 +37,7 @@ const useStyles = makeAppStyles<void, 'button' | 'checked'>()((theme, p, classes
 export const ToogleCheckbox = ({
  input, chackedLabel, uncheckedLabel, className, disabled
 }: Props) => {
-  const inputRef = useRef<HTMLInputElement>();
+  const inputRef = useRef<HTMLInputElement>(undefined);
 
   const onClick = useCallback(() => {
     inputRef.current.click();

client-html/src/js/common/components/form/availabilityComponent/AvailabilityItem.tsx

@@ -3,19 +3,20 @@
  * No copying or use of this code is allowed without permission in writing from ish.
  */
 
-import { Holiday, RepeatEndEnum, RepeatEnum } from "@api/model";
-import { FormControlLabel, Grid } from "@mui/material";
-import Button from "@mui/material/Button";
-import Card from "@mui/material/Card";
-import clsx from "clsx";
-import { format } from "date-fns";
-import { normalizeNumberToPositive, StyledCheckbox, validateMinMaxDate, YYYY_MM_DD_MINUSED } from "ish-ui";
-import React, { useCallback, useMemo } from "react";
-import { Dispatch } from "redux";
-import { change } from "redux-form";
-import { repeatEndListItems, repeatListItems } from "../../../../containers/preferences/containers/holidays/ListItems";
-import FormField from "../formFields/FormField";
-import AvailabilityNextHint from "./AvailabilityNextHint";
+import { Holiday, RepeatEndEnum, RepeatEnum } from '@api/model';
+import { FormControlLabel, Grid } from '@mui/material';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import clsx from 'clsx';
+import { format } from 'date-fns';
+import { normalizeNumberToPositive, StyledCheckbox, validateMinMaxDate, YYYY_MM_DD_MINUSED } from 'ish-ui';
+import React, { useCallback, useMemo } from 'react';
+import { Dispatch } from 'redux';
+import { change } from 'redux-form';
+import { repeatEndListItems, repeatListItems } from '../../../../containers/preferences/containers/holidays/ListItems';
+import { IAction } from '../../../actions/IshAction';
+import FormField from '../formFields/FormField';
+import AvailabilityNextHint from './AvailabilityNextHint';
 
 interface Props {
   fieldName: string;
@@ -27,7 +28,7 @@ interface Props {
   item: string;
   field: Holiday;
   onDelete: any;
-  dispatch: Dispatch;
+  dispatch: Dispatch<IAction>
   timezone?: string;
 }
 

client-html/src/js/common/components/form/documents/DocumentShare.tsx

@@ -30,6 +30,7 @@ import { change } from 'redux-form';
 import { mapEntityDisplayName } from '../../../../containers/entities/common/utils';
 import { DocumentShareOption } from '../../../../model/entities/Document';
 import { showMessage } from '../../../actions';
+import { IAction } from '../../../actions/IshAction';
 import {
   getAvailableOptions,
   getDocumentShareSummary,
@@ -65,7 +66,7 @@ const useStyles = makeAppStyles()(theme => ({
 interface Props {
   validUrl?: string;
   form?: string;
-  dispatch?: Dispatch;
+  dispatch?: Dispatch<IAction>;
   documentSource?: Document;
   readOnly?: boolean;
   itemPath?: string;
@@ -176,7 +177,7 @@ const DocumentShare: React.FC<Props> = ({
     };
   }, []);
 
-  const linkInput = useRef<any>();
+  const linkInput = useRef<any>(undefined);
 
   const { classes } = useStyles();
 

client-html/src/js/common/components/form/documents/DocumentsRenderer.tsx

@@ -17,6 +17,7 @@ import { withStyles } from 'tss-react/mui';
 import { getEntityTags } from '../../../../containers/tags/actions';
 import { EntityName } from '../../../../model/entities/common';
 import { State } from '../../../../reducers/state';
+import { IAction } from '../../../actions/IshAction';
 import DocumentItem from '../../documents/DocumentItem';
 import {
   clearEditingDocument,
@@ -62,7 +63,7 @@ interface DocumentsRendererProps {
   xsGrid: any;
   mdGrid: any;
   lgGrid: any;
-  dispatch: Dispatch;
+  dispatch: Dispatch<IAction>
   entity: EntityName;
   setDocumentFile: any;
   getDocumentTags: any;

client-html/src/js/common/components/form/documents/components/dialogs/DocumentAddDialog.tsx

@@ -131,8 +131,8 @@ const DocumentAddDialog = (
     searchExistingDocsDisabled
   }: OwnProps & StateProps & DispatchProps) => {
 
-  const searchContainerNode = useRef<HTMLDivElement>();
-  const dialogRef = useRef<HTMLDivElement>();
+  const searchContainerNode = useRef<HTMLDivElement>(undefined);
+  const dialogRef = useRef<HTMLDivElement>(undefined);
 
   const [searchValue, setSearchValue] = useState("");
 

client-html/src/js/common/components/form/formFields/FormEditor.tsx

@@ -226,6 +226,7 @@ const EditorResolver = ({ contentMode, draftContent, onChange, wysiwygRef }) =>
           value={draftContent}
           onChange={onChange}
           mode={contentMode}
+          height="250px"
         />
       );
     }
@@ -253,7 +254,7 @@ const FormEditor: React.FC<Props & WrappedFieldProps> = (
     className
   }
 ) => {
-  const wysiwygRef = useRef<any>();
+  const wysiwygRef = useRef<any>(undefined);
 
   const [contentMode, setContentMode] = useState(getContentMarker(value));
   const [isEditing, setIsEditing] = useState(false);

client-html/src/js/common/components/layout/expandable/ExpandableContainer.tsx

@@ -11,7 +11,6 @@ import Typography from '@mui/material/Typography';
 import clsx from 'clsx';
 import { AddButton, AppTheme } from 'ish-ui';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { findDOMNode } from 'react-dom';
 import { FormErrors } from 'redux-form';
 import { withStyles } from 'tss-react/mui';
 import { IS_JEST } from '../../../../constants/EnvironmentConstants';
@@ -69,9 +68,9 @@ const ExpandableContainer: React.FC<Props> = ({
 }) => {
   const [hasErrors, setHasErrors] = useState(false);
 
-  const childrenRef = useRef<HTMLDivElement>();
+  const childrenRef = useRef<HTMLDivElement>(undefined);
 
-  const headerRef = useRef<any>();
+  const headerRef = useRef<any>(undefined);
 
   const isExpanded = useMemo(() => expanded.includes(index), [expanded, index]);
 
@@ -102,7 +101,7 @@ const ExpandableContainer: React.FC<Props> = ({
 
   useEffect(() => {
     if (formErrors && childrenRef.current) {
-      const domNode = findDOMNode(childrenRef.current) as HTMLDivElement;
+      const domNode = childrenRef.current;
 
       let childrenError = false;
 

client-html/src/js/common/components/layout/swipeable-sidebar/SwipeableSidebar.tsx

@@ -26,6 +26,7 @@ import SendMessageEditView from '../../../../containers/entities/messages/compon
 import { DashboardItem } from '../../../../model/dashboard';
 import { State } from '../../../../reducers/state';
 import { checkPermissions, getOnDemandScripts, getUserPreferences, setUserPreference } from '../../../actions';
+import { IAction } from '../../../actions/IshAction';
 import { getEntityDisplayName } from '../../../utils/getEntityDisplayName';
 import { useAppSelector } from '../../../utils/hooks';
 import navigation from '../../navigation/data/navigation.json';
@@ -129,7 +130,7 @@ interface Props {
   getScriptsPermissions: any;
   scripts: any;
   hasScriptsPermissions: any;
-  dispatch?: Dispatch;
+  dispatch?: Dispatch<IAction>;
   selected?: number | string;
   setSelected?: AnyArgFunction;
   listEntity?: string;