From 249361a2e41dedd4a66a162d64f57f86d4eb889c Mon Sep 17 00:00:00 2001
From: Robert Reinhard <robert.reinhard@goodness.inc>
Date: Mon, 28 Oct 2024 15:55:18 -0700
Subject: [PATCH] Support nullable values of Contentful properties

---
 packages/contentful/src/ContentfulVisual.tsx  |  2 +-
 packages/contentful/src/lib/aspectRatio.ts    | 12 ++++-----
 .../src/types/contentfulVisualTypes.ts        | 26 +++++++++----------
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/contentful/src/ContentfulVisual.tsx b/packages/contentful/src/ContentfulVisual.tsx
index b04f9f0..48acf8f 100644
--- a/packages/contentful/src/ContentfulVisual.tsx
+++ b/packages/contentful/src/ContentfulVisual.tsx
@@ -61,7 +61,7 @@ export default function ContentfulVisual(
 }
 
 // Use various asset fields to make the alt from automatically
-function makeAssetAlt(asset: ContentfulAsset | undefined): string {
+function makeAssetAlt(asset: ContentfulAsset | undefined | null): string {
   if (!asset) return ''
   return asset.description || asset.title || asset.fileName || ''
 }
diff --git a/packages/contentful/src/lib/aspectRatio.ts b/packages/contentful/src/lib/aspectRatio.ts
index 04ea95f..9efb85b 100644
--- a/packages/contentful/src/lib/aspectRatio.ts
+++ b/packages/contentful/src/lib/aspectRatio.ts
@@ -9,7 +9,7 @@ export const orientationMediaQueries = [
 
 // Get the aspect ratio from an image asset if it exists
 export function getImageAspect(
-  image: ContentfulImageAsset | undefined
+  image: ContentfulImageAsset | undefined | null
 ): number | undefined {
   if (!image) return undefined
   return image.width / image.height
@@ -28,17 +28,17 @@ export const responsiveAspectCalculator: AspectCalculator = (
 
 // Check whether multiple orientations were provided
 export function hasResponsiveAssets(
-  src: ContentfulVisualEntry | undefined
+  src: ContentfulVisualEntry | undefined | null
 ): boolean {
-  if (!src) return false
+  if (!src) return false;
   const hasLandscape = !!(src.image || src.video),
-    hasPortrait = !!(src.portraitImage || src.portraitVideo)
-  return hasLandscape && hasPortrait
+    hasPortrait = !!(src.portraitImage || src.portraitVideo);
+  return hasLandscape && hasPortrait;
 }
 
 // Check whether multiple aspect ratios were provided
 export function hasResponsiveAspects(
-  src: ContentfulVisualEntry | undefined
+  src: ContentfulVisualEntry | undefined | null
 ): boolean {
   if (!src) return false
   const hasLandscapeAspect = !!(src.image?.width &&
diff --git a/packages/contentful/src/types/contentfulVisualTypes.ts b/packages/contentful/src/types/contentfulVisualTypes.ts
index 38361ed..e420112 100644
--- a/packages/contentful/src/types/contentfulVisualTypes.ts
+++ b/packages/contentful/src/types/contentfulVisualTypes.ts
@@ -1,11 +1,11 @@
 import type { ReactVisualProps } from '@react-visual/react'
 
 export type ContentfulVisualProps = {
-  image?: ContentfulImageAsset
-  video?: ContentfulAsset
-  src?: ContentfulVisualEntry
-  alt?: string // Can be inferrerd
-} & Omit< ReactVisualProps, 'alt' | 'image' | 'video' >
+  image?: ContentfulImageAsset | null;
+  video?: ContentfulAsset | null;
+  src?: ContentfulVisualEntry | null;
+  alt?: string; // Can be inferrerd
+} & Omit<ReactVisualProps, "alt" | "image" | "video">;
 
 export type ContentfulImageAsset = ContentfulAsset & {
   width: number
@@ -13,16 +13,16 @@ export type ContentfulImageAsset = ContentfulAsset & {
 }
 
 export type ContentfulAsset = {
-  title?: string
-  description?: string
+  title?: string | null
+  description?: string // Was not nullable in my tests
   fileName?: string
   url: string
 }
 
 export type ContentfulVisualEntry = {
-  image?: ContentfulImageAsset
-  portraitImage?: ContentfulImageAsset
-  video?: ContentfulAsset
-  portraitVideo?: ContentfulAsset
-  alt: string
-}
+  image?: ContentfulImageAsset | null
+  portraitImage?: ContentfulImageAsset | null
+  video?: ContentfulAsset | null
+  portraitVideo?: ContentfulAsset | null
+  alt: string | null
+};