@artsy/palette-mobile 20.0.0--canary.399.4691.0 → 20.0.0--canary.399.4716.0

package/dist/elements/Avatar/Avatar.d.ts

@@ -7,6 +7,7 @@ export interface AvatarProps extends ImgHTMLAttributes<any> {
     /** The size of the Avatar */
     size?: AvatarSize;
     src?: string;
+    performResize?: boolean;
 }
 /** A circular Avatar component containing an image or initials */
-export declare const Avatar: ({ src, initials, size, blurhash }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Avatar: ({ src, initials, size, blurhash, performResize, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Avatar/Avatar.js

@@ -26,11 +26,11 @@ const VARIANTS = {
     },
 };
 /** A circular Avatar component containing an image or initials */
-export const Avatar = ({ src, initials, size = DEFAULT_SIZE, blurhash }) => {
+export const Avatar = ({ src, initials, size = DEFAULT_SIZE, blurhash, performResize = true, }) => {
     const color = useColor();
     const { diameter, textSize } = VARIANTS[size];
     if (src) {
-        return (_jsx(MotiView, { entering: FadeIn, children: _jsx(Box, { width: diameter, height: diameter, borderRadius: diameter / 2, overflow: "hidden", borderColor: color("mono0"), borderWidth: 1, children: _jsx(Image, { blurhash: blurhash, resizeMode: "cover", src: src, height: diameter, width: diameter, accessibilityLabel: "AvatarImage", style: {
+        return (_jsx(MotiView, { entering: FadeIn, children: _jsx(Box, { width: diameter, height: diameter, borderRadius: diameter / 2, overflow: "hidden", borderColor: color("mono0"), borderWidth: 1, children: _jsx(Image, { blurhash: blurhash, resizeMode: "cover", src: src, height: diameter, width: diameter, accessibilityLabel: "AvatarImage", performResize: performResize, style: {
                         width: diameter,
                         height: diameter,
                     } }) }) }));

package/dist/elements/BorderBox/BorderBox.d.ts

@@ -1,7 +1,7 @@
-import { BorderProps, SpaceProps } from "styled-system";
+import { SpaceProps } from "styled-system";
 import { SpacingUnitsTheme } from "../../tokens";
 import { FlexProps } from "../Flex";
-export interface BorderBoxProps extends FlexProps, BorderProps, SpaceProps<SpacingUnitsTheme> {
+export interface BorderBoxProps extends FlexProps, SpaceProps<SpacingUnitsTheme> {
     hover?: boolean;
 }
 /**

package/dist/elements/Box/Box.d.ts

@@ -2,12 +2,20 @@ import { SpacingUnit } from "@artsy/palette-tokens";
 import { View, ViewProps } from "react-native";
 import { BorderProps, ColorProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TextAlignProps } from "styled-system";
 import { ColorsTheme, SpacingUnitsTheme } from "../../tokens";
+type BorderRadiusValue = number | `${number}px` | `${number}rem` | `${number}em` | `${number}%`;
+export interface SafeBorderProps extends Omit<BorderProps, "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius"> {
+    borderRadius?: BorderRadiusValue;
+    borderTopLeftRadius?: BorderRadiusValue;
+    borderTopRightRadius?: BorderRadiusValue;
+    borderBottomLeftRadius?: BorderRadiusValue;
+    borderBottomRightRadius?: BorderRadiusValue;
+}
 type GapProps = {
     gap?: SpacingUnit;
     rowGap?: SpacingUnit;
     columnGap?: SpacingUnit;
 };
-export interface BoxProps extends ViewProps, SpaceProps<SpacingUnitsTheme>, Omit<ColorProps<ColorsTheme>, "color">, FlexboxProps, LayoutProps, PositionProps, BorderProps, GapProps, TextAlignProps {
+export interface BoxProps extends ViewProps, SpaceProps<SpacingUnitsTheme>, Omit<ColorProps<ColorsTheme>, "color">, FlexboxProps, LayoutProps, PositionProps, SafeBorderProps, GapProps, TextAlignProps {
 }
 /**
  * Box is just a `View` with common styled-system props.

package/dist/elements/Image/Image.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import FastImage from "@d11/react-native-fast-image";
 import { memo, useRef } from "react";
-import { PixelRatio, View, Animated } from "react-native";
+import { View, Animated } from "react-native";
 import { Blurhash } from "react-native-blurhash";
-import { createGeminiUrl } from "../../utils/createGeminiUrl";
+import { getImageURL } from "./helpers/getImageURL";
 import { useColor } from "../../utils/hooks";
 import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
 import { Flex } from "../Flex";
@@ -22,15 +22,6 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
     if (showLoadingState) {
         return (_jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }));
     }
-    let uri = src;
-    if (performResize) {
-        uri = createGeminiUrl({
-            imageURL: src,
-            width: PixelRatio.getPixelSizeForLayoutSize(dimensions.width),
-            height: PixelRatio.getPixelSizeForLayoutSize(dimensions.height),
-            resizeMode: geminiResizeMode,
-        });
-    }
     return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(View, { style: [dimensions, { position: "absolute" }], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) }), _jsx(FastImage, { style: [
                     dimensions,
                     style,
@@ -39,7 +30,7 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
                     { backgroundColor: blurhash ? "transparent" : color("mono30") },
                 ], resizeMode: resizeMode, onLoadEnd: onLoadEnd, source: {
                     priority: FastImage.priority.normal,
-                    uri,
+                    uri: getImageURL({ src, dimensions, geminiResizeMode, performResize }),
                 } })] }));
 });
 const useImageDimensions = (props) => {

package/dist/elements/Image/__tests__/getImageURL.tests.d.ts

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

package/dist/elements/Image/__tests__/getImageURL.tests.js

@@ -0,0 +1,30 @@
+import { getImageURL } from "../helpers/getImageURL";
+describe("getImageURL", () => {
+    it("should return the original url if performResize is true", () => {
+        const url = getImageURL({
+            src: "https://example.com/image.jpg",
+            dimensions: { width: 100, height: 100 },
+            geminiResizeMode: "fill",
+            performResize: true,
+        });
+        expect(url).toBe("https://d7hftxdivxxvm.cloudfront.net/?height=200&quality=80&resize_to=fill&src=https%3A%2F%2Fexample.com%2Fimage.jpg&width=200");
+    });
+    it("should return the original url if performResize is true and the url is already resized", () => {
+        const url = getImageURL({
+            src: "https://d7hftxdivxxvm.cloudfront.net/?height=100&quality=80&resize_to=fill&src=https%3A%2F%2Fexample.com%2Fimage.jpg&width=100",
+            dimensions: { width: 100, height: 100 },
+            geminiResizeMode: "fill",
+            performResize: true,
+        });
+        expect(url).toBe("https://d7hftxdivxxvm.cloudfront.net/?height=100&quality=80&resize_to=fill&src=https%3A%2F%2Fexample.com%2Fimage.jpg&width=100");
+    });
+    it("should return the original url if performResize is false", () => {
+        const url = getImageURL({
+            src: "https://example.com/image.jpg",
+            dimensions: { width: 100, height: 100 },
+            geminiResizeMode: "fill",
+            performResize: false,
+        });
+        expect(url).toBe("https://example.com/image.jpg");
+    });
+});

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

@@ -0,0 +1,14 @@
+import { GeminiResizeMode } from "../../../utils/createGeminiUrl";
+/**
+ * This method retuns a valid image url to be used within an Image Component
+ * It handles the case of resizing the image on the fly using Gemini
+ */
+export declare const getImageURL: ({ src, dimensions, geminiResizeMode, performResize, }: {
+    src: string;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    geminiResizeMode: GeminiResizeMode;
+    performResize: boolean;
+}) => string;

package/dist/elements/Image/helpers/getImageURL.js

@@ -0,0 +1,25 @@
+import { PixelRatio } from "react-native";
+import { createGeminiUrl, imageAlreadyResized, } from "../../../utils/createGeminiUrl";
+/**
+ * This method retuns a valid image url to be used within an Image Component
+ * It handles the case of resizing the image on the fly using Gemini
+ */
+export const getImageURL = ({ src, dimensions, geminiResizeMode, performResize, }) => {
+    let uri = src;
+    if (performResize) {
+        if (!imageAlreadyResized(src)) {
+            uri = createGeminiUrl({
+                imageURL: src,
+                width: PixelRatio.getPixelSizeForLayoutSize(dimensions.width),
+                height: PixelRatio.getPixelSizeForLayoutSize(dimensions.height),
+                resizeMode: geminiResizeMode,
+            });
+        }
+        else {
+            if (__DEV__) {
+                console.warn("You are resizing a gemini url that is already resized. Pass performResize={false} or do not use a resized url");
+            }
+        }
+    }
+    return uri;
+};

package/dist/elements/Separator/Separator.d.ts

@@ -1,5 +1,6 @@
-import { BorderProps, SpaceProps, WidthProps } from "styled-system";
-export interface SeparatorProps extends SpaceProps, WidthProps, BorderProps {
+import { SpaceProps, WidthProps } from "styled-system";
+import { SafeBorderProps } from "../Box";
+export interface SeparatorProps extends SpaceProps, WidthProps, SafeBorderProps {
 }
 /**
  * A horizontal divider whose width and spacing can be adjusted

package/dist/utils/createGeminiUrl.d.ts

@@ -1,4 +1,5 @@
 export type GeminiResizeMode = "fit" | "fill";
+export declare const imageAlreadyResized: (imageURL: string) => boolean;
 export declare function createGeminiUrl({ imageURL, width, height, geminiHost, imageQuality, resizeMode, }: {
     imageURL: string;
     width: number;

package/dist/utils/createGeminiUrl.js

@@ -3,8 +3,11 @@ const geminiHosts = [
     "https://d7hftxdivxxvm.cloudfront.net",
     "https://d196wkiy8qx2u5.cloudfront.net",
 ];
+export const imageAlreadyResized = (imageURL) => {
+    return geminiHosts.some((host) => imageURL.includes(host));
+};
 export function createGeminiUrl({ imageURL, width, height, geminiHost = "d7hftxdivxxvm.cloudfront.net", imageQuality = 80, resizeMode = "fill", }) {
-    if (geminiHosts.some((host) => imageURL.includes(host))) {
+    if (imageAlreadyResized(imageURL)) {
         console.error("Image: `performResize` on self referential url. Avoid resizing gemini urls. Pass performResize={false} to fix this.", { imageURL });
     }
     const src = encodeURIComponent(imageURL);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "20.0.0--canary.399.4691.0",
+  "version": "20.0.0--canary.399.4716.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "expo run:android --port 8082",