@artsy/palette-mobile 11.0.24 → 11.0.26

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v11.0.26 (Fri May 05 2023)
+
+#### 🐛 Bug Fix
+
+- fix: mark all reanimated hooks functions as worklets explicitly [#100](https://github.com/artsy/palette-mobile/pull/100) ([@brainbicycle](https://github.com/brainbicycle))
+
+#### Authors: 1
+
+- Brian Beckerle ([@brainbicycle](https://github.com/brainbicycle))
+
+---
+
+# v11.0.25 (Thu May 04 2023)
+
+#### 🐛 Bug Fix
+
+- fix(legacy-screen): use legacy screen code from Eigen [#99](https://github.com/artsy/palette-mobile/pull/99) ([@damassi](https://github.com/damassi))
+
+#### Authors: 1
+
+- Christopher Pappas ([@damassi](https://github.com/damassi))
+
+---
+
 # v11.0.24 (Thu May 04 2023)
 
 #### 🐛 Bug Fix

package/dist/elements/ButtonNew/Button.js

@@ -80,6 +80,7 @@ const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition =
     };
     const colorsForVariantAndState = (0, colors_1.useColorsForVariantAndState)();
     const containerColorsAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        "worklet";
         const colors = colorsForVariantAndState[variant];
         if (disabled) {
             return {

package/dist/elements/LegacyScreen/LegacyScreen.d.ts

@@ -1,34 +1,35 @@
-import { FC, ReactNode } from "react";
+/// <reference types="react" />
 import { FlexProps } from "../Flex";
 interface HeaderProps {
     onBack?: () => void;
+    title?: string;
+    onSkip?: () => void;
 }
-interface RawHeaderProps {
-    children: ReactNode;
-    nosafe?: boolean;
-}
-interface LegacyBodyProps extends Partial<Pick<FlexProps, "backgroundColor">> {
-    children?: ReactNode;
+export declare const Header: React.FC<HeaderProps>;
+/**
+ * @deprecated Use `Screen.Header` instead.
+ */
+export declare const FloatingHeader: React.FC<HeaderProps>;
+interface BodyProps extends Pick<FlexProps, "backgroundColor"> {
+    children?: React.ReactNode;
     scroll?: boolean;
-    nosafe?: boolean;
     noTopSafe?: boolean;
     noBottomSafe?: boolean;
     fullwidth?: boolean;
 }
 export declare const LegacyScreen: (({ children }: {
-    children?: ReactNode;
+    children?: React.ReactNode;
 }) => JSX.Element) & {
-    Body: ({ scroll, nosafe, noTopSafe, noBottomSafe, fullwidth, children, ...restFlexProps }: LegacyBodyProps) => JSX.Element;
-    Header: ({ onBack }: HeaderProps) => JSX.Element;
-    FloatingHeader: FC<HeaderProps>;
-    RawHeader: ({ children, nosafe }: RawHeaderProps) => JSX.Element;
-    Background: ({ children }: {
-        children?: ReactNode;
-    }) => JSX.Element;
-    BottomView: ({ children }: {
-        children?: ReactNode;
-    }) => JSX.Element;
-    BodyXPadding: FC<import("..").BoxProps>;
+    Body: ({ scroll, noTopSafe, noBottomSafe, fullwidth, children, ...restFlexProps }: BodyProps) => JSX.Element;
+    Header: import("react").FC<HeaderProps>;
+    FloatingHeader: import("react").FC<HeaderProps>;
+    Background: import("react").FC<{
+        children?: import("react").ReactNode;
+    }>;
+    BottomView: import("react").FC<{
+        children?: import("react").ReactNode;
+    }>;
+    BodyXPadding: import("react").FC<import("..").BoxProps>;
     SafeBottomPadding: () => JSX.Element | null;
 };
 export {};

package/dist/elements/LegacyScreen/LegacyScreen.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LegacyScreen = void 0;
+exports.LegacyScreen = exports.FloatingHeader = exports.Header = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_nanny_1 = require("react-nanny");
@@ -15,11 +15,11 @@ const ArtsyKeyboardAvoidingView_1 = require("../ArtsyKeyboardAvoidingView");
 const BackButton_1 = require("../BackButton");
 const Flex_1 = require("../Flex");
 const Spacer_1 = require("../Spacer");
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const Text_1 = require("../Text");
+const Touchable_1 = require("../Touchable");
 const ScreenContext = (0, react_1.createContext)(null);
 function useScreenContext() {
     const context = (0, react_1.useContext)(ScreenContext);
-    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (!context) {
         throw new Error("useScreenContext must be used within a Screen");
     }
@@ -38,25 +38,23 @@ const ScreenWrapper = ({ children }) => {
 const ScreenRoot = ({ children }) => {
     const header = (0, react_nanny_1.getChildByType)(children, exports.LegacyScreen.Header);
     const headerFloating = (0, react_nanny_1.getChildByType)(children, exports.LegacyScreen.FloatingHeader);
-    const rawHeader = (0, react_nanny_1.getChildByType)(children, exports.LegacyScreen.RawHeader);
     const background = (0, react_nanny_1.getChildByType)(children, exports.LegacyScreen.Background);
     const bodyChildren = (0, react_nanny_1.getChildrenByTypeDeep)(children, exports.LegacyScreen.Body);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "background", children: [background /* fullscreen */, header, rawHeader, bodyChildren, headerFloating /* floating, so keep close to the bottom */] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "white100", children: [background /* fullscreen */, header, bodyChildren, headerFloating /* floating, so keep close to the bottom */] }));
 };
-const useUpdateScreenContext = ({ header, }) => {
+const useUpdateScreenContext = ({ header }) => {
     const { setOptions } = useScreenContext();
-    (0, react_1.useEffect)(() => void setOptions({
-        handleTopSafeArea: header === "none" || header === "floating" || header === "raw-safe",
-    }), 
+    (0, react_1.useEffect)(() => void setOptions({ handleTopSafeArea: header === "none" || header === "floating" }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [header]);
 };
 const NAVBAR_HEIGHT = 44;
-const Header = ({ onBack }) => {
+const Header = ({ onBack, title, onSkip }) => {
     useUpdateScreenContext({ header: "regular" });
     const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mt: `${insets.top}px`, height: NAVBAR_HEIGHT, px: SCREEN_HORIZONTAL_PADDING, flexDirection: "row", alignItems: "center", children: (0, jsx_runtime_1.jsx)(BackButton_1.BackButton, { onPress: onBack }) }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { mt: `${insets.top}px`, height: NAVBAR_HEIGHT, flexDirection: "row", alignItems: "center", justifyContent: "space-between", px: SCREEN_HORIZONTAL_PADDING, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { children: !!onBack && ((0, jsx_runtime_1.jsx)(BackButton_1.BackButton, { onPress: onBack, style: { flex: 1, justifyContent: "center" }, hitSlop: { left: 20, right: 20 } })) }), !!title && (0, jsx_runtime_1.jsx)(Text_1.Text, { children: title }), !!onSkip && ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { haptic: "impactLight", onPress: onSkip, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { height: "100%", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { textAlign: "right", variant: "xs", children: "Skip" }) }) }))] }));
 };
+exports.Header = Header;
 /**
  * @deprecated Use `Screen.Header` instead.
  */
@@ -68,23 +66,16 @@ const FloatingHeader = ({ onBack }) => {
     }
     return null;
 };
-/**
- * Use `RawHeader` when you need to make a custom header that we have no support for yet.
- */
-const RawHeader = ({ children, nosafe = false }) => {
-    useUpdateScreenContext({ header: nosafe ? "raw-nosafe" : "raw-safe" });
-    const saInsets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    return ((0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: !nosafe, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { top: saInsets.top, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: children }) }) }));
-};
+exports.FloatingHeader = FloatingHeader;
 const SCREEN_HORIZONTAL_PADDING = 2;
-const Body = ({ scroll = false, nosafe = false, noTopSafe = false, noBottomSafe = false, fullwidth = false, children, ...restFlexProps }) => {
+const Body = ({ scroll = false, noTopSafe = false, noBottomSafe = false, fullwidth = false, children, ...restFlexProps }) => {
     const childrenExceptBottomView = (0, react_nanny_1.removeChildrenByType)(children, exports.LegacyScreen.BottomView);
     const bottomView = (0, react_nanny_1.getChildrenByType)(children, exports.LegacyScreen.BottomView);
     const { options } = useScreenContext();
     const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
     const withTopSafeArea = options.handleTopSafeArea && !noTopSafe;
     const withBottomSafeArea = !noBottomSafe;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, mt: nosafe || withTopSafeArea ? `${insets.top}px` : undefined, mb: nosafe || withBottomSafeArea ? `${insets.bottom}px` : undefined, ...restFlexProps, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: scroll, children: (0, jsx_runtime_1.jsxs)(ArtsyKeyboardAvoidingView_1.ArtsyKeyboardAvoidingView, { children: [(0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { keyboardShouldPersistTaps: "handled", contentInset: { bottom: options.bottomViewHeight - insets.bottom }, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, px: fullwidth ? undefined : SCREEN_HORIZONTAL_PADDING, children: childrenExceptBottomView }) }) }), bottomView] }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, mt: withTopSafeArea ? `${insets.top}px` : undefined, mb: withBottomSafeArea ? `${insets.bottom}px` : undefined, ...restFlexProps, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: scroll, children: (0, jsx_runtime_1.jsxs)(ArtsyKeyboardAvoidingView_1.ArtsyKeyboardAvoidingView, { children: [(0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { keyboardShouldPersistTaps: "handled", contentInset: { bottom: options.bottomViewHeight - insets.bottom }, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, px: fullwidth ? undefined : SCREEN_HORIZONTAL_PADDING, children: childrenExceptBottomView }) }) }), bottomView] }) }) }) }));
 };
 const Background = ({ children }) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, children: children }));
 const BottomView = ({ children }) => {
@@ -123,7 +114,7 @@ const BottomView = ({ children }) => {
  * One use case might be if you need to put an image background or something in the body,
  * but you also need some content with the right padding.
  */
-const BodyXPadding = (props) => (0, jsx_runtime_1.jsx)(Flex_1.Flex, { px: SCREEN_HORIZONTAL_PADDING, ...props });
+const BodyXPadding = (props) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { px: SCREEN_HORIZONTAL_PADDING, ...props }));
 /**
  * If there is a bottom safe area, this will render nothing.
  * If there is no bottom safe area, this will render a small padding.
@@ -140,9 +131,8 @@ const SafeBottomPadding = () => {
 };
 exports.LegacyScreen = Object.assign(ScreenWrapper, {
     Body,
-    Header,
-    FloatingHeader,
-    RawHeader,
+    Header: exports.Header,
+    FloatingHeader: exports.FloatingHeader,
     Background,
     BottomView,
     BodyXPadding,

package/dist/elements/ProgressBar/ProgressBar.js

@@ -35,6 +35,7 @@ const ProgressBar = ({ animationDuration = 200, backgroundColor = "black30", hei
     const width = (0, react_native_reanimated_1.useSharedValue)("0%");
     const progress = clamp(unclampedProgress, 0, 100);
     const progressAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        "worklet";
         return { width: width.value };
     });
     const [onCompletionCalled, setOnCompletionCalled] = (0, react_1.useState)(false);

package/dist/elements/Skeleton/Skeleton.js

@@ -43,6 +43,7 @@ const Skeleton = ({ children }) => {
     const opacity = (0, react_native_reanimated_1.useSharedValue)(0.5);
     opacity.value = (0, react_native_reanimated_1.withRepeat)((0, react_native_reanimated_1.withTiming)(1, { duration: 1000, easing: react_native_reanimated_1.Easing.ease }), -1, true);
     const fadeLoopAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        "worklet";
         return { opacity: opacity.value };
     }, []);
     return (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: fadeLoopAnim, children: children });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "11.0.24",
+  "version": "11.0.26",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",