@sproutsocial/seeds-react-numeral 1.0.0

package/src/__tests__/features/precision.test.ts

@@ -0,0 +1,452 @@
+import testNumeral from "./testNumeral";
+
+describe("When using the default precision...", () => {
+  describe("... with decimals use up to 2 decimal places", () => {
+    // positive values
+    testNumeral(
+      1.0,
+      {},
+      {
+        text: "1",
+      }
+    );
+    testNumeral(
+      1.2,
+      {},
+      {
+        text: "1.2",
+      }
+    );
+    testNumeral(
+      0.23,
+      {},
+      {
+        text: "0.23",
+      }
+    );
+    testNumeral(
+      1.235,
+      {},
+      {
+        text: "1.24",
+      }
+    );
+    // negative values
+    testNumeral(
+      -1.0,
+      {},
+      {
+        text: "-1",
+      }
+    );
+    testNumeral(
+      -1.2,
+      {},
+      {
+        text: "-1.2",
+      }
+    );
+    testNumeral(
+      -0.23,
+      {},
+      {
+        text: "-0.23",
+      }
+    );
+    testNumeral(
+      -1.235,
+      {},
+      {
+        text: "-1.24",
+      }
+    );
+  });
+
+  describe("... abbreviated decimals always use 2 decimal places", () => {
+    // positive values
+    testNumeral(
+      10000,
+      {},
+      {
+        text: "10.00K",
+        tip: "10,000",
+      }
+    );
+    testNumeral(
+      10109,
+      {},
+      {
+        text: "10.11K",
+        tip: "10,109",
+      }
+    );
+    testNumeral(
+      10000.909999,
+      {},
+      {
+        text: "10.00K",
+        tip: "10,000.91",
+      }
+    );
+    // negative values
+    testNumeral(
+      -10000,
+      {},
+      {
+        text: "-10.00K",
+        tip: "-10,000",
+      }
+    );
+    testNumeral(
+      -10109,
+      {},
+      {
+        text: "-10.11K",
+        tip: "-10,109",
+      }
+    );
+    testNumeral(
+      -10000.909999,
+      {},
+      {
+        text: "-10.00K",
+        tip: "-10,000.91",
+      }
+    );
+  });
+
+  describe("... with percent use up to 1 decimal places", () => {
+    const options = {
+      format: "percent",
+    };
+    // positive values
+    testNumeral(1.0, options, {
+      text: "1%",
+    });
+    testNumeral(9.99, options, {
+      text: "10%",
+    });
+    testNumeral(100, options, {
+      text: "100%",
+    });
+    testNumeral(1.2, options, {
+      text: "1.2%",
+    });
+    testNumeral(0.23, options, {
+      text: "0.2%",
+    });
+    testNumeral(1.26789, options, {
+      text: "1.3%",
+    });
+    // negative values
+    testNumeral(-1.0, options, {
+      text: "-1%",
+    });
+    testNumeral(-9.99, options, {
+      text: "-10%",
+    });
+    testNumeral(-100, options, {
+      text: "-100%",
+    });
+    testNumeral(-1.2, options, {
+      text: "-1.2%",
+    });
+    testNumeral(-0.23, options, {
+      text: "-0.2%",
+    });
+    testNumeral(-1.26789, options, {
+      text: "-1.3%",
+    });
+    xdescribe("NOTE: This test misbehaves in node/jest!!!", () => {
+      // It improperly answers "11.11K", "11,111%"
+      testNumeral(11111, options, {
+        text: "11.11K%",
+        tip: "11,111%",
+      });
+    });
+  });
+
+  describe("... with current always use 2 decimal places", () => {
+    const options = {
+      currency: "USD",
+    };
+    // positive values
+    testNumeral(1.0, options, {
+      text: "$1.00",
+    });
+    testNumeral(1234.0, options, {
+      text: "$1,234.00",
+    });
+    testNumeral(123456.98765432, options, {
+      text: "$123.46K",
+      tip: "$123,456.99",
+    });
+    // negative values
+    testNumeral(-1.0, options, {
+      text: "-$1.00",
+    });
+    testNumeral(-1234.0, options, {
+      text: "-$1,234.00",
+    });
+    testNumeral(-123456.98765432, options, {
+      text: "-$123.46K",
+      tip: "-$123,456.99",
+    });
+  });
+});
+
+describe("When using a set precision...", () => {
+  const options = {
+    precision: 4,
+  };
+
+  describe("... with small numbers it should not abbreviate the text", () => {
+    // positive values
+    testNumeral(1, options, {
+      text: "1.0000",
+    });
+    testNumeral(12, options, {
+      text: "12.0000",
+    });
+    testNumeral(123, options, {
+      text: "123.0000",
+    });
+    testNumeral(1234, options, {
+      text: "1,234.0000",
+    });
+    testNumeral(1234.1, options, {
+      text: "1,234.1000",
+    });
+    testNumeral(1234.0000987, options, {
+      text: "1,234.0001",
+    });
+    // negative values
+    testNumeral(-1, options, {
+      text: "-1.0000",
+    });
+    testNumeral(-12, options, {
+      text: "-12.0000",
+    });
+    testNumeral(-123, options, {
+      text: "-123.0000",
+    });
+    testNumeral(-1234, options, {
+      text: "-1,234.0000",
+    });
+    testNumeral(-1234.1, options, {
+      text: "-1,234.1000",
+    });
+    testNumeral(-1234.0000987, options, {
+      text: "-1,234.0001",
+    });
+  });
+
+  describe("... with big numbers it should round and abbreviate the text", () => {
+    // positive values
+    testNumeral(12345, options, {
+      text: "12.3450K",
+      tip: "12,345.0000",
+    });
+    testNumeral(123456, options, {
+      text: "123.4560K",
+      tip: "123,456.0000",
+    });
+    testNumeral(1225000, options, {
+      text: "1.2250M",
+      tip: "1,225,000.0000",
+    });
+    testNumeral(1225000000, options, {
+      text: "1.2250B",
+      tip: "1,225,000,000.0000",
+    });
+    testNumeral(1225000000000, options, {
+      text: "1.2250T",
+      tip: "1,225,000,000,000.0000",
+    });
+    testNumeral(12250000000000000, options, {
+      text: "12,250.0000T",
+      tip: "12,250,000,000,000,000.0000",
+    });
+    // negative values
+    testNumeral(-12345, options, {
+      text: "-12.3450K",
+      tip: "-12,345.0000",
+    });
+    testNumeral(-123456, options, {
+      text: "-123.4560K",
+      tip: "-123,456.0000",
+    });
+    testNumeral(-1225000, options, {
+      text: "-1.2250M",
+      tip: "-1,225,000.0000",
+    });
+    testNumeral(-1225000000, options, {
+      text: "-1.2250B",
+      tip: "-1,225,000,000.0000",
+    });
+    testNumeral(-1225000000000, options, {
+      text: "-1.2250T",
+      tip: "-1,225,000,000,000.0000",
+    });
+    testNumeral(-12250000000000000, options, {
+      text: "-12,250.0000T",
+      tip: "-12,250,000,000,000,000.0000",
+    });
+  });
+
+  describe("... with percent", () => {
+    const options = {
+      precision: 4,
+      format: "percent",
+    };
+    // positive values
+    testNumeral(1.0, options, {
+      text: "1.0000%",
+    });
+    testNumeral(1.2, options, {
+      text: "1.2000%",
+    });
+    testNumeral(0.23, options, {
+      text: "0.2300%",
+    });
+    testNumeral(1.26789, options, {
+      text: "1.2679%",
+    });
+    // negative values
+    testNumeral(-1.0, options, {
+      text: "-1.0000%",
+    });
+    testNumeral(-1.2, options, {
+      text: "-1.2000%",
+    });
+    testNumeral(-0.23, options, {
+      text: "-0.2300%",
+    });
+    testNumeral(-1.26789, options, {
+      text: "-1.2679%",
+    });
+  });
+
+  describe("... with currency", () => {
+    const options = {
+      precision: 4,
+      currency: "USD",
+    };
+    // positive values
+    testNumeral(1234.0000987, options, {
+      text: "$1,234.0001",
+    });
+    testNumeral(123456, options, {
+      text: "$123.4560K",
+      tip: "$123,456.0000",
+    });
+    // negative values
+    testNumeral(-1234.0000987, options, {
+      text: "-$1,234.0001",
+    });
+    testNumeral(-123456, options, {
+      text: "-$123.4560K",
+      tip: "-$123,456.0000",
+    });
+  });
+});
+
+describe("When using precision 'none' ...", () => {
+  const options = {
+    precision: "none",
+  };
+
+  describe("... with small numbers it should not abbreviate the text", () => {
+    // positive values
+    testNumeral(12, options, {
+      text: "12",
+    });
+    testNumeral(1234.0000987, options, {
+      text: "1,234.0000987",
+    });
+    // negative values
+    testNumeral(-12, options, {
+      text: "-12",
+    });
+    testNumeral(-1234.0000987, options, {
+      text: "-1,234.0000987",
+    });
+  });
+
+  describe("... with big numbers it should round and abbreviate the text", () => {
+    // positive values
+    testNumeral(12345, options, {
+      text: "12.35K",
+      tip: "12,345",
+    });
+    testNumeral(123456.98765432, options, {
+      text: "123.46K",
+      tip: "123,456.98765432",
+    });
+    // negative values
+    testNumeral(-12345, options, {
+      text: "-12.35K",
+      tip: "-12,345",
+    });
+    testNumeral(-123456.98765432, options, {
+      text: "-123.46K",
+      tip: "-123,456.98765432",
+    });
+  });
+
+  describe("... with percent", () => {
+    const options = {
+      precision: "none",
+      format: "percent",
+    };
+    // positive values
+    testNumeral(1.0, options, {
+      text: "1%",
+    });
+    testNumeral(1.2, options, {
+      text: "1.2%",
+    });
+    testNumeral(0.23, options, {
+      text: "0.23%",
+    });
+    testNumeral(1.26789, options, {
+      text: "1.26789%",
+    });
+    // negative values
+    testNumeral(-1.0, options, {
+      text: "-1%",
+    });
+    testNumeral(-1.2, options, {
+      text: "-1.2%",
+    });
+    testNumeral(-0.23, options, {
+      text: "-0.23%",
+    });
+    testNumeral(-1.26789, options, {
+      text: "-1.26789%",
+    });
+  });
+
+  describe("... with currency", () => {
+    const options = {
+      precision: "none",
+      currency: "USD",
+    };
+    // positive values
+    testNumeral(1234.0, options, {
+      text: "$1,234",
+    });
+    testNumeral(123456.98765432, options, {
+      text: "$123.46K",
+      tip: "$123,456.98765432",
+    });
+    // negative values
+    testNumeral(-1234.0, options, {
+      text: "-$1,234",
+    });
+    testNumeral(-123456.98765432, options, {
+      text: "-$123.46K",
+      tip: "-$123,456.98765432",
+    });
+  });
+});

package/src/__tests__/features/testNumeral.tsx

@@ -0,0 +1,82 @@
+/* eslint-env jest, node */
+import React from "react";
+import {
+  render,
+  fireEvent,
+  screen,
+} from "@sproutsocial/seeds-react-testing-library";
+import Numeral, { formatNumeral } from "../../Numeral";
+
+jest.mock("../../constants.ts", () => ({
+  ...jest.requireActual("../../constants.ts"),
+  MEMO_CACHE_SIZE: 0,
+  COMPARE_OBJECTS: false,
+}));
+
+interface NumeralOptions {
+  [key: string]: any;
+}
+
+interface NumeralTexts {
+  text: string | RegExp;
+  tip?: string;
+  label?: string;
+  format?: string;
+}
+
+const testNumeral = (
+  value: number | undefined | null,
+  options: NumeralOptions = {},
+  texts: NumeralTexts
+) => {
+  const {
+    text: mainText,
+    tip: tooltipText,
+    label: labelText,
+    format: formatText,
+  } = texts;
+
+  if (tooltipText) {
+    test(`Should display  ${value}  abbreviated as -> ${mainText}  with tooltip -> ${tooltipText}  `, async () => {
+      const { container } = render(<Numeral number={value} {...options} />);
+      const numeral = screen.getByText(mainText);
+      const tooltip = container.querySelector("[data-qa-tooltip]");
+      fireEvent.mouseOver(numeral);
+      const content = await screen.findByText(tooltipText);
+      expect(numeral).toBeInTheDocument();
+      expect(tooltip).toBeTruthy();
+      expect(content).toBeInTheDocument();
+
+      // formatNumeral test
+      if (formatText) {
+        expect(formatNumeral({ number: value, ...options })).toEqual(
+          formatText
+        );
+      } else {
+        expect(formatNumeral({ number: value, ...options })).toEqual(mainText);
+      }
+    });
+  } else {
+    test(`Should display  ${value}  as -> ${mainText}  with no tooltip  `, () => {
+      const { container } = render(<Numeral number={value} {...options} />);
+      const numeral = screen.getByText(mainText);
+      const tooltip = container.querySelector("[data-qa-tooltip]");
+      expect(numeral).toBeInTheDocument();
+      expect(tooltip).toBeFalsy();
+      if (labelText) {
+        expect(screen.getByText(labelText)).toBeInTheDocument();
+      }
+
+      // formatNumeral test
+      if (formatText) {
+        expect(formatNumeral({ number: value, ...options })).toEqual(
+          formatText
+        );
+      } else {
+        expect(formatNumeral({ number: value, ...options })).toEqual(mainText);
+      }
+    });
+  }
+};
+
+export default testNumeral;

package/src/__tests__/features/zero.test.ts

@@ -0,0 +1,51 @@
+import testNumeral from "./testNumeral";
+
+describe("When using a zero value...", () => {
+  describe("... it renders properly", () => {
+    testNumeral(
+      0.0,
+      {},
+      {
+        text: "0",
+      }
+    );
+    testNumeral(
+      0,
+      {
+        format: "percent",
+      },
+      {
+        text: "0%",
+      }
+    );
+    testNumeral(
+      0,
+      {
+        format: "percent",
+        precision: 1,
+      },
+      {
+        text: "0.0%",
+      }
+    );
+    testNumeral(
+      0,
+      {
+        currency: "USD",
+      },
+      {
+        text: "$0.00",
+      }
+    );
+    testNumeral(
+      0,
+      {
+        currency: "USD",
+        precision: 0,
+      },
+      {
+        text: "$0",
+      }
+    );
+  });
+});

package/src/constants.ts

@@ -0,0 +1,16 @@
+import type { EnumNumeralFormat } from "./NumeralTypes";
+
+export const DEFAULT_THRESHOLD = 10000;
+export const MEMO_CACHE_SIZE = 10;
+export const COMPARE_OBJECTS = true;
+export const MAX_PRECISION = 20;
+export const ABBREV_PRECISION = 2;
+export const DefaultPrecisions: {
+  [key in EnumNumeralFormat]: [number, number];
+} = {
+  decimal: [0, 2],
+  percent: [0, 1],
+  currency: [2, 2],
+};
+
+export const EM_DASH = "—"; // shift + option + hyphen on a mac keyboard

package/src/index.ts

@@ -0,0 +1,6 @@
+import Numeral, { formatNumeral } from "./Numeral";
+
+export default Numeral;
+export { Numeral };
+export { formatNumeral };
+export * from "./NumeralTypes";

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/src/styles.ts

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import Text from "@sproutsocial/seeds-react-text";
+
+export const Container = styled(Text)`
+  font-variant-numeric: tabular-nums;
+`;
+
+export const AbbrContainer = styled(Text)`
+  font-variant-numeric: tabular-nums;
+  border-bottom: 1px dotted
+    ${(props) => props.theme.colors.container.border.base};
+`;

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));