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

package/src/Flex/Flex.styles.tsx

@@ -1,6 +1,5 @@
 import { StyleSheet, ViewStyle } from "react-native";
-import { ColumnKeys, Spacing, spacing } from "./types";
-import { tokens } from "../utils/design";
+import { ColumnKeys } from "./types";
 
 export const styles = StyleSheet.create({
   row: { flexDirection: "row" },
@@ -17,14 +16,3 @@ export const columnStyles: Record<ColumnKeys, ViewStyle> = StyleSheet.create({
     flexBasis: 0,
   },
 });
-
-export const gapStyles = StyleSheet.create(
-  spacing.reduce((gapObj, space) => {
-    let paddingLeft = 0;
-    if (space !== "none") paddingLeft = tokens[`space-${space}`];
-
-    gapObj[space] = { paddingLeft };
-
-    return gapObj;
-  }, {} as Record<Spacing, ViewStyle>),
-);

package/src/Flex/Flex.tsx

@@ -1,7 +1,8 @@
 import React, { Children, PropsWithChildren } from "react";
 import { View } from "react-native";
 import chunk from "lodash/chunk";
-import { columnStyles, gapStyles, styles } from "./Flex.styles";
+import { columnStyles, styles } from "./Flex.styles";
+import { useGapStyles } from "./Flex.gap.styles";
 import { FlexProps } from "./types";
 import { Content } from "../Content";
 
@@ -60,7 +61,7 @@ function Row({
         <View
           style={[
             columnStyles[template[index]] || columnStyles.grow,
-            index > 0 && gap && gapStyles[gap],
+            index > 0 && gap && useGapStyles()[gap],
           ]}
         >
           {child}

package/src/Form/Form.style.ts

@@ -1,34 +1,35 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexGrow: 1,
-    width: "100%",
-  },
-  safeArea: {
-    backgroundColor: tokens["color-surface"],
-  },
-  scrollContentContainer: {
-    flexGrow: 1,
-  },
-  scrollView: {
-    flexGrow: 1,
-  },
-  formChildContainer: {
-    flexGrow: 1,
-    justifyContent: "flex-start",
-  },
-  formContent: {
-    paddingVertical: tokens["space-small"],
-  },
-  fixedSaveButton: {
-    padding: tokens["space-base"],
-    backgroundColor: tokens["color-surface"],
-  },
-  activityIndicator: {
-    marginVertical: tokens["space-base"],
-    flex: 1,
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      flex: 1,
+      flexGrow: 1,
+      width: "100%",
+    },
+    safeArea: {
+      backgroundColor: tokens["color-surface"],
+    },
+    scrollContentContainer: {
+      flexGrow: 1,
+    },
+    scrollView: {
+      flexGrow: 1,
+    },
+    formChildContainer: {
+      flexGrow: 1,
+      justifyContent: "flex-start",
+    },
+    formContent: {
+      paddingVertical: tokens["space-small"],
+    },
+    fixedSaveButton: {
+      padding: tokens["space-base"],
+      backgroundColor: tokens["color-surface"],
+    },
+    activityIndicator: {
+      marginVertical: tokens["space-base"],
+      flex: 1,
+    },
+  };
 });

package/src/Form/Form.tsx

@@ -8,7 +8,7 @@ import {
   View,
   findNodeHandle,
 } from "react-native";
-import { styles } from "./Form.style";
+import { useStyles } from "./Form.style";
 import { FormErrorBanner } from "./components/FormErrorBanner";
 import { KEYBOARD_SAVE_BUTTON_DISTANCE } from "./constants";
 import { FormMessageBanner } from "./components/FormMessageBanner";
@@ -136,6 +136,8 @@ function InternalForm<T extends FieldValues, S>({
     setMessageBannerHeight(event.nativeEvent.layout.height);
   };
 
+  const styles = useStyles();
+
   return (
     <FormProvider {...formMethods}>
       <>

package/src/Form/components/FormActionBar/FormActionBar.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({
-  saveButton: {
-    padding: tokens["space-base"],
-    backgroundColor: tokens["color-surface"],
-    width: "100%",
-    ...tokens["shadow-high"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    saveButton: {
+      padding: tokens["space-base"],
+      backgroundColor: tokens["color-surface"],
+      width: "100%",
+      ...tokens["shadow-high"],
+    },
+  };
 });

package/src/Form/components/FormActionBar/FormActionBar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { LayoutChangeEvent, StyleSheet } from "react-native";
 import Reanimated from "react-native-reanimated";
-import { styles } from "./FormActionBar.style";
+import { useStyles } from "./FormActionBar.style";
 import { SecondaryActionProp } from "../../types";
 import { FormSaveButton } from "../FormSaveButton";
 
@@ -32,6 +32,8 @@ export function FormActionBar({
   secondaryActions,
   setSecondaryActionLoading,
 }: FormActionBarProps): JSX.Element {
+  const styles = useStyles();
+
   const buttonStyle = StyleSheet.flatten([
     styles.saveButton,
     {

package/src/Form/components/FormBody/FormBody.style.ts

@@ -1,27 +1,28 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexGrow: 1,
-    width: "100%",
-  },
-  safeArea: {
-    backgroundColor: tokens["color-surface"],
-  },
-  scrollContentContainer: {
-    flexGrow: 1,
-  },
-  scrollView: {
-    flexGrow: 1,
-  },
-  formChildContainer: {
-    flexGrow: 1,
-    justifyContent: "flex-start",
-  },
-  activityIndicator: {
-    marginVertical: tokens["space-base"],
-    flex: 1,
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      flex: 1,
+      flexGrow: 1,
+      width: "100%",
+    },
+    safeArea: {
+      backgroundColor: tokens["color-surface"],
+    },
+    scrollContentContainer: {
+      flexGrow: 1,
+    },
+    scrollView: {
+      flexGrow: 1,
+    },
+    formChildContainer: {
+      flexGrow: 1,
+      justifyContent: "flex-start",
+    },
+    activityIndicator: {
+      marginVertical: tokens["space-base"],
+      flex: 1,
+    },
+  };
 });

package/src/Form/components/FormBody/FormBody.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { styles } from "./FormBody.style";
+import { useStyles } from "./FormBody.style";
 import { useScreenInformation } from "../../hooks/useScreenInformation";
 import { FormActionBar, FormActionBarProps } from "../FormActionBar";
 import { tokens } from "../../../utils/design";
@@ -26,6 +26,7 @@ export function FormBody({
 }: FormBodyProps): JSX.Element {
   const paddingBottom = useBottomPadding();
   const fullViewPadding = useMemo(() => ({ paddingBottom }), [paddingBottom]);
+  const styles = useStyles();
 
   return (
     <>

package/src/Form/components/FormMask/FormMask.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({
-  mask: {
-    zIndex: tokens["elevation-modal"],
-    width: "100%",
-    height: "100%",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    backgroundColor: tokens["color-overlay--dimmed"],
-    padding: tokens["space-base"],
-    justifyContent: "center",
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    mask: {
+      zIndex: tokens["elevation-modal"],
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      backgroundColor: tokens["color-overlay--dimmed"],
+      padding: tokens["space-base"],
+      justifyContent: "center",
+    },
+  };
 });

package/src/Form/components/FormMask/FormMask.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./FormMask.style";
+import { useStyles } from "./FormMask.style";
 import { ActivityIndicator } from "../../../ActivityIndicator";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
 export function FormMask(): JSX.Element {
   const { t } = useAtlantisI18n();
+  const styles = useStyles();
 
   return (
     <View style={styles.mask} accessibilityLabel={t("loading")}>

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"],
+    },
+  };
 });