@jobber/components-native 0.33.0 → 0.34.0

package/dist/types/src/AtlantisContext/AtlantisContext.d.ts

@@ -26,6 +26,10 @@ export interface AtlantisContextProps {
      * Grabs the decimal separator and group separator based on locale
      */
     readonly floatSeparators: Record<"decimal" | "group", string>;
+    /**
+     * The currency symbol Atlantis components will use
+     */
+    readonly currencySymbol: string;
 }
 export declare const defaultValues: AtlantisContextProps;
 export declare const AtlantisContext: import("react").Context<AtlantisContextProps>;

package/dist/types/src/InputCurrency/InputCurrency.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { FormatNumberOptions } from "react-intl";
+import { ControllerRenderProps, FieldValues } from "react-hook-form";
+import { InputTextProps } from "../InputText";
+export interface InputCurrencyProps extends Omit<InputTextProps, "keyboard" | "onChangeText" | "value" | "defaultValue"> {
+    /**
+     * Whether to display the user's currency symbol or not
+     * Default value is true
+     */
+    readonly showCurrencySymbol?: boolean;
+    /**
+     * The minimum decimal places for the currency number
+     * Default value is 2
+     */
+    readonly decimalPlaces?: number;
+    /**
+     * The maximum decimal places for the currency number
+     * Default value is 5
+     */
+    readonly maxDecimalPlaces?: number;
+    /**
+     * The maximum length of the input
+     * Default value is 10
+     */
+    readonly maxLength?: number;
+    onChange?(newValue?: number | string | undefined): void;
+    value?: number;
+    defaultValue?: number;
+    keyboard?: "decimal-pad" | "numbers-and-punctuation";
+}
+export declare const getInternalValue: (props: InputCurrencyProps, field: ControllerRenderProps<FieldValues, string>, formatNumber: (value: number | bigint, opts?: FormatNumberOptions | undefined) => string) => string;
+export declare function InputCurrency(props: InputCurrencyProps): JSX.Element;

package/dist/types/src/InputCurrency/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_CURRENCY_SYMBOL = "$";

package/dist/types/src/InputCurrency/index.d.ts

@@ -0,0 +1,3 @@
+export { InputCurrency } from "./InputCurrency";
+export * from "./utils";
+export * from "./constants";

package/dist/types/src/InputCurrency/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    notANumberError: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/src/InputCurrency/utils.d.ts

@@ -0,0 +1,9 @@
+export declare function countDecimal(value: number): number;
+export declare function limitInputWholeDigits(value: number, maxInputLength: number): number;
+export declare function configureDecimal(decimalCount: number, maxDecimalPlaces: number, transformedValue: string, decimalPlaces: number): number;
+export declare function convertToNumber(value: string): string | number;
+export declare const checkLastChar: (stringValue: string) => boolean;
+export declare const isValidNumber: (numberedValue: string | number | undefined) => boolean;
+export declare const getDecimalNumbers: (value: string, decimalSeparator: string) => string;
+export declare const parseGivenInput: (value: string | undefined, decimalSeparator: string) => [number, string | undefined, string];
+export declare const NUMBER_VALIDATION_REGEX: RegExp;

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

@@ -18,6 +18,7 @@ export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
+export * from "./InputCurrency";
 export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputPressable";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -38,9 +38,6 @@
     "@jobber/design": "^0.42.0",
     "@react-native-picker/picker": "^2.4.10",
     "lodash": "^4.17.21",
-    "lodash.chunk": "^4.2.0",
-    "lodash.debounce": "^4.0.8",
-    "lodash.identity": "^3.0.0",
     "react-hook-form": "^7.30.0",
     "react-intl": "^6.4.2",
     "react-native-gesture-handler": "^2.10.2",
@@ -73,5 +70,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "1ed63d6aa25671ec81fd10f96ac95ba4986b3d7b"
+  "gitHead": "74d12fc40b92e5b3575256deaba1840a96387764"
 }

package/src/AtlantisContext/AtlantisContext.test.tsx

@@ -19,6 +19,7 @@ const providerValues: AtlantisContextProps = {
     return;
   },
   floatSeparators: { decimal: ".", group: "," },
+  currencySymbol: "€",
 };
 
 describe("AtlantisContext", () => {

package/src/AtlantisContext/AtlantisContext.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { createContext, useContext } from "react";
 import RNLocalize from "react-native-localize";
+import { DEFAULT_CURRENCY_SYMBOL } from "../InputCurrency/constants";
 
 export interface AtlantisContextProps {
   /**
@@ -34,6 +35,11 @@ export interface AtlantisContextProps {
    * Grabs the decimal separator and group separator based on locale
    */
   readonly floatSeparators: Record<"decimal" | "group", string>;
+
+  /**
+   * The currency symbol Atlantis components will use
+   */
+  readonly currencySymbol: string;
 }
 
 export const defaultValues: AtlantisContextProps = {
@@ -45,6 +51,7 @@ export const defaultValues: AtlantisContextProps = {
     return;
   },
   floatSeparators: { group: ",", decimal: "." },
+  currencySymbol: DEFAULT_CURRENCY_SYMBOL,
 };
 
 export const AtlantisContext = createContext(defaultValues);

package/src/Flex/Flex.tsx

@@ -1,6 +1,6 @@
 import React, { Children, PropsWithChildren } from "react";
 import { View } from "react-native";
-import chunk from "lodash.chunk";
+import chunk from "lodash/chunk";
 import { columnStyles, gapStyles, styles } from "./Flex.styles";
 import { FlexProps } from "./types";
 import { Content } from "../Content";

package/src/InputCurrency/InputCurrency.test.tsx

@@ -0,0 +1,158 @@
+import React from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import RNLocalize from "react-native-localize";
+import { InputCurrency } from "./InputCurrency";
+import { AtlantisContext, AtlantisContextProps } from "../AtlantisContext";
+
+const mockCurrencySymbol = "£";
+const atlantisContext: AtlantisContextProps = {
+  currencySymbol: mockCurrencySymbol,
+  timeFormat: "p",
+  timeZone: RNLocalize.getTimeZone(),
+  isOnline: true,
+  onLogError: err => {
+    return err;
+  },
+  floatSeparators: { group: ",", decimal: "." },
+};
+const placeHolder = "Price";
+describe.each([{ includeATLContext: true }, { includeATLContext: false }])(
+  "Has AtlantisContext: $includeATLContext",
+  ({ includeATLContext }) => {
+    function setup({
+      showCurrencySymbol,
+      name,
+    }: {
+      showCurrencySymbol?: boolean;
+      name: string;
+    }) {
+      if (includeATLContext) {
+        return render(
+          <AtlantisContext.Provider value={atlantisContext}>
+            <InputCurrency
+              placeholder={placeHolder}
+              name={name}
+              showCurrencySymbol={showCurrencySymbol}
+            />
+          </AtlantisContext.Provider>,
+        );
+      } else {
+        return render(
+          <InputCurrency
+            placeholder={placeHolder}
+            name={name}
+            showCurrencySymbol={showCurrencySymbol}
+          />,
+        );
+      }
+    }
+
+    it("renders with currency symbol when the value is input", () => {
+      const { getByText, getByLabelText } = setup({
+        name: "sample",
+      });
+      const value = 123.459119;
+      const expectedCurrencySymbol = includeATLContext
+        ? mockCurrencySymbol
+        : "$";
+      fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+
+      expect(getByText(expectedCurrencySymbol)).toBeDefined();
+    });
+
+    it("renders without currency symbol", () => {
+      const { queryByText, getByLabelText } = setup({
+        name: "sample",
+        showCurrencySymbol: false,
+      });
+      const value = 123.459119;
+
+      fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+      expect(queryByText(mockCurrencySymbol)).toBeNull();
+    });
+
+    it("displays a maximum 5 decimal places", async () => {
+      const value = 123.459119;
+      const { getByLabelText, getByDisplayValue } = setup({
+        name: "sample",
+      });
+
+      fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+      fireEvent(getByLabelText("Price"), "blur");
+      fireEvent(getByLabelText("Price"), "blur");
+
+      await waitFor(() => {
+        expect(getByDisplayValue("123.45912")).toBeDefined();
+      });
+    });
+
+    it("displays a minimum of 2 decimal places", async () => {
+      const value = 123.11;
+      const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+
+      fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+      fireEvent(getByLabelText("Price"), "blur");
+
+      await waitFor(() => {
+        expect(getByDisplayValue("123.11")).toBeDefined();
+      });
+    });
+
+    it("displays a negative value", async () => {
+      const value = -509.543;
+      const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+
+      fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+      fireEvent(getByLabelText("Price"), "blur");
+
+      await waitFor(() => {
+        expect(getByDisplayValue(`${value}`)).toBeDefined();
+      });
+    });
+
+    it("internationalizes the display Value in the input", async () => {
+      const value = 5098.543;
+      const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+
+      fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+      fireEvent(getByLabelText("Price"), "blur");
+
+      await waitFor(() => {
+        expect(getByDisplayValue("5,098.543")).toBeDefined();
+      });
+    });
+
+    it("limits the whole number integer to 10 whole integers by default", async () => {
+      const value = 12345678998;
+      const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+
+      fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+
+      await waitFor(() => {
+        expect(getByDisplayValue("1,234,567,899")).toBeDefined();
+      });
+    });
+
+    it("rounds the decimal point if there are more decimal numbers than the maxDecimalCount", async () => {
+      const value = 123456.789988;
+      const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+
+      fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+      fireEvent(getByLabelText("Price"), "blur");
+
+      await waitFor(() => {
+        expect(getByDisplayValue("123,456.78999")).toBeDefined();
+      });
+    });
+
+    it("displays 0 on blur if there is no inputted value or the field.value is undefined", async () => {
+      const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+
+      fireEvent(getByLabelText("Price"), "blur");
+
+      await waitFor(() => {
+        expect(getByDisplayValue("0")).toBeDefined();
+      });
+    });
+  },
+);

package/src/InputCurrency/InputCurrency.tsx

@@ -0,0 +1,206 @@
+import React, { useState } from "react";
+import { FormatNumberOptions, useIntl } from "react-intl";
+import { Platform } from "react-native";
+import { ControllerRenderProps, FieldValues } from "react-hook-form";
+import {
+  NUMBER_VALIDATION_REGEX,
+  checkLastChar,
+  configureDecimal,
+  convertToNumber,
+  isValidNumber,
+  limitInputWholeDigits,
+  parseGivenInput,
+} from "./utils";
+import { messages } from "./messages";
+import { useAtlantisContext } from "../AtlantisContext";
+import { InputText, InputTextProps } from "../InputText";
+import { useFormController } from "../hooks/useFormController";
+
+export interface InputCurrencyProps
+  extends Omit<
+    InputTextProps,
+    "keyboard" | "onChangeText" | "value" | "defaultValue"
+  > {
+  /**
+   * Whether to display the user's currency symbol or not
+   * Default value is true
+   */
+  readonly showCurrencySymbol?: boolean;
+
+  /**
+   * The minimum decimal places for the currency number
+   * Default value is 2
+   */
+  readonly decimalPlaces?: number;
+
+  /**
+   * The maximum decimal places for the currency number
+   * Default value is 5
+   */
+  readonly maxDecimalPlaces?: number;
+
+  /**
+   * The maximum length of the input
+   * Default value is 10
+   */
+  readonly maxLength?: number;
+
+  onChange?(newValue?: number | string | undefined): void;
+  value?: number;
+  defaultValue?: number;
+  keyboard?: "decimal-pad" | "numbers-and-punctuation";
+}
+export const getInternalValue = (
+  props: InputCurrencyProps,
+  field: ControllerRenderProps<FieldValues, string>,
+  formatNumber: (
+    value: number | bigint,
+    opts?: FormatNumberOptions | undefined,
+  ) => string,
+): string => {
+  if (!props.value && !field.value) return "";
+  return (
+    props.value?.toString() ??
+    formatNumber(field.value, {
+      maximumFractionDigits: props.maxDecimalPlaces,
+    })
+  );
+};
+
+const getKeyboard = (props: InputCurrencyProps) => {
+  if (Platform.OS === "ios") {
+    //since we are checking for which keyboard to use here, just implement default keyboard here instead of in params
+    return props.keyboard ?? "numbers-and-punctuation";
+  } else {
+    return "numeric";
+  }
+};
+
+export function InputCurrency(props: InputCurrencyProps): JSX.Element {
+  const {
+    showCurrencySymbol = true,
+    maxDecimalPlaces = 5,
+    decimalPlaces = 2,
+    maxLength = 10,
+  } = props;
+  const intl = useIntl();
+  const { floatSeparators, currencySymbol } = useAtlantisContext();
+
+  const { field } = useFormController({
+    name: props.name,
+    value: props.value,
+  });
+  const internalValue = getInternalValue(props, field, intl.formatNumber);
+  const [displayValue, setDisplayValue] = useState<string | undefined>(
+    internalValue,
+  );
+
+  const setOnChangeAndDisplayValues = (
+    onChangeValue: number | string | undefined,
+    valueToDisplay: string | undefined,
+  ) => {
+    props.onChange?.(onChangeValue);
+    setDisplayValue(valueToDisplay);
+  };
+
+  const checkDecimalAndI18nOfDisplayValue = (
+    numberedValue: number,
+    decimalNumbers: string,
+    decimalCount: number,
+  ) => {
+    const transformedValue = limitInputWholeDigits(numberedValue, maxLength);
+    const stringValue =
+      decimalNumbers !== ""
+        ? transformedValue.toString() + "." + decimalNumbers.slice(1)
+        : transformedValue.toString();
+    if (checkLastChar(stringValue)) {
+      const roundedDecimal = configureDecimal(
+        decimalCount,
+        maxDecimalPlaces,
+        stringValue,
+        decimalPlaces,
+      );
+      const internationalizedValueToDisplay = intl.formatNumber(
+        roundedDecimal,
+        {
+          maximumFractionDigits: maxDecimalPlaces,
+        },
+      );
+      setOnChangeAndDisplayValues(
+        roundedDecimal,
+        internationalizedValueToDisplay,
+      );
+    } else {
+      const internationalizedValueToDisplay =
+        intl.formatNumber(transformedValue, {
+          maximumFractionDigits: maxDecimalPlaces,
+        }) + decimalNumbers;
+      setOnChangeAndDisplayValues(
+        transformedValue.toString() + "." + decimalNumbers.slice(1),
+        internationalizedValueToDisplay,
+      );
+    }
+  };
+
+  const handleChange = (newValue: string | undefined) => {
+    const [decimalCount, wholeIntegerValue, decimalNumbers] = parseGivenInput(
+      newValue,
+      floatSeparators.decimal,
+    );
+
+    const numberedValue = wholeIntegerValue
+      ? convertToNumber(wholeIntegerValue)
+      : wholeIntegerValue;
+
+    if (isValidNumber(numberedValue) && typeof numberedValue === "number") {
+      checkDecimalAndI18nOfDisplayValue(
+        numberedValue,
+        decimalNumbers,
+        decimalCount,
+      );
+    } else {
+      const value = numberedValue?.toString() + decimalNumbers;
+      setOnChangeAndDisplayValues(value, value);
+    }
+  };
+
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <InputText
+        {...props}
+        prefix={showCurrencySymbol ? { label: currencySymbol } : undefined}
+        keyboard={getKeyboard(props)}
+        value={props.value?.toString() || displayValue}
+        defaultValue={props.defaultValue?.toString()}
+        onChangeText={handleChange}
+        transform={{
+          output: val => {
+            return val
+              ?.split(floatSeparators.group)
+              .join("")
+              .replace(floatSeparators.decimal, ".");
+          },
+        }}
+        validations={{
+          pattern: {
+            value: NUMBER_VALIDATION_REGEX,
+            message: formatMessage(messages.notANumberError),
+          },
+          ...props.validations,
+        }}
+        onBlur={() => {
+          props.onBlur?.();
+          if (
+            field.value === 0 ||
+            field.value === "" ||
+            field.value === undefined
+          ) {
+            setDisplayValue("0");
+          }
+        }}
+      />
+    </>
+  );
+}

package/src/InputCurrency/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_CURRENCY_SYMBOL = "$";

package/src/InputCurrency/index.ts

@@ -0,0 +1,3 @@
+export { InputCurrency } from "./InputCurrency";
+export * from "./utils";
+export * from "./constants";

package/src/InputCurrency/messages.ts

@@ -0,0 +1,10 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  notANumberError: {
+    id: "notANumberError",
+    defaultMessage: "Enter a number",
+    description:
+      "Error message shown when a non-numeric value is typed in number input",
+  },
+});

package/src/InputCurrency/utils.ts

@@ -0,0 +1,92 @@
+export function countDecimal(value: number): number {
+  const convertedValue = value.toString();
+  if (convertedValue.includes(".")) {
+    return convertedValue.split(".")[1].length;
+  }
+
+  return 0;
+}
+
+export function limitInputWholeDigits(
+  value: number,
+  maxInputLength: number,
+): number {
+  let convertedValue = value.toString();
+  if (convertedValue.length > maxInputLength) {
+    convertedValue = convertedValue.slice(0, maxInputLength);
+    return parseFloat(convertedValue);
+  }
+  return value;
+}
+
+export function configureDecimal(
+  decimalCount: number,
+  maxDecimalPlaces: number,
+  transformedValue: string,
+  decimalPlaces: number,
+): number {
+  const targetDecimalPlaces = Math.min(
+    Math.max(decimalCount, decimalPlaces),
+    maxDecimalPlaces,
+  );
+  const precision = 10 ** targetDecimalPlaces;
+  const convertedValue =
+    Math.round(parseFloat(transformedValue) * precision) / precision;
+  return convertedValue;
+}
+
+export function convertToNumber(value: string): string | number {
+  const regexValidation = /^[0-9]*$/;
+  if (value?.match?.(regexValidation)) {
+    return parseFloat(value);
+  }
+  return value;
+}
+
+export const checkLastChar = (stringValue: string): boolean => {
+  const lastChar = stringValue[stringValue.length - 1];
+  return Boolean(Number(stringValue)) && lastChar !== "0" && lastChar !== ".";
+};
+
+export const isValidNumber = (
+  numberedValue: string | number | undefined,
+): boolean => {
+  return (
+    typeof numberedValue === "number" &&
+    !isNaN(numberedValue) &&
+    numberedValue !== 0
+  );
+};
+
+export const getDecimalNumbers = (
+  value: string,
+  decimalSeparator: string,
+): string => {
+  const decimalValue = value.split(".")[1];
+
+  if (!decimalValue) {
+    return decimalSeparator;
+  }
+
+  return `${decimalSeparator}${decimalValue}`;
+};
+
+export const parseGivenInput = (
+  value: string | undefined,
+  decimalSeparator: string,
+): [number, string | undefined, string] => {
+  let decimalCount = 0;
+  let decimalNumbers = "";
+  let wholeIntegerValue = value;
+
+  if (value?.includes(".")) {
+    const splittedValue = value?.split(".");
+    decimalCount = splittedValue[1].length;
+    wholeIntegerValue = splittedValue[0];
+    decimalNumbers = getDecimalNumbers(value, decimalSeparator);
+  }
+  return [decimalCount, wholeIntegerValue, decimalNumbers];
+};
+
+export const NUMBER_VALIDATION_REGEX =
+  /^[-+]?(([0-9]*\.[0-9]+)|([0-9]+)|([0-9]+(\.?[0-9]+)?e[-+]?[0-9]+))$/;

package/src/InputSearch/InputSearch.tsx

@@ -1,6 +1,6 @@
 import React, { Ref, forwardRef, useEffect } from "react";
 import { View } from "react-native";
-import debounce from "lodash.debounce";
+import debounce from "lodash/debounce";
 import { styles } from "./InputSearch.style";
 import { InputText, InputTextProps, InputTextRef } from "../InputText";
 

package/src/InputText/InputText.tsx

@@ -24,7 +24,7 @@ import {
   RegisterOptions,
 } from "react-hook-form";
 import { IconNames } from "@jobber/design";
-import identity from "lodash.identity";
+import identity from "lodash/identity";
 import { styles } from "./InputText.style";
 import { useInputAccessoriesContext } from "./context";
 import { useFormController } from "../hooks";

package/src/index.ts

@@ -18,6 +18,7 @@ export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
+export * from "./InputCurrency";
 export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputPressable";