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

package/README.md

@@ -33,12 +33,6 @@ If the above guidance still doesn't give you a good sense of what to do, please
 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
-```
-
 ## How to contribute
 
 If you'd like to add a new component to Palette please create an issue using the component spec template. That'll give both design and engineering a chance to peek at the proposal and provide feedback before moving forward.
@@ -75,14 +69,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/elements/Button/Button.js

@@ -1,10 +1,8 @@
 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";
@@ -69,7 +67,7 @@ export const Button = ({ children, disabled, haptic, icon, iconPosition = "left"
     };
     const containerSize = getSize();
     const to = useStyleForVariantAndState(variant, testOnly_state ?? displayState);
-    return (_jsx(Spring, { native: true, to: to, config: config.stiff, children: (springProps) => (_jsx(Pressable, { accessibilityLabel: rest.accessibilityLabel, accessibilityRole: "button", accessibilityState: {
+    return (_jsx(Spring, { 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,9 +1,23 @@
-import { ButtonProps } from "./Button";
+import { Button, ButtonProps } from "./Button";
+import { NoUndefined } from "../../utils/types";
+import type { StoryObj } from "@storybook/react";
 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,6 +20,24 @@ 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,8 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent, screen } from "@testing-library/react-native";
+import { fireEvent, screen, act } 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",
@@ -25,6 +32,9 @@ 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();
     });
@@ -39,6 +49,7 @@ 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();
     });
@@ -49,6 +60,9 @@ describe("Dialog", () => {
                 onPress: jest.fn(),
             } }));
         fireEvent.press(screen.getByTestId("dialog-backdrop"));
+        act(() => {
+            jest.runAllTimers();
+        });
         expect(onBackgroundPressMock).toHaveBeenCalled();
     });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "19.19.0--canary.404.4759.0",
+  "version": "19.19.0--canary.404.4771.0",
   "description": "Artsy's design system for React Native",
   "workspaces": [
     "Example"
@@ -42,6 +42,7 @@
     "@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",
@@ -53,7 +54,6 @@
     "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": [