@jobber/components-native 0.76.0 → 0.77.0

package/dist/types/src/AtlantisThemeContext/AtlantisThemeContext.d.ts

@@ -0,0 +1,3 @@
+import { AtlantisThemeContextProviderProps, AtlantisThemeContextValue } from "./types";
+export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }: AtlantisThemeContextProviderProps): JSX.Element;
+export declare function useAtlantisTheme(): AtlantisThemeContextValue;

package/dist/types/src/AtlantisThemeContext/index.d.ts

@@ -0,0 +1,2 @@
+export { AtlantisThemeContextProvider, useAtlantisTheme, } from "./AtlantisThemeContext";
+export { Theme, AtlantisThemeContextProviderProps, AtlantisThemeContextValue, } from "./types";

package/dist/types/src/AtlantisThemeContext/types.d.ts

@@ -0,0 +1,27 @@
+import { iosTokens } from "@jobber/design";
+export interface AtlantisThemeContextValue {
+    /**
+     * The active theme.
+     */
+    readonly theme: Theme;
+    /**
+     * The design tokens for the current theme.
+     */
+    readonly tokens: typeof iosTokens;
+    /**
+     * Change the current theme globally.
+     */
+    readonly setTheme: (theme: Theme) => void;
+}
+export interface AtlantisThemeContextProviderProps {
+    /**
+     * The children to render.
+     */
+    readonly children: React.ReactNode;
+    /**
+     * Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain the same theme regardless of the rest of the application's theme.
+     * This is dangerous because the children in this provider will not be able to change the theme.
+     */
+    readonly dangerouslyOverrideTheme?: Theme;
+}
+export type Theme = "light" | "dark";

package/dist/types/src/index.d.ts

@@ -2,6 +2,7 @@ export * from "./ActionItem";
 export * from "./ActionLabel";
 export * from "./ActivityIndicator";
 export * from "./AtlantisContext";
+export * from "./AtlantisThemeContext";
 export * from "./AutoLink";
 export * from "./Banner";
 export * from "./BottomSheet";

package/dist/types/src/utils/design/index.d.ts

@@ -1,2 +1,7 @@
 import { iosTokens } from "@jobber/design";
+/**
+ * These design tokens don't react to theme changes. Only use these if you need to access
+ * tokens that are not affected by the current theme, otherwise you should be using our
+ * useAtlantisTheme() hook to access the current theme's tokens.
+ */
 export declare const tokens: typeof iosTokens;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.76.0",
+  "version": "0.77.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -80,5 +80,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "3dbb361d102c6ae833d1dce373125b7bf68508c0"
+  "gitHead": "d0a55950b30bacc680792db9640d0ef1f9bc6f23"
 }

package/src/AtlantisThemeContext/AtlantisThemeContext.test.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { act, renderHook } from "@testing-library/react-native";
+import { darkTokens, iosTokens } from "@jobber/design";
+import merge from "lodash/merge";
+import {
+  AtlantisThemeContextProvider,
+  useAtlantisTheme,
+} from "./AtlantisThemeContext";
+import { AtlantisThemeContextProviderProps, Theme } from "./types";
+
+const expectedDarkTokens = merge({}, iosTokens, darkTokens);
+const expectedLightTokens = iosTokens;
+
+function Wrapper({
+  children,
+  dangerouslyOverrideTheme,
+}: AtlantisThemeContextProviderProps) {
+  return (
+    <AtlantisThemeContextProvider
+      dangerouslyOverrideTheme={dangerouslyOverrideTheme}
+    >
+      {children}
+    </AtlantisThemeContextProvider>
+  );
+}
+
+function WrapperWithOverride({
+  children,
+  dangerouslyOverrideTheme,
+}: AtlantisThemeContextProviderProps) {
+  return (
+    <Wrapper>
+      <AtlantisThemeContextProvider
+        dangerouslyOverrideTheme={dangerouslyOverrideTheme}
+      >
+        {children}
+      </AtlantisThemeContextProvider>
+    </Wrapper>
+  );
+}
+
+describe("ThemeContext", () => {
+  it("defaults to the light theme", () => {
+    const { result } = renderHook(useAtlantisTheme, {
+      wrapper: (props: AtlantisThemeContextProviderProps) => (
+        <Wrapper {...props} />
+      ),
+    });
+
+    expect(result.current.theme).toBe("light");
+    expect(result.current.tokens).toEqual(expectedLightTokens);
+  });
+
+  it("updates the theme and tokens", () => {
+    const { result } = renderHook(useAtlantisTheme, {
+      wrapper: (props: AtlantisThemeContextProviderProps) => (
+        <Wrapper {...props} />
+      ),
+    });
+
+    act(() => result.current.setTheme("dark"));
+    expect(result.current.theme).toBe("dark");
+    expect(result.current.tokens).toEqual(expectedDarkTokens);
+
+    act(() => result.current.setTheme("light"));
+    expect(result.current.theme).toBe("light");
+    expect(result.current.tokens).toEqual(expectedLightTokens);
+  });
+
+  describe("when theme is forced for provider", () => {
+    it("ignores updates to the global theme", () => {
+      const { result } = renderHook(useAtlantisTheme, {
+        wrapper: (props: AtlantisThemeContextProviderProps) => (
+          <WrapperWithOverride {...props} dangerouslyOverrideTheme="light" />
+        ),
+      });
+
+      // Update the global theme
+      act(() => 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.tokens).toEqual(expectedLightTokens);
+    });
+
+    it.each([
+      { defaultTheme: "light", expectedTokens: expectedLightTokens },
+      { defaultTheme: "dark", expectedTokens: expectedDarkTokens },
+    ] as { defaultTheme: Theme; expectedTokens: typeof iosTokens }[])(
+      "provides the dangerouslyOverrideTheme $defaultTheme tokens",
+      ({ defaultTheme, expectedTokens }) => {
+        const { result } = renderHook(useAtlantisTheme, {
+          wrapper: (props: AtlantisThemeContextProviderProps) => (
+            <WrapperWithOverride
+              {...props}
+              dangerouslyOverrideTheme={defaultTheme}
+            />
+          ),
+        });
+
+        expect(result.current.theme).toBe(defaultTheme);
+        expect(result.current.tokens).toEqual(expectedTokens);
+      },
+    );
+  });
+});

package/src/AtlantisThemeContext/AtlantisThemeContext.tsx

@@ -0,0 +1,56 @@
+import { androidTokens, darkTokens, iosTokens } from "@jobber/design";
+import React, { createContext, useContext, useState } from "react";
+import merge from "lodash/merge";
+import { Platform } from "react-native";
+import {
+  AtlantisThemeContextProviderProps,
+  AtlantisThemeContextValue,
+  Theme,
+} from "./types";
+
+const lightTokens = Platform.select({
+  ios: () => iosTokens,
+  android: () => androidTokens,
+  default: () => androidTokens,
+})();
+
+const completeDarkTokens = merge({}, lightTokens, darkTokens);
+
+const AtlantisThemeContext = createContext<AtlantisThemeContextValue>({
+  theme: "light",
+  tokens: lightTokens,
+  setTheme: () => {
+    console.error(
+      "useAtlantisTheme accessed outside of AtlantisThemeContextProvider",
+    );
+  },
+});
+
+export function AtlantisThemeContextProvider({
+  children,
+  dangerouslyOverrideTheme,
+}: AtlantisThemeContextProviderProps) {
+  // TODO: check last saved theme from local/device storage
+  const initialTheme: Theme = "light";
+  const [globalTheme, setGlobalTheme] = useState<Theme>(initialTheme);
+
+  const currentTheme = dangerouslyOverrideTheme ?? globalTheme;
+  const currentTokens =
+    currentTheme === "dark" ? completeDarkTokens : lightTokens;
+
+  return (
+    <AtlantisThemeContext.Provider
+      value={{
+        theme: currentTheme,
+        tokens: currentTokens,
+        setTheme: setGlobalTheme,
+      }}
+    >
+      {children}
+    </AtlantisThemeContext.Provider>
+  );
+}
+
+export function useAtlantisTheme() {
+  return useContext(AtlantisThemeContext);
+}

package/src/AtlantisThemeContext/index.ts

@@ -0,0 +1,9 @@
+export {
+  AtlantisThemeContextProvider,
+  useAtlantisTheme,
+} from "./AtlantisThemeContext";
+export {
+  Theme,
+  AtlantisThemeContextProviderProps,
+  AtlantisThemeContextValue,
+} from "./types";

package/src/AtlantisThemeContext/types.ts

@@ -0,0 +1,33 @@
+import { iosTokens } from "@jobber/design";
+
+export interface AtlantisThemeContextValue {
+  /**
+   * The active theme.
+   */
+  readonly theme: Theme;
+
+  /**
+   * The design tokens for the current theme.
+   */
+  readonly tokens: typeof iosTokens;
+
+  /**
+   * Change the current theme globally.
+   */
+  readonly setTheme: (theme: Theme) => void;
+}
+
+export interface AtlantisThemeContextProviderProps {
+  /**
+   * The children to render.
+   */
+  readonly children: React.ReactNode;
+
+  /**
+   * Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain the same theme regardless of the rest of the application's theme.
+   * This is dangerous because the children in this provider will not be able to change the theme.
+   */
+  readonly dangerouslyOverrideTheme?: Theme;
+}
+
+export type Theme = "light" | "dark";

package/src/index.ts

@@ -2,6 +2,7 @@ export * from "./ActionItem";
 export * from "./ActionLabel";
 export * from "./ActivityIndicator";
 export * from "./AtlantisContext";
+export * from "./AtlantisThemeContext";
 export * from "./AutoLink";
 export * from "./Banner";
 export * from "./BottomSheet";

package/src/utils/design/index.ts

@@ -1,6 +1,11 @@
 import { Platform } from "react-native";
 import { androidTokens, iosTokens } from "@jobber/design";
 
+/**
+ * These design tokens don't react to theme changes. Only use these if you need to access
+ * tokens that are not affected by the current theme, otherwise you should be using our
+ * useAtlantisTheme() hook to access the current theme's tokens.
+ */
 export const tokens: typeof iosTokens = Platform.select({
   ios: () => iosTokens,
   android: () => androidTokens,

package/src/utils/meta/meta.json

@@ -8,6 +8,7 @@
     "AtlantisContext.Provider",
     "AtlantisFormContext.Consumer",
     "AtlantisFormContext.Provider",
+    "AtlantisThemeContextProvider",
     "AutoLink",
     "Banner",
     "BottomSheet",