@artsy/palette-mobile 22.1.0 → 22.2.0--canary.425.5130.0

package/dist/elements/Image/Image.js

@@ -3,7 +3,8 @@ import FastImage from "@d11/react-native-fast-image";
 import { memo, useState } from "react";
 // @ts-expect-error
 import { Blurhash } from "react-native-blurhash";
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, } from "react-native-reanimated";
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
 import { getImageURL } from "./helpers/getImageURL";
 import { DEFAULT_ANIMATION_DURATION } from "../../constants";
 import { useColor } from "../../utils/hooks";
@@ -17,7 +18,7 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
     const color = useColor();
     const onLoadEnd = () => {
         opacity.value = withSpring(0, { duration: DEFAULT_ANIMATION_DURATION }, () => {
-            runOnJS(setIsLoading)(false);
+            scheduleOnRN(setIsLoading, false);
         });
     };
     const skeletonStyle = useAnimatedStyle(() => {
@@ -26,7 +27,8 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
         };
     });
     if (showLoadingState) {
-        return (_jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }));
+        // Keep logic as small as possible here to save on performance
+        return _jsx(Flex, { backgroundColor: "mono10", ...dimensions, style: { position: "absolute" } });
     }
     return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(FastImage, { style: [
                     dimensions,

package/dist/elements/Screen/Header.d.ts

@@ -13,6 +13,7 @@ export interface HeaderProps {
     title?: string | JSX.Element;
     titleProps?: FlexProps;
     titleShown?: boolean;
+    zIndex?: number;
 }
 export declare const AnimatedHeader: React.FC<HeaderProps>;
 export declare const Header: React.FC<HeaderProps>;

package/dist/elements/Screen/Header.js

@@ -11,13 +11,13 @@ import { Touchable } from "../Touchable";
 export const AnimatedHeader = (props) => {
     return _jsx(Header, { animated: true, ...props });
 };
-export const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, title, titleProps = {}, }) => {
+export const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, title, titleProps = {}, zIndex = ZINDEX.header, }) => {
     const { width } = useScreenDimensions();
     const space = useSpace();
     // Assumes small left and right elements, it protects from overflowing
     // but doesn't cover edge cases where right or left are bigger
     const centerMaxWidth = width - space(4) - DEFAULT_ICON_SIZE * 2;
-    return (_jsxs(Flex, { height: NAVBAR_HEIGHT, flexDirection: "row", px: 2, zIndex: ZINDEX.header, backgroundColor: "background", alignItems: "center", children: [_jsx(Flex, { flex: 1, children: _jsx(Left, { leftElements: leftElements, onBack: onBack, hideLeftElements: hideLeftElements }) }), _jsx(Flex, { maxWidth: centerMaxWidth, ...titleProps, children: _jsx(Center, { animated: animated, title: title, hideTitle: hideTitle }) }), _jsx(Flex, { flex: 1, alignItems: "flex-end", children: _jsx(Right, { rightElements: rightElements, hideRightElements: hideRightElements }) })] }));
+    return (_jsxs(Flex, { height: NAVBAR_HEIGHT, flexDirection: "row", px: 2, zIndex: zIndex, backgroundColor: "background", alignItems: "center", children: [_jsx(Flex, { flex: 1, children: _jsx(Left, { leftElements: leftElements, onBack: onBack, hideLeftElements: hideLeftElements }) }), _jsx(Flex, { maxWidth: centerMaxWidth, ...titleProps, children: _jsx(Center, { animated: animated, title: title, hideTitle: hideTitle }) }), _jsx(Flex, { flex: 1, alignItems: "flex-end", children: _jsx(Right, { rightElements: rightElements, hideRightElements: hideRightElements }) })] }));
 };
 const Right = ({ hideRightElements, rightElements }) => {
     return _jsx(_Fragment, { children: !hideRightElements && rightElements });

package/dist/elements/Skeleton/Skeleton.js

@@ -29,7 +29,7 @@ export const Skeleton = ({ children }) => {
 };
 export const SkeletonText = ({ children, ...rest }) => {
     const color = useColor();
-    return (_jsx(Flex, { alignSelf: "flex-start", children: _jsx(Text, { ...rest, bg: color("mono10"), color: "transparent", children: children }) }));
+    return (_jsx(Flex, { alignSelf: "flex-start", children: _jsx(Text, { ...rest, bg: color("mono10"), color: "rgb(251, 0, 0, 0)", children: children }) }));
 };
 export const SkeletonBox = ({ children, ...rest }) => {
     const color = useColor();

package/dist/elements/Tabs/TabMasonry.d.ts

@@ -1,5 +1,5 @@
-import { MasonryFlashListProps, MasonryFlashListRef } from "@shopify/flash-list";
+import { FlashListProps, FlashListRef } from "@shopify/flash-list";
 import { Ref } from "react";
-export declare function TabMasonry<T>(props: MasonryFlashListProps<T> & {
-    innerRef?: Ref<MasonryFlashListRef<T>> | null;
+export declare function TabMasonry<T>(props: FlashListProps<T> & {
+    innerRef?: Ref<FlashListRef<T>> | null;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/elements/Tabs/TabMasonry.js

@@ -6,7 +6,7 @@ export function TabMasonry(props) {
     useListenForTabContentScroll();
     const space = useSpace();
     const contentContainerStyle = (props.contentContainerStyle ?? {});
-    return (_jsx(Tabs.MasonryFlashList, { contentContainerStyle: {
+    return (_jsx(Tabs.FlashList, { masonry: true, contentContainerStyle: {
             paddingHorizontal: space(2),
             ...contentContainerStyle,
         }, ...props, ref: props.innerRef }));

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

@@ -15,7 +15,13 @@ export declare const TabsWithAnimatedHeader: {
         name: string;
     };
 };
-export declare const _TabsWithHeader: {
+export declare const TabsWithHeader: {
+    (): import("react/jsx-runtime").JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const MasonryTabsWithHeader: {
     (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;

package/dist/elements/Tabs/Tabs.stories.js

@@ -15,7 +15,22 @@ export const TabsWithAnimatedHeader = () => (_jsxs(Screen, { children: [_jsx(Scr
 TabsWithAnimatedHeader.story = {
     name: "Tabs with AnimatedHeader",
 };
-export const _TabsWithHeader = () => (_jsxs(Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => (_jsxs(Flex, { pointerEvents: "none", p: 2, children: [_jsx(Text, { children: "Info" }), _jsx(Text, { children: "More Info" })] })), children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Some long text ".repeat(150) }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Text, { children: "Some long text ".repeat(150) }) })] }));
-_TabsWithHeader.story = {
+export const TabsWithHeader = () => {
+    return (_jsxs(Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => (_jsxs(Flex, { pointerEvents: "none", p: 2, children: [_jsx(Text, { children: "Info" }), _jsx(Text, { children: "More Info" })] })), children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Some long text ".repeat(150) }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Text, { children: "Some long text ".repeat(150) }) })] }));
+};
+TabsWithHeader.story = {
     name: "Tabs with header",
 };
+export const MasonryTabsWithHeader = () => {
+    return (_jsxs(Tabs.TabsWithHeader, { title: "Tabs with Masonry", children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.FlatList, { data: Array.from({ length: 20 }), contentContainerStyle: {
+                        paddingHorizontal: 0,
+                    }, renderItem: () => _jsx(Flex, { backgroundColor: randomHexColor(), height: 80, width: "100%" }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Tabs.FlatList, { contentContainerStyle: {
+                        paddingHorizontal: 0,
+                    }, data: Array.from({ length: 20 }), renderItem: () => _jsx(Flex, { backgroundColor: randomHexColor(), height: 80, width: "100%" }) }) })] }));
+};
+const randomHexColor = () => {
+    return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+};
+MasonryTabsWithHeader.story = {
+    name: "Masonry Tabs with header",
+};

package/dist/storybook/decorators.js

@@ -41,5 +41,5 @@ export const useDarkModeSwitcher = (story) => {
                     // 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() })] })] }) }) }));
+                        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, { flex: 1, justifyContent: "center", alignItems: "center", children: story() })] })] }) }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "22.1.0",
+  "version": "22.2.0--canary.425.5130.0",
   "description": "Artsy's design system for React Native",
   "workspaces": [
     "Example"
@@ -45,7 +45,7 @@
     "@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",
+    "@shopify/flash-list": "2.2.0",
     "@styled-system/theme-get": "^5.1.2",
     "events": "^3.3.0",
     "lodash": "^4.17.21",
@@ -124,9 +124,10 @@
     "react-native": "0.81.5",
     "react-native-haptic-feedback": "1.14.0",
     "react-native-linear-gradient": "2.6.2",
-    "react-native-reanimated": "3.19.4",
+    "react-native-reanimated": "4.1.5",
     "react-native-safe-area-context": "5.6.0",
     "react-native-svg": "15.12.1",
+    "react-native-worklets": "0.6.1",
     "react-test-renderer": "19.1.0",
     "rimraf": "4.1.2",
     "styled-components": "6.1.19",