@jobber/components-native 0.76.1-JOB-116234-63c4467.27 → 0.76.1-JOB-116234-6cadae0.33

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

@@ -24,6 +24,7 @@ export declare const useStyles: () => {
     };
     base: {
         minHeight: number;
+        paddingHorizontal: number;
     };
     small: {
         minHeight: number;

package/dist/types/src/InputFieldWrapper/CommonInputStyles.style.d.ts

@@ -1,9 +1,10 @@
 import { TextStyle, ViewStyle } from "react-native";
 import { AtlantisThemeContextValue } from "../AtlantisThemeContext";
 import { tokens as staticTokens } from "../utils/design";
-export declare const createCommonInputTokens: (tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens, typographyStyles: Record<string, TextStyle>) => Record<string, ViewStyle | TextStyle>;
+export declare const createCommonInputTokens: (tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens) => Record<string, ViewStyle | TextStyle>;
 /**
  * @deprecated Use useCommonInputStyles instead
  */
 export declare const commonInputStyles: Record<string, ViewStyle | TextStyle>;
+export declare const getCommonInputStyles: (tokens: AtlantisThemeContextValue["tokens"]) => Record<string, ViewStyle | TextStyle>;
 export declare const useCommonInputStyles: () => Record<string, ViewStyle | TextStyle>;

package/dist/types/src/InputFieldWrapper/index.d.ts

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

package/dist/types/src/Menu/components/Overlay/Overlay.style.d.ts

@@ -1,12 +1,12 @@
 export declare const useStyles: () => {
     overlay: {
-        position: "absolute";
-        top: number;
-        left: number;
-        right: number;
-        bottom: number;
         backgroundColor: string;
         opacity: number;
         height: number;
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
     };
 };

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

@@ -1,13 +1,6 @@
 export declare const useStyles: () => {
     container: import("react-native").ViewStyle;
-    input: {
-        flexDirection: "row";
-        flexGrow: number;
-        paddingTop: number;
-        minHeight: number;
-        minWidth: "100%";
-        paddingRight: number;
-    };
+    input: import("react-native").ViewStyle;
     value: {
         flexGrow: number;
         flexShrink: number;

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

@@ -2,9 +2,9 @@ import { TextStyle } from "react-native";
 import { tokens as staticTokens } from "../utils/design";
 import { AtlantisThemeContextValue } from "../AtlantisThemeContext";
 /**
- * Reusable typography tokens to ensure consistency for any client facing texts.
+ * Reusable typography styles to ensure consistency for any client facing texts.
  */
-export declare const createTypographyTokens: (tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens) => {
+export declare const getTypographyStyles: (tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens) => {
     [index: string]: TextStyle;
 };
 /**

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

@@ -1,5 +1,5 @@
 export { Typography } from "./Typography";
 export type { FontFamily, FontStyle, FontWeight, BaseWeight, DisplayWeight, BaseStyle, DisplayStyle, TextColor, TextTransform, TextSize, TextAlign, LineHeight, LetterSpacing, TextAccessibilityRole, TextVariation, TypographyProps, TruncateLength, } from "./Typography";
-export { useTypographyStyles } from "./Typography.style";
+export { getTypographyStyles, useTypographyStyles } from "./Typography.style";
 export { typographyStyles } from "./Typography.style";
 export { TypographyGestureDetector } from "./TypographyGestureDetector";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.76.1-JOB-116234-63c4467.27+63c44675",
+  "version": "0.76.1-JOB-116234-6cadae0.33+6cadae01",
   "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": "63c446753585b99a48ea4782613671ca6ff3c8b1"
+  "gitHead": "6cadae0138cf0633adc31d349b1f03dc50776679"
 }

package/src/AtlantisThemeContext/buildThemedStyles.test.tsx

@@ -47,32 +47,6 @@ describe("buildThemedStyles", () => {
     expect(result.current).toBe(initialResult);
   });
 
-  it("creates styles with dependent hooks", () => {
-    const useDependentStyles = () => ({
-      text: { color: "red" },
-    });
-
-    const useTestStyles = () => {
-      const dependentStyles = useDependentStyles();
-
-      return buildThemedStyles(tokens => ({
-        container: {
-          ...dependentStyles.text,
-          padding: tokens["space-base"],
-        },
-      }))();
-    };
-
-    const { result } = renderHook(() => useTestStyles(), { wrapper });
-
-    expect(result.current).toEqual({
-      container: {
-        color: "red",
-        padding: expect.any(Number),
-      },
-    });
-  });
-
   it("handles empty style objects", () => {
     const useTestStyles = buildThemedStyles(() => ({}));
 

package/src/BottomSheet/BottomSheet.style.ts

@@ -1,11 +1,11 @@
 import { Dimensions, StyleSheet } from "react-native";
-import { tokens as staticTokens } from "../utils/design";
 import { buildThemedStyles } from "../AtlantisThemeContext";
 
 const { height } = Dimensions.get("window");
-const modalBorderRadius = staticTokens["radius-larger"];
 
 export const useStyles = buildThemedStyles(tokens => {
+  const modalBorderRadius = tokens["radius-larger"];
+
   return {
     overlayModalize: {
       backgroundColor: "transparent",

package/src/Button/Button.style.ts

@@ -35,7 +35,7 @@ export const useStyles = buildThemedStyles(tokens => {
 
     base: {
       minHeight: baseButtonHeight,
-      // paddingHorizontal: tokens["space-base"],
+      paddingHorizontal: tokens["space-base"],
     },
 
     small: {

package/src/Checkbox/Checkbox.style.ts

@@ -1,10 +1,8 @@
-import { tokens as staticTokens } from "../utils/design";
 import { buildThemedStyles } from "../AtlantisThemeContext";
 
-const checkboxDimensions =
-  staticTokens["space-large"] + staticTokens["space-smaller"];
-
 export const useStyles = buildThemedStyles(tokens => {
+  const checkboxDimensions = tokens["space-large"] + tokens["space-smaller"];
+
   return {
     container: {
       width: "100%",

package/src/Chip/Chip.style.ts

@@ -1,9 +1,8 @@
-import { tokens as staticTokens } from "../utils/design";
 import { buildThemedStyles } from "../AtlantisThemeContext";
 
-const chipHeight = staticTokens["space-larger"] + staticTokens["space-small"];
-
 export const useStyles = buildThemedStyles(tokens => {
+  const chipHeight = tokens["space-larger"] + tokens["space-small"];
+
   return {
     container: {
       alignItems: "center",

package/src/ContentOverlay/ContentOverlay.style.ts

@@ -1,10 +1,9 @@
-import { tokens as staticTokens } from "../utils/design";
 import { buildThemedStyles } from "../AtlantisThemeContext";
 
-const modalBorderRadius = staticTokens["radius-larger"];
-const titleOffsetFromHandle = staticTokens["space-base"];
-
 export const useStyles = buildThemedStyles(tokens => {
+  const modalBorderRadius = tokens["radius-larger"];
+  const titleOffsetFromHandle = tokens["space-base"];
+
   return {
     handle: {
       width: tokens["space-largest"],

package/src/InputFieldWrapper/CommonInputStyles.style.ts

@@ -3,65 +3,64 @@ import {
   AtlantisThemeContextValue,
   buildThemedStyles,
 } from "../AtlantisThemeContext";
-import {
-  // eslint-disable-next-line import/no-deprecated
-  typographyStyles as staticTypographyStyles,
-  useTypographyStyles,
-} from "../Typography";
+import { getTypographyStyles } from "../Typography";
 import { tokens as staticTokens } from "../utils/design";
 
 export const createCommonInputTokens = (
   tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens,
-  typographyStyles: Record<string, TextStyle>,
-): Record<string, ViewStyle | TextStyle> => ({
-  input: {
-    width: "100%" as const,
-    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,
-  },
+): Record<string, ViewStyle | TextStyle> => {
+  const typographyStyles = getTypographyStyles(tokens);
 
-  inputEmpty: {
-    paddingTop: 0,
-  },
+  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,
+    },
 
-  inputDisabled: {
-    color: typographyStyles.disabled.color,
-  },
+    inputEmpty: {
+      paddingTop: 0,
+    },
 
-  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"],
-  },
-});
+    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(
-  // eslint-disable-next-line import/no-deprecated
-  createCommonInputTokens(staticTokens, staticTypographyStyles),
+  createCommonInputTokens(staticTokens),
 );
 
-export const useCommonInputStyles = () => {
-  const typographyStyles = useTypographyStyles();
-  const themedStyles = buildThemedStyles(tokens =>
-    createCommonInputTokens(tokens, typographyStyles),
-  )();
-
-  return themedStyles;
+export const getCommonInputStyles = (
+  tokens: AtlantisThemeContextValue["tokens"],
+) => {
+  return createCommonInputTokens(tokens);
 };
+
+export const useCommonInputStyles = buildThemedStyles(tokens => {
+  return getCommonInputStyles(tokens);
+});

package/src/InputFieldWrapper/InputFieldWrapper.style.ts

@@ -1,19 +1,20 @@
 import { StyleSheet } from "react-native";
-import { useCommonInputStyles } from "./CommonInputStyles.style";
+import { getCommonInputStyles } from "./CommonInputStyles.style";
 import { buildThemedStyles } from "../AtlantisThemeContext";
-import { useTypographyStyles } from "../Typography";
+import { getTypographyStyles } from "../Typography";
 
-export const useStyles = () => {
-  const commonInputStyles = useCommonInputStyles();
-  const typographyStyles = useTypographyStyles();
+export const useStyles = buildThemedStyles(tokens => {
+  const commonInputStyles = getCommonInputStyles(tokens);
+  const typographyStyles = getTypographyStyles(tokens);
 
-  return buildThemedStyles(tokens => ({
+  return {
     container: StyleSheet.flatten([
       commonInputStyles.container,
       {
         flexDirection: "column",
       },
     ]),
+
     field: {
       flexDirection: "row",
       alignItems: "center",
@@ -141,5 +142,5 @@ export const useStyles = () => {
       paddingTop: tokens["space-base"] - tokens["space-smaller"],
       bottom: tokens["space-smaller"],
     },
-  }))();
-};
+  };
+});

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

@@ -167,8 +167,6 @@ 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/index.ts

@@ -1,3 +1,6 @@
-export { useCommonInputStyles } 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,10 +1,10 @@
 import { buildThemedStyles } from "../AtlantisThemeContext";
-import { useTypographyStyles } from "../Typography";
+import { getTypographyStyles } from "../Typography";
 
-export const useStyles = () => {
-  const typographyStyles = useTypographyStyles();
+export const useStyles = buildThemedStyles(tokens => {
+  const typographyStyles = getTypographyStyles(tokens);
 
-  return buildThemedStyles(tokens => ({
+  return {
     pressable: {
       flex: 1,
     },
@@ -28,5 +28,5 @@ export const useStyles = () => {
     inputInvalid: {
       borderColor: tokens["color-critical"],
     },
-  }))();
-};
+  };
+});

package/src/InputText/InputText.style.ts

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

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

@@ -1,4 +1,4 @@
-import { Dimensions } from "react-native";
+import { Dimensions, StyleSheet } from "react-native";
 import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
 const { height } = Dimensions.get("window");
@@ -6,11 +6,7 @@ const { height } = Dimensions.get("window");
 export const useStyles = buildThemedStyles(tokens => {
   return {
     overlay: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
+      ...StyleSheet.absoluteFillObject,
       backgroundColor: tokens["color-overlay"],
       opacity: 0,
       height,

package/src/Select/Select.style.ts

@@ -1,11 +1,11 @@
 import { StyleSheet } from "react-native";
-import { useCommonInputStyles } from "../InputFieldWrapper";
+import { getCommonInputStyles } from "../InputFieldWrapper";
 import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const useStyles = () => {
-  const commonInputStyles = useCommonInputStyles();
+export const useStyles = buildThemedStyles(tokens => {
+  const commonInputStyles = getCommonInputStyles(tokens);
 
-  return buildThemedStyles(tokens => ({
+  return {
     container: StyleSheet.flatten([
       commonInputStyles.container,
       {
@@ -17,14 +17,17 @@ export const useStyles = () => {
       },
     ]),
 
-    input: {
-      flexDirection: "row",
-      flexGrow: 0,
-      paddingTop: tokens["space-smaller"],
-      minHeight: 0,
-      minWidth: "100%",
-      paddingRight: tokens["space-small"],
-    },
+    input: StyleSheet.flatten([
+      commonInputStyles.input,
+      {
+        flexDirection: "row",
+        flexGrow: 0,
+        paddingTop: tokens["space-smaller"],
+        minHeight: 0,
+        minWidth: "100%",
+        paddingRight: tokens["space-small"],
+      },
+    ]),
 
     value: {
       flexGrow: 1,
@@ -54,5 +57,5 @@ export const useStyles = () => {
       paddingTop: tokens["space-smaller"],
       flexDirection: "row",
     },
-  }))();
-};
+  };
+});

package/src/Typography/Typography.style.ts

@@ -82,9 +82,9 @@ const fonts = Platform.select({
 });
 
 /**
- * Reusable typography tokens to ensure consistency for any client facing texts.
+ * Reusable typography styles to ensure consistency for any client facing texts.
  */
-export const createTypographyTokens = (
+export const getTypographyStyles = (
   tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens,
 ): { [index: string]: TextStyle } => ({
   // This follows a pattern of
@@ -623,7 +623,7 @@ export const createTypographyTokens = (
  * @deprecated Use useTypographyStyles instead
  */
 export const typographyStyles: Record<string, TextStyle> = StyleSheet.create(
-  createTypographyTokens(staticTokens),
+  getTypographyStyles(staticTokens),
 );
 
-export const useTypographyStyles = buildThemedStyles(createTypographyTokens);
+export const useTypographyStyles = buildThemedStyles(getTypographyStyles);

package/src/Typography/Typography.tsx

@@ -152,7 +152,7 @@ function InternalTypography<T extends FontFamily = "base">({
   maxFontScaleSize,
   adjustsFontSizeToFit = false,
   lineHeight,
-  letterSpacing,
+  letterSpacing = "base",
   reverseTheme = false,
   hideFromScreenReader = false,
   accessibilityRole = "text",
@@ -234,7 +234,7 @@ function getFontStyle(
   fontFamily: FontFamily = "base",
   fontStyle: FontStyle = "regular",
   fontWeight: FontWeight = "regular",
-  styles: Record<string, TextStyle>,
+  styles: ReturnType<typeof useTypographyStyles>,
 ) {
   const defaultBaseFontStyling = styles.baseRegularRegular;
   const defaultDisplayFontStyling = styles.displayRegularBold;
@@ -302,7 +302,7 @@ function getSizeAndHeightStyle(
 }
 
 function getLetterSpacingStyle(
-  letterSpacing: LetterSpacing = "base",
+  letterSpacing: LetterSpacing,
   styles: Record<string, TextStyle>,
 ) {
   return styles[`${letterSpacing}LetterSpacing`];

package/src/Typography/index.ts

@@ -18,6 +18,6 @@ export type {
   TypographyProps,
   TruncateLength,
 } from "./Typography";
-export { useTypographyStyles } from "./Typography.style";
+export { getTypographyStyles, useTypographyStyles } from "./Typography.style";
 export { typographyStyles } from "./Typography.style";
 export { TypographyGestureDetector } from "./TypographyGestureDetector";