Testing workflow

.github/workflows/eslint.yml

@@ -7,20 +7,20 @@
 # More details at https://github.com/eslint/eslint
 # and https://eslint.org
 
-name: ESLint
+name: workflow
 
 on:
   push:
-    branches: [ "master" ]
+    branches: ["master"]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ "master" ]
+    branches: ["master"]
   schedule:
-    - cron: '35 15 * * 3'
+    - cron: "35 15 * * 3"
 
 jobs:
   eslint:
-    name: Run eslint scanning
+    name: Eslint
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -30,21 +30,27 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: Install ESLint
-        run: |
-          npm install [email protected]
-          npm install @microsoft/[email protected]
+      - name: Install Packages
+        run: yarn
 
       - name: Run ESLint
-        run: npx eslint .
-          --config .eslintrc.js
-          --ext .js,.jsx,.ts,.tsx
-          --format @microsoft/eslint-formatter-sarif
-          --output-file eslint-results.sarif
-        continue-on-error: true
-
-      - name: Upload analysis results to GitHub
-        uses: github/codeql-action/upload-sarif@v2
-        with:
-          sarif_file: eslint-results.sarif
-          wait-for-processing: true
+        run: yarn lint
+        continue-on-error: false
+
+  jest:
+    name: Jest
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+      actions: read
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install Packages
+        run: yarn
+
+      - name: Run Jest
+        run: yarn jest
+        continue-on-error: false

package.json

@@ -48,14 +48,14 @@
     "babel-loader": "^8.2.2",
     "clsx": "^1.0.4",
     "css-loader": "^5.2.0",
-    "eslint": "^7.23.0",
+    "eslint": "7.32.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.23.1",
+    "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
     "identity-obj-proxy": "^3.0.0",
@@ -69,7 +69,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-fast-compare": "^3.2.0",
-    "react-swipeable": "6.0.1",
+    "react-swipeable": "7.0.1",
     "remove-files-webpack-plugin": "^1.4.5",
     "resize-observer-polyfill": "^1.5.0",
     "sass": "^1.35.2",

src/Item.js

@@ -1,17 +1,17 @@
-import React from 'react';
-import { bool, func, string } from 'prop-types';
+import React from "react";
+import { bool, func, string } from "prop-types";
 
 const defaultProps = {
-  description: '',
-  fullscreen: '',
+  description: "",
+  fullscreen: "",
   isFullscreen: false,
-  originalAlt: '',
-  originalHeight: '',
-  originalWidth: '',
-  originalTitle: '',
-  sizes: '',
-  srcSet: '',
-  loading: 'eager',
+  originalAlt: "",
+  originalHeight: "",
+  originalWidth: "",
+  originalTitle: "",
+  sizes: "",
+  srcSet: "",
+  loading: "eager",
 };
 
 const Item = React.memo((props) => {
@@ -29,8 +29,8 @@ const Item = React.memo((props) => {
     sizes,
     srcSet,
     loading,
-  } = {...defaultProps, ...props};
-  const itemSrc = isFullscreen ? (fullscreen || original) : original;
+  } = { ...defaultProps, ...props };
+  const itemSrc = isFullscreen ? fullscreen || original : original;
 
   return (
     <React.Fragment>
@@ -43,22 +43,18 @@ const Item = React.memo((props) => {
         width={originalWidth}
         sizes={sizes}
         title={originalTitle}
-        onLoad={event => handleImageLoaded(event, original)}
+        onLoad={(event) => handleImageLoaded(event, original)}
         onError={onImageError}
         loading={loading}
       />
-      {
-        description && (
-          <span className="image-gallery-description">
-            {description}
-          </span>
-        )
-      }
+      {description && (
+        <span className="image-gallery-description">{description}</span>
+      )}
     </React.Fragment>
   );
 });
 
-Item.displayName = 'Item';
+Item.displayName = "Item";
 
 Item.propTypes = {
   description: string,

src/SVG.js

@@ -1,10 +1,14 @@
-import React from 'react';
-import { number, oneOf, string } from 'prop-types';
+import React from "react";
+import { number, oneOf, string } from "prop-types";
 
 const left = <polyline points="15 18 9 12 15 6" />;
 const right = <polyline points="9 18 15 12 9 6" />;
-const maximize = <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />;
-const minimize = <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" />;
+const maximize = (
+  <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
+);
+const minimize = (
+  <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" />
+);
 const play = <polygon points="5 3 19 12 5 21 5 3" />;
 const pause = (
   <React.Fragment>
@@ -24,15 +28,11 @@ const iconMapper = {
 
 const defaultProps = {
   strokeWidth: 1,
-  viewBox: '0 0 24 24',
+  viewBox: "0 0 24 24",
 };
 
 const SVG = (props) => {
-  const {
-    strokeWidth,
-    viewBox,
-    icon,
-  } = {...defaultProps, ...props};
+  const { strokeWidth, viewBox, icon } = { ...defaultProps, ...props };
   return (
     <svg
       className="image-gallery-svg"
@@ -52,14 +52,8 @@ const SVG = (props) => {
 SVG.propTypes = {
   strokeWidth: number,
   viewBox: string,
-  icon: oneOf([
-    'left',
-    'right',
-    'maximize',
-    'minimize',
-    'play',
-    'pause',
-  ]).isRequired,
+  icon: oneOf(["left", "right", "maximize", "minimize", "play", "pause"])
+    .isRequired,
 };
 
 export default SVG;

src/SwipeWrapper.js

@@ -1,27 +1,19 @@
-import React from 'react';
-import {
-  string,
-  node,
-  number,
-  func,
-} from 'prop-types';
-import { useSwipeable } from 'react-swipeable';
+import React from "react";
+import { string, node, number, func } from "prop-types";
+import { useSwipeable } from "react-swipeable";
 
 const defaultProps = {
-  className: '',
+  className: "",
   delta: 0,
   onSwiping: () => {},
   onSwiped: () => {},
 };
 
 const SwipeWrapper = (props) => {
-  const {
-    children,
-    className,
-    delta,
-    onSwiping,
-    onSwiped,
-  } = {...defaultProps, ...props};
+  const { children, className, delta, onSwiping, onSwiped } = {
+    ...defaultProps,
+    ...props,
+  };
   const swipeHandlers = useSwipeable({
     delta,
     onSwiping,

src/controls/Fullscreen.js

@@ -1,29 +1,25 @@
-import React from 'react';
-import { bool, func } from 'prop-types';
-import SVG from 'src/SVG';
+import React from "react";
+import { bool, func } from "prop-types";
+import SVG from "src/SVG";
 
-const Fullscreen = React.memo(({
-  isFullscreen,
-  onClick,
-}) => {
+const Fullscreen = React.memo(({ isFullscreen, onClick }) => {
   return (
     <button
       type="button"
       className="image-gallery-icon image-gallery-fullscreen-button"
       onClick={onClick}
       aria-label="Open Fullscreen"
     >
-      <SVG strokeWidth={2} icon={isFullscreen ? 'minimize' : 'maximize'} />
+      <SVG strokeWidth={2} icon={isFullscreen ? "minimize" : "maximize"} />
     </button>
   );
 });
 
-Fullscreen.displayName = 'Fullscreen';
+Fullscreen.displayName = "Fullscreen";
 
 Fullscreen.propTypes = {
   isFullscreen: bool.isRequired,
   onClick: func.isRequired,
 };
 
-
 export default Fullscreen;

src/controls/LeftNav.js

@@ -1,11 +1,8 @@
-import React from 'react';
-import { bool, func } from 'prop-types';
-import SVG from 'src/SVG';
+import React from "react";
+import { bool, func } from "prop-types";
+import SVG from "src/SVG";
 
-const LeftNav = React.memo(({
-  disabled,
-  onClick,
-}) => {
+const LeftNav = React.memo(({ disabled, onClick }) => {
   return (
     <button
       type="button"
@@ -19,12 +16,11 @@ const LeftNav = React.memo(({
   );
 });
 
-LeftNav.displayName = 'LeftNav';
+LeftNav.displayName = "LeftNav";
 
 LeftNav.propTypes = {
   disabled: bool.isRequired,
   onClick: func.isRequired,
 };
 
-
 export default LeftNav;

src/controls/PlayPause.js

@@ -1,29 +1,25 @@
-import React from 'react';
-import { bool, func } from 'prop-types';
-import SVG from 'src/SVG';
+import React from "react";
+import { bool, func } from "prop-types";
+import SVG from "src/SVG";
 
-const PlayPause = React.memo(({
-  isPlaying,
-  onClick,
-}) => {
+const PlayPause = React.memo(({ isPlaying, onClick }) => {
   return (
     <button
       type="button"
       className="image-gallery-icon image-gallery-play-button"
       onClick={onClick}
       aria-label="Play or Pause Slideshow"
     >
-      <SVG strokeWidth={2} icon={isPlaying ? 'pause' : 'play'} />
+      <SVG strokeWidth={2} icon={isPlaying ? "pause" : "play"} />
     </button>
   );
 });
 
-PlayPause.displayName = 'PlayPause';
+PlayPause.displayName = "PlayPause";
 
 PlayPause.propTypes = {
   isPlaying: bool.isRequired,
   onClick: func.isRequired,
 };
 
-
 export default PlayPause;

src/controls/RightNav.js

@@ -1,11 +1,8 @@
-import React from 'react';
-import { bool, func } from 'prop-types';
-import SVG from 'src/SVG';
+import React from "react";
+import { bool, func } from "prop-types";
+import SVG from "src/SVG";
 
-const RightNav = React.memo(({
-  disabled,
-  onClick,
-}) => {
+const RightNav = React.memo(({ disabled, onClick }) => {
   return (
     <button
       type="button"
@@ -19,12 +16,11 @@ const RightNav = React.memo(({
   );
 });
 
-RightNav.displayName = 'RightNav';
+RightNav.displayName = "RightNav";
 
 RightNav.propTypes = {
   disabled: bool.isRequired,
   onClick: func.isRequired,
 };
 
-
 export default RightNav;