@artsy/palette-mobile 19.18.0 → 19.19.0--canary.404.4759.0

package/dist/elements/Button/Button.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { animated, Spring, config } from "@react-spring/native";
 import { useState } from "react";
 import { Pressable } from "react-native";
 import Haptic from "react-native-haptic-feedback";
+import { config } from "react-spring";
+// @ts-ignore
+import { animated, Spring } from "react-spring/renderprops-native";
 import styled from "styled-components/native";
 import { useColor } from "../../utils/hooks";
 import { isTestEnvironment } from "../../utils/tests/isTestEnvironment";
@@ -67,7 +69,7 @@ export const Button = ({ children, disabled, haptic, icon, iconPosition = "left"
     };
     const containerSize = getSize();
     const to = useStyleForVariantAndState(variant, testOnly_state ?? displayState);
-    return (_jsx(Spring, { to: to, config: config.stiff, children: (springProps) => (_jsx(Pressable, { accessibilityLabel: rest.accessibilityLabel, accessibilityRole: "button", accessibilityState: {
+    return (_jsx(Spring, { native: true, to: to, config: config.stiff, children: (springProps) => (_jsx(Pressable, { accessibilityLabel: rest.accessibilityLabel, accessibilityRole: "button", accessibilityState: {
                 disabled,
             }, hitSlop: hitSlop, testOnly_pressed: testOnly_state === DisplayState.Pressed, disabled: testOnly_state === DisplayState.Disabled || disabled, onPressIn: () => {
                 if (displayState === DisplayState.Loading) {

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

@@ -1,23 +1,9 @@
-import { Button, ButtonProps } from "./Button";
-import { NoUndefined } from "../../utils/types";
-import type { StoryObj } from "@storybook/react";
+import { ButtonProps } from "./Button";
 declare const _default: {
     title: string;
     component: import("react").FC<ButtonProps>;
-    argTypes: {
-        variant: {
-            control: string;
-            options: NoUndefined<"text" | "outline" | "fillDark" | "fillLight" | "fillGray" | "fillSuccess" | "outlineGray" | "outlineLight">[];
-        };
-        size: {
-            control: string;
-            options: NoUndefined<"small" | "large">[];
-        };
-    };
 };
 export default _default;
-type ButtonStory = StoryObj<typeof Button>;
-export declare const Default: ButtonStory;
 export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
 export declare const States: () => import("react/jsx-runtime").JSX.Element;
 export declare const Variants: () => import("react/jsx-runtime").JSX.Element;

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

@@ -20,24 +20,6 @@ const variants = [
 export default {
     title: "Button",
     component: Button,
-    argTypes: {
-        variant: {
-            control: "select",
-            options: variants,
-        },
-        size: {
-            control: "select",
-            options: sizes,
-        },
-    },
-};
-export const Default = {
-    args: {
-        variant: "fillDark",
-        size: "large",
-        children: "Press me",
-    },
-    render: (args) => _jsx(Button, { ...args }),
 };
 export const Sizes = () => (_jsx(DataList, { data: sizes, renderItem: ({ item: size }) => (_jsx(Button, { size: size, onPress: () => console.log(`tapped ${size}`), children: capitalize(size) })) }));
 export const States = () => {

package/dist/elements/Dialog/Dialog.tests.js

@@ -1,15 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent, screen, act } from "@testing-library/react-native";
+import { fireEvent, screen } from "@testing-library/react-native";
 import { Dialog } from "./Dialog";
 import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
 describe("Dialog", () => {
-    beforeEach(() => {
-        jest.useFakeTimers();
-    });
-    afterEach(() => {
-        jest.runOnlyPendingTimers();
-        jest.useRealTimers();
-    });
     it("renders without error", () => {
         renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
                 text: "Primary Action Button",
@@ -32,9 +25,6 @@ describe("Dialog", () => {
             } }));
         const primaryButton = screen.getByTestId("dialog-primary-action-button");
         fireEvent.press(primaryButton);
-        act(() => {
-            jest.runAllTimers();
-        });
         expect(primaryActionMock).toHaveBeenCalled();
         expect(screen.getByText("Primary Action Button")).toBeOnTheScreen();
     });
@@ -49,7 +39,6 @@ describe("Dialog", () => {
             } }));
         const secondaryButton = screen.getByTestId("dialog-secondary-action-button");
         fireEvent.press(secondaryButton);
-        jest.runAllTimers();
         expect(secondaryActionMock).toHaveBeenCalled();
         expect(screen.getByText("Secondary Action Button")).toBeOnTheScreen();
     });
@@ -60,9 +49,6 @@ describe("Dialog", () => {
                 onPress: jest.fn(),
             } }));
         fireEvent.press(screen.getByTestId("dialog-backdrop"));
-        act(() => {
-            jest.runAllTimers();
-        });
         expect(onBackgroundPressMock).toHaveBeenCalled();
     });
 });

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": "19.18.0",
+  "version": "19.19.0--canary.404.4759.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"
   },
@@ -37,7 +42,6 @@
     "@artsy/icons": "^3.49.0",
     "@artsy/palette-tokens": "7.0.0",
     "@d11/react-native-fast-image": "8.12.0",
-    "@react-spring/native": "^10.0.3",
     "@shopify/flash-list": "^1.8.3",
     "@styled-system/core": "^5.1.2",
     "@styled-system/theme-get": "^5.1.2",
@@ -49,6 +53,7 @@
     "react-native-collapsible-tab-view": "^8.0.1",
     "react-native-pager-view": "6.7.1",
     "react-native-popover-view": "^6.1.0",
+    "react-spring": "8.0.23",
     "styled-system": "^5.1.5"
   },
   "peerDependenciesComments": [
@@ -77,14 +82,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",
@@ -112,8 +110,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",
@@ -126,14 +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",
-    "react-native-safe-area-context": "5.4.1",
     "react-native-svg": "15.12.0",
     "react-test-renderer": "19.0.0",
     "rimraf": "4.1.2",
@@ -161,7 +153,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": {