Upgrades packages to latest

__mocks__/data/company-mock.js

@@ -2,7 +2,7 @@ import faker from 'faker';
 
 const fakeCompany = ({ isSponsor } = {}) => {
   const _company = {
-    id: faker.random.uuid(),
+    id: faker.datatype.uuid(),
     name: faker.company.companyName(),
     googleMapsUrl:
       'https://www.google.com/maps/place/TELUS+Garden+Offices/@49.2811052,-123.1190905,17z/data=!3m1!4b1!4m5!3m4!1s0x5486717f1e2a2abf:0x228bfd9147371b9c!8m2!3d49.2811052!4d-123.1169019',

__mocks__/data/event-mock.js

@@ -5,7 +5,7 @@ import fakeTalk from './talk-mock';
 const fakeEvent = (options = {}) => {
   const { withTalks } = options;
   const _event = {
-    id: faker.random.uuid(),
+    id: faker.datatype.uuid(),
     date: faker.date.recent(),
     host: fakeCompany(),
     photos: [],

__mocks__/data/person-mock.js

@@ -4,7 +4,7 @@ import fakeCompany from './company-mock';
 
 const fakePerson = ({ withTalks, withEvent } = {}) => {
   const _person = {
-    id: faker.random.uuid(),
+    id: faker.datatype.uuid(),
     firstName: faker.name.firstName(),
     lastName: faker.name.lastName(),
     company: fakeCompany(),

__mocks__/data/talk-mock.js

@@ -5,7 +5,7 @@ import fakeEvent from './event-mock';
 const fakeTalk = (options = {}) => {
   const { withSpeaker, withEvent } = options;
   const _talk = {
-    id: faker.random.uuid(),
+    id: faker.datatype.uuid(),
     title: faker.lorem.words(),
     description: faker.lorem.sentences(),
     slidesUrl: 'https://slides.com',

gatsby-config.js

@@ -9,7 +9,7 @@ module.exports = {
     author: '@ReactVan',
     siteUrl: 'https://reactvancouver.com',
   },
-  flags : { DEV_SSR: true },
+  flags: { DEV_SSR: true },
   plugins: [
     'gatsby-plugin-react-helmet',
     {
@@ -19,6 +19,7 @@ module.exports = {
         path: path.join(__dirname, `src`, `assets`),
       },
     },
+    'gatsby-plugin-image',
     'gatsby-transformer-sharp',
     'gatsby-plugin-sharp',
     {

package.json

@@ -34,44 +34,43 @@
     "@fontsource/space-mono": "^4.0.1",
     "@sanity/block-content-to-react": "^2.0.7",
     "date-fns": "^2.16.1",
-    "framer-motion": "^1.10.3",
-    "gatsby": "^2.29.2",
-    "gatsby-image": "^2.8.0",
-    "gatsby-plugin-emotion": "^5.1.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-source-filesystem": "^2.8.1",
-    "gatsby-source-sanity": "^6.0.4",
-    "gatsby-transformer-sharp": "^2.9.0",
+    "gatsby": "^3.4.2",
+    "gatsby-plugin-emotion": "^6.4.0",
+    "gatsby-plugin-image": "^1.4.1",
+    "gatsby-plugin-manifest": "^3.4.0",
+    "gatsby-plugin-offline": "^4.4.0",
+    "gatsby-plugin-react-helmet": "^4.4.0",
+    "gatsby-plugin-sharp": "^3.4.2",
+    "gatsby-source-filesystem": "^3.4.0",
+    "gatsby-source-sanity": "^7.0.4",
+    "gatsby-transformer-sharp": "^3.4.0",
     "polished": "^4.0.4",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^6.13.1",
-    "react-spring": "^8.0.27"
+    "react-hook-form": "^7.4.2",
+    "react-spring": "^9.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.7",
     "@babel/plugin-proposal-optional-chaining": "^7.12.7",
-    "@storybook/addon-a11y": "^6.1.11",
-    "@storybook/addon-actions": "^6.1.11",
-    "@storybook/addon-knobs": "^6.1.11",
-    "@storybook/addon-links": "^6.1.11",
+    "@storybook/addon-a11y": "^6.2.9",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-knobs": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
     "@storybook/addon-notes": "^5.3.9",
-    "@storybook/addons": "^6.1.11",
-    "@storybook/react": "^6.1.11",
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^9.3.2",
+    "@storybook/addons": "^6.2.9",
+    "@storybook/react": "^6.2.9",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^11.2.6",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.1",
     "babel-plugin-module-resolver": "^4.1.0",
-    "babel-preset-gatsby": "^0.9.1",
+    "babel-preset-gatsby": "^1.4.0",
     "eslint": "^7.16.0",
-    "eslint-config-prettier": "^7.1.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-config-react": "^1.1.7",
     "eslint-plugin-prettier": "^3.3.0",
     "faker": "^5.1.0",

src/components/constructs/Avatar/Avatar.js

@@ -1,23 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withSpacing } from '@utilities/styles/spacing';
-import GatsbyImage from 'gatsby-image';
 import { constructStyles } from './Avatar.styles';
-import Picture from '@elements/Picture';
+import Image from '@elements/Image';
 
-/**
- * @todo Add <Image />
- * @body Avatar implements a lot of duplicate logic from Image element.
- * Placeholder should be moved to a separate partial component and passed to
- * <Image placeholder={AvatarPlaceholder} />
- */
+import Placeholder from './partials/Placeholder';
 
 const Avatar = ({
   alt,
   className,
   firstName,
-  fixed,
-  fluid,
+  data,
   lastName,
   scale,
   src,
@@ -26,50 +19,21 @@ const Avatar = ({
 }) => {
   const styles = constructStyles({ scale });
 
-  if (src) {
+  if (src || data) {
     return (
-      <Picture
+      <Image
         className={className}
         css={styles}
         src={src}
         srcSets={srcSets}
+        data={data}
         alt={alt}
-      />
-    );
-  }
-
-  if (fixed) {
-    return (
-      <GatsbyImage
-        alt={alt}
-        className={className}
-        css={styles}
-        fixed={fixed}
-        {...restProps}
-      />
-    );
-  }
-
-  if (fluid) {
-    return (
-      <GatsbyImage
-        alt={alt}
-        className={className}
-        css={styles}
-        fluid={fluid}
         {...restProps}
       />
     );
   }
 
-  return (
-    <div css={styles} className={className}>
-      <span>
-        {firstName[0]}
-        {lastName[0]}
-      </span>
-    </div>
-  );
+  return <Placeholder css={styles} firstName={firstName} lastName={lastName} />;
 };
 
 Avatar.defaultProps = {
@@ -82,8 +46,7 @@ Avatar.propTypes = {
   alt: PropTypes.string.isRequired,
   className: PropTypes.string,
   firstName: PropTypes.string,
-  fixed: PropTypes.object,
-  fluid: PropTypes.object,
+  data: PropTypes.object,
   lastName: PropTypes.string,
   scale: PropTypes.number,
   src: PropTypes.string,

src/components/constructs/Avatar/partials/Placeholder.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Placeholder = ({ className, firstName, lastName }) => (
+  <div className={className}>
+    <span>
+      {firstName[0]}
+      {lastName[0]}
+    </span>
+  </div>
+);
+
+Placeholder.propTypes = {
+  className: PropTypes.string,
+  firstName: PropTypes.string,
+  lastName: PropTypes.string,
+};
+
+export default Placeholder;

src/components/constructs/Background/Background.js

@@ -6,9 +6,10 @@ import {
   imageStyles,
   placeholderStyles,
 } from './Background.styles';
-import GatsbyImage from 'gatsby-image';
 
-const Background = ({ className, alt, fixed, fluid, src, ...restProps }) => {
+import Image from '@elements/Image';
+
+const Background = ({ className, alt, data, src, ...restProps }) => {
   const backgroundStyles = useMemo(() => constructBackgroundStyles({ src }), [
     src,
   ]);
@@ -26,25 +27,13 @@ const Background = ({ className, alt, fixed, fluid, src, ...restProps }) => {
     );
   }
 
-  if (fixed) {
-    return (
-      <GatsbyImage
-        alt={alt}
-        css={imageStyles}
-        className={className}
-        fixed={fixed}
-        {...restProps}
-      />
-    );
-  }
-
-  if (fluid) {
+  if (data) {
     return (
-      <GatsbyImage
+      <Image
         alt={alt}
         css={imageStyles}
         className={className}
-        fluid={fluid}
+        data={data}
         {...restProps}
       />
     );
@@ -56,8 +45,7 @@ const Background = ({ className, alt, fixed, fluid, src, ...restProps }) => {
 Background.propTypes = {
   alt: PropTypes.string,
   className: PropTypes.string,
-  fixed: PropTypes.object,
-  fluid: PropTypes.object,
+  data: PropTypes.object,
   src: PropTypes.string,
   srcSets: PropTypes.array,
 };

src/components/constructs/Figure/Figure.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getFluidGatsbyImage } from 'gatsby-source-sanity';
+import { getGatsbyImageData } from 'gatsby-source-sanity';
 import { withSpacing } from '@utilities/styles/spacing';
 import { figcaptionStyles } from './Figure.styles';
 import clientConfig from '../../../../config/client';
@@ -11,15 +11,15 @@ const Figure = ({ className, node }) => {
   if (!node?.asset?._ref) {
     return null;
   }
-  const fluid = getFluidGatsbyImage(
+  const imageData = getGatsbyImageData(
     node.asset._ref,
     { maxWidth: 675 },
     clientConfig.sanity
   );
 
   return (
     <figure className={className}>
-      <Image fluid={fluid} alt={node.alt} />
+      <Image data={imageData} alt={node.alt} />
       <figcaption css={figcaptionStyles}>{node.caption}</figcaption>
     </figure>
   );

src/components/constructs/Layout/partials/Nav/Nav.js

@@ -52,7 +52,7 @@ const LayoutNav = ({ links, background, onButtonClick, isCollapsing }) => {
       <animated.nav
         css={mobileNavStyles}
         style={{
-          transform: translateY.interpolate((y) => `translate3d(0,${y}%,0)`),
+          transform: translateY.to((y) => `translate3d(0,${y}%,0)`),
         }}
       >
         <Box py2 px2 backgroundColor="secondary_d">
@@ -77,7 +77,7 @@ const LayoutNav = ({ links, background, onButtonClick, isCollapsing }) => {
       <animated.aside
         css={asideStyles}
         style={{
-          transform: translateX.interpolate((x) => `translate3d(${x}%,0,0)`),
+          transform: translateX.to((x) => `translate3d(${x}%,0,0)`),
         }}
       >
         <MobileNav
@@ -93,7 +93,7 @@ const LayoutNav = ({ links, background, onButtonClick, isCollapsing }) => {
     <animated.nav
       css={navStyles}
       style={{
-        transform: translateY.interpolate((y) => `translate3d(0,${y}%,0)`),
+        transform: translateY.to((y) => `translate3d(0,${y}%,0)`),
       }}
     >
       <Nav

src/components/elements/Image/Image.js

@@ -3,14 +3,13 @@ import PropTypes from 'prop-types';
 import { withSpacing } from '@utilities/styles/spacing';
 import { placeholderStyles } from './Image.styles';
 
-import GatsbyImage from 'gatsby-image';
+import { GatsbyImage } from 'gatsby-plugin-image';
 import Picture from '@elements/Picture';
 
 const Image = ({
   className,
   alt,
-  fixed,
-  fluid,
+  data,
   src,
   srcSets,
   placeholder: Placeholder,
@@ -22,23 +21,13 @@ const Image = ({
     );
   }
 
-  if (fixed) {
+  if (data) {
     return (
       <GatsbyImage
         alt={alt}
         className={className}
-        fixed={fixed}
-        {...restProps}
-      />
-    );
-  }
-
-  if (fluid) {
-    return (
-      <GatsbyImage
-        alt={alt}
-        className={className}
-        fluid={fluid}
+        image={data}
+        placeholder="dominantColor"
         {...restProps}
       />
     );
@@ -54,8 +43,7 @@ const Image = ({
 Image.propTypes = {
   alt: PropTypes.string.isRequired,
   className: PropTypes.string,
-  fixed: PropTypes.object,
-  fluid: PropTypes.object,
+  data: PropTypes.object,
   placeholder: PropTypes.node,
   src: PropTypes.string,
   srcSets: PropTypes.array,