Merge branch 'feature/SPASDK-212' into 'development'

SPASDK-212 Upgrade node version to 18

Closes SPASDK-212

See merge request engineering/xm/spa-sdk!156

Jenkinsfile

@@ -18,7 +18,7 @@ pipeline {
   agent {
     docker {
       label 'docker'
-      image 'node:16'
+      image 'node:18'
       args '-v  /etc/passwd:/etc/passwd'
     }
   }

examples/angular/yalc.lock

@@ -6,7 +6,7 @@
       "file": true
     },
     "@bloomreach/ng-sdk": {
-      "signature": "6a30090744d7375070387047e7127911",
+      "signature": "7d1eebb8b3918274fc98186ca47fafbe",
       "file": true
     }
   }

examples/react/package.json

@@ -6,17 +6,17 @@
   "dependencies": {
     "@bloomreach/react-sdk": "file:.yalc/@bloomreach/react-sdk",
     "@bloomreach/spa-sdk": "file:.yalc/@bloomreach/spa-sdk",
-    "axios": "0.26.1",
+    "axios": "1.6.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.4.2",
-    "sanitize-html": "2.10.0"
+    "sanitize-html": "2.13.0"
   },
   "scripts": {
-    "build": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts build",
+    "build": "cross-env GENERATE_SOURCEMAP=false SKIP_PREFLIGHT_CHECK=true react-scripts build",
     "lint": "eslint --ext js,ts,tsx src",
     "start": "serve build -sn",
-    "dev": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts start",
+    "dev": "cross-env GENERATE_SOURCEMAP=false SKIP_PREFLIGHT_CHECK=true react-scripts start",
     "yalcAdd": "yalc add @bloomreach/spa-sdk @bloomreach/react-sdk",
     "yalcRetreat": "yalc retreat --all",
     "yalcRestore": "yalc restore --all"
@@ -37,14 +37,16 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@bloomreach/eslint-config-react": "1.2.0",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.8",
     "@types/react-router-dom": "5.3.3",
+    "@types/sanitize-html": "2.11.0",
     "cross-env": "7.0.3",
     "eslint": "7.32.0",
     "eslint-import-resolver-typescript": "3.5.5",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "serve": "14.2.0",
     "typescript": "4.1.6",
     "yalc": "1.0.0-pre.53"

examples/react/src/components/Menu.tsx

@@ -56,7 +56,7 @@ export function Menu(): JSX.Element | null {
   }
 
   return (
-    <ul className={`navbar-nav col-12 ${page.isPreview() ? 'has-edit-button' : ''}`}>
+    <ul className={`navbar-nav col-12 ${page?.isPreview() ? 'has-edit-button' : ''}`}>
       <BrManageMenuButton menu={menu} />
       {menu.getItems().map((item, index) => (
         // eslint-disable-next-line react/no-array-index-key

examples/react/src/components/NewsList.tsx

@@ -32,7 +32,7 @@ export function NewsListItem({ item }: NewsListItemProps): JSX.Element {
       <div className="card-body">
         {title && (
           <h2 className="card-title">
-            <Link to={item.getUrl()}>{title}</Link>
+            <Link to={item.getUrl() || ''}>{title}</Link>
           </h2>
         )}
         {author && <div className="card-subtitle mb-3 text-muted">{author}</div>}
@@ -102,7 +102,7 @@ export function NewsList({ component, page }: BrProps): JSX.Element | null {
     <div>
       {pageable.items.map((reference, key) => (
         // eslint-disable-next-line react/no-array-index-key
-        <NewsListItem key={key} item={page.getContent<Document>(reference)} />
+        <NewsListItem key={key} item={page.getContent<Document>(reference) as Document} />
       ))}
       {page.isPreview() && (
         <div className="has-edit-button float-right">

examples/react/src/index.tsx

@@ -21,7 +21,7 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import './index.css';
 import App from './App';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root') as Element);
 
 root.render(
   <BrowserRouter>