update gatsby example

Author: JustFly1984

packages/react-google-maps-api-gatsby-example/. eslintrc

@@ -1,7 +1,7 @@
 {
   "name": "@react-google-maps/gatsby-example",
   "description": "React Google Maps Gatsby.js example",
-  "version": "1.9.2",
+  "version": "2.19.0",
   "author": {
     "name": "Alexey Lyakhov",
     "email": "[email protected]",
@@ -14,40 +14,40 @@
     "access": "public"
   },
   "resolutions": {
-    "@babel/core": "7.20.12"
+    "@babel/core": "7.22.9"
   },
   "dependencies": {
-    "@babel/core": "7.20.12",
-    "@babel/node": "7.20.7",
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-react": "7.18.6",
-    "@babel/runtime": "7.20.13",
-    "@react-google-maps/api": "2.18.1",
-    "@sentry/browser": "7.34.0",
+    "@babel/core": "7.22.9",
+    "@babel/node": "7.22.6",
+    "@babel/preset-env": "7.22.9",
+    "@babel/preset-react": "7.22.5",
+    "@babel/runtime": "7.22.6",
+    "@react-google-maps/api": "2.19.0",
+    "@sentry/browser": "7.58.1",
     "cross-env": "7.0.3",
-    "gatsby": "5.5.0",
-    "gatsby-plugin-manifest": "5.5.0",
+    "gatsby": "5.11.0",
+    "gatsby-plugin-manifest": "5.11.0",
     "gatsby-plugin-purgecss": "6.2.1",
-    "gatsby-plugin-react-helmet": "6.5.0",
-    "gatsby-plugin-sitemap": "6.5.0",
-    "gatsby-plugin-typescript": "5.5.0",
-    "immutable": "4.2.2",
+    "gatsby-plugin-react-helmet": "6.11.0",
+    "gatsby-plugin-sitemap": "6.11.0",
+    "gatsby-plugin-typescript": "5.11.0",
+    "immutable": "4.3.1",
     "intl": "1.2.5",
     "prop-types": "15.8.1",
     "react-helmet": "6.1.0",
-    "react-redux": "8.0.5",
+    "react-redux": "8.1.1",
     "react-refresh": "0.14.0",
     "redux": "4.2.1",
-    "redux-actions": "2.6.5",
+    "redux-actions": "3.0.0",
     "redux-immutable": "4.0.0",
     "redux-thunk": "2.4.2",
-    "stylelint": "14.14.1",
+    "stylelint": "15.10.1",
     "stylelint-a11y": "1.2.3",
-    "stylelint-config-css-modules": "4.1.0",
-    "stylelint-config-recommended": "9.0.0",
-    "stylelint-config-standard": "29.0.0",
+    "stylelint-config-css-modules": "4.2.0",
+    "stylelint-config-recommended": "13.0.0",
+    "stylelint-config-standard": "34.0.0",
     "stylelint-css-modules": "1.2.2",
-    "stylelint-high-performance-animation": "1.6.0",
+    "stylelint-high-performance-animation": "1.8.0",
     "uniqid": "5.4.0"
   },
   "keywords": [
@@ -70,12 +70,12 @@
     "update": "npm-check -u"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "7.19.6",
+    "@babel/plugin-transform-runtime": "7.22.9",
     "babel-eslint": "10.1.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "jest": "29.2.2",
-    "jest-cli": "29.2.2",
-    "rimraf": "3.0.2"
+    "jest": "29.6.1",
+    "jest-cli": "29.6.1",
+    "rimraf": "5.0.1"
   },
   "repository": {
     "type": "git",

packages/react-google-maps-api-gatsby-example/.babelrc

@@ -1,4 +1,5 @@
-import React, { memo } from 'react'
+// eslint-disable-next-line node/no-extraneous-import
+import { memo, useCallback } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 
 import { toggleLoadScript } from '../actions/app'
@@ -15,7 +16,7 @@ function selector(state) {
 function ButtonLoadScript() {
   const dispatch = useDispatch()
 
-  const onClick = React.useCallback(() => {
+  const onClick = useCallback(() => {
     dispatch(toggleLoadScript())
   }, [dispatch])
 

packages/react-google-maps-api-gatsby-example/package.json

@@ -1,4 +1,5 @@
-import * as React from 'react'
+// eslint-disable-next-line node/no-extraneous-import
+import { memo } from 'react'
 import PropTypes from 'prop-types'
 
 function Card({ children }) {
@@ -13,4 +14,4 @@ Card.propTypes = {
   children: PropTypes.node.isRequired,
 }
 
-export default React.memo(Card)
+export default memo(Card)

packages/react-google-maps-api-gatsby-example/src/components/button-load-script.js

@@ -1,4 +1,5 @@
-import * as React from 'react'
+// eslint-disable-next-line node/no-extraneous-import
+import { memo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { toggleBicycling } from '../actions/app'
@@ -41,4 +42,4 @@ function CheckboxBicycling() {
   )
 }
 
-export default React.memo(CheckboxBicycling)
+export default memo(CheckboxBicycling)

packages/react-google-maps-api-gatsby-example/src/components/card.js

@@ -1,4 +1,5 @@
-import * as React from 'react'
+// eslint-disable-next-line node/no-extraneous-import
+import { memo , useCallback } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 
 import { toggleData } from '../actions/app'
@@ -14,7 +15,7 @@ function selector(state) {
 function CheckboxData() {
   const dispatch = useDispatch()
 
-  const onChange = React.useCallback(
+  const onChange = useCallback(
     ({ target: { checked } }) => {
       dispatch(
         toggleData({
@@ -44,4 +45,4 @@ function CheckboxData() {
   )
 }
 
-export default React.memo(CheckboxData)
+export default memo(CheckboxData)

packages/react-google-maps-api-gatsby-example/src/components/checkbox-bicycling.js

@@ -1,4 +1,5 @@
-import * as React from 'react'
+// eslint-disable-next-line node/no-extraneous-import
+import { memo, useCallback } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 
 import { toggleDirections } from '../actions/app'
@@ -12,7 +13,7 @@ function selector(state) {
 function CheckboxDirections() {
   const dispatch = useDispatch()
 
-  const onChange = React.useCallback(
+  const onChange = useCallback(
     ({ target: { checked } }) => {
       dispatch(
         toggleDirections({
@@ -42,4 +43,4 @@ function CheckboxDirections() {
   )
 }
 
-export default React.memo(CheckboxDirections)
+export default memo(CheckboxDirections)

packages/react-google-maps-api-gatsby-example/src/components/checkbox-data.js

@@ -1,4 +1,5 @@
-import * as React from 'react'
+// eslint-disable-next-line node/no-extraneous-import
+import { memo, useCallback } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 
 import { toggleDrawing } from '../actions/app'
@@ -11,7 +12,7 @@ function selector(state) {
 
 function CheckboxDrawing() {
   const dispatch = useDispatch()
-  const onChange = React.useCallback(
+  const onChange = useCallback(
     ({ target: { checked } }) => {
       dispatch(
         toggleDrawing({
@@ -39,4 +40,4 @@ function CheckboxDrawing() {
   )
 }
 
-export default React.memo(CheckboxDrawing)
+export default memo(CheckboxDrawing)

packages/react-google-maps-api-gatsby-example/src/components/checkbox-directions.js

@@ -1,4 +1,5 @@
-import * as React from 'react'
+// eslint-disable-next-line node/no-extraneous-import
+import { memo, useCallback } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 
 import { toggleGround } from '../actions/app'
@@ -11,7 +12,8 @@ function selector(state) {
 
 function CheckboxGround() {
   const dispatch = useDispatch()
-  const onChange = React.useCallback(
+
+  const onChange = useCallback(
     ({ target: { checked } }) => {
       dispatch(
         toggleGround({
@@ -21,7 +23,9 @@ function CheckboxGround() {
     },
     [dispatch]
   )
+
   const value = useSelector(selector)
+
   return (
     <div className='custom-control custom-checkbox'>
       <input
@@ -39,4 +43,4 @@ function CheckboxGround() {
   )
 }
 
-export default React.memo(CheckboxGround)
+export default memo(CheckboxGround)