@jobber/components-native 0.75.3-TAYLORtes-c9be7a8.250 → 0.75.3-cleanup-fo-ffcd368.137

package/dist/src/ThumbnailList/ThumbnailList.js

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import isNil from "lodash/isNil";
 import { RowCount } from "./types";
-import { styles } from "./ThumbnailList.style";
+import { useStyles } from "./ThumbnailList.style";
 import { FormatFile } from "../FormatFile";
 function isImage(file) {
     return !!file.contentType && file.contentType.includes("image/");
@@ -17,6 +17,7 @@ export const filterImages = (files) => {
 };
 export function ThumbnailList({ files, rowCount = RowCount.TwoRows, handleOpenFile, createThumbnail, }) {
     const imageList = filterImages(files);
+    const styles = useStyles();
     return (React.createElement(View, { style: [
             styles.list,
             rowCount === RowCount.ThreeRows && styles.maxDimensionsForThreeRows,

package/dist/src/ThumbnailList/ThumbnailList.style.js

@@ -1,49 +1,50 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    list: {
-        display: "flex",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 2,
-        overflow: "hidden",
-        marginTop: tokens["space-smaller"],
-    },
-    maxDimensionsForThreeRows: {
-        maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 3,
-    },
-    thumbnail: {
-        width: tokens["space-extravagant"],
-        height: tokens["space-extravagant"],
-        marginRight: tokens["space-smaller"],
-        marginBottom: tokens["space-smaller"],
-        borderRadius: tokens["radius-base"],
-        borderColor: tokens["color-border"],
-        borderWidth: tokens["border-base"],
-    },
-    centerThumbnailImage: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    dimensionsThumbnailImage: {
-        width: tokens["space-extravagant"],
-        height: tokens["space-extravagant"],
-    },
-    thumbnailName: {
-        position: "absolute",
-        right: 0,
-        bottom: 0,
-        left: 0,
-        paddingHorizontal: tokens["space-smaller"],
-        paddingVertical: tokens["space-smallest"],
-        borderTopColor: tokens["color-border"],
-        borderTopWidth: tokens["space-minuscule"],
-    },
-    thumbnailIcon: {
-        top: tokens["space-smaller"],
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        list: {
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: "wrap",
+            maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 2,
+            overflow: "hidden",
+            marginTop: tokens["space-smaller"],
+        },
+        maxDimensionsForThreeRows: {
+            maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 3,
+        },
+        thumbnail: {
+            width: tokens["space-extravagant"],
+            height: tokens["space-extravagant"],
+            marginRight: tokens["space-smaller"],
+            marginBottom: tokens["space-smaller"],
+            borderRadius: tokens["radius-base"],
+            borderColor: tokens["color-border"],
+            borderWidth: tokens["border-base"],
+        },
+        centerThumbnailImage: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        },
+        dimensionsThumbnailImage: {
+            width: tokens["space-extravagant"],
+            height: tokens["space-extravagant"],
+        },
+        thumbnailName: {
+            position: "absolute",
+            right: 0,
+            bottom: 0,
+            left: 0,
+            paddingHorizontal: tokens["space-smaller"],
+            paddingVertical: tokens["space-smallest"],
+            borderTopColor: tokens["color-border"],
+            borderTopWidth: tokens["space-minuscule"],
+        },
+        thumbnailIcon: {
+            top: tokens["space-smaller"],
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        },
+    };
 });

package/dist/src/Toast/Toast.js

@@ -2,17 +2,20 @@ import React from "react";
 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;
 function DefaultToast({ text1 }) {
     const { bottom } = useSafeAreaInsets();
     const { t } = useAtlantisI18n();
+    const styles = useStyles();
     const toastContainerStyles = [styles.container, { paddingBottom: bottom }];
+    const { tokens } = useAtlantisTheme();
     return (React.createElement(View, { style: toastContainerStyles },
         React.createElement(View, { style: styles.toast },
             React.createElement(TouchableOpacity, { style: styles.toastMessage, accessibilityRole: "alert" },
@@ -54,10 +57,10 @@ export function showToast({ message, bottomTabsVisible, position = "bottom", })
     });
 }
 function getBottomTabsOffset(bottomTabsVisible) {
-    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/dist/src/Toast/Toast.styles.js

@@ -1,30 +1,31 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-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",
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+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/dist/src/Typography/Typography.js

@@ -1,9 +1,9 @@
 import React from "react";
 import { I18nManager, StyleSheet, Text, } 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";
 const maxNumberOfLines = {
     single: 1,
     small: 2,
@@ -14,14 +14,15 @@ const maxNumberOfLines = {
 };
 export const Typography = React.memo(InternalTypography);
 // eslint-disable-next-line max-statements
-function InternalTypography({ fontFamily, fontStyle, fontWeight, transform, color, align, size = "default", children, maxLines = "unlimited", allowFontScaling = true, maxFontScaleSize, adjustsFontSizeToFit = false, lineHeight, letterSpacing, reverseTheme = false, hideFromScreenReader = false, accessibilityRole = "text", strikeThrough = false, underline, selectable = true, }) {
-    const sizeAndHeight = getSizeAndHeightStyle(size, lineHeight);
+function InternalTypography({ fontFamily, fontStyle, fontWeight, transform, color, align, size = "default", children, maxLines = "unlimited", allowFontScaling = true, maxFontScaleSize, adjustsFontSizeToFit = false, lineHeight, letterSpacing = "base", reverseTheme = false, hideFromScreenReader = false, accessibilityRole = "text", strikeThrough = false, underline, UNSAFE_style, selectable = true, }) {
+    const styles = useTypographyStyles();
+    const sizeAndHeight = getSizeAndHeightStyle(size, styles, lineHeight);
     const style = [
-        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) {
         style.push(styles.strikeThrough);
@@ -33,6 +34,9 @@ function InternalTypography({ fontFamily, fontStyle, fontWeight, transform, colo
         const underlineTextStyle = { textDecorationStyle: underline };
         style.push(underlineTextStyle, styles.underline);
     }
+    if (UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.textStyle) {
+        style.push(UNSAFE_style.textStyle);
+    }
     const numberOfLinesForNativeText = maxNumberOfLines[maxLines];
     const text = getTransformedText(children, transform);
     const accessibilityProps = hideFromScreenReader
@@ -42,6 +46,7 @@ function InternalTypography({ fontFamily, fontStyle, fontWeight, transform, colo
             importantForAccessibility: "no-hide-descendants",
         }
         : { accessibilityRole };
+    const { tokens } = useAtlantisTheme();
     return (React.createElement(TypographyGestureDetector, null,
         React.createElement(Text, Object.assign({ allowFontScaling,
             adjustsFontSizeToFit,
@@ -53,7 +58,7 @@ function getScaleMultiplier(maxFontScaleSize = 0, size = 1) {
         return undefined;
     return maxFontScaleSize / size;
 }
-function getFontStyle(fontFamily = "base", fontStyle = "regular", fontWeight = "regular") {
+function getFontStyle(fontFamily = "base", fontStyle = "regular", fontWeight = "regular", styles) {
     const defaultBaseFontStyling = styles.baseRegularRegular;
     const defaultDisplayFontStyling = styles.displayRegularBold;
     const styleKey = `${fontFamily}${capitalize(fontStyle)}${capitalize(fontWeight)}`;
@@ -79,17 +84,17 @@ function getTransformedText(text, transform) {
             return text;
     }
 }
-function getColorStyle(color, reverseTheme) {
+function getColorStyle(styles, color, reverseTheme) {
     if (color === "default" || !color) {
         return styles.greyBlue;
     }
     const colorStyleKey = `${color}${reverseTheme ? "Reverse" : ""}`;
     return styles[`${colorStyleKey}`];
 }
-function getAlignStyle(alignStyle = I18nManager.isRTL ? "end" : "start") {
+function getAlignStyle(styles, alignStyle = I18nManager.isRTL ? "end" : "start") {
     return styles[`${alignStyle}Align`];
 }
-function getSizeAndHeightStyle(textSize, lineHeightOverwrite) {
+function getSizeAndHeightStyle(textSize, styles, lineHeightOverwrite) {
     const fontSize = styles[`${textSize}Size`];
     if (lineHeightOverwrite) {
         const lineHeight = styles[`${lineHeightOverwrite}LineHeight`];
@@ -97,6 +102,6 @@ function getSizeAndHeightStyle(textSize, lineHeightOverwrite) {
     }
     return fontSize;
 }
-function getLetterSpacingStyle(letterSpacing = "base") {
+function getLetterSpacingStyle(letterSpacing, styles) {
     return styles[`${letterSpacing}LetterSpacing`];
 }

package/dist/src/Typography/Typography.style.js

@@ -1,14 +1,15 @@
 import { Platform, StyleSheet } 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 { 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: {
         fontFamily: "inter-regular",
@@ -61,9 +62,9 @@ const fonts = Platform.select({
     default: deviceFonts,
 });
 /**
- * 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 = Object.assign(Object.assign({}, fonts), { italic: {
+export const getTypographyStyles = (tokens) => (Object.assign(Object.assign({}, fonts), { italic: {
         fontStyle: "italic",
     }, underline: {
         textDecorationColor: tokens["color-text--secondary"],
@@ -351,15 +352,9 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic
         letterSpacing: tokens["typography--letterSpacing-loose"],
     }, 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 = StyleSheet.create(typographyTokens);
+export const typographyStyles = StyleSheet.create(getTypographyStyles(staticTokens));
+export const useTypographyStyles = buildThemedStyles(getTypographyStyles);

package/dist/src/Typography/index.js

@@ -1,3 +1,4 @@
 export { Typography } from "./Typography";
+export { getTypographyStyles, useTypographyStyles } from "./Typography.style";
 export { typographyStyles } from "./Typography.style";
 export { TypographyGestureDetector } from "./TypographyGestureDetector";

package/dist/src/index.js

@@ -2,6 +2,7 @@ export * from "./ActionItem";
 export * from "./ActionLabel";
 export * from "./ActivityIndicator";
 export * from "./AtlantisContext";
+export * from "./AtlantisThemeContext";
 export * from "./AutoLink";
 export * from "./Banner";
 export * from "./BottomSheet";

package/dist/src/utils/design/index.js

@@ -1,5 +1,10 @@
 import { Platform } from "react-native";
 import { androidTokens, iosTokens } from "@jobber/design";
+/**
+ * These design tokens don't react to theme changes. Only use these if you need to access
+ * tokens that are not affected by the current theme, otherwise you should be using our
+ * useAtlantisTheme() hook to access the current theme's tokens.
+ */
 export const tokens = Platform.select({
     ios: () => iosTokens,
     android: () => androidTokens,

package/dist/src/utils/meta/meta.json

@@ -8,6 +8,7 @@
         "AtlantisContext.Provider",
         "AtlantisFormContext.Consumer",
         "AtlantisFormContext.Provider",
+        "AtlantisThemeContextProvider",
         "AutoLink",
         "Banner",
         "BottomSheet",