@artsy/palette-mobile 13.2.2 → 13.2.4

package/dist/elements/Button/FollowButton.d.ts

@@ -2,6 +2,8 @@
 import { ButtonProps } from "../Button";
 type FollowButtonProps = Omit<ButtonProps, "variant" | "size" | "longestText" | "icon" | "children"> & {
     isFollowed: boolean;
+    followCount?: number;
+    longestText?: string;
 };
-export declare const FollowButton: ({ isFollowed, ...restProps }: FollowButtonProps) => JSX.Element;
+export declare const FollowButton: ({ isFollowed, followCount, longestText, ...restProps }: FollowButtonProps) => JSX.Element;
 export {};

package/dist/elements/Button/FollowButton.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FollowButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CheckIcon_1 = require("../../svgs/CheckIcon");
+const formatLargeNumber_1 = require("../../utils/formatLargeNumber");
 const Button_1 = require("../Button");
-const FollowButton = ({ isFollowed, ...restProps }) => {
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: "Following", icon: isFollowed && (0, jsx_runtime_1.jsx)(CheckIcon_1.CheckIcon, { fill: "black60", width: "16px", height: "16px" }), ...restProps, children: isFollowed ? "Following" : "Follow" }));
+const Text_1 = require("../Text");
+const FollowButton = ({ isFollowed, followCount, longestText, ...restProps }) => {
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && (0, jsx_runtime_1.jsx)(CheckIcon_1.CheckIcon, { fill: "black60", width: "16px", height: "16px" }), ...restProps, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: "black60", children: " " + (0, formatLargeNumber_1.formatLargeNumber)(followCount, 1) }) }))] }));
 };
 exports.FollowButton = FollowButton;

package/dist/elements/ButtonNew/Button.stories.js

@@ -46,7 +46,7 @@ const VariantsDisabled = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { dat
 exports.VariantsDisabled = VariantsDisabled;
 const TheFollowButton = () => {
     const [follow, setFollow] = (0, react_1.useState)(true);
-    return ((0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { isFollowed: follow, onPress: () => setFollow((v) => !v) }) }));
+    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 40, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 400000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 40000000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4000000000, isFollowed: follow, onPress: () => setFollow((v) => !v) })] }));
 };
 exports.TheFollowButton = TheFollowButton;
 const TheCTAButton = () => ((0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsx)(CTAButton_1.CTAButton, { onPress: () => console.log("pressed"), children: "cta button" }) }));

package/dist/elements/ButtonNew/FollowButton.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
-import { ButtonProps } from "./Button";
+import { ButtonProps } from "../Button";
 type FollowButtonProps = Omit<ButtonProps, "variant" | "size" | "longestText" | "icon" | "children"> & {
     isFollowed: boolean;
+    followCount?: number;
+    longestText?: string;
 };
-export declare const FollowButton: ({ isFollowed, ...restProps }: FollowButtonProps) => JSX.Element;
+export declare const FollowButton: ({ isFollowed, followCount, longestText, ...restProps }: FollowButtonProps) => JSX.Element;
 export {};

package/dist/elements/ButtonNew/FollowButton.js

@@ -2,9 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FollowButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Button_1 = require("./Button");
-const svgs_1 = require("../../svgs");
-const FollowButton = ({ isFollowed, ...restProps }) => {
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: "Following", icon: isFollowed && (0, jsx_runtime_1.jsx)(svgs_1.CheckIcon, { fill: "black60", width: "16px", height: "16px" }), ...restProps, children: isFollowed ? "Following" : "Follow" }));
+const CheckIcon_1 = require("../../svgs/CheckIcon");
+const formatLargeNumber_1 = require("../../utils/formatLargeNumber");
+const Button_1 = require("../Button");
+const Text_1 = require("../Text");
+const FollowButton = ({ isFollowed, followCount, longestText, ...restProps }) => {
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && (0, jsx_runtime_1.jsx)(CheckIcon_1.CheckIcon, { fill: "black60", width: "16px", height: "16px" }), ...restProps, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: "black60", children: " " + (0, formatLargeNumber_1.formatLargeNumber)(followCount, 1) }) }))] }));
 };
 exports.FollowButton = FollowButton;

package/dist/elements/Input/Input.d.ts

@@ -4,7 +4,7 @@ import { EventEmitter } from "events";
 import { TextInput, TextInputProps } from "react-native";
 export declare const inputEvents: EventEmitter;
 export declare const emitInputClearEvent: () => void;
-export interface InputProps extends TextInputProps {
+export interface InputProps extends Omit<TextInputProps, "placeholder"> {
     addClearListener?: boolean;
     /**
      * We are applying some optimisations to make sure the UX is smooth
@@ -22,6 +22,27 @@ export interface InputProps extends TextInputProps {
     onHintPress?: () => void;
     onSelectTap?: () => void;
     optional?: boolean;
+    /**
+     * The placeholder can be an array of string, specifically for android, because of a bug.
+     * On ios, the longest string will always be picked, as ios can add ellipsis.
+     * On android, the longest string **that fits** will be picked, as android doesn't use ellipsis.
+     * The way to use it is to put the longest string first, and the shortest string last.
+     *
+     * Check `HACKS.md` for more info.
+     *
+     * @example
+     * const placeholders = [
+     *   "Wow this is a great and very long placeholder",
+     *   "Wow this is a great and long placeholder",
+     *   "Wow this is a great placeholder",
+     *   "Wow",
+     * ]
+     * ...
+     * <Input
+     *   placeholder={placeholders}
+     * />
+     */
+    placeholder?: string | string[];
     required?: boolean;
     selectComponentWidth?: number;
     selectDisplayLabel?: string | undefined | null;

package/dist/elements/Input/Input.js

@@ -31,6 +31,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const events_1 = require("events");
 const palette_tokens_1 = require("@artsy/palette-tokens");
 const theme_get_1 = __importDefault(require("@styled-system/theme-get"));
+const isArray_1 = __importDefault(require("lodash/isArray"));
+const isString_1 = __importDefault(require("lodash/isString"));
 const react_1 = require("react");
 const react_native_1 = require("react-native");
 const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
@@ -62,6 +64,8 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
     const [delayedFocused, setDelayedFocused] = (0, react_1.useState)(false);
     const [value, setValue] = (0, react_1.useState)(propValue ?? defaultValue);
     const [showPassword, setShowPassword] = (0, react_1.useState)(!secureTextEntry);
+    const [inputWidth, setInputWidth] = (0, react_1.useState)(0);
+    const placeholderWidths = (0, react_1.useRef)([]);
     const rightComponentRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)();
     const variant = (0, helpers_1.getInputVariant)({
@@ -136,17 +140,19 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
         }
         return leftComponentWidth;
     }, [hasLeftComponent, leftComponentWidth, onSelectTap, selectComponentWidth]);
-    const styles = {
-        fontFamily: fontFamily,
-        fontSize: parseInt(palette_tokens_1.THEME.textVariants["sm-display"].fontSize, 10),
-        minHeight: props.multiline ? exports.MULTILINE_INPUT_MIN_HEIGHT : exports.INPUT_MIN_HEIGHT,
-        maxHeight: props.multiline ? exports.MULTILINE_INPUT_MAX_HEIGHT : undefined,
-        height: props.multiline ? exports.MULTILINE_INPUT_MIN_HEIGHT : undefined,
-        borderWidth: 1,
-        paddingRight: rightComponentWidth + exports.HORIZONTAL_PADDING,
-        paddingLeft: textInputPaddingLeft,
-        ...styleProp,
-    };
+    const styles = (0, react_1.useMemo)(() => {
+        return {
+            fontFamily: fontFamily,
+            fontSize: parseInt(palette_tokens_1.THEME.textVariants["sm-display"].fontSize, 10),
+            minHeight: props.multiline ? exports.MULTILINE_INPUT_MIN_HEIGHT : exports.INPUT_MIN_HEIGHT,
+            maxHeight: props.multiline ? exports.MULTILINE_INPUT_MAX_HEIGHT : undefined,
+            height: props.multiline ? exports.MULTILINE_INPUT_MIN_HEIGHT : undefined,
+            borderWidth: 1,
+            paddingRight: rightComponentWidth + exports.HORIZONTAL_PADDING,
+            paddingLeft: textInputPaddingLeft,
+            ...styleProp,
+        };
+    }, [fontFamily, styleProp, props.multiline, rightComponentWidth, textInputPaddingLeft]);
     const labelStyles = (0, react_1.useMemo)(() => {
         return {
             // this is neeeded too make sure the label is on top of the input
@@ -210,9 +216,16 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
                 }, children: [unit && ((0, jsx_runtime_1.jsx)(Text_1.Text, { color: disabled ? "black30" : "black60", variant: "sm-display", children: unit })), icon] }));
         }
         if (onSelectTap) {
-            return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onSelectTap, style: { position: "absolute" }, hitSlop: { top: 10, right: 10, bottom: 10, left: 10 }, children: (0, jsx_runtime_1.jsxs)(AnimatedFlex, { style: [
+            return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onSelectTap, style: [
+                    leftComponentSharedStyles,
+                    {
+                        width: selectComponentWidth,
+                    },
+                ], hitSlop: { top: 10, right: 10, bottom: 10, left: 10 }, children: (0, jsx_runtime_1.jsxs)(AnimatedFlex, { style: [
                         {
-                            ...leftComponentSharedStyles,
+                            paddingHorizontal: exports.HORIZONTAL_PADDING,
+                            height: exports.INPUT_MIN_HEIGHT,
+                            alignItems: "center",
                             width: selectComponentWidth,
                             flexDirection: "row",
                             borderRightWidth: 1,
@@ -291,26 +304,68 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
                     left: 10,
                 }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { underline: true, variant: "xs", color: "black60", children: hintText }) }) }));
     }, [hintText, props.onHintPress, space]);
+    const getPlatformSpecificPlaceholder = (0, react_1.useCallback)(() => {
+        if (!placeholder) {
+            return "";
+        }
+        if (react_native_1.Platform.OS === "ios") {
+            return (0, isArray_1.default)(placeholder) ? placeholder[0] : placeholder;
+        }
+        // if it's android and we only have one string, return that string
+        if ((0, isString_1.default)(placeholder)) {
+            return placeholder;
+        }
+        // otherwise, find a placeholder that has longest width that fits in the inputtext
+        const longestFittingStringIndex = placeholderWidths.current.findIndex((placeholderWidth) => {
+            return placeholderWidth <= inputWidth;
+        });
+        if (longestFittingStringIndex > -1) {
+            return placeholder[longestFittingStringIndex];
+        }
+        // otherwise just return the shortest placeholder
+        return placeholder[placeholder.length - 1];
+    }, [inputWidth, placeholder]);
     const getPlaceholder = (0, react_1.useCallback)(() => {
         // Show placeholder always if there is no title
         // This is because we won't have a title animation
         if (!props.title) {
-            return placeholder;
+            return getPlatformSpecificPlaceholder();
         }
         // On blur, we want to show the placeholder immediately
         if (delayedFocused) {
-            return placeholder;
+            return getPlatformSpecificPlaceholder();
         }
         // On focus, we want to show the placeholder after the title animation has finished
         return "";
-    }, [delayedFocused, props.title, placeholder]);
+    }, [delayedFocused, getPlatformSpecificPlaceholder, props.title]);
     const renderAnimatedTitle = (0, react_1.useCallback)(() => {
         if (!props.title) {
             return null;
         }
         return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", zIndex: 100, pointerEvents: "none", height: exports.LABEL_HEIGHT, children: (0, jsx_runtime_1.jsxs)(AnimatedText, { style: [labelStyles, labelAnimatedStyles], numberOfLines: 1, children: [" ", props.title, " "] }) }));
     }, [labelStyles, labelAnimatedStyles, props.title]);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexGrow: 1, children: [renderHint(), renderAnimatedTitle(), (0, jsx_runtime_1.jsx)(AnimatedStyledInput, { value: value, onChangeText: handleChangeText, style: [styles, textInputAnimatedStyles], onFocus: handleFocus, onBlur: handleBlur, scrollEnabled: false, editable: !disabled, textAlignVertical: props.multiline ? "top" : "center", ref: inputRef, placeholderTextColor: color("black60"), placeholder: getPlaceholder(), secureTextEntry: !showPassword, ...props }), renderRightComponent(), renderLeftComponent(), renderBottomComponent()] }));
+    const renderAndroidPlaceholderMeasuringHack = (0, react_1.useCallback)(() => {
+        if (react_native_1.Platform.OS === "ios" || !(0, isArray_1.default)(placeholder)) {
+            return null;
+        }
+        // Do not render the hack if we have already measured the placeholder
+        if (placeholderWidths.current.length > 0) {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: {
+                position: "absolute",
+                top: -10000,
+                width: 10000,
+                alignItems: "baseline", // this is to make Texts get the smallest width they can get to fit the text
+            }, children: placeholder.map((placeholderString, index) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { onLayout: (event) => {
+                    placeholderWidths.current[index] = event.nativeEvent.layout.width;
+                }, numberOfLines: 1, style: {
+                    ...styles,
+                }, children: placeholderString }))) }));
+    }, [placeholder, styles]);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexGrow: 1, children: [renderAndroidPlaceholderMeasuringHack(), renderHint(), renderAnimatedTitle(), (0, jsx_runtime_1.jsx)(AnimatedStyledInput, { value: value, onChangeText: handleChangeText, style: [styles, textInputAnimatedStyles], onFocus: handleFocus, onBlur: handleBlur, onLayout: (event) => {
+                    setInputWidth(event.nativeEvent.layout.width);
+                }, scrollEnabled: false, editable: !disabled, textAlignVertical: props.multiline ? "top" : "center", ref: inputRef, placeholderTextColor: color("black60"), placeholder: getPlaceholder(), secureTextEntry: !showPassword, ...props }), renderRightComponent(), renderLeftComponent(), renderBottomComponent()] }));
 });
 const StyledInput = (0, styled_components_1.default)(react_native_1.TextInput) `
   padding: ${exports.HORIZONTAL_PADDING}px;

package/dist/utils/formatLargeNumber.d.ts

@@ -0,0 +1 @@
+export declare function formatLargeNumber(number: number, decimalPlaces?: number): string;

package/dist/utils/formatLargeNumber.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatLargeNumber = void 0;
+function formatLargeNumber(number, decimalPlaces = 0) {
+    if (number < 1000) {
+        return number.toString();
+    }
+    else if (number < 1000000) {
+        return `${(number / 1000).toFixed(decimalPlaces)}K`;
+    }
+    else if (number < 1000000000) {
+        return `${(number / 1000000).toFixed(decimalPlaces)}M`;
+    }
+    else {
+        return `${(number / 1000000000).toFixed(decimalPlaces)}B`;
+    }
+}
+exports.formatLargeNumber = formatLargeNumber;

package/dist/utils/formatLargeNumbers.tests.d.ts

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

package/dist/utils/formatLargeNumbers.tests.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const formatLargeNumber_1 = require("./formatLargeNumber");
+describe("formatLargeNumber", () => {
+    it("should return the same number for numbers less than 1000", () => {
+        expect((0, formatLargeNumber_1.formatLargeNumber)(500)).toBe("500");
+    });
+    it("should format numbers in thousands correctly", () => {
+        expect((0, formatLargeNumber_1.formatLargeNumber)(1500, 1)).toBe("1.5K");
+        expect((0, formatLargeNumber_1.formatLargeNumber)(1500, 2)).toBe("1.50K");
+    });
+    it("should format numbers in millions correctly", () => {
+        expect((0, formatLargeNumber_1.formatLargeNumber)(1500000, 1)).toBe("1.5M");
+        expect((0, formatLargeNumber_1.formatLargeNumber)(1500000, 2)).toBe("1.50M");
+    });
+    it("should format numbers in billions correctly", () => {
+        expect((0, formatLargeNumber_1.formatLargeNumber)(1500000000, 1)).toBe("1.5B");
+        expect((0, formatLargeNumber_1.formatLargeNumber)(1500000000, 2)).toBe("1.50B");
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "13.2.2",
+  "version": "13.2.4",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082",