@artsy/palette-mobile 19.13.0 → 19.14.0

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.14.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "expo run:android --port 8082",
@@ -114,7 +114,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",