@jobber/components-native 0.69.5-dependabot.8 → 0.70.1-CLEANUPex-e95f16e.2

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.5-dependabot.8+d8e3efef",
+  "version": "0.70.1-CLEANUPex-e95f16e.2+e95f16e9",
   "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": "e95f16e9ba785cb1e14de3f3cf39096563784f86"
 }

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,
 })();

package/src/utils/meta/meta.json

@@ -0,0 +1,67 @@
+{
+  "exportedComponents": [
+    "ActionItem",
+    "ActionItemGroup",
+    "ActionLabel",
+    "ActivityIndicator",
+    "AtlantisContext.Provider",
+    "AtlantisContext.Consumer",
+    "AutoLink",
+    "Banner",
+    "BottomSheet",
+    "BottomSheetOption",
+    "Button",
+    "ButtonGroup",
+    "ButtonGroup.PrimaryAction",
+    "ButtonGroup.SecondaryAction",
+    "Card",
+    "Checkbox",
+    "CheckboxGroup",
+    "Chip",
+    "Content",
+    "ContentOverlay",
+    "Disclosure",
+    "Divider",
+    "EmptyState",
+    "ErrorMessageContext.Provider",
+    "ErrorMessageContext.Consumer",
+    "ErrorMessageProvider",
+    "ErrorMessageWrapper",
+    "Flex",
+    "Form",
+    "FormMessage",
+    "AtlantisFormContext.Provider",
+    "AtlantisFormContext.Consumer",
+    "FormatFile",
+    "FormField",
+    "Glimmer",
+    "Heading",
+    "Icon",
+    "IconButton",
+    "InputCurrency",
+    "InputDate",
+    "InputEmail",
+    "InputFieldWrapper",
+    "InputNumber",
+    "InputPassword",
+    "InputPressable",
+    "FilterButton",
+    "InputSearch",
+    "InputText",
+    "InputAccessoriesContext.Provider",
+    "InputAccessoriesContext.Consumer",
+    "InputAccessoriesProvider",
+    "InputTime",
+    "Menu",
+    "ProgressBar",
+    "Option",
+    "Select",
+    "StatusLabel",
+    "Switch",
+    "Text",
+    "TextList",
+    "ThumbnailList",
+    "Toast",
+    "TypographyGestureDetector"
+  ]
+}

package/src/utils/meta/meta.test.tsx

@@ -0,0 +1,71 @@
+import * as fs from "fs/promises";
+import * as allExports from "../../index";
+
+jest.mock("../../AutoLink/clipboard", () => {
+  return {
+    copyTextToClipboard: jest.fn(),
+  };
+});
+
+describe("meta", () => {
+  // If this test fails, please update meta.json accordingly.
+  it("verifies that the meta.json file is up to date", async () => {
+    const meta = await fs.readFile(`${__dirname}/meta.json`, "utf-8");
+    const allNames = findComponentNamesDeep(allExports);
+
+    expect(JSON.parse(meta)).toStrictEqual({
+      exportedComponents: allNames,
+    });
+  });
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isComponent(name: string, value: any): boolean {
+  const isFirstLetterUppercase = /^[A-Z]/.test(name);
+  const isFunctionComponent = typeof value === "function";
+
+  return isFirstLetterUppercase && isFunctionComponent;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isContext(value: any): boolean {
+  return (
+    value &&
+    typeof value === "object" &&
+    Object.prototype.hasOwnProperty.call(value, "Provider") &&
+    Object.prototype.hasOwnProperty.call(value, "Consumer")
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isForwardedRef(name: string, value: any): boolean {
+  const isFirstLetterUppercase = /^[A-Z]/.test(name);
+
+  return (
+    isFirstLetterUppercase &&
+    value &&
+    typeof value === "object" &&
+    typeof value.render === "function"
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function findComponentNamesDeep(objectOrFunction: any, name?: string) {
+  const entries = [...Object.entries(objectOrFunction)];
+
+  return entries.reduce<string[]>((allNames, [k, v]) => {
+    if (isContext(v)) {
+      allNames.push(`${k}.Provider`, `${k}.Consumer`);
+    } else if (isForwardedRef(k, v)) {
+      allNames.push(k);
+    } else if (isComponent(k, v)) {
+      const thisName = name ? `${name}.${k}` : k;
+      allNames.push(thisName);
+
+      const childComponents = findComponentNamesDeep(v, k);
+      allNames.push(...childComponents);
+    }
+
+    return allNames;
+  }, []);
+}