@jobber/components-native 0.77.0 → 0.78.0

package/src/Toast/Toast.styles.ts

@@ -1,31 +1,32 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    paddingHorizontal: tokens["space-base"],
-    paddingBottom: tokens["space-base"],
-  },
-  toast: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    width: "100%",
-    maxWidth: 540,
-    paddingVertical: tokens["space-small"],
-    backgroundColor: tokens["color-blue"],
-    borderRadius: 6,
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.1,
-    shadowRadius: 6,
-  },
-  toastMessage: {
-    justifyContent: "center",
-    paddingLeft: tokens["space-base"],
-    paddingVertical: tokens["space-small"],
-    flexShrink: 1,
-  },
-  toastIcon: {
-    justifyContent: "center",
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      flexDirection: "row",
+      paddingHorizontal: tokens["space-base"],
+      paddingBottom: tokens["space-base"],
+    },
+    toast: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      width: "100%",
+      maxWidth: 540,
+      paddingVertical: tokens["space-small"],
+      backgroundColor: tokens["color-blue"],
+      borderRadius: 6,
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0.1,
+      shadowRadius: 6,
+    },
+    toastMessage: {
+      justifyContent: "center",
+      paddingLeft: tokens["space-base"],
+      paddingVertical: tokens["space-small"],
+      flexShrink: 1,
+    },
+    toastIcon: {
+      justifyContent: "center",
+    },
+  };
 });

package/src/Toast/Toast.tsx

@@ -6,11 +6,12 @@ import Toast, {
 } from "react-native-toast-message";
 import { AccessibilityInfo, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { styles } from "./Toast.styles";
-import { tokens } from "../utils/design";
+import { useStyles } from "./Toast.styles";
 import { Text } from "../Text";
 import { IconButton } from "../IconButton";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
+import { tokens as staticTokens } from "../utils/design";
 
 const MAX_TOAST_MESSAGE_LENGTH = 60;
 const ANNOUNCEMENT_DELAY = 100;
@@ -18,7 +19,9 @@ const ANNOUNCEMENT_DELAY = 100;
 function DefaultToast({ text1 }: ToastConfigParams<string>): JSX.Element {
   const { bottom } = useSafeAreaInsets();
   const { t } = useAtlantisI18n();
+  const styles = useStyles();
   const toastContainerStyles = [styles.container, { paddingBottom: bottom }];
+  const { tokens } = useAtlantisTheme();
 
   return (
     <View style={toastContainerStyles}>
@@ -113,12 +116,13 @@ export function showToast({
 }
 
 function getBottomTabsOffset(bottomTabsVisible: boolean) {
-  const navBarHeight = tokens["space-largest"] + tokens["space-small"];
-  const navBarBorderTopWidth = tokens["space-minuscule"];
+  const navBarHeight =
+    staticTokens["space-largest"] + staticTokens["space-small"];
+  const navBarBorderTopWidth = staticTokens["space-minuscule"];
 
   if (bottomTabsVisible) {
-    return navBarHeight + navBarBorderTopWidth + tokens["space-base"];
+    return navBarHeight + navBarBorderTopWidth + staticTokens["space-base"];
   }
 
-  return tokens["space-base"];
+  return staticTokens["space-base"];
 }

package/src/Typography/Typography.style.ts

@@ -1,15 +1,20 @@
 import { Platform, StyleSheet, TextStyle } from "react-native";
 import { webFonts } from "./webFonts";
-import { tokens } from "../utils/design";
-
-const extravagantLineHeight = tokens["typography--lineHeight-extravagant"];
-const jumboLineHeight = tokens["typography--lineHeight-jumbo"];
-const largestLineHeight = tokens["typography--lineHeight-largest"];
-const largerLineHeight = tokens["typography--lineHeight-larger"];
-const largeLineHeight = tokens["typography--lineHeight-large"];
-const baseLineHeight = tokens["typography--lineHeight-base"];
-const tightLineHeight = tokens["typography--lineHeight-tight"];
-const minusculeLineHeight = tokens["typography--lineHeight-minuscule"];
+import { tokens as staticTokens } from "../utils/design";
+import {
+  AtlantisThemeContextValue,
+  buildThemedStyles,
+} from "../AtlantisThemeContext";
+
+const extravagantLineHeight =
+  staticTokens["typography--lineHeight-extravagant"];
+const jumboLineHeight = staticTokens["typography--lineHeight-jumbo"];
+const largestLineHeight = staticTokens["typography--lineHeight-largest"];
+const largerLineHeight = staticTokens["typography--lineHeight-larger"];
+const largeLineHeight = staticTokens["typography--lineHeight-large"];
+const baseLineHeight = staticTokens["typography--lineHeight-base"];
+const tightLineHeight = staticTokens["typography--lineHeight-tight"];
+const minusculeLineHeight = staticTokens["typography--lineHeight-minuscule"];
 
 const deviceFonts = {
   baseRegularRegular: {
@@ -77,9 +82,11 @@ 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 typographyTokens: { [index: string]: TextStyle } = {
+export const getTypographyStyles = (
+  tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens,
+): { [index: string]: TextStyle } => ({
   // This follows a pattern of
   // { fontFamily }{ fontStyle }{ fontWeight }
   ...fonts,
@@ -610,17 +617,13 @@ export const typographyTokens: { [index: string]: TextStyle } = {
   strikeThrough: {
     textDecorationLine: "line-through",
   },
-};
+});
 
 /**
- * `StyleSheet` for Typography.tsx.
- *
- * If you find yourself needing to use what's inside this object on files other
- * than `<Typography />`, please import from `@jobber/components-native` instead.
- *
- * ```
- * import { typographyStyles } from "@jobber/components-native"
- * ```
+ * @deprecated Use useTypographyStyles instead
  */
-export const typographyStyles: { [index: string]: TextStyle } =
-  StyleSheet.create(typographyTokens);
+export const typographyStyles: Record<string, TextStyle> = StyleSheet.create(
+  getTypographyStyles(staticTokens),
+);
+
+export const useTypographyStyles = buildThemedStyles(getTypographyStyles);

package/src/Typography/Typography.tsx

@@ -10,9 +10,9 @@ import {
   ViewStyle,
 } from "react-native";
 import { TypographyGestureDetector } from "./TypographyGestureDetector";
-import { typographyStyles as styles } from "./Typography.style";
-import { tokens } from "../utils/design";
+import { useTypographyStyles } from "./Typography.style";
 import { capitalize } from "../utils/intl";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export interface TypographyProps<T extends FontFamily>
   extends Pick<TextProps, "selectable"> {
@@ -152,7 +152,7 @@ function InternalTypography<T extends FontFamily = "base">({
   maxFontScaleSize,
   adjustsFontSizeToFit = false,
   lineHeight,
-  letterSpacing,
+  letterSpacing = "base",
   reverseTheme = false,
   hideFromScreenReader = false,
   accessibilityRole = "text",
@@ -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) {
@@ -198,6 +199,8 @@ function InternalTypography<T extends FontFamily = "base">({
       }
     : { accessibilityRole };
 
+  const { tokens } = useAtlantisTheme();
+
   return (
     <TypographyGestureDetector>
       <Text
@@ -231,6 +234,7 @@ function getFontStyle(
   fontFamily: FontFamily = "base",
   fontStyle: FontStyle = "regular",
   fontWeight: FontWeight = "regular",
+  styles: ReturnType<typeof useTypographyStyles>,
 ) {
   const defaultBaseFontStyling = styles.baseRegularRegular;
   const defaultDisplayFontStyling = styles.displayRegularBold;
@@ -261,7 +265,11 @@ function getTransformedText(text?: string, transform?: TextTransform) {
   }
 }
 
-function getColorStyle(color?: TextColor, reverseTheme?: boolean) {
+function getColorStyle(
+  styles: ReturnType<typeof useTypographyStyles>,
+  color?: TextColor,
+  reverseTheme?: boolean,
+) {
   if (color === "default" || !color) {
     return styles.greyBlue;
   }
@@ -271,6 +279,7 @@ function getColorStyle(color?: TextColor, reverseTheme?: boolean) {
 }
 
 function getAlignStyle(
+  styles: ReturnType<typeof useTypographyStyles>,
   alignStyle: TextAlign = I18nManager.isRTL ? "end" : "start",
 ) {
   return styles[`${alignStyle}Align`];
@@ -278,6 +287,7 @@ function getAlignStyle(
 
 function getSizeAndHeightStyle(
   textSize: TextSize,
+  styles: ReturnType<typeof useTypographyStyles>,
   lineHeightOverwrite?: LineHeight,
 ) {
   const fontSize = styles[`${textSize}Size`];
@@ -291,7 +301,10 @@ function getSizeAndHeightStyle(
   return fontSize;
 }
 
-function getLetterSpacingStyle(letterSpacing: LetterSpacing = "base") {
+function getLetterSpacingStyle(
+  letterSpacing: LetterSpacing,
+  styles: ReturnType<typeof useTypographyStyles>,
+) {
   return styles[`${letterSpacing}LetterSpacing`];
 }
 

package/src/Typography/index.ts

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

package/dist/src/InputText/context/InputAccessory.style.js

@@ -1,16 +0,0 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../utils/design";
-export const styles = StyleSheet.create({
-    container: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingHorizontal: tokens["space-small"],
-        backgroundColor: tokens["color-surface--background"],
-        borderTopWidth: tokens["space-minuscule"],
-        borderTopColor: tokens["color-border"],
-    },
-    buttonContainer: {
-        flexDirection: "row",
-    },
-});

package/dist/types/src/InputText/context/InputAccessory.style.d.ts

@@ -1,14 +0,0 @@
-export declare const styles: {
-    container: {
-        flexDirection: "row";
-        justifyContent: "space-between";
-        alignItems: "center";
-        paddingHorizontal: number;
-        backgroundColor: string;
-        borderTopWidth: number;
-        borderTopColor: string;
-    };
-    buttonContainer: {
-        flexDirection: "row";
-    };
-};

package/src/InputText/context/InputAccessory.style.ts

@@ -1,17 +0,0 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../utils/design";
-
-export const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingHorizontal: tokens["space-small"],
-    backgroundColor: tokens["color-surface--background"],
-    borderTopWidth: tokens["space-minuscule"],
-    borderTopColor: tokens["color-border"],
-  },
-  buttonContainer: {
-    flexDirection: "row",
-  },
-});