@jobber/components-native 0.69.2 → 0.69.3-SCOTTTHd.45

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.69.2",
+    "version": "0.69.3-SCOTTTHd.45+8d76eff1",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -36,8 +36,6 @@
         "build:clean": "rm -rf ./dist"
     },
     "dependencies": {
-        "@jobber/design": "^0.62.2",
-        "@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": "286b357ffa0945aad45139fa031bee27bbb479eb"
+    "gitHead": "8d76eff16e7f4fad97727aff66cfb2435b30480a"
 }

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, pathStyle, 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(Path, { key: path, d: path, fill: customColor || pathStyle.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/Text/Text.js

@@ -16,15 +16,16 @@ export const TEXT_MAX_SCALED_FONT_SIZES = {
     text: MAX_TEXT_FONT_SIZE_SCALE,
     textSupporting: tokens["typography--fontSize-base"],
 };
-export function Text({ level = "text", variation = "base", emphasis, allowFontScaling = true, adjustsFontSizeToFit = false, maxLines = "unlimited", align, children, reverseTheme = false, strikeThrough = false, hideFromScreenReader = false, maxFontScaleSize, selectable, }) {
+export function Text({ level = "text", variation = "base", emphasis, allowFontScaling = true, adjustsFontSizeToFit = false, maxLines = "unlimited", align, children, reverseTheme = false, strikeThrough = false, italic = false, hideFromScreenReader = false, maxFontScaleSize, selectable, }) {
     const accessibilityRole = "text";
-    return (React.createElement(Typography, Object.assign({ color: variation, fontFamily: "base", fontStyle: "regular", fontWeight: getFontWeight({ level, emphasis }), maxFontScaleSize: maxFontScaleSize || TEXT_MAX_SCALED_FONT_SIZES[level], selectable: selectable }, Object.assign(Object.assign({}, levelStyles[level]), { allowFontScaling,
+    return (React.createElement(Typography, Object.assign({ color: variation, fontFamily: "base", fontStyle: italic ? "italic" : "regular", fontWeight: getFontWeight({ level, emphasis }), maxFontScaleSize: maxFontScaleSize || TEXT_MAX_SCALED_FONT_SIZES[level], selectable: selectable }, Object.assign(Object.assign({}, levelStyles[level]), { allowFontScaling,
         align,
         adjustsFontSizeToFit,
         accessibilityRole,
         reverseTheme,
         maxLines,
         strikeThrough,
+        italic,
         hideFromScreenReader })), children));
 }
 function getFontWeight({ level, emphasis, }) {

package/dist/src/Typography/Typography.js

@@ -27,6 +27,9 @@ function InternalTypography({ fontFamily, fontStyle, fontWeight, transform, colo
     if (strikeThrough) {
         style.push(styles.strikeThrough);
     }
+    if (fontStyle === "italic") {
+        style.push(styles.italic);
+    }
     const numberOfLinesForNativeText = maxNumberOfLines[maxLines];
     const text = getTransformedText(children, transform);
     const accessibilityProps = hideFromScreenReader

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",
@@ -25,6 +25,21 @@ const deviceFonts = {
     baseRegularExtraBold: {
         fontFamily: "inter-extrabold",
     },
+    baseItalicRegular: {
+        fontFamily: "inter-italic",
+    },
+    baseItalicMedium: {
+        fontFamily: "inter-italic-medium",
+    },
+    baseItalicBold: {
+        fontFamily: "inter-italic-bold",
+    },
+    baseItalicSemiBold: {
+        fontFamily: "inter-italic-semibold",
+    },
+    baseItalicExtraBold: {
+        fontFamily: "inter-italic-extrabold",
+    },
     displayRegularBold: {
         fontFamily: "jobberpro-bd",
     },
@@ -48,7 +63,9 @@ const fonts = Platform.select({
 /**
  * Reusable typography tokens to ensure consistency for any client facing texts.
  */
-export const typographyTokens = Object.assign(Object.assign({}, fonts), { startAlign: {
+export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic: {
+        fontStyle: "italic",
+    }, startAlign: {
         textAlign: "left",
     }, endAlign: {
         textAlign: "right",
@@ -158,7 +175,7 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { startA
         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,
 })();