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

package/src/AtlantisThemeContext/index.ts

@@ -0,0 +1,10 @@
+export {
+  AtlantisThemeContextProvider,
+  useAtlantisTheme,
+} from "./AtlantisThemeContext";
+export {
+  Theme,
+  AtlantisThemeContextProviderProps,
+  AtlantisThemeContextValue,
+} from "./types";
+export { buildThemedStyles } from "./buildThemedStyles";

package/src/AtlantisThemeContext/types.ts

@@ -0,0 +1,33 @@
+import { iosTokens } from "@jobber/design";
+
+export interface AtlantisThemeContextValue {
+  /**
+   * The active theme.
+   */
+  readonly theme: Theme;
+
+  /**
+   * The design tokens for the current theme.
+   */
+  readonly tokens: typeof iosTokens;
+
+  /**
+   * Change the current theme globally.
+   */
+  readonly setTheme: (theme: Theme) => void;
+}
+
+export interface AtlantisThemeContextProviderProps {
+  /**
+   * The children to render.
+   */
+  readonly children: React.ReactNode;
+
+  /**
+   * Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain the same theme regardless of the rest of the application's theme.
+   * This is dangerous because the children in this provider will not be able to change the theme.
+   */
+  readonly dangerouslyOverrideTheme?: Theme;
+}
+
+export type Theme = "light" | "dark";

package/src/AutoLink/AutoLink.tsx

@@ -4,7 +4,7 @@ import { AutoLinkProps } from "./types";
 import { ComposeTextWithLinks } from "./components";
 import { useCreateLinkedText } from "./hooks/useCreateLinkedText";
 import { TypographyGestureDetector } from "../Typography";
-import { tokens } from "../utils/design";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export function AutoLink({
   children: text = "",
@@ -13,6 +13,7 @@ export function AutoLink({
   ...rest
 }: AutoLinkProps): JSX.Element {
   const { splitText, matches } = useCreateLinkedText({ text, ...rest });
+  const { tokens } = useAtlantisTheme();
 
   return (
     <TypographyGestureDetector>

package/src/Banner/Banner.style.ts

@@ -1,35 +1,36 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    borderColor: tokens["color-border"],
-    borderStyle: "solid",
-    borderBottomWidth: tokens["border-base"],
-    backgroundColor: tokens["color-surface"],
-  },
-  bannerContent: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    gap: tokens["space-small"] + tokens["space-smaller"],
-  },
-  contentContainer: {
-    flex: 1,
-  },
-  childrenContainer: {
-    marginTop: tokens["space-smallest"],
-  },
-  textContainer: {
-    marginTop: tokens["space-minuscule"],
-  },
-  fullWidth: {
-    width: "100%",
-  },
-  bannerChildrenContent: {
-    marginBottom: tokens["space-small"],
-  },
-  contentSpacing: {
-    gap: tokens["space-small"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      width: "100%",
+      borderColor: tokens["color-border"],
+      borderStyle: "solid",
+      borderBottomWidth: tokens["border-base"],
+      backgroundColor: tokens["color-surface"],
+    },
+    bannerContent: {
+      flexDirection: "row",
+      alignItems: "flex-start",
+      gap: tokens["space-small"] + tokens["space-smaller"],
+    },
+    contentContainer: {
+      flex: 1,
+    },
+    childrenContainer: {
+      marginTop: tokens["space-smallest"],
+    },
+    textContainer: {
+      marginTop: tokens["space-minuscule"],
+    },
+    fullWidth: {
+      width: "100%",
+    },
+    bannerChildrenContent: {
+      marginBottom: tokens["space-small"],
+    },
+    contentSpacing: {
+      gap: tokens["space-small"],
+    },
+  };
 });

package/src/Banner/Banner.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, ReactElement } from "react";
 import { Pressable, Text as RNText, View } from "react-native";
 import { IconNames } from "@jobber/design";
 import { BannerProps, BannerTypes } from "./types";
-import { styles } from "./Banner.style";
+import { useStyles } from "./Banner.style";
 import { BannerIcon } from "./components/BannerIcon/BannerIcon";
 import { Content } from "../Content";
 import { Text } from "../Text";
@@ -24,6 +24,8 @@ export function Banner({
     Boolean(React.Children.count(children) === 1 && !text && !details) ||
     Boolean(text && !details && !children);
 
+  const styles = useStyles();
+
   return (
     <Pressable
       style={[styles.container]}
@@ -35,7 +37,7 @@ export function Banner({
           {bannerIcon && <BannerIcon icon={bannerIcon} type={type} />}
           <View style={styles.contentContainer}>
             <View style={styles.childrenContainer}>
-              <WrappingElement shouldFlow={shouldFlow}>
+              <WrappingElement shouldFlow={shouldFlow} styles={styles}>
                 <BannerChildren>{children}</BannerChildren>
 
                 {text && <Text level="text">{text}</Text>}
@@ -70,8 +72,10 @@ function BannerChildren({ children }: PropsWithChildren): JSX.Element {
 function WrappingElement({
   shouldFlow,
   children,
+  styles,
 }: PropsWithChildren<{
   readonly shouldFlow: boolean;
+  readonly styles: ReturnType<typeof useStyles>;
 }>): ReactElement {
   if (shouldFlow) {
     return <RNText testID="ATL-Banner-RNText">{children}</RNText>;

package/src/Banner/components/BannerIcon/BannerIcon.style.ts

@@ -1,18 +1,19 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  bannerIcon: {
-    borderRadius: tokens["radius-circle"],
-    padding: tokens["space-smaller"],
-  },
-  error: {
-    backgroundColor: tokens["color-destructive"],
-  },
-  warning: {
-    backgroundColor: tokens["color-warning"],
-  },
-  notice: {
-    backgroundColor: tokens["color-informative"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    bannerIcon: {
+      borderRadius: tokens["radius-circle"],
+      padding: tokens["space-smaller"],
+    },
+    error: {
+      backgroundColor: tokens["color-destructive"],
+    },
+    warning: {
+      backgroundColor: tokens["color-warning"],
+    },
+    notice: {
+      backgroundColor: tokens["color-informative"],
+    },
+  };
 });

package/src/Banner/components/BannerIcon/BannerIcon.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { IconNames } from "@jobber/design";
 import { View } from "react-native";
-import { styles } from "./BannerIcon.style";
+import { useStyles } from "./BannerIcon.style";
 import { Icon } from "../../../Icon";
 import { BannerTypes } from "../../types";
 
@@ -11,6 +11,8 @@ export interface BannerIconProps {
 }
 
 export function BannerIcon({ icon, type }: BannerIconProps): JSX.Element {
+  const styles = useStyles();
+
   return (
     <View style={[styles.bannerIcon, styles[type]]} testID="ATL-Banner-Icon">
       <Icon name={icon} color="white" size="small" />

package/src/BottomSheet/BottomSheet.style.ts

@@ -1,35 +1,38 @@
 import { Dimensions, StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
 const { height } = Dimensions.get("window");
-const modalBorderRadius = tokens["radius-larger"];
 
-export const styles = StyleSheet.create({
-  overlayModalize: {
-    backgroundColor: "transparent",
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  const modalBorderRadius = tokens["radius-larger"];
 
-  overlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: tokens["color-overlay"],
-    height,
-  },
-  modal: {
-    borderTopLeftRadius: modalBorderRadius,
-    borderTopRightRadius: modalBorderRadius,
-    paddingTop: tokens["space-small"],
-  },
-  children: {
-    paddingBottom: tokens["space-small"],
-  },
-  header: {
-    paddingHorizontal: tokens["space-base"],
-    paddingTop: tokens["space-small"],
-    paddingBottom: tokens["space-base"],
-  },
-  footerDivider: {
-    marginHorizontal: tokens["space-base"],
-    marginTop: tokens["space-small"],
-    marginBottom: tokens["space-smaller"],
-  },
+  return {
+    overlayModalize: {
+      backgroundColor: "transparent",
+    },
+
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: tokens["color-overlay"],
+      height,
+    },
+    modal: {
+      borderTopLeftRadius: modalBorderRadius,
+      borderTopRightRadius: modalBorderRadius,
+      paddingTop: tokens["space-small"],
+    },
+    children: {
+      paddingBottom: tokens["space-small"],
+    },
+    header: {
+      paddingHorizontal: tokens["space-base"],
+      paddingTop: tokens["space-small"],
+      paddingBottom: tokens["space-base"],
+    },
+    footerDivider: {
+      marginHorizontal: tokens["space-base"],
+      marginTop: tokens["space-small"],
+      marginBottom: tokens["space-smaller"],
+    },
+  };
 });

package/src/BottomSheet/BottomSheet.tsx

@@ -3,7 +3,7 @@ import { Modalize } from "react-native-modalize";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Keyboard, View } from "react-native";
 import { BottomSheetOption } from "./components/BottomSheetOption";
-import { styles } from "./BottomSheet.style";
+import { useStyles } from "./BottomSheet.style";
 import { useIsScreenReaderEnabled } from "../hooks";
 import { Divider } from "../Divider";
 import { Heading } from "../Heading";
@@ -55,22 +55,26 @@ function BottomSheetInternal(
 ) {
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
   const [open, setOpen] = useState<boolean>(false);
+  const styles = useStyles();
 
   return (
     <>
-      {open && <Overlay />}
+      {open && <Overlay styles={styles} />}
       <Modalize
         ref={ref}
         adjustToContentHeight={true}
         modalStyle={styles.modal}
         overlayStyle={styles.overlayModalize}
-        HeaderComponent={heading && <Header heading={heading} />}
+        HeaderComponent={
+          heading && <Header heading={heading} styles={styles} />
+        }
         FooterComponent={
           <Footer
             cancellable={(showCancel && !loading) || isScreenReaderEnabled}
             onCancel={() => {
               (ref as RefObject<BottomSheetRef>)?.current?.close();
             }}
+            styles={styles}
           />
         }
         withHandle={false}
@@ -101,7 +105,13 @@ function BottomSheetInternal(
   }
 }
 
-function Header({ heading }: { readonly heading: string }) {
+function Header({
+  heading,
+  styles,
+}: {
+  readonly heading: string;
+  readonly styles: ReturnType<typeof useStyles>;
+}) {
   return (
     <View style={styles.header}>
       <Heading level={"subtitle"}>{heading}</Heading>
@@ -112,9 +122,11 @@ function Header({ heading }: { readonly heading: string }) {
 function Footer({
   cancellable,
   onCancel,
+  styles,
 }: {
   readonly cancellable: boolean;
   readonly onCancel: () => void;
+  readonly styles: ReturnType<typeof useStyles>;
 }) {
   const insets = useSafeAreaInsets();
   const { t } = useAtlantisI18n();
@@ -143,6 +155,10 @@ function dismissKeyboard() {
   Keyboard.dismiss();
 }
 
-function Overlay() {
+function Overlay({
+  styles,
+}: {
+  readonly styles: ReturnType<typeof useStyles>;
+}) {
   return <View style={styles.overlay} />;
 }

package/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.styles.ts

@@ -1,19 +1,20 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  bottomSheetOption: {
-    display: "flex",
-    flexDirection: "row",
-    alignContent: "center",
-    alignItems: "center",
-    padding: tokens["space-small"],
-  },
-  icon: {
-    paddingHorizontal: tokens["space-small"],
-  },
-  title: {
-    paddingHorizontal: tokens["space-small"],
-    flexShrink: 1,
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    bottomSheetOption: {
+      display: "flex",
+      flexDirection: "row",
+      alignContent: "center",
+      alignItems: "center",
+      padding: tokens["space-small"],
+    },
+    icon: {
+      paddingHorizontal: tokens["space-small"],
+    },
+    title: {
+      paddingHorizontal: tokens["space-small"],
+      flexShrink: 1,
+    },
+  };
 });

package/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { TouchableOpacity, View } from "react-native";
 import { IconColorNames, IconNames } from "@jobber/design";
-import { styles } from "./BottomSheetOption.styles";
+import { useStyles } from "./BottomSheetOption.styles";
 import { TextAlign } from "../../../Typography";
 import { capitalize } from "../../../utils/intl";
 import { Text } from "../../../Text";
@@ -28,6 +28,7 @@ export function BottomSheetOption({
 }: BottomSheetOptionProps): JSX.Element {
   const destructiveColor = "destructive";
   const textVariation = destructive ? destructiveColor : "subdued";
+  const styles = useStyles();
 
   return (
     <TouchableOpacity