@jobber/components-native 0.77.1 → 0.79.0

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 =
@@ -24,6 +24,7 @@ export function ActionItemGroup({
 }
 
 function renderChildren(children: ActionItemElement | ActionItemElement[]) {
+  const styles = useStyles();
   const childArray = React.Children.toArray(children);
   if (childArray.length === 1) return children;
 

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/buildThemedStyles.test.tsx

@@ -0,0 +1,57 @@
+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("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

@@ -7,3 +7,4 @@ export {
   AtlantisThemeContextProviderProps,
   AtlantisThemeContextValue,
 } from "./types";
+export { buildThemedStyles } from "./buildThemedStyles";

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"],
+    },
+  };
 });

package/src/Banner/Banner.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, ReactElement } from "react";
 import { Pressable, Text as RNText, View } from "react-native";
 import { IconNames } from "@jobber/design";
 import { BannerProps, BannerTypes } from "./types";
-import { styles } from "./Banner.style";
+import { useStyles } from "./Banner.style";
 import { BannerIcon } from "./components/BannerIcon/BannerIcon";
 import { Content } from "../Content";
 import { Text } from "../Text";
@@ -24,6 +24,8 @@ export function Banner({
     Boolean(React.Children.count(children) === 1 && !text && !details) ||
     Boolean(text && !details && !children);
 
+  const styles = useStyles();
+
   return (
     <Pressable
       style={[styles.container]}
@@ -35,7 +37,7 @@ export function Banner({
           {bannerIcon && <BannerIcon icon={bannerIcon} type={type} />}
           <View style={styles.contentContainer}>
             <View style={styles.childrenContainer}>
-              <WrappingElement shouldFlow={shouldFlow}>
+              <WrappingElement shouldFlow={shouldFlow} styles={styles}>
                 <BannerChildren>{children}</BannerChildren>
 
                 {text && <Text level="text">{text}</Text>}
@@ -70,8 +72,10 @@ function BannerChildren({ children }: PropsWithChildren): JSX.Element {
 function WrappingElement({
   shouldFlow,
   children,
+  styles,
 }: PropsWithChildren<{
   readonly shouldFlow: boolean;
+  readonly styles: ReturnType<typeof useStyles>;
 }>): ReactElement {
   if (shouldFlow) {
     return <RNText testID="ATL-Banner-RNText">{children}</RNText>;

package/src/Banner/components/BannerIcon/BannerIcon.style.ts

@@ -1,18 +1,19 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  bannerIcon: {
-    borderRadius: tokens["radius-circle"],
-    padding: tokens["space-smaller"],
-  },
-  error: {
-    backgroundColor: tokens["color-destructive"],
-  },
-  warning: {
-    backgroundColor: tokens["color-warning"],
-  },
-  notice: {
-    backgroundColor: tokens["color-informative"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    bannerIcon: {
+      borderRadius: tokens["radius-circle"],
+      padding: tokens["space-smaller"],
+    },
+    error: {
+      backgroundColor: tokens["color-destructive"],
+    },
+    warning: {
+      backgroundColor: tokens["color-warning"],
+    },
+    notice: {
+      backgroundColor: tokens["color-informative"],
+    },
+  };
 });

package/src/Banner/components/BannerIcon/BannerIcon.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { IconNames } from "@jobber/design";
 import { View } from "react-native";
-import { styles } from "./BannerIcon.style";
+import { useStyles } from "./BannerIcon.style";
 import { Icon } from "../../../Icon";
 import { BannerTypes } from "../../types";
 
@@ -11,6 +11,8 @@ export interface BannerIconProps {
 }
 
 export function BannerIcon({ icon, type }: BannerIconProps): JSX.Element {
+  const styles = useStyles();
+
   return (
     <View style={[styles.bannerIcon, styles[type]]} testID="ATL-Banner-Icon">
       <Icon name={icon} color="white" size="small" />

package/src/BottomSheet/BottomSheet.style.ts

@@ -1,35 +1,38 @@
 import { Dimensions, StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
 const { height } = Dimensions.get("window");
-const modalBorderRadius = tokens["radius-larger"];
 
-export const styles = StyleSheet.create({
-  overlayModalize: {
-    backgroundColor: "transparent",
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  const modalBorderRadius = tokens["radius-larger"];
 
-  overlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: tokens["color-overlay"],
-    height,
-  },
-  modal: {
-    borderTopLeftRadius: modalBorderRadius,
-    borderTopRightRadius: modalBorderRadius,
-    paddingTop: tokens["space-small"],
-  },
-  children: {
-    paddingBottom: tokens["space-small"],
-  },
-  header: {
-    paddingHorizontal: tokens["space-base"],
-    paddingTop: tokens["space-small"],
-    paddingBottom: tokens["space-base"],
-  },
-  footerDivider: {
-    marginHorizontal: tokens["space-base"],
-    marginTop: tokens["space-small"],
-    marginBottom: tokens["space-smaller"],
-  },
+  return {
+    overlayModalize: {
+      backgroundColor: "transparent",
+    },
+
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: tokens["color-overlay"],
+      height,
+    },
+    modal: {
+      borderTopLeftRadius: modalBorderRadius,
+      borderTopRightRadius: modalBorderRadius,
+      paddingTop: tokens["space-small"],
+    },
+    children: {
+      paddingBottom: tokens["space-small"],
+    },
+    header: {
+      paddingHorizontal: tokens["space-base"],
+      paddingTop: tokens["space-small"],
+      paddingBottom: tokens["space-base"],
+    },
+    footerDivider: {
+      marginHorizontal: tokens["space-base"],
+      marginTop: tokens["space-small"],
+      marginBottom: tokens["space-smaller"],
+    },
+  };
 });

package/src/BottomSheet/BottomSheet.tsx

@@ -3,7 +3,7 @@ import { Modalize } from "react-native-modalize";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Keyboard, View } from "react-native";
 import { BottomSheetOption } from "./components/BottomSheetOption";
-import { styles } from "./BottomSheet.style";
+import { useStyles } from "./BottomSheet.style";
 import { useIsScreenReaderEnabled } from "../hooks";
 import { Divider } from "../Divider";
 import { Heading } from "../Heading";
@@ -55,22 +55,26 @@ function BottomSheetInternal(
 ) {
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
   const [open, setOpen] = useState<boolean>(false);
+  const styles = useStyles();
 
   return (
     <>
-      {open && <Overlay />}
+      {open && <Overlay styles={styles} />}
       <Modalize
         ref={ref}
         adjustToContentHeight={true}
         modalStyle={styles.modal}
         overlayStyle={styles.overlayModalize}
-        HeaderComponent={heading && <Header heading={heading} />}
+        HeaderComponent={
+          heading && <Header heading={heading} styles={styles} />
+        }
         FooterComponent={
           <Footer
             cancellable={(showCancel && !loading) || isScreenReaderEnabled}
             onCancel={() => {
               (ref as RefObject<BottomSheetRef>)?.current?.close();
             }}
+            styles={styles}
           />
         }
         withHandle={false}
@@ -101,7 +105,13 @@ function BottomSheetInternal(
   }
 }
 
-function Header({ heading }: { readonly heading: string }) {
+function Header({
+  heading,
+  styles,
+}: {
+  readonly heading: string;
+  readonly styles: ReturnType<typeof useStyles>;
+}) {
   return (
     <View style={styles.header}>
       <Heading level={"subtitle"}>{heading}</Heading>
@@ -112,9 +122,11 @@ function Header({ heading }: { readonly heading: string }) {
 function Footer({
   cancellable,
   onCancel,
+  styles,
 }: {
   readonly cancellable: boolean;
   readonly onCancel: () => void;
+  readonly styles: ReturnType<typeof useStyles>;
 }) {
   const insets = useSafeAreaInsets();
   const { t } = useAtlantisI18n();
@@ -143,6 +155,10 @@ function dismissKeyboard() {
   Keyboard.dismiss();
 }
 
-function Overlay() {
+function Overlay({
+  styles,
+}: {
+  readonly styles: ReturnType<typeof useStyles>;
+}) {
   return <View style={styles.overlay} />;
 }

package/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.styles.ts

@@ -1,19 +1,20 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  bottomSheetOption: {
-    display: "flex",
-    flexDirection: "row",
-    alignContent: "center",
-    alignItems: "center",
-    padding: tokens["space-small"],
-  },
-  icon: {
-    paddingHorizontal: tokens["space-small"],
-  },
-  title: {
-    paddingHorizontal: tokens["space-small"],
-    flexShrink: 1,
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    bottomSheetOption: {
+      display: "flex",
+      flexDirection: "row",
+      alignContent: "center",
+      alignItems: "center",
+      padding: tokens["space-small"],
+    },
+    icon: {
+      paddingHorizontal: tokens["space-small"],
+    },
+    title: {
+      paddingHorizontal: tokens["space-small"],
+      flexShrink: 1,
+    },
+  };
 });

package/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { TouchableOpacity, View } from "react-native";
 import { IconColorNames, IconNames } from "@jobber/design";
-import { styles } from "./BottomSheetOption.styles";
+import { useStyles } from "./BottomSheetOption.styles";
 import { TextAlign } from "../../../Typography";
 import { capitalize } from "../../../utils/intl";
 import { Text } from "../../../Text";
@@ -28,6 +28,7 @@ export function BottomSheetOption({
 }: BottomSheetOptionProps): JSX.Element {
   const destructiveColor = "destructive";
   const textVariation = destructive ? destructiveColor : "subdued";
+  const styles = useStyles();
 
   return (
     <TouchableOpacity