@jobber/components-native 0.77.1 → 0.78.0

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

@@ -7,11 +7,11 @@ import {
   View,
 } from "react-native";
 import { IconNames } from "@jobber/design";
-import { tokens } from "../../../utils/design";
 import { Icon } from "../../../Icon";
 import { Text } from "../../../Text";
-import { typographyStyles } from "../../../Typography";
-import { styles } from "../../InputFieldWrapper.style";
+import { useTypographyStyles } from "../../../Typography";
+import { useAtlantisTheme } from "../../../AtlantisThemeContext";
+import { useStyles } from "../../InputFieldWrapper.style";
 
 export interface SuffixLabelProps {
   readonly focused: boolean;
@@ -35,6 +35,9 @@ export function SuffixLabel({
   hasLeftMargin = true,
   styleOverride,
 }: SuffixLabelProps): JSX.Element {
+  const styles = useStyles();
+  const typographyStyles = useTypographyStyles();
+
   return (
     <View
       testID={suffixLabelTestId}
@@ -87,6 +90,9 @@ export function SuffixIcon({
   hasLeftMargin = false,
   onPress,
 }: SuffixIconProps): JSX.Element {
+  const styles = useStyles();
+  const { tokens } = useAtlantisTheme();
+
   return (
     <View
       testID={suffixIconTestId}

package/src/InputFieldWrapper/index.ts

@@ -1,3 +1,6 @@
-export { commonInputStyles } from "./CommonInputStyles.style";
+export {
+  getCommonInputStyles,
+  useCommonInputStyles,
+} from "./CommonInputStyles.style";
 export { InputFieldWrapper } from "./InputFieldWrapper";
 export type { InputFieldWrapperProps } from "./InputFieldWrapper";

package/src/InputPressable/InputPressable.style.ts

@@ -1,29 +1,32 @@
-import { tokens } from "@jobber/design";
-import { StyleSheet } from "react-native";
-import { typographyStyles } from "../Typography/Typography.style";
+import { buildThemedStyles } from "../AtlantisThemeContext";
+import { getTypographyStyles } from "../Typography";
 
-export const styles = StyleSheet.create({
-  pressable: {
-    flex: 1,
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  const typographyStyles = getTypographyStyles(tokens);
 
-  inputPressableStyles: {
-    paddingTop:
-      (typographyStyles.defaultSize.fontSize || 0) +
-      tokens["space-small"] +
-      tokens["space-smaller"],
-    lineHeight: typographyStyles.defaultSize.lineHeight,
-  },
+  return {
+    pressable: {
+      flex: 1,
+    },
 
-  inputEmpty: {
-    paddingTop: 0,
-  },
+    inputPressableStyles: {
+      paddingTop:
+        (typographyStyles.defaultSize.fontSize || 0) +
+        tokens["space-small"] +
+        tokens["space-smaller"],
+      lineHeight: typographyStyles.defaultSize.lineHeight,
+    },
 
-  inputDisabled: {
-    color: typographyStyles.disabled.color,
-  },
+    inputEmpty: {
+      paddingTop: 0,
+    },
 
-  inputInvalid: {
-    borderColor: tokens["color-critical"],
-  },
+    inputDisabled: {
+      color: typographyStyles.disabled.color,
+    },
+
+    inputInvalid: {
+      borderColor: tokens["color-critical"],
+    },
+  };
 });

package/src/InputPressable/InputPressable.tsx

@@ -4,8 +4,8 @@ import { FieldError } from "react-hook-form";
 import { Text as NativeText, Pressable } from "react-native";
 import { Clearable, useShowClear } from "@jobber/hooks";
 import { XOR } from "ts-xor";
-import { styles } from "./InputPressable.style";
-import { InputFieldWrapper, commonInputStyles } from "../InputFieldWrapper";
+import { useStyles } from "./InputPressable.style";
+import { InputFieldWrapper, useCommonInputStyles } from "../InputFieldWrapper";
 
 interface BasicSuffix {
   icon?: IconNames;
@@ -129,6 +129,9 @@ export function InputPressableInternal(
     disabled,
   });
 
+  const styles = useStyles();
+  const commonInputStyles = useCommonInputStyles();
+
   return (
     <InputFieldWrapper
       prefix={prefix}

package/src/InputText/InputText.style.ts

@@ -1,29 +1,31 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-import { typographyStyles } from "../Typography";
+import { buildThemedStyles } from "../AtlantisThemeContext";
+import { getTypographyStyles } from "../Typography";
 
-export const styles = StyleSheet.create({
-  inputPaddingTop: {
-    paddingTop:
-      (typographyStyles.smallSize.fontSize || 0) +
-      tokens["space-smaller"] +
-      tokens["space-smallest"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  const typographyStyles = getTypographyStyles(tokens);
 
-  multiLineInput: {
-    paddingTop: 0,
-    lineHeight: typographyStyles.defaultSize.lineHeight,
-    paddingRight: tokens["space-base"] - tokens["space-smallest"],
-  },
+  return {
+    inputPaddingTop: {
+      paddingTop:
+        (typographyStyles.smallSize.fontSize || 0) +
+        tokens["space-smaller"] +
+        tokens["space-smallest"],
+    },
 
-  multiLineInputWithMini: {
-    paddingTop: tokens["space-large"] + tokens["space-smallest"],
-    paddingBottom: tokens["space-small"] - tokens["space-smallest"],
-  },
+    multiLineInput: {
+      paddingTop: 0,
+      lineHeight: typographyStyles.defaultSize.lineHeight,
+      paddingRight: tokens["space-base"] - tokens["space-smallest"],
+    },
 
-  multilineInputiOS: {
-    // for placeholder
-    paddingTop:
-      (typographyStyles.defaultSize.fontSize || 0) + tokens["space-smallest"],
-  },
+    multiLineInputWithMini: {
+      paddingTop: tokens["space-large"] + tokens["space-smallest"],
+      paddingBottom: tokens["space-small"] - tokens["space-smallest"],
+    },
+
+    multilineInputiOS: {
+      paddingTop:
+        (typographyStyles.defaultSize.fontSize || 0) + tokens["space-smallest"],
+    },
+  };
 });

package/src/InputText/InputText.test.tsx

@@ -3,6 +3,7 @@ import {
   RenderAPI,
   fireEvent,
   render,
+  renderHook,
   waitFor,
 } from "@testing-library/react-native";
 import { Platform, TextStyle } from "react-native";
@@ -12,7 +13,7 @@ import { InputAccessoriesProvider } from "./context";
 import {
   Clearable,
   InputFieldWrapperProps,
-  commonInputStyles,
+  useCommonInputStyles,
 } from "../InputFieldWrapper";
 
 const MockInputFieldWrapper = jest.fn();
@@ -40,6 +41,15 @@ function renderInputText(props: InputTextProps): RenderAPI {
 }
 
 const clearInput = "Clear input";
+
+let commonInputStyles: ReturnType<typeof useCommonInputStyles>;
+
+beforeAll(() => {
+  const commonInputStylesHook = renderHook(() => useCommonInputStyles());
+
+  commonInputStyles = commonInputStylesHook.result.current;
+});
+
 // eslint-disable-next-line max-statements
 describe("InputText", () => {
   describe("InputFieldWrapper gets the expected props", () => {

package/src/InputText/InputText.tsx

@@ -22,7 +22,7 @@ import { RegisterOptions } from "react-hook-form";
 import { IconNames } from "@jobber/design";
 import identity from "lodash/identity";
 import { Clearable, useShowClear } from "@jobber/hooks";
-import { styles } from "./InputText.style";
+import { useStyles } from "./InputText.style";
 import { useInputAccessoriesContext } from "./context";
 import { useFormController } from "../hooks";
 import {
@@ -30,7 +30,7 @@ import {
   InputFieldWrapperProps,
 } from "../InputFieldWrapper/InputFieldWrapper";
 import { InputFieldWrapper } from "../InputFieldWrapper";
-import { commonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
+import { useCommonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
 
 export interface InputTextProps
   extends Pick<
@@ -363,6 +363,9 @@ function InputTextInternal(
     onFocusNext();
   }
 
+  const styles = useStyles();
+  const commonInputStyles = useCommonInputStyles();
+
   return (
     <InputFieldWrapper
       prefix={prefix}

package/src/InputText/context/InputAccessoriesProvider.style.tsx

@@ -1,23 +1,25 @@
-import { PlatformColor, StyleSheet } from "react-native";
-import { tokens } from "../../utils/design";
+import { PlatformColor } from "react-native";
+import { buildThemedStyles } from "../../AtlantisThemeContext";
 
 const BAR_HEIGHT = 44;
 
-export const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    alignItems: "center",
-    paddingHorizontal: tokens["space-small"],
-    borderTopWidth: tokens["space-minuscule"],
-    borderTopColor: tokens["color-border"],
-    height: BAR_HEIGHT,
-  },
-  lightTheme: {
-    backgroundColor: tokens["color-surface--background"],
-  },
-  darkTheme: {
-    // PlatformColor has to be conditional for Storybook to run without error
-    backgroundColor: PlatformColor?.("systemGray3"),
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      paddingHorizontal: tokens["space-small"],
+      borderTopWidth: tokens["space-minuscule"],
+      borderTopColor: tokens["color-border"],
+      height: BAR_HEIGHT,
+    },
+    lightTheme: {
+      backgroundColor: tokens["color-surface--background"],
+    },
+    darkTheme: {
+      // PlatformColor has to be conditional for Storybook to run without error
+      backgroundColor: PlatformColor?.("systemGray3"),
+    },
+  };
 });

package/src/InputText/context/InputAccessoriesProvider.tsx

@@ -9,7 +9,7 @@ import {
 } from "react-native";
 import { v4 } from "react-native-uuid";
 import { InputAccessoriesContext } from "./InputAccessoriesContext";
-import { styles } from "./InputAccessoriesProvider.style";
+import { useStyles } from "./InputAccessoriesProvider.style";
 
 export function InputAccessoriesProvider({
   children,
@@ -30,6 +30,8 @@ export function InputAccessoriesProvider({
 
   const colorScheme = useColorScheme();
 
+  const styles = useStyles();
+
   return (
     <InputAccessoriesContext.Provider
       value={{

package/src/Menu/Menu.style.ts

@@ -1,16 +1,17 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
 const menuWidth = 208;
 
-export const styles = StyleSheet.create({
-  menu: {
-    position: "absolute",
-    backgroundColor: tokens["color-surface"],
-    paddingHorizontal: tokens["space-small"],
-    paddingVertical: tokens["space-small"] + tokens["space-smallest"],
-    borderRadius: tokens["radius-base"],
-    width: menuWidth,
-    ...tokens["shadow-high"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    menu: {
+      position: "absolute",
+      backgroundColor: tokens["color-surface"],
+      paddingHorizontal: tokens["space-small"],
+      paddingVertical: tokens["space-small"] + tokens["space-smallest"],
+      borderRadius: tokens["radius-base"],
+      width: menuWidth,
+      ...tokens["shadow-high"],
+    },
+  };
 });

package/src/Menu/Menu.test.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
 import { Host } from "react-native-portalize";
 import { View } from "react-native";
-import { tokens } from "@jobber/design/foundation";
 import { Menu, MenuOptionProps, MenuProps } from ".";
+import { tokens } from "../utils/design";
 import { Icon } from "../Icon";
 import { Button } from "../Button";
 

package/src/Menu/Menu.tsx

@@ -9,16 +9,16 @@ import {
 } from "react-native";
 import { Portal } from "react-native-portalize";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
-import { styles } from "./Menu.style";
+import { useStyles } from "./Menu.style";
 import { findViewpoint } from "./utils";
 import { MenuProps } from "./types";
 import { MenuOption } from "./components/MenuOption";
 import { Overlay } from "./components/Overlay";
-import { tokens } from "../utils/design";
 import { Button } from "../Button";
 import { Content } from "../Content";
 import { useAtlantisContext } from "../AtlantisContext";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element {
   const [open, setOpen] = useState<boolean>(false);
@@ -28,12 +28,15 @@ export function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element {
   const screenInfo = useScreenInformation();
 
   const { t } = useAtlantisI18n();
+  const styles = useStyles();
 
   const findMenuLayout = useCallback(() => {
     if (activatorLayout.current) {
-      setMenuPosition(findViewpoint(screenInfo, activatorLayout.current));
+      setMenuPosition(
+        findViewpoint(screenInfo, activatorLayout.current, styles),
+      );
     }
-  }, [screenInfo, activatorLayout]);
+  }, [screenInfo, activatorLayout, styles]);
 
   const openMenu = () => {
     menuButtonRef.current?.measureInWindow(
@@ -63,6 +66,8 @@ export function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element {
     }
   };
 
+  const { tokens } = useAtlantisTheme();
+
   return (
     <>
       <View

package/src/Menu/components/MenuOption/MenuOption.style.tsx

@@ -1,11 +1,12 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  menuOption: {
-    display: "flex",
-    paddingHorizontal: tokens["space-base"],
-    paddingVertical: tokens["space-small"],
-    borderRadius: tokens["radius-large"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    menuOption: {
+      display: "flex",
+      paddingHorizontal: tokens["space-base"],
+      paddingVertical: tokens["space-small"],
+      borderRadius: tokens["radius-large"],
+    },
+  };
 });

package/src/Menu/components/MenuOption/MenuOption.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { Pressable, View } from "react-native";
 import capitalize from "lodash/capitalize";
-import { styles } from "./MenuOption.style";
+import { useStyles } from "./MenuOption.style";
 import { MenuOptionInternalProps } from "../../types";
-import { tokens } from "../../../utils/design";
 import { Flex } from "../../../Flex";
 import { Typography } from "../../../Typography";
 import { Icon } from "../../../Icon";
+import { useAtlantisTheme } from "../../../AtlantisThemeContext";
 
 export function MenuOption({
   label,
@@ -20,6 +20,8 @@ export function MenuOption({
 }: MenuOptionInternalProps): JSX.Element {
   const destructiveColor = "destructive";
   const textVariation = destructive ? destructiveColor : "heading";
+  const styles = useStyles();
+  const { tokens } = useAtlantisTheme();
 
   return (
     <View testID="ATL-MENU-OPTIONS">

package/src/Menu/components/Overlay/Overlay.style.ts

@@ -1,13 +1,15 @@
 import { Dimensions, StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
 const { height } = Dimensions.get("window");
 
-export const styles = StyleSheet.create({
-  overlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: tokens["color-overlay"],
-    opacity: 0,
-    height,
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: tokens["color-overlay"],
+      opacity: 0,
+      height,
+    },
+  };
 });

package/src/Menu/components/Overlay/Overlay.tsx

@@ -1,9 +1,11 @@
 import React from "react";
 import { Pressable, View } from "react-native";
-import { styles } from "./Overlay.style";
+import { useStyles } from "./Overlay.style";
 import { OverlayProp } from "../../types";
 
 export function Overlay({ setOpen }: OverlayProp): JSX.Element {
+  const styles = useStyles();
+
   return (
     <Pressable
       onPressIn={() => {

package/src/Menu/utils.ts

@@ -1,5 +1,5 @@
 import { LayoutRectangle } from "react-native";
-import { styles } from "./Menu.style";
+import { useStyles } from "./Menu.style";
 
 interface ScreenInfo {
   windowHeight: number;
@@ -10,6 +10,7 @@ interface ScreenInfo {
 export function findViewpoint(
   screenInfo: ScreenInfo,
   activatorLayout: LayoutRectangle,
+  styles: ReturnType<typeof useStyles>,
 ): { [key: string]: number | undefined } {
   const { windowHeight, windowWidth, headerHeight } = screenInfo;
   const pos: { [key: string]: number | undefined } = {};

package/src/ProgressBar/ProgressBar.style.ts

@@ -1,37 +1,38 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  progressBarContainer: {
-    marginTop: tokens["space-small"],
-    marginBottom: tokens["space-small"],
-    position: "relative",
-    flexDirection: "row",
-  },
-  progressBarInner: {
-    backgroundColor: "rgba(255,255,255,0.3)",
-    width: "100%",
-    height: "100%",
-    position: "absolute",
-    left: 0,
-    top: 0,
-    borderRadius: 100,
-  },
-  progressInner: {
-    height: "100%",
-    borderRadius: 100,
-  },
-  step: {
-    flex: 1,
-    marginRight: tokens["space-small"],
-    height: "100%",
-    borderRadius: 100,
-    borderColor: "rgba(255,255,255,0.3)",
-  },
-  completedStep: {
-    backgroundColor: tokens["color-interactive"],
-  },
-  inProgressStep: {
-    backgroundColor: tokens["color-informative"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    progressBarContainer: {
+      marginTop: tokens["space-small"],
+      marginBottom: tokens["space-small"],
+      position: "relative",
+      flexDirection: "row",
+    },
+    progressBarInner: {
+      backgroundColor: "rgba(255,255,255,0.3)",
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      borderRadius: 100,
+    },
+    progressInner: {
+      height: "100%",
+      borderRadius: 100,
+    },
+    step: {
+      flex: 1,
+      marginRight: tokens["space-small"],
+      height: "100%",
+      borderRadius: 100,
+      borderColor: "rgba(255,255,255,0.3)",
+    },
+    completedStep: {
+      backgroundColor: tokens["color-interactive"],
+    },
+    inProgressStep: {
+      backgroundColor: tokens["color-informative"],
+    },
+  };
 });

package/src/ProgressBar/ProgressBar.test.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { render, screen } from "@testing-library/react-native";
 import { ProgressBar, ProgressBarProps } from ".";
-import { styles } from "./ProgressBar.style";
 
 const defaultSetupProps = {
   total: 0,
@@ -45,36 +44,23 @@ describe("with stepped variation", () => {
   beforeEach(() => {
     render(
       <ProgressBar
-        total={3}
+        total={4}
         current={2}
         inProgress={1}
         variation={"stepped"}
       />,
     );
   });
-  it("renders the correct number of steps", () => {
-    const stepElements = screen.getAllByTestId("progress-step");
-    expect(stepElements).toHaveLength(3);
-  });
   it("renders the correct number of completed steps", () => {
-    const stepElements = screen.getAllByTestId("progress-step");
-    const completedSteps = stepElements.filter(step =>
-      step.props.style.includes(styles.completedStep),
-    );
+    const completedSteps = screen.getAllByTestId("progress-step-completed");
     expect(completedSteps).toHaveLength(2);
   });
   it("renders the correct number of incomplete steps", () => {
-    const stepElements = screen.getAllByTestId("progress-step");
-    const incompleteSteps = stepElements.filter(
-      step => !step.props.style.includes(styles.completedStep),
-    );
-    expect(incompleteSteps).toHaveLength(1);
+    const inCompleteSteps = screen.getAllByTestId("progress-step-incomplete");
+    expect(inCompleteSteps).toHaveLength(1);
   });
   it("renders the correct number of inProgress steps", () => {
-    const stepElements = screen.getAllByTestId("progress-step");
-    const inProgressSteps = stepElements.filter(step =>
-      step.props.style.includes(styles.inProgressStep),
-    );
-    expect(inProgressSteps).toHaveLength(1);
+    const stepElements = screen.getAllByTestId("progress-step-in-progress");
+    expect(stepElements).toHaveLength(1);
   });
 });

package/src/ProgressBar/ProgressBar.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { View } from "react-native";
 import { ProgressBarProps } from "./types";
-import { styles } from "./ProgressBar.style";
+import { useStyles } from "./ProgressBar.style";
 import { ProgressBarInner, calculateWidth } from "./ProgressBarInner";
 import { ProgressBarStepped } from "./ProgressBarStepped";
 import { sizeStyles } from "./ProgressBar.size.style";
-import { tokens } from "../utils/design";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export function ProgressBar({
   loading,
@@ -19,6 +19,8 @@ export function ProgressBar({
   size = "base",
 }: ProgressBarProps): JSX.Element {
   const { t } = useAtlantisI18n();
+  const styles = useStyles();
+  const { tokens } = useAtlantisTheme();
 
   return (
     <View