@artsy/palette-mobile 11.1.0 → 11.2.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v11.2.0 (Thu Jun 15 2023)
+
+#### 🚀 Enhancement
+
+- feat(image): Add new <Image> component [#117](https://github.com/artsy/palette-mobile/pull/117) ([@damassi](https://github.com/damassi))
+
+#### Authors: 1
+
+- Christopher Pappas ([@damassi](https://github.com/damassi))
+
+---
+
 # v11.1.0 (Thu Jun 15 2023)
 
 #### 🚀 Enhancement

package/dist/elements/Image/Image.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+export interface ImageProps extends FlexProps {
+    /** Supplied aspect ratio of image. If none provided, defaults to 1 */
+    aspectRatio?: number;
+    /** Supplied width of image. If none provided, defaults to screen width */
+    width?: number;
+    /** Supplied height of image. If none provided, defaults to width / aspectRatio */
+    height?: number;
+    /** Resize on the fly using Gemini. Defaults to true */
+    performResize?: boolean;
+    /** Source url to the image  */
+    src: string;
+}
+export declare const Image: React.FC<ImageProps>;

package/dist/elements/Image/Image.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const moti_1 = require("moti");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_fast_image_1 = __importDefault(require("react-native-fast-image"));
+const react_native_reanimated_1 = require("react-native-reanimated");
+const createGeminiUrl_1 = require("../../utils/createGeminiUrl");
+const useScreenDimensions_1 = require("../../utils/hooks/useScreenDimensions");
+const Flex_1 = require("../Flex");
+const Skeleton_1 = require("../Skeleton");
+const Image = ({ aspectRatio, width, height, performResize = true, src, ...flexProps }) => {
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const dimensions = useImageDimensions({ aspectRatio, width, height });
+    let uri = src;
+    if (performResize) {
+        uri = (0, createGeminiUrl_1.createGeminiUrl)({
+            imageURL: src,
+            width: react_native_1.PixelRatio.getPixelSizeForLayoutSize(dimensions.width),
+            height: react_native_1.PixelRatio.getPixelSizeForLayoutSize(dimensions.height),
+        });
+    }
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { position: "relative", ...flexProps, children: [!!loading && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", zIndex: 1, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonBox, { ...dimensions }) }) })), (0, jsx_runtime_1.jsx)(moti_1.MotiView, { animate: { opacity: loading ? 0 : 1 }, transition: { type: "timing", duration: 400, easing: react_native_reanimated_1.Easing.sin }, children: (0, jsx_runtime_1.jsx)(react_native_fast_image_1.default, { style: dimensions, onLoadStart: () => setLoading(true), onLoadEnd: () => setLoading(false), source: {
+                        priority: react_native_fast_image_1.default.priority.normal,
+                        uri,
+                    } }) })] }));
+};
+exports.Image = Image;
+const useImageDimensions = (props) => {
+    const screenDimensions = (0, useScreenDimensions_1.useScreenDimensions)();
+    const imageWidth = props.width ?? screenDimensions.width;
+    let imageHeight;
+    if (props.height) {
+        imageHeight = props.height;
+    }
+    else {
+        if (!props.aspectRatio) {
+            console.error("[CachedImage] Error: `aspectRatio` is required if `height` is not provided.");
+        }
+        const aspectRatio = props.aspectRatio ?? 1;
+        imageHeight = imageWidth / aspectRatio;
+    }
+    const dimensions = {
+        width: imageWidth,
+        height: imageHeight,
+    };
+    return dimensions;
+};

package/dist/elements/Image/Image.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/elements/Image/Image.stories.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("@storybook/react-native");
+const Image_1 = require("./Image");
+(0, react_native_1.storiesOf)("Image", module)
+    .add("With default fallback screen width", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("With width and height", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { width: 250, height: 400, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("With aspect ratio", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { width: 250, aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("Without automatic resizing", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { aspectRatio: 0.62, performResize: false, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })));

package/dist/elements/Image/index.d.ts

@@ -0,0 +1 @@
+export * from "./Image";

package/dist/elements/Image/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Image"), exports);

package/dist/elements/index.d.ts

@@ -15,6 +15,7 @@ export * from "./EntityHeader";
 export * from "./Flex";
 export * from "./Header";
 export * from "./Histogram";
+export * from "./Image";
 export * from "./Input";
 export * from "./Join";
 export * from "./LegacyScreen";

package/dist/elements/index.js

@@ -31,6 +31,7 @@ __exportStar(require("./EntityHeader"), exports);
 __exportStar(require("./Flex"), exports);
 __exportStar(require("./Header"), exports);
 __exportStar(require("./Histogram"), exports);
+__exportStar(require("./Image"), exports);
 __exportStar(require("./Input"), exports);
 __exportStar(require("./Join"), exports);
 __exportStar(require("./LegacyScreen"), exports);

package/dist/storybook/decorators.js

@@ -14,6 +14,7 @@ const react_native_safe_area_context_1 = require("react-native-safe-area-context
 const Theme_1 = require("../Theme");
 const Flex_1 = require("../elements/Flex");
 const Text_1 = require("../elements/Text");
+const hooks_1 = require("../utils/hooks");
 const withTheme = (story) => ((0, jsx_runtime_1.jsxs)(Theme_1.Theme, { theme: "v3light", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { color: "red", children: "aaww" }), story()] }));
 exports.withTheme = withTheme;
 const atomStorage = (0, utils_1.createJSONStorage)(() => async_storage_1.default);
@@ -31,6 +32,6 @@ const useDarkModeSwitcher = (story) => {
     }, []);
     const isDarkMode = mode === "dark" || (mode === "system" && systemMode === "dark");
     const theme = isDarkMode ? "v3dark" : "v3light";
-    return ((0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaProvider, { children: (0, jsx_runtime_1.jsx)(Theme_1.Theme, { theme: theme, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "background", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "space-around", children: [(0, jsx_runtime_1.jsxs)(Text_1.Text, { color: "orange", children: ["Dark mode: ", mode, " ", mode === "system" && "(" + systemMode + ")"] }), (0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setMode("light"), children: "light" }), (0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setMode("dark"), children: "dark" }), (0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setMode("system"), children: "system" })] }), story()] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(hooks_1.ScreenDimensionsProvider, { children: (0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaProvider, { children: (0, jsx_runtime_1.jsx)(Theme_1.Theme, { theme: theme, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "background", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "space-around", children: [(0, jsx_runtime_1.jsxs)(Text_1.Text, { color: "orange", children: ["Dark mode: ", mode, " ", mode === "system" && "(" + systemMode + ")"] }), (0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setMode("light"), children: "light" }), (0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setMode("dark"), children: "dark" }), (0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setMode("system"), children: "system" })] }), story()] }) }) }) }));
 };
 exports.useDarkModeSwitcher = useDarkModeSwitcher;

package/dist/utils/createGeminiUrl.d.ts

@@ -0,0 +1,8 @@
+export declare function createGeminiUrl({ imageURL, width, height, geminiHost, imageQuality, resizeMode, }: {
+    imageURL: string;
+    width: number;
+    height: number;
+    geminiHost?: string;
+    imageQuality?: number;
+    resizeMode?: "fit" | "fill";
+}): string;

package/dist/utils/createGeminiUrl.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createGeminiUrl = void 0;
+const react_native_1 = require("react-native");
+function createGeminiUrl({ imageURL, width, height, geminiHost = "d7hftxdivxxvm.cloudfront.net", imageQuality = 80, resizeMode = "fit", }) {
+    const src = encodeURIComponent(imageURL);
+    const roundedHeight = Math.round(height);
+    const roundedWidth = Math.round(width);
+    const params = [
+        `height=${roundedHeight}`,
+        `quality=${imageQuality}`,
+        `resize_to=${resizeMode}`,
+        `src=${src}`,
+        `width=${roundedWidth}`,
+    ];
+    if (react_native_1.Platform.OS === "android" || (react_native_1.Platform.OS === "ios" && osMajorVersion() >= 14)) {
+        params.push("convert_to=webp");
+    }
+    return `https://${geminiHost}/?${params.join("&")}`;
+}
+exports.createGeminiUrl = createGeminiUrl;
+const osMajorVersion = () => {
+    // eslint-disable-next-line no-constant-condition
+    if (typeof (react_native_1.Platform.Version === "string")) {
+        return parseInt(react_native_1.Platform.Version, 10);
+    }
+    else {
+        return react_native_1.Platform.Version;
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "11.1.0",
+  "version": "11.2.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",
@@ -41,6 +41,7 @@
     "moti": "^0.25.3",
     "react-nanny": "^2.15.0",
     "react-native-collapsible-tab-view": "^6.1.4",
+    "react-native-fast-image": "^8.6.3",
     "react-native-pager-view": "^6.2.0",
     "react-spring": "8.0.23",
     "styled-system": "^5.1.5"