integrate lighthouse

update some libraries so that the lighthouse imports are recognized
correctly by eslint

.gitignore

@@ -4,3 +4,6 @@ public/.thumbnail
 node_modules
 build
 dist
+
+# only on top level
+package-lock.json

package.json

@@ -8,9 +8,8 @@
     "install-all": "npm i && concurrently npm:install:client npm:install:server",
     "install:client": "cd picture-gallery-client && npm i",
     "install:server": "cd picture-gallery-server && npm i",
-    "start-all": "npm run build:client && concurrently npm:start:client npm:run:server",
+    "start-all": "concurrently npm:run:client npm:run:server",
-    "build:client": "npm run --prefix picture-gallery-client client:build",
+    "run:client": "npm run --prefix picture-gallery-client client:run",
-    "start:client": "npm run --prefix picture-gallery-client client:start",
     "run:server": "npm run --prefix picture-gallery-server server:run",
     "docker:buildImage": "docker build . -t simple-picture-gallery"
   }

picture-gallery-client/package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "picture-gallery-client",
       "version": "0.1.0",
       "dependencies": {
         "@emotion/react": "11.9.0",
@@ -31,7 +32,8 @@
         "react-router-dom": "6.3.0",
         "react-scripts": "5.0.0",
         "typescript": "4.6.3",
-        "web-vitals": "2.1.4"
+        "web-vitals": "2.1.4",
+        "yet-another-react-lightbox": "1.13.3"
       },
       "devDependencies": {
         "@testing-library/jest-dom": "5.16.4",
@@ -16992,6 +16994,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/yet-another-react-lightbox": {
+      "version": "1.13.3",
+      "resolved": "https://artifactory.eksinfra.direct/artifactory/api/npm/allianz-direct-npm-public/yet-another-react-lightbox/-/yet-another-react-lightbox-1.13.3.tgz",
+      "integrity": "sha512-lWQ++7eRgJb9yw5QxgJd5gmHI+3qYYEWVoxPdcGCMvGi/jAIrLEp1je0KA+OEdXxjxyR9HfTBB5EgNky0545Mg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -29032,6 +29047,12 @@
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
     },
+    "yet-another-react-lightbox": {
+      "version": "1.13.3",
+      "resolved": "https://artifactory.eksinfra.direct/artifactory/api/npm/allianz-direct-npm-public/yet-another-react-lightbox/-/yet-another-react-lightbox-1.13.3.tgz",
+      "integrity": "sha512-lWQ++7eRgJb9yw5QxgJd5gmHI+3qYYEWVoxPdcGCMvGi/jAIrLEp1je0KA+OEdXxjxyR9HfTBB5EgNky0545Mg==",
+      "requires": {}
+    },
     "yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

picture-gallery-client/package.json

@@ -13,13 +13,13 @@
     "@types/node": "16.11.26",
     "@types/react": "18.0.0",
     "@types/react-dom": "18.0.0",
-    "eslint": "8.13.0",
+    "eslint": "8.21.0",
     "eslint-config-prettier": "8.5.0",
-    "eslint-import-resolver-typescript": "2.7.1",
+    "eslint-import-resolver-typescript": "3.4.0",
     "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.29.4",
+    "eslint-plugin-react": "7.30.1",
     "eslint-plugin-react-hooks": "4.4.0",
     "react": "18.0.0",
     "react-dom": "18.0.0",
@@ -28,7 +28,8 @@
     "react-scripts": "5.0.0",
     "react-inject-env": "2.1.0",
     "typescript": "4.6.3",
-    "web-vitals": "2.1.4"
+    "web-vitals": "2.1.4",
+    "yet-another-react-lightbox": "1.13.4"
   },
   "scripts": {
     "format": "prettier --write \"**/*.+(ts|tsx)\"",
@@ -37,6 +38,7 @@
     "lint:fix": "eslint --fix src/**",
     "client:build": "react-scripts build && npm run set-environment",
     "client:eject": "react-scripts eject",
+    "client:run": "npm run client:build && npm run client:start",
     "client:start": "react-scripts start",
     "client:test": "react-scripts test",
     "set-environment": "npx react-inject-env set"
@@ -60,11 +62,11 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.4",
+    "@testing-library/react": "13.3.0",
-    "@testing-library/user-event": "13.5.0",
+    "@testing-library/user-event": "14.4.2",
-    "@typescript-eslint/eslint-plugin": "5.18.0",
+    "@typescript-eslint/eslint-plugin": "5.32.0",
-    "@typescript-eslint/parser": "5.18.0",
+    "@typescript-eslint/parser": "5.32.0",
-    "prettier": "2.6.2"
+    "prettier": "2.7.1"
   }
 }

picture-gallery-client/src/ImageGallery/Image.tsx

@@ -1,25 +1,11 @@
 import { PhotoProps } from "react-photo-album";
-import React from "react";
-import { Backdrop } from "@mui/material";
 import { ImageWithThumbnail } from "./models";
-import { Spinner } from "./Spinner";
+import React from "react";
 
 export const Image = <T extends ImageWithThumbnail>({
   imageProps: { alt, style, src: _useSrcAndThumbnailFromPhoto, ...rest },
   photo,
 }: PhotoProps<T>): JSX.Element => {
-  const [open, setOpen] = React.useState(false);
-  const [loaded, setLoaded] = React.useState(false);
-  const handleClose = () => {
-    setOpen(false);
-  };
-  const handleToggle = () => {
-    setOpen(!open);
-  };
-  const handleImageLoaded = () => {
-    setLoaded(true);
-  };
-
   return (
     <>
       <img
@@ -29,27 +15,8 @@ export const Image = <T extends ImageWithThumbnail>({
         }}
         {...rest}
         src={photo.thumbnail}
-        onClick={handleToggle}
+        loading={"lazy"}
       />
-      {open && (
-        <Backdrop
-          sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
-          open={open}
-          onClick={handleClose}
-        >
-          {!loaded && <Spinner />}
-          <img
-            alt={alt}
-            style={{
-              maxHeight: "90%",
-              maxWidth: "90%",
-            }}
-            {...rest}
-            src={photo.src}
-            onLoad={handleImageLoaded}
-          />
-        </Backdrop>
-      )}
     </>
   );
 };

picture-gallery-client/src/ImageGallery/ImageGallery.tsx

@@ -1,19 +1,51 @@
 import PhotoAlbum from "react-photo-album";
-import React from "react";
+import React, { useState } from "react";
 import { Image } from "./Image";
 import { ImageWithThumbnail } from "./models";
+import { Lightbox } from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+
+import { Fullscreen } from "yet-another-react-lightbox/plugins/fullscreen";
+import { Slideshow } from "yet-another-react-lightbox/plugins/slideshow";
+import { Thumbnails } from "yet-another-react-lightbox/plugins/thumbnails";
+import "yet-another-react-lightbox/plugins/thumbnails.css";
+import "./yarl.thumbnails.override.css";
+import { Zoom } from "yet-another-react-lightbox/plugins/zoom";
 
 function ImageGallery({ images }: { images: ImageWithThumbnail[] }) {
-  //  For all kind of settings see:
+  const [index, setIndex] = useState(-1);
-  // https://react-photo-album.com/examples/playground
-  // https://codesandbox.io/s/github/igordanchenko/react-photo-album/tree/main/examples/playground
 
-  return images.length === 0 ? (
+  if (images.length === 0) {
+    return (
       <p>
         No images available. You may want to add images in your root directory.
       </p>
-  ) : (
+    );
-    <PhotoAlbum layout="masonry" photos={images} renderPhoto={Image} />
+  }
+
+  //  For all kind of settings see:
+  // https://react-photo-album.com/examples/playground
+  // https://codesandbox.io/s/github/igordanchenko/react-photo-album/tree/main/examples/playground
+  return (
+    <>
+      <PhotoAlbum
+        layout="masonry"
+        photos={images}
+        renderPhoto={Image}
+        onClick={(event, photo, index) => setIndex(index)}
+      />
+      <Lightbox
+        slides={images}
+        open={index >= 0}
+        index={index}
+        close={() => setIndex(-1)}
+        controller={{ closeOnBackdropClick: true }}
+        plugins={[Fullscreen, Slideshow, Thumbnails, Zoom]}
+        styles={{
+          root: { "--yarl__color_backdrop": "rgba(0, 0, 0, 0.85)" } as any,
+        }}
+      />
+    </>
   );
 }
 

picture-gallery-client/src/ImageGallery/yarl.thumbnails.override.css

@@ -0,0 +1,12 @@
+.yarl__thumbnails_top .yarl__thumbnails_container::before, .yarl__thumbnails_bottom .yarl__thumbnails_container::before {
+    background: initial;
+}
+.yarl__thumbnails_top .yarl__thumbnails_container::after, .yarl__thumbnails_bottom .yarl__thumbnails_container::after {
+    background: initial;
+}
+.yarl__thumbnails_start .yarl__thumbnails_container::before, .yarl__thumbnails_end .yarl__thumbnails_container::before {
+    background: initial;
+}
+.yarl__thumbnails_start .yarl__thumbnails_container::after, .yarl__thumbnails_end .yarl__thumbnails_container::after {
+    background: initial;
+}

picture-gallery-server/package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "picture-gallery-server",
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {

picture-gallery-server/package.json

@@ -9,7 +9,7 @@
     "lint:fix": "eslint --fix src/**",
     "server:build": "npx tsc",
     "server:start": "node dist/app.js",
-    "server:run": "npm run build-server && npm run start-server",
+    "server:run": "npm run server:build && npm run server:start",
     "server:watch": "npx nodemon src/app.ts",
     "test": "jest",
     "test:watch": "jest --watch"