fix style linting

apps/gatsby/package.json

@@ -18,7 +18,7 @@
     "develop:gatsby": "gatsby develop",
     "lint": "pnpm run lint:syntax && pnpm run lint:style",
     "lint:syntax": "eslint",
-    "lint:style": "prettier -u -c ./src/**/*.**",
+    "lint:style": "prettier -u -c ./src",
     "start": "gatsby develop",
     "serve": "gatsby serve",
     "typecheck": "tsc --noEmit"

apps/gatsby/src/api-client/hooks/useApiClient.tsx

@@ -1,5 +1,5 @@
-import { ApiClient } from "../getApiClient"
+import { ApiClient } from "../getApiClient";
 
 export const useApiClient = () => {
-  return ApiClient.getInstance().client
-}
+  return ApiClient.getInstance().client;
+};

apps/gatsby/src/components/book-call/BookCallEmbed.tsx

@@ -1,4 +1,11 @@
-import React, { MouseEventHandler, useCallback, useContext, useEffect, useRef, useState } from "react"
+import React, {
+  MouseEventHandler,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { companyContactInformation } from "../../configuration/companyContactInformation";
 import { UsercentricsContext } from "../usercentrics/UsercentricsProvider";
 
@@ -12,29 +19,34 @@ declare global {
 }
 
 export const BookCallEmbed = ({ enabled = true }: { enabled?: boolean }) => {
-  const divRef = useRef<HTMLDivElement>(null)
+  const divRef = useRef<HTMLDivElement>(null);
   const [calendlyInitialized, setCalendlyInitialized] = useState(false);
   const url = companyContactInformation.launchCallUrl;
-  const { isClientSide, isInitialized, hasServiceConsent, acceptService } = useContext(UsercentricsContext)
-  const [isAccepted, setIsAccepted] = useState(hasServiceConsent && hasServiceConsent("Calendly"))
+  const { isClientSide, isInitialized, hasServiceConsent, acceptService } =
+    useContext(UsercentricsContext);
+  const [isAccepted, setIsAccepted] = useState(hasServiceConsent && hasServiceConsent("Calendly"));
 
-  const shouldInitCalendly = () => enabled &&
+  const shouldInitCalendly = () =>
+    enabled &&
     isInitialized &&
     !calendlyInitialized &&
     hasServiceConsent &&
     hasServiceConsent("Calendly") &&
     isClientSide &&
-    divRef.current
+    divRef.current;
 
-  const provideConsent: MouseEventHandler<HTMLAnchorElement> = useCallback((e) => {
-    e.preventDefault()
-    if (acceptService) {
-      acceptService("Calendly").then(() => {
-        setIsAccepted(true)
-        initCalendly()
-      })
-    }
-  }, [acceptService, shouldInitCalendly()])
+  const provideConsent: MouseEventHandler<HTMLAnchorElement> = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (acceptService) {
+        acceptService("Calendly").then(() => {
+          setIsAccepted(true);
+          initCalendly();
+        });
+      }
+    },
+    [acceptService, shouldInitCalendly()],
+  );
 
   const initCalendly = useCallback(() => {
     if (shouldInitCalendly()) {
@@ -45,25 +57,35 @@ export const BookCallEmbed = ({ enabled = true }: { enabled?: boolean }) => {
             parentElement: divRef.current,
           });
           setCalendlyInitialized(true);
-          window.clearInterval(interval)
+          window.clearInterval(interval);
         }
-      }, 500)
+      }, 500);
     }
-
-  }, [shouldInitCalendly()])
+  }, [shouldInitCalendly()]);
 
   useEffect(() => {
-    initCalendly()
-  }, [shouldInitCalendly()])
+    initCalendly();
+  }, [shouldInitCalendly()]);
 
-  const div = <div ref={divRef} className="calendly-inline-widget" data-auto-load="false" />
+  const div = <div ref={divRef} className="calendly-inline-widget" data-auto-load="false" />;
 
-  const consentNotice = (!calendlyInitialized && (!hasServiceConsent || !hasServiceConsent("Calendly"))) && <>
-    <p>We use Calendly to embed content that may collect data about your activity.</p>
-    <p>Please provide <a href="#" className="text-launch-orange" onClick={provideConsent}>consent</a> to connect to our partner, Calendly</p>
-  </>
-  return <>
-    {consentNotice}
-    {div}
-  </>
-}
+  const consentNotice = !calendlyInitialized &&
+    (!hasServiceConsent || !hasServiceConsent("Calendly")) && (
+      <>
+        <p>We use Calendly to embed content that may collect data about your activity.</p>
+        <p>
+          Please provide{" "}
+          <a href="#" className="text-launch-orange" onClick={provideConsent}>
+            consent
+          </a>{" "}
+          to connect to our partner, Calendly
+        </p>
+      </>
+    );
+  return (
+    <>
+      {consentNotice}
+      {div}
+    </>
+  );
+};

apps/gatsby/src/components/book-call/hooks/useBookCallModal.tsx

@@ -14,10 +14,9 @@ export const useBookCallModal = () => {
     setVisibility: setModalVisibility,
   } = useModal(() => <BookCallModal enabled={isModalVisible} />, {
     scrollToTop: false,
-    size: "large"
+    size: "large",
   });
 
-
   useEffect(() => {
     window.addEventListener("message", (e) => {
       if (e.data.event && e.data.event.indexOf("calendly")) {

apps/gatsby/src/components/contact-page/ContactForm.tsx

@@ -157,17 +157,13 @@ export const ContactForm = () => {
     <div className="one-small-step">
       <div className="one-small-step__contents">
         <div className="one-small-step__text-container">
-          <h2 className="get-in-touch__heading">
-            Stop Stressing. Start Shipping.
-          </h2>
+          <h2 className="get-in-touch__heading">Stop Stressing. Start Shipping.</h2>
           <p className="one-small-step__text">
             Fill out the form below and tell us more about your project. We’ll get back to you
             within a business day to start making your vision a reality.
           </p>
           {isSuccess ? (
-            <p className="one-small-step__text">
-              Thanks for your inquiry. We'll be in touch!
-            </p>
+            <p className="one-small-step__text">Thanks for your inquiry. We'll be in touch!</p>
           ) : (
             formContent
           )}

apps/gatsby/src/components/general/Policy.tsx

@@ -1,29 +1,29 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
 
 type PolicyProps = {
   policyKey?: string;
 };
 
-const termageddonAPIPath = 'https://app.termageddon.com/api/policy/';
+const termageddonAPIPath = "https://app.termageddon.com/api/policy/";
 
 export const Policy = ({ policyKey }: PolicyProps) => {
   useEffect(() => {
-    const policy = document.getElementById('policy');
+    const policy = document.getElementById("policy");
     if (policy === null || policyKey === undefined) {
-      console.log('Error! Could not find policy element or policy key.');
+      console.log("Error! Could not find policy element or policy key.");
     } else {
       const pol_key = policyKey;
-      const pol_extra = policy.dataset.extra ? '?' + policy.dataset.extra : '';
+      const pol_extra = policy.dataset.extra ? "?" + policy.dataset.extra : "";
       const xhr = new XMLHttpRequest();
       xhr.onload = () => {
         policy.innerHTML = xhr.responseText;
       };
 
       xhr.onerror = function () {
-        policy.innerHTML = 'There has been an error loading this policy!';
+        policy.innerHTML = "There has been an error loading this policy!";
       };
 
-      xhr.open('GET', termageddonAPIPath + pol_key + pol_extra);
+      xhr.open("GET", termageddonAPIPath + pol_key + pol_extra);
       xhr.send();
     }
   }, [policyKey]);
@@ -32,8 +32,8 @@ export const Policy = ({ policyKey }: PolicyProps) => {
     <div className="policy__container">
       <div
         className="policy__content"
-        id='policy'
-        data-extra='h-align=left&h-depth=3&table-style=accordion'
+        id="policy"
+        data-extra="h-align=left&h-depth=3&table-style=accordion"
       />
     </div>
   );

apps/gatsby/src/components/icons/CommunityIcon.tsx

@@ -46,7 +46,10 @@ export const CommunityIcon = ({
           className="community-icon-1"
           d="m47.995,34.389c.009-.131.009-.271.009-.402,0-7.728-6.259-13.987-13.987-13.987s-13.987,6.259-13.987,13.987,6.259,13.987,13.987,13.987"
         />
-        <polyline className="community-icon-1" points="47.995 34.389 48.004 34.389 48.004 47.973 34.017 47.973" />
+        <polyline
+          className="community-icon-1"
+          points="47.995 34.389 48.004 34.389 48.004 47.973 34.017 47.973"
+        />
       </g>
       <path
         className="community-icon-3"
@@ -61,20 +64,25 @@ export const CommunityIcon = ({
           className="community-icon-1"
           d="m56.005,69.611c-.009.131-.009.271-.009.402,0,7.728,6.259,13.987,13.987,13.987s13.987-6.259,13.987-13.987-6.259-13.987-13.987-13.987"
         />
-        <polyline className="community-icon-1" points="56.005 69.611 55.996 69.611 55.996 56.027 69.983 56.027" />
+        <polyline
+          className="community-icon-1"
+          points="56.005 69.611 55.996 69.611 55.996 56.027 69.983 56.027"
+        />
       </g>
       <g>
         <path d="m39.86,72.101l.678,4.36h-13.042s.678-4.36.678-4.36c.164-1.195,1.185-2.084,2.39-2.084h3.452s3.45,0,3.45,0c1.207,0,2.228.888,2.393,2.084Z" />
         <path d="m36.02,63.367c.651.561,1.063,1.393,1.063,2.32,0,.134-.01.268-.027.399-.194,1.504-1.481,2.667-3.039,2.667-1.694,0-3.066-1.374-3.066-3.066,0-.161.011-.318.034-.471.228-1.47,1.498-2.594,3.031-2.594.119,0,.236.008.351.019.628.073,1.198.333,1.652.726Z" />
       </g>
       <g>
-
         <path
           className="community-icon-1"
           d="m34.419,56.036c-.131-.009-.271-.009-.402-.009-7.728,0-13.987,6.259-13.987,13.987s6.259,13.987,13.987,13.987,13.987-6.259,13.987-13.987"
         />
 
-        <polyline className="community-icon-1" points="34.419 56.036 34.419 56.027 48.004 56.027 48.004 70.013" />
+        <polyline
+          className="community-icon-1"
+          points="34.419 56.036 34.419 56.027 48.004 56.027 48.004 70.013"
+        />
       </g>
       <g>
         <line className="community-icon-2" x1="63.462" y1="31.639" x2="76.504" y2="31.639" />

apps/gatsby/src/components/icons/RiskAssessmentIcon.tsx

@@ -56,7 +56,10 @@ export const RiskAssessmentIcon = ({
         </g>
         <polyline className="risk-assessment-2" points="26.945 42.638 29.348 45.041 35.049 39.34" />
         <line className="risk-assessment-2" x1="40.871" y1="42.459" x2="61.288" y2="42.459" />
-        <polyline className="risk-assessment-2" points="26.945 53.829 29.348 56.232 35.049 50.531" />
+        <polyline
+          className="risk-assessment-2"
+          points="26.945 53.829 29.348 56.232 35.049 50.531"
+        />
         <line className="risk-assessment-2" x1="40.871" y1="54.704" x2="61.288" y2="54.704" />
         <line className="risk-assessment-2" x1="40.871" y1="66.95" x2="55.888" y2="66.95" />
         <g>

apps/gatsby/src/components/index-page/ContactForm.tsx

@@ -163,17 +163,13 @@ export const IndexFormSection = () => {
         />
         <div className="one-small-step__text-container">
           <Tagline tagline="Book Your Call" />
-          <h2 className="one-small-step__heading">
-            Stop Stressing. Start Shipping.
-          </h2>
+          <h2 className="one-small-step__heading">Stop Stressing. Start Shipping.</h2>
           <p className="one-small-step__text">
             Fill out the form below and tell us more about your project. We’ll get back to you
             within a business day to start making your vision a reality.
           </p>
           {isSuccess ? (
-            <p className="one-small-step__text">
-              Thanks for your inquiry. We'll be in touch!
-            </p>
+            <p className="one-small-step__text">Thanks for your inquiry. We'll be in touch!</p>
           ) : (
             formContent
           )}

apps/gatsby/src/components/index-page/IndexLaunched.tsx

@@ -89,6 +89,6 @@ export const IndexLaunched = () => {
           Book My Launch Call
         </button>
       </div>
-    </div >
-  )
-}
+    </div>
+  );
+};

apps/gatsby/src/components/index-page/IndexLogos.tsx

@@ -7,22 +7,42 @@ export const IndexLogos = () => (
   <div className="index-logos">
     <ul className="index-logos__contents">
       <li>
-        <StaticImage height={124} src="../../images/portfolio-logos/ezCater_Logo.jpg" alt="ezCater Logo" />
+        <StaticImage
+          height={124}
+          src="../../images/portfolio-logos/ezCater_Logo.jpg"
+          alt="ezCater Logo"
+        />
       </li>
       <li>
         <StaticImage height={124} src="../../images/portfolio-logos/Optum.jpeg" alt="Optum Logo" />
       </li>
       <li>
-        <StaticImage height={124} src="../../images/portfolio-logos/better-manager.png" alt="Better Manager Logo" />
+        <StaticImage
+          height={124}
+          src="../../images/portfolio-logos/better-manager.png"
+          alt="Better Manager Logo"
+        />
       </li>
       <li>
-        <StaticImage height={124} src="../../images/portfolio-logos/meetcaregivers-logo.png" alt="MeetCaregivers Logo" />
+        <StaticImage
+          height={124}
+          src="../../images/portfolio-logos/meetcaregivers-logo.png"
+          alt="MeetCaregivers Logo"
+        />
       </li>
       <li>
-        <StaticImage height={124} src="../../images/portfolio-logos/iclei-logo.png" alt="ICLEI Logo" />
+        <StaticImage
+          height={124}
+          src="../../images/portfolio-logos/iclei-logo.png"
+          alt="ICLEI Logo"
+        />
       </li>
       <li>
-        <StaticImage height={124} src="../../images/portfolio-logos/we-are-rosie-logo.jpg" alt="We Are Rosie Logo" />
+        <StaticImage
+          height={124}
+          src="../../images/portfolio-logos/we-are-rosie-logo.jpg"
+          alt="We Are Rosie Logo"
+        />
       </li>
     </ul>
   </div>

apps/gatsby/src/components/index-page/IndexScorecard.tsx

@@ -25,7 +25,11 @@ export const IndexScorecard = () => {
             Success Scorecard. By answering just 21 quick questions, you’ll see if you’re set up for
             success – or what you need to change for you to reach your goals.
           </p>
-          <button className="index-scorecard__button button" type="button" onClick={() => setVisibility(true)}>
+          <button
+            className="index-scorecard__button button"
+            type="button"
+            onClick={() => setVisibility(true)}
+          >
             <span>Download the Scorecard </span>
             <FontAwesomeIcon icon={faArrowRight} />
           </button>