@jobber/components-native 0.76.1-JOB-116234-314c5ff.22 → 0.76.1-JOB-116234-4bc5afd.23

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

@@ -8,7 +8,7 @@ export declare const createTypographyTokens: (tokens: AtlantisThemeContextValue[
     [index: string]: TextStyle;
 };
 /**
- * @deprecated Use useCommonInputStyles instead
+ * @deprecated Use useTypographyStyles instead
  */
 export declare const typographyStyles: Record<string, TextStyle>;
 export declare const useTypographyStyles: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.76.1-JOB-116234-314c5ff.22+314c5ff4",
+  "version": "0.76.1-JOB-116234-4bc5afd.23+4bc5afdb",
   "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": "314c5ff4e8322594d2fc7ffce54a204f4a6731cb"
+  "gitHead": "4bc5afdb99786f50a9ae8474ac282eb593dd9867"
 }

package/src/InputFieldWrapper/CommonInputStyles.style.ts

@@ -4,6 +4,7 @@ import {
   buildThemedStyles,
 } from "../AtlantisThemeContext";
 import {
+  // eslint-disable-next-line import/no-deprecated
   typographyStyles as staticTypographyStyles,
   useTypographyStyles,
 } from "../Typography";
@@ -52,6 +53,7 @@ export const createCommonInputTokens = (
  * @deprecated Use useCommonInputStyles instead
  */
 export const commonInputStyles = StyleSheet.create(
+  // eslint-disable-next-line import/no-deprecated
   createCommonInputTokens(staticTokens, staticTypographyStyles),
 );
 

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

@@ -10,10 +10,7 @@ import {
   prefixIconTestId,
   prefixLabelTestId,
 } from "./Prefix";
-import {
-  typographyStyles as staticStyles,
-  useTypographyStyles,
-} from "../../../Typography";
+import { useTypographyStyles } from "../../../Typography";
 import { useStyles } from "../../InputFieldWrapper.style";
 import { tokens } from "../../../utils/design";
 import * as IconComponent from "../../../Icon/Icon";
@@ -31,8 +28,6 @@ beforeAll(() => {
 
   styles = stylesHook.result.current;
   typographyStyles = typographyStylesHook.result.current;
-  console.log(typographyStyles.defaultSize);
-  console.log(staticStyles.defaultSize);
 });
 
 function setupLabel({

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

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

@@ -9,7 +9,7 @@ import {
 import { IconNames } from "@jobber/design";
 import { Icon } from "../../../Icon";
 import { Text } from "../../../Text";
-import { typographyStyles } from "../../../Typography";
+import { useTypographyStyles } from "../../../Typography";
 import { useAtlantisTheme } from "../../../AtlantisThemeContext";
 import { useStyles } from "../../InputFieldWrapper.style";
 
@@ -36,6 +36,7 @@ export function SuffixLabel({
   styleOverride,
 }: SuffixLabelProps): JSX.Element {
   const styles = useStyles();
+  const typographyStyles = useTypographyStyles();
 
   return (
     <View

package/src/InputPressable/InputPressable.style.ts

@@ -1,8 +1,10 @@
 import { buildThemedStyles } from "../AtlantisThemeContext";
-import { typographyStyles } from "../Typography/Typography.style";
+import { useTypographyStyles } from "../Typography";
 
-export const useStyles = buildThemedStyles(tokens => {
-  return {
+export const useStyles = () => {
+  const typographyStyles = useTypographyStyles();
+
+  return buildThemedStyles(tokens => ({
     pressable: {
       flex: 1,
     },
@@ -26,5 +28,5 @@ export const useStyles = buildThemedStyles(tokens => {
     inputInvalid: {
       borderColor: tokens["color-critical"],
     },
-  };
-});
+  }))();
+};

package/src/InputText/InputText.style.ts

@@ -1,8 +1,10 @@
 import { buildThemedStyles } from "../AtlantisThemeContext";
-import { typographyStyles } from "../Typography";
+import { useTypographyStyles } from "../Typography";
 
-export const useStyles = buildThemedStyles(tokens => {
-  return {
+export const useStyles = () => {
+  const typographyStyles = useTypographyStyles();
+
+  return buildThemedStyles(tokens => ({
     inputPaddingTop: {
       paddingTop:
         (typographyStyles.smallSize.fontSize || 0) +
@@ -22,9 +24,8 @@ export const useStyles = buildThemedStyles(tokens => {
     },
 
     multilineInputiOS: {
-      // for placeholder
       paddingTop:
         (typographyStyles.defaultSize.fontSize || 0) + tokens["space-smallest"],
     },
-  };
-});
+  }))();
+};

package/src/Typography/Typography.style.ts

@@ -620,7 +620,7 @@ export const createTypographyTokens = (
 });
 
 /**
- * @deprecated Use useCommonInputStyles instead
+ * @deprecated Use useTypographyStyles instead
  */
 export const typographyStyles: Record<string, TextStyle> = StyleSheet.create(
   createTypographyTokens(staticTokens),

package/src/Typography/Typography.tsx

@@ -10,7 +10,7 @@ import {
   ViewStyle,
 } from "react-native";
 import { TypographyGestureDetector } from "./TypographyGestureDetector";
-import { typographyStyles as styles } from "./Typography.style";
+import { useTypographyStyles } from "./Typography.style";
 import { capitalize } from "../utils/intl";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 
@@ -161,13 +161,14 @@ function InternalTypography<T extends FontFamily = "base">({
   UNSAFE_style,
   selectable = true,
 }: TypographyProps<T>): JSX.Element {
-  const sizeAndHeight = getSizeAndHeightStyle(size, lineHeight);
+  const styles = useTypographyStyles();
+  const sizeAndHeight = getSizeAndHeightStyle(size, styles, lineHeight);
   const style: StyleProp<ViewStyle>[] = [
-    getFontStyle(fontFamily, fontStyle, fontWeight),
-    getColorStyle(color, reverseTheme),
-    getAlignStyle(align),
+    getFontStyle(fontFamily, fontStyle, fontWeight, styles),
+    getColorStyle(styles, color, reverseTheme),
+    getAlignStyle(styles, align),
     sizeAndHeight,
-    getLetterSpacingStyle(letterSpacing),
+    getLetterSpacingStyle(letterSpacing, styles),
   ];
 
   if (strikeThrough) {
@@ -233,6 +234,7 @@ function getFontStyle(
   fontFamily: FontFamily = "base",
   fontStyle: FontStyle = "regular",
   fontWeight: FontWeight = "regular",
+  styles: Record<string, TextStyle>,
 ) {
   const defaultBaseFontStyling = styles.baseRegularRegular;
   const defaultDisplayFontStyling = styles.displayRegularBold;
@@ -263,7 +265,11 @@ function getTransformedText(text?: string, transform?: TextTransform) {
   }
 }
 
-function getColorStyle(color?: TextColor, reverseTheme?: boolean) {
+function getColorStyle(
+  styles: Record<string, TextStyle>,
+  color?: TextColor,
+  reverseTheme?: boolean,
+) {
   if (color === "default" || !color) {
     return styles.greyBlue;
   }
@@ -273,6 +279,7 @@ function getColorStyle(color?: TextColor, reverseTheme?: boolean) {
 }
 
 function getAlignStyle(
+  styles: Record<string, TextStyle>,
   alignStyle: TextAlign = I18nManager.isRTL ? "end" : "start",
 ) {
   return styles[`${alignStyle}Align`];
@@ -280,6 +287,7 @@ function getAlignStyle(
 
 function getSizeAndHeightStyle(
   textSize: TextSize,
+  styles: Record<string, TextStyle>,
   lineHeightOverwrite?: LineHeight,
 ) {
   const fontSize = styles[`${textSize}Size`];
@@ -293,7 +301,10 @@ function getSizeAndHeightStyle(
   return fontSize;
 }
 
-function getLetterSpacingStyle(letterSpacing: LetterSpacing = "base") {
+function getLetterSpacingStyle(
+  letterSpacing: LetterSpacing = "base",
+  styles: Record<string, TextStyle>,
+) {
   return styles[`${letterSpacing}LetterSpacing`];
 }