Trunk fix, fix esx imports, useTransitions api change

.github/workflows/gatsby.yml

@@ -77,7 +77,7 @@ jobs:
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
       - name: Build with Gatsby
         env:
-          PREFIX_PATHS: 'true'
+          PREFIX_PATHS: "true"
           GATSBY_PORTFOLIO_GITHUB_TOKEN: ${{ secrets.GATSBY_PORTFOLIO_GITHUB_TOKEN }}
         run: ${{ steps.detect-package-manager.outputs.manager }} run build
       - name: Upload artifact

jest.setup.js

@@ -12,15 +12,15 @@ beforeAll(() => {
   // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
   Object.defineProperty(window, "matchMedia", {
     writable: true,
-    value: jest.fn().mockImplementation(query => ({
+    value: jest.fn().mockImplementation((query) => ({
       matches: false,
       media: query,
       onchange: null,
       addListener: jest.fn(), // Deprecated
       removeListener: jest.fn(), // Deprecated
       addEventListener: jest.fn(),
       removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn(),
+      dispatchEvent: jest.fn()
     }))
   });
 });

src/components/NotSocialLinks.js

@@ -6,7 +6,7 @@ import { faLinkedinIn, faMedium } from "@fortawesome/free-brands-svg-icons";
 import { MarkGithubIcon, MailIcon } from "@primer/octicons-react";
 
 // react tooltip
-import ReactTooltip from "react-tooltip";
+import { Tooltip as ReactTooltip } from "react-tooltip";
 // copy to clipboard
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import styled from "styled-components";

src/components/blog.js

@@ -60,8 +60,7 @@ const BottomContainer = styled.div`
 `;
 
 export function Blog() {
-  const data = useStaticQuery(
-    graphql`
+  const data = useStaticQuery(graphql`
     {
       allMediumPost(
         limit: 3
@@ -83,9 +82,8 @@ export function Blog() {
           }
         }
       }
-      }
-    `
-  );
+    }
+  `);
   return (
     <MainContainer>
       <Container>

src/components/header.js

@@ -12,7 +12,7 @@ import { MenuContext } from "./menuContext";
 import { useMediaQuery } from "./customHooks/useMediaQuery";
 
 // stylesheet
-import styles from "./header.module.css";
+import * as styles from "./header.module.css";
 
 const allTabs = ["Home", "About", "Projects", "Blog", "Contact"];
 const homeTabs = ["Home", "About", "Contact"];
@@ -29,9 +29,8 @@ export const Header = ({
   blogRef
 }) => {
   // context consumer
-  const { activeMenuAndComponent, dispatchActiveMenuAndComponent } = useContext(
-    MenuContext
-  );
+  const { activeMenuAndComponent, dispatchActiveMenuAndComponent } =
+    useContext(MenuContext);
 
   // internal state
   const [toggleMobileNav, setToggleMobileNav] = useState(false);
@@ -40,7 +39,7 @@ export const Header = ({
   const isMobileOrTablet = useMediaQuery("(max-width: 48rem)");
 
   // react-spring animation
-  const transitions = useTransition(toggleMobileNav, null, {
+  const transitions = useTransition(toggleMobileNav, {
     from: { transform: "translate3d(0,-60vh,0)" },
     enter: { transform: "translate3d(0,0,0)" },
     leave: { transform: "translate3d(0,-60vh,0)" }
@@ -96,8 +95,8 @@ export const Header = ({
       {isMobileOrTablet ? (
         <div>
           {/* react-spring animation */}
-          {transitions.map(
-            ({ item, key, props }) =>
+          {transitions(
+            (props, item, key) =>
               item && (
                 <animated.div key={key} style={props} className={styles.item}>
                   {/* page links */}

src/components/homeAboutContact/carets.js

@@ -10,9 +10,8 @@ import { faCaretLeft, faCaretRight } from "@fortawesome/free-solid-svg-icons";
 const navigationItems = ["Home", "About", "Contact"];
 
 export function Carets({ direction }) {
-  const { activeMenuAndComponent, dispatchActiveMenuAndComponent } = useContext(
-    MenuContext
-  );
+  const { activeMenuAndComponent, dispatchActiveMenuAndComponent } =
+    useContext(MenuContext);
 
   // dispatcher
   const dispatchComponent = (payload) => {

src/components/homeAboutContact/contact.js

@@ -10,7 +10,7 @@ import { MailIcon } from "@primer/octicons-react";
 // copy to clipboard
 import { CopyToClipboard } from "react-copy-to-clipboard";
 // react tooltip
-import ReactTooltip from "react-tooltip";
+import { Tooltip as ReactTooltip } from "react-tooltip";
 
 const VerticalContainer = styled.div`
   display: flex;

src/components/homeAboutContact/index.js

@@ -30,7 +30,7 @@ const MainContainer = styled.div`
 export function HomeAboutContact() {
   const { activeMenuAndComponent } = useContext(MenuContext);
 
-  const transition = useTransition(activeMenuAndComponent.Component, null, {
+  const transitions = useTransition(activeMenuAndComponent.Component, {
     from: {
       display: "flex",
       textAlign: "center",
@@ -45,7 +45,7 @@ export function HomeAboutContact() {
 
   return (
     <MainContainer>
-      {transition.map(({ item, key, props }) => (
+      {transitions((props, item, key) => (
         <animated.div key={key} style={props}>
           {item === "Home" ? (
             <Unified bracketLeft="{" bracketRight="}">

src/components/navigationCircles.js

@@ -24,9 +24,8 @@ const Item = styled.a`
 `;
 
 export function NavigationCircles() {
-  const { activeMenuAndComponent, dispatchActiveMenuAndComponent } = useContext(
-    MenuContext
-  );
+  const { activeMenuAndComponent, dispatchActiveMenuAndComponent } =
+    useContext(MenuContext);
 
   // dispatcher
   const dispatchComponent = (payload) => {