Merge pull request #2640 from NDLANO/chore/replace-pretty-bytes-with-…

…own-implementation

chore: replace pretty-bytes with our own implementation

packages/ndla-image-search/package.json

@@ -30,7 +30,7 @@
     "@ndla/licenses": "workspace:^",
     "@ndla/primitives": "workspace:^",
     "@ndla/styled-system": "workspace:^",
-    "pretty-bytes": "^5.6.0"
+    "@ndla/util": "workspace:^"
   },
   "devDependencies": {
     "@ndla/preset-panda": "workspace:^",

packages/ndla-image-search/src/ImageMeta.tsx

@@ -6,19 +6,25 @@
  *
  */
 
-import prettyBytes from "pretty-bytes";
+import { useMemo } from "react";
 import { Text } from "@ndla/primitives";
 import type { IImageDimensions } from "@ndla/types-backend/image-api";
+import { humanFileSize } from "@ndla/util";
 
 interface Props {
   contentType: string;
   fileSize: number;
   imageDimensions?: IImageDimensions;
+  locale: string;
 }
 
-const ImageMeta = ({ contentType, fileSize, imageDimensions }: Props) => {
+const ImageMeta = ({ contentType, fileSize, imageDimensions, locale }: Props) => {
+  const prettySize = useMemo(() => {
+    return humanFileSize(fileSize, locale);
+  }, [fileSize, locale]);
+
   const dimensions = imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : "";
-  return <Text>{`${contentType} - ${prettyBytes(fileSize)}${dimensions}`}</Text>;
+  return <Text>{`${contentType} - ${prettySize}${dimensions}`}</Text>;
 };
 
 export default ImageMeta;

packages/ndla-image-search/src/PreviewImage.tsx

@@ -179,6 +179,7 @@ const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translations, lo
             contentType={image.image.contentType}
             fileSize={image.image.size}
             imageDimensions={image.image.dimensions}
+            locale={locale}
           />
           {!!image.tags.tags.length && (
             <HashTagGroup>

packages/util/src/__tests__/humanFileSize-test.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { humanFileSize } from "../humanFileSize";
+
+describe("humanFileSize", () => {
+  it("handles bytes", () => {
+    expect(humanFileSize(250, "nb")).toEqual("250 B");
+  });
+
+  it("handles kilobytes", () => {
+    expect(humanFileSize(1000, "nb")).toEqual("1 kB");
+  });
+
+  it("handles megabytes", () => {
+    expect(humanFileSize(1000000, "nb")).toEqual("1 MB");
+  });
+
+  it("handles border values", () => {
+    expect(humanFileSize(999999, "nb")).toEqual("1 000 kB");
+    expect(humanFileSize(1000000, "nb")).toEqual("1 MB");
+    expect(humanFileSize(1001000, "nb")).toEqual("1 MB");
+  });
+
+  it("rounds to two decimal places", () => {
+    expect(humanFileSize(1234567, "nb")).toEqual("1,23 MB");
+  });
+});

packages/util/src/humanFileSize.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// Code taken from https://stackoverflow.com/questions/10420352/converting-file-size-in-bytes-to-human-readable-string/72596863#72596863
+
+const UNITS = ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte", "petabyte"];
+const BYTES_PER_KB = 1000;
+
+export const humanFileSize = (sizeBytes: number | bigint, locale: string): string => {
+  let size = Math.abs(Number(sizeBytes));
+
+  let u = 0;
+  while (size >= BYTES_PER_KB && u < UNITS.length - 1) {
+    size /= BYTES_PER_KB;
+    ++u;
+  }
+
+  return new Intl.NumberFormat(locale, {
+    style: "unit",
+    unit: UNITS[u],
+    unitDisplay: "short",
+    maximumFractionDigits: 2,
+  }).format(size);
+};

packages/util/src/index.ts

@@ -24,4 +24,5 @@ export { default as usePrevious } from "./usePrevious";
 export { composeRefs } from "./composeRefs";
 export { polymorphicForwardRef } from "./polymorphicForwardRef";
 export { contains } from "./contains";
+export { humanFileSize } from "./humanFileSize";
 export type { PolymorphicProps } from "./polymorphicForwardRef";

yarn.lock

@@ -2661,8 +2661,8 @@ __metadata:
     "@ndla/primitives": "workspace:^"
     "@ndla/styled-system": "workspace:^"
     "@ndla/types-backend": "npm:^0.2.86"
+    "@ndla/util": "workspace:^"
     "@pandacss/dev": "npm:^0.48.0"
-    pretty-bytes: "npm:^5.6.0"
   peerDependencies:
     react: ">= 18"
     react-dom: ">= 18"
@@ -2800,7 +2800,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@ndla/util@npm:^5.0.3-alpha.0, @ndla/util@workspace:packages/util":
+"@ndla/util@npm:^5.0.3-alpha.0, @ndla/util@workspace:^, @ndla/util@workspace:packages/util":
   version: 0.0.0-use.local
   resolution: "@ndla/util@workspace:packages/util"
   peerDependencies:
@@ -14099,13 +14099,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-bytes@npm:^5.6.0":
-  version: 5.6.0
-  resolution: "pretty-bytes@npm:5.6.0"
-  checksum: 10c0/f69f494dcc1adda98dbe0e4a36d301e8be8ff99bfde7a637b2ee2820e7cb583b0fc0f3a63b0e3752c01501185a5cf38602c7be60da41bdf84ef5b70e89c370f3
-  languageName: node
-  linkType: hard
-
 "pretty-format@npm:^27.0.2":
   version: 27.5.1
   resolution: "pretty-format@npm:27.5.1"