@artsy/palette-mobile 19.13.0 → 19.15.0

package/dist/elements/ButtonNew/Button.js

@@ -3,13 +3,13 @@ import { useEffect, useState } from "react";
 import { Pressable } from "react-native";
 import Haptic from "react-native-haptic-feedback";
 import Animated, { interpolateColor, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from "react-native-reanimated";
+import { useColorsForVariantAndState } from "./colors";
 import { MeasuredView } from "../../elements/MeasuredView";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
 import { Spacer } from "../Spacer";
 import { Spinner } from "../Spinner";
 import { Text, useTextStyleForPalette } from "../Text";
-import { useColorsForVariantAndState } from "./colors";
 const ANIMATION_DURATION = 150;
 export const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition = "left", loading: loadingProp, block, longestText, onPress, size = "large", variant = "fillDark", testOnly_pressed, testID, hitSlop, ...restProps }) => {
     const [disabled, setDisabled, disabledV] = useStateWithProp(!!disabledProp);

package/dist/storybook/decorators.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useAtom } from "jotai";
-import { atomWithStorage, createJSONStorage } from "jotai/utils";
 import { useEffect, useState } from "react";
 import { Appearance } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -10,20 +8,34 @@ import { Flex } from "../elements/Flex";
 import { LinkText, Text } from "../elements/Text";
 import { ScreenDimensionsProvider } from "../utils/hooks";
 export const withTheme = (story) => (_jsxs(Theme, { theme: "v3light", children: [_jsx(Text, { color: "red", children: "aaww" }), story()] }));
-const atomStorage = createJSONStorage(() => AsyncStorage);
-const atomWithAsyncStorage = (key, initialValue) => atomWithStorage(key, initialValue, {
-    ...atomStorage,
-}, {
-    getOnInit: false,
-});
-const modeAtom = atomWithAsyncStorage("dark-mode-mode", "system");
+const DARK_MODE_STORAGE_KEY = "dark-mode-mode";
 export const useDarkModeSwitcher = (story) => {
-    const [mode, setMode] = useAtom(modeAtom);
+    const [mode, setModeState] = useState("system");
     const [systemMode, setSystemMode] = useState(Appearance.getColorScheme() ?? "light");
+    // Load initial value from AsyncStorage on mount
     useEffect(() => {
-        const subscription = Appearance.addChangeListener(({ colorScheme }) => void setSystemMode(colorScheme ?? "light"));
+        AsyncStorage.getItem(DARK_MODE_STORAGE_KEY)
+            .then((value) => {
+            if (value && (value === "light" || value === "dark" || value === "system")) {
+                setModeState(value);
+            }
+        })
+            .catch((error) => {
+            console.error("Failed to load dark mode preference:", error);
+        });
+    }, []);
+    useEffect(() => {
+        const subscription = Appearance.addChangeListener(({ colorScheme }) => {
+            setSystemMode(colorScheme ?? "light");
+        });
         return () => subscription.remove();
     }, []);
+    const setMode = (newMode) => {
+        setModeState(newMode);
+        AsyncStorage.setItem(DARK_MODE_STORAGE_KEY, newMode).catch((error) => {
+            console.error("Failed to save dark mode preference:", error);
+        });
+    };
     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", children: [_jsxs(Text, { color: "orange", children: ["Dark mode: ", mode, " ", mode === "system" && "(" + systemMode + ")"] }), _jsx(LinkText, { color: "orange", onPress: () => setMode("light"), children: "light" }), _jsx(LinkText, { color: "orange", onPress: () => setMode("dark"), children: "dark" }), _jsx(LinkText, { color: "orange", onPress: () => setMode("system"), children: "system" })] }), story()] }) }) }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "19.13.0",
+  "version": "19.15.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "expo run:android --port 8082",
@@ -77,9 +77,10 @@
     "@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/eslint-config": "0.76.9",
-    "@storybook/react-native": "7.6.20",
+    "@storybook/react-native": "^8.6.2",
     "@testing-library/react-native": "13.2.0",
     "@types/events": "^3.0.0",
     "@types/jest": "29.4.0",
@@ -114,7 +115,6 @@
     "jest-environment-jsdom": "29.4.2",
     "jest-extended": "3.2.3",
     "jest-watch-typeahead": "2.2.2",
-    "jotai": "^2.15.0",
     "lint-staged": "13.1.2",
     "nodemon": "^2.0.20",
     "patch-package": "^8.0.0",
@@ -125,6 +125,7 @@
     "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",
@@ -144,7 +145,6 @@
   "files": [
     "dist"
   ],
-  "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "publishConfig": {
     "access": "public"