@jobber/components-native 0.76.1-JOB-116234-314c5ff.22 → 0.76.1-JOB-116234-d279b0f.20

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

@@ -1,19 +1,16 @@
 import { iosTokens } from "@jobber/design";
+import { PropsWithChildren } from "react";
 export interface AtlantisThemeContextValue {
     /**
-     * The active theme.
+     * The theme of the application.
      */
     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 {
+export interface AtlantisThemeContextProviderProps extends PropsWithChildren {
     /**
      * The children to render.
      */

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

@@ -62,7 +62,7 @@ interface CommonButtonProps {
     /**
      * **Use at your own risk:** Custom style for specific elements. This should only be used as a
      * **last resort**. Using this may result in unexpected side effects.
-     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     * More information [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
      */
     readonly UNSAFE_style?: ButtonUnsafeStyle;
 }

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

@@ -63,7 +63,7 @@ export interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSi
     /**
      * **Use at your own risk:** Custom style for specific elements. This should only be used as a
      * **last resort**. Using this may result in unexpected side effects.
-     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     * More information [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
      */
     readonly UNSAFE_style?: TypographyUnsafeStyle;
 }

package/dist/types/src/Typography/Typography.style.d.ts

@@ -8,7 +8,14 @@ export declare const createTypographyTokens: (tokens: AtlantisThemeContextValue[
     [index: string]: TextStyle;
 };
 /**
- * @deprecated Use useCommonInputStyles instead
+ * `StyleSheet` for Typography.tsx.
+ *
+ * If you find yourself needing to use what's inside this object on files other
+ * than `<Typography />`, please import from `@jobber/components-native` instead.
+ *
+ * ```
+ * import { typographyStyles } from "@jobber/components-native"
+ * ```
  */
 export declare const typographyStyles: Record<string, TextStyle>;
 export declare const useTypographyStyles: () => {

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

@@ -1,7 +1,2 @@
 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.1-JOB-116234-314c5ff.22+314c5ff4",
+  "version": "0.76.1-JOB-116234-d279b0f.20+d279b0fd",
   "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": "314c5ff4e8322594d2fc7ffce54a204f4a6731cb"
+  "gitHead": "d279b0fddc435572c48dff35f02db80ee4ca3ee7"
 }

package/src/AtlantisThemeContext/AtlantisThemeContext.tsx

@@ -1,5 +1,10 @@
 import { androidTokens, darkTokens, iosTokens } from "@jobber/design";
-import React, { createContext, useContext, useState } from "react";
+import React, {
+  PropsWithChildren,
+  createContext,
+  useContext,
+  useState,
+} from "react";
 import merge from "lodash/merge";
 import { Platform } from "react-native";
 import {
@@ -19,31 +24,68 @@ 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
+  if (dangerouslyOverrideTheme) {
+    return (
+      <InternalStaticThemeProvider
+        dangerouslyOverrideTheme={dangerouslyOverrideTheme}
+      >
+        {children}
+      </InternalStaticThemeProvider>
+    );
+  }
+
+  return (
+    <InternalDynamicThemeProvider>{children}</InternalDynamicThemeProvider>
+  );
+}
+
+function InternalDynamicThemeProvider({ children }: PropsWithChildren) {
+  // TODO: check initial theme from local/device storage?
+  // const initialTheme: Theme = (globalThis.document.documentElement.dataset.theme as Theme) ?? "light";
   const initialTheme: Theme = "light";
-  const [globalTheme, setGlobalTheme] = useState<Theme>(initialTheme);
 
-  const currentTheme = dangerouslyOverrideTheme ?? globalTheme;
+  const [internalTheme] = useState<Theme>(initialTheme);
+  const currentTokens =
+    internalTheme === "dark" ? completeDarkTokens : lightTokens;
+
+  // TODO: listen for global theme update -> setInternalTheme
+  // See web's AtlantisThemeContext for an example of how it does this.
+
+  return (
+    <AtlantisThemeContext.Provider
+      value={{
+        theme: internalTheme,
+        tokens: currentTokens,
+      }}
+    >
+      {children}
+    </AtlantisThemeContext.Provider>
+  );
+}
+
+function InternalStaticThemeProvider({
+  dangerouslyOverrideTheme,
+  children,
+}: Required<
+  Pick<
+    AtlantisThemeContextProviderProps,
+    "dangerouslyOverrideTheme" | "children"
+  >
+>) {
   const currentTokens =
-    currentTheme === "dark" ? completeDarkTokens : lightTokens;
+    dangerouslyOverrideTheme === "dark" ? completeDarkTokens : lightTokens;
 
   return (
     <AtlantisThemeContext.Provider
       value={{
-        theme: currentTheme,
+        theme: dangerouslyOverrideTheme,
         tokens: currentTokens,
-        setTheme: setGlobalTheme,
       }}
     >
       {children}

package/src/AtlantisThemeContext/types.ts

@@ -1,8 +1,9 @@
 import { iosTokens } from "@jobber/design";
+import { PropsWithChildren } from "react";
 
 export interface AtlantisThemeContextValue {
   /**
-   * The active theme.
+   * The theme of the application.
    */
   readonly theme: Theme;
 
@@ -10,14 +11,9 @@ export interface AtlantisThemeContextValue {
    * The design tokens for the current theme.
    */
   readonly tokens: typeof iosTokens;
-
-  /**
-   * Change the current theme globally.
-   */
-  readonly setTheme: (theme: Theme) => void;
 }
 
-export interface AtlantisThemeContextProviderProps {
+export interface AtlantisThemeContextProviderProps extends PropsWithChildren {
   /**
    * The children to render.
    */

package/src/Button/Button.tsx

@@ -81,7 +81,7 @@ interface CommonButtonProps {
   /**
    * **Use at your own risk:** Custom style for specific elements. This should only be used as a
    * **last resort**. Using this may result in unexpected side effects.
-   * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+   * More information [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
    */
   readonly UNSAFE_style?: ButtonUnsafeStyle;
 }

package/src/Text/Text.tsx

@@ -90,7 +90,7 @@ export interface TextProps
   /**
    * **Use at your own risk:** Custom style for specific elements. This should only be used as a
    * **last resort**. Using this may result in unexpected side effects.
-   * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+   * More information [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
    */
   readonly UNSAFE_style?: TypographyUnsafeStyle;
 }

package/src/Typography/Typography.style.ts

@@ -620,7 +620,14 @@ export const createTypographyTokens = (
 });
 
 /**
- * @deprecated Use useCommonInputStyles instead
+ * `StyleSheet` for Typography.tsx.
+ *
+ * If you find yourself needing to use what's inside this object on files other
+ * than `<Typography />`, please import from `@jobber/components-native` instead.
+ *
+ * ```
+ * import { typographyStyles } from "@jobber/components-native"
+ * ```
  */
 export const typographyStyles: Record<string, TextStyle> = StyleSheet.create(
   createTypographyTokens(staticTokens),

package/src/utils/design/index.ts

@@ -1,11 +1,8 @@
 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.
- */
+// TODO: remove all references to const in JM and Atlantis. Replace with useAtlantisTheme.
+// Rename to `nonThemedTokens` in the meantime?
 export const tokens: typeof iosTokens = Platform.select({
   ios: () => iosTokens,
   android: () => androidTokens,

package/src/utils/meta/meta.json

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

package/src/AtlantisThemeContext/AtlantisThemeContext.test.tsx

@@ -1,106 +0,0 @@
-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/buildThemedStyles.test.tsx

@@ -1,83 +0,0 @@
-import React from "react";
-import { renderHook } from "@testing-library/react-native";
-import { buildThemedStyles } from "./buildThemedStyles";
-import { AtlantisThemeContextProvider } from "./AtlantisThemeContext";
-
-describe("buildThemedStyles", () => {
-  const wrapper = ({ children }: { children: React.ReactNode }) => (
-    <AtlantisThemeContextProvider>{children}</AtlantisThemeContextProvider>
-  );
-
-  it("creates styles using theme tokens", () => {
-    const useTestStyles = buildThemedStyles(tokens => ({
-      container: {
-        backgroundColor: tokens["color-surface"],
-        padding: tokens["space-base"],
-      },
-    }));
-
-    const { result } = renderHook(() => useTestStyles(), { wrapper });
-
-    expect(result.current).toEqual({
-      container: {
-        backgroundColor: expect.any(String),
-        padding: expect.any(Number),
-      },
-    });
-  });
-
-  it("memoizes styles and only updates when tokens change", () => {
-    const styleFactory = jest.fn(tokens => ({
-      container: {
-        backgroundColor: tokens["color-surface"],
-      },
-    }));
-
-    const useTestStyles = buildThemedStyles(styleFactory);
-
-    const { result, rerender } = renderHook(() => useTestStyles(), { wrapper });
-
-    // Initial render should call styleFactory
-    expect(styleFactory).toHaveBeenCalledTimes(1);
-    const initialResult = result.current;
-
-    // Rerender without token changes should not call styleFactory again
-    rerender({ wrapper });
-    expect(styleFactory).toHaveBeenCalledTimes(1);
-    expect(result.current).toBe(initialResult);
-  });
-
-  it("creates styles with dependent hooks", () => {
-    const useDependentStyles = () => ({
-      text: { color: "red" },
-    });
-
-    const useTestStyles = () => {
-      const dependentStyles = useDependentStyles();
-
-      return buildThemedStyles(tokens => ({
-        container: {
-          ...dependentStyles.text,
-          padding: tokens["space-base"],
-        },
-      }))();
-    };
-
-    const { result } = renderHook(() => useTestStyles(), { wrapper });
-
-    expect(result.current).toEqual({
-      container: {
-        color: "red",
-        padding: expect.any(Number),
-      },
-    });
-  });
-
-  it("handles empty style objects", () => {
-    const useTestStyles = buildThemedStyles(() => ({}));
-
-    const { result } = renderHook(() => useTestStyles(), { wrapper });
-
-    expect(result.current).toEqual({});
-  });
-});