@jobber/components-native 0.76.0 → 0.76.1-JOB-116234-314c5ff.22

package/src/Switch/Switch.styles.ts

@@ -1,21 +1,22 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: {
-    marginTop: tokens["space-base"],
-    marginBottom: tokens["space-base"],
-  },
-  row: {
-    flexDirection: "row",
-    width: "100%",
-  },
-  label: {
-    flex: 1,
-    justifyContent: "center",
-    marginRight: tokens["space-small"],
-  },
-  description: {
-    marginTop: tokens["space-smaller"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      marginTop: tokens["space-base"],
+      marginBottom: tokens["space-base"],
+    },
+    row: {
+      flexDirection: "row",
+      width: "100%",
+    },
+    label: {
+      flex: 1,
+      justifyContent: "center",
+      marginRight: tokens["space-small"],
+    },
+    description: {
+      marginTop: tokens["space-smaller"],
+    },
+  };
 });

package/src/Switch/Switch.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { View } from "react-native";
 import { XOR } from "ts-xor";
 import { BaseSwitch, BaseSwitchProps } from "./components/BaseSwitch";
-import { styles } from "./Switch.styles";
+import { useStyles } from "./Switch.styles";
 import { Text } from "../Text";
 
 interface WithLabelProps extends BaseSwitchProps {
@@ -26,6 +26,7 @@ export function Switch(props: SwitchProps): JSX.Element {
   };
 
   const [labelWidth, setLabelWidth] = useState<number | undefined>();
+  const styles = useStyles();
 
   return (
     <View style={styles.container}>

package/src/Switch/components/BaseSwitch/BaseSwitch.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Platform } from "react-native";
 import { Switch } from "react-native-gesture-handler";
 import { useFormController } from "../../../hooks";
-import { tokens } from "../../../utils/design";
+import { useAtlantisTheme } from "../../../AtlantisThemeContext";
 
 export interface BaseSwitchProps {
   /**
@@ -51,6 +51,8 @@ export function BaseSwitch({
 
   const internalValue = value ?? field.value;
 
+  const { tokens } = useAtlantisTheme();
+
   function getThumbColor() {
     if (Platform.OS === "android") {
       if (disabled) {

package/src/Text/Text.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
-import { tokens } from "@jobber/design";
 import { Text } from ".";
+import { tokens } from "../utils/design";
 
 it("renders text with no additional props", () => {
   const text = render(<Text>Test Text</Text>);

package/src/Text/Text.tsx

@@ -90,7 +90,7 @@ export interface TextProps
   /**
    * **Use at your own risk:** Custom style for specific elements. This should only be used as a
    * **last resort**. Using this may result in unexpected side effects.
-   * More information [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
+   * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
    */
   readonly UNSAFE_style?: TypographyUnsafeStyle;
 }

package/src/TextList/TextList.style.ts

@@ -1,17 +1,18 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  details: {
-    width: "100%",
-    flexDirection: "column",
-  },
-  detail: {
-    flexDirection: "row",
-    paddingLeft: tokens["space-small"],
-  },
-  detailText: {
-    paddingLeft: tokens["space-small"],
-    flex: 1,
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    details: {
+      width: "100%",
+      flexDirection: "column",
+    },
+    detail: {
+      flexDirection: "row",
+      paddingLeft: tokens["space-small"],
+    },
+    detailText: {
+      paddingLeft: tokens["space-small"],
+      flex: 1,
+    },
+  };
 });

package/src/TextList/TextList.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./TextList.style";
+import { useStyles } from "./TextList.style";
 import { Content, Spacing } from "../Content";
 import { Text, TextLevel } from "../Text";
 
@@ -43,6 +43,8 @@ export function TextList({
   level = "text",
   spacing = "none",
 }: TextListProps): JSX.Element {
+  const styles = useStyles();
+
   return (
     <>
       {items && (

package/src/ThumbnailList/ThumbnailList.style.ts

@@ -1,50 +1,51 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-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",
-  },
+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/src/ThumbnailList/ThumbnailList.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import isNil from "lodash/isNil";
 import { RowCount, ThumbnailListProps } from "./types";
-import { styles } from "./ThumbnailList.style";
+import { useStyles } from "./ThumbnailList.style";
 import { File, FormatFile } from "../FormatFile";
 
 function isImage(file: File) {
@@ -26,6 +26,7 @@ export function ThumbnailList({
   createThumbnail,
 }: ThumbnailListProps): JSX.Element {
   const imageList = filterImages(files);
+  const styles = useStyles();
 
   return (
     <View

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: {
@@ -79,7 +84,9 @@ const fonts = Platform.select({
 /**
  * Reusable typography tokens to ensure consistency for any client facing texts.
  */
-export const typographyTokens: { [index: string]: TextStyle } = {
+export const createTypographyTokens = (
+  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 useCommonInputStyles instead
  */
-export const typographyStyles: { [index: string]: TextStyle } =
-  StyleSheet.create(typographyTokens);
+export const typographyStyles: Record<string, TextStyle> = StyleSheet.create(
+  createTypographyTokens(staticTokens),
+);
+
+export const useTypographyStyles = buildThemedStyles(createTypographyTokens);

package/src/Typography/Typography.tsx

@@ -11,8 +11,8 @@ import {
 } from "react-native";
 import { TypographyGestureDetector } from "./TypographyGestureDetector";
 import { typographyStyles as styles } from "./Typography.style";
-import { tokens } from "../utils/design";
 import { capitalize } from "../utils/intl";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export interface TypographyProps<T extends FontFamily>
   extends Pick<TextProps, "selectable"> {
@@ -198,6 +198,8 @@ function InternalTypography<T extends FontFamily = "base">({
       }
     : { accessibilityRole };
 
+  const { tokens } = useAtlantisTheme();
+
   return (
     <TypographyGestureDetector>
       <Text

package/src/Typography/index.ts

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

package/src/index.ts

@@ -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/src/utils/design/index.ts

@@ -1,6 +1,11 @@
 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: typeof iosTokens = Platform.select({
   ios: () => iosTokens,
   android: () => androidTokens,

package/src/utils/meta/meta.json

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

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",
-  },
-});