@jobber/components-native 0.113.4-implement--94d34f8.2 → 0.113.4-implement--97f86be.3

package/dist/docs/AtlantisThemeContext/AtlantisThemeContext.md

@@ -5,16 +5,22 @@ tokens.
 
 ## Design & usage guidelines
 
-Both the web and mobile components have the exact same API, except for one minor
-difference in how you update the theme.
+Web and mobile both expose Atlantis theme context, but the runtime ownership is
+slightly different across platforms.
 
 Each platform provides a `useAtlantisTheme` hook that you may use to access the
-`theme` and `tokens` in your components.
+current theme information and design tokens in your components.
 
-On mobile, this hook also returns a `setTheme` function which you'll use to
-update the theme for the nearest `AtlantisThemeContextProvider` ancestor.
-Typically there will only be a single provider at the root, controlling the
-theme for the entire app.
+On mobile, the hook returns:
+
+* `theme`: the selected theme preference (`"system" | "light" | "dark"`)
+* `effectiveTheme`: the resolved theme Atlantis uses for tokens
+  (`"light" | "dark"`)
+* `tokens`
+* `setTheme`
+
+Typically there will only be a single provider at the root, and the consuming
+app will control `theme` and persist that preference outside Atlantis.
 
 On web, you'll need to import the `updateTheme` function and call it with the
 new theme. This is a separate function because it synchronizes the theme update
@@ -86,7 +92,7 @@ function App() {
 }
 
 function ThemedComponent() {
-  const { theme, tokens, setTheme } = useAtlantisTheme();
+  const { theme, effectiveTheme, tokens, setTheme } = useAtlantisTheme();
   return (
     <Content>
       <View
@@ -96,11 +102,16 @@ function ThemedComponent() {
         }}
       >
         <Content>
-          <Text>The current theme is: {theme}.</Text>
+          <Text>The selected theme is: {theme}.</Text>
+          <Text>The effective theme is: {effectiveTheme}.</Text>
           <Text>
             The javascript tokens can be accessed via the tokens object.
           </Text>
           <Text>The theme can be changed using `setTheme`</Text>
+          <Button
+            onPress={() => setTheme("system")}
+            label="The theme can be changed to system"
+          />
           <Button
             onPress={() => setTheme("light")}
             label="The theme can be changed to light"
@@ -163,6 +174,10 @@ regardless of the main application theme. This can be done by setting the
 `dangerouslyOverrideTheme` prop to `<themeToSet>` on the
 `AtlantisThemeContextProvider`.
 
+On mobile, forcing a theme changes the rendered tokens for that subtree, but it
+does not replace the selected theme preference semantics from the nearest
+non-forced provider.
+
 Note: If you're using `buildThemedStyles`, any `useStyles` calls must be done
 within a *child component* of the `AtlantisThemeContextProvider`, not in the
 same component that renders the provider. Same goes for `useAtlantisTheme`.

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.113.4-implement--94d34f8.2+94d34f81",
+    "version": "0.113.4-implement--97f86be.3+97f86be1",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -124,5 +124,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "94d34f81c5579bf7aec109cd129a94ea91aadf56"
+    "gitHead": "97f86be1230044c71581dea90ac836ab6a65f580"
 }

package/dist/src/AtlantisThemeContext/AtlantisThemeContext.js

@@ -8,26 +8,34 @@ const lightTokens = Platform.select({
     default: () => androidTokens,
 })();
 const completeDarkTokens = merge({}, lightTokens, darkTokens);
-const AtlantisThemeContext = createContext({
+const defaultAtlantisThemeContextValue = {
     theme: "light",
     effectiveTheme: "light",
     tokens: lightTokens,
     setTheme: () => {
         console.error("useAtlantisTheme accessed outside of AtlantisThemeContextProvider");
     },
-});
+};
+const AtlantisThemeContext = createContext(undefined);
 export function AtlantisThemeContextProvider({ children, theme, onThemeChange, dangerouslyOverrideTheme, }) {
-    var _a;
-    const [uncontrolledTheme, setUncontrolledTheme] = useState("light");
+    var _a, _b;
+    const parentThemeContext = useContext(AtlantisThemeContext);
+    const [localTheme, setLocalTheme] = useState(undefined);
     const colorScheme = useColorScheme();
     const setTheme = useCallback((nextTheme) => {
         onThemeChange === null || onThemeChange === void 0 ? void 0 : onThemeChange(nextTheme);
-        if (theme === undefined) {
-            setUncontrolledTheme(nextTheme);
+        if (theme !== undefined)
+            return;
+        // A forced visual override should preserve the parent subtree's selected
+        // theme semantics while still rendering with the forced tokens.
+        if (dangerouslyOverrideTheme !== undefined && parentThemeContext) {
+            parentThemeContext.setTheme(nextTheme);
+            return;
         }
-    }, [onThemeChange, theme]);
-    const currentTheme = (_a = dangerouslyOverrideTheme !== null && dangerouslyOverrideTheme !== void 0 ? dangerouslyOverrideTheme : theme) !== null && _a !== void 0 ? _a : uncontrolledTheme;
-    const effectiveTheme = resolveEffectiveTheme(currentTheme, colorScheme);
+        setLocalTheme(nextTheme);
+    }, [dangerouslyOverrideTheme, onThemeChange, parentThemeContext, theme]);
+    const currentTheme = (_b = (_a = theme !== null && theme !== void 0 ? theme : localTheme) !== null && _a !== void 0 ? _a : parentThemeContext === null || parentThemeContext === void 0 ? void 0 : parentThemeContext.theme) !== null && _b !== void 0 ? _b : "light";
+    const effectiveTheme = dangerouslyOverrideTheme !== null && dangerouslyOverrideTheme !== void 0 ? dangerouslyOverrideTheme : resolveEffectiveTheme(currentTheme, colorScheme);
     const currentTokens = effectiveTheme === "dark" ? completeDarkTokens : lightTokens;
     return (React.createElement(AtlantisThemeContext.Provider, { value: {
             theme: currentTheme,
@@ -37,7 +45,8 @@ export function AtlantisThemeContextProvider({ children, theme, onThemeChange, d
         } }, children));
 }
 export function useAtlantisTheme() {
-    return useContext(AtlantisThemeContext);
+    var _a;
+    return (_a = useContext(AtlantisThemeContext)) !== null && _a !== void 0 ? _a : defaultAtlantisThemeContextValue;
 }
 function resolveEffectiveTheme(theme, colorScheme) {
     if (theme !== "system")

package/dist/src/AtlantisThemeContext/AtlantisThemeContext.test.js

@@ -102,14 +102,33 @@ describe("ThemeContext", () => {
         expect(result.current.tokens).toEqual(expectedLightTokens);
     }));
     describe("when theme is forced for provider", () => {
-        it("ignores updates to the global theme", () => __awaiter(void 0, void 0, void 0, function* () {
+        it("preserves the forced effective theme when the selected theme changes", () => __awaiter(void 0, void 0, void 0, function* () {
             const { result } = renderHook(useAtlantisTheme, {
                 wrapper: (props) => (React.createElement(WrapperWithOverride, Object.assign({}, props, { dangerouslyOverrideTheme: "light" }))),
             });
-            // Update the global theme
+            // Update the selected theme through the forced subtree.
             yield act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("dark"); }));
-            // This hook shouldn't be affected by it because it's set to the light theme
-            expect(result.current.theme).toBe("light");
+            expect(result.current.theme).toBe("dark");
+            expect(result.current.effectiveTheme).toBe("light");
+            expect(result.current.tokens).toEqual(expectedLightTokens);
+        }));
+        it("preserves the parent selected theme while forcing the effective theme", () => {
+            mockUseColorScheme.mockReturnValue("dark");
+            const { result } = renderHook(useAtlantisTheme, {
+                wrapper: (props) => (React.createElement(Wrapper, { theme: "system" },
+                    React.createElement(AtlantisThemeContextProvider, Object.assign({ dangerouslyOverrideTheme: "light" }, props)))),
+            });
+            expect(result.current.theme).toBe("system");
+            expect(result.current.effectiveTheme).toBe("light");
+            expect(result.current.tokens).toEqual(expectedLightTokens);
+        });
+        it("forwards selected theme changes through a forced subtree", () => __awaiter(void 0, void 0, void 0, function* () {
+            const { result } = renderHook(useAtlantisTheme, {
+                wrapper: (props) => (React.createElement(Wrapper, null,
+                    React.createElement(AtlantisThemeContextProvider, Object.assign({ dangerouslyOverrideTheme: "light" }, props)))),
+            });
+            yield act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("dark"); }));
+            expect(result.current.theme).toBe("dark");
             expect(result.current.effectiveTheme).toBe("light");
             expect(result.current.tokens).toEqual(expectedLightTokens);
         }));
@@ -131,7 +150,7 @@ describe("ThemeContext", () => {
             const { result } = renderHook(useAtlantisTheme, {
                 wrapper: (props) => (React.createElement(WrapperWithOverride, Object.assign({}, props, { dangerouslyOverrideTheme: defaultTheme }))),
             });
-            expect(result.current.theme).toBe(defaultTheme);
+            expect(result.current.theme).toBe("light");
             expect(result.current.effectiveTheme).toBe(expectedEffectiveTheme);
             expect(result.current.tokens).toEqual(expectedTokens);
         });