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

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

@@ -1,20 +1,16 @@
 import { TextStyle } from "react-native";
+import { tokens as staticTokens } from "../utils/design";
+import { AtlantisThemeContextValue } from "../AtlantisThemeContext";
 /**
  * Reusable typography tokens to ensure consistency for any client facing texts.
  */
-export declare const typographyTokens: {
+export declare const createTypographyTokens: (tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens) => {
     [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 useCommonInputStyles instead
  */
-export declare const typographyStyles: {
+export declare const typographyStyles: Record<string, TextStyle>;
+export declare const useTypographyStyles: () => {
     [index: string]: TextStyle;
 };

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

@@ -1,4 +1,5 @@
 export { Typography } from "./Typography";
 export type { FontFamily, FontStyle, FontWeight, BaseWeight, DisplayWeight, BaseStyle, DisplayStyle, TextColor, TextTransform, TextSize, TextAlign, LineHeight, LetterSpacing, TextAccessibilityRole, TextVariation, TypographyProps, TruncateLength, } from "./Typography";
+export { useTypographyStyles } from "./Typography.style";
 export { typographyStyles } from "./Typography.style";
 export { TypographyGestureDetector } from "./TypographyGestureDetector";

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.76.1-JOB-116234-314c5ff.22+314c5ff4",
   "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": "314c5ff4e8322594d2fc7ffce54a204f4a6731cb"
 }

package/src/ActionItem/ActionItem.style.ts

@@ -1,29 +1,30 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  actionItemHorizontalOffset: {
-    paddingHorizontal: tokens["space-base"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    actionItemHorizontalOffset: {
+      paddingHorizontal: tokens["space-base"],
+    },
 
-  icon: {
-    justifyContent: "flex-start",
-    paddingRight: tokens["space-small"],
-  },
+    icon: {
+      justifyContent: "flex-start",
+      paddingRight: tokens["space-small"],
+    },
 
-  titlePadding: {
-    paddingBottom: tokens["space-smaller"],
-  },
+    titlePadding: {
+      paddingBottom: tokens["space-smaller"],
+    },
 
-  content: {
-    flex: 1,
-  },
+    content: {
+      flex: 1,
+    },
 
-  offsetForIcons: {
-    paddingTop: tokens["space-smallest"],
-  },
+    offsetForIcons: {
+      paddingTop: tokens["space-smallest"],
+    },
 
-  actionIcon: {
-    paddingLeft: tokens["space-small"],
-  },
+    actionIcon: {
+      paddingLeft: tokens["space-small"],
+    },
+  };
 });

package/src/ActionItem/ActionItem.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import { View } from "react-native";
 import { IconColorNames, IconNames } from "@jobber/design";
-import { styles } from "./ActionItem.style";
+import { useStyles } from "./ActionItem.style";
 import { ActionItemContainer } from "./components/ActionItemContainer";
 import { Typography } from "../Typography";
 import { Icon } from "../Icon";
@@ -65,6 +65,8 @@ export function ActionItem({
     justifyContent: actionIconAlignment,
   };
 
+  const styles = useStyles();
+
   const addIconOffset = icon || onPress ? styles.offsetForIcons : undefined;
   const titlePadding = children ? styles.titlePadding : undefined;
 

package/src/ActionItem/ActionItemGroup.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import { View } from "react-native";
 import { ActionItem, ActionItemProps } from "./ActionItem";
-import { styles } from "./ActionItem.style";
+import { useStyles } from "./ActionItem.style";
 import { Divider } from "../Divider";
 
 export type ActionItemElement =
@@ -30,6 +30,8 @@ function renderChildren(children: ActionItemElement | ActionItemElement[]) {
   return childArray.map((child, index) => {
     const isSubsequentChild = index !== 0;
 
+    const styles = useStyles();
+
     return (
       <View key={index}>
         {isSubsequentChild && (

package/src/ActionItem/components/ActionItemContainer.style.ts

@@ -1,14 +1,15 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../utils/design";
+import { buildThemedStyles } from "../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    flexDirection: "row",
-    paddingVertical: tokens["space-base"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      width: "100%",
+      flexDirection: "row",
+      paddingVertical: tokens["space-base"],
+    },
 
-  pressed: {
-    opacity: tokens["opacity-pressed"],
-  },
+    pressed: {
+      opacity: tokens["opacity-pressed"],
+    },
+  };
 });

package/src/ActionItem/components/ActionItemContainer.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import { Pressable, View } from "react-native";
-import { styles } from "./ActionItemContainer.style";
-import { styles as actionItemStyles } from "../ActionItem.style";
+import { useStyles } from "./ActionItemContainer.style";
+import { useStyles as useActionItemStyles } from "../ActionItem.style";
 
 interface ActionItemContainerProps {
   readonly children: ReactNode;
@@ -16,6 +16,9 @@ export function ActionItemContainer({
   children,
   testID,
 }: ActionItemContainerProps): JSX.Element {
+  const styles = useStyles();
+  const actionItemStyles = useActionItemStyles();
+
   if (onPress) {
     return (
       <Pressable

package/src/ActivityIndicator/ActivityIndicator.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import { ActivityIndicator, ActivityIndicatorProps } from "react-native";
-import { tokens } from "../utils/design";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export function JobberActivityIndicator(
   props: ActivityIndicatorProps,
 ): JSX.Element {
+  const { tokens } = useAtlantisTheme();
+
   return (
     <ActivityIndicator
       {...props}

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/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/buildThemedStyles.ts

@@ -0,0 +1,43 @@
+import { StyleSheet } from "react-native";
+import { useMemo } from "react";
+import { AtlantisThemeContextValue } from "./types";
+import { useAtlantisTheme } from "./AtlantisThemeContext";
+
+/**
+ * Creates a hook that generates themed styles using the current theme tokens.
+ * The hook will automatically update the styles when the theme changes.
+ *
+ * @example
+ * ```tsx
+ * const useStyles = buildThemedStyles(tokens => ({
+ *   container: {
+ *     backgroundColor: tokens["color-surface"],
+ *     padding: tokens["space-base"],
+ *   },
+ * }));
+ *
+ * function MyComponent() {
+ *   const styles = useStyles();
+ *   return <View style={styles.container} />;
+ * }
+ * ```
+ *
+ * @param styleFactory - A function that receives theme tokens and returns a style object
+ * @returns A hook function that returns the created styles
+ *
+ * @note
+ * - Styles are memoized and only recalculated when tokens change
+ * - Use this for components that need to respond to theme changes
+ * - The returned styles are created using StyleSheet.create()
+ *
+ * @see Related functions: {@link useAtlantisTheme}
+ */
+export function buildThemedStyles<
+  T extends Parameters<typeof StyleSheet.create>[0],
+>(styleFactory: (tokens: AtlantisThemeContextValue["tokens"]) => T) {
+  return function useStyles() {
+    const { tokens } = useAtlantisTheme();
+
+    return useMemo(() => StyleSheet.create(styleFactory(tokens)), [tokens]);
+  };
+}

package/src/AtlantisThemeContext/index.ts

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

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/AutoLink/AutoLink.tsx

@@ -4,7 +4,7 @@ import { AutoLinkProps } from "./types";
 import { ComposeTextWithLinks } from "./components";
 import { useCreateLinkedText } from "./hooks/useCreateLinkedText";
 import { TypographyGestureDetector } from "../Typography";
-import { tokens } from "../utils/design";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export function AutoLink({
   children: text = "",
@@ -13,6 +13,7 @@ export function AutoLink({
   ...rest
 }: AutoLinkProps): JSX.Element {
   const { splitText, matches } = useCreateLinkedText({ text, ...rest });
+  const { tokens } = useAtlantisTheme();
 
   return (
     <TypographyGestureDetector>

package/src/Banner/Banner.style.ts

@@ -1,35 +1,36 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    borderColor: tokens["color-border"],
-    borderStyle: "solid",
-    borderBottomWidth: tokens["border-base"],
-    backgroundColor: tokens["color-surface"],
-  },
-  bannerContent: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    gap: tokens["space-small"] + tokens["space-smaller"],
-  },
-  contentContainer: {
-    flex: 1,
-  },
-  childrenContainer: {
-    marginTop: tokens["space-smallest"],
-  },
-  textContainer: {
-    marginTop: tokens["space-minuscule"],
-  },
-  fullWidth: {
-    width: "100%",
-  },
-  bannerChildrenContent: {
-    marginBottom: tokens["space-small"],
-  },
-  contentSpacing: {
-    gap: tokens["space-small"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      width: "100%",
+      borderColor: tokens["color-border"],
+      borderStyle: "solid",
+      borderBottomWidth: tokens["border-base"],
+      backgroundColor: tokens["color-surface"],
+    },
+    bannerContent: {
+      flexDirection: "row",
+      alignItems: "flex-start",
+      gap: tokens["space-small"] + tokens["space-smaller"],
+    },
+    contentContainer: {
+      flex: 1,
+    },
+    childrenContainer: {
+      marginTop: tokens["space-smallest"],
+    },
+    textContainer: {
+      marginTop: tokens["space-minuscule"],
+    },
+    fullWidth: {
+      width: "100%",
+    },
+    bannerChildrenContent: {
+      marginBottom: tokens["space-small"],
+    },
+    contentSpacing: {
+      gap: tokens["space-small"],
+    },
+  };
 });