@jobber/components-native 0.76.0 → 0.76.1-JOB-116234-d279b0f.20

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

@@ -1,4 +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 { typographyStyles } from "./Typography.style";
 export { TypographyGestureDetector } from "./TypographyGestureDetector";

package/dist/types/src/index.d.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.76.0",
+  "version": "0.76.1-JOB-116234-d279b0f.20+d279b0fd",
   "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": "3dbb361d102c6ae833d1dce373125b7bf68508c0"
+  "gitHead": "d279b0fddc435572c48dff35f02db80ee4ca3ee7"
 }

package/src/ActionItem/ActionItem.style.ts

@@ -1,29 +1,30 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  actionItemHorizontalOffset: {
-    paddingHorizontal: tokens["space-base"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    actionItemHorizontalOffset: {
+      paddingHorizontal: tokens["space-base"],
+    },
 
-  icon: {
-    justifyContent: "flex-start",
-    paddingRight: tokens["space-small"],
-  },
+    icon: {
+      justifyContent: "flex-start",
+      paddingRight: tokens["space-small"],
+    },
 
-  titlePadding: {
-    paddingBottom: tokens["space-smaller"],
-  },
+    titlePadding: {
+      paddingBottom: tokens["space-smaller"],
+    },
 
-  content: {
-    flex: 1,
-  },
+    content: {
+      flex: 1,
+    },
 
-  offsetForIcons: {
-    paddingTop: tokens["space-smallest"],
-  },
+    offsetForIcons: {
+      paddingTop: tokens["space-smallest"],
+    },
 
-  actionIcon: {
-    paddingLeft: tokens["space-small"],
-  },
+    actionIcon: {
+      paddingLeft: tokens["space-small"],
+    },
+  };
 });

package/src/ActionItem/ActionItem.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import { View } from "react-native";
 import { IconColorNames, IconNames } from "@jobber/design";
-import { styles } from "./ActionItem.style";
+import { useStyles } from "./ActionItem.style";
 import { ActionItemContainer } from "./components/ActionItemContainer";
 import { Typography } from "../Typography";
 import { Icon } from "../Icon";
@@ -65,6 +65,8 @@ export function ActionItem({
     justifyContent: actionIconAlignment,
   };
 
+  const styles = useStyles();
+
   const addIconOffset = icon || onPress ? styles.offsetForIcons : undefined;
   const titlePadding = children ? styles.titlePadding : undefined;
 

package/src/ActionItem/ActionItemGroup.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import { View } from "react-native";
 import { ActionItem, ActionItemProps } from "./ActionItem";
-import { styles } from "./ActionItem.style";
+import { useStyles } from "./ActionItem.style";
 import { Divider } from "../Divider";
 
 export type ActionItemElement =
@@ -30,6 +30,8 @@ function renderChildren(children: ActionItemElement | ActionItemElement[]) {
   return childArray.map((child, index) => {
     const isSubsequentChild = index !== 0;
 
+    const styles = useStyles();
+
     return (
       <View key={index}>
         {isSubsequentChild && (

package/src/ActionItem/components/ActionItemContainer.style.ts

@@ -1,14 +1,15 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../utils/design";
+import { buildThemedStyles } from "../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    flexDirection: "row",
-    paddingVertical: tokens["space-base"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      width: "100%",
+      flexDirection: "row",
+      paddingVertical: tokens["space-base"],
+    },
 
-  pressed: {
-    opacity: tokens["opacity-pressed"],
-  },
+    pressed: {
+      opacity: tokens["opacity-pressed"],
+    },
+  };
 });

package/src/ActionItem/components/ActionItemContainer.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import { Pressable, View } from "react-native";
-import { styles } from "./ActionItemContainer.style";
-import { styles as actionItemStyles } from "../ActionItem.style";
+import { useStyles } from "./ActionItemContainer.style";
+import { useStyles as useActionItemStyles } from "../ActionItem.style";
 
 interface ActionItemContainerProps {
   readonly children: ReactNode;
@@ -16,6 +16,9 @@ export function ActionItemContainer({
   children,
   testID,
 }: ActionItemContainerProps): JSX.Element {
+  const styles = useStyles();
+  const actionItemStyles = useActionItemStyles();
+
   if (onPress) {
     return (
       <Pressable

package/src/ActivityIndicator/ActivityIndicator.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import { ActivityIndicator, ActivityIndicatorProps } from "react-native";
-import { tokens } from "../utils/design";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export function JobberActivityIndicator(
   props: ActivityIndicatorProps,
 ): JSX.Element {
+  const { tokens } = useAtlantisTheme();
+
   return (
     <ActivityIndicator
       {...props}

package/src/AtlantisThemeContext/AtlantisThemeContext.tsx

@@ -0,0 +1,98 @@
+import { androidTokens, darkTokens, iosTokens } from "@jobber/design";
+import React, {
+  PropsWithChildren,
+  createContext,
+  useContext,
+  useState,
+} from "react";
+import merge from "lodash/merge";
+import { Platform } from "react-native";
+import {
+  AtlantisThemeContextProviderProps,
+  AtlantisThemeContextValue,
+  Theme,
+} from "./types";
+
+const lightTokens = Platform.select({
+  ios: () => iosTokens,
+  android: () => androidTokens,
+  default: () => androidTokens,
+})();
+
+const completeDarkTokens = merge({}, lightTokens, darkTokens);
+
+const AtlantisThemeContext = createContext<AtlantisThemeContextValue>({
+  theme: "light",
+  tokens: lightTokens,
+});
+
+export function AtlantisThemeContextProvider({
+  children,
+  dangerouslyOverrideTheme,
+}: AtlantisThemeContextProviderProps) {
+  if (dangerouslyOverrideTheme) {
+    return (
+      <InternalStaticThemeProvider
+        dangerouslyOverrideTheme={dangerouslyOverrideTheme}
+      >
+        {children}
+      </InternalStaticThemeProvider>
+    );
+  }
+
+  return (
+    <InternalDynamicThemeProvider>{children}</InternalDynamicThemeProvider>
+  );
+}
+
+function InternalDynamicThemeProvider({ children }: PropsWithChildren) {
+  // TODO: check initial theme from local/device storage?
+  // const initialTheme: Theme = (globalThis.document.documentElement.dataset.theme as Theme) ?? "light";
+  const initialTheme: Theme = "light";
+
+  const [internalTheme] = useState<Theme>(initialTheme);
+  const currentTokens =
+    internalTheme === "dark" ? completeDarkTokens : lightTokens;
+
+  // TODO: listen for global theme update -> setInternalTheme
+  // See web's AtlantisThemeContext for an example of how it does this.
+
+  return (
+    <AtlantisThemeContext.Provider
+      value={{
+        theme: internalTheme,
+        tokens: currentTokens,
+      }}
+    >
+      {children}
+    </AtlantisThemeContext.Provider>
+  );
+}
+
+function InternalStaticThemeProvider({
+  dangerouslyOverrideTheme,
+  children,
+}: Required<
+  Pick<
+    AtlantisThemeContextProviderProps,
+    "dangerouslyOverrideTheme" | "children"
+  >
+>) {
+  const currentTokens =
+    dangerouslyOverrideTheme === "dark" ? completeDarkTokens : lightTokens;
+
+  return (
+    <AtlantisThemeContext.Provider
+      value={{
+        theme: dangerouslyOverrideTheme,
+        tokens: currentTokens,
+      }}
+    >
+      {children}
+    </AtlantisThemeContext.Provider>
+  );
+}
+
+export function useAtlantisTheme() {
+  return useContext(AtlantisThemeContext);
+}

package/src/AtlantisThemeContext/buildThemedStyles.ts

@@ -0,0 +1,43 @@
+import { StyleSheet } from "react-native";
+import { useMemo } from "react";
+import { AtlantisThemeContextValue } from "./types";
+import { useAtlantisTheme } from "./AtlantisThemeContext";
+
+/**
+ * Creates a hook that generates themed styles using the current theme tokens.
+ * The hook will automatically update the styles when the theme changes.
+ *
+ * @example
+ * ```tsx
+ * const useStyles = buildThemedStyles(tokens => ({
+ *   container: {
+ *     backgroundColor: tokens["color-surface"],
+ *     padding: tokens["space-base"],
+ *   },
+ * }));
+ *
+ * function MyComponent() {
+ *   const styles = useStyles();
+ *   return <View style={styles.container} />;
+ * }
+ * ```
+ *
+ * @param styleFactory - A function that receives theme tokens and returns a style object
+ * @returns A hook function that returns the created styles
+ *
+ * @note
+ * - Styles are memoized and only recalculated when tokens change
+ * - Use this for components that need to respond to theme changes
+ * - The returned styles are created using StyleSheet.create()
+ *
+ * @see Related functions: {@link useAtlantisTheme}
+ */
+export function buildThemedStyles<
+  T extends Parameters<typeof StyleSheet.create>[0],
+>(styleFactory: (tokens: AtlantisThemeContextValue["tokens"]) => T) {
+  return function useStyles() {
+    const { tokens } = useAtlantisTheme();
+
+    return useMemo(() => StyleSheet.create(styleFactory(tokens)), [tokens]);
+  };
+}

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,29 @@
+import { iosTokens } from "@jobber/design";
+import { PropsWithChildren } from "react";
+
+export interface AtlantisThemeContextValue {
+  /**
+   * The theme of the application.
+   */
+  readonly theme: Theme;
+
+  /**
+   * The design tokens for the current theme.
+   */
+  readonly tokens: typeof iosTokens;
+}
+
+export interface AtlantisThemeContextProviderProps extends PropsWithChildren {
+  /**
+   * 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 { tokens as staticTokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
 const { height } = Dimensions.get("window");
-const modalBorderRadius = tokens["radius-larger"];
+const modalBorderRadius = staticTokens["radius-larger"];
 
-export const styles = StyleSheet.create({
-  overlayModalize: {
-    backgroundColor: "transparent",
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  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"],
-  },
+    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"],
+    },
+  };
 });