@artsy/palette-mobile 20.1.0--canary.404.4785.0 → 20.1.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 react-native-safe-area-context
+yarn add react-native-haptic-feedback react-native-linear-gradient react-native-reanimated react-native-svg
 ```
 
 ## How to contribute
@@ -75,6 +75,14 @@ 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/elements/Image/Image.js

@@ -1,7 +1,7 @@
 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 { View, Animated } from "react-native";
+import { memo, useState } from "react";
+import { View } from "react-native";
 import { Blurhash } from "react-native-blurhash";
 import { getImageURL } from "./helpers/getImageURL";
 import { useColor } from "../../utils/hooks";
@@ -9,20 +9,16 @@ 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 dimensions = useImageDimensions({ aspectRatio, width, height });
     const color = useColor();
-    const opacity = useRef(new Animated.Value(0)).current;
     const onLoadEnd = () => {
-        Animated.timing(opacity, {
-            toValue: 1,
-            duration: 200,
-            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: [_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: [isLoading && (_jsx(View, { style: [dimensions, { position: "absolute" }], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) })), _jsx(FastImage, { style: [
                     dimensions,
                     style,
                     // If we have a blurhash, we don't want to show a background color
@@ -55,7 +51,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 }) }));
+        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, { style: style, children: _jsx(Skeleton, { children: _jsx(SkeletonBox, { ...dimensions }) }) }));
 };

package/dist/storybook/decorators.js

@@ -1,12 +1,14 @@
 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, Platform, StatusBar } from "react-native";
+import { Appearance } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Theme } from "../Theme";
-import { Flex, Pill, Text } from "../elements";
+import { Flex } from "../elements/Flex";
+import { Pill } from "../elements/Pill";
+import { Text } from "../elements/Text";
 import { ScreenDimensionsProvider } from "../utils/hooks";
-export const withTheme = (story) => _jsx(Theme, { theme: "v3light", children: story() });
+export const withTheme = (story) => (_jsxs(Theme, { theme: "v3light", children: [_jsx(Text, { color: "red", children: "aaww" }), story()] }));
 const DARK_MODE_STORAGE_KEY = "dark-mode-mode";
 export const useDarkModeSwitcher = (story) => {
     const [mode, setModeState] = useState("system");
@@ -37,9 +39,5 @@ export const useDarkModeSwitcher = (story) => {
     };
     const isDarkMode = mode === "dark" || (mode === "system" && systemMode === "dark");
     const theme = isDarkMode ? "v3dark" : "v3light";
-    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() })] })] }) }) }));
+    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() })] }) }) }) }));
 };

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 { List } from "../storybook/helpers";
 import { Box, Text } from "../elements";
+import { List } from "../storybook/helpers";
 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,36 +1,31 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "20.1.0--canary.404.4785.0",
+  "version": "20.1.0",
   "description": "Artsy's design system for React Native",
-  "workspaces": [
-    "Example"
-  ],
   "scripts": {
-    "android": "yarn workspace palette-mobile-example android",
-    "android:prebuild": "yarn workspace palette-mobile-example android:prebuild",
+    "android": "expo run:android --port 8082",
     "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": "yarn workspace palette-mobile-example ios",
-    "ios:prebuild": "yarn workspace palette-mobile-example ios:prebuild",
+    "ios": "expo run:ios --port 8082",
     "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 Example/ios/PaletteMobile.xcworkspace",
+    "open-xcode": "open ios/PaletteMobile.xcworkspace",
     "postinstall": "yarn patch-package",
-    "prebuild": "yarn workspace palette-mobile-example prebuild",
+    "prebuild": "npx expo prebuild",
     "prepare": "patch-package && husky install",
     "prepublishOnly": "yarn clean && yarn compile",
-    "prestart": "yarn workspace palette-mobile-example prestart",
+    "prestart": "sb-rn-get-stories",
     "prettier-write": "prettier --write --ignore-unknown",
     "release:canary": "auto canary",
     "release": "auto shipit",
     "setup:artsy": "./scripts/download-fonts",
-    "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",
+    "start:reset-cache": "npx expo start -c --port 8082",
+    "start": "npx expo start --port 8082",
+    "storybook-watcher": "sb-rn-watcher",
     "test": "jest --maxWorkers=2",
     "type-check": "tsc --noEmit"
   },
@@ -81,7 +76,14 @@
     "@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",
@@ -106,6 +108,8 @@
     "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",
@@ -118,7 +122,10 @@
     "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",
@@ -150,7 +157,7 @@
   "author": "Pavlos Vinieratos <pvinis@gmail.com>",
   "license": "MIT",
   "pull-lock": {
-    "Example/ios/Podfile.lock": "echo \"🚨 New Podfile.lock detected!, you might need to run yarn install:all\" 🚨",
+    "ios/Podfile.lock": "echo \"🚨 New Podfile.lock detected!, you might need to run yarn install:all\" 🚨",
     "yarn.lock": "yarn install"
   },
   "lint-staged": {