Adding and implementing Prettier formatting

.github/workflows/cypress.yml

@@ -15,7 +15,6 @@ jobs:
           - packages/sanity-next
 
     steps:
-
       - name: Install
         uses: bkwld/cloak-actions/install@v2
 
@@ -31,4 +30,4 @@ jobs:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NEXT_PUBLIC_SANITY_DATASET: ${{ secrets.NEXT_PUBLIC_SANITY_DATASET }}
-          NEXT_PUBLIC_SANITY_PROJECT_ID:  ${{ secrets.NEXT_PUBLIC_SANITY_PROJECT_ID }}
+          NEXT_PUBLIC_SANITY_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_SANITY_PROJECT_ID }}

.prettierignore

@@ -0,0 +1,2 @@
+# I don't like prettier markdown table formatting
+**/README.md

README.md

@@ -94,3 +94,13 @@ This project uses Lerna to release versions, using [the default versioning strat
 - `yarn lerna version` - Tag a new version
 - `yarn lerna publish [major|minor|patch]` - Tag and publish a version
 - `yarn lerna publish from-package` - Publish the current version
+
+### Test Videos
+
+placeholder.co dropped it's APIs for generating test videos so I've been using this command to create videos for tests:
+
+```sh
+ffmpeg -f lavfi -i color=c=black:s=300x150:d=5 \
+  -vf "drawtext=text='Hello World':fontcolor=white:fontsize=32:x=(w-text_w)/2:y=(h-text_h)/2" \
+  -c:v libx264 -t 5 -pix_fmt yuv420p 300x150.mp4
+```

lerna.json

@@ -2,4 +2,4 @@
   "npmClient": "yarn",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "version": "1.3.1"
-}
+}

package.json

@@ -12,10 +12,12 @@
     "build": "lerna run build",
     "test": "lerna run test --concurrency 1",
     "typecheck": "lerna run typecheck",
-    "prepare": "yarn build"
+    "prepare": "yarn build",
+    "format": "prettier --write --ignore-unknown ."
   },
   "dependencies": {},
   "devDependencies": {
-    "lerna": "^8.1.8"
+    "lerna": "^8.1.8",
+    "prettier": "^3.5.3"
   }
 }

packages/contentful/cypress/component/ContentfulVisual.cy.tsx

@@ -1,135 +1,144 @@
-import ContentfulVisual from '../../src'
+import ContentfulVisual from "../../src";
 import {
   imageAsset,
   portraitImageAsset,
   videoAsset,
-  portraitVideoAsset
-} from '../fixtures/assets'
-import { visualEntry } from '../fixtures/entries'
+  portraitVideoAsset,
+} from "../fixtures/assets";
+import { visualEntry } from "../fixtures/entries";
 
 // Dimensions
-const VW = Cypress.config('viewportWidth'),
-  VH = Cypress.config('viewportHeight'),
-  landscapeAspect = imageAsset.width / imageAsset.height
+const VW = Cypress.config("viewportWidth"),
+  VH = Cypress.config("viewportHeight"),
+  landscapeAspect = imageAsset.width / imageAsset.height;
 
-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('contentful asset props', () => {
+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");
+  });
+});
 
-  it('renders image', () => {
-    cy.mount(<ContentfulVisual image={ imageAsset } />)
-    cy.get('img')
+describe("contentful asset props", () => {
+  it("renders image", () => {
+    cy.mount(<ContentfulVisual image={imageAsset} />);
+    cy.get("img")
       .hasDimensions(VW, VW / landscapeAspect)
-      .invoke('attr', 'alt').should('eq', imageAsset.title)
-    cy.get('img').its('[0].currentSrc').should('contain', 'w=640') // srcset
-  })
-
-  it('can override inferred props', () => {
-    cy.mount(<ContentfulVisual
-      image={ imageAsset }
-      aspect={ 1 }
-      alt='Override' />)
-    cy.get('img')
-      .hasDimensions(VW, VW)
-      .invoke('attr', 'alt').should('eq', 'Override')
-  })
-
-  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)
-  })
+      .invoke("attr", "alt")
+      .should("eq", imageAsset.title);
+    cy.get("img").its("[0].currentSrc").should("contain", "w=640"); // srcset
+  });
 
-})
+  it("can override inferred props", () => {
+    cy.mount(<ContentfulVisual image={imageAsset} aspect={1} alt="Override" />);
+    cy.get("img")
+      .hasDimensions(VW, VW)
+      .invoke("attr", "alt")
+      .should("eq", "Override");
+  });
 
-describe('contentful visual entry props', () => {
+  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);
+  });
+});
 
-  it('renders responsive images', () => {
-    cy.mount(<ContentfulVisual src={{
-      ...visualEntry,
-      video: null,
-      portraitVideo: null,
-    }} />)
+describe("contentful visual entry props", () => {
+  it("renders responsive images", () => {
+    cy.mount(
+      <ContentfulVisual
+        src={{
+          ...visualEntry,
+          video: null,
+          portraitVideo: null,
+        }}
+      />,
+    );
 
     // There should be no vidoes rendered
     cy.get("video").should("not.exist");
 
     // Portrait asset
-    cy.get('img').hasDimensions(VW, VW)
-    cy.get('img').its('[0].currentSrc')
-      .should('contain', 'w=640')
-      .should('contain', portraitImageAsset.url)
+    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)
-  })
-
-  it('renders responsive videos', () => {
-    cy.mount(<ContentfulVisual expand src={{
-      ...visualEntry,
-      image: null,
-      portraitImage: null,
-    }} />)
+    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);
+  });
+
+  it("renders responsive videos", () => {
+    cy.mount(
+      <ContentfulVisual
+        expand
+        src={{
+          ...visualEntry,
+          image: null,
+          portraitImage: null,
+        }}
+      />,
+    );
 
     // There should be no imgs rendered
-    cy.get('img').should('not.exist')
+    cy.get("img").should("not.exist");
 
     // Portrait asset
-    cy.get('video').its('[0].currentSrc')
-      .should('contain', portraitVideoAsset.url)
+    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)
-  })
+    cy.viewport(500, 400);
+    cy.get("video").its("[0].currentSrc").should("contain", videoAsset.url);
+  });
 
-  it('renders full visual entry', () => {
-    cy.mount(<ContentfulVisual src={visualEntry} />)
+  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)
+    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)
-  })
-
-  it('finds alt on src image', () => {
+    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);
+  });
+
+  it("finds alt on src image", () => {
     cy.mount(
       <ContentfulVisual
         src={{
           ...visualEntry,
           alt: null,
         }}
-      />
+      />,
     );
     cy.get("img").invoke("attr", "alt").should("eq", "Landscape gradient");
-  })
+  });
 
   it("finds alt on src video", () => {
     cy.mount(
@@ -140,11 +149,10 @@ describe('contentful visual entry props', () => {
           portraitImage: null,
           alt: null,
         }}
-      />
+      />,
     );
     cy.get("video")
       .invoke("attr", "aria-label")
       .should("eq", "Background loop description");
   });
-
-})
+});

packages/contentful/cypress/fixtures/assets.ts

@@ -4,28 +4,28 @@ export const imageAsset = {
   fileName: "landscape.png",
   width: 1280,
   height: 720,
-  url: "https://images.ctfassets.net/x9fe3hhqauxm/6WN8Zz47zmXelBLDenfteO/7e87ed7484738fd97fd86ac67f6feed5/tumblr_n8xc9t24W31tf8vylo1_1280.png"
-}
+  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"
-}
+  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"
-}
+  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"
-}
+  url: "https://videos.ctfassets.net/x9fe3hhqauxm/2mveMy2NaxbwfIp6ABl8xc/641f890eb10a329766d52d4805d404b4/PANDORA_ANIMATION_4.mp4",
+};

packages/contentful/cypress/fixtures/entries.ts

@@ -2,13 +2,13 @@ import {
   imageAsset,
   portraitImageAsset,
   videoAsset,
-  portraitVideoAsset
-} from './assets'
+  portraitVideoAsset,
+} from "./assets";
 
 export const visualEntry = {
   image: imageAsset,
   portraitImage: portraitImageAsset,
   video: videoAsset,
   portraitVideo: portraitVideoAsset,
-  alt: 'Description',
-}
+  alt: "Description",
+};