@jobber/components-native 0.77.1 → 0.78.0

package/src/Form/components/FormMessage/components/InternalFormMessage/InternalFormMessage.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({
-  wrapper: {
-    backgroundColor: tokens["color-surface"],
-    flex: 1,
-    justifyContent: "center",
-  },
-  closeAction: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    zIndex: 1,
-  },
-  scrollWrapper: { height: "100%" },
-  scrollWrapperContent: { flexGrow: 1, justifyContent: "center" },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    wrapper: {
+      backgroundColor: tokens["color-surface"],
+      flex: 1,
+      justifyContent: "center",
+    },
+    closeAction: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      zIndex: 1,
+    },
+    scrollWrapper: { height: "100%" },
+    scrollWrapperContent: { flexGrow: 1, justifyContent: "center" },
+  };
 });

package/src/Form/components/FormMessage/components/InternalFormMessage/InternalFormMessage.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Modal, StatusBar, View } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
-import { styles } from "./InternalFormMessage.style";
+import { useStyles } from "./InternalFormMessage.style";
 import { EmptyState, EmptyStateProps } from "../../../../../EmptyState";
 import { useAtlantisI18n } from "../../../../../hooks/useAtlantisI18n";
 
@@ -16,6 +16,7 @@ export function InternalFormMessage({
   onRequestClose,
 }: FormMessageProps): JSX.Element {
   const { t } = useAtlantisI18n();
+  const styles = useStyles();
   const emptyStateData: EmptyStateProps = useMemo(() => {
     if (data.secondaryAction) {
       return data;

package/src/FormatFile/FormatFile.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({
-  thumbnailContainer: {
-    backgroundColor: tokens["color-surface--background"],
-    borderWidth: tokens["border-base"],
-    borderColor: tokens["color-border"],
-    borderRadius: tokens["radius-base"],
-    marginBottom: tokens["space-small"],
-  },
-  thumbnailContainerGrid: {
-    width: tokens["space-extravagant"],
-    height: tokens["space-extravagant"],
-    marginRight: tokens["space-small"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    thumbnailContainer: {
+      backgroundColor: tokens["color-surface--background"],
+      borderWidth: tokens["border-base"],
+      borderColor: tokens["color-border"],
+      borderRadius: tokens["radius-base"],
+      marginBottom: tokens["space-small"],
+    },
+    thumbnailContainerGrid: {
+      width: tokens["space-extravagant"],
+      height: tokens["space-extravagant"],
+      marginRight: tokens["space-small"],
+    },
+  };
 });

package/src/FormatFile/FormatFile.tsx

@@ -1,6 +1,6 @@
 import React, { createRef, useCallback, useState } from "react";
 import { TouchableOpacity, View } from "react-native";
-import { styles } from "./FormatFile.style";
+import { useStyles } from "./FormatFile.style";
 import { MediaView } from "./components/MediaView";
 import {
   BottomSheetOptionsSuffix,
@@ -96,6 +96,8 @@ function FormatFileContent({
   onUploadComplete,
   isMedia,
 }: FormatFileContentProps): JSX.Element {
+  const styles = useStyles();
+
   return (
     <View
       style={[

package/src/FormatFile/components/ErrorIcon/ErrorIcon.style.ts

@@ -1,11 +1,12 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  circle: {
-    width: tokens["space-large"],
-    height: tokens["space-large"],
-    borderRadius: tokens["radius-circle"],
-    backgroundColor: tokens["color-surface"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    circle: {
+      width: tokens["space-large"],
+      height: tokens["space-large"],
+      borderRadius: tokens["radius-circle"],
+      backgroundColor: tokens["color-surface"],
+    },
+  };
 });

package/src/FormatFile/components/ErrorIcon/ErrorIcon.tsx

@@ -1,9 +1,11 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./ErrorIcon.style";
+import { useStyles } from "./ErrorIcon.style";
 import { Icon } from "../../../Icon";
 
 export function ErrorIcon(): JSX.Element {
+  const styles = useStyles();
+
   return (
     <View testID="format-file-error-icon" style={styles.circle}>
       <Icon name="alert" color="critical" />

package/src/FormatFile/components/FileView/FileView.style.ts

@@ -1,65 +1,66 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  overlay: {
-    backgroundColor: tokens["color-overlay--dimmed"],
-  },
-  overlayError: {
-    backgroundColor: tokens["color-overlay--dimmed"],
-    borderColor: tokens["color-critical"],
-    borderWidth: tokens["border-base"],
-  },
-  iconCenter: {
-    marginBottom: tokens["space-large"],
-  },
-  fileBackground: {
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-  },
-  fileBackgroundGrid: {
-    height: "100%",
-  },
-  fileBackgroundFlat: {
-    justifyContent: "center",
-    height: tokens["space-extravagant"],
-  },
-  fileIconGrid: {
-    top: tokens["space-small"],
-  },
-  fileIconFlat: {
-    top: tokens["space-smaller"],
-  },
-  fileNameError: {
-    alignItems: "center",
-    borderTopColor: tokens["color-border"],
-    borderTopWidth: tokens["space-minuscule"],
-    width: "100%",
-    marginTop: tokens["space-base"],
-  },
-  fileName: {
-    alignItems: "center",
-    borderTopColor: tokens["color-border"],
-    borderTopWidth: tokens["space-minuscule"],
-    width: "100%",
-  },
-  fileNameGrid: {
-    position: "absolute",
-    right: 0,
-    bottom: 0,
-    left: 0,
-  },
-  fileNameFlat: {
-    top: tokens["space-small"],
-  },
-  fileOverlay: {
-    position: "absolute",
-    justifyContent: "center",
-    right: 0,
-    bottom: 0,
-    left: 0,
-    height: "100%",
-    paddingHorizontal: tokens["space-small"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    overlay: {
+      backgroundColor: tokens["color-overlay--dimmed"],
+    },
+    overlayError: {
+      backgroundColor: tokens["color-overlay--dimmed"],
+      borderColor: tokens["color-critical"],
+      borderWidth: tokens["border-base"],
+    },
+    iconCenter: {
+      marginBottom: tokens["space-large"],
+    },
+    fileBackground: {
+      width: "100%",
+      display: "flex",
+      alignItems: "center",
+    },
+    fileBackgroundGrid: {
+      height: "100%",
+    },
+    fileBackgroundFlat: {
+      justifyContent: "center",
+      height: tokens["space-extravagant"],
+    },
+    fileIconGrid: {
+      top: tokens["space-small"],
+    },
+    fileIconFlat: {
+      top: tokens["space-smaller"],
+    },
+    fileNameError: {
+      alignItems: "center",
+      borderTopColor: tokens["color-border"],
+      borderTopWidth: tokens["space-minuscule"],
+      width: "100%",
+      marginTop: tokens["space-base"],
+    },
+    fileName: {
+      alignItems: "center",
+      borderTopColor: tokens["color-border"],
+      borderTopWidth: tokens["space-minuscule"],
+      width: "100%",
+    },
+    fileNameGrid: {
+      position: "absolute",
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+    fileNameFlat: {
+      top: tokens["space-small"],
+    },
+    fileOverlay: {
+      position: "absolute",
+      justifyContent: "center",
+      right: 0,
+      bottom: 0,
+      left: 0,
+      height: "100%",
+      paddingHorizontal: tokens["space-small"],
+    },
+  };
 });

package/src/FormatFile/components/FileView/FileView.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { View } from "react-native";
 import { IconNames } from "@jobber/design";
-import { styles } from "./FileView.style";
+import { useStyles } from "./FileView.style";
 import { Icon } from "../../../Icon";
 import { Text } from "../../../Text";
 import { FormattedFile, StatusCode } from "../../types";
@@ -28,6 +28,8 @@ export function FileView({
   onUploadComplete,
 }: FileViewProps): JSX.Element {
   const { t } = useAtlantisI18n();
+  const styles = useStyles();
+
   const a11yLabel = computeA11yLabel({
     accessibilityLabel,
     showOverlay,

package/src/FormatFile/components/MediaView/MediaView.style.ts

@@ -1,28 +1,29 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  imageBackground: {
-    width: "100%",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  imageBackgroundFlat: {
-    aspectRatio: 375 / 150,
-  },
-  imageBackgroundGrid: {
-    height: "100%",
-  },
-  overlay: {
-    height: "100%",
-    backgroundColor: tokens["color-overlay--dimmed"],
-    paddingHorizontal: tokens["space-small"],
-  },
-  overlayError: {
-    height: "100%",
-    backgroundColor: tokens["color-overlay--dimmed"],
-    paddingHorizontal: tokens["space-small"],
-    borderColor: tokens["color-critical"],
-    borderWidth: tokens["border-base"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    imageBackground: {
+      width: "100%",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    imageBackgroundFlat: {
+      aspectRatio: 375 / 150,
+    },
+    imageBackgroundGrid: {
+      height: "100%",
+    },
+    overlay: {
+      height: "100%",
+      backgroundColor: tokens["color-overlay--dimmed"],
+      paddingHorizontal: tokens["space-small"],
+    },
+    overlayError: {
+      height: "100%",
+      backgroundColor: tokens["color-overlay--dimmed"],
+      paddingHorizontal: tokens["space-small"],
+      borderColor: tokens["color-critical"],
+      borderWidth: tokens["border-base"],
+    },
+  };
 });

package/src/FormatFile/components/MediaView/MediaView.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { ImageBackground, View } from "react-native";
-import { styles } from "./MediaView.style";
+import { useStyles } from "./MediaView.style";
 import { FormattedFile, StatusCode } from "../../types";
 import { computeA11yLabel } from "../../utils";
 import { ActivityIndicator } from "../../../ActivityIndicator";
@@ -42,6 +42,8 @@ export function MediaView({
   const hasError = showError || error;
   const uri = thumbnail || file.thumbnailUrl || file.source;
 
+  const styles = useStyles();
+
   return (
     <View accessible={true} accessibilityLabel={a11yLabel}>
       <ImageBackground
@@ -61,6 +63,7 @@ export function MediaView({
           hasError={hasError}
           file={file}
           onUploadComplete={onUploadComplete}
+          styles={styles}
         />
       </ImageBackground>
     </View>
@@ -73,6 +76,7 @@ interface OverlayProps {
   readonly hasError: boolean;
   readonly file: FormattedFile;
   readonly onUploadComplete: () => void;
+  readonly styles: ReturnType<typeof useStyles>;
 }
 
 function Overlay({
@@ -81,10 +85,11 @@ function Overlay({
   hasError,
   file,
   onUploadComplete,
+  styles,
 }: OverlayProps) {
   if (isLoading) return <ActivityIndicator />;
 
-  if (hasError) return <ErrorOverlay />;
+  if (hasError) return <ErrorOverlay styles={styles} />;
 
   if (showOverlay) {
     return (
@@ -92,6 +97,7 @@ function Overlay({
         status={file.status}
         progress={file.progress}
         onUploadComplete={onUploadComplete}
+        styles={styles}
       />
     );
   }
@@ -107,12 +113,14 @@ interface ProgressOverlayProps {
   readonly status: StatusCode;
   readonly progress: number;
   readonly onUploadComplete: () => void;
+  readonly styles: ReturnType<typeof useStyles>;
 }
 
 function ProgressOverlay({
   status,
   progress,
   onUploadComplete,
+  styles,
 }: ProgressOverlayProps) {
   const freezeProgressBar = status !== StatusCode.Completed && progress >= 0.9;
 
@@ -130,7 +138,11 @@ function ProgressOverlay({
   );
 }
 
-function ErrorOverlay() {
+function ErrorOverlay({
+  styles,
+}: {
+  readonly styles: ReturnType<typeof useStyles>;
+}) {
   return (
     <View
       style={[styles.imageBackground, styles.overlayError]}

package/src/FormatFile/components/ProgressBar/ProgressBar.style.tsx

@@ -1,16 +1,17 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    height: 8,
-    borderRadius: tokens["radius-circle"],
-    overflow: "hidden",
-    backgroundColor: tokens["color-surface--background"],
-  },
-  progress: {
-    height: "100%",
-    backgroundColor: tokens["color-green"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      width: "100%",
+      height: 8,
+      borderRadius: tokens["radius-circle"],
+      overflow: "hidden",
+      backgroundColor: tokens["color-surface--background"],
+    },
+    progress: {
+      height: "100%",
+      backgroundColor: tokens["color-green"],
+    },
+  };
 });

package/src/FormatFile/components/ProgressBar/ProgressBar.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from "react";
 import { Animated, View } from "react-native";
-import { styles } from "./ProgressBar.style";
+import { useStyles } from "./ProgressBar.style";
 import { StatusCode } from "../../types";
 
 interface ProgressBarProps {
@@ -41,6 +41,8 @@ export const ProgressBar = ({
     });
   }, [progress, barWidth, onComplete, status]);
 
+  const styles = useStyles();
+
   return (
     <View testID="format-file-progress-bar" style={styles.container}>
       <Animated.View

package/src/Glimmer/Glimmer.shape.style.ts

@@ -1,17 +1,18 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const shapeStyles = StyleSheet.create({
-  rectangle: {
-    width: "100%",
-  },
-  square: {
-    width: "auto",
-    aspectRatio: 1 / 1,
-  },
-  circle: {
-    width: "auto",
-    aspectRatio: 1 / 1,
-    borderRadius: tokens["radius-circle"],
-  },
+export const useShapeStyles = buildThemedStyles(tokens => {
+  return {
+    rectangle: {
+      width: "100%",
+    },
+    square: {
+      width: "auto",
+      aspectRatio: 1 / 1,
+    },
+    circle: {
+      width: "auto",
+      aspectRatio: 1 / 1,
+      borderRadius: tokens["radius-circle"],
+    },
+  };
 });

package/src/Glimmer/Glimmer.size.style.ts

@@ -1,10 +1,11 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const sizeStyles = StyleSheet.create({
-  small: { height: tokens["space-small"] },
-  base: { height: tokens["space-base"] },
-  large: { height: tokens["space-large"] },
-  larger: { height: tokens["space-larger"] },
-  largest: { height: tokens["space-largest"] },
+export const useSizeStyles = buildThemedStyles(tokens => {
+  return {
+    small: { height: tokens["space-small"] },
+    base: { height: tokens["space-base"] },
+    large: { height: tokens["space-large"] },
+    larger: { height: tokens["space-larger"] },
+    largest: { height: tokens["space-largest"] },
+  };
 });

package/src/Glimmer/Glimmer.style.ts

@@ -1,23 +1,25 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { tokens as staticTokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const shineWidth = tokens["space-largest"];
+export const shineWidth = staticTokens["space-largest"];
 
-export const styles = StyleSheet.create({
-  container: {
-    backgroundColor: "rgba(0, 0, 0, 0.05)",
-    overflow: "hidden",
-    position: "relative",
-    width: "100%",
-    height: tokens["space-base"],
-    borderRadius: tokens["radius-base"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      backgroundColor: "rgba(0, 0, 0, 0.05)",
+      overflow: "hidden",
+      position: "relative",
+      width: "100%",
+      height: tokens["space-base"],
+      borderRadius: tokens["radius-base"],
+    },
 
-  shine: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: shineWidth,
-    height: "100%",
-  },
+    shine: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: shineWidth,
+      height: "100%",
+    },
+  };
 });

package/src/Glimmer/Glimmer.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Animated, Easing, LayoutChangeEvent, View } from "react-native";
 import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
-import { shineWidth, styles } from "./Glimmer.style";
-import { sizeStyles } from "./Glimmer.size.style";
-import { shapeStyles } from "./Glimmer.shape.style";
+import { shineWidth, useStyles } from "./Glimmer.style";
+import { useSizeStyles } from "./Glimmer.size.style";
+import { useShapeStyles } from "./Glimmer.shape.style";
 import { tokens } from "../utils/design";
 
-export type GlimmerShapes = keyof typeof shapeStyles;
-export type GlimmerSizes = keyof typeof sizeStyles;
+export type GlimmerShapes = keyof ReturnType<typeof useShapeStyles>;
+export type GlimmerSizes = keyof ReturnType<typeof useSizeStyles>;
 export type GlimmerTimings = "base" | "fast";
 
 interface GlimmerProps {
@@ -65,6 +65,10 @@ export function Glimmer({
     return shine.stop;
   }, [parentWidth]);
 
+  const styles = useStyles();
+  const sizeStyles = useSizeStyles();
+  const shapeStyles = useShapeStyles();
+
   return (
     <View
       style={[

package/src/IconButton/IconButton.style.ts

@@ -1,11 +1,12 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: {
-    width: tokens["space-largest"],
-    height: tokens["space-largest"],
-    justifyContent: "center",
-    alignItems: "center",
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      width: tokens["space-largest"],
+      height: tokens["space-largest"],
+      justifyContent: "center",
+      alignItems: "center",
+    },
+  };
 });

package/src/IconButton/IconButton.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { TouchableOpacity } from "react-native";
 import { IconColorNames, IconNames } from "@jobber/design";
-import { styles } from "./IconButton.style";
+import { useStyles } from "./IconButton.style";
 import { Icon } from "../Icon";
 
 interface IconButtonProps {
@@ -51,6 +51,8 @@ export function IconButton({
   accessibilityLabel,
   testID,
 }: IconButtonProps): JSX.Element {
+  const styles = useStyles();
+
   return (
     <TouchableOpacity
       onPress={onPress}