stefan
/
simple-picture-gallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

integrate lighthouse 

update some libraries so that the lighthouse imports are recognized
correctly by eslint
This commit is contained in:
Stefan Forstenlechner 2022-08-08 17:34:32 +02:00
parent 09ff5ff5e7
commit dee47d5e6b
9 changed files with 97 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

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

5
package.json
View File

@ -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",
"build:client": "npm run --prefix picture-gallery-client client:build",
"start:client": "npm run --prefix picture-gallery-client client:start",
"start-all": "concurrently npm:run:client npm:run:server",
"run:client": "npm run --prefix picture-gallery-client client:run",
"run:server": "npm run --prefix picture-gallery-server server:run",
"docker:buildImage": "docker build . -t simple-picture-gallery"
}

23
picture-gallery-client/package-lock.json generated
View File

@ -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",

26
picture-gallery-client/package.json
View File

@ -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-prettier": "4.0.0",
"eslint-plugin-react": "7.29.4",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-prettier": "4.2.1",
"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/react": "12.1.4",
"@testing-library/user-event": "13.5.0",
"@typescript-eslint/eslint-plugin": "5.18.0",
"@typescript-eslint/parser": "5.18.0",
"prettier": "2.6.2"
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "13.3.0",
"@testing-library/user-event": "14.4.2",
"@typescript-eslint/eslint-plugin": "5.32.0",
"@typescript-eslint/parser": "5.32.0",
"prettier": "2.7.1"
}
}

37
picture-gallery-client/src/ImageGallery/Image.tsx
View File

@ -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>
)}
</>
);
};

48
picture-gallery-client/src/ImageGallery/ImageGallery.tsx
View File

@ -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[] }) {
const [index, setIndex] = useState(-1);
if (images.length === 0) {
return (
<p>
No images available. You may want to add images in your root directory.
</p>
);
}
// 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 images.length === 0 ? (
<p>
No images available. You may want to add images in your root directory.
</p>
) : (
<PhotoAlbum layout="masonry" photos={images} renderPhoto={Image} />
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,
}}
/>
</>
);
}

12
picture-gallery-client/src/ImageGallery/yarl.thumbnails.override.css Normal file
View File

@ -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;
}

1
picture-gallery-server/package-lock.json generated
View File

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

2
picture-gallery-server/package.json
View File

@ -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"