From 05f33c8e6c89f1a91e0b231c2d1fc42b16f16e4a Mon Sep 17 00:00:00 2001
From: Leo Lamprecht <leo@ronin.co>
Date: Fri, 24 May 2024 13:44:02 +0200
Subject: [PATCH] Added `Image` component (#3)

* Added `Image` component

* Ensure correct types

* Test JS client
---
 bun.lockb                                     | Bin 82568 -> 82929 bytes
 package.json                                  |  29 +---
 src/components/image.tsx                      | 155 ++++++++++++++++++
 .../rich-text.tsx}                            |   4 +-
 src/index.ts                                  |   3 +
 tests/integration/index.test.ts               |   2 +-
 6 files changed, 167 insertions(+), 26 deletions(-)
 create mode 100644 src/components/image.tsx
 rename src/{components.tsx => components/rich-text.tsx} (99%)

diff --git a/bun.lockb b/bun.lockb
index b2ecc4597fc7641d95bb72e250d4eb028d6de075..becdacf2f809c508e4e895b08905a26d7cd60315 100755
GIT binary patch
delta 11553
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
TypJ5Qe0Zkp^^SjrJlpy&zjnM(

delta 11428
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
Doh84}

diff --git a/package.json b/package.json
index 911d964..0b28f75 100644
--- a/package.json
+++ b/package.json
@@ -15,43 +15,23 @@
     "test": "bun test",
     "prepare": "husky"
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "repository": "ronin-co/react-ronin",
   "homepage": "https://github.com/ronin-co/react-ronin",
-  "keywords": [
-    "ronin",
-    "react",
-    "client",
-    "database",
-    "orm"
-  ],
+  "keywords": ["ronin", "react", "client", "database", "orm"],
   "lint-staged": {
-    "**/*": [
-      "bunx @biomejs/biome format --write"
-    ]
+    "**/*": ["bunx @biomejs/biome format --write"]
   },
   "exports": {
     ".": {
       "types": "./dist/index.d.mts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    },
-    "./components": {
-      "types": "./dist/components.d.mts",
-      "import": "./dist/components.mjs",
-      "require": "./dist/components.js"
     }
   },
   "typesVersions": {
     "*": {
-      "*": [
-        "dist/index.d.ts"
-      ],
-      "components": [
-        "dist/components.d.mts"
-      ]
+      "*": ["dist/index.d.ts"]
     }
   },
   "dependencies": {
@@ -61,6 +41,7 @@
     "@biomejs/biome": "1.7.3",
     "@types/bun": "1.1.3",
     "@types/react": "18.3.2",
+    "@types/web": "0.0.147",
     "bunchee": "5.1.5",
     "husky": "9.0.11",
     "lint-staged": "15.2.4",
diff --git a/src/components/image.tsx b/src/components/image.tsx
new file mode 100644
index 0000000..0faa900
--- /dev/null
+++ b/src/components/image.tsx
@@ -0,0 +1,155 @@
+import { useCallback, useRef } from "react";
+import type { StoredObject } from "ronin/types";
+
+export interface ImageProps {
+  /**
+   * Defines text that can replace the image in the page.
+   */
+  alt?: string;
+  /**
+   * The quality level at which the image should be displayed. A lower quality
+   * ensures a faster loading speed, but might also effect the visual
+   * appearance, so it is essential to choose carefully.
+   *
+   * Must be an integer between 0 and 100.
+   */
+  quality?: number;
+  /**
+   * The value of a RONIN Blob field.
+   */
+  src: string | StoredObject;
+  /**
+   * The intrinsic size of the image in pixels, if its width and height are the
+   * same. Must be an integer without a unit.
+   */
+  size?: number;
+  /**
+   * The intrinsic width of the image in pixels. Must be an integer without a
+   * unit.
+   */
+  width?: number;
+  /**
+   * The intrinsic height of the image, in pixels. Must be an integer without
+   * a unit.
+   */
+  height?: number;
+  /**
+   * Indicates how the browser should load the image.
+   *
+   * Providing the value "lazy" defers loading the image until it reaches a
+   * calculated distance from the viewport, as defined by the browser. The
+   * intent is to avoid the network and storage bandwidth needed to handle the
+   * image until it's reasonably certain that it will be needed. This generally
+   * improves the performance of the content in most typical use cases.
+   */
+  loading?: "lazy";
+}
+
+const Image = ({
+  src: input,
+  alt,
+  size: defaultSize,
+  width: defaultWidth,
+  height: defaultHeight,
+  quality,
+  loading,
+}: ImageProps) => {
+  const imageElement = useRef<HTMLImageElement | null>(null);
+  const renderTime = useRef<number>(Date.now());
+
+  const isMediaObject = typeof input === "object" && input !== null;
+  const width = defaultSize || defaultWidth;
+  const height = defaultSize || defaultHeight;
+
+  if (!height && !width)
+    throw new Error(
+      "Either `width`, `height`, or `size` must be defined for `Image`.",
+    );
+
+  // Validate given `quality` property.
+  if (quality && (quality < 0 || quality > 100))
+    throw new Error(
+      "The given `quality` was not in the range between 0 and 100.",
+    );
+
+  const optimizationParams = new URLSearchParams({
+    ...(width ? { w: width.toString() } : {}),
+    ...(height ? { h: height.toString() } : {}),
+    q: quality ? quality.toString() : "100",
+  });
+
+  const responsiveOptimizationParams = new URLSearchParams({
+    ...(width ? { h: (width * 2).toString() } : {}),
+    ...(height ? { h: (height * 2).toString() } : {}),
+    q: quality ? quality.toString() : "100",
+  });
+
+  const source = isMediaObject ? `${input.src}?${optimizationParams}` : input;
+
+  const responsiveSource = isMediaObject
+    ? `${input.src}?${optimizationParams} 1x, ` +
+      `${input.src}?${responsiveOptimizationParams} 2x`
+    : input;
+
+  const placeholder =
+    input && typeof input !== "string" ? input.placeholder?.base64 : null;
+
+  const onLoad = useCallback(() => {
+    const duration = Date.now() - renderTime.current;
+    const threshold = 150;
+
+    // Fade in and gradually reduce blur of the real image if loading takes
+    // longer than the specified threshold.
+    if (duration > threshold) {
+      imageElement.current?.animate(
+        [
+          { filter: "blur(4px)", opacity: 0 },
+          { filter: "blur(0px)", opacity: 1 },
+        ],
+        {
+          duration: 200,
+        },
+      );
+    }
+  }, []);
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        overflow: "hidden",
+        flexShrink: 0,
+        width: width || "100%",
+        height: height || "100%",
+      }}
+    >
+      {/* Blurred preview being displayed until the actual image is loaded. */}
+      {placeholder && (
+        <img
+          style={{ position: "absolute", width: "100%", height: "100%" }}
+          src={placeholder}
+          alt={alt}
+        />
+      )}
+
+      {/* The optimized image, responsive to the specified size. */}
+      <img
+        alt={alt}
+        style={{
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+        }}
+        decoding="async"
+        onLoad={onLoad}
+        loading={loading}
+        ref={imageElement}
+        src={source}
+        srcSet={responsiveSource}
+      />
+    </div>
+  );
+};
+
+export default Image;
diff --git a/src/components.tsx b/src/components/rich-text.tsx
similarity index 99%
rename from src/components.tsx
rename to src/components/rich-text.tsx
index b4f8d14..53ba210 100644
--- a/src/components.tsx
+++ b/src/components/rich-text.tsx
@@ -57,7 +57,7 @@ export type RichTextContent =
       )[];
     };
 
-export const RichText = ({
+const RichText = ({
   data,
   components,
 }: {
@@ -177,3 +177,5 @@ export const RichText = ({
     );
   });
 };
+
+export default RichText;
diff --git a/src/index.ts b/src/index.ts
index 7ee6eae..b18b94c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,2 +1,5 @@
 export * from "ronin";
 export { default } from "ronin";
+
+export { default as RichText } from "./components/rich-text";
+export { default as Image } from "./components/image";
diff --git a/tests/integration/index.test.ts b/tests/integration/index.test.ts
index e2a54f9..3077527 100644
--- a/tests/integration/index.test.ts
+++ b/tests/integration/index.test.ts
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, mock, test } from "bun:test";
-import createSyntaxFactory from "@/index";
+import createSyntaxFactory from "ronin";
 
 let mockResolvedRequestText: string | undefined = undefined;