@jobber/components-native 0.77.1 → 0.78.0

package/src/InputFieldWrapper/CommonInputStyles.style.ts

@@ -1,39 +1,66 @@
-import { StyleSheet } from "react-native";
-import { typographyStyles } from "../Typography";
-import { tokens } from "../utils/design";
-
-export const commonInputStyles = StyleSheet.create({
-  input: {
-    width: "100%",
-    flexShrink: 1,
-    flexGrow: 1,
-    color: tokens["color-text"],
-    fontFamily: typographyStyles.baseRegularRegular.fontFamily,
-    fontSize: typographyStyles.defaultSize.fontSize,
-    letterSpacing: typographyStyles.baseLetterSpacing.letterSpacing,
-    minHeight: tokens["space-largest"] + tokens["space-small"],
-    padding: 0,
-  },
-
-  inputEmpty: {
-    paddingTop: 0,
-  },
-
-  inputDisabled: {
-    color: typographyStyles.disabled.color,
-  },
-
-  container: {
-    paddingLeft: tokens["space-base"],
-    marginVertical: tokens["space-smaller"],
-    backgroundColor: tokens["color-surface"],
-    minHeight: tokens["space-largest"] + tokens["space-small"],
-    flexDirection: "row",
-    justifyContent: "space-between",
-    width: "100%",
-    borderColor: tokens["color-border"],
-    borderStyle: "solid",
-    borderWidth: tokens["border-base"],
-    borderRadius: tokens["radius-base"],
-  },
+import { StyleSheet, TextStyle, ViewStyle } from "react-native";
+import {
+  AtlantisThemeContextValue,
+  buildThemedStyles,
+} from "../AtlantisThemeContext";
+import { getTypographyStyles } from "../Typography";
+import { tokens as staticTokens } from "../utils/design";
+
+export const createCommonInputTokens = (
+  tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens,
+): Record<string, ViewStyle | TextStyle> => {
+  const typographyStyles = getTypographyStyles(tokens);
+
+  return {
+    input: {
+      width: "100%",
+      flexShrink: 1,
+      flexGrow: 1,
+      color: tokens["color-text"],
+      fontFamily: typographyStyles.baseRegularRegular.fontFamily,
+      fontSize: typographyStyles.defaultSize.fontSize,
+      letterSpacing: typographyStyles.baseLetterSpacing.letterSpacing,
+      minHeight: tokens["space-largest"] + tokens["space-small"],
+      padding: 0,
+    },
+
+    inputEmpty: {
+      paddingTop: 0,
+    },
+
+    inputDisabled: {
+      color: typographyStyles.disabled.color,
+    },
+
+    container: {
+      paddingLeft: tokens["space-base"],
+      marginVertical: tokens["space-smaller"],
+      backgroundColor: tokens["color-surface"],
+      minHeight: tokens["space-largest"] + tokens["space-small"],
+      flexDirection: "row",
+      justifyContent: "space-between",
+      width: "100%",
+      borderColor: tokens["color-border"],
+      borderStyle: "solid",
+      borderWidth: tokens["border-base"],
+      borderRadius: tokens["radius-base"],
+    },
+  };
+};
+
+/**
+ * @deprecated Use useCommonInputStyles instead
+ */
+export const commonInputStyles = StyleSheet.create(
+  createCommonInputTokens(staticTokens),
+);
+
+export const getCommonInputStyles = (
+  tokens: AtlantisThemeContextValue["tokens"],
+) => {
+  return createCommonInputTokens(tokens);
+};
+
+export const useCommonInputStyles = buildThemedStyles(tokens => {
+  return getCommonInputStyles(tokens);
 });

package/src/InputFieldWrapper/InputFieldWrapper.style.ts

@@ -1,140 +1,146 @@
 import { StyleSheet } from "react-native";
-import { commonInputStyles } from "./CommonInputStyles.style";
-import { tokens } from "../utils/design";
-import { typographyStyles } from "../Typography";
-
-export const styles = StyleSheet.create({
-  container: StyleSheet.flatten([
-    commonInputStyles.container,
-    {
-      flexDirection: "column",
-    },
-  ]),
-
-  field: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-
-  inputContainer: {
-    flexDirection: "row",
-    flex: 1,
-    justifyContent: "flex-start",
-  },
-
-  inputFocused: {
-    borderColor: tokens["color-interactive"],
-  },
-
-  inputInvalid: {
-    borderColor: tokens["color-critical"],
-  },
-
-  label: {
-    // for placeholder
-    position: "absolute",
-    display: "flex",
-    justifyContent: "center",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-  },
-
-  miniLabel: {
-    top: 0,
-    paddingTop: tokens["space-small"] - tokens["space-smallest"],
-    backgroundColor: tokens["color-surface"],
-    marginRight: tokens["space-small"],
-    maxHeight:
-      (typographyStyles.defaultSize.lineHeight || 0) + tokens["space-smaller"],
-    zIndex: 1,
-  },
-  // Prevents the miniLabel from cutting off the ClearAction button
-  miniLabelShowClearAction: {
-    backgroundColor: "transparent",
-  },
-
-  disabled: {
-    backgroundColor: tokens["color-disabled--secondary"],
-  },
-
-  fieldAffix: {
-    flexDirection: "row",
-  },
-
-  fieldAffixMiniLabel: {
-    paddingTop: tokens["space-small"] - tokens["space-smallest"],
-    // @ts-expect-error tsc-ci
-    top: typographyStyles.smallSize.fontSize / 2,
-    right: 0,
-    bottom: 0,
-    left: 0,
-  },
-
-  prefixIcon: {
-    justifyContent: "center",
-    paddingRight: tokens["space-small"],
-  },
-
-  prefixLabel: {
-    justifyContent: "center",
-    paddingTop: tokens["space-minuscule"],
-    paddingRight: tokens["space-minuscule"],
-  },
-
-  suffixIcon: {
-    justifyContent: "center",
-    paddingRight: tokens["space-small"],
-  },
-
-  suffixLabel: {
-    justifyContent: "center",
-    paddingTop: tokens["space-minuscule"],
-    paddingRight: tokens["space-small"],
-  },
-
-  suffixIconMargin: {
-    marginLeft: tokens["space-small"] + tokens["space-smaller"],
-  },
-
-  suffixLabelMargin: {
-    marginLeft: tokens["space-smallest"],
-  },
-
-  inputEndContainer: {
-    flexDirection: "row",
-    zIndex: 1,
-  },
-
-  toolbar: {
-    flexBasis: "100%",
-    flexDirection: "row",
-    gap: tokens["space-small"],
-    paddingBottom: tokens["space-small"],
-  },
-
-  loadingSpinner: {
-    justifyContent: "center",
-    paddingRight: tokens["space-small"],
-  },
-
-  loadingGlimmers: {
-    position: "absolute",
-    top: tokens["space-base"],
-    bottom: tokens["space-base"],
-    left: 0,
-    right: 0,
-    gap: tokens["space-small"],
-    paddingTop: tokens["space-small"],
-    paddingRight: tokens["space-large"],
-    backgroundColor: tokens["color-surface"],
-    overflow: "hidden",
-  },
-
-  loadingGlimmersHasValue: {
-    top: tokens["space-large"],
-    paddingTop: tokens["space-base"] - tokens["space-smaller"],
-    bottom: tokens["space-smaller"],
-  },
+import { getCommonInputStyles } from "./CommonInputStyles.style";
+import { buildThemedStyles } from "../AtlantisThemeContext";
+import { getTypographyStyles } from "../Typography";
+
+export const useStyles = buildThemedStyles(tokens => {
+  const commonInputStyles = getCommonInputStyles(tokens);
+  const typographyStyles = getTypographyStyles(tokens);
+
+  return {
+    container: StyleSheet.flatten([
+      commonInputStyles.container,
+      {
+        flexDirection: "column",
+      },
+    ]),
+
+    field: {
+      flexDirection: "row",
+      alignItems: "center",
+    },
+
+    inputContainer: {
+      flexDirection: "row",
+      flex: 1,
+      justifyContent: "flex-start",
+    },
+
+    inputFocused: {
+      borderColor: tokens["color-interactive"],
+    },
+
+    inputInvalid: {
+      borderColor: tokens["color-critical"],
+    },
+
+    label: {
+      // for placeholder
+      position: "absolute",
+      display: "flex",
+      justifyContent: "center",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+
+    miniLabel: {
+      top: 0,
+      paddingTop: tokens["space-small"] - tokens["space-smallest"],
+      backgroundColor: tokens["color-surface"],
+      marginRight: tokens["space-small"],
+      maxHeight:
+        (typographyStyles.defaultSize.lineHeight || 0) +
+        tokens["space-smaller"],
+      zIndex: 1,
+    },
+    // Prevents the miniLabel from cutting off the ClearAction button
+    miniLabelShowClearAction: {
+      backgroundColor: "transparent",
+    },
+
+    disabled: {
+      backgroundColor: tokens["color-disabled--secondary"],
+    },
+
+    fieldAffix: {
+      flexDirection: "row",
+    },
+
+    fieldAffixMiniLabel: {
+      paddingTop: tokens["space-small"] - tokens["space-smallest"],
+      // @ts-expect-error tsc-ci
+      top: typographyStyles.smallSize.fontSize / 2,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+
+    prefixIcon: {
+      justifyContent: "center",
+      paddingRight: tokens["space-small"],
+    },
+
+    prefixLabel: {
+      justifyContent: "center",
+      paddingTop: tokens["space-minuscule"],
+      paddingRight: tokens["space-minuscule"],
+    },
+
+    suffixIcon: {
+      justifyContent: "center",
+      paddingRight: tokens["space-small"],
+    },
+
+    suffixLabel: {
+      justifyContent: "center",
+      paddingTop: tokens["space-minuscule"],
+      paddingRight: tokens["space-small"],
+    },
+
+    suffixIconMargin: {
+      marginLeft: tokens["space-small"] + tokens["space-smaller"],
+    },
+
+    suffixLabelMargin: {
+      marginLeft: tokens["space-smallest"],
+    },
+
+    inputEndContainer: {
+      flexDirection: "row",
+      zIndex: 1,
+    },
+
+    toolbar: {
+      flexBasis: "100%",
+      flexDirection: "row",
+      gap: tokens["space-small"],
+      paddingBottom: tokens["space-small"],
+    },
+
+    loadingSpinner: {
+      justifyContent: "center",
+      paddingRight: tokens["space-small"],
+    },
+
+    loadingGlimmers: {
+      position: "absolute",
+      top: tokens["space-base"],
+      bottom: tokens["space-base"],
+      left: 0,
+      right: 0,
+      gap: tokens["space-small"],
+      paddingTop: tokens["space-small"],
+      paddingRight: tokens["space-large"],
+      backgroundColor: tokens["color-surface"],
+      overflow: "hidden",
+    },
+
+    loadingGlimmersHasValue: {
+      top: tokens["space-large"],
+      paddingTop: tokens["space-base"] - tokens["space-smaller"],
+      bottom: tokens["space-smaller"],
+    },
+  };
 });

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,8 @@ import {
   prefixIconTestId,
   prefixLabelTestId,
 } from "./Prefix";
-import { typographyStyles } from "../../../Typography";
-import { styles } from "../../InputFieldWrapper.style";
+import { useTypographyStyles } from "../../../Typography";
+import { useStyles } from "../../InputFieldWrapper.style";
 import { tokens } from "../../../utils/design";
 import * as IconComponent from "../../../Icon/Icon";
 
@@ -19,6 +19,17 @@ 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;
+});
+
 function setupLabel({
   disabled = false,
   focused = false,

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.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({});