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

package/dist/docs/AtlantisThemeContext/AtlantisThemeContext.md

@@ -293,6 +293,4 @@ Key features:
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `children` | `ReactNode` | Yes | — | The children to render. |
-| `dangerouslyOverrideTheme` | `EffectiveTheme` | No | — | Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain... |
-| `onThemeChange` | `(theme: Theme) => void` | No | — | Called when children request a selected theme change through setTheme. |
-| `theme` | `Theme` | No | — | Control the selected theme for this provider. |
+| `dangerouslyOverrideTheme` | `Theme` | No | — | Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain... |

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.113.4-implement--94d34f8.2+94d34f81",
+    "version": "0.113.4",
     "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": "b151fce2d669e8b85cea91becf7d9aacee827c3e"
 }

package/dist/src/AtlantisThemeContext/AtlantisThemeContext.js

@@ -1,7 +1,7 @@
 import { androidTokens, darkTokens, iosTokens } from "@jobber/design";
-import React, { createContext, useCallback, useContext, useState } from "react";
+import React, { createContext, useContext, useState } from "react";
 import merge from "lodash/merge";
-import { Platform, useColorScheme } from "react-native";
+import { Platform } from "react-native";
 const lightTokens = Platform.select({
     ios: () => iosTokens,
     android: () => androidTokens,
@@ -10,37 +10,23 @@ const lightTokens = Platform.select({
 const completeDarkTokens = merge({}, lightTokens, darkTokens);
 const AtlantisThemeContext = createContext({
     theme: "light",
-    effectiveTheme: "light",
     tokens: lightTokens,
     setTheme: () => {
         console.error("useAtlantisTheme accessed outside of AtlantisThemeContextProvider");
     },
 });
-export function AtlantisThemeContextProvider({ children, theme, onThemeChange, dangerouslyOverrideTheme, }) {
-    var _a;
-    const [uncontrolledTheme, setUncontrolledTheme] = useState("light");
-    const colorScheme = useColorScheme();
-    const setTheme = useCallback((nextTheme) => {
-        onThemeChange === null || onThemeChange === void 0 ? void 0 : onThemeChange(nextTheme);
-        if (theme === undefined) {
-            setUncontrolledTheme(nextTheme);
-        }
-    }, [onThemeChange, theme]);
-    const currentTheme = (_a = dangerouslyOverrideTheme !== null && dangerouslyOverrideTheme !== void 0 ? dangerouslyOverrideTheme : theme) !== null && _a !== void 0 ? _a : uncontrolledTheme;
-    const effectiveTheme = resolveEffectiveTheme(currentTheme, colorScheme);
-    const currentTokens = effectiveTheme === "dark" ? completeDarkTokens : lightTokens;
+export function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }) {
+    // TODO: check last saved theme from local/device storage
+    const initialTheme = "light";
+    const [globalTheme, setGlobalTheme] = useState(initialTheme);
+    const currentTheme = dangerouslyOverrideTheme !== null && dangerouslyOverrideTheme !== void 0 ? dangerouslyOverrideTheme : globalTheme;
+    const currentTokens = currentTheme === "dark" ? completeDarkTokens : lightTokens;
     return (React.createElement(AtlantisThemeContext.Provider, { value: {
             theme: currentTheme,
-            effectiveTheme,
             tokens: currentTokens,
-            setTheme,
+            setTheme: setGlobalTheme,
         } }, children));
 }
 export function useAtlantisTheme() {
     return useContext(AtlantisThemeContext);
 }
-function resolveEffectiveTheme(theme, colorScheme) {
-    if (theme !== "system")
-        return theme;
-    return colorScheme === "dark" ? "dark" : "light";
-}

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

@@ -11,36 +11,22 @@ import React from "react";
 import { act, renderHook } from "@testing-library/react-native";
 import { darkTokens, iosTokens } from "@jobber/design";
 import merge from "lodash/merge";
-import { useColorScheme } from "react-native";
 import { AtlantisThemeContextProvider, useAtlantisTheme, } from "./AtlantisThemeContext";
-jest.mock("react-native", () => {
-    const actual = jest.requireActual("react-native");
-    Object.defineProperty(actual, "useColorScheme", {
-        configurable: true,
-        value: jest.fn(),
-    });
-    return actual;
-});
 const expectedDarkTokens = merge({}, iosTokens, darkTokens);
 const expectedLightTokens = iosTokens;
-const mockUseColorScheme = useColorScheme;
-function Wrapper({ children, theme, onThemeChange, dangerouslyOverrideTheme, }) {
-    return (React.createElement(AtlantisThemeContextProvider, { theme: theme, onThemeChange: onThemeChange, dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
+function Wrapper({ children, dangerouslyOverrideTheme, }) {
+    return (React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
 }
 function WrapperWithOverride({ children, dangerouslyOverrideTheme, }) {
     return (React.createElement(Wrapper, null,
         React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children)));
 }
 describe("ThemeContext", () => {
-    beforeEach(() => {
-        mockUseColorScheme.mockReturnValue("light");
-    });
     it("defaults to the light theme", () => {
         const { result } = renderHook(useAtlantisTheme, {
             wrapper: (props) => (React.createElement(Wrapper, Object.assign({}, props))),
         });
         expect(result.current.theme).toBe("light");
-        expect(result.current.effectiveTheme).toBe("light");
         expect(result.current.tokens).toEqual(expectedLightTokens);
     });
     it("updates the theme and tokens", () => __awaiter(void 0, void 0, void 0, function* () {
@@ -49,56 +35,9 @@ describe("ThemeContext", () => {
         });
         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("dark");
         expect(result.current.tokens).toEqual(expectedDarkTokens);
         yield act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("light"); }));
         expect(result.current.theme).toBe("light");
-        expect(result.current.effectiveTheme).toBe("light");
-        expect(result.current.tokens).toEqual(expectedLightTokens);
-    }));
-    it("resolves the system theme from the OS color scheme", () => __awaiter(void 0, void 0, void 0, function* () {
-        mockUseColorScheme.mockReturnValue("dark");
-        const { result, rerender } = renderHook(useAtlantisTheme, {
-            wrapper: (props) => (React.createElement(Wrapper, Object.assign({}, props))),
-        });
-        yield act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("system"); }));
-        expect(result.current.theme).toBe("system");
-        expect(result.current.effectiveTheme).toBe("dark");
-        expect(result.current.tokens).toEqual(expectedDarkTokens);
-        mockUseColorScheme.mockReturnValue("light");
-        rerender({});
-        expect(result.current.theme).toBe("system");
-        expect(result.current.effectiveTheme).toBe("light");
-        expect(result.current.tokens).toEqual(expectedLightTokens);
-    }));
-    it("uses a controlled selected theme", () => {
-        mockUseColorScheme.mockReturnValue("dark");
-        const { result } = renderHook(useAtlantisTheme, {
-            wrapper: (props) => (React.createElement(Wrapper, Object.assign({}, props, { theme: "system" }))),
-        });
-        expect(result.current.theme).toBe("system");
-        expect(result.current.effectiveTheme).toBe("dark");
-        expect(result.current.tokens).toEqual(expectedDarkTokens);
-    });
-    it("reports selected theme changes from a controlled provider", () => __awaiter(void 0, void 0, void 0, function* () {
-        const onThemeChange = jest.fn();
-        const { result } = renderHook(useAtlantisTheme, {
-            wrapper: (props) => (React.createElement(Wrapper, Object.assign({}, props, { theme: "light", onThemeChange: onThemeChange }))),
-        });
-        yield act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("system"); }));
-        expect(onThemeChange).toHaveBeenCalledWith("system");
-        expect(result.current.theme).toBe("light");
-        expect(result.current.effectiveTheme).toBe("light");
-        expect(result.current.tokens).toEqual(expectedLightTokens);
-    }));
-    it("falls back to light when system color scheme is unavailable", () => __awaiter(void 0, void 0, void 0, function* () {
-        mockUseColorScheme.mockReturnValue(null);
-        const { result } = renderHook(useAtlantisTheme, {
-            wrapper: (props) => (React.createElement(Wrapper, Object.assign({}, props))),
-        });
-        yield act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("system"); }));
-        expect(result.current.theme).toBe("system");
-        expect(result.current.effectiveTheme).toBe("light");
         expect(result.current.tokens).toEqual(expectedLightTokens);
     }));
     describe("when theme is forced for provider", () => {
@@ -110,29 +49,16 @@ describe("ThemeContext", () => {
             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.effectiveTheme).toBe("light");
             expect(result.current.tokens).toEqual(expectedLightTokens);
         }));
         it.each([
-            {
-                defaultTheme: "light",
-                colorScheme: "dark",
-                expectedEffectiveTheme: "light",
-                expectedTokens: expectedLightTokens,
-            },
-            {
-                defaultTheme: "dark",
-                colorScheme: "light",
-                expectedEffectiveTheme: "dark",
-                expectedTokens: expectedDarkTokens,
-            },
-        ])("provides the dangerouslyOverrideTheme $defaultTheme tokens", ({ defaultTheme, colorScheme, expectedEffectiveTheme, expectedTokens, }) => {
-            mockUseColorScheme.mockReturnValue(colorScheme);
+            { defaultTheme: "light", expectedTokens: expectedLightTokens },
+            { defaultTheme: "dark", expectedTokens: expectedDarkTokens },
+        ])("provides the dangerouslyOverrideTheme $defaultTheme tokens", ({ defaultTheme, expectedTokens }) => {
             const { result } = renderHook(useAtlantisTheme, {
                 wrapper: (props) => (React.createElement(WrapperWithOverride, Object.assign({}, props, { dangerouslyOverrideTheme: defaultTheme }))),
             });
             expect(result.current.theme).toBe(defaultTheme);
-            expect(result.current.effectiveTheme).toBe(expectedEffectiveTheme);
             expect(result.current.tokens).toEqual(expectedTokens);
         });
     });

package/dist/src/Button/Button.js

@@ -58,7 +58,7 @@ function getIconColorVariation(variation, type, disabled) {
         return "disabled";
     }
     if (type === "primary" && variation !== "cancel") {
-        return "white";
+        return "surface"; // This should be a text color token instead, but the action label also uses this
     }
     switch (variation) {
         case "learning":

package/dist/src/ContentOverlay/ContentOverlay.js

@@ -54,7 +54,7 @@ export function ContentOverlay({ children, title, accessibilityLabel, fullScreen
     const [currentPosition, setCurrentPosition] = useState(-1);
     const styles = useStyles();
     const { t } = useAtlantisI18n();
-    const { effectiveTheme, tokens } = useAtlantisTheme();
+    const { theme, tokens } = useAtlantisTheme();
     const isScreenReaderEnabled = useIsScreenReaderEnabled();
     const behavior = computeContentOverlayBehavior({
         fullScreen,
@@ -179,7 +179,7 @@ export function ContentOverlay({ children, title, accessibilityLabel, fullScreen
         return (React.createElement(Backdrop, Object.assign({}, props, { pressBehavior: isCloseableOnOverlayTap ? "close" : "none" })));
     }, [isCloseableOnOverlayTap]);
     return (React.createElement(BottomSheetModal, { ref: bottomSheetModalRef, containerComponent: Platform.OS === "ios" ? Container : undefined, onChange: handleChange, style: sheetStyle, backgroundStyle: backgroundStyle, handleStyle: styles.handleWrapper, handleIndicatorStyle: handleIndicatorStyles, backdropComponent: backdropComponent, snapPoints: snapPoints, enablePanDownToClose: enablePanDownToClose !== null && enablePanDownToClose !== void 0 ? enablePanDownToClose : effectiveIsDraggable, enableContentPanningGesture: enableContentPanningGesture !== null && enableContentPanningGesture !== void 0 ? enableContentPanningGesture : effectiveIsDraggable, enableHandlePanningGesture: effectiveIsDraggable, enableDynamicSizing: !customSnapPoints && behavior.initialHeight === "contentHeight", keyboardBehavior: "interactive", keyboardBlurBehavior: "restore", topInset: topInset, onDismiss: () => onClose === null || onClose === void 0 ? void 0 : onClose() },
-        React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: effectiveTheme },
+        React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: theme },
             React.createElement(ContentOverlayKeyboardContext.Provider, { value: scrollEnabled }, scrollEnabled ? (React.createElement(BottomSheetKeyboardAwareScrollView, { ref: scrollViewRef, contentContainerStyle: { paddingBottom: insets.bottom }, keyboardShouldPersistTaps: keyboardShouldPersistTaps ? "handled" : "never", showsVerticalScrollIndicator: false, onScroll: handleOnScroll, stickyHeaderIndices: [0], bottomOffset: KEYBOARD_TOP_PADDING_AUTO_SCROLL },
                 renderHeader(),
                 React.createElement(View, { testID: "ATL-Overlay-Children" }, children))) : (React.createElement(BottomSheetView, null,