From d5bdb942a6abffb2af990fde965e1fad3a8696f9 Mon Sep 17 00:00:00 2001
From: Robert Reinhard <robert.reinhard@bukwild.com>
Date: Tue, 28 Nov 2023 18:31:06 -0800
Subject: [PATCH 1/7] Create ContentfulVisual package

Based on NextVisual
---
 packages/contentful/README.md                 | 83 +++++++++++++++++++
 packages/contentful/cypress.config.ts         | 13 +++
 .../cypress/component/ContentfulVisual.cy.tsx | 54 ++++++++++++
 .../contentful/cypress/support/commands.ts    | 36 ++++++++
 .../cypress/support/component-index.html      | 20 +++++
 .../contentful/cypress/support/component.ts   | 21 +++++
 packages/contentful/cypress/tsconfig.json     | 18 ++++
 packages/contentful/package.json              | 33 ++++++++
 packages/contentful/src/ContentfulVisual.tsx  | 40 +++++++++
 packages/contentful/src/index.ts              |  4 +
 .../src/types/contentfulVisualTypes.ts        |  3 +
 packages/contentful/tsconfig.json             |  7 ++
 12 files changed, 332 insertions(+)
 create mode 100644 packages/contentful/README.md
 create mode 100644 packages/contentful/cypress.config.ts
 create mode 100644 packages/contentful/cypress/component/ContentfulVisual.cy.tsx
 create mode 100644 packages/contentful/cypress/support/commands.ts
 create mode 100644 packages/contentful/cypress/support/component-index.html
 create mode 100644 packages/contentful/cypress/support/component.ts
 create mode 100644 packages/contentful/cypress/tsconfig.json
 create mode 100644 packages/contentful/package.json
 create mode 100644 packages/contentful/src/ContentfulVisual.tsx
 create mode 100644 packages/contentful/src/index.ts
 create mode 100644 packages/contentful/src/types/contentfulVisualTypes.ts
 create mode 100644 packages/contentful/tsconfig.json

diff --git a/packages/contentful/README.md b/packages/contentful/README.md
new file mode 100644
index 0000000..76f8313
--- /dev/null
+++ b/packages/contentful/README.md
@@ -0,0 +1,83 @@
+# @react-visual/next [![react-visual](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/fn6c7w&style=flat&logo=cypress)](https://cloud.cypress.io/projects/fn6c7w/runs)
+
+Renders images and videos into a container.  Features:
+
+- Uses `next/image` to render images
+- Easily render assets using aspect ratios
+- Videos are lazyloaded (unless `priority` flag is set)
+
+## Install
+
+```sh
+yarn add @react-visual/next
+```
+
+Images will be rendered using `next/image` so expect to do configuration of [`remotePatterns`](https://nextjs.org/docs/app/api-reference/components/image#remotepatterns) for CMS hosted images.
+
+## Usage
+
+```jsx
+import Visual from '@react-visual/next'
+
+export default function Example() {
+  return (
+    <Visual
+      image='https://placehold.co/300x150'
+      video='https://placehold.co/300x150.mp4'
+      aspect={300/150}
+      sizes='100vw'
+      alt='Example using placeholder images' />
+  )
+}
+```
+
+For more examples, read [the Cypress component tests](./cypress/component).
+
+## Props
+
+### Sources
+
+| Prop | Type | Description
+| -- | -- | --
+| `image` | `string` | URL to an image asset.
+| `video` | `string` | URL to a video asset asset.
+| `placeholderData` | `string` | A Data URL that is rendered before the image loads via [`next/image`'s `blurDataURL`](https://nextjs.org/docs/pages/api-reference/components/image#blurdataurl).
+
+### Layout
+
+| Prop | Type | Description
+| -- | -- | --
+| `expand` | `boolean` | Make the Visual fill it's container via CSS using absolute positioning.
+| `aspect` | `number` | Force the Visual to a specific aspect ratio.
+| `width` | `number`, `string` | A CSS dimension value or a px number.
+| `height` | `number`, `string` | A CSS dimension value or a px number.
+| `fit` | `string` | An [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) value that is applied to the assets.  Defaults to `cover`.
+| `position` | `string` | An [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) value.
+
+### Loading
+
+| Prop | Type | Description
+| -- | -- | --
+| `priority` | `boolean` | Sets [`next/image`'s `priority`](https://nextjs.org/docs/pages/api-reference/components/image#priority) and videos to not lazy load.
+| `sizes` | `string` | Sets [`next/image`'s `sizes`](https://nextjs.org/docs/pages/api-reference/components/image#sizes) prop.
+| `imageLoader` | `Function` | This is passed through [to `next/image`'s `loader` prop](https://nextjs.org/docs/app/api-reference/components/image#loader).
+
+### Video
+
+| Prop | Type | Description
+| -- | -- | --
+| `paused` | `boolean` | Disables autoplay of videos. This prop is reactive, unlike the `paused` property of the html `<video>` tag.  You can set it to `true` to pause a playing video or set it to `false` to play a paused video.
+
+
+### Accessibility
+
+| Prop | Type | Description
+| -- | -- | --
+| `alt` | `string` | Sets the  alt attribute or aria-label value, depending on asset type.
+
+### Theming
+
+| Prop | Type | Description
+| -- | -- | --
+| `className` | `string` | Add a custom CSS class.
+| `style` | `CSSProperties` | Add additional styles.
diff --git a/packages/contentful/cypress.config.ts b/packages/contentful/cypress.config.ts
new file mode 100644
index 0000000..27593d4
--- /dev/null
+++ b/packages/contentful/cypress.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  viewportWidth: 500,
+  viewportHeight: 500,
+  component: {
+    specPattern: "cypress/component/**/*.cy.{js,jsx,ts,tsx}",
+    devServer: {
+      framework: "next",
+      bundler: "webpack",
+    },
+  },
+});
diff --git a/packages/contentful/cypress/component/ContentfulVisual.cy.tsx b/packages/contentful/cypress/component/ContentfulVisual.cy.tsx
new file mode 100644
index 0000000..cd4a92d
--- /dev/null
+++ b/packages/contentful/cypress/component/ContentfulVisual.cy.tsx
@@ -0,0 +1,54 @@
+import ContentfulVisual from '../../src'
+
+// Viewport sizes
+const VW = Cypress.config('viewportWidth'),
+  VH = Cypress.config('viewportHeight')
+
+describe('no asset', () => {
+
+  it('renders nothing', () => {
+    cy.mount(<ContentfulVisual
+      width={300}
+      height={200}
+      alt=''
+      data-cy='next-visual' />)
+    cy.get('[data-cy=next-visual]').should('not.exist')
+  })
+
+})
+
+describe('fixed size', () => {
+
+  it.only('renders image', () => {
+    cy.mount(<ContentfulVisual
+      image='https://placehold.co/300x200'
+      width={300}
+      height={200}
+      alt=''/>)
+    cy.get('img').hasDimensions(300, 200)
+  })
+
+  it('renders video', () => {
+    cy.mount(<ContentfulVisual
+      video='https://placehold.co/300x200.mp4'
+      width={300}
+      height={200}
+      alt=''/>)
+    cy.get('video').hasDimensions(300, 200)
+    cy.get('video').isPlaying()
+  })
+
+  it('renders image & video', () => {
+    cy.mount(<ContentfulVisual
+      image='https://placehold.co/300x200/black/white'
+      video='https://placehold.co/300x200.mp4'
+      width={300}
+      height={200}
+      alt=''
+      data-cy='next-visual' />)
+    cy.get('[data-cy=next-visual]').hasDimensions(300, 200)
+    cy.get('img').hasDimensions(300, 200)
+    cy.get('video').hasDimensions(300, 200)
+    cy.get('video').isPlaying()
+  })
+})
diff --git a/packages/contentful/cypress/support/commands.ts b/packages/contentful/cypress/support/commands.ts
new file mode 100644
index 0000000..8f3a20c
--- /dev/null
+++ b/packages/contentful/cypress/support/commands.ts
@@ -0,0 +1,36 @@
+/// <reference types="cypress" />
+
+// Asset that el has dimensions
+Cypress.Commands.add('hasDimensions',
+  { prevSubject: true },
+  (subject, width, height) => {
+  cy.wrap(subject).invoke('width').should('equal', width)
+  cy.wrap(subject).invoke('height').should('equal', height)
+})
+
+// Check that a video is playing
+// https://glebbahmutov.com/blog/test-video-play/
+Cypress.Commands.add('isPlaying',
+  { prevSubject: true },
+  (subject) => {
+  cy.wrap(subject).should('have.prop', 'paused', false)
+})
+
+// Add Typescript support for custom commaands
+// https://docs.cypress.io/guides/tooling/typescript-support#Types-for-Custom-Commands
+export {};
+declare global {
+  namespace Cypress {
+    interface Chainable {
+
+      hasDimensions(
+        width: number,
+        height: number
+      ): Chainable<void>
+
+      isPlaying(): Chainable<void>
+    }
+  }
+}
+
+
diff --git a/packages/contentful/cypress/support/component-index.html b/packages/contentful/cypress/support/component-index.html
new file mode 100644
index 0000000..e9a4010
--- /dev/null
+++ b/packages/contentful/cypress/support/component-index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+    <!-- Used by Next.js to inject CSS. -->
+    <div id="__next_css__DO_NOT_USE__"></div>
+    <style>
+      html, body {
+        padding: 0;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/packages/contentful/cypress/support/component.ts b/packages/contentful/cypress/support/component.ts
new file mode 100644
index 0000000..41b935d
--- /dev/null
+++ b/packages/contentful/cypress/support/component.ts
@@ -0,0 +1,21 @@
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/react18'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
diff --git a/packages/contentful/cypress/tsconfig.json b/packages/contentful/cypress/tsconfig.json
new file mode 100644
index 0000000..537c251
--- /dev/null
+++ b/packages/contentful/cypress/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "jsx": "preserve",
+    "lib": [
+      "es5",
+      "dom"
+    ],
+    "types": [
+      "cypress",
+      "node"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ]
+}
diff --git a/packages/contentful/package.json b/packages/contentful/package.json
new file mode 100644
index 0000000..c49979f
--- /dev/null
+++ b/packages/contentful/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@react-visual/contentful",
+  "version": "0.7.1",
+  "description": "Image and video renderer for Contentful assets.",
+  "author": "Bukwild <info@bukwild.com>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*"
+  ],
+  "scripts": {
+    "build": "rm -rf dist/* && tsc",
+    "test": "cypress run --component"
+  },
+  "dependencies": {
+    "@react-visual/react": "^0.7.1"
+  },
+  "peerDependencies": {
+    "react": "^18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.18",
+    "@types/react-dom": "^18.2.7",
+    "cypress": "^12.17.3",
+    "react": "^18",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.1.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/contentful/src/ContentfulVisual.tsx b/packages/contentful/src/ContentfulVisual.tsx
new file mode 100644
index 0000000..6425668
--- /dev/null
+++ b/packages/contentful/src/ContentfulVisual.tsx
@@ -0,0 +1,40 @@
+import Image from 'next/image'
+import type { ReactElement } from 'react'
+
+import ReactVisual, {
+  collectDataAttributes,
+} from '@react-visual/react'
+
+import { ContentfulVisualProps } from './types/contentfulVisualTypes'
+
+// Render a Sanity image via Next/Image
+export default function NextVisual(
+  props: ContentfulVisualProps
+): ReactElement | null {
+
+  // Destructure props
+  const {
+    image,
+    video,
+    expand,
+    aspect,
+    width,
+    height,
+    fit = 'cover',
+    position,
+    priority,
+    sizes,
+    imageLoader,
+    paused,
+    alt,
+    className = '',
+    style = {},
+  } = props
+
+  // If no asset, return nothing
+  if (!image && !video) return null
+
+  return (
+    <ReactVisual { ...props } />
+  )
+}
diff --git a/packages/contentful/src/index.ts b/packages/contentful/src/index.ts
new file mode 100644
index 0000000..34efdd3
--- /dev/null
+++ b/packages/contentful/src/index.ts
@@ -0,0 +1,4 @@
+import ContentfulVisual from './ContentfulVisual'
+
+export default ContentfulVisual
+export { ContentfulVisualProps } from './types/contentfulVisualTypes'
diff --git a/packages/contentful/src/types/contentfulVisualTypes.ts b/packages/contentful/src/types/contentfulVisualTypes.ts
new file mode 100644
index 0000000..e3ae378
--- /dev/null
+++ b/packages/contentful/src/types/contentfulVisualTypes.ts
@@ -0,0 +1,3 @@
+import type { ReactVisualProps } from '@react-visual/react'
+
+export type ContentfulVisualProps = ReactVisualProps
diff --git a/packages/contentful/tsconfig.json b/packages/contentful/tsconfig.json
new file mode 100644
index 0000000..009925e
--- /dev/null
+++ b/packages/contentful/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist/"
+  },
+  "include": [ "src" ]
+}

From f62d5f9730492f81430daef4706ce09f9503b7b8 Mon Sep 17 00:00:00 2001
From: Robert Reinhard <robert.reinhard@bukwild.com>
Date: Wed, 29 Nov 2023 17:08:59 -0800
Subject: [PATCH 2/7] Adding support for Contentful assets

---
 packages/contentful/README.md                 |  36 +++++
 .../cypress/component/ContentfulVisual.cy.tsx |  55 ++++----
 .../contentful/cypress/fixtures/assets.ts     |  31 +++++
 .../contentful/cypress/fixtures/entries.ts    |  14 ++
 .../contentful/cypress/support/commands.ts    |   2 +
 packages/contentful/src/ContentfulVisual.tsx  | 123 ++++++++++++++----
 packages/contentful/src/index.ts              |   7 +-
 .../src/types/contentfulVisualTypes.ts        |  27 +++-
 packages/react/src/ReactVisual.tsx            |   2 +-
 packages/react/src/VisualWrapper.tsx          |   3 +-
 packages/react/src/index.ts                   |   5 +-
 11 files changed, 247 insertions(+), 58 deletions(-)
 create mode 100644 packages/contentful/cypress/fixtures/assets.ts
 create mode 100644 packages/contentful/cypress/fixtures/entries.ts

diff --git a/packages/contentful/README.md b/packages/contentful/README.md
index 76f8313..dbc4baf 100644
--- a/packages/contentful/README.md
+++ b/packages/contentful/README.md
@@ -31,6 +31,42 @@ export default function Example() {
 }
 ```
 
+```gql
+fragment visual on Visual {
+	image { ...image }
+  portraitImage { ...image }
+  video { ...video }
+  portraitVideo { ...video }
+  alt
+}
+
+fragment image on Asset {
+	title
+  description
+  fileName
+  title
+  description
+  width
+  height
+  url
+}
+
+fragment video on Asset {
+  title
+  description
+  fileName
+  url
+}
+```
+
+```gql
+query heroBlockEntryQuery {
+  heroBlock(id: "3T13NtVzGIOKRMISRYRDhO") {
+    background { ...visual }
+  }
+}
+```
+
 For more examples, read [the Cypress component tests](./cypress/component).
 
 ## Props
diff --git a/packages/contentful/cypress/component/ContentfulVisual.cy.tsx b/packages/contentful/cypress/component/ContentfulVisual.cy.tsx
index cd4a92d..e2d0e04 100644
--- a/packages/contentful/cypress/component/ContentfulVisual.cy.tsx
+++ b/packages/contentful/cypress/component/ContentfulVisual.cy.tsx
@@ -1,8 +1,11 @@
 import ContentfulVisual from '../../src'
+import { imageAsset, videoAsset } from '../fixtures/assets'
+import { visualEntry } from '../fixtures/entries'
 
-// Viewport sizes
+// Dimensions
 const VW = Cypress.config('viewportWidth'),
-  VH = Cypress.config('viewportHeight')
+  VH = Cypress.config('viewportHeight'),
+  landscapeAspect = imageAsset.width / imageAsset.height
 
 describe('no asset', () => {
 
@@ -17,38 +20,32 @@ describe('no asset', () => {
 
 })
 
-describe('fixed size', () => {
+describe('contentful asset props', () => {
 
-  it.only('renders image', () => {
-    cy.mount(<ContentfulVisual
-      image='https://placehold.co/300x200'
-      width={300}
-      height={200}
-      alt=''/>)
-    cy.get('img').hasDimensions(300, 200)
+  it('renders image', () => {
+    cy.mount(<ContentfulVisual image={ imageAsset } />)
+    cy.get('img')
+      .hasDimensions(VW, VW / landscapeAspect)
+      .invoke('attr', 'alt').should('eq', imageAsset.title)
+    // Test srcset
+    cy.get('img').its('[0].currentSrc').should('contain', 'w=640')
   })
 
-  it('renders video', () => {
+  it('can override inferred props', () => {
     cy.mount(<ContentfulVisual
-      video='https://placehold.co/300x200.mp4'
-      width={300}
-      height={200}
-      alt=''/>)
-    cy.get('video').hasDimensions(300, 200)
-    cy.get('video').isPlaying()
+      image={ imageAsset }
+      aspect={ 1 }
+      alt='Override' />)
+    cy.get('img')
+      .hasDimensions(VW, VW)
+      .invoke('attr', 'alt').should('eq', 'Override')
   })
 
-  it('renders image & video', () => {
-    cy.mount(<ContentfulVisual
-      image='https://placehold.co/300x200/black/white'
-      video='https://placehold.co/300x200.mp4'
-      width={300}
-      height={200}
-      alt=''
-      data-cy='next-visual' />)
-    cy.get('[data-cy=next-visual]').hasDimensions(300, 200)
-    cy.get('img').hasDimensions(300, 200)
-    cy.get('video').hasDimensions(300, 200)
-    cy.get('video').isPlaying()
+  it('renders video', () => {
+    cy.mount(<ContentfulVisual video={ videoAsset } aspect={ 16 / 9} />)
+    cy.get('video')
+      .hasDimensions(VW, VW / (16/9) )
+      .invoke('attr', 'aria-label').should('eq', videoAsset.description)
   })
+
 })
diff --git a/packages/contentful/cypress/fixtures/assets.ts b/packages/contentful/cypress/fixtures/assets.ts
new file mode 100644
index 0000000..312d287
--- /dev/null
+++ b/packages/contentful/cypress/fixtures/assets.ts
@@ -0,0 +1,31 @@
+export const imageAsset = {
+  title: "Landscape gradient",
+  description: "",
+  fileName: "landscape.png",
+  width: 1280,
+  height: 720,
+  url: "https://images.ctfassets.net/x9fe3hhqauxm/6WN8Zz47zmXelBLDenfteO/7e87ed7484738fd97fd86ac67f6feed5/tumblr_n8xc9t24W31tf8vylo1_1280.png"
+}
+
+export const portraitImageAsset = {
+  title: "Square gradient",
+  description: null,
+  fileName: "square.png",
+  width: 1280,
+  height: 1280,
+  url: "https://images.ctfassets.net/x9fe3hhqauxm/1lsKAmirOYNDVu0bfCfQ2H/32da927183924f22c535a74a10512817/tumblr_n8z97bAEMU1tf8vylo1_1280.png"
+}
+
+export const videoAsset = {
+  title: "Background Loop",
+  description: "Background loop description",
+  fileName: "Backround_Loop.mp4",
+  url: "https://videos.ctfassets.net/x9fe3hhqauxm/3TMXSh7C5nR1lUOeUygMou/15eccf4eaddcf1289c5b2b9ca83c90c4/PANDORA_ANIMATION_5.mp4"
+}
+
+export const portraitVideoAsset = {
+  title: "Portrait Loop",
+  description: "",
+  fileName: "Portait_Loop.mp4",
+  url: "https://videos.ctfassets.net/x9fe3hhqauxm/2mveMy2NaxbwfIp6ABl8xc/641f890eb10a329766d52d4805d404b4/PANDORA_ANIMATION_4.mp4"
+}
diff --git a/packages/contentful/cypress/fixtures/entries.ts b/packages/contentful/cypress/fixtures/entries.ts
new file mode 100644
index 0000000..7e0cb11
--- /dev/null
+++ b/packages/contentful/cypress/fixtures/entries.ts
@@ -0,0 +1,14 @@
+import {
+  imageAsset,
+  portraitImageAsset,
+  videoAsset,
+  portraitVideoAsset
+} from './assets'
+
+export const visualEntry = {
+  image: imageAsset,
+  portraitImage: portraitImageAsset,
+  video: videoAsset,
+  portraitVideo: portraitVideoAsset,
+  alt: 'Description',
+}
diff --git a/packages/contentful/cypress/support/commands.ts b/packages/contentful/cypress/support/commands.ts
index 8f3a20c..ef1fb09 100644
--- a/packages/contentful/cypress/support/commands.ts
+++ b/packages/contentful/cypress/support/commands.ts
@@ -6,6 +6,7 @@ Cypress.Commands.add('hasDimensions',
   (subject, width, height) => {
   cy.wrap(subject).invoke('width').should('equal', width)
   cy.wrap(subject).invoke('height').should('equal', height)
+  cy.wrap(subject)
 })
 
 // Check that a video is playing
@@ -14,6 +15,7 @@ Cypress.Commands.add('isPlaying',
   { prevSubject: true },
   (subject) => {
   cy.wrap(subject).should('have.prop', 'paused', false)
+  cy.wrap(subject)
 })
 
 // Add Typescript support for custom commaands
diff --git a/packages/contentful/src/ContentfulVisual.tsx b/packages/contentful/src/ContentfulVisual.tsx
index 6425668..27db350 100644
--- a/packages/contentful/src/ContentfulVisual.tsx
+++ b/packages/contentful/src/ContentfulVisual.tsx
@@ -1,40 +1,117 @@
-import Image from 'next/image'
 import type { ReactElement } from 'react'
+import ReactVisual from '@react-visual/react'
+import { ContentfulAsset, ContentfulImageAsset, ContentfulVisualEntry, ContentfulVisualProps } from './types/contentfulVisualTypes'
+import type { AspectCalculator, ImageLoader, VideoLoader } from '@react-visual/react'
 
-import ReactVisual, {
-  collectDataAttributes,
-} from '@react-visual/react'
-
-import { ContentfulVisualProps } from './types/contentfulVisualTypes'
-
-// Render a Sanity image via Next/Image
-export default function NextVisual(
+// Render a Visual using Contentful data
+export default function ContentfulVisual(
   props: ContentfulVisualProps
 ): ReactElement | null {
 
-  // Destructure props
+  // Destructure some props
   const {
     image,
     video,
-    expand,
+    src,
     aspect,
-    width,
-    height,
-    fit = 'cover',
-    position,
-    priority,
-    sizes,
     imageLoader,
-    paused,
+    videoLoader,
+    sourceTypes,
+    sourceMedia,
     alt,
-    className = '',
-    style = {},
   } = props
 
-  // If no asset, return nothing
-  if (!image && !video) return null
+  // Is this a responsive instance
+  const isResponsive = hasResponsiveAssets(src)
 
+  // Make a Visual instance
   return (
-    <ReactVisual { ...props } />
+    <ReactVisual
+
+      // Passthrough most props
+      {...props}
+
+      // Props that have calculated fallbaks
+      image={ image || src }
+      video={ video || src }
+      imageLoader={ imageLoader || defaultImageLoader }
+      videoLoader={ videoLoader || defaultVideoLoader }
+      sourceTypes={ sourceTypes || contentfulModernFormats }
+      sourceMedia={ sourceMedia || (
+        isResponsive ?
+          orientationMediaQueries :
+          undefined
+      )}
+      aspect={ aspect || (
+        isResponsive ?
+          responsiveAspectCalculator :
+          getImageAspect(image || src?.image || src?.portraitImage)
+      )}
+      alt={ alt || src?.alt || makeAssetAlt(image) || makeAssetAlt(video)}
+    />
   )
 }
+
+const defaultImageLoader: ImageLoader = ({ src, width, type, media }) => {
+
+  // Use portrait image if it exists, otherwise fallback to landscape
+  const url = media?.includes('portrait') && src.portraitImage ?
+    src.portraitImage.url :
+    src.image?.url || src.url
+
+  // Make Contentful resizing instructions
+  const query = new URLSearchParams({ w: String(width) })
+
+  // Optionally set the format
+  if (type?.includes('avif')) query.set('fm', 'avif')
+  else if (type?.includes('webp')) query.set('fm', 'webp')
+
+  // Make the query with formatting instructions
+  return `${url}?${query}`
+}
+
+// Use portrait video from `src` prop or fallback to url
+const defaultVideoLoader: VideoLoader = ({ src, media }) => {
+  return media?.includes('portrait') && src.portraitVideo ?
+    src.portraitVideo.url :
+    src.video?.url || src.url
+}
+
+// Get the aspect ratio from an image asset if it exists
+function getImageAspect(
+  image: ContentfulImageAsset | undefined
+): number | undefined {
+  if (!image) return undefined
+  return image.width / image.height
+}
+
+// Make the aspect ratio for responsive assets
+const responsiveAspectCalculator: AspectCalculator = (
+  { media, image, video }
+) => {
+  console.log('aspect calculator')
+  return 1
+}
+
+// The types that Contentful's CDN can produce
+const contentfulModernFormats = ['image/avif', 'image/webp']
+
+// Check whether multiple orientations weMediae provided
+function hasResponsiveAssets(src: ContentfulVisualEntry | undefined): boolean {
+  if (!src) return false
+  const hasLandscape = !!(src.image || src.video),
+    hasPortrait = !!(src.portraitImage || src.portraitVideo)
+  return hasLandscape && hasPortrait
+}
+
+// The media queries that are used for default responsive visuals
+const orientationMediaQueries = [
+  '(orientation:landscape)',
+  '(orientation:portrait)',
+]
+
+// Use various asset fields to make the alt from automatically
+function makeAssetAlt(asset: ContentfulAsset | undefined): string {
+  if (!asset) return ''
+  return asset.description || asset.title || asset.fileName || ''
+}
diff --git a/packages/contentful/src/index.ts b/packages/contentful/src/index.ts
index 34efdd3..1023148 100644
--- a/packages/contentful/src/index.ts
+++ b/packages/contentful/src/index.ts
@@ -1,4 +1,9 @@
 import ContentfulVisual from './ContentfulVisual'
 
 export default ContentfulVisual
-export { ContentfulVisualProps } from './types/contentfulVisualTypes'
+export {
+  ContentfulVisualProps,
+  ContentfulImageAsset,
+  ContentfulAsset,
+  ContentfulVisualEntry,
+} from './types/contentfulVisualTypes'
diff --git a/packages/contentful/src/types/contentfulVisualTypes.ts b/packages/contentful/src/types/contentfulVisualTypes.ts
index e3ae378..38361ed 100644
--- a/packages/contentful/src/types/contentfulVisualTypes.ts
+++ b/packages/contentful/src/types/contentfulVisualTypes.ts
@@ -1,3 +1,28 @@
 import type { ReactVisualProps } from '@react-visual/react'
 
-export type ContentfulVisualProps = ReactVisualProps
+export type ContentfulVisualProps = {
+  image?: ContentfulImageAsset
+  video?: ContentfulAsset
+  src?: ContentfulVisualEntry
+  alt?: string // Can be inferrerd
+} & Omit< ReactVisualProps, 'alt' | 'image' | 'video' >
+
+export type ContentfulImageAsset = ContentfulAsset & {
+  width: number
+  height: number
+}
+
+export type ContentfulAsset = {
+  title?: string
+  description?: string
+  fileName?: string
+  url: string
+}
+
+export type ContentfulVisualEntry = {
+  image?: ContentfulImageAsset
+  portraitImage?: ContentfulImageAsset
+  video?: ContentfulAsset
+  portraitVideo?: ContentfulAsset
+  alt: string
+}
diff --git a/packages/react/src/ReactVisual.tsx b/packages/react/src/ReactVisual.tsx
index 3247881..6ad2451 100644
--- a/packages/react/src/ReactVisual.tsx
+++ b/packages/react/src/ReactVisual.tsx
@@ -63,9 +63,9 @@ export default function ReactVisual(
         sourceTypes,
         sourceMedia,
         style: { // Expand to wrapper when wrapper has layout
-          ...(aspect || expand ? fillStyles : undefined),
           width: width ? '100%': undefined,
           height: height ? '100%' : undefined,
+          ...(aspect || expand ? fillStyles : undefined),
         }
       }} /> }
 
diff --git a/packages/react/src/VisualWrapper.tsx b/packages/react/src/VisualWrapper.tsx
index 9877067..92d73a8 100644
--- a/packages/react/src/VisualWrapper.tsx
+++ b/packages/react/src/VisualWrapper.tsx
@@ -20,12 +20,11 @@ export default function VisualWrapper({
 
   // If aspect is a function, invoke it to determine the aspect ratio
   let aspectRatio, aspectStyleTag, aspectClasses
-  if (typeof aspect == 'function' && sourceMedia?.length) {
+  if (typeof aspect == 'function' && sourceMedia && sourceMedia.length) {
     ({ aspectStyleTag, aspectClasses } = makeResponsiveAspects({
       aspectCalculator: aspect,
       sourceMedia, image, video
     }))
-    console.log(aspectClasses, aspectStyleTag )
   } else aspectRatio = aspect
 
   // Make the wrapper style.  If expanding, use normal fill rules. Otherwise,
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 9b03302..5329140 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -8,5 +8,8 @@ export { LazyVideo, VisualWrapper, collectDataAttributes }
 export {
   ReactVisualProps,
   ObjectFit,
-  ObjectFitOption
+  ObjectFitOption,
+  AspectCalculator,
+  ImageLoader,
+  VideoLoader,
 } from './types/reactVisualTypes'

From 46312f3baca2a6a613f99c3f90b4a75ad3886080 Mon Sep 17 00:00:00 2001
From: Robert Reinhard <robert.reinhard@bukwild.com>
Date: Wed, 29 Nov 2023 20:09:02 -0800
Subject: [PATCH 3/7] Finish responsive image support

---
 .../cypress/component/ContentfulVisual.cy.tsx | 32 ++++++++++++++++---
 packages/contentful/src/ContentfulVisual.tsx  | 31 ++++++++++++------
 packages/react/src/VisualWrapper.tsx          | 10 ++++--
 3 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/packages/contentful/cypress/component/ContentfulVisual.cy.tsx b/packages/contentful/cypress/component/ContentfulVisual.cy.tsx
index e2d0e04..2ae5e33 100644
--- a/packages/contentful/cypress/component/ContentfulVisual.cy.tsx
+++ b/packages/contentful/cypress/component/ContentfulVisual.cy.tsx
@@ -1,5 +1,5 @@
 import ContentfulVisual from '../../src'
-import { imageAsset, videoAsset } from '../fixtures/assets'
+import { imageAsset, portraitImageAsset, videoAsset } from '../fixtures/assets'
 import { visualEntry } from '../fixtures/entries'
 
 // Dimensions
@@ -27,8 +27,7 @@ describe('contentful asset props', () => {
     cy.get('img')
       .hasDimensions(VW, VW / landscapeAspect)
       .invoke('attr', 'alt').should('eq', imageAsset.title)
-    // Test srcset
-    cy.get('img').its('[0].currentSrc').should('contain', 'w=640')
+    cy.get('img').its('[0].currentSrc').should('contain', 'w=640') // srcset
   })
 
   it('can override inferred props', () => {
@@ -42,10 +41,35 @@ describe('contentful asset props', () => {
   })
 
   it('renders video', () => {
-    cy.mount(<ContentfulVisual video={ videoAsset } aspect={ 16 / 9} />)
+    cy.mount(<ContentfulVisual video={ videoAsset } aspect={ 16/9 } />)
     cy.get('video')
       .hasDimensions(VW, VW / (16/9) )
       .invoke('attr', 'aria-label').should('eq', videoAsset.description)
   })
 
 })
+
+describe('contentful visual entry props', () => {
+
+  it('renders responsive images', () => {
+    cy.mount(<ContentfulVisual src={{
+      ...visualEntry,
+      video: null,
+      portraitVideo: null,
+    }} />)
+
+    // Portrait asset
+    cy.get('img').hasDimensions(VW, VW)
+    cy.get('img').its('[0].currentSrc')
+      .should('contain', 'w=640')
+      .should('contain', portraitImageAsset.url)
+
+    // Landscape asset
+    cy.viewport(500, 400)
+    cy.get('img').hasDimensions(VW, VW / landscapeAspect)
+    cy.get('img').its('[0].currentSrc')
+      .should('contain', 'w=640')
+      .should('contain', imageAsset.url)
+  })
+
+})
diff --git a/packages/contentful/src/ContentfulVisual.tsx b/packages/contentful/src/ContentfulVisual.tsx
index 27db350..db1d6b6 100644
--- a/packages/contentful/src/ContentfulVisual.tsx
+++ b/packages/contentful/src/ContentfulVisual.tsx
@@ -21,9 +21,6 @@ export default function ContentfulVisual(
     alt,
   } = props
 
-  // Is this a responsive instance
-  const isResponsive = hasResponsiveAssets(src)
-
   // Make a Visual instance
   return (
     <ReactVisual
@@ -38,12 +35,12 @@ export default function ContentfulVisual(
       videoLoader={ videoLoader || defaultVideoLoader }
       sourceTypes={ sourceTypes || contentfulModernFormats }
       sourceMedia={ sourceMedia || (
-        isResponsive ?
+        hasResponsiveAssets(src) ?
           orientationMediaQueries :
           undefined
       )}
       aspect={ aspect || (
-        isResponsive ?
+        hasResponsiveAspects(src) ?
           responsiveAspectCalculator :
           getImageAspect(image || src?.image || src?.portraitImage)
       )}
@@ -52,6 +49,7 @@ export default function ContentfulVisual(
   )
 }
 
+// Produce Contentful image URls
 const defaultImageLoader: ImageLoader = ({ src, width, type, media }) => {
 
   // Use portrait image if it exists, otherwise fallback to landscape
@@ -85,18 +83,21 @@ function getImageAspect(
   return image.width / image.height
 }
 
-// Make the aspect ratio for responsive assets
+// Make the aspect ratio for responsive assets.
 const responsiveAspectCalculator: AspectCalculator = (
-  { media, image, video }
+  { media, image: src }
 ) => {
-  console.log('aspect calculator')
-  return 1
+  if (media?.includes('portrait')) {
+    return src.portraitImage.width / src.portraitImage.height as number
+  } else {
+    return src.image.width / src.image.height as number
+  }
 }
 
 // The types that Contentful's CDN can produce
 const contentfulModernFormats = ['image/avif', 'image/webp']
 
-// Check whether multiple orientations weMediae provided
+// Check whether multiple orientations were provided
 function hasResponsiveAssets(src: ContentfulVisualEntry | undefined): boolean {
   if (!src) return false
   const hasLandscape = !!(src.image || src.video),
@@ -104,6 +105,16 @@ function hasResponsiveAssets(src: ContentfulVisualEntry | undefined): boolean {
   return hasLandscape && hasPortrait
 }
 
+// Check whether multiple aspect ratios were provided
+function hasResponsiveAspects(src: ContentfulVisualEntry | undefined): boolean {
+  if (!src) return false
+  const hasLandscapeAspect = !!(src.image?.width &&
+      src.image?.height),
+    hasPortraitAspect = !!(src.portraitImage?.width &&
+      src.portraitImage?.height)
+  return hasLandscapeAspect && hasPortraitAspect
+}
+
 // The media queries that are used for default responsive visuals
 const orientationMediaQueries = [
   '(orientation:landscape)',
diff --git a/packages/react/src/VisualWrapper.tsx b/packages/react/src/VisualWrapper.tsx
index 92d73a8..eb24adc 100644
--- a/packages/react/src/VisualWrapper.tsx
+++ b/packages/react/src/VisualWrapper.tsx
@@ -61,13 +61,17 @@ function makeResponsiveAspects({
   // aspect value.
   const styles = sourceMedia.map(mediaQuery => {
 
-    // Calculate the asepct for this query state
+    // Calculate the aspect for this query state
     const aspect = aspectCalculator({ media: mediaQuery, image, video })
 
     // Make a CSS class name from the media query string
     const mediaClass = mediaQuery
       .replace(/[^\w]/ig, '-') // Replace special chars with "-"
-    const cssClass = `rv-${mediaClass}-${aspect}`
+    const aspectClass = aspect
+      .toFixed(3)
+      .replace(/\./ig, '_') // Replace decimals
+      .replace(/_?0*$/, '') // Remove trailing 0s
+    const cssClass = `rv-${mediaClass}-${aspectClass}`
       .replace(/\-{2,}/g, '-') // Reduce multiples of `-`
 
     // Make the CSS rule
@@ -76,7 +80,7 @@ function makeResponsiveAspects({
         aspect-ratio: ${aspect};
       }
     }`
-    return { cssClass, cssRule}
+    return { cssClass, cssRule }
   })
 
   // Make an array of the classes to add

From 377d61f51679edfb26cb0cdd4252f0ebf229f6ef Mon Sep 17 00:00:00 2001
From: Robert Reinhard <robert.reinhard@bukwild.com>
Date: Wed, 29 Nov 2023 22:14:25 -0800
Subject: [PATCH 4/7] Add video tests to Contentful Visual

---
 .../cypress/component/ContentfulVisual.cy.tsx | 43 ++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/packages/contentful/cypress/component/ContentfulVisual.cy.tsx b/packages/contentful/cypress/component/ContentfulVisual.cy.tsx
index 2ae5e33..c548a61 100644
--- a/packages/contentful/cypress/component/ContentfulVisual.cy.tsx
+++ b/packages/contentful/cypress/component/ContentfulVisual.cy.tsx
@@ -1,5 +1,10 @@
 import ContentfulVisual from '../../src'
-import { imageAsset, portraitImageAsset, videoAsset } from '../fixtures/assets'
+import {
+  imageAsset,
+  portraitImageAsset,
+  videoAsset,
+  portraitVideoAsset
+} from '../fixtures/assets'
 import { visualEntry } from '../fixtures/entries'
 
 // Dimensions
@@ -72,4 +77,40 @@ describe('contentful visual entry props', () => {
       .should('contain', imageAsset.url)
   })
 
+  it('renders responsive videos', () => {
+    cy.mount(<ContentfulVisual expand src={{
+      ...visualEntry,
+      image: null,
+      portraitImage: null,
+    }} />)
+
+    // Portrait asset
+    cy.get('video').its('[0].currentSrc')
+      .should('contain', portraitVideoAsset.url)
+
+    // Landscape asset
+    cy.viewport(500, 400)
+    cy.get('video').its('[0].currentSrc')
+      .should('contain', videoAsset.url)
+  })
+
+  it('renders full visual entry', () => {
+    cy.mount(<ContentfulVisual src={visualEntry} />)
+
+    // Portrait asset
+    cy.get('img').hasDimensions(VW, VW)
+    cy.get('img').its('[0].currentSrc')
+      .should('contain', portraitImageAsset.url)
+    cy.get('video').its('[0].currentSrc')
+      .should('contain', portraitVideoAsset.url)
+
+    // Landscape asset
+    cy.viewport(500, 400)
+    cy.get('img').hasDimensions(VW, VW / landscapeAspect)
+    cy.get('img').its('[0].currentSrc')
+      .should('contain', imageAsset.url)
+    cy.get('video').its('[0].currentSrc')
+      .should('contain', videoAsset.url)
+  })
+
 })

From 67436dd9279d3350bd9df780bff96753f3c901d4 Mon Sep 17 00:00:00 2001
From: Robert Reinhard <robert.reinhard@bukwild.com>
Date: Wed, 29 Nov 2023 22:21:16 -0800
Subject: [PATCH 5/7] Move logic into lib files

---
 packages/contentful/src/ContentfulVisual.tsx | 87 +++-----------------
 packages/contentful/src/lib/aspectRatio.ts   | 49 +++++++++++
 packages/contentful/src/lib/urlBuilding.ts   | 32 +++++++
 3 files changed, 94 insertions(+), 74 deletions(-)
 create mode 100644 packages/contentful/src/lib/aspectRatio.ts
 create mode 100644 packages/contentful/src/lib/urlBuilding.ts

diff --git a/packages/contentful/src/ContentfulVisual.tsx b/packages/contentful/src/ContentfulVisual.tsx
index db1d6b6..b04f9f0 100644
--- a/packages/contentful/src/ContentfulVisual.tsx
+++ b/packages/contentful/src/ContentfulVisual.tsx
@@ -1,7 +1,18 @@
 import type { ReactElement } from 'react'
 import ReactVisual from '@react-visual/react'
-import { ContentfulAsset, ContentfulImageAsset, ContentfulVisualEntry, ContentfulVisualProps } from './types/contentfulVisualTypes'
-import type { AspectCalculator, ImageLoader, VideoLoader } from '@react-visual/react'
+import { ContentfulAsset, ContentfulVisualProps } from './types/contentfulVisualTypes'
+import {
+  contentfulModernFormats,
+  defaultImageLoader,
+  defaultVideoLoader
+} from './lib/urlBuilding'
+import {
+  orientationMediaQueries,
+  getImageAspect,
+  responsiveAspectCalculator,
+  hasResponsiveAssets,
+  hasResponsiveAspects
+} from './lib/aspectRatio'
 
 // Render a Visual using Contentful data
 export default function ContentfulVisual(
@@ -49,78 +60,6 @@ export default function ContentfulVisual(
   )
 }
 
-// Produce Contentful image URls
-const defaultImageLoader: ImageLoader = ({ src, width, type, media }) => {
-
-  // Use portrait image if it exists, otherwise fallback to landscape
-  const url = media?.includes('portrait') && src.portraitImage ?
-    src.portraitImage.url :
-    src.image?.url || src.url
-
-  // Make Contentful resizing instructions
-  const query = new URLSearchParams({ w: String(width) })
-
-  // Optionally set the format
-  if (type?.includes('avif')) query.set('fm', 'avif')
-  else if (type?.includes('webp')) query.set('fm', 'webp')
-
-  // Make the query with formatting instructions
-  return `${url}?${query}`
-}
-
-// Use portrait video from `src` prop or fallback to url
-const defaultVideoLoader: VideoLoader = ({ src, media }) => {
-  return media?.includes('portrait') && src.portraitVideo ?
-    src.portraitVideo.url :
-    src.video?.url || src.url
-}
-
-// Get the aspect ratio from an image asset if it exists
-function getImageAspect(
-  image: ContentfulImageAsset | undefined
-): number | undefined {
-  if (!image) return undefined
-  return image.width / image.height
-}
-
-// Make the aspect ratio for responsive assets.
-const responsiveAspectCalculator: AspectCalculator = (
-  { media, image: src }
-) => {
-  if (media?.includes('portrait')) {
-    return src.portraitImage.width / src.portraitImage.height as number
-  } else {
-    return src.image.width / src.image.height as number
-  }
-}
-
-// The types that Contentful's CDN can produce
-const contentfulModernFormats = ['image/avif', 'image/webp']
-
-// Check whether multiple orientations were provided
-function hasResponsiveAssets(src: ContentfulVisualEntry | undefined): boolean {
-  if (!src) return false
-  const hasLandscape = !!(src.image || src.video),
-    hasPortrait = !!(src.portraitImage || src.portraitVideo)
-  return hasLandscape && hasPortrait
-}
-
-// Check whether multiple aspect ratios were provided
-function hasResponsiveAspects(src: ContentfulVisualEntry | undefined): boolean {
-  if (!src) return false
-  const hasLandscapeAspect = !!(src.image?.width &&
-      src.image?.height),
-    hasPortraitAspect = !!(src.portraitImage?.width &&
-      src.portraitImage?.height)
-  return hasLandscapeAspect && hasPortraitAspect
-}
-
-// The media queries that are used for default responsive visuals
-const orientationMediaQueries = [
-  '(orientation:landscape)',
-  '(orientation:portrait)',
-]
-
 // Use various asset fields to make the alt from automatically
 function makeAssetAlt(asset: ContentfulAsset | undefined): string {
   if (!asset) return ''
diff --git a/packages/contentful/src/lib/aspectRatio.ts b/packages/contentful/src/lib/aspectRatio.ts
new file mode 100644
index 0000000..04ea95f
--- /dev/null
+++ b/packages/contentful/src/lib/aspectRatio.ts
@@ -0,0 +1,49 @@
+import type { ContentfulImageAsset, ContentfulVisualEntry } from '../types/contentfulVisualTypes'
+import type { AspectCalculator } from '@react-visual/react'
+
+// The media queries that are used for default responsive visuals
+export const orientationMediaQueries = [
+  '(orientation:landscape)',
+  '(orientation:portrait)',
+]
+
+// Get the aspect ratio from an image asset if it exists
+export function getImageAspect(
+  image: ContentfulImageAsset | undefined
+): number | undefined {
+  if (!image) return undefined
+  return image.width / image.height
+}
+
+// Make the aspect ratio for responsive assets.
+export const responsiveAspectCalculator: AspectCalculator = (
+  { media, image: src }
+) => {
+  if (media?.includes('portrait')) {
+    return src.portraitImage.width / src.portraitImage.height as number
+  } else {
+    return src.image.width / src.image.height as number
+  }
+}
+
+// Check whether multiple orientations were provided
+export function hasResponsiveAssets(
+  src: ContentfulVisualEntry | undefined
+): boolean {
+  if (!src) return false
+  const hasLandscape = !!(src.image || src.video),
+    hasPortrait = !!(src.portraitImage || src.portraitVideo)
+  return hasLandscape && hasPortrait
+}
+
+// Check whether multiple aspect ratios were provided
+export function hasResponsiveAspects(
+  src: ContentfulVisualEntry | undefined
+): boolean {
+  if (!src) return false
+  const hasLandscapeAspect = !!(src.image?.width &&
+      src.image?.height),
+    hasPortraitAspect = !!(src.portraitImage?.width &&
+      src.portraitImage?.height)
+  return hasLandscapeAspect && hasPortraitAspect
+}
diff --git a/packages/contentful/src/lib/urlBuilding.ts b/packages/contentful/src/lib/urlBuilding.ts
new file mode 100644
index 0000000..cc7d668
--- /dev/null
+++ b/packages/contentful/src/lib/urlBuilding.ts
@@ -0,0 +1,32 @@
+import type { ImageLoader, VideoLoader } from '@react-visual/react'
+
+// The types that Contentful's CDN can produce
+export const contentfulModernFormats = ['image/avif', 'image/webp']
+
+// Produce Contentful image URls
+export const defaultImageLoader: ImageLoader = ({
+  src, width, type, media
+}) => {
+
+  // Use portrait image if it exists, otherwise fallback to landscape
+  const url = media?.includes('portrait') && src.portraitImage ?
+    src.portraitImage.url :
+    src.image?.url || src.url
+
+  // Make Contentful resizing instructions
+  const query = new URLSearchParams({ w: String(width) })
+
+  // Optionally set the format
+  if (type?.includes('avif')) query.set('fm', 'avif')
+  else if (type?.includes('webp')) query.set('fm', 'webp')
+
+  // Make the query with formatting instructions
+  return `${url}?${query}`
+}
+
+// Use portrait video from `src` prop or fallback to url
+export const defaultVideoLoader: VideoLoader = ({ src, media }) => {
+  return media?.includes('portrait') && src.portraitVideo ?
+    src.portraitVideo.url :
+    src.video?.url || src.url
+}

From ea049f72e2f1cc2136e7e20f3ce9a3ae3602c667 Mon Sep 17 00:00:00 2001
From: Robert Reinhard <robert.reinhard@bukwild.com>
Date: Wed, 29 Nov 2023 22:36:22 -0800
Subject: [PATCH 6/7] Update documentation

---
 README.md                     | 17 ++++++++
 packages/contentful/README.md | 73 ++++++++++++++++++++---------------
 packages/react/README.md      |  1 +
 3 files changed, 59 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index d4c69e8..0a700a9 100644
--- a/README.md
+++ b/README.md
@@ -3,6 +3,7 @@
 A monorepo hosting components for rendering image and video in a single container for easy rendering of visual elements.
 
 - [@react-visual/react](./packages/react) - Vanilla implementation.
+- [@react-visual/contentful](./packages/contentful) - Adapter for Contentful assets.
 - [@react-visual/next](./packages/next) - Uses the `next/image` component for rendering images.
 - [@react-visual/sanity-next](./packages/sanity-next) - Takes Sanity asset and passes them to `@react-visual/next` for rendering.
 
@@ -34,6 +35,22 @@ export default function ResponsiveExample() {
 
 [View CodeSandbox demo](https://codesandbox.io/p/sandbox/react-visual-react-demo-w4sh62)
 
+### @react-visual/contentful
+
+Using with a Visual entryType containing image and video fields:
+
+```jsx
+import Visual from '@react-visual/contentful'
+
+export default function Example() {
+  return (
+    <Visual
+      src={ entry.background }
+      sizes='100vw' />
+  )
+}
+```
+
 ### @react-visual/next
 
 Using framework adapter for Next.js:
diff --git a/packages/contentful/README.md b/packages/contentful/README.md
index dbc4baf..a509fb2 100644
--- a/packages/contentful/README.md
+++ b/packages/contentful/README.md
@@ -1,51 +1,40 @@
-# @react-visual/next [![react-visual](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/fn6c7w&style=flat&logo=cypress)](https://cloud.cypress.io/projects/fn6c7w/runs)
+# @react-visual/contentful [![react-visual](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/fn6c7w&style=flat&logo=cypress)](https://cloud.cypress.io/projects/fn6c7w/runs)
 
-Renders images and videos into a container.  Features:
+Renders Contentful images and videos into a container.  Features:
 
-- Uses `next/image` to render images
-- Easily render assets using aspect ratios
-- Videos are lazyloaded (unless `priority` flag is set)
+- Automatically defines a loader functions for generating srcsets
+- Supports responsive image and video assets
 
 ## Install
 
 ```sh
-yarn add @react-visual/next
+yarn add @react-visual/contentful
 ```
 
-Images will be rendered using `next/image` so expect to do configuration of [`remotePatterns`](https://nextjs.org/docs/app/api-reference/components/image#remotepatterns) for CMS hosted images.
-
 ## Usage
 
+### Asset fields
+
 ```jsx
-import Visual from '@react-visual/next'
+import Visual from '@react-visual/contentful'
 
 export default function Example() {
   return (
     <Visual
-      image='https://placehold.co/300x150'
-      video='https://placehold.co/300x150.mp4'
-      aspect={300/150}
-      sizes='100vw'
-      alt='Example using placeholder images' />
+      image={ entry.image }
+      video={ entry.video }
+      sizes='100vw'/>
   )
 }
 ```
 
-```gql
-fragment visual on Visual {
-	image { ...image }
-  portraitImage { ...image }
-  video { ...video }
-  portraitVideo { ...video }
-  alt
-}
+Where `image` and `video` are asset fields defined by these GQL fragments:
 
+```gql
 fragment image on Asset {
 	title
   description
   fileName
-  title
-  description
   width
   height
   url
@@ -59,11 +48,31 @@ fragment video on Asset {
 }
 ```
 
+### Visual entryType reference
+
+This is the expected pattern for rendering responsive images and videos.
+
+```jsx
+import Visual from '@react-visual/contentful'
+
+export default function Example() {
+  return (
+    <Visual
+      src={ entry.background }
+      sizes='100vw'/>
+  )
+}
+```
+
+Where `background` is defined by this GQL fragment (this consumes the previous fragments):
+
 ```gql
-query heroBlockEntryQuery {
-  heroBlock(id: "3T13NtVzGIOKRMISRYRDhO") {
-    background { ...visual }
-  }
+fragment visual on Visual {
+	image { ...image }
+  portraitImage { ...image }
+  video { ...video }
+  portraitVideo { ...video }
+  alt
 }
 ```
 
@@ -75,16 +84,16 @@ For more examples, read [the Cypress component tests](./cypress/component).
 
 | Prop | Type | Description
 | -- | -- | --
-| `image` | `string` | URL to an image asset.
-| `video` | `string` | URL to a video asset asset.
-| `placeholderData` | `string` | A Data URL that is rendered before the image loads via [`next/image`'s `blurDataURL`](https://nextjs.org/docs/pages/api-reference/components/image#blurdataurl).
+| `image` | `object` | A Contentful image Asset.
+| `video` | `object` | A Contentful video Asset.
+| `src` | `object` | An object with keys of responsive keys.  See examples above.
 
 ### Layout
 
 | Prop | Type | Description
 | -- | -- | --
 | `expand` | `boolean` | Make the Visual fill it's container via CSS using absolute positioning.
-| `aspect` | `number` | Force the Visual to a specific aspect ratio.
+| `aspect` | `number` | Force the Visual to a specific aspect ratio. If empty, this will be set using width and height fields from Contentful queries.
 | `width` | `number`, `string` | A CSS dimension value or a px number.
 | `height` | `number`, `string` | A CSS dimension value or a px number.
 | `fit` | `string` | An [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) value that is applied to the assets.  Defaults to `cover`.
diff --git a/packages/react/README.md b/packages/react/README.md
index 53f9ea4..0e7186d 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -194,6 +194,7 @@ For more examples, read [the Cypress component tests](./cypress/component).
 | `sourceTypes` | `string[]` | Specify image MIME types that will be passed to the `imageLoader` and used to create additional `<source>` tags.  Use this to create `webp` or `avif` sources with a CDN like Contentful.
 | `sourceMedia` | `string[]` | Specify media queries that will be passed to the `imageLoader` and used to create additional `<source>` tags.
 | `imageLoader` | `Function` | Uses syntax that is similar [to `next/image`'s `loader` prop](https://nextjs.org/docs/app/api-reference/components/image#loader).  A srcset is built with a hardcoded list of widths.
+| `videoLoader` | `Function` | Like `imageLoader` but is only passed the `src` and `media` properties.
 
 ### Video
 

From 2794d137e0d8864ca7ab1268127b4e179aea202a Mon Sep 17 00:00:00 2001
From: Robert Reinhard <robert.reinhard@bukwild.com>
Date: Wed, 29 Nov 2023 22:38:25 -0800
Subject: [PATCH 7/7] Add Contentful tests to Actions

---
 .github/workflows/cypress.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
index cba8281..d89b4ab 100644
--- a/.github/workflows/cypress.yml
+++ b/.github/workflows/cypress.yml
@@ -9,8 +9,9 @@ jobs:
     strategy:
       matrix:
         dir:
-          - packages/next
           - packages/react
+          - packages/contentful
+          - packages/next
           - packages/sanity-next
 
     steps: