@jobber/components-native 0.69.4 → 0.70.0

package/dist/types/src/utils/design/index.d.ts

@@ -1,2 +1,2 @@
-import { tokens as mobileFoundationBase } from "@jobber/design/foundation.native";
-export declare const tokens: typeof mobileFoundationBase;
+import { iosTokens } from "@jobber/design";
+export declare const tokens: typeof iosTokens;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.69.4",
+  "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.0",
-    "@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": "540ed88344aa92c9f29d99113173d6278c54b55a"
+  "gitHead": "02f3d1f70bf477916078b9e03f786783eab62d2e"
 }

package/src/Checkbox/Checkbox.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ColorValue, Pressable, View } from "react-native";
 import { XOR } from "ts-xor";
-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/src/Form/components/FormActionBar/FormActionBar.tsx

@@ -35,7 +35,8 @@ export function FormActionBar({
   const buttonStyle = StyleSheet.flatten([
     styles.saveButton,
     {
-      position: keyboardHeight > 0 ? "absolute" : "relative",
+      position:
+        keyboardHeight > 0 ? ("absolute" as const) : ("relative" as const),
       bottom: 0,
     },
   ]);
@@ -45,7 +46,6 @@ export function FormActionBar({
   };
 
   return (
-    //@ts-expect-error tsc-ci
     <ReanimatedView style={buttonStyle} onLayout={onLayout}>
       {renderStickySection ? (
         renderStickySection(submit, saveButtonLabel, isFormSubmitting)

package/src/Icon/Icon.tsx

@@ -1,15 +1,6 @@
 import React from "react";
-import Svg, { FillProps, Path, SvgProps } from "react-native-svg";
-import {
-  IconColorNames,
-  IconNames,
-  IconSizes,
-  colorsClassMap,
-  getIcon,
-  iconClassMap,
-  iconStyles,
-  sizesClassMap,
-} from "@jobber/design";
+import Svg, { Path } from "react-native-svg";
+import { IconColorNames, IconNames, IconSizes, getIcon } from "@jobber/design";
 
 export interface IconProps {
   /** The icon to show.  */
@@ -46,72 +37,25 @@ export function Icon({
   customColor,
   testID,
 }: IconProps): JSX.Element {
-  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: string) => {
     return <Path key={path} d={path} fill={customColor || svgStyle.fill} />;
   });
 
   return (
-    <Svg style={svgStyle} testID={testID || name} viewBox={viewBox}>
+    <Svg
+      style={{ ...svgStyle, display: "flex" }}
+      testID={testID || name}
+      viewBox={viewBox}
+    >
       {icon}
     </Svg>
   );
 }
-
-/*
- * 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 = ""): SvgProps["style"] & FillProps {
-  const classMap = {
-    ...iconClassMap,
-    ...sizesClassMap,
-    ...colorsClassMap,
-  };
-  const svgStyle = getStylesForClassNames(classNames.split(" "), classMap);
-
-  return { ...svgStyle, display: "flex" };
-}
-
-function getStylesForClassNames(
-  classNames: string[],
-  classMap: Record<string, string>,
-) {
-  return classNames.reduce(
-    (acc, className) => ({
-      ...acc,
-      ...iconStyles[classMap[className] as keyof typeof iconStyles],
-    }),
-    {},
-  );
-}

package/src/InputPressable/InputPressable.style.ts

@@ -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";
 

package/src/Typography/Typography.style.ts

@@ -9,7 +9,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: {
@@ -306,7 +306,7 @@ export const typographyTokens: { [index: string]: TextStyle } = {
 
   smallestSize: {
     fontSize: tokens["typography--fontSize-smallest"],
-    lineHeight: minisculeLineHeight,
+    lineHeight: minusculeLineHeight,
   },
 
   smallerSize: {

package/src/utils/design/index.ts

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