refactor: move formatting related code into separate file (anuraghazra#4568)

opheliagoldstein · qwerty541 · web-flow · commit 5df2e634e9c1 · 2025-10-13T23:50:06.000+03:00
Co-authored-by: Alexandr &lt;qwerty541zxc@gmail.com&gt;
diff --git a/src/cards/gist.js b/src/cards/gist.js
@@ -4,14 +4,14 @@ import {
   parseEmojis,
   wrapTextMultiline,
   encodeHTML,
-  kFormatter,
   measureText,
   flexLayout,
   iconWithLabel,
   createLanguageNode,
 } from "../common/utils.js";
 import Card from "../common/Card.js";
 import { getCardColors } from "../common/color.js";
+import { kFormatter } from "../common/fmt.js";
 import { icons } from "../common/icons.js";
 
 /** Import language colors.
diff --git a/src/cards/repo.js b/src/cards/repo.js
@@ -2,12 +2,12 @@
 
 import { Card } from "../common/Card.js";
 import { getCardColors } from "../common/color.js";
+import { kFormatter } from "../common/fmt.js";
 import { I18n } from "../common/I18n.js";
 import { icons } from "../common/icons.js";
 import {
   encodeHTML,
   flexLayout,
-  kFormatter,
   measureText,
   parseEmojis,
   wrapTextMultiline,
diff --git a/src/cards/stats.js b/src/cards/stats.js
@@ -3,14 +3,10 @@
 import { Card } from "../common/Card.js";
 import { getCardColors } from "../common/color.js";
 import { CustomError } from "../common/error.js";
+import { kFormatter } from "../common/fmt.js";
 import { I18n } from "../common/I18n.js";
 import { icons, rankIcon } from "../common/icons.js";
-import {
-  clampValue,
-  flexLayout,
-  kFormatter,
-  measureText,
-} from "../common/utils.js";
+import { clampValue, flexLayout, measureText } from "../common/utils.js";
 import { statCardLocales, wakatimeCardLocales } from "../translations.js";
 
 const CARD_MIN_WIDTH = 287;
diff --git a/src/cards/top-languages.js b/src/cards/top-languages.js
@@ -3,14 +3,14 @@
 import { Card } from "../common/Card.js";
 import { getCardColors } from "../common/color.js";
 import { createProgressNode } from "../common/createProgressNode.js";
+import { formatBytes } from "../common/fmt.js";
 import { I18n } from "../common/I18n.js";
 import {
   chunkArray,
   clampValue,
   flexLayout,
   lowercaseTrim,
   measureText,
-  formatBytes,
 } from "../common/utils.js";
 import { langCardLocales } from "../translations.js";
 
diff --git a/src/common/fmt.js b/src/common/fmt.js
@@ -0,0 +1,50 @@
+/**
+ * Retrieves num with suffix k(thousands) precise to given decimal places.
+ *
+ * @param {number} num The number to format.
+ * @param {number=} precision The number of decimal places to include.
+ * @returns {string|number} The formatted number.
+ */
+const kFormatter = (num, precision) => {
+  const abs = Math.abs(num);
+  const sign = Math.sign(num);
+
+  if (typeof precision === "number" && !isNaN(precision)) {
+    return (sign * (abs / 1000)).toFixed(precision) + "k";
+  }
+
+  if (abs < 1000) {
+    return sign * abs;
+  }
+
+  return sign * parseFloat((abs / 1000).toFixed(1)) + "k";
+};
+
+/**
+ * Convert bytes to a human-readable string representation.
+ *
+ * @param {number} bytes The number of bytes to convert.
+ * @returns {string} The human-readable representation of bytes.
+ * @throws {Error} If bytes is negative or too large.
+ */
+const formatBytes = (bytes) => {
+  if (bytes < 0) {
+    throw new Error("Bytes must be a non-negative number");
+  }
+
+  if (bytes === 0) {
+    return "0 B";
+  }
+
+  const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB"];
+  const base = 1024;
+  const i = Math.floor(Math.log(bytes) / Math.log(base));
+
+  if (i >= sizes.length) {
+    throw new Error("Bytes is too large to convert to a human-readable string");
+  }
+
+  return `${(bytes / Math.pow(base, i)).toFixed(1)} ${sizes[i]}`;
+};
+
+export { kFormatter, formatBytes };
diff --git a/src/common/index.js b/src/common/index.js
@@ -10,7 +10,6 @@ export {
   ERROR_CARD_LENGTH,
   renderError,
   encodeHTML,
-  kFormatter,
   parseBoolean,
   parseArray,
   clampValue,
diff --git a/src/common/utils.js b/src/common/utils.js
@@ -76,28 +76,6 @@ const iconWithLabel = (icon, label, testid, iconSize) => {
   return flexLayout({ items: [iconSvg, text], gap: 20 }).join("");
 };
 
-/**
- * Retrieves num with suffix k(thousands) precise to given decimal places.
- *
- * @param {number} num The number to format.
- * @param {number=} precision The number of decimal places to include.
- * @returns {string|number} The formatted number.
- */
-const kFormatter = (num, precision) => {
-  const abs = Math.abs(num);
-  const sign = Math.sign(num);
-
-  if (typeof precision === "number" && !isNaN(precision)) {
-    return (sign * (abs / 1000)).toFixed(precision) + "k";
-  }
-
-  if (abs < 1000) {
-    return sign * abs;
-  }
-
-  return sign * parseFloat((abs / 1000).toFixed(1)) + "k";
-};
-
 /**
  * Returns boolean if value is either "true" or "false" else the value as it is.
  *
@@ -399,40 +377,12 @@ const dateDiff = (d1, d2) => {
   return Math.round(diff / (1000 * 60));
 };
 
-/**
- * Convert bytes to a human-readable string representation.
- *
- * @param {number} bytes The number of bytes to convert.
- * @returns {string} The human-readable representation of bytes.
- * @throws {Error} If bytes is negative or too large.
- */
-const formatBytes = (bytes) => {
-  if (bytes < 0) {
-    throw new Error("Bytes must be a non-negative number");
-  }
-
-  if (bytes === 0) {
-    return "0 B";
-  }
-
-  const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB"];
-  const base = 1024;
-  const i = Math.floor(Math.log(bytes) / Math.log(base));
-
-  if (i >= sizes.length) {
-    throw new Error("Bytes is too large to convert to a human-readable string");
-  }
-
-  return `${(bytes / Math.pow(base, i)).toFixed(1)} ${sizes[i]}`;
-};
-
 export {
   ERROR_CARD_LENGTH,
   renderError,
   createLanguageNode,
   iconWithLabel,
   encodeHTML,
-  kFormatter,
   parseBoolean,
   parseArray,
   clampValue,
@@ -445,5 +395,4 @@ export {
   chunkArray,
   parseEmojis,
   dateDiff,
-  formatBytes,
 };
diff --git a/tests/utils.test.js b/tests/utils.test.js
@@ -1,14 +1,15 @@
+// @ts-check
+
 import { describe, expect, it } from "@jest/globals";
 import { queryByTestId } from "@testing-library/dom";
 import "@testing-library/jest-dom";
 import {
   encodeHTML,
-  formatBytes,
-  kFormatter,
   parseBoolean,
   renderError,
   wrapTextMultiline,
 } from "../src/common/utils.js";
+import { formatBytes, kFormatter } from "../src/common/fmt.js";
 
 describe("Test utils.js", () => {
   it("should test kFormatter default behavior", () => {
