@jobber/components-native 0.76.1-JOB-116234-d279b0f.20 → 0.76.1-JOB-116234-4bc5afd.23

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

@@ -1,16 +1,19 @@
 import { iosTokens } from "@jobber/design";
-import { PropsWithChildren } from "react";
 export interface AtlantisThemeContextValue {
     /**
-     * The theme of the application.
+     * 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 extends PropsWithChildren {
+export interface AtlantisThemeContextProviderProps {
     /**
      * 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 [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
      */
     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 [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
      */
     readonly UNSAFE_style?: TypographyUnsafeStyle;
 }

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

@@ -8,14 +8,7 @@ export declare const createTypographyTokens: (tokens: AtlantisThemeContextValue[
     [index: string]: TextStyle;
 };
 /**
- * `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"
- * ```
+ * @deprecated Use useTypographyStyles instead
  */
 export declare const typographyStyles: Record<string, TextStyle>;
 export declare const useTypographyStyles: () => {

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.1-JOB-116234-d279b0f.20+d279b0fd",
+  "version": "0.76.1-JOB-116234-4bc5afd.23+4bc5afdb",
   "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": "d279b0fddc435572c48dff35f02db80ee4ca3ee7"
+  "gitHead": "4bc5afdb99786f50a9ae8474ac282eb593dd9867"
 }

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

@@ -1,10 +1,5 @@
 import { androidTokens, darkTokens, iosTokens } from "@jobber/design";
-import React, {
-  PropsWithChildren,
-  createContext,
-  useContext,
-  useState,
-} from "react";
+import React, { createContext, useContext, useState } from "react";
 import merge from "lodash/merge";
 import { Platform } from "react-native";
 import {
@@ -24,68 +19,31 @@ 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) {
-  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";
+  // TODO: check last saved theme from local/device storage
   const initialTheme: Theme = "light";
+  const [globalTheme, setGlobalTheme] = useState<Theme>(initialTheme);
 
-  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 currentTheme = dangerouslyOverrideTheme ?? globalTheme;
   const currentTokens =
-    dangerouslyOverrideTheme === "dark" ? completeDarkTokens : lightTokens;
+    currentTheme === "dark" ? completeDarkTokens : lightTokens;
 
   return (
     <AtlantisThemeContext.Provider
       value={{
-        theme: dangerouslyOverrideTheme,
+        theme: currentTheme,
         tokens: currentTokens,
+        setTheme: setGlobalTheme,
       }}
     >
       {children}

package/src/AtlantisThemeContext/buildThemedStyles.test.tsx

@@ -0,0 +1,83 @@
+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({});
+  });
+});

package/src/AtlantisThemeContext/types.ts

@@ -1,9 +1,8 @@
 import { iosTokens } from "@jobber/design";
-import { PropsWithChildren } from "react";
 
 export interface AtlantisThemeContextValue {
   /**
-   * The theme of the application.
+   * The active theme.
    */
   readonly theme: Theme;
 
@@ -11,9 +10,14 @@ 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 extends PropsWithChildren {
+export interface AtlantisThemeContextProviderProps {
   /**
    * 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 [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
+   * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
    */
   readonly UNSAFE_style?: ButtonUnsafeStyle;
 }

package/src/InputFieldWrapper/CommonInputStyles.style.ts

@@ -4,6 +4,7 @@ import {
   buildThemedStyles,
 } from "../AtlantisThemeContext";
 import {
+  // eslint-disable-next-line import/no-deprecated
   typographyStyles as staticTypographyStyles,
   useTypographyStyles,
 } from "../Typography";
@@ -52,6 +53,7 @@ export const createCommonInputTokens = (
  * @deprecated Use useCommonInputStyles instead
  */
 export const commonInputStyles = StyleSheet.create(
+  // eslint-disable-next-line import/no-deprecated
   createCommonInputTokens(staticTokens, staticTypographyStyles),
 );
 

package/src/InputFieldWrapper/components/Prefix/Prefix.test.tsx

@@ -10,10 +10,7 @@ import {
   prefixIconTestId,
   prefixLabelTestId,
 } from "./Prefix";
-import {
-  typographyStyles as staticStyles,
-  useTypographyStyles,
-} from "../../../Typography";
+import { useTypographyStyles } from "../../../Typography";
 import { useStyles } from "../../InputFieldWrapper.style";
 import { tokens } from "../../../utils/design";
 import * as IconComponent from "../../../Icon/Icon";
@@ -31,8 +28,6 @@ beforeAll(() => {
 
   styles = stylesHook.result.current;
   typographyStyles = typographyStylesHook.result.current;
-  console.log(typographyStyles.defaultSize);
-  console.log(staticStyles.defaultSize);
 });
 
 function setupLabel({

package/src/InputFieldWrapper/components/Suffix/Suffix.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "@testing-library/react-native";
+import { render, renderHook } from "@testing-library/react-native";
 import { TextStyle } from "react-native";
 import {
   SuffixIcon,
@@ -7,7 +7,7 @@ import {
   SuffixLabel,
   SuffixLabelProps,
 } from "./Suffix";
-import { typographyStyles } from "../../../Typography";
+import { useTypographyStyles } from "../../../Typography";
 
 const mockLabel = "$";
 
@@ -49,6 +49,13 @@ function setupIcon({
   );
 }
 
+let typographyStyles: ReturnType<typeof useTypographyStyles>;
+
+beforeAll(() => {
+  const typographyStylesHook = renderHook(() => useTypographyStyles());
+  typographyStyles = typographyStylesHook.result.current;
+});
+
 describe("Suffix", () => {
   it("renders a suffix label when specified", () => {
     const { getByText } = setupLabel({});

package/src/InputFieldWrapper/components/Suffix/Suffix.tsx

@@ -9,7 +9,7 @@ import {
 import { IconNames } from "@jobber/design";
 import { Icon } from "../../../Icon";
 import { Text } from "../../../Text";
-import { typographyStyles } from "../../../Typography";
+import { useTypographyStyles } from "../../../Typography";
 import { useAtlantisTheme } from "../../../AtlantisThemeContext";
 import { useStyles } from "../../InputFieldWrapper.style";
 
@@ -36,6 +36,7 @@ export function SuffixLabel({
   styleOverride,
 }: SuffixLabelProps): JSX.Element {
   const styles = useStyles();
+  const typographyStyles = useTypographyStyles();
 
   return (
     <View

package/src/InputPressable/InputPressable.style.ts

@@ -1,8 +1,10 @@
 import { buildThemedStyles } from "../AtlantisThemeContext";
-import { typographyStyles } from "../Typography/Typography.style";
+import { useTypographyStyles } from "../Typography";
 
-export const useStyles = buildThemedStyles(tokens => {
-  return {
+export const useStyles = () => {
+  const typographyStyles = useTypographyStyles();
+
+  return buildThemedStyles(tokens => ({
     pressable: {
       flex: 1,
     },
@@ -26,5 +28,5 @@ export const useStyles = buildThemedStyles(tokens => {
     inputInvalid: {
       borderColor: tokens["color-critical"],
     },
-  };
-});
+  }))();
+};

package/src/InputText/InputText.style.ts

@@ -1,8 +1,10 @@
 import { buildThemedStyles } from "../AtlantisThemeContext";
-import { typographyStyles } from "../Typography";
+import { useTypographyStyles } from "../Typography";
 
-export const useStyles = buildThemedStyles(tokens => {
-  return {
+export const useStyles = () => {
+  const typographyStyles = useTypographyStyles();
+
+  return buildThemedStyles(tokens => ({
     inputPaddingTop: {
       paddingTop:
         (typographyStyles.smallSize.fontSize || 0) +
@@ -22,9 +24,8 @@ export const useStyles = buildThemedStyles(tokens => {
     },
 
     multilineInputiOS: {
-      // for placeholder
       paddingTop:
         (typographyStyles.defaultSize.fontSize || 0) + tokens["space-smallest"],
     },
-  };
-});
+  }))();
+};

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 [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
+   * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
    */
   readonly UNSAFE_style?: TypographyUnsafeStyle;
 }

package/src/Typography/Typography.style.ts

@@ -620,14 +620,7 @@ export const createTypographyTokens = (
 });
 
 /**
- * `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"
- * ```
+ * @deprecated Use useTypographyStyles instead
  */
 export const typographyStyles: Record<string, TextStyle> = StyleSheet.create(
   createTypographyTokens(staticTokens),

package/src/Typography/Typography.tsx

@@ -10,7 +10,7 @@ import {
   ViewStyle,
 } from "react-native";
 import { TypographyGestureDetector } from "./TypographyGestureDetector";
-import { typographyStyles as styles } from "./Typography.style";
+import { useTypographyStyles } from "./Typography.style";
 import { capitalize } from "../utils/intl";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 
@@ -161,13 +161,14 @@ function InternalTypography<T extends FontFamily = "base">({
   UNSAFE_style,
   selectable = true,
 }: TypographyProps<T>): JSX.Element {
-  const sizeAndHeight = getSizeAndHeightStyle(size, lineHeight);
+  const styles = useTypographyStyles();
+  const sizeAndHeight = getSizeAndHeightStyle(size, styles, lineHeight);
   const style: StyleProp<ViewStyle>[] = [
-    getFontStyle(fontFamily, fontStyle, fontWeight),
-    getColorStyle(color, reverseTheme),
-    getAlignStyle(align),
+    getFontStyle(fontFamily, fontStyle, fontWeight, styles),
+    getColorStyle(styles, color, reverseTheme),
+    getAlignStyle(styles, align),
     sizeAndHeight,
-    getLetterSpacingStyle(letterSpacing),
+    getLetterSpacingStyle(letterSpacing, styles),
   ];
 
   if (strikeThrough) {
@@ -233,6 +234,7 @@ function getFontStyle(
   fontFamily: FontFamily = "base",
   fontStyle: FontStyle = "regular",
   fontWeight: FontWeight = "regular",
+  styles: Record<string, TextStyle>,
 ) {
   const defaultBaseFontStyling = styles.baseRegularRegular;
   const defaultDisplayFontStyling = styles.displayRegularBold;
@@ -263,7 +265,11 @@ function getTransformedText(text?: string, transform?: TextTransform) {
   }
 }
 
-function getColorStyle(color?: TextColor, reverseTheme?: boolean) {
+function getColorStyle(
+  styles: Record<string, TextStyle>,
+  color?: TextColor,
+  reverseTheme?: boolean,
+) {
   if (color === "default" || !color) {
     return styles.greyBlue;
   }
@@ -273,6 +279,7 @@ function getColorStyle(color?: TextColor, reverseTheme?: boolean) {
 }
 
 function getAlignStyle(
+  styles: Record<string, TextStyle>,
   alignStyle: TextAlign = I18nManager.isRTL ? "end" : "start",
 ) {
   return styles[`${alignStyle}Align`];
@@ -280,6 +287,7 @@ function getAlignStyle(
 
 function getSizeAndHeightStyle(
   textSize: TextSize,
+  styles: Record<string, TextStyle>,
   lineHeightOverwrite?: LineHeight,
 ) {
   const fontSize = styles[`${textSize}Size`];
@@ -293,7 +301,10 @@ function getSizeAndHeightStyle(
   return fontSize;
 }
 
-function getLetterSpacingStyle(letterSpacing: LetterSpacing = "base") {
+function getLetterSpacingStyle(
+  letterSpacing: LetterSpacing = "base",
+  styles: Record<string, TextStyle>,
+) {
   return styles[`${letterSpacing}LetterSpacing`];
 }
 

package/src/utils/design/index.ts

@@ -1,8 +1,11 @@
 import { Platform } from "react-native";
 import { androidTokens, iosTokens } from "@jobber/design";
 
-// TODO: remove all references to const in JM and Atlantis. Replace with useAtlantisTheme.
-// Rename to `nonThemedTokens` in the meantime?
+/**
+ * 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",