📚 Bump lint (#654)

* 📚 update libraries

* 🧶 lint

.github/workflows/lint.yml

@@ -6,6 +6,8 @@ on:
   pull_request:
     branches: [ main ]
 
+permissions: write-all
+
 jobs:
   lint:
     runs-on: ubuntu-latest

jest-mocks.js

@@ -3,9 +3,9 @@
 jest.mock('gatsby-plugin-image', () => {
 	const React = require('react');
 	const plugin = jest.requireActual('gatsby-plugin-image');
-	const mockImage = ({imgClassName, ...props}) =>
+	const mockImage = ({imgClassName, ...properties}) =>
 		React.createElement('img', {
-			...props,
+			...properties,
 			className: imgClassName,
 		});
 	return {
@@ -18,9 +18,9 @@ jest.mock('gatsby-plugin-image', () => {
 jest.mock('react-helmet', () => {
 	const React = require('react');
 	const plugin = jest.requireActual('react-helmet');
-	const mockHelmet = ({children, ...props}) =>
+	const mockHelmet = ({children, ...properties}) =>
 		React.createElement('div', {
-			...props,
+			...properties,
 			className: 'mock-helmet',
 		}, children);
 	return {
@@ -32,21 +32,21 @@ jest.mock('react-helmet', () => {
 jest.mock('@react-google-maps/api', () => {
 	const React = require('react');
 	const plugin = jest.requireActual('@react-google-maps/api');
-	const mockGoogleMap = ({children, ...props}) =>
+	const mockGoogleMap = ({children, ...properties}) =>
 		React.createElement('div', {
-			...props,
+			...properties,
 			className: 'mock-google-map',
 		}, children);
 
-	const mockInfoWindow = ({children, ...props}) =>
+	const mockInfoWindow = ({children, ...properties}) =>
 		React.createElement('div', {
-			...props,
+			...properties,
 			className: 'mock-info-window',
 		}, children);
 
-	const mockMarker = ({children, ...props}) =>
+	const mockMarker = ({children, ...properties}) =>
 		React.createElement('div', {
-			...props,
+			...properties,
 			className: 'mock-marker',
 		}, children);
 	return {

package.json

@@ -54,14 +54,17 @@
     "babel-jest": "^29.7.0",
     "dotenv": "^16.4.1",
     "eslint": "^8.56.0",
-    "eslint-config-xo": "^0.43.1",
+    "eslint-config-xo": "^0.44.0",
     "eslint-config-xo-react": "^0.27.0",
-    "eslint-plugin-jest": "^27.6.3",
+    "eslint-plugin-jest": "^27.8.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react-test-renderer": "^18.2.0",
-    "xo": "^0.56.0"
+    "xo": "^0.57.0"
+  },
+  "overrides": {
+    "axios": "^1.6.7"
   },
   "repository": {
     "type": "git",

src/components/atoms/google-map.jsx

@@ -30,7 +30,9 @@ const GoogleMap = ({center, data, height, hasNoInfoWindow, mapId, zoom}) => {
 			<>
 				{data.map(({node: {data: {coordinates: {latitude, longitude}, image, title}, id, uid}}) => {
 					const position = {lat: latitude, lng: longitude};
-					const properties = {image, position, title, uid};
+					const properties = {
+						image, position, title, uid,
+					};
 					return <Marker key={id} position={position} title={title} clickable={!hasNoInfoWindow} onClick={toggleInfoWindow(properties)}/>;
 				})}
 				{infoWindowOpen && title && (

src/components/atoms/navigation.jsx

@@ -8,7 +8,7 @@ import {css} from '@emotion/react';
 import AssetTypes from '../../constants/asset-types.js';
 import {up} from '../../utils/theming.js';
 
-const nav = css`
+const navigationStyle = css`
 	line-height: 40px;
 	opacity: 1;
 	outline: 0;
@@ -128,7 +128,7 @@ const Navigation = ({isFullscreen}) => {
 	const {PICTURE, SERIES, CATEGORY} = AssetTypes;
 
 	return (
-		<nav css={nav} className={classnames({open: menuOpen, isFullscreen})}>
+		<nav css={navigationStyle} className={classnames({open: menuOpen, isFullscreen})}>
 			<ul>
 				<li><a ref={linkOverview} href={`/${PICTURE.path}`} tabIndex='2'>Overview</a></li>
 				<li><a ref={linkShuttered} href={`/${SERIES.path}/shuttered`} tabIndex='3'>»Shuttered«</a></li>

src/components/molecules/picture.jsx

@@ -19,28 +19,28 @@ const normal = css`
 const Picture = ({data: {title, image}, layout, preferThumbnails, size}) => {
 	let gatsbyImageData = {};
 	const alt = image.alt ?? title;
-	const {height: propsHeight, width: propsWidth} = size;
+	const {height: propertiesHeight, width: propertiesWidth} = size;
 
 	if (preferThumbnails) {
-		if (Object.prototype.hasOwnProperty.call(image, 'gatsbyImageData')) {
+		if (Object.hasOwn(image, 'gatsbyImageData')) {
 			({gatsbyImageData} = image);
 		}
 
-		if (Object.prototype.hasOwnProperty.call(image, 'thumbnails')) {
+		if (Object.hasOwn(image, 'thumbnails')) {
 			({thumbnails: {thumbnail: {gatsbyImageData}}} = image);
 		}
 	} else {
-		if (Object.prototype.hasOwnProperty.call(image, 'thumbnails')) {
+		if (Object.hasOwn(image, 'thumbnails')) {
 			({thumbnails: {thumbnail: {gatsbyImageData}}} = image);
 		}
 
-		if (Object.prototype.hasOwnProperty.call(image, 'gatsbyImageData')) {
+		if (Object.hasOwn(image, 'gatsbyImageData')) {
 			({gatsbyImageData} = image);
 		}
 	}
 
-	const height = propsHeight ?? gatsbyImageData.height;
-	const width = propsWidth ?? gatsbyImageData.width;
+	const height = propertiesHeight ?? gatsbyImageData.height;
+	const width = propertiesWidth ?? gatsbyImageData.width;
 
 	const cssClass = layout === 'FULL_WIDTH' ? fullSize : normal;
 

src/components/organisms/slideshow.jsx

@@ -111,11 +111,11 @@ const Slideshow = ({images, isFullscreen}) => {
 		<div className='slide-container'>
 			<Fade {...properties}>
 				{images.map(({node: {data: {title, image}, id, uid}}) => {
-					const thumbnailSrc = image.thumbnails?.thumbnail.gatsbyImageData.images.fallback.src;
+					const thumbnailSource = image.thumbnails?.thumbnail.gatsbyImageData.images.fallback.src;
 					return (
 						<a
 							key={id} css={slide}
-							style={thumbnailSrc && {backgroundImage: `url(${thumbnailSrc})`}}
+							style={thumbnailSource && {backgroundImage: `url(${thumbnailSource})`}}
 							title={title} href={`/${path}/${uid}`}
 						>
 							<figure css={figure}>

src/html.jsx

@@ -4,8 +4,8 @@ import React from 'react';
 const {GATSBY_SERVER_URL = 'https://eyesbound.com', GATSBY_SITE_NAME = 'EYESBOUND'} = process.env;
 
 /* eslint-disable react/no-danger */
-const HTML = props => (
-	<html lang='en' dir='ltr' {...props.htmlAttributes}>
+const HTML = properties => (
+	<html lang='en' dir='ltr' {...properties.htmlAttributes}>
 		<head>
 			<title>{GATSBY_SITE_NAME}</title>
 			<meta charSet='utf-8'/>
@@ -33,12 +33,12 @@ const HTML = props => (
 			<meta name='msapplication-square150x150logo' content='/square_150x150.png'/>
 			<meta name='msapplication-wide310x150logo' content='/wide_310x150.png'/>
 			<meta name='msapplication-square310x310logo' content='/large_310x310.png'/>
-			{props.headComponents}
+			{properties.headComponents}
 		</head>
-		<body {...props.bodyAttributes}>
-			{props.preBodyComponents}
-			<div key='body' dangerouslySetInnerHTML={{__html: props.body}} id='___gatsby'/>
-			{props.postBodyComponents}
+		<body {...properties.bodyAttributes}>
+			{properties.preBodyComponents}
+			<div key='body' dangerouslySetInnerHTML={{__html: properties.body}} id='___gatsby'/>
+			{properties.postBodyComponents}
 		</body>
 	</html>
 );

src/types/proptypes.js

@@ -1,4 +1,6 @@
-import {array, arrayOf, bool, exact, node, number, object, oneOfType, string} from 'prop-types';
+import {
+	array, arrayOf, bool, exact, node, number, object, oneOfType, string,
+} from 'prop-types';
 
 /* eslint-disable camelcase,capitalized-comments */
 

src/utils/__tests__/theming.js

@@ -1,4 +1,6 @@
-import {breakpoints, deviceSpecs, forDevice, up} from '../theming.js';
+import {
+	breakpoints, deviceSpecs, forDevice, up,
+} from '../theming.js';
 
 describe('theming', () => {
 	describe('up', () => {

src/utils/fullscreen.js

@@ -8,6 +8,7 @@ export const fullscreenElement = typeof document !== 'undefined' && (document.fu
  */
 export const toggleFullscreen = selector => {
 	document.fullscreenElement = fullscreenElement;
+	// eslint-disable-next-line logical-assignment-operators
 	document.exitFullscreen = document.exitFullscreen || document.mozExitFullscreen || document.msExitFullscreen || document.webkitExitFullscreen;
 	const queriedElement = selector && selector.length > 0 && document.querySelector(selector);
 	const element = queriedElement || document.documentElement;