@jobber/components-native 0.69.5-dependabot.8 → 0.70.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.69.5-dependabot.8+d8e3efef",
+    "version": "0.70.0",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -36,8 +36,6 @@
         "build:clean": "rm -rf ./dist"
     },
     "dependencies": {
-        "@jobber/design": "^0.63.1-dependabot.16+d8e3efef",
-        "@jobber/hooks": "^2.10.2",
         "@react-native-clipboard/clipboard": "^1.11.2",
         "@react-native-picker/picker": "^2.4.10",
         "autolinker": "^4.0.0",
@@ -70,8 +68,8 @@
     "peerDependencies": {
         "@babel/core": "^7.4.5",
         "@react-native-community/datetimepicker": ">=6.7.0",
-        "date-fns": "^2.0.0",
-        "date-fns-tz": "*",
+        "date-fns": "^2.30.0",
+        "date-fns-tz": "^2.0.0",
         "react": "^18.2.0",
         "react-intl": "^6.4.2",
         "react-native": ">=0.69.2",
@@ -84,5 +82,5 @@
         "react-native-safe-area-context": "^4.5.2",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "d8e3efef36c7c9bea335e87fceffd434a7ab853b"
+    "gitHead": "02f3d1f70bf477916078b9e03f786783eab62d2e"
 }

package/dist/src/Checkbox/Checkbox.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Pressable, View } from "react-native";
-import { tokens } from "@jobber/design/foundation";
+import { tokens } from "@jobber/design";
 import { styles } from "./Checkbox.style";
 import { Text } from "../Text";
 import { Icon } from "../Icon";

package/dist/src/Form/components/FormActionBar/FormActionBar.js

@@ -15,7 +15,5 @@ export function FormActionBar({ keyboardHeight, submit, isFormSubmitting, saveBu
     const onLayout = (event) => {
         setSaveButtonHeight && setSaveButtonHeight(event.nativeEvent.layout.height);
     };
-    return (
-    //@ts-expect-error tsc-ci
-    React.createElement(ReanimatedView, { style: buttonStyle, onLayout: onLayout }, renderStickySection ? (renderStickySection(submit, saveButtonLabel, isFormSubmitting)) : (React.createElement(FormSaveButton, { setSecondaryActionLoading: setSecondaryActionLoading, primaryAction: submit, loading: isFormSubmitting, label: saveButtonLabel, secondaryActions: secondaryActions }))));
+    return (React.createElement(ReanimatedView, { style: buttonStyle, onLayout: onLayout }, renderStickySection ? (renderStickySection(submit, saveButtonLabel, isFormSubmitting)) : (React.createElement(FormSaveButton, { setSecondaryActionLoading: setSecondaryActionLoading, primaryAction: submit, loading: isFormSubmitting, label: saveButtonLabel, secondaryActions: secondaryActions }))));
 }

package/dist/src/Icon/Icon.js

@@ -1,49 +1,16 @@
 import React from "react";
 import Svg, { Path } from "react-native-svg";
-import { colorsClassMap, getIcon, iconClassMap, iconStyles, sizesClassMap, } from "@jobber/design";
+import { getIcon } from "@jobber/design";
 export function Icon({ name, color, size = "base", customColor, testID, }) {
-    const { svgClassNames, pathClassNames, paths, viewBox } = getIcon({
+    const { svgStyle, paths, viewBox } = getIcon({
         name,
         color,
         size,
+        platform: "mobile",
+        format: "js",
     });
-    /*
-     *  This is to fix a bug where icons with built-in colours do not respect
-     *  their color property. At time of writing, if you pass a color to getIcon,
-     *  pathClassNames will return the color class first in pathClassNames.
-     *  getSvgStyle applies styles in order, so the styles in the last class
-     *  processed take precedence.
-     *
-     *  This fix reverses the order of pathClassNames, so any color-specific
-     *  CSS classes are processed last. The order of classes in pathClassNames
-     *  is not contractual, so this is potentially fragile if there are updates
-     *  to the @jobber/design package it comes from.
-     */
-    const reversedPathClassNames = pathClassNames.split(" ").reverse().join(" ");
-    const svgStyle = getSvgStyle(svgClassNames + " " + reversedPathClassNames);
     const icon = paths.map((path) => {
         return React.createElement(Path, { key: path, d: path, fill: customColor || svgStyle.fill });
     });
-    return (React.createElement(Svg, { style: svgStyle, testID: testID || name, viewBox: viewBox }, icon));
-}
-/*
- * get svg styles based on the class names
- * @param className - list of hashed names separated by space - "_2GsLyQLHv8yNULHeXGdver _1ANbiqwd8qgeLaumvLs27n"
- * @default ""
- * @return - style object for the icon  - {"display": "flex" "height": 24, "width": 24, "verticalAlign": "middle" }
- *
- * Since the class names are hashed, we use the [name]ClassMap to find the actual class name. For example if we get
- * "_2GsLyQLHv8yNULHeXGdver _1ANbiqwd8qgeLaumvLs27n", it might map to ".icon .base". Then using the mapped class names,
- * we get the style from the css files which will be something like {"display": "flex" "height": 24, "width": 24, "verticalAlign": "middle" }
- *
- * Atlantis returns "display: inline-block" for icons, but since React Native doesn't support that, we override it with
- * the default "display" value for React Native which is "flex"
- */
-function getSvgStyle(classNames = "") {
-    const classMap = Object.assign(Object.assign(Object.assign({}, iconClassMap), sizesClassMap), colorsClassMap);
-    const svgStyle = getStylesForClassNames(classNames.split(" "), classMap);
-    return Object.assign(Object.assign({}, svgStyle), { display: "flex" });
-}
-function getStylesForClassNames(classNames, classMap) {
-    return classNames.reduce((acc, className) => (Object.assign(Object.assign({}, acc), iconStyles[classMap[className]])), {});
+    return (React.createElement(Svg, { style: Object.assign(Object.assign({}, svgStyle), { display: "flex" }), testID: testID || name, viewBox: viewBox }, icon));
 }

package/dist/src/InputPressable/InputPressable.style.js

@@ -1,4 +1,4 @@
-import { tokens } from "@jobber/design/foundation";
+import { tokens } from "@jobber/design";
 import { StyleSheet } from "react-native";
 import { typographyStyles } from "../Typography/Typography.style";
 export const styles = StyleSheet.create({

package/dist/src/Typography/Typography.style.js

@@ -8,7 +8,7 @@ const largerLineHeight = tokens["typography--lineHeight-larger"];
 const largeLineHeight = tokens["typography--lineHeight-large"];
 const baseLineHeight = tokens["typography--lineHeight-base"];
 const tightLineHeight = tokens["typography--lineHeight-tight"];
-const minisculeLineHeight = tokens["typography--lineHeight-miniscule"];
+const minusculeLineHeight = tokens["typography--lineHeight-minuscule"];
 const deviceFonts = {
     baseRegularRegular: {
         fontFamily: "inter-regular",
@@ -175,7 +175,7 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic
         color: tokens["color-disabled"],
     }, smallestSize: {
         fontSize: tokens["typography--fontSize-smallest"],
-        lineHeight: minisculeLineHeight,
+        lineHeight: minusculeLineHeight,
     }, smallerSize: {
         fontSize: tokens["typography--fontSize-smaller"],
         lineHeight: tightLineHeight,

package/dist/src/utils/design/index.js

@@ -1,6 +1,7 @@
 import { Platform } from "react-native";
+import { androidTokens, iosTokens } from "@jobber/design";
 export const tokens = Platform.select({
-    ios: () => require("@jobber/design/foundation.ios").tokens,
-    android: () => require("@jobber/design/foundation.android").tokens,
-    default: () => require("@jobber/design/foundation.native").tokens,
+    ios: () => iosTokens,
+    android: () => androidTokens,
+    default: () => androidTokens,
 })();