Re-organizing code into monorepo

.gitignore

@@ -133,4 +133,5 @@ dist
 .DS_Store
 
 # Cypress
-/cypress/videos
+cypress/downloads
+cypress/videos

next-visual/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "next-visual",
+  "version": "0.1.3",
+  "description": "Image and video renderer for Next.js projects",
+  "author": "Bukwild <info@bukwild.com>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*"
+  ],
+  "scripts": {
+    "build": "rm -rf dist/* && tsc -p tsconfig.pkg.json",
+    "test": "cypress run --component",
+    "prepare": "yarn build",
+    "preversion": "yarn test",
+    "version": "git add -A",
+    "postversion": "git push --follow-tags"
+  },
+  "dependencies": {
+    "react-visual": "^0"
+  },
+  "peerDependencies": {
+    "next": "^13",
+    "react": "^18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.18",
+    "@types/react-dom": "^18.2.7",
+    "cypress": "^12.17.3",
+    "next": "^13",
+    "react": "^18",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.1.6"
+  }
+}

next-visual/src/NextVisual.tsx

@@ -0,0 +1,89 @@
+import Image from 'next/image'
+import type { ReactElement } from 'react'
+
+import { makeImagePlaceholder } from './lib/placeholder'
+import {
+  VisualWrapper,
+  LazyVideo,
+  collectDataAttributes,
+} from 'react-visual'
+
+import { NextVisualProps, ObjectFit } from './types/nextVisualTypes'
+
+// Render a Sanity image via Next/Image
+export function NextVisual(props: NextVisualProps): ReactElement | null {
+
+  // Destructure props
+  const {
+    image,
+    video,
+    placeholderData,
+    expand,
+    aspect,
+    width,
+    height,
+    fit = ObjectFit.Cover,
+    position,
+    priority,
+    sizes,
+    alt,
+    className = '',
+    style = {},
+  } = props
+
+  // If no asset, return nothing
+  if (!image && !video) return null
+
+  return (
+    <VisualWrapper {...{
+      expand,
+      width,
+      height,
+      aspect,
+      className,
+      style,
+      dataAttributes: collectDataAttributes(props),
+    }}>
+
+      {/* Render image */}
+      { image && <NextImage {...{
+        src: image,
+        sizes,
+        alt,
+        fit,
+        position,
+        priority,
+        placeholderData,
+      }} /> }
+
+      {/* Render video element */}
+      { video && <LazyVideo {...{
+        src: video,
+        alt,
+        fit,
+        position,
+        priority,
+        noPoster: !!image // Use `image` as poster frame
+      }} /> }
+
+    </VisualWrapper>
+  )
+}
+
+// An image rendered within the Visual
+function NextImage({
+  src, sizes, alt, fit, position, priority, placeholderData
+}: any): ReactElement {
+  return (
+    <Image
+      { ...{ src, sizes, priority, alt } }
+      fill
+      style={{
+        objectFit: fit,
+        objectPosition: position,
+      }}
+      { ...makeImagePlaceholder(placeholderData) }
+    />
+  )
+}
+

next-visual/tsconfig.pkg.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist/"
+  },
+  "include": [ "src" ]
+}

package.json

@@ -1,37 +1,12 @@
 {
-  "name": "next-visual",
-  "version": "0.1.3",
-  "description": "Image and video renderer for Next.js projects",
-  "repository": "git@github.com:BKWLD/next-visual.git",
-  "author": "Robert Reinhard <robert.reinhard@bukwild.com>",
+  "name": "react-visual-components",
+  "version": "0.0.1",
+  "description": "Image and video renderers for React projects",
+  "author": "Bukwild <info@bukwild.com>",
   "license": "MIT",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist/**/*"
-  ],
-  "scripts": {
-    "build": "tsc",
-    "test": "cypress run --component",
-    "prepare": "yarn build",
-    "preversion": "yarn test",
-    "version": "git add -A",
-    "postversion": "git push --follow-tags"
-  },
-  "dependencies": {
-    "react-intersection-observer": "^9"
-  },
-  "peerDependencies": {
-    "next": "^13",
-    "react": "^18"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.18",
-    "@types/react-dom": "^18.2.7",
-    "cypress": "^12.17.3",
-    "next": "^13",
-    "react": "^18",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.1.6"
-  }
+  "private": true,
+  "workspaces": [
+    "next-visual",
+    "react-visual"
+  ]
 }

react-visual/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "react-visual",
+  "version": "0.0.1",
+  "description": "Image and video renderer for React projects",
+  "author": "Bukwild <info@bukwild.com>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*"
+  ],
+  "scripts": {
+    "build": "rm -rf dist/* && tsc -p tsconfig.pkg.json",
+    "prepare": "yarn build"
+  },
+  "dependencies": {
+    "react-intersection-observer": "^9"
+  },
+  "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"
+  }
+}

react-visual/src/LazyVideo.tsx

@@ -0,0 +1,47 @@
+import { useInView } from 'react-intersection-observer'
+import type { ReactElement } from 'react'
+
+import { fillStyles, transparentGif } from './lib/styles'
+
+// An video rendered within a Visual that supports lazy loading
+export default function LazyVideo({
+  src, alt, fit, position, priority, noPoster
+}: any): ReactElement {
+
+  // Watch for in viewport to load video unless using priority
+  const { ref, inView } = useInView({
+    skip: priority
+  })
+
+  // Simplify logic for whether to load sources
+  const shouldLoad = priority || inView
+
+  return (
+    <video
+
+      // Props that allow us to autoplay videos like a gif
+      playsInline
+      autoPlay
+      muted
+      loop
+
+      // Load a transparent gif as a poster if an `image` was specified so
+      // the image is used as poster rather than the first frame of video. This
+      // lets us all use responsive poster images (via `next/image`).
+      poster={ noPoster ? transparentGif : undefined }
+
+      // Straightforward props
+      ref={ref}
+      preload={ shouldLoad ? 'auto' : 'none' }
+      aria-label={ alt }
+      style={{
+        ...fillStyles,
+        objectFit: fit,
+        objectPosition: position,
+      }}>
+
+      {/* Implement lazy loading by not adding the source until ready */}
+      { shouldLoad && <source src={ src } /> }
+    </video>
+  )
+}

react-visual/src/VisualWrapper.tsx

@@ -0,0 +1,28 @@
+import type { CSSProperties, ReactElement } from 'react'
+import { fillStyles } from './lib/styles'
+
+// Wraps media elements and applys layout and other functionality
+export default function VisualWrapper({
+  expand, width, height, aspect, children, className, style, dataAttributes
+}: any): ReactElement {
+
+  // Make the wrapper style.  If expanding, use normal fill rules. Otherwise,
+  // apply width, height and aspect
+  const layoutStyles = expand ? fillStyles : {
+    position: 'relative', // For expanded elements
+    width: typeof width == 'number' ? `${width}px` : width,
+    height: typeof height == 'number' ? `${height}px` : height,
+    aspectRatio: aspect,
+    maxWidth: '100%', // Don't exceed container width
+  } as CSSProperties
+
+  // Render wrapping component
+  return (
+    <div
+      className={ className }
+      style={{ ...layoutStyles, ...style }}
+      { ...dataAttributes } >
+      { children }
+    </div>
+  )
+}

react-visual/src/index.ts

@@ -0,0 +1,4 @@
+import LazyVideo from './LazyVideo'
+import VisualWrapper from './VisualWrapper'
+import { collectDataAttributes } from './lib/attributes'
+export { LazyVideo, VisualWrapper, collectDataAttributes }

react-visual/tsconfig.pkg.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist/"
+  },
+  "include": [ "src" ]
+}