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

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-interactive--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.test.tsx

@@ -4,8 +4,8 @@ import {
   fireEvent,
   render as renderComponent,
 } from "@testing-library/react-native";
+import { Animated } from "react-native";
 import { GLIMMER_SHINE_TEST_ID, GLIMMER_TEST_ID, Glimmer } from "./Glimmer";
-import { tokens } from "../utils/design";
 
 let screen: ReturnType<typeof renderComponent<typeof Glimmer>>;
 
@@ -48,6 +48,10 @@ describe("Glimmer", () => {
 
   it("renders sets the correct width", () => {
     jest.useFakeTimers();
+
+    // Spy on Animated.timing to verify the animation configuration
+    const timingSpy = jest.spyOn(Animated, "timing");
+
     render(<Glimmer />);
 
     act(() => {
@@ -62,12 +66,19 @@ describe("Glimmer", () => {
       expect.objectContaining({ transform: [{ translateX: -48 }] }),
     );
 
-    jest.advanceTimersByTime(tokens["timing-loading--extended"]);
+    expect(timingSpy).toHaveBeenCalled();
 
-    expect(element.props.style).toEqual(
-      expect.objectContaining({ transform: [{ translateX: 348 }] }),
-    );
+    // Get the last call to timing
+    const lastCall = timingSpy.mock.calls[timingSpy.mock.calls.length - 1];
+
+    // The first argument should be the animated value
+    // The second argument should be the config
+    const config = lastCall[1];
+
+    // Verify animation targets the right end position (300 + 48 = 348)
+    expect(config.toValue).toBe(348);
 
+    timingSpy.mockRestore();
     jest.useRealTimers();
   });
 });

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/Heading/__snapshots__/Heading.test.tsx.snap

@@ -149,7 +149,7 @@ exports[`when Heading called with sub-heading variation and text-color should ma
         "fontFamily": "inter-semibold",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",

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}