@artsy/palette-mobile 20.1.0 → 20.3.0

package/README.md

@@ -36,7 +36,7 @@ yarn add @artsy/palette-mobile
 - Install native peer deps
 
 ```sh
-yarn add react-native-haptic-feedback react-native-linear-gradient react-native-reanimated react-native-svg
+yarn add react-native-haptic-feedback react-native-linear-gradient react-native-reanimated react-native-svg react-native-safe-area-context
 ```
 
 ## How to contribute
@@ -75,14 +75,6 @@ or
 yarn android
 ```
 
-⚠️ Temporary workaround until we move Expo into an example directory:
-
-For local development, remove the line from package.json:
-
-`"main": "dist/index.js"`
-
-Make sure to add it back before committing.
-
 ## Developing Features using Local Versions of Palette
 
 When developing new components in Palette, it's often useful to test those components in consuming apps (such as Eigen). However, due to the poor support for symlinks in React Native, this can be difficult. Enter [yalc](https://github.com/wclr/yalc). Yalc is a mini package manager that one can publish to and install from, which makes it easy to test code in realtime from outside of your app.

package/dist/constants.d.ts

@@ -13,3 +13,5 @@ export declare const DEFAULT_ICON_SIZE: number;
  */
 export declare let DEFAULT_ACTIVE_OPACITY: number;
 export declare const setGlobalActiveOpacity: (opacity: number) => void;
+export declare const isNewArchitectureEnabled: boolean;
+export declare const DEFAULT_ANIMATION_DURATION = 200;

package/dist/constants.js

@@ -12,3 +12,8 @@ export let DEFAULT_ACTIVE_OPACITY = 0.8;
 export const setGlobalActiveOpacity = (opacity) => {
     DEFAULT_ACTIVE_OPACITY = opacity;
 };
+// Check if the global `nativeFabric` object exists.
+// Its presence indicates that Fabric is running.
+// nativeFabricUIManager is only available in the new architecture and isn't typed yet
+export const isNewArchitectureEnabled = !!global?.nativeFabricUIManager;
+export const DEFAULT_ANIMATION_DURATION = 200;

package/dist/elements/Image/Image.js

@@ -1,24 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import FastImage from "@d11/react-native-fast-image";
 import { memo, useState } from "react";
-import { View } from "react-native";
+import { Animated, useAnimatedValue } from "react-native";
 import { Blurhash } from "react-native-blurhash";
 import { getImageURL } from "./helpers/getImageURL";
+import { DEFAULT_ANIMATION_DURATION, isNewArchitectureEnabled } from "../../constants";
 import { useColor } from "../../utils/hooks";
 import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
 import { Flex } from "../Flex";
 import { Skeleton, SkeletonBox } from "../Skeleton";
 export const Image = memo(({ aspectRatio, width, height, performResize = true, src, style, resizeMode, geminiResizeMode, showLoadingState = false, blurhash, ...flexProps }) => {
-    const [isLoading, setIsLoading] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
     const dimensions = useImageDimensions({ aspectRatio, width, height });
+    const opacity = useAnimatedValue(1);
     const color = useColor();
     const onLoadEnd = () => {
-        setIsLoading(false);
+        Animated.timing(opacity, {
+            toValue: 0,
+            duration: DEFAULT_ANIMATION_DURATION,
+            useNativeDriver: true,
+        }).start(() => {
+            setIsLoading(false);
+        });
     };
     if (showLoadingState) {
         return (_jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }));
     }
-    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [isLoading && (_jsx(View, { style: [dimensions, { position: "absolute" }], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) })), _jsx(FastImage, { style: [
+    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(FastImage, { style: [
                     dimensions,
                     style,
                     // If we have a blurhash, we don't want to show a background color
@@ -27,7 +35,12 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
                 ], resizeMode: resizeMode, onLoadEnd: onLoadEnd, source: {
                     priority: FastImage.priority.normal,
                     uri: getImageURL({ src, dimensions, geminiResizeMode, performResize }),
-                } })] }));
+                } }), isLoading && (_jsx(Animated.View, { style: [
+                    dimensions,
+                    // We are disabling the opacity animation in the new architecture because it is still slow
+                    // We will bring this back once we are on RN81+ aka a version with this fix
+                    { position: "absolute", opacity: isNewArchitectureEnabled ? 0 : opacity },
+                ], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) }))] }));
 });
 const useImageDimensions = (props) => {
     const screenDimensions = useScreenDimensions();
@@ -51,7 +64,7 @@ const useImageDimensions = (props) => {
 };
 export const ImageSkeleton = ({ dimensions, blurhash, style }) => {
     if (!!blurhash) {
-        return (_jsx(Flex, { backgroundColor: "mono10", ...dimensions, style: style, children: _jsx(Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16, decodeAsync: true }) }));
+        return (_jsx(Flex, { ...dimensions, style: style, children: _jsx(Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16, decodeAsync: true }) }));
     }
     return (_jsx(Flex, { style: style, children: _jsx(Skeleton, { children: _jsx(SkeletonBox, { ...dimensions }) }) }));
 };

package/dist/storybook/decorators.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useEffect, useState } from "react";
-import { Appearance } from "react-native";
+import { Appearance, Platform, StatusBar } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Theme } from "../Theme";
-import { Flex } from "../elements/Flex";
-import { Pill } from "../elements/Pill";
-import { Text } from "../elements/Text";
+import { Flex, Pill, Text } from "../elements";
 import { ScreenDimensionsProvider } from "../utils/hooks";
-export const withTheme = (story) => (_jsxs(Theme, { theme: "v3light", children: [_jsx(Text, { color: "red", children: "aaww" }), story()] }));
+export const withTheme = (story) => _jsx(Theme, { theme: "v3light", children: story() });
 const DARK_MODE_STORAGE_KEY = "dark-mode-mode";
 export const useDarkModeSwitcher = (story) => {
     const [mode, setModeState] = useState("system");
@@ -39,5 +37,9 @@ export const useDarkModeSwitcher = (story) => {
     };
     const isDarkMode = mode === "dark" || (mode === "system" && systemMode === "dark");
     const theme = isDarkMode ? "v3dark" : "v3light";
-    return (_jsx(ScreenDimensionsProvider, { children: _jsx(SafeAreaProvider, { children: _jsx(Theme, { theme: theme, children: _jsxs(Flex, { flex: 1, backgroundColor: "background", children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-around", py: 1, backgroundColor: "mono5", children: [_jsx(Text, { color: "mono100", children: "Dark mode" }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "default", selected: mode === "light", onPress: () => setMode("light"), children: "Light" }), _jsx(Pill, { variant: "default", selected: mode === "dark", onPress: () => setMode("dark"), children: "Dark" }), _jsx(Pill, { variant: "default", selected: mode === "system", onPress: () => setMode("system"), children: "System" })] })] }), _jsx(Flex, { p: 2, children: story() })] }) }) }) }));
+    return (_jsx(ScreenDimensionsProvider, { children: _jsx(SafeAreaProvider, { children: _jsxs(Theme, { theme: theme, children: [_jsx(StatusBar
+                    // We are keeping the status bar white on darkmode on ios because background isn't a supported prop on iOS
+                    , { 
+                        // We are keeping the status bar white on darkmode on ios because background isn't a supported prop on iOS
+                        barStyle: isDarkMode && Platform.OS === "android" ? "light-content" : "dark-content", backgroundColor: isDarkMode && Platform.OS === "android" ? "black" : "white", translucent: true }), _jsxs(Flex, { flex: 1, backgroundColor: "background", children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-around", py: 1, backgroundColor: "mono5", children: [_jsx(Text, { color: "mono100", children: "Dark mode" }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "default", selected: mode === "light", onPress: () => setMode("light"), children: "Light" }), _jsx(Pill, { variant: "default", selected: mode === "dark", onPress: () => setMode("dark"), children: "Dark" }), _jsx(Pill, { variant: "default", selected: mode === "system", onPress: () => setMode("system"), children: "System" })] })] }), _jsx(Flex, { p: 2, children: story() })] })] }) }) }));
 };

package/dist/utils/space.stories.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSpace } from "./hooks";
 import { bullet } from "./text";
-import { Box, Text } from "../elements";
 import { List } from "../storybook/helpers";
+import { Box, Text } from "../elements";
 const SpaceLine = ({ space: theSpace }) => {
     const space = useSpace();
     return (_jsxs(Box, { children: [_jsx(Box, { width: space(theSpace), borderBottomWidth: 1, borderColor: "black", marginBottom: "4px" }), _jsx(Text, { color: "black", children: `${theSpace} ${bullet} ${space(theSpace)}px` })] }));

package/package.json

@@ -1,31 +1,36 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "20.1.0",
+  "version": "20.3.0",
   "description": "Artsy's design system for React Native",
+  "workspaces": [
+    "Example"
+  ],
   "scripts": {
-    "android": "expo run:android --port 8082",
+    "android": "yarn workspace palette-mobile-example android",
+    "android:prebuild": "yarn workspace palette-mobile-example android:prebuild",
     "beta:ios": "bundle e fastlane ios beta",
     "bundle-install": "bundle install",
     "clean": "rimraf dist",
     "compile": "tsc",
     "install:all": "yarn install && yarn postinstall && yarn bundle-install",
-    "ios": "expo run:ios --port 8082",
+    "ios": "yarn workspace palette-mobile-example ios",
+    "ios:prebuild": "yarn workspace palette-mobile-example ios:prebuild",
     "lint:all": "yarn lint .",
     "lint": "eslint --cache --cache-location '.cache/eslint/' --ext .ts,.tsx --fix",
     "local-palette-dev": "./scripts/sync-after-change",
-    "open-xcode": "open ios/PaletteMobile.xcworkspace",
+    "open-xcode": "open Example/ios/PaletteMobile.xcworkspace",
     "postinstall": "yarn patch-package",
-    "prebuild": "npx expo prebuild",
+    "prebuild": "yarn workspace palette-mobile-example prebuild",
     "prepare": "patch-package && husky install",
     "prepublishOnly": "yarn clean && yarn compile",
-    "prestart": "sb-rn-get-stories",
+    "prestart": "yarn workspace palette-mobile-example prestart",
     "prettier-write": "prettier --write --ignore-unknown",
     "release:canary": "auto canary",
     "release": "auto shipit",
     "setup:artsy": "./scripts/download-fonts",
-    "start:reset-cache": "npx expo start -c --port 8082",
-    "start": "npx expo start --port 8082",
-    "storybook-watcher": "sb-rn-watcher",
+    "start:reset-cache": "yarn workspace palette-mobile-example start:reset-cache",
+    "start": "yarn workspace palette-mobile-example start",
+    "storybook-watcher": "yarn workspace palette-mobile-example storybook-watcher",
     "test": "jest --maxWorkers=2",
     "type-check": "tsc --noEmit"
   },
@@ -76,14 +81,7 @@
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
     "@babel/runtime": "^7.25.0",
-    "@gorhom/bottom-sheet": "^4.6.4",
-    "@react-native-async-storage/async-storage": "2.2.0",
-    "@react-native-community/datetimepicker": "8.0.1",
-    "@react-native-community/slider": "4.5.2",
     "@react-native/eslint-config": "0.76.9",
-    "@storybook/addon-ondevice-actions": "^8.3.5",
-    "@storybook/addon-ondevice-controls": "^8.3.5",
-    "@storybook/react-native": "^8.6.2",
     "@testing-library/react-native": "13.2.0",
     "@types/events": "^3.0.0",
     "@types/jest": "29.4.0",
@@ -108,8 +106,6 @@
     "eslint-plugin-react-native-a11y": "^3.5.1",
     "eslint-plugin-storybook": "0.6.10",
     "eslint-plugin-testing-library": "6.4.0",
-    "expo": "^53.0.0",
-    "expo-dev-client": "~5.2.4",
     "husky": "^8.0.3",
     "jest": "~29.7.0",
     "jest-environment-jsdom": "29.4.2",
@@ -122,10 +118,7 @@
     "prettier": "^2.8.8",
     "pull-lock": "1.0.0",
     "react": "19.0.0",
-    "react-dom": "19.0.0",
     "react-native": "0.79.6",
-    "react-native-device-info": "14.0.4",
-    "react-native-gesture-handler": "~2.22.1",
     "react-native-haptic-feedback": "1.14.0",
     "react-native-linear-gradient": "2.6.2",
     "react-native-reanimated": "3.17.5",
@@ -157,7 +150,7 @@
   "author": "Pavlos Vinieratos <pvinis@gmail.com>",
   "license": "MIT",
   "pull-lock": {
-    "ios/Podfile.lock": "echo \"🚨 New Podfile.lock detected!, you might need to run yarn install:all\" 🚨",
+    "Example/ios/Podfile.lock": "echo \"🚨 New Podfile.lock detected!, you might need to run yarn install:all\" 🚨",
     "yarn.lock": "yarn install"
   },
   "lint-staged": {