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

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}

package/src/InputFieldWrapper/CommonInputStyles.style.ts

@@ -1,10 +1,20 @@
-import { StyleSheet } from "react-native";
-import { typographyStyles } from "../Typography";
-import { tokens } from "../utils/design";
+import { StyleSheet, TextStyle, ViewStyle } from "react-native";
+import {
+  AtlantisThemeContextValue,
+  buildThemedStyles,
+} from "../AtlantisThemeContext";
+import {
+  typographyStyles as staticTypographyStyles,
+  useTypographyStyles,
+} from "../Typography";
+import { tokens as staticTokens } from "../utils/design";
 
-export const commonInputStyles = StyleSheet.create({
+export const createCommonInputTokens = (
+  tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens,
+  typographyStyles: Record<string, TextStyle>,
+): Record<string, ViewStyle | TextStyle> => ({
   input: {
-    width: "100%",
+    width: "100%" as const,
     flexShrink: 1,
     flexGrow: 1,
     color: tokens["color-text"],
@@ -37,3 +47,19 @@ export const commonInputStyles = StyleSheet.create({
     borderRadius: tokens["radius-base"],
   },
 });
+
+/**
+ * @deprecated Use useCommonInputStyles instead
+ */
+export const commonInputStyles = StyleSheet.create(
+  createCommonInputTokens(staticTokens, staticTypographyStyles),
+);
+
+export const useCommonInputStyles = () => {
+  const typographyStyles = useTypographyStyles();
+  const themedStyles = buildThemedStyles(tokens =>
+    createCommonInputTokens(tokens, typographyStyles),
+  )();
+
+  return themedStyles;
+};

package/src/InputFieldWrapper/InputFieldWrapper.style.ts

@@ -1,140 +1,145 @@
 import { StyleSheet } from "react-native";
-import { commonInputStyles } from "./CommonInputStyles.style";
-import { tokens } from "../utils/design";
-import { typographyStyles } from "../Typography";
-
-export const styles = StyleSheet.create({
-  container: StyleSheet.flatten([
-    commonInputStyles.container,
-    {
-      flexDirection: "column",
-    },
-  ]),
-
-  field: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-
-  inputContainer: {
-    flexDirection: "row",
-    flex: 1,
-    justifyContent: "flex-start",
-  },
-
-  inputFocused: {
-    borderColor: tokens["color-interactive"],
-  },
-
-  inputInvalid: {
-    borderColor: tokens["color-critical"],
-  },
-
-  label: {
-    // for placeholder
-    position: "absolute",
-    display: "flex",
-    justifyContent: "center",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-  },
-
-  miniLabel: {
-    top: 0,
-    paddingTop: tokens["space-small"] - tokens["space-smallest"],
-    backgroundColor: tokens["color-surface"],
-    marginRight: tokens["space-small"],
-    maxHeight:
-      (typographyStyles.defaultSize.lineHeight || 0) + tokens["space-smaller"],
-    zIndex: 1,
-  },
-  // Prevents the miniLabel from cutting off the ClearAction button
-  miniLabelShowClearAction: {
-    backgroundColor: "transparent",
-  },
-
-  disabled: {
-    backgroundColor: tokens["color-disabled--secondary"],
-  },
-
-  fieldAffix: {
-    flexDirection: "row",
-  },
-
-  fieldAffixMiniLabel: {
-    paddingTop: tokens["space-small"] - tokens["space-smallest"],
-    // @ts-expect-error tsc-ci
-    top: typographyStyles.smallSize.fontSize / 2,
-    right: 0,
-    bottom: 0,
-    left: 0,
-  },
-
-  prefixIcon: {
-    justifyContent: "center",
-    paddingRight: tokens["space-small"],
-  },
-
-  prefixLabel: {
-    justifyContent: "center",
-    paddingTop: tokens["space-minuscule"],
-    paddingRight: tokens["space-minuscule"],
-  },
-
-  suffixIcon: {
-    justifyContent: "center",
-    paddingRight: tokens["space-small"],
-  },
-
-  suffixLabel: {
-    justifyContent: "center",
-    paddingTop: tokens["space-minuscule"],
-    paddingRight: tokens["space-small"],
-  },
-
-  suffixIconMargin: {
-    marginLeft: tokens["space-small"] + tokens["space-smaller"],
-  },
-
-  suffixLabelMargin: {
-    marginLeft: tokens["space-smallest"],
-  },
-
-  inputEndContainer: {
-    flexDirection: "row",
-    zIndex: 1,
-  },
-
-  toolbar: {
-    flexBasis: "100%",
-    flexDirection: "row",
-    gap: tokens["space-small"],
-    paddingBottom: tokens["space-small"],
-  },
-
-  loadingSpinner: {
-    justifyContent: "center",
-    paddingRight: tokens["space-small"],
-  },
-
-  loadingGlimmers: {
-    position: "absolute",
-    top: tokens["space-base"],
-    bottom: tokens["space-base"],
-    left: 0,
-    right: 0,
-    gap: tokens["space-small"],
-    paddingTop: tokens["space-small"],
-    paddingRight: tokens["space-large"],
-    backgroundColor: tokens["color-surface"],
-    overflow: "hidden",
-  },
-
-  loadingGlimmersHasValue: {
-    top: tokens["space-large"],
-    paddingTop: tokens["space-base"] - tokens["space-smaller"],
-    bottom: tokens["space-smaller"],
-  },
-});
+import { useCommonInputStyles } from "./CommonInputStyles.style";
+import { buildThemedStyles } from "../AtlantisThemeContext";
+import { useTypographyStyles } from "../Typography";
+
+export const useStyles = () => {
+  const commonInputStyles = useCommonInputStyles();
+  const typographyStyles = useTypographyStyles();
+
+  return buildThemedStyles(tokens => ({
+    container: StyleSheet.flatten([
+      commonInputStyles.container,
+      {
+        flexDirection: "column",
+      },
+    ]),
+    field: {
+      flexDirection: "row",
+      alignItems: "center",
+    },
+
+    inputContainer: {
+      flexDirection: "row",
+      flex: 1,
+      justifyContent: "flex-start",
+    },
+
+    inputFocused: {
+      borderColor: tokens["color-interactive"],
+    },
+
+    inputInvalid: {
+      borderColor: tokens["color-critical"],
+    },
+
+    label: {
+      // for placeholder
+      position: "absolute",
+      display: "flex",
+      justifyContent: "center",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+
+    miniLabel: {
+      top: 0,
+      paddingTop: tokens["space-small"] - tokens["space-smallest"],
+      backgroundColor: tokens["color-surface"],
+      marginRight: tokens["space-small"],
+      maxHeight:
+        (typographyStyles.defaultSize.lineHeight || 0) +
+        tokens["space-smaller"],
+      zIndex: 1,
+    },
+    // Prevents the miniLabel from cutting off the ClearAction button
+    miniLabelShowClearAction: {
+      backgroundColor: "transparent",
+    },
+
+    disabled: {
+      backgroundColor: tokens["color-disabled--secondary"],
+    },
+
+    fieldAffix: {
+      flexDirection: "row",
+    },
+
+    fieldAffixMiniLabel: {
+      paddingTop: tokens["space-small"] - tokens["space-smallest"],
+      // @ts-expect-error tsc-ci
+      top: typographyStyles.smallSize.fontSize / 2,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+
+    prefixIcon: {
+      justifyContent: "center",
+      paddingRight: tokens["space-small"],
+    },
+
+    prefixLabel: {
+      justifyContent: "center",
+      paddingTop: tokens["space-minuscule"],
+      paddingRight: tokens["space-minuscule"],
+    },
+
+    suffixIcon: {
+      justifyContent: "center",
+      paddingRight: tokens["space-small"],
+    },
+
+    suffixLabel: {
+      justifyContent: "center",
+      paddingTop: tokens["space-minuscule"],
+      paddingRight: tokens["space-small"],
+    },
+
+    suffixIconMargin: {
+      marginLeft: tokens["space-small"] + tokens["space-smaller"],
+    },
+
+    suffixLabelMargin: {
+      marginLeft: tokens["space-smallest"],
+    },
+
+    inputEndContainer: {
+      flexDirection: "row",
+      zIndex: 1,
+    },
+
+    toolbar: {
+      flexBasis: "100%",
+      flexDirection: "row",
+      gap: tokens["space-small"],
+      paddingBottom: tokens["space-small"],
+    },
+
+    loadingSpinner: {
+      justifyContent: "center",
+      paddingRight: tokens["space-small"],
+    },
+
+    loadingGlimmers: {
+      position: "absolute",
+      top: tokens["space-base"],
+      bottom: tokens["space-base"],
+      left: 0,
+      right: 0,
+      gap: tokens["space-small"],
+      paddingTop: tokens["space-small"],
+      paddingRight: tokens["space-large"],
+      backgroundColor: tokens["color-surface"],
+      overflow: "hidden",
+    },
+
+    loadingGlimmersHasValue: {
+      top: tokens["space-large"],
+      paddingTop: tokens["space-base"] - tokens["space-smaller"],
+      bottom: tokens["space-smaller"],
+    },
+  }))();
+};