@artsy/palette-mobile 20.0.0--canary.399.4711.0 → 20.0.0

package/dist/elements/BorderBox/BorderBox.d.ts

@@ -1,7 +1,7 @@
-import { BorderProps, SpaceProps } from "styled-system";
+import { SpaceProps } from "styled-system";
 import { SpacingUnitsTheme } from "../../tokens";
 import { FlexProps } from "../Flex";
-export interface BorderBoxProps extends FlexProps, BorderProps, SpaceProps<SpacingUnitsTheme> {
+export interface BorderBoxProps extends FlexProps, SpaceProps<SpacingUnitsTheme> {
     hover?: boolean;
 }
 /**

package/dist/elements/Box/Box.d.ts

@@ -2,12 +2,20 @@ import { SpacingUnit } from "@artsy/palette-tokens";
 import { View, ViewProps } from "react-native";
 import { BorderProps, ColorProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TextAlignProps } from "styled-system";
 import { ColorsTheme, SpacingUnitsTheme } from "../../tokens";
+type BorderRadiusValue = number | `${number}px` | `${number}rem` | `${number}em` | `${number}%`;
+export interface SafeBorderProps extends Omit<BorderProps, "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius"> {
+    borderRadius?: BorderRadiusValue;
+    borderTopLeftRadius?: BorderRadiusValue;
+    borderTopRightRadius?: BorderRadiusValue;
+    borderBottomLeftRadius?: BorderRadiusValue;
+    borderBottomRightRadius?: BorderRadiusValue;
+}
 type GapProps = {
     gap?: SpacingUnit;
     rowGap?: SpacingUnit;
     columnGap?: SpacingUnit;
 };
-export interface BoxProps extends ViewProps, SpaceProps<SpacingUnitsTheme>, Omit<ColorProps<ColorsTheme>, "color">, FlexboxProps, LayoutProps, PositionProps, BorderProps, GapProps, TextAlignProps {
+export interface BoxProps extends ViewProps, SpaceProps<SpacingUnitsTheme>, Omit<ColorProps<ColorsTheme>, "color">, FlexboxProps, LayoutProps, PositionProps, SafeBorderProps, GapProps, TextAlignProps {
 }
 /**
  * Box is just a `View` with common styled-system props.

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/dist/elements/Separator/Separator.d.ts

@@ -1,5 +1,6 @@
-import { BorderProps, SpaceProps, WidthProps } from "styled-system";
-export interface SeparatorProps extends SpaceProps, WidthProps, BorderProps {
+import { SpaceProps, WidthProps } from "styled-system";
+import { SafeBorderProps } from "../Box";
+export interface SeparatorProps extends SpaceProps, WidthProps, SafeBorderProps {
 }
 /**
  * A horizontal divider whose width and spacing can be adjusted

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "20.0.0--canary.399.4711.0",
+  "version": "20.0.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "expo run:android --port 8082",
@@ -37,6 +37,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/theme-get": "^5.1.2",
     "events": "^3.3.0",
@@ -47,7 +48,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": [