gatsby v3 update

decimoseptimo · May 8, 2021 · 0ada472 · 0ada472
1 parent eda80f7
commit 0ada472
Show file tree

Hide file tree

Showing 17 changed files with 10,755 additions and 11,414 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -27,6 +27,7 @@ module.exports = {
       },
     },
     `gatsby-transformer-json`,
+    `gatsby-plugin-image`,
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     {
@@ -73,13 +74,11 @@ module.exports = {
                   description
                   images {
                     childImageSharp {
-                      fluid(maxWidth: 1080) {
-                        base64
-                        aspectRatio
-                        src
-                        srcSet
-                        sizes
-                      }
+                      gatsbyImageData(
+                        width: 550
+                        layout: CONSTRAINED
+                        placeholder: BLURRED
+                      )
                     }
                   }
                 }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,47 +5,48 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
-    "gatsby": "^2.29.2",
+    "gatsby": "^3.1.2",
     "gatsby-awesome-pagination": "^0.3.6",
-    "gatsby-image": "^2.8.0",
+    "gatsby-image": "^3.1.0",
     "gatsby-plugin-favicon": "^3.1.6",
+    "gatsby-plugin-image": "^1.1.2",
     "gatsby-plugin-local-search": "^2.0.0",
-    "gatsby-plugin-manifest": "^2.9.1",
-    "gatsby-plugin-offline": "^3.7.1",
-    "gatsby-plugin-react-helmet": "^3.7.0",
-    "gatsby-plugin-sharp": "^2.11.2",
-    "gatsby-plugin-styled-jsx": "^3.7.0",
-    "gatsby-source-filesystem": "^2.8.1",
-    "gatsby-transformer-json": "^2.8.0",
-    "gatsby-transformer-sharp": "^2.9.0",
-    "mobile-detect": "^1.4.4",
+    "gatsby-plugin-manifest": "^3.1.0",
+    "gatsby-plugin-offline": "^4.1.0",
+    "gatsby-plugin-react-helmet": "^4.1.0",
+    "gatsby-plugin-sharp": "^3.1.2",
+    "gatsby-plugin-styled-jsx": "^4.1.0",
+    "gatsby-source-filesystem": "^3.1.0",
+    "gatsby-transformer-json": "^3.1.0",
+    "gatsby-transformer-sharp": "^3.1.0",
+    "mobile-detect": "^1.4.5",
     "normalize.css": "^8.0.1",
     "prop-types": "^15.7.2",
-    "query-string": "^6.13.7",
-    "rc-collapse": "^2.1.0",
-    "rc-input-number": "^6.1.2",
-    "rc-pagination": "^3.1.3",
-    "react": "^17.0.1",
-    "react-autosuggest": "^10.0.4",
-    "react-dom": "^17.0.1",
+    "query-string": "^7.0.0",
+    "rc-collapse": "^3.1.0",
+    "rc-input-number": "^7.0.2",
+    "rc-pagination": "^3.1.6",
+    "react": "^17.0.2",
+    "react-autosuggest": "^10.1.0",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "react-highlight-words": "^0.16.0",
-    "react-hook-form": "^6.13.1",
-    "react-icons": "^4.1.0",
-    "react-lunr": "^1.0.0",
-    "react-nl2br": "^1.0.1",
-    "react-slick": "^0.27.13",
+    "react-highlight-words": "^0.17.0",
+    "react-hook-form": "^6.15.5",
+    "react-icons": "^4.2.0",
+    "react-lunr": "^1.1.0",
+    "react-nl2br": "^1.0.2",
+    "react-slick": "^0.28.1",
     "react-use-flexsearch": "^0.1.1",
     "simplebar": "^5.3.0",
     "simplebar-react": "^2.3.0",
     "slick-carousel": "^1.8.1",
-    "slugify": "^1.4.6",
-    "styled-jsx": "^3.3.2",
+    "slugify": "^1.5.0",
+    "styled-jsx": "^3.4.4",
     "typeface-source-sans-pro": "0.0.75"
   },
   "devDependencies": {
     "@types/styled-jsx": "^2.2.8",
-    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.18",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.21",
     "mark.js": "^8.11.1",
     "prettier": "^2.2.1"
   },

diff --git a/src/components/image.js b/src/components/image.js
@@ -1,34 +1,15 @@
 import React from "react"
-import { StaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
-
-/*
- * This component is built using `gatsby-image` to automatically serve optimized
- * images with lazy loading and reduced file sizes. The image is loaded using a
- * `StaticQuery`, which allows us to load the image from directly within this
- * component, rather than having to pass the image data down from forms.
- *
- * For more information, see the docs:
- * - `gatsby-image`: https://gatsby.dev/gatsby-image
- * - `StaticQuery`: https://gatsby.dev/staticquery
- */
+import { StaticImage } from "gatsby-plugin-image"
 
 const Image = () => (
-  <StaticQuery
-    query={graphql`
-      query {
-        placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
-          childImageSharp {
-            fluid(maxWidth: 300) {
-              ...GatsbyImageSharpFluid
-            }
-          }
-        }
-      }
-    `}
-    render={(data) => (
-      <Img fluid={data.placeholderImage.childImageSharp.fluid} />
-    )}
+  <StaticImage
+    src="../images/gatsby-astronaut.png"
+    width={300}
+    quality={95}
+    formats={["auto", "webp", "avif"]}
+    alt="A Gatsby astronaut"
+    // style={{ marginBottom: `1.45rem` }}
   />
 )
+
 export default Image
diff --git a/src/components/inputNumber.js b/src/components/inputNumber.js
@@ -13,7 +13,7 @@ const InputNumber = ({
   min,
   max,
   onChange,
-  onDelete,
+  onDelete = null,
 }) => {
   // console.log("\nInputNumber!")
   // console.log(value)

diff --git a/src/components/layout.js b/src/components/layout.js
@@ -2,6 +2,7 @@ import React, { useEffect } from "react"
 import PropTypes from "prop-types"
 import SimpleBar from "simplebar-react"
 import "simplebar/dist/simplebar.min.css"
+import _JSXStyle from "styled-jsx/style"
 
 import Header from "./header"
 import Overlay from "./overlay"
@@ -32,6 +33,12 @@ import {
 } from "./sidepanel/panels"
 import "./layout.css"
 
+// Temp fix for "_JSXStyle is not defined" error
+// https://github.com/vercel/styled-jsx/issues/695#issuecomment-805346577
+if (typeof global !== "undefined") {
+  Object.assign(global, { _JSXStyle })
+}
+
 const Layout = ({ location, children }) => {
   const { getFromRoutesHistory, setToRoutesHistory } = useRoutesHistory()
   const routes = useGetRoutes()

diff --git a/src/components/product/productCard.js b/src/components/product/productCard.js
@@ -1,6 +1,6 @@
 import React from "react"
 import { Link } from "gatsby"
-import Img from "gatsby-image"
+import { GatsbyImage } from "gatsby-plugin-image"
 
 import Image from "../image"
 
@@ -15,7 +15,10 @@ const ProductCard = ({
   hasMountedAndHasValue,
 }) => {
   const image = data.images ? (
-    <Img fluid={data.images[0].childImageSharp.fluid} alt={data.title} />
+    <GatsbyImage
+      image={data.images[0].childImageSharp.gatsbyImageData}
+      alt={data.title}
+    />
   ) : (
     <Image />
   )

diff --git a/src/components/product/productGallery.js b/src/components/product/productGallery.js
@@ -1,6 +1,6 @@
 import React, { useRef, useState, useMemo } from "react"
 import Slider from "react-slick"
-import Image from "gatsby-image"
+import { GatsbyImage } from "gatsby-plugin-image"
 import "../../../node_modules/slick-carousel/slick/slick.css"
 import "../../../node_modules/slick-carousel/slick/slick-theme.css"
 
@@ -53,8 +53,8 @@ const ProductGallery = (props) => {
               onMouseOver={() => updateSlide(index)}
               className={`image ${activeThumb === index ? "active" : ""}`}
             >
-              <Image
-                fluid={value.childImageSharp.fluid}
+              <GatsbyImage
+                image={value.childImageSharp.gatsbyImageData}
                 alt={value.title}
                 key={index}
               />
@@ -68,12 +68,13 @@ const ProductGallery = (props) => {
             <Slider className="slider" ref={sliderRef} {...settings}>
               {images.map((value, index) => (
                 <div className="slide" key={index}>
-                  <Image fluid={value.childImageSharp.fluid} />
-                  {/*<img src={value.childImageSharp.fluid.src} />*/}
+                  <GatsbyImage
+                    image={value.childImageSharp.gatsbyImageData}
+                    alt={value.title}
+                  />
                 </div>
               ))}
             </Slider>
-            {/*<Asd/>*/}
           </div>
         ),
         []

diff --git a/src/components/sidepanel/panels/cart/cartItem.js b/src/components/sidepanel/panels/cart/cartItem.js
@@ -1,6 +1,6 @@
 import React from "react"
 import { Link } from "gatsby"
-import Img from "gatsby-image"
+import { GatsbyImage } from "gatsby-plugin-image"
 
 import InputNumber from "../../../inputNumber"
 import Image from "../../../image"
@@ -21,17 +21,17 @@ const CartItem = (props) => {
 
   const price = round(props.price)
   const image = images ? (
-    <Img
+    <GatsbyImage
+      image={images[0].childImageSharp.gatsbyImageData}
       className="thumb"
-      fluid={images[0].childImageSharp.fluid}
       alt={title}
     />
   ) : (
     <Image />
   )
 
   const itemTotal = () => {
-    return round(price * count, 2)
+    return round(Number(price) * count, 2)
   }
 
   return (

diff --git a/src/components/sidepanel/panels/categories.js b/src/components/sidepanel/panels/categories.js
@@ -3,6 +3,7 @@ import { graphql, Link, useStaticQuery } from "gatsby"
 import slugify from "slugify"
 import Collapse from "rc-collapse"
 import "rc-collapse/assets/index.css"
+import motion from '../../../utils/motionUtil'
 import { IconContext } from "react-icons"
 import { AiOutlineRight } from "react-icons/ai"
 
@@ -68,7 +69,7 @@ const Categories = () => {
   )
 
   const generateCollapse = (obj) => (
-    <Collapse accordion expandIcon={expandIcon}>
+    <Collapse accordion expandIcon={expandIcon} openMotion={motion}>
       {obj.map(({ _id, name, children }) => {
         return children ? (
           getPanel(_id, name, children)

diff --git a/src/images/GUEST_f5d0cfc3-9d02-4ee0-a6c6-ed5dc09971d1.jpg b/src/images/GUEST_f5d0cfc3-9d02-4ee0-a6c6-ed5dc09971d1.jpg
diff --git a/src/images/harashi-logo-inverse.png b/src/images/harashi-logo-inverse.png
diff --git a/src/templates/categoryView.js b/src/templates/categoryView.js
@@ -108,9 +108,11 @@ export const pageQuery = graphql`
           slug
           images {
             childImageSharp {
-              fluid(maxWidth: 550) {
-                ...GatsbyImageSharpFluid
-              }
+              gatsbyImageData(
+                width: 550
+                layout: CONSTRAINED
+                placeholder: BLURRED
+              )
             }
           }
         }

diff --git a/src/templates/productIndex.js b/src/templates/productIndex.js
@@ -51,9 +51,11 @@ export const pageQuery = graphql`
           slug
           images {
             childImageSharp {
-              fluid(maxWidth: 550) {
-                ...GatsbyImageSharpFluid
-              }
+              gatsbyImageData(
+                width: 550
+                layout: CONSTRAINED
+                placeholder: BLURRED
+              )
             }
           }
         }

diff --git a/src/templates/productView.js b/src/templates/productView.js
@@ -114,28 +114,21 @@ const ProductView = (props) => {
 
 export default ProductView
 
-export const query = graphql`
-  query($_id: String!) {
-    productsJson(_id: { eq: $_id }) {
-      _id
-      title
-      price
-      unit
-      min_quantity
-      max_quantity
-      slug
-      description
-      images {
-        childImageSharp {
-          fluid(maxWidth: 1080) {
-            base64
-            aspectRatio
-            src
-            srcSet
-            sizes
-          }
-        }
+export const query = graphql`query ($_id: String!) {
+  productsJson(_id: {eq: $_id}) {
+    _id
+    title
+    price
+    unit
+    min_quantity
+    max_quantity
+    slug
+    description
+    images {
+      childImageSharp {
+        gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
       }
     }
   }
+}
 `