fix: post-Gatsby image work TS fixes

ably · Mar 12, 2024 · c7c38f3 · c7c38f3
1 parent 90b6e5a
commit c7c38f3
Show file tree

Hide file tree

Showing 18 changed files with 130 additions and 111 deletions.
diff --git a/src/components/Homepage/BodySection/BodySection.tsx b/src/components/Homepage/BodySection/BodySection.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
 import cn from 'classnames';
-import { ImageProps } from 'src/components/Image';
+import { ImageProps, getImageFromList } from 'src/components/Image';
 import { SectionProps } from '../HomepageContent';
 import { BodySectionDescription } from './BodySectionDescription';
 import { HeroCard } from './Card/HeroCard';
@@ -33,25 +32,13 @@ const gridGapVariants = {
   4: 'gap-24',
 };
 
-const getImage = (images = [], name): { images: ImageProps[]; name: string } => {
-  const result = images.find((image) => image.base === name);
-
-  if (name && result === undefined) {
-    console.warn(`Could not find image '${name}' in list`, images);
-  }
-
-  return result;
-};
-
 export const BodySection = ({ section, images }: { section: SectionProps; images: ImageProps[] }) => {
   const cards = section.cards ?? [];
   const cardsExist = cards.length > 0;
   const columns = section.columns;
   const singleColumn = columns == 1;
   const bottomMargin = sectionBottomMarginVariants[section.bottomMargin];
 
-  console.log(images);
-
   return (
     <section className={bottomMargin}>
       {section.title && <h2 className="ui-text-h2">{section.title}</h2>}
@@ -64,8 +51,13 @@ export const BodySection = ({ section, images }: { section: SectionProps; images
         >
           {cards.map((card, index) => {
             const Card = cardTypes[card.type];
-            const image = getImage(images, card.image);
-            return <Card key={index} {...card} image={image} />;
+            return (
+              <Card
+                key={index}
+                {...card}
+                {...(card.type !== 'hero' && { image: getImageFromList(images, card.image) })}
+              />
+            );
           })}
         </div>
       )}

diff --git a/src/components/Homepage/BodySection/Card/FeatureCard.tsx b/src/components/Homepage/BodySection/Card/FeatureCard.tsx
@@ -4,13 +4,13 @@ import { Image } from '../../../Image';
 
 export const FeatureCard = ({ title, content, image, links }: CardProps) => (
   <div className="flex justify-between flex-col">
-    <Image image={image}></Image>
+    <Image image={image} />
     <h2 style={{ fontSize: '1.5rem' }} className="mt-24 font-medium">
       {title}
     </h2>
     <p style={{ fontSize: '1.125rem' }} className="text-dark-grey mt-8 mb-24 mr-8 leading-6">
       {content}
     </p>
-    <Links links={links}></Links>
+    <Links links={links} />
   </div>
 );
diff --git a/src/components/Homepage/HomepageContent.tsx b/src/components/Homepage/HomepageContent.tsx
@@ -5,7 +5,7 @@ import { ImageProps } from 'src/components/Image';
 export type CardProps = {
   title: string;
   content: string;
-  image: string;
+  image: ImageProps;
   type: 'hero' | 'feature' | 'sdk';
   links?: LinkProps[];
   callToAction?: CallToActionProps;

diff --git a/src/components/Image.tsx b/src/components/Image.tsx
@@ -1,17 +1,30 @@
-import { GatsbyImage, GatsbyImageData, getImage } from 'gatsby-plugin-image';
+import { GatsbyImage, IGatsbyImageData, getImage } from 'gatsby-plugin-image';
 import { ComponentProps } from 'react';
 
-export type ImageProp = {
-  childImageSharp: GatsbyImageData;
+export type ImageProps = {
+  childImageSharp: IGatsbyImageData;
   extension: string;
   publicURL: string;
+  src?: string;
+  base?: string;
 };
 
 export type ImageComponentProps = ComponentProps<'img'> & {
-  image: ImageProp;
+  image: ImageProps;
 };
 
-export const Image = ({ image, src, ...attribs }: ImageProps) => {
+export const getImageFromList = (images: ImageProps[] = [], name?: string | ImageProps): ImageProps | undefined => {
+  const imageName = typeof name === 'string' ? name : name?.base;
+  const result = images.find((image) => image.base === imageName);
+
+  if (name && result === undefined) {
+    console.warn(`Could not find image '${name}' in list`, images);
+  }
+
+  return result;
+};
+
+export const Image = ({ image, src, ...attribs }: ImageComponentProps) => {
   if (!image) {
     return;
   }
@@ -27,8 +40,11 @@ export const Image = ({ image, src, ...attribs }: ImageProps) => {
     return <img {...attribs} src={publicURL} />;
   }
 
-  const { alt } = attribs ?? '';
-  delete attribs.alt;
+  const { alt, className } = attribs ?? {};
+  const imageAttributes = { alt: alt ?? '', className };
+  const fetchedImage = getImage(image.childImageSharp);
 
-  return <GatsbyImage image={getImage(image)} alt={alt} {...attribs} />;
+  if (fetchedImage) {
+    return <GatsbyImage image={fetchedImage} {...imageAttributes} />;
+  }
 };
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
@@ -6,15 +6,14 @@ export default function Link<TState>({
   to,
   external,
   ...props
-}: React.PropsWithoutRef<GatsbyLinkProps<TState>>) {
+}: React.PropsWithoutRef<GatsbyLinkProps<TState>> & { external?: boolean }) {
   const isInternal = checkLinkIsInternal(to);
   const isOnPage = to?.startsWith('#');
 
   /**
    *  Relevant page of documentation: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/#recommendations-for-programmatic-in-app-navigation
    *  "If you need this (in-app navigation) behavior, you should either use an anchor tag or import the navigate helper from gatsby"
    */
-  /* console.log(to, isInternal, !external, !isOnPage); */
   if (isInternal && !external && !isOnPage) {
     const href = normalizeLegacyDocsLink(to);
 

diff --git a/src/components/ProductPage/BodySection/BodySection.tsx b/src/components/ProductPage/BodySection/BodySection.tsx
@@ -6,6 +6,7 @@ import { QuickstartCard } from './Card/QuickstartCard';
 import { ExampleCard } from './Card/ExampleCard';
 import { TutorialCard } from './Card/TutorialCard';
 import { CallToAction } from './CallToAction';
+import { ImageProps, getImageFromList } from 'src/components/Image';
 
 const cardTypes = {
   feature: FeatureCard,
@@ -22,16 +23,6 @@ const betaPillStyle = {
   paddingTop: '0.313rem',
 };
 
-const getImage = (images = [], name): { images: ImageProps[]; name: string } => {
-  const result = images.find((image) => image.base === name);
-
-  if (name && result === undefined) {
-    console.warn(`Could not find image '${name}' in list`, images);
-  }
-
-  return result;
-};
-
 export const BodySection = ({ section, images }: { section: SectionProps; images: ImageProps[] }) => {
   const cards = section.cards ?? [];
   const cardsExist = cards.length > 0;
@@ -64,8 +55,14 @@ export const BodySection = ({ section, images }: { section: SectionProps; images
         >
           {cards.map((card, index) => {
             const Card = cardTypes[card.type as keyof typeof cardTypes];
-            const image = getImage(images, card.image);
-            return <Card key={index} {...card} image={image} />;
+
+            return (
+              <Card
+                key={index}
+                {...card}
+                {...(card.type !== 'hero' && { image: getImageFromList(images, card.image) })}
+              />
+            );
           })}
         </div>
       )}

diff --git a/src/components/ProductPage/BodySection/Card/ExampleCard.tsx b/src/components/ProductPage/BodySection/Card/ExampleCard.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { CardProps } from '../../ProductPageContent';
 import { Image } from '../../../Image';
 import Link from '../../../Link';
@@ -9,7 +8,7 @@ export const ExampleCard = ({ title, image, link, external }: CardProps) => (
     external={external}
     className="items-center border border-extra-light-grey rounded-lg bg-extra-light-grey flex flex-col h-full hover:border-mid-grey hover:text-cool-black group"
   >
-    <Image image={image} style={{ pointerEvents: 'none' }}></Image>
+    <Image image={image} style={{ pointerEvents: 'none' }} />
     <p className="pb-24 ml-8" style={{ fontSize: '1rem' }}>
       {title}
     </p>

diff --git a/src/components/ProductPage/BodySection/Card/FeatureCard.tsx b/src/components/ProductPage/BodySection/Card/FeatureCard.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
 import { CardProps } from '../../ProductPageContent';
 import { Links } from './Links';
 import { Image } from '../../../Image';
 
 export const FeatureCard = ({ title, content, image, links }: CardProps) => (
-  <div className="border border-extra-light-grey rounded-lg bg-extra-light-grey flex justify-between block hover:border-mid-grey hover:text-cool-black group">
+  <div className="border border-extra-light-grey rounded-lg bg-extra-light-grey flex justify-between hover:border-mid-grey hover:text-cool-black group">
     <div className="py-24 pl-24">
       <div className="flex flex-col h-full">
         <div>
@@ -13,9 +12,9 @@ export const FeatureCard = ({ title, content, image, links }: CardProps) => (
             {content}
           </p>
         </div>
-        <Links links={links}></Links>
+        <Links links={links} />
       </div>
     </div>
-    <Image image={image}></Image>
+    <Image image={image} />
   </div>
 );
diff --git a/src/components/ProductPage/BodySection/Card/Links.tsx b/src/components/ProductPage/BodySection/Card/Links.tsx
@@ -2,46 +2,49 @@ import Icon from '@ably/ui/core/Icon';
 import { LinkProps } from '../../ProductPageContent';
 import Link from '../../../Link';
 
-export const Links = ({ links }: { links: LinkProps[] }) => (
-  <div className="mt-auto">
-    {links && links?.length == 1 && (
-      <div>
-        {links.map(({ href, external, text }, index) => {
-          return (
-            <div key={index + text} className="h-full flex">
-              <Link
-                to={href}
-                external={external}
-                className="text-gui-default font-medium mr-4"
-                target="_blank"
-                rel="noopener"
-              >
-                {text}
-              </Link>
-              <Icon name="icon-gui-arrow-right" size="1rem" />
-            </div>
-          );
-        })}
+export const Links = ({ links }: { links?: LinkProps[] }) =>
+  links ? (
+    <>
+      <div className="mt-auto">
+        {links.length === 1 && (
+          <div>
+            {links.map(({ href, external, text }, index) => {
+              return (
+                <div key={index + text} className="h-full flex">
+                  <Link
+                    to={href}
+                    external={external}
+                    className="text-gui-default font-medium mr-4"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    {text}
+                  </Link>
+                  <Icon name="icon-gui-arrow-right" size="1rem" />
+                </div>
+              );
+            })}
+          </div>
+        )}
+        {links.length > 1 && (
+          <ul className="ui-unordered-list" style={{ marginLeft: '0.75rem', marginBottom: '0' }}>
+            {links.map(({ href, external, text }, index) => {
+              return (
+                <li key={index + text}>
+                  <Link
+                    to={href}
+                    external={external}
+                    className="text-gui-default"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {text}
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        )}
       </div>
-    )}
-    {links && links?.length > 1 && (
-      <ul className="ui-unordered-list" style={{ marginLeft: '0.75rem', marginBottom: '0' }}>
-        {links.map(({ href, external, text }, index) => {
-          return (
-            <li key={index + text}>
-              <Link
-                to={href}
-                external={external}
-                className="text-gui-default"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {text}
-              </Link>
-            </li>
-          );
-        })}
-      </ul>
-    )}
-  </div>
-);
+    </>
+  ) : null;
diff --git a/src/components/ProductPage/BodySection/Card/QuickstartCard.tsx b/src/components/ProductPage/BodySection/Card/QuickstartCard.tsx
@@ -1,12 +1,11 @@
-import React from 'react';
 import { CardProps } from '../../ProductPageContent';
 import { Image } from '../../../Image';
 import { Links } from './Links';
 
 export const QuickstartCard = ({ title, content, image, links }: CardProps) => (
   <div className="p-24 border border-extra-light-grey rounded-lg bg-extra-light-grey flex flex-col h-full justify-between hover:border-mid-grey hover:text-cool-black group">
     <div className="flex items-center">
-      <Image image={image} alt={`${title}`} width="32px" />
+      <Image image={image} alt={title} width="32px" />
       <h2 className="ml-8" style={{ fontSize: '1.25rem' }}>
         {title}
       </h2>
@@ -15,6 +14,6 @@ export const QuickstartCard = ({ title, content, image, links }: CardProps) => (
       {content}
     </p>
 
-    <Links links={links}></Links>
+    <Links links={links} />
   </div>
 );
diff --git a/src/components/ProductPage/BodySection/Card/TutorialCard.tsx b/src/components/ProductPage/BodySection/Card/TutorialCard.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
 import { CardProps } from '../../ProductPageContent';
 import { Image } from '../../../Image';
 import { Links } from './Links';
 
 export const TutorialCard = ({ title, image, links }: CardProps) => (
-  <div className="p-24 border border-extra-light-grey rounded-lg bg-extra-light-grey flex flex-col h-full justify-between block hover:border-mid-grey hover:text-cool-black group">
+  <div className="p-24 border border-extra-light-grey rounded-lg bg-extra-light-grey flex flex-col h-full justify-between hover:border-mid-grey hover:text-cool-black group">
     <div className="flex mb-20">
       <Image image={image} alt={title} width="32px" />
       <h2 className="ml-8" style={{ fontSize: '1rem' }}>

diff --git a/src/components/ProductPage/ProductPageContent.tsx b/src/components/ProductPage/ProductPageContent.tsx
@@ -1,11 +1,10 @@
-import React from 'react';
 import { BodySection } from './BodySection/BodySection';
 import { ImageProps } from 'src/components/Image';
 
 export type LinkProps = {
   text: string;
   href: string;
-  external: string;
+  external: boolean;
 };
 
 export type CallToActionProps = {
@@ -19,7 +18,7 @@ export type CardProps = {
   title: string;
   type: string;
   content: string;
-  image: string;
+  image: ImageProps;
   link: string;
   external: boolean;
   links: LinkProps[];

diff --git a/src/components/SDKsPage/index.tsx b/src/components/SDKsPage/index.tsx
@@ -13,7 +13,7 @@ const Content = ({ tab }: { tab: string }) => {
             <h1 className="w-full text-title-xl font-medium">{data.hero.title}</h1>
             <p className="max-w-md text-h3 text-dark-grey font-medium pt-16">{data.hero.subtitle}</p>
           </div>
-          <src className="hidden sm:block" src={hero}></src>
+          <img className="hidden sm:block" src={hero} />
         </div>
       </div>
       <MainSection tab={tab as Tab} />

diff --git a/src/components/StaticImage.tsx b/src/components/StaticImage.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { graphql, useStaticQuery, withPrefix } from 'gatsby';
 import { ComponentProps } from 'react';
 
@@ -10,6 +9,11 @@ export const StaticImage = ({ src, ...attribs }: ComponentProps<'img'>) => {
       }
     }
   `);
+
+  if (!src) {
+    return;
+  }
+
   const assetPrefix = result?.site.assetPrefix ?? '';
   const srcUrl = `${assetPrefix}${withPrefix(src)}`;