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

package/src/InputFieldWrapper/InputFieldWrapper.test.tsx

@@ -1,20 +1,39 @@
 import React from "react";
-import { RenderAPI, fireEvent, render } from "@testing-library/react-native";
+import {
+  RenderAPI,
+  fireEvent,
+  render,
+  renderHook,
+} from "@testing-library/react-native";
 import { Text, ViewStyle } from "react-native";
 import {
   InputFieldWrapper,
   InputFieldWrapperProps,
-  commonInputStyles,
+  useCommonInputStyles,
 } from ".";
-import { styles } from "./InputFieldWrapper.style";
+import { useStyles } from "./InputFieldWrapper.style";
 import {
   INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID,
   INPUT_FIELD_WRAPPER_SPINNER_TEST_ID,
 } from "./InputFieldWrapper";
-import { typographyStyles } from "../Typography";
+import { useTypographyStyles } from "../Typography";
 
 const mockLabel = { label: "$" };
 
+let styles: ReturnType<typeof useStyles>;
+let commonInputStyles: ReturnType<typeof useCommonInputStyles>;
+let typographyStyles: ReturnType<typeof useTypographyStyles>;
+
+beforeAll(() => {
+  const stylesHook = renderHook(() => useStyles());
+  const commonInputStylesHook = renderHook(() => useCommonInputStyles());
+  const typographyStylesHook = renderHook(() => useTypographyStyles());
+
+  styles = stylesHook.result.current;
+  commonInputStyles = commonInputStylesHook.result.current;
+  typographyStyles = typographyStylesHook.result.current;
+});
+
 type InputFieldWrapperTestProps = Omit<InputFieldWrapperProps, "children">;
 
 function renderInputFieldWrapper(props: InputFieldWrapperTestProps): RenderAPI {
@@ -159,7 +178,7 @@ describe("InputFieldWrapper", () => {
       const styleOverride = {
         container: {
           backgroundColor: "purple",
-          width: "50%",
+          width: "50%" as const,
         },
       };
       const { getByTestId } = renderInputFieldWrapper({

package/src/InputFieldWrapper/InputFieldWrapper.tsx

@@ -8,13 +8,13 @@ import {
 } from "react-native";
 import { FieldError } from "react-hook-form";
 import { IconNames } from "@jobber/design";
-import { styles } from "./InputFieldWrapper.style";
+import { useStyles } from "./InputFieldWrapper.style";
 import { PrefixIcon, PrefixLabel } from "./components/Prefix/Prefix";
 import { SuffixIcon, SuffixLabel } from "./components/Suffix/Suffix";
 import { ClearAction } from "./components/ClearAction";
 import { Glimmer } from "../Glimmer/Glimmer";
 import { ErrorMessageWrapper } from "../ErrorMessageWrapper";
-import { TextVariation, typographyStyles } from "../Typography";
+import { TextVariation, useTypographyStyles } from "../Typography";
 import { Text } from "../Text";
 import { ActivityIndicator } from "../ActivityIndicator";
 
@@ -145,6 +145,7 @@ export function InputFieldWrapper({
 
   const showLoadingSpinner = loading && loadingType === "spinner";
   const showLoadingGlimmer = loading && loadingType === "glimmer";
+  const styles = useStyles();
 
   return (
     <ErrorMessageWrapper message={getMessage({ invalid, error })}>
@@ -342,6 +343,8 @@ function Placeholder({
   readonly labelVariation: TextVariation;
   readonly hasMiniLabel: boolean;
 }) {
+  const typographyStyles = useTypographyStyles();
+
   return (
     <>
       {!styleOverride ? (

package/src/InputFieldWrapper/components/ClearAction/ClearAction.style.ts

@@ -1,27 +1,28 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
-const width = tokens["space-smaller"] + tokens["space-larger"];
+export const useStyles = buildThemedStyles(tokens => {
+  const width = tokens["space-smaller"] + tokens["space-larger"];
 
-export const styles = StyleSheet.create({
-  container: {
-    width,
-    height: "100%",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-    alignSelf: "center",
-  },
-  circle: {
-    backgroundColor: tokens["color-surface--background"],
-    borderRadius: tokens["radius-circle"],
-    width: tokens["space-large"],
-    height: tokens["space-large"],
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  addedMargin: {
-    marginRight: tokens["space-small"],
-  },
+  return {
+    container: {
+      width,
+      height: "100%",
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center",
+      alignSelf: "center",
+    },
+    circle: {
+      backgroundColor: tokens["color-surface--background"],
+      borderRadius: tokens["radius-circle"],
+      width: tokens["space-large"],
+      height: tokens["space-large"],
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    addedMargin: {
+      marginRight: tokens["space-small"],
+    },
+  };
 });

package/src/InputFieldWrapper/components/ClearAction/ClearAction.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Pressable, View } from "react-native";
-import { styles } from "./ClearAction.style";
+import { useStyles } from "./ClearAction.style";
 import { Icon } from "../../../Icon";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
@@ -17,6 +17,7 @@ export function ClearAction({
   hasMarginRight = false,
 }: ClearActionProps): JSX.Element {
   const { t } = useAtlantisI18n();
+  const styles = useStyles();
 
   return (
     <Pressable

package/src/InputFieldWrapper/components/Prefix/Prefix.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 { ReactTestInstance } from "react-test-renderer";
 import {
@@ -10,8 +10,11 @@ import {
   prefixIconTestId,
   prefixLabelTestId,
 } from "./Prefix";
-import { typographyStyles } from "../../../Typography";
-import { styles } from "../../InputFieldWrapper.style";
+import {
+  typographyStyles as staticStyles,
+  useTypographyStyles,
+} from "../../../Typography";
+import { useStyles } from "../../InputFieldWrapper.style";
 import { tokens } from "../../../utils/design";
 import * as IconComponent from "../../../Icon/Icon";
 
@@ -19,6 +22,19 @@ const iconSpy = jest.spyOn(IconComponent, "Icon");
 
 const mockLabel = "$";
 
+let styles: ReturnType<typeof useStyles>;
+let typographyStyles: ReturnType<typeof useTypographyStyles>;
+
+beforeAll(() => {
+  const stylesHook = renderHook(() => useStyles());
+  const typographyStylesHook = renderHook(() => useTypographyStyles());
+
+  styles = stylesHook.result.current;
+  typographyStyles = typographyStylesHook.result.current;
+  console.log(typographyStyles.defaultSize);
+  console.log(staticStyles.defaultSize);
+});
+
 function setupLabel({
   disabled = false,
   focused = false,
@@ -156,6 +172,8 @@ describe("Prefix", () => {
         disabled: true,
       });
       const prefixLabel = tree.getByText(mockLabel);
+      // console.log(tree.debug());
+      console.log(prefixLabel.props.style);
       const expectedStyle = [
         typographyStyles.baseRegularRegular,
         typographyStyles.disabled,

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

@@ -9,9 +9,9 @@ import {
 import { IconNames } from "@jobber/design";
 import { Icon } from "../../../Icon";
 import { Text } from "../../../Text";
-import { tokens } from "../../../utils/design";
-import { typographyStyles } from "../../../Typography";
-import { styles } from "../../InputFieldWrapper.style";
+import { useAtlantisTheme } from "../../../AtlantisThemeContext";
+import { useTypographyStyles } from "../../../Typography";
+import { useStyles } from "../../InputFieldWrapper.style";
 
 export interface PrefixLabelProps {
   readonly focused: boolean;
@@ -33,6 +33,9 @@ export function PrefixLabel({
   label,
   styleOverride,
 }: PrefixLabelProps): JSX.Element {
+  const styles = useStyles();
+  const typographyStyles = useTypographyStyles();
+
   return (
     <View
       style={[
@@ -81,6 +84,9 @@ export function PrefixIcon({
   inputInvalid,
   icon,
 }: PrefixIconProps): JSX.Element {
+  const styles = useStyles();
+  const { tokens } = useAtlantisTheme();
+
   return (
     <View
       testID={prefixIconTestId}

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 { useAtlantisTheme } from "../../../AtlantisThemeContext";
+import { useStyles } from "../../InputFieldWrapper.style";
 
 export interface SuffixLabelProps {
   readonly focused: boolean;
@@ -35,6 +35,8 @@ export function SuffixLabel({
   hasLeftMargin = true,
   styleOverride,
 }: SuffixLabelProps): JSX.Element {
+  const styles = useStyles();
+
   return (
     <View
       testID={suffixLabelTestId}
@@ -87,6 +89,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,3 @@
-export { commonInputStyles } from "./CommonInputStyles.style";
+export { useCommonInputStyles } from "./CommonInputStyles.style";
 export { InputFieldWrapper } from "./InputFieldWrapper";
 export type { InputFieldWrapperProps } from "./InputFieldWrapper";

package/src/InputPressable/InputPressable.style.ts

@@ -1,29 +1,30 @@
-import { tokens } from "@jobber/design";
-import { StyleSheet } from "react-native";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 import { typographyStyles } from "../Typography/Typography.style";
 
-export const styles = StyleSheet.create({
-  pressable: {
-    flex: 1,
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    pressable: {
+      flex: 1,
+    },
 
-  inputPressableStyles: {
-    paddingTop:
-      (typographyStyles.defaultSize.fontSize || 0) +
-      tokens["space-small"] +
-      tokens["space-smaller"],
-    lineHeight: typographyStyles.defaultSize.lineHeight,
-  },
+    inputPressableStyles: {
+      paddingTop:
+        (typographyStyles.defaultSize.fontSize || 0) +
+        tokens["space-small"] +
+        tokens["space-smaller"],
+      lineHeight: typographyStyles.defaultSize.lineHeight,
+    },
 
-  inputEmpty: {
-    paddingTop: 0,
-  },
+    inputEmpty: {
+      paddingTop: 0,
+    },
 
-  inputDisabled: {
-    color: typographyStyles.disabled.color,
-  },
+    inputDisabled: {
+      color: typographyStyles.disabled.color,
+    },
 
-  inputInvalid: {
-    borderColor: tokens["color-critical"],
-  },
+    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,30 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 import { typographyStyles } from "../Typography";
 
-export const styles = StyleSheet.create({
-  inputPaddingTop: {
-    paddingTop:
-      (typographyStyles.smallSize.fontSize || 0) +
-      tokens["space-smaller"] +
-      tokens["space-smallest"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    inputPaddingTop: {
+      paddingTop:
+        (typographyStyles.smallSize.fontSize || 0) +
+        tokens["space-smaller"] +
+        tokens["space-smallest"],
+    },
 
-  multiLineInput: {
-    paddingTop: 0,
-    lineHeight: typographyStyles.defaultSize.lineHeight,
-    paddingRight: tokens["space-base"] - tokens["space-smallest"],
-  },
+    multiLineInput: {
+      paddingTop: 0,
+      lineHeight: typographyStyles.defaultSize.lineHeight,
+      paddingRight: tokens["space-base"] - tokens["space-smallest"],
+    },
 
-  multiLineInputWithMini: {
-    paddingTop: tokens["space-large"] + tokens["space-smallest"],
-    paddingBottom: tokens["space-small"] - tokens["space-smallest"],
-  },
+    multiLineInputWithMini: {
+      paddingTop: tokens["space-large"] + tokens["space-smallest"],
+      paddingBottom: tokens["space-small"] - tokens["space-smallest"],
+    },
 
-  multilineInputiOS: {
-    // for placeholder
-    paddingTop:
-      (typographyStyles.defaultSize.fontSize || 0) + tokens["space-smallest"],
-  },
+    multilineInputiOS: {
+      // for placeholder
+      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"],
+    },
+  };
 });