@jobber/components-native 0.76.0 → 0.76.1-JOB-116234-d279b0f.20

package/src/Checkbox/Checkbox.style.ts

@@ -1,36 +1,39 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { tokens as staticTokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-const checkboxDimensions = tokens["space-large"] + tokens["space-smaller"];
+const checkboxDimensions =
+  staticTokens["space-large"] + staticTokens["space-smaller"];
 
-export const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      width: "100%",
+    },
 
-  checkBoxContainer: {
-    width: "100%",
-    justifyContent: "space-between",
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: tokens["space-small"],
-  },
+    checkBoxContainer: {
+      width: "100%",
+      justifyContent: "space-between",
+      flexDirection: "row",
+      alignItems: "center",
+      paddingVertical: tokens["space-small"],
+    },
 
-  label: {
-    flex: 1,
-  },
+    label: {
+      flex: 1,
+    },
 
-  checkbox: {
-    borderRadius: tokens["radius-base"],
-    borderWidth: tokens["border-thick"],
-    justifyContent: "flex-end",
-    width: checkboxDimensions,
-    height: checkboxDimensions,
-    marginLeft: tokens["space-smaller"],
-    borderColor: tokens["color-interactive"],
-  },
+    checkbox: {
+      borderRadius: tokens["radius-base"],
+      borderWidth: tokens["border-thick"],
+      justifyContent: "flex-end",
+      width: checkboxDimensions,
+      height: checkboxDimensions,
+      marginLeft: tokens["space-smaller"],
+      borderColor: tokens["color-interactive"],
+    },
 
-  disabledCheckbox: {
-    borderColor: tokens["color-disabled"],
-  },
+    disabledCheckbox: {
+      borderColor: tokens["color-disabled"],
+    },
+  };
 });

package/src/Checkbox/Checkbox.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { ColorValue, Pressable, View } from "react-native";
 import { XOR } from "ts-xor";
-import { tokens } from "@jobber/design";
-import { styles } from "./Checkbox.style";
+import { useStyles } from "./Checkbox.style";
 import { Text } from "../Text";
 import { Icon } from "../Icon";
 import { FormField } from "../FormField";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 interface CommonCheckboxProps {
   /**
@@ -125,6 +125,8 @@ function CheckboxInternal({
     indeterminate,
   );
 
+  const styles = useStyles();
+
   return (
     <Pressable
       accessibilityRole="checkbox"
@@ -180,6 +182,8 @@ function getBackgroundColor(
   disabled: boolean,
   indeterminate: boolean,
 ): ColorValue {
+  const { tokens } = useAtlantisTheme();
+
   if (checked || indeterminate) {
     if (disabled) {
       return tokens["color-disabled"];

package/src/Checkbox/CheckboxGroup.style.ts

@@ -1,15 +1,16 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    justifyContent: "center",
-    alignItems: "center",
-    paddingHorizontal: tokens["space-base"],
-    paddingVertical: tokens["space-small"],
-  },
-  nestedCheckboxes: {
-    marginLeft: tokens["space-large"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      width: "100%",
+      justifyContent: "center",
+      alignItems: "center",
+      paddingHorizontal: tokens["space-base"],
+      paddingVertical: tokens["space-small"],
+    },
+    nestedCheckboxes: {
+      marginLeft: tokens["space-large"],
+    },
+  };
 });

package/src/Checkbox/CheckboxGroup.tsx

@@ -3,7 +3,7 @@ import { View } from "react-native";
 import isEmpty from "lodash/isEmpty";
 import reduce from "lodash/reduce";
 import { XOR } from "ts-xor";
-import { styles } from "./CheckboxGroup.style";
+import { useStyles } from "./CheckboxGroup.style";
 import { Checkbox, CheckboxProps } from "./Checkbox";
 import { CheckboxElement, CheckboxGroupState } from "./types";
 import {
@@ -166,6 +166,8 @@ function CheckboxGroupInternal({
     return acc && value;
   }
 
+  const styles = useStyles();
+
   return (
     <View>
       {isNested ? (

package/src/Chip/Chip.style.ts

@@ -1,34 +1,36 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { tokens as staticTokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-const chipHeight = tokens["space-larger"] + tokens["space-small"];
+const chipHeight = staticTokens["space-larger"] + staticTokens["space-small"];
 
-export const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    borderRadius: tokens["radius-circle"],
-    flexDirection: "row",
-    height: chipHeight,
-    justifyContent: "center",
-    marginHorizontal: tokens["space-smaller"],
-    marginTop: tokens["space-small"],
-    paddingHorizontal: tokens["space-small"],
-  },
-  iconLeft: {
-    marginHorizontal: tokens["space-smallest"],
-  },
-  chipText: {
-    flexGrow: 1,
-    flexShrink: 1,
-    marginHorizontal: tokens["space-smallest"],
-  },
-  dismissIcon: {
-    backgroundColor: tokens["color-surface"],
-    borderRadius: tokens["radius-circle"],
-    marginLeft: tokens["space-smaller"],
-    padding: tokens["space-smaller"],
-  },
-  activeDismissIcon: {
-    backgroundColor: tokens["color-surface--background"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      alignItems: "center",
+      borderRadius: tokens["radius-circle"],
+      flexDirection: "row",
+      height: chipHeight,
+      justifyContent: "center",
+      marginHorizontal: tokens["space-smaller"],
+      marginTop: tokens["space-small"],
+      paddingHorizontal: tokens["space-small"],
+    },
+    iconLeft: {
+      marginHorizontal: tokens["space-smallest"],
+    },
+    chipText: {
+      flexGrow: 1,
+      flexShrink: 1,
+      marginHorizontal: tokens["space-smallest"],
+    },
+    dismissIcon: {
+      backgroundColor: tokens["color-surface"],
+      borderRadius: tokens["radius-circle"],
+      marginLeft: tokens["space-smaller"],
+      padding: tokens["space-smaller"],
+    },
+    activeDismissIcon: {
+      backgroundColor: tokens["color-surface--background"],
+    },
+  };
 });

package/src/Chip/Chip.tsx

@@ -1,10 +1,10 @@
 import React, { useMemo } from "react";
 import { AccessibilityRole, Pressable, View } from "react-native";
 import { IconNames } from "@jobber/design";
-import { styles } from "./Chip.style";
+import { useStyles } from "./Chip.style";
 import { Icon } from "../Icon";
 import { Typography } from "../Typography";
-import { tokens } from "../utils/design";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export type AccentType = "client" | "invoice" | "job" | "request" | "quote";
 
@@ -57,8 +57,6 @@ export interface ChipProps {
   readonly accent?: AccentType;
 }
 
-const defaultAccentColor = tokens["color-surface--reverse"];
-
 export function Chip({
   icon,
   label,
@@ -70,6 +68,10 @@ export function Chip({
   accessibilityRole = "radio",
   accent,
 }: ChipProps): JSX.Element {
+  const styles = useStyles();
+  const { tokens } = useAtlantisTheme();
+  const defaultAccentColor = tokens["color-surface--reverse"];
+
   const { chipStyle, iconCustomColor, dismissColor } = useMemo(() => {
     const accentColor = accent ? tokens[`color-${accent}`] : defaultAccentColor;
 

package/src/Content/Content.test.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { render } from "@testing-library/react-native";
+import { render, renderHook } from "@testing-library/react-native";
 import { View } from "react-native";
 import { ReactTestInstance } from "react-test-renderer";
 import { Content, ContentProps } from "./Content";
-import { spaceStyles } from "./ContentSpaceAround.style";
-import { verticalStyles } from "./ContentVertical.style";
-import { horizontalStyles } from "./ContentHorizontal.style";
+import { useSpaceAroundStyles } from "./ContentSpaceAround.style";
+import { useVerticalStyles } from "./ContentVertical.style";
+import { useHorizontalStyles } from "./ContentHorizontal.style";
 import { Text } from "../Text";
 
 function getContentComponent(parentView: ReactTestInstance) {
@@ -43,6 +43,16 @@ function setupContent(
   return { ...container, parentView, contentView, contentChildren };
 }
 
+let spaceStyles: ReturnType<typeof useSpaceAroundStyles>;
+let verticalStyles: ReturnType<typeof useVerticalStyles>;
+let horizontalStyles: ReturnType<typeof useHorizontalStyles>;
+
+beforeAll(() => {
+  spaceStyles = renderHook(() => useSpaceAroundStyles()).result.current;
+  verticalStyles = renderHook(() => useVerticalStyles()).result.current;
+  horizontalStyles = renderHook(() => useHorizontalStyles()).result.current;
+});
+
 describe("Space around", () => {
   it("should have a base padding around the component", () => {
     const { contentView } = setupContent();

package/src/Content/Content.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode } from "react";
 import { View } from "react-native";
-import { horizontalStyles } from "./ContentHorizontal.style";
-import { verticalStyles } from "./ContentVertical.style";
-import { spaceStyles } from "./ContentSpaceAround.style";
+import { useHorizontalStyles } from "./ContentHorizontal.style";
+import { useVerticalStyles } from "./ContentVertical.style";
+import { useSpaceAroundStyles } from "./ContentSpaceAround.style";
 
 export type Spacing =
   | "none"
@@ -37,9 +37,13 @@ export function Content({
   childSpacing = "base",
   direction = "vertical",
 }: ContentProps): JSX.Element {
+  const horizontalStyles = useHorizontalStyles();
+  const verticalStyles = useVerticalStyles();
+  const spaceAroundStyles = useSpaceAroundStyles();
+
   const styles = direction === "horizontal" ? horizontalStyles : verticalStyles;
   const styleName = `${spacing}Space` as const;
-  const containerStyle = spaceStyles[styleName];
+  const containerStyle = spaceAroundStyles[styleName];
 
   return (
     <View style={[styles.wrapper, containerStyle]}>{renderChildren()}</View>

package/src/Content/ContentHorizontal.style.ts

@@ -1,38 +1,39 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-
-export const horizontalStyles = StyleSheet.create({
-  wrapper: {
-    flexDirection: "row",
-  },
-
-  childWrapper: {
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: 0,
-  },
-
-  noneChildSpace: {
-    padding: 0,
-  },
-
-  smallestChildSpace: {
-    paddingLeft: tokens["space-smallest"],
-  },
-
-  smallerChildSpace: {
-    paddingLeft: tokens["space-smaller"],
-  },
-
-  smallChildSpace: {
-    paddingLeft: tokens["space-small"],
-  },
-
-  baseChildSpace: {
-    paddingLeft: tokens["space-base"],
-  },
-
-  largeChildSpace: {
-    paddingLeft: tokens["space-large"],
-  },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+
+export const useHorizontalStyles = buildThemedStyles(tokens => {
+  return {
+    wrapper: {
+      flexDirection: "row",
+    },
+
+    childWrapper: {
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: 0,
+    },
+
+    noneChildSpace: {
+      padding: 0,
+    },
+
+    smallestChildSpace: {
+      paddingLeft: tokens["space-smallest"],
+    },
+
+    smallerChildSpace: {
+      paddingLeft: tokens["space-smaller"],
+    },
+
+    smallChildSpace: {
+      paddingLeft: tokens["space-small"],
+    },
+
+    baseChildSpace: {
+      paddingLeft: tokens["space-base"],
+    },
+
+    largeChildSpace: {
+      paddingLeft: tokens["space-large"],
+    },
+  };
 });

package/src/Content/ContentSpaceAround.style.ts

@@ -1,28 +1,29 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const spaceStyles = StyleSheet.create({
-  noneSpace: {
-    padding: 0,
-  },
+export const useSpaceAroundStyles = buildThemedStyles(tokens => {
+  return {
+    noneSpace: {
+      padding: 0,
+    },
 
-  smallestSpace: {
-    padding: tokens["space-smallest"],
-  },
+    smallestSpace: {
+      padding: tokens["space-smallest"],
+    },
 
-  smallerSpace: {
-    padding: tokens["space-smaller"],
-  },
+    smallerSpace: {
+      padding: tokens["space-smaller"],
+    },
 
-  smallSpace: {
-    padding: tokens["space-small"],
-  },
+    smallSpace: {
+      padding: tokens["space-small"],
+    },
 
-  baseSpace: {
-    padding: tokens["space-base"],
-  },
+    baseSpace: {
+      padding: tokens["space-base"],
+    },
 
-  largeSpace: {
-    padding: tokens["space-large"],
-  },
+    largeSpace: {
+      padding: tokens["space-large"],
+    },
+  };
 });

package/src/Content/ContentVertical.style.ts

@@ -1,38 +1,39 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-
-export const verticalStyles = StyleSheet.create({
-  wrapper: {
-    // No style. Default `<View />` styling should suffice.
-    // Only need this key to exist.
-  },
-
-  childWrapper: {
-    // No style. Default `<View />` styling should suffice.
-    // Only need this key to exist.
-  },
-
-  noneChildSpace: {
-    padding: 0,
-  },
-
-  smallestChildSpace: {
-    paddingTop: tokens["space-smallest"],
-  },
-
-  smallerChildSpace: {
-    paddingTop: tokens["space-smaller"],
-  },
-
-  smallChildSpace: {
-    paddingTop: tokens["space-small"],
-  },
-
-  baseChildSpace: {
-    paddingTop: tokens["space-base"],
-  },
-
-  largeChildSpace: {
-    paddingTop: tokens["space-large"],
-  },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+
+export const useVerticalStyles = buildThemedStyles(tokens => {
+  return {
+    wrapper: {
+      // No style. Default `<View />` styling should suffice.
+      // Only need this key to exist.
+    },
+
+    childWrapper: {
+      // No style. Default `<View />` styling should suffice.
+      // Only need this key to exist.
+    },
+
+    noneChildSpace: {
+      padding: 0,
+    },
+
+    smallestChildSpace: {
+      paddingTop: tokens["space-smallest"],
+    },
+
+    smallerChildSpace: {
+      paddingTop: tokens["space-smaller"],
+    },
+
+    smallChildSpace: {
+      paddingTop: tokens["space-small"],
+    },
+
+    baseChildSpace: {
+      paddingTop: tokens["space-base"],
+    },
+
+    largeChildSpace: {
+      paddingTop: tokens["space-large"],
+    },
+  };
 });

package/src/ContentOverlay/ContentOverlay.style.ts

@@ -1,70 +1,72 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { tokens as staticTokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-const modalBorderRadius = tokens["radius-larger"];
-const titleOffsetFromHandle = tokens["space-base"];
+const modalBorderRadius = staticTokens["radius-larger"];
+const titleOffsetFromHandle = staticTokens["space-base"];
 
-export const styles = StyleSheet.create({
-  handle: {
-    width: tokens["space-largest"],
-    height: tokens["space-smaller"] + tokens["space-smallest"],
-    backgroundColor: tokens["color-border"],
-    top: tokens["space-small"],
-    borderRadius: tokens["radius-circle"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    handle: {
+      width: tokens["space-largest"],
+      height: tokens["space-smaller"] + tokens["space-smallest"],
+      backgroundColor: tokens["color-border"],
+      top: tokens["space-small"],
+      borderRadius: tokens["radius-circle"],
+    },
 
-  overlay: {
-    backgroundColor: tokens["color-overlay"],
-  },
+    overlay: {
+      backgroundColor: tokens["color-overlay"],
+    },
 
-  modal: {
-    borderTopLeftRadius: modalBorderRadius,
-    borderTopRightRadius: modalBorderRadius,
-  },
+    modal: {
+      borderTopLeftRadius: modalBorderRadius,
+      borderTopRightRadius: modalBorderRadius,
+    },
 
-  modalForLargeScreens: {
-    width: 640,
-    alignSelf: "center",
-  },
+    modalForLargeScreens: {
+      width: 640,
+      alignSelf: "center",
+    },
 
-  header: {
-    flexDirection: "row",
-    backgroundColor: tokens["color-surface"],
-    paddingTop: titleOffsetFromHandle,
-    zIndex: tokens["elevation-base"],
-    borderTopLeftRadius: modalBorderRadius,
-    borderTopRightRadius: modalBorderRadius,
-    minHeight: tokens["space-extravagant"],
-  },
+    header: {
+      flexDirection: "row",
+      backgroundColor: tokens["color-surface"],
+      paddingTop: titleOffsetFromHandle,
+      zIndex: tokens["elevation-base"],
+      borderTopLeftRadius: modalBorderRadius,
+      borderTopRightRadius: modalBorderRadius,
+      minHeight: tokens["space-extravagant"],
+    },
 
-  headerShadow: {
-    ...tokens["shadow-base"],
-  },
+    headerShadow: {
+      ...tokens["shadow-base"],
+    },
 
-  childrenStyle: {
-    // We need to explicity lower the zIndex because otherwise, the modal content slides over the header shadow.
-    zIndex: -1,
-  },
+    childrenStyle: {
+      // We need to explicity lower the zIndex because otherwise, the modal content slides over the header shadow.
+      zIndex: -1,
+    },
 
-  dismissButton: {
-    alignItems: "center",
-  },
+    dismissButton: {
+      alignItems: "center",
+    },
 
-  hiddenContent: {
-    opacity: 0,
-  },
+    hiddenContent: {
+      opacity: 0,
+    },
 
-  title: {
-    flex: 1,
-    justifyContent: "center",
-    paddingLeft: tokens["space-base"],
-  },
+    title: {
+      flex: 1,
+      justifyContent: "center",
+      paddingLeft: tokens["space-base"],
+    },
 
-  titleWithoutDismiss: {
-    paddingRight: tokens["space-base"],
-  },
+    titleWithoutDismiss: {
+      paddingRight: tokens["space-base"],
+    },
 
-  titleWithDismiss: {
-    paddingRight: tokens["space-smaller"],
-  },
+    titleWithDismiss: {
+      paddingRight: tokens["space-smaller"],
+    },
+  };
 });