@jobber/components-native 0.77.1 → 0.79.0

package/src/Disclosure/Disclosure.tsx

@@ -7,9 +7,10 @@ import Reanimated, {
   withTiming,
 } from "react-native-reanimated";
 import { EASE_CUBIC_IN_OUT } from "./constants";
-import { styles } from "./Disclosure.style";
-import { tokens } from "../utils/design";
+import { useStyles } from "./Disclosure.style";
+import { tokens as staticTokens } from "../utils/design";
 import { Icon } from "../Icon";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 const ReanimatedView = Reanimated.View;
 const ReanimatedScrollView = Reanimated.ScrollView;
@@ -58,14 +59,16 @@ export function Disclosure({
   open,
   onToggle,
   isEmpty,
-  animationDuration = tokens["timing-slowest"],
+  animationDuration = staticTokens["timing-slowest"],
 }: DisclosureProps): JSX.Element {
+  const styles = useStyles();
+
   return (
     <View style={styles.container}>
       <DisclosureHeader
-        {...{ header, onToggle, isEmpty, open, animationDuration }}
+        {...{ header, onToggle, isEmpty, open, animationDuration, styles }}
       />
-      <DisclosureContent {...{ content, open, animationDuration }} />
+      <DisclosureContent {...{ content, open, animationDuration, styles }} />
     </View>
   );
 }
@@ -73,7 +76,9 @@ export function Disclosure({
 type DisclosureHeaderProps = Pick<
   DisclosureProps,
   "header" | "onToggle" | "isEmpty" | "open" | "animationDuration"
->;
+> & {
+  readonly styles: ReturnType<typeof useStyles>;
+};
 
 function DisclosureHeader({
   header,
@@ -81,6 +86,7 @@ function DisclosureHeader({
   isEmpty,
   open,
   animationDuration,
+  styles,
 }: DisclosureHeaderProps) {
   const rotateZ = useSharedValue(0);
 
@@ -95,6 +101,8 @@ function DisclosureHeader({
     };
   });
 
+  const { tokens } = useAtlantisTheme();
+
   return (
     <TouchableOpacity
       activeOpacity={tokens["opacity-pressed"]}
@@ -116,12 +124,15 @@ function DisclosureHeader({
 type DisclosureContentProps = Pick<
   DisclosureProps,
   "content" | "open" | "animationDuration"
->;
+> & {
+  readonly styles: ReturnType<typeof useStyles>;
+};
 
 function DisclosureContent({
   content,
   open,
   animationDuration,
+  styles,
 }: DisclosureContentProps) {
   const [maxHeight, setMaxHeight] = useState(0);
   const height = useSharedValue(0);

package/src/Divider/Divider.test.tsx

@@ -1,11 +1,19 @@
 import React from "react";
-import { render } from "@testing-library/react-native";
+import { render, renderHook } from "@testing-library/react-native";
 import { Divider } from "./Divider";
-import { horizontalStyles } from "./DividerHorizontal.style";
-import { verticalStyles } from "./DividerVertical.style";
+import { useHorizontalStyles } from "./DividerHorizontal.style";
+import { useVerticalStyles } from "./DividerVertical.style";
 
 const dividerTestId = "Divider";
 
+let horizontalStyles: ReturnType<typeof useHorizontalStyles>;
+let verticalStyles: ReturnType<typeof useVerticalStyles>;
+
+beforeAll(() => {
+  horizontalStyles = renderHook(() => useHorizontalStyles()).result.current;
+  verticalStyles = renderHook(() => useVerticalStyles()).result.current;
+});
+
 describe("Divider", () => {
   it("uses the given testID", () => {
     const dividerTestID = "divider-test";

package/src/Divider/Divider.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { View } from "react-native";
-import { horizontalStyles } from "./DividerHorizontal.style";
-import { verticalStyles } from "./DividerVertical.style";
+import { useHorizontalStyles } from "./DividerHorizontal.style";
+import { useVerticalStyles } from "./DividerVertical.style";
 
 interface DividerProps {
   /**
@@ -27,6 +27,9 @@ export function Divider({
   direction = "horizontal",
   testID = "Divider",
 }: DividerProps): JSX.Element {
+  const horizontalStyles = useHorizontalStyles();
+  const verticalStyles = useVerticalStyles();
+
   const directionalStyles =
     direction === "horizontal" ? horizontalStyles : verticalStyles;
   const style = [

package/src/Divider/DividerHorizontal.style.ts

@@ -1,24 +1,25 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const horizontalStyles = StyleSheet.create({
-  base: {
-    height: 1,
-    margin: 0,
-    width: "auto",
-    borderBottomColor: tokens["color-border"],
-    borderBottomWidth: tokens["border-base"],
-  },
-  large: {
-    borderBottomWidth: tokens["border-thick"],
-    opacity: 0.875,
-  },
-  larger: {
-    borderBottomWidth: tokens["border-thicker"],
-    opacity: 0.625,
-  },
-  largest: {
-    borderBottomWidth: tokens["border-thickest"],
-    opacity: 0.375,
-  },
+export const useHorizontalStyles = buildThemedStyles(tokens => {
+  return {
+    base: {
+      height: 1,
+      margin: 0,
+      width: "auto",
+      borderBottomColor: tokens["color-border"],
+      borderBottomWidth: tokens["border-base"],
+    },
+    large: {
+      borderBottomWidth: tokens["border-thick"],
+      opacity: 0.875,
+    },
+    larger: {
+      borderBottomWidth: tokens["border-thicker"],
+      opacity: 0.625,
+    },
+    largest: {
+      borderBottomWidth: tokens["border-thickest"],
+      opacity: 0.375,
+    },
+  };
 });

package/src/Divider/DividerVertical.style.ts

@@ -1,27 +1,28 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const verticalStyles = StyleSheet.create({
-  base: {
-    margin: 0,
-    height: "100%",
-    width: 1,
-    borderRightWidth: tokens["border-base"],
-    borderRightColor: tokens["color-border"],
-  },
-  large: {
-    borderRightWidth: tokens["border-thick"],
-    opacity: 0.875,
-  },
-  larger: {
-    borderRightWidth: tokens["border-thicker"],
-    opacity: 0.625,
-  },
-  largest: {
-    borderRightWidth: tokens["border-thickest"],
-    opacity: 0.375,
-  },
-  vertical: {
-    borderRightColor: tokens["color-border"],
-  },
+export const useVerticalStyles = buildThemedStyles(tokens => {
+  return {
+    base: {
+      margin: 0,
+      height: "100%",
+      width: 1,
+      borderRightWidth: tokens["border-base"],
+      borderRightColor: tokens["color-border"],
+    },
+    large: {
+      borderRightWidth: tokens["border-thick"],
+      opacity: 0.875,
+    },
+    larger: {
+      borderRightWidth: tokens["border-thicker"],
+      opacity: 0.625,
+    },
+    largest: {
+      borderRightWidth: tokens["border-thickest"],
+      opacity: 0.375,
+    },
+    vertical: {
+      borderRightColor: tokens["color-border"],
+    },
+  };
 });

package/src/EmptyState/EmptyState.style.ts

@@ -1,9 +1,10 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  icon: {
-    marginVertical: tokens["space-small"],
-    alignItems: "center",
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    icon: {
+      marginVertical: tokens["space-small"],
+      alignItems: "center",
+    },
+  };
 });

package/src/EmptyState/EmptyState.tsx

@@ -1,7 +1,7 @@
 import { IconColorNames, IconNames } from "@jobber/design";
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./EmptyState.style";
+import { useStyles } from "./EmptyState.style";
 import { Text } from "../Text";
 import { Content } from "../Content";
 import { Icon } from "../Icon";
@@ -65,6 +65,8 @@ export function EmptyState({
   secondaryAction,
   iconColor = "blue",
 }: EmptyStateProps): JSX.Element {
+  const styles = useStyles();
+
   return (
     <Content>
       {icon && (

package/src/ErrorMessageWrapper/ErrorMessageWrapper.style.ts

@@ -1,32 +1,33 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  wrapper: {
-    position: "relative",
-    width: "100%",
-  },
-  wrapForCard: {
-    paddingHorizontal: tokens["space-base"],
-    paddingVertical: tokens["space-small"],
-  },
-  messageWrapper: {
-    flexDirection: "row",
-  },
-  messageWrapperIcon: {
-    flex: 0,
-    flexBasis: "auto",
-    paddingTop: tokens["space-minuscule"],
-    paddingRight: tokens["space-smaller"],
-  },
-  messageWrapperContent: {
-    flex: 1,
-  },
-  screenReaderMessage: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    wrapper: {
+      position: "relative",
+      width: "100%",
+    },
+    wrapForCard: {
+      paddingHorizontal: tokens["space-base"],
+      paddingVertical: tokens["space-small"],
+    },
+    messageWrapper: {
+      flexDirection: "row",
+    },
+    messageWrapperIcon: {
+      flex: 0,
+      flexBasis: "auto",
+      paddingTop: tokens["space-minuscule"],
+      paddingRight: tokens["space-smaller"],
+    },
+    messageWrapperContent: {
+      flex: 1,
+    },
+    screenReaderMessage: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+    },
+  };
 });

package/src/ErrorMessageWrapper/ErrorMessageWrapper.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, useEffect, useRef } from "react";
 import { View, ViewStyle } from "react-native";
 import { v4 } from "react-native-uuid";
 import { useErrorMessageContext } from "./context";
-import { styles } from "./ErrorMessageWrapper.style";
+import { useStyles } from "./ErrorMessageWrapper.style";
 import { Icon } from "../Icon";
 import { Text } from "../Text";
 
@@ -22,11 +22,6 @@ interface ErrorMessageWrapperProps {
   readonly children: ReactNode;
 }
 
-const wrapForStyle: Record<WrapForTypes, ViewStyle | undefined> = {
-  card: styles.wrapForCard,
-  default: undefined,
-};
-
 /**
  * Adds an error message below the children but ensure the message gets read
  * out first.
@@ -46,6 +41,12 @@ export function ErrorMessageWrapper({
 
   const hasErrorMessage = Boolean(message);
 
+  const styles = useStyles();
+
+  const wrapForStyle: Record<WrapForTypes, ViewStyle | undefined> = {
+    card: styles.wrapForCard,
+    default: undefined,
+  };
   useEffect(() => {
     if (register) {
       register({ id: uuid, ref: a11yMessageRef, hasErrorMessage });

package/src/Flex/Flex.styles.tsx

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

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")}>