@jobber/components-native 0.77.1 → 0.78.0

package/dist/src/Content/ContentHorizontal.style.js

@@ -1,30 +1,31 @@
-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/dist/src/Content/ContentSpaceAround.style.js

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

package/dist/src/Content/ContentVertical.style.js

@@ -1,30 +1,31 @@
-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/dist/src/ContentOverlay/ContentOverlay.js

@@ -4,13 +4,13 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AccessibilityInfo, Platform, View, findNodeHandle, useWindowDimensions, } from "react-native";
 import { Portal } from "react-native-portalize";
 import { useKeyboardVisibility } from "./hooks/useKeyboardVisibility";
-import { styles } from "./ContentOverlay.style";
+import { useStyles } from "./ContentOverlay.style";
 import { useViewLayoutHeight } from "./hooks/useViewLayoutHeight";
 import { useIsScreenReaderEnabled } from "../hooks";
 import { IconButton } from "../IconButton";
-import { tokens } from "../utils/design";
 import { Heading } from "../Heading";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 export const ContentOverlay = forwardRef(ContentOverlayPortal);
 const ContentOverlayModal = forwardRef(ContentOverlayInternal);
 // eslint-disable-next-line max-statements
@@ -18,6 +18,7 @@ function ContentOverlayInternal({ children, title, accessibilityLabel, fullScree
     isDraggable = onBeforeExit ? false : isDraggable;
     const isCloseableOnOverlayTap = onBeforeExit ? false : true;
     const { t } = useAtlantisI18n();
+    const { tokens } = useAtlantisTheme();
     const { width: windowWidth, height: windowHeight } = useWindowDimensions();
     const insets = useSafeAreaInsets();
     const [position, setPosition] = useState("initial");
@@ -64,6 +65,7 @@ function ContentOverlayInternal({ children, title, accessibilityLabel, fullScree
         childrenHeight,
         windowHeight,
     ]);
+    const styles = useStyles();
     const modalStyle = [
         styles.modal,
         windowWidth > 640 ? styles.modalForLargeScreens : undefined,

package/dist/src/ContentOverlay/ContentOverlay.style.js

@@ -1,55 +1,56 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-const modalBorderRadius = tokens["radius-larger"];
-const titleOffsetFromHandle = tokens["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"],
-    },
-    overlay: {
-        backgroundColor: tokens["color-overlay"],
-    },
-    modal: {
-        borderTopLeftRadius: modalBorderRadius,
-        borderTopRightRadius: modalBorderRadius,
-    },
-    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"],
-    },
-    headerShadow: Object.assign({}, tokens["shadow-base"]),
-    childrenStyle: {
-        // We need to explicity lower the zIndex because otherwise, the modal content slides over the header shadow.
-        zIndex: -1,
-    },
-    dismissButton: {
-        alignItems: "center",
-    },
-    hiddenContent: {
-        opacity: 0,
-    },
-    title: {
-        flex: 1,
-        justifyContent: "center",
-        paddingLeft: tokens["space-base"],
-    },
-    titleWithoutDismiss: {
-        paddingRight: tokens["space-base"],
-    },
-    titleWithDismiss: {
-        paddingRight: tokens["space-smaller"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    const modalBorderRadius = tokens["radius-larger"];
+    const titleOffsetFromHandle = tokens["space-base"];
+    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"],
+        },
+        modal: {
+            borderTopLeftRadius: modalBorderRadius,
+            borderTopRightRadius: modalBorderRadius,
+        },
+        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"],
+        },
+        headerShadow: Object.assign({}, tokens["shadow-base"]),
+        childrenStyle: {
+            // We need to explicity lower the zIndex because otherwise, the modal content slides over the header shadow.
+            zIndex: -1,
+        },
+        dismissButton: {
+            alignItems: "center",
+        },
+        hiddenContent: {
+            opacity: 0,
+        },
+        title: {
+            flex: 1,
+            justifyContent: "center",
+            paddingLeft: tokens["space-base"],
+        },
+        titleWithoutDismiss: {
+            paddingRight: tokens["space-base"],
+        },
+        titleWithDismiss: {
+            paddingRight: tokens["space-smaller"],
+        },
+    };
 });

package/dist/src/Disclosure/Disclosure.js

@@ -2,17 +2,19 @@ import React, { useState } from "react";
 import { TouchableOpacity, View } from "react-native";
 import Reanimated, { Easing, useAnimatedStyle, useSharedValue, 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;
-export function Disclosure({ content, header, open, onToggle, isEmpty, animationDuration = tokens["timing-slowest"], }) {
+export function Disclosure({ content, header, open, onToggle, isEmpty, animationDuration = staticTokens["timing-slowest"], }) {
+    const styles = useStyles();
     return (React.createElement(View, { style: styles.container },
-        React.createElement(DisclosureHeader, { header, onToggle, isEmpty, open, animationDuration }),
-        React.createElement(DisclosureContent, { content, open, animationDuration })));
+        React.createElement(DisclosureHeader, { header, onToggle, isEmpty, open, animationDuration, styles }),
+        React.createElement(DisclosureContent, { content, open, animationDuration, styles })));
 }
-function DisclosureHeader({ header, onToggle, isEmpty, open, animationDuration, }) {
+function DisclosureHeader({ header, onToggle, isEmpty, open, animationDuration, styles, }) {
     const rotateZ = useSharedValue(0);
     rotateZ.value = withTiming(open ? 0 : -180, {
         easing: Easing.bezier(...EASE_CUBIC_IN_OUT),
@@ -23,13 +25,14 @@ function DisclosureHeader({ header, onToggle, isEmpty, open, animationDuration,
             transform: [{ rotateZ: `${rotateZ.value}deg` }],
         };
     });
+    const { tokens } = useAtlantisTheme();
     return (React.createElement(TouchableOpacity, { activeOpacity: tokens["opacity-pressed"], onPress: onToggle, disabled: isEmpty },
         React.createElement(View, { style: styles.headerContainer },
             header,
             !isEmpty && (React.createElement(ReanimatedView, { style: [animatedStyle] },
                 React.createElement(Icon, { name: "arrowUp", color: "grey" }))))));
 }
-function DisclosureContent({ content, open, animationDuration, }) {
+function DisclosureContent({ content, open, animationDuration, styles, }) {
     const [maxHeight, setMaxHeight] = useState(0);
     const height = useSharedValue(0);
     const onContentLayoutChange = (event) => {

package/dist/src/Disclosure/Disclosure.style.js

@@ -1,21 +1,22 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    container: {
-        width: "100%",
-    },
-    headerContainer: {
-        flexDirection: "row",
-        alignItems: "flex-start",
-        justifyContent: "space-between",
-    },
-    countColumn: {
-        paddingRight: tokens["space-base"],
-    },
-    titleContainer: {
-        flexDirection: "row",
-    },
-    contentContainer: {
-        paddingTop: tokens["space-small"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            width: "100%",
+        },
+        headerContainer: {
+            flexDirection: "row",
+            alignItems: "flex-start",
+            justifyContent: "space-between",
+        },
+        countColumn: {
+            paddingRight: tokens["space-base"],
+        },
+        titleContainer: {
+            flexDirection: "row",
+        },
+        contentContainer: {
+            paddingTop: tokens["space-small"],
+        },
+    };
 });

package/dist/src/Divider/Divider.js

@@ -1,8 +1,10 @@
 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";
 export function Divider({ size = "base", direction = "horizontal", testID = "Divider", }) {
+    const horizontalStyles = useHorizontalStyles();
+    const verticalStyles = useVerticalStyles();
     const directionalStyles = direction === "horizontal" ? horizontalStyles : verticalStyles;
     const style = [
         directionalStyles.base,

package/dist/src/Divider/DividerHorizontal.style.js

@@ -1,23 +1,24 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-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,
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+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/dist/src/Divider/DividerVertical.style.js

@@ -1,26 +1,27 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-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"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+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/dist/src/EmptyState/EmptyState.js

@@ -1,6 +1,6 @@
 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";
@@ -12,6 +12,7 @@ function ButtonAction({ action, type }) {
     return React.createElement(Button, Object.assign({ fullWidth: false, type: type }, action));
 }
 export function EmptyState({ icon, title, description, primaryAction, secondaryAction, iconColor = "blue", }) {
+    const styles = useStyles();
     return (React.createElement(Content, null,
         icon && (React.createElement(View, { style: styles.icon },
             React.createElement(Icon, { name: icon, size: "large", color: iconColor }))),

package/dist/src/EmptyState/EmptyState.style.js

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

package/dist/src/ErrorMessageWrapper/ErrorMessageWrapper.js

@@ -2,13 +2,9 @@ import React, { useEffect, useRef } from "react";
 import { View } 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";
-const wrapForStyle = {
-    card: styles.wrapForCard,
-    default: undefined,
-};
 /**
  * Adds an error message below the children but ensure the message gets read
  * out first.
@@ -22,6 +18,11 @@ export function ErrorMessageWrapper({ message, wrapFor = "default", children, })
     const a11yMessageRef = useRef(null);
     const { current: uuid } = useRef(v4());
     const hasErrorMessage = Boolean(message);
+    const styles = useStyles();
+    const wrapForStyle = {
+        card: styles.wrapForCard,
+        default: undefined,
+    };
     useEffect(() => {
         if (register) {
             register({ id: uuid, ref: a11yMessageRef, hasErrorMessage });

package/dist/src/ErrorMessageWrapper/ErrorMessageWrapper.style.js

@@ -1,31 +1,32 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-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%",
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+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%",
+        },
+    };
 });