@player-ui/common-types-plugin 0.8.0--canary.307.9621 → 0.8.0--canary.410.15865

package/src/formats/__tests__/formats.test.ts

@@ -0,0 +1,264 @@
+/* eslint-disable @typescript-eslint/no-loss-of-precision */
+import { describe, it, expect } from "vitest";
+import { commaNumber, integer, date, currency, phone } from "..";
+
+describe("integer", () => {
+  describe("formatting", () => {
+    it("stringifies numbers", () => {
+      expect(integer.format?.("45")).toBe("45");
+      expect(integer.format?.("4.000")).toBe("4");
+      expect(integer.format?.(4.5)).toBe("4");
+    });
+
+    it("ignores non-numeric things", () => {
+      expect(integer.format?.(undefined as any)).toBe("");
+      expect(integer.format?.(null as any)).toBe("");
+      expect(integer.format?.("blah")).toBe("");
+      expect(integer.format?.("foo33bar")).toBe("33");
+      expect(integer.format?.("foo4.00bar")).toBe("4");
+    });
+
+    it("leaves the negative sign alone", () => {
+      expect(integer.format?.("-")).toBe("-");
+      expect(integer.format?.("-0")).toBe("0");
+      expect(integer.format?.("-4.0")).toBe("-4");
+    });
+  });
+
+  describe("deformatting", () => {
+    it("always returns +0", () => {
+      expect(Object.is(integer.deformat?.(-0), 0)).toBe(true);
+      expect(Object.is(integer.deformat?.(+0), 0)).toBe(true);
+    });
+
+    it("removes decimal points", () => {
+      expect(integer.deformat?.("4.00")).toBe(4);
+      expect(integer.deformat?.("-0.000000")).toBe(0);
+    });
+
+    it("handles bad values", () => {
+      expect(integer.deformat?.(null as any)).toBeUndefined();
+      expect(integer.deformat?.(undefined as any)).toBeUndefined();
+    });
+
+    it("removes ascii chars", () => {
+      expect(integer.deformat?.("333dsfdfsd")).toBe(333);
+      expect(integer.deformat?.("blah4.00foo")).toBe(4);
+      expect(integer.deformat?.("-")).toBeUndefined();
+      expect(integer.deformat?.("4.0.0")).toBe(4);
+    });
+  });
+});
+
+describe("commaNumber", () => {
+  describe("formatting", () => {
+    it("leaves things alone", () => {
+      expect(commaNumber.format?.("")).toBe("");
+      expect(commaNumber.format?.(undefined as any)).toBe(undefined);
+      expect(commaNumber.format?.({} as any)).toBe("");
+    });
+
+    it("adds commas to things", () => {
+      expect(commaNumber.format?.(1000)).toBe("1,000");
+      expect(commaNumber.format?.(-1000)).toBe("-1,000");
+      expect(commaNumber.format?.(1000000000.999)).toBe("1,000,000,000.999");
+      expect(commaNumber.format?.(".99")).toBe("0.99");
+    });
+
+    it("works with precision", () => {
+      expect(commaNumber.format?.(1000.999, { precision: 2 })).toBe("1,000.99");
+      expect(commaNumber.format?.(1000, { precision: 2 })).toBe("1,000.00");
+      expect(commaNumber.format?.(1000.1, { precision: 2 })).toBe("1,000.10");
+      expect(commaNumber.format?.(123456789, { precision: 0 })).toBe(
+        "123,456,789",
+      );
+    });
+
+    it("handles out of bounds", () => {
+      expect(commaNumber.format?.(123456789123456789, { precision: 2 })).toBe(
+        "1,234,567,891,234,567.00",
+      );
+
+      expect(commaNumber.format?.(123456789123456789.0, { precision: 2 })).toBe(
+        "1,234,567,891,234,567.00",
+      );
+    });
+  });
+
+  describe("deformatting", () => {
+    it("does nothing with null values", () => {
+      expect(commaNumber.deformat?.(null as any)).toBe(null);
+    });
+
+    it("does nothing with integer values", () => {
+      expect(commaNumber.deformat?.(1 as any)).toBe(1);
+    });
+
+    it("strips commas from the string", () => {
+      expect(commaNumber.deformat?.("111,111")).toBe(111111);
+    });
+
+    it("treats non-numbers as undef", () => {
+      expect(commaNumber.deformat?.("")).toBe(undefined);
+    });
+
+    it("treats out of bound numbers as undef", () => {
+      expect(commaNumber.deformat?.("9,999,999,999,999,999.00")).toBe(
+        undefined,
+      );
+      expect(commaNumber.deformat?.("-9,999,999,999,999,999.00")).toBe(
+        undefined,
+      );
+    });
+  });
+});
+
+describe("date", () => {
+  describe("formatting", () => {
+    it("leaves things alone", () => {
+      expect(date.format?.("")).toBe("");
+      expect(date.format?.(undefined as any)).toBe(undefined);
+      expect(date.format?.({} as any)).toBe("");
+    });
+
+    it("add slashes as long as theyre not trailing", () => {
+      expect(date.format?.("11")).toBe("11");
+      expect(date.format?.("112")).toBe("11/2");
+      expect(date.format?.("1122")).toBe("11/22");
+      expect(date.format?.("112233")).toBe("11/22/1933");
+      expect(date.format?.("11223333")).toBe("11/22/3333");
+    });
+
+    it("doesnt recognize 00 as valid month or day", () => {
+      expect(date.format?.("00")).toBe("0");
+      expect(date.format?.("00/01")).toBe("00/01");
+      expect(date.format?.("05/00")).toBe("05/0");
+      expect(date.format?.("05/00/1999")).toBe("05/00/1999");
+    });
+
+    it("cuts off after mask is full", () => {
+      expect(date.format?.("112233334444")).toBe("11/22/3333");
+    });
+
+    it("uses mask option for custom date mask", () => {
+      expect(date.format?.("112233334444", { mask: "MM/DD/YY" })).toBe(
+        "11/22/33",
+      );
+    });
+
+    it("converts YYYY-MM-DD to MM/DD/YYYY", () => {
+      expect(date.format?.("2021-4-1")).toBe("04/01/2021");
+      expect(date.format?.("2021-04-20")).toBe("04/20/2021");
+      expect(date.format?.("1111-22-33")).toBe("22/33/1111");
+    });
+
+    it("does not attempt to convert - delimited date format other than specifically YYYY-MM-DD", () => {
+      expect(date.format?.("2021-")).toBe("20/21");
+      expect(date.format?.("202-0")).toBe("20/20");
+      expect(date.format?.("2021-0420")).toBe("20/21/0420");
+    });
+  });
+});
+
+describe("currency", () => {
+  const currencyOptions = { currencySymbol: "$" };
+
+  describe("formatting", () => {
+    it("leaves things alone", () => {
+      expect(currency.format?.("")).toBe("");
+      expect(currency.format?.(undefined as any)).toBe(undefined);
+      expect(currency.format?.(null as any)).toBe(null);
+    });
+
+    it("adds commas to things", () => {
+      expect(currency.format?.(1000, currencyOptions)).toBe("$1,000.00");
+      expect(currency.format?.(-1000, currencyOptions)).toBe("-$1,000.00");
+
+      // Forces precision of 2
+      expect(currency.format?.(1000000000.999, currencyOptions)).toBe(
+        "$1,000,000,001.00",
+      );
+    });
+
+    it("optionally uses parens", () => {
+      expect(
+        currency.format?.(-100, {
+          ...currencyOptions,
+          useParensForNeg: true,
+          precision: 1,
+        }),
+      ).toBe("($100.0)");
+    });
+
+    it("uses custom currency symbols", () => {
+      expect(
+        currency.format?.(-100100, { currencySymbol: "ADAM", precision: 0 }),
+      ).toBe("-ADAM100,100");
+    });
+  });
+
+  describe("deformatting", () => {
+    it("does nothing with integer values", () => {
+      expect(currency.deformat?.(1 as any, currencyOptions)).toBe(1);
+    });
+
+    it("strips commas from the string", () => {
+      expect(currency.deformat?.("111,111", currencyOptions)).toBe(111111);
+    });
+
+    it("treats non-numbers as undef", () => {
+      expect(currency.deformat?.("", currencyOptions)).toBe(undefined);
+    });
+
+    it("strips out currency symbols", () => {
+      expect(currency.deformat?.("-$111,111", currencyOptions)).toBe(-111111);
+    });
+  });
+});
+
+describe("phone", () => {
+  describe("formatting", () => {
+    it("adds formatting when one character entered", () => {
+      expect(phone.format?.("1")).toBe("(1");
+    });
+
+    it("removes formatting when open paren given", () => {
+      expect(phone.format?.("(")).toBe("");
+    });
+
+    it("adds formatting when partial number given", () => {
+      expect(phone.format?.("123456")).toBe("(123) 456-");
+      expect(phone.format?.("12345678")).toBe("(123) 456-78");
+    });
+
+    it("fixes formatting when missing prefix digit", () => {
+      expect(phone.format?.("(858) 53-6789")).toBe("(858) 536-789");
+    });
+
+    it("fixes formatting when missing area code digit", () => {
+      expect(phone.format?.("(88) 531-6789")).toBe("(885) 316-789");
+    });
+
+    it("preserves formatting when value is well formatted", () => {
+      expect(phone.format?.("(123) 123-1231")).toBe("(123) 123-1231");
+    });
+
+    it(`doesn't add extra characters beyond mask value`, () => {
+      expect(phone.format?.("(123) 123-123145")).toBe("(123) 123-1231");
+    });
+  });
+
+  describe("deformatting", () => {
+    it("removes masking chars", () => {
+      expect(phone.deformat?.("(123) 123-1231")).toBe("1231231231");
+    });
+
+    it(`doesn't remove characters when deformatting a deformatted value`, () => {
+      expect(phone.deformat?.("1231231231")).toBe("1231231231");
+    });
+
+    it("ignores improper formatting of the input string", () => {
+      expect(phone.deformat?.("123-123-1231")).toBe("1231231231");
+    });
+  });
+});

package/src/formats/__tests__/utils.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect } from "vitest";
+import { removeFormatCharactersFromMaskedString, PLACEHOLDER } from "../utils";
+
+describe("removeFormatCharactersFromMaskedString", () => {
+  it("removes formatted characters correctly", () => {
+    const result = removeFormatCharactersFromMaskedString(
+      "123-456_789",
+      "###-###_###",
+    );
+    expect(result).toBe("123456789");
+  });
+
+  it("removes formatted characters with multiple reserved keys", () => {
+    const result = removeFormatCharactersFromMaskedString(
+      "123-456",
+      "###-$$$",
+      [PLACEHOLDER, "$"],
+    );
+    expect(result).toBe("123456");
+  });
+
+  it(`doesn't remove characters when value doesn't align with mask`, () => {
+    const result = removeFormatCharactersFromMaskedString("123456", "###-###");
+    expect(result).toBe("123456");
+  });
+
+  it(`doesn't add characters that extend beyond the length of the mask`, () => {
+    expect(removeFormatCharactersFromMaskedString("123456", "#####")).toBe(
+      "12345",
+    );
+    expect(
+      removeFormatCharactersFromMaskedString("123456", "#$#-##", [
+        PLACEHOLDER,
+        "$",
+      ]),
+    ).toBe("12345");
+  });
+
+  it(`doesn't add characters beyond possible characters that can be replaced`, () => {
+    expect(removeFormatCharactersFromMaskedString("123456", "###-##")).toBe(
+      "12345",
+    );
+  });
+});

package/src/formats/index.ts

@@ -1,45 +1,45 @@
-import type { FormatType } from '@player-ui/player';
-import { createMaskedNumericFormatter } from './utils';
+import type { FormatType } from "@player-ui/player";
+import { createMaskedNumericFormatter } from "./utils";
 
-const LENGTH_OF_MAX_INT = String(Number.MAX_SAFE_INTEGER).split('').length;
+const LENGTH_OF_MAX_INT = String(Number.MAX_SAFE_INTEGER).split("").length;
 
 /**
  * Converts an integer to and from a string for display
  */
 export const integer: FormatType<number, string> = {
-  name: 'integer',
+  name: "integer",
 
   /** Converts any integer to a string */
   format: (value) => {
-    if (value === '-') {
+    if (value === "-") {
       return value;
     }
 
     const formatted = integer.deformat?.(value) ?? value;
 
-    if (typeof formatted === 'number') {
+    if (typeof formatted === "number") {
       return String(formatted);
     }
 
-    return '';
+    return "";
   },
 
   /** Converts any string or number to an integer */
   deformat: (value) => {
-    if (typeof value === 'number') {
+    if (typeof value === "number") {
       // Handle different zeros. Math.floor(-0) is still -0
       return Math.floor(value) + 0;
     }
 
-    if (typeof value !== 'string') {
+    if (typeof value !== "string") {
       return;
     }
 
-    const isNeg = value.replace(/[^0-9.-]/g, '').charAt(0) === '-';
+    const isNeg = value.replace(/[^0-9.-]/g, "").charAt(0) === "-";
 
     // Remove everything but digits and decimal
-    let digits = value.replace(/[^0-9.]/g, '');
-    const decimalPlace = digits.indexOf('.');
+    let digits = value.replace(/[^0-9.]/g, "");
+    const decimalPlace = digits.indexOf(".");
 
     if (decimalPlace > -1) {
       digits = digits.substring(0, decimalPlace);
@@ -52,7 +52,7 @@ export const integer: FormatType<number, string> = {
     // Can't be longer than the biggest int
     digits = digits.substr(0, LENGTH_OF_MAX_INT);
 
-    const num = Number(`${isNeg ? '-' : ''}${digits}`);
+    const num = Number(`${isNeg ? "-" : ""}${digits}`);
 
     // Handle different zeros. Math.floor(-0) is still -0
     return Math.floor(num) + 0;
@@ -68,35 +68,35 @@ export const commaNumber: FormatType<
     precision?: number;
   }
 > = {
-  name: 'commaNumber',
+  name: "commaNumber",
 
   /** Go from number to number w/ commas */
   format: (_value, options) => {
-    if (_value === undefined || _value === '') {
+    if (_value === undefined || _value === "") {
       return _value;
     }
 
-    if (typeof _value !== 'string' && typeof _value !== 'number') {
-      return '';
+    if (typeof _value !== "string" && typeof _value !== "number") {
+      return "";
     }
 
     const value = String(_value);
 
     // Check to see if first valid char is a negative
-    const isNeg = value.replace(/[^0-9.-]/g, '').charAt(0) === '-';
+    const isNeg = value.replace(/[^0-9.-]/g, "").charAt(0) === "-";
     // Remove everything but digits and decimal
-    let digitAndDecimal = value.replace(/[^0-9.]/g, '');
+    let digitAndDecimal = value.replace(/[^0-9.]/g, "");
     // Remove extra leading zeros
-    digitAndDecimal = digitAndDecimal.replace(/^(0*)((0.)?\d)/g, '$2');
+    digitAndDecimal = digitAndDecimal.replace(/^(0*)((0.)?\d)/g, "$2");
 
     // Find index of first decimal point, for insertion later
-    const firstDecimal = digitAndDecimal.indexOf('.');
+    const firstDecimal = digitAndDecimal.indexOf(".");
 
     // Remove all non-digits i.e. extra decimal points
-    const digitsOnly = digitAndDecimal.replace(/[^0-9]/g, '');
+    const digitsOnly = digitAndDecimal.replace(/[^0-9]/g, "");
 
     let preDecDigits = digitsOnly;
-    let postDecDigits = '';
+    let postDecDigits = "";
 
     if (firstDecimal >= 0) {
       preDecDigits = digitsOnly
@@ -110,14 +110,13 @@ export const commaNumber: FormatType<
     if (options?.precision !== undefined) {
       postDecDigits = postDecDigits
         .substring(0, options.precision)
-        .padEnd(options.precision, '0');
+        .padEnd(options.precision, "0");
     }
 
     // Beautify
-    preDecDigits = preDecDigits.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-
-    if (preDecDigits === '' && firstDecimal === 0) {
-      preDecDigits = '0';
+    preDecDigits = preDecDigits.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    if (preDecDigits === "" && firstDecimal === 0) {
+      preDecDigits = "0";
     }
 
     // Put pieces together
@@ -127,7 +126,10 @@ export const commaNumber: FormatType<
       retVal = `-${retVal}`;
     }
 
-    if (firstDecimal >= 0 || options?.precision !== undefined) {
+    if (
+      (firstDecimal >= 0 || options?.precision !== undefined) &&
+      postDecDigits !== ""
+    ) {
       retVal += `.${postDecDigits}`;
     }
 
@@ -136,13 +138,13 @@ export const commaNumber: FormatType<
 
   /** Go from string with comma's to numbers */
   deformat: (value) => {
-    if (typeof value !== 'string') {
+    if (typeof value !== "string") {
       return value;
     }
 
-    const strValue = value.replace(/,/g, '');
+    const strValue = value.replace(/,/g, "");
 
-    if (strValue === '') {
+    if (strValue === "") {
       return undefined;
     }
 
@@ -164,27 +166,27 @@ export const date: FormatType<
     mask?: string;
   }
 > = {
-  name: 'date',
+  name: "date",
 
   format: (_value, options) => {
-    let value = typeof _value === 'number' ? String(_value) : _value;
+    let value = typeof _value === "number" ? String(_value) : _value;
     if (_value === undefined) {
       return undefined;
     }
 
-    if (typeof value !== 'string' || value === '') {
-      return '';
+    if (typeof value !== "string" || value === "") {
+      return "";
     }
 
     // matching anything in DDDD-DD-DD format, including invalid date like 1111-99-99
     if (value.match(/^\d{4}[-]\d{1,2}[-]\d{1,2}$/)) {
-      const tempVal = value.split('-');
+      const tempVal = value.split("-");
       value = `${tempVal[1]}/${tempVal[2]}/${tempVal[0]}`;
     }
 
-    const dateFormat = options?.mask?.toUpperCase() ?? 'MM/DD/YYYY';
+    const dateFormat = options?.mask?.toUpperCase() ?? "MM/DD/YYYY";
 
-    const delimiter = dateFormat.replace(/[^/.-]/g, '').charAt(0);
+    const delimiter = dateFormat.replace(/[^/.-]/g, "").charAt(0);
     const formatParts = dateFormat.split(delimiter);
     const valueParts = value.split(delimiter);
     const processedValueParts = [];
@@ -195,18 +197,18 @@ export const date: FormatType<
 
       if (lastMatchIsFull && index < formatParts.length) {
         // Remove all non-digits
-        part = part.replace(/[^0-9]/g, '');
+        part = part.replace(/[^0-9]/g, "");
         const isLastExpectedField = formatParts.length - 1 === index;
         const hasDelimiterAfter = valueParts.length - 1 > index;
         const curFormat = formatParts[index];
 
-        if (curFormat === 'YYYY') {
+        if (curFormat === "YYYY") {
           if (part.length > 4) {
             valueParts[index + 1] = [
-              '*',
+              "*",
               part.substring(4),
               valueParts[index + 1],
-            ].join('');
+            ].join("");
             part = part.substring(0, 4);
           }
 
@@ -239,7 +241,7 @@ export const date: FormatType<
             if (
               part.length === 2 &&
               (hasDelimiterAfter ||
-                (isLastExpectedField && part !== '19' && part !== '20'))
+                (isLastExpectedField && part !== "19" && part !== "20"))
             ) {
               autocomplete = `20${part}`;
 
@@ -263,13 +265,13 @@ export const date: FormatType<
             lastMatchIsFull = false;
             processedValueParts.push(part);
           }
-        } else if (curFormat === 'YY') {
+        } else if (curFormat === "YY") {
           if (part.length > 2) {
             valueParts[index + 1] = [
-              '*',
+              "*",
               part.substring(2),
               valueParts[index + 1],
-            ].join('');
+            ].join("");
             part = part.substring(0, 2);
           }
 
@@ -286,10 +288,10 @@ export const date: FormatType<
           // Only MM and DD left
           if (part.length > 2) {
             valueParts[index + 1] = [
-              '*',
+              "*",
               part.substring(2),
               valueParts[index + 1],
-            ].join('');
+            ].join("");
             part = part.substring(0, 2);
           }
 
@@ -297,9 +299,9 @@ export const date: FormatType<
             // 00 isn't a valid month or day,
             // but if they typed in a delimiter,
             // let them deal with it being wrong
-            if (part === '00' && !hasDelimiterAfter) {
+            if (part === "00" && !hasDelimiterAfter) {
               lastMatchIsFull = false;
-              processedValueParts.push('0');
+              processedValueParts.push("0");
             } else {
               lastMatchIsFull = true;
               processedValueParts.push(part);
@@ -342,25 +344,25 @@ export const currency: FormatType<
     precision?: number;
   }
 > = {
-  name: 'currency',
+  name: "currency",
   format: (_value, options) => {
-    const value = typeof _value === 'number' ? String(_value) : _value;
+    const value = typeof _value === "number" ? String(_value) : _value;
     const {
-      currencySymbol = '',
+      currencySymbol = "",
       useParensForNeg = false,
       precision = 2,
     } = options ?? {};
 
-    if (value === undefined || value === '') {
+    if (value === undefined || value === "") {
       return value;
     }
 
-    if (typeof value !== 'string') {
+    if (typeof value !== "string") {
       return value;
     }
 
     const sign = /^\s*-/.test(value) ? -1 : 1;
-    const dotIndex = value.indexOf('.');
+    const dotIndex = value.indexOf(".");
 
     let preDecimal: string;
     let postDecimal: string;
@@ -368,11 +370,11 @@ export const currency: FormatType<
     // Strip out non-digits
     // Check if first non-empty character is a minus sign
     if (dotIndex >= 0) {
-      preDecimal = value.substr(0, dotIndex).replace(/\D+/g, '');
-      postDecimal = value.substr(dotIndex + 1).replace(/\D+/g, '');
+      preDecimal = value.substr(0, dotIndex).replace(/\D+/g, "");
+      postDecimal = value.substr(dotIndex + 1).replace(/\D+/g, "");
     } else {
-      preDecimal = value.replace(/\D+/g, '');
-      postDecimal = '0';
+      preDecimal = value.replace(/\D+/g, "");
+      postDecimal = "0";
     }
 
     const numericalValue = sign * Number(`${preDecimal}.${postDecimal}`);
@@ -381,9 +383,9 @@ export const currency: FormatType<
 
     // Beautify - add commas between groups of 3 digits
     // Would need to split the string first if we had more than 3 decimal places
-    const prettyString = fixedString.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    const prettyString = fixedString.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
-    if (prettyString.charAt(0) === '-') {
+    if (prettyString.charAt(0) === "-") {
       if (useParensForNeg) {
         return `(${currencySymbol}${prettyString.substring(1)})`;
       }
@@ -394,18 +396,18 @@ export const currency: FormatType<
     return currencySymbol + prettyString;
   },
   deformat: (value, options) => {
-    if (typeof value === 'number') {
+    if (typeof value === "number") {
       return value;
     }
 
-    if (typeof value !== 'string') {
+    if (typeof value !== "string") {
       return undefined;
     }
 
     let deformatted = value;
 
     if (options?.currencySymbol) {
-      deformatted = value.replace(options.currencySymbol, '');
+      deformatted = value.replace(options.currencySymbol, "");
     }
 
     return commaNumber.deformat?.(deformatted);
@@ -413,13 +415,13 @@ export const currency: FormatType<
 };
 
 const basePhoneFormatter = createMaskedNumericFormatter(
-  'phone',
-  '(###) ###-####'
+  "phone",
+  "(###) ###-####",
 );
 
 export const phone: FormatType<string> = {
   ...basePhoneFormatter,
   deformat: (value) => basePhoneFormatter.deformat?.(value),
   format: (value) =>
-    basePhoneFormatter.format?.(value === '(' ? '' : value) ?? value,
+    basePhoneFormatter.format?.(value === "(" ? "" : value) ?? value,
 };