chore(dashboard-v2): replace byte-size with pretty-bytes

packages/dashboard-v2/package.json

@@ -21,10 +21,10 @@
   "dependencies": {
     "@fontsource/sora": "^4.5.3",
     "@fontsource/source-sans-pro": "^4.5.3",
-    "byte-size": "^8.1.0",
     "gatsby": "^4.6.2",
     "gatsby-plugin-postcss": "^5.7.0",
     "postcss": "^8.4.6",
+    "pretty-bytes": "^6.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",

packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import fileSize from "byte-size";
+import fileSize from "pretty-bytes";
 import { Link } from "gatsby";
 
 import { GraphBar } from "./GraphBar";
@@ -7,31 +7,50 @@ import { UsageGraph } from "./UsageGraph";
 
 // TODO: get real data
 const useUsageData = () => ({
-  filesUsed: 19_521,
+  files: {
-  filesLimit: 20_000,
+    used: 19_521,
-  storageUsed: 23_000_000_000,
+    limit: 20_000,
-  storageLimit: 1_000_000_000_000,
+  },
+  storage: {
+    used: 23_000_000_000,
+    limit: 1_000_000_000_000,
+  },
 });
 
-const size = (bytes) => fileSize(bytes, { precision: 0 });
+const size = (bytes) => {
+  const text = fileSize(bytes, { maximumFractionDigits: 1 });
+  const [value, unit] = text.split(" ");
+
+  return {
+    text,
+    value,
+    unit,
+  };
+};
 
 export default function CurrentUsage() {
-  const { filesUsed, filesLimit, storageUsed, storageLimit } = useUsageData();
+  const { files, storage } = useUsageData();
+
+  const storageUsage = size(storage.used);
+  const storageLimit = size(storage.limit);
+  const filesUsedLabel = React.useMemo(() => ({ value: files.used, unit: "files" }), [files.used]);
 
   return (
     <>
-      <h4>{`${size(storageUsed)} of ${size(storageLimit)}`}</h4>
+      <h4>
+        {storageUsage.text} of {storageLimit.text}
+      </h4>
       <p className="text-palette-400">
-        {filesUsed} of {filesLimit} files
+        {files.used} of {files.limit} files
       </p>
       <div className="relative mt-7 font-sans uppercase text-xs">
         <div className="flex place-content-between">
           <span>Storage</span>
-          <span>{`${size(storageLimit)}`}</span>
+          <span>{storageLimit.text}</span>
         </div>
         <UsageGraph>
-          <GraphBar value={storageUsed} limit={storageLimit} label={size(storageUsed)} />
+          <GraphBar value={storage.used} limit={storage.limit} label={storageUsage} />
-          <GraphBar value={filesUsed} limit={filesLimit} label={{ value: filesUsed, unit: "files" }} />
+          <GraphBar value={files.used} limit={files.limit} label={filesUsedLabel} />
         </UsageGraph>
         <div className="flex place-content-between">
           <span>Files</span>
@@ -43,7 +62,7 @@ export default function CurrentUsage() {
               UPGRADE
             </Link>{" "}
             {/* TODO: proper URL */}
-            <span>{filesLimit}</span>
+            <span>{files.limit}</span>
           </span>
         </div>
       </div>

packages/dashboard-v2/yarn.lock

@@ -5127,11 +5127,6 @@ busboy@^0.2.11:
     dicer "0.2.5"
     readable-stream "1.1.x"
 
-byte-size@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/byte-size/-/byte-size-8.1.0.tgz#6353d0bc14ab7a69abcefbf11f8db0145a862cb5"
-  integrity sha512-FkgMTAg44I0JtEaUAvuZTtU2a2YDmBRbQxdsQNSMtLCjhG0hMcF5b1IMN9UjSCJaU4nvlj/GER7B9sI4nKdCgA==
-
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
@@ -12455,6 +12450,11 @@ pretty-bytes@^5.4.1:
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
 
+pretty-bytes@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-6.0.0.tgz#928be2ad1f51a2e336add8ba764739f9776a8140"
+  integrity sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg==
+
 pretty-error@^2.1.1, pretty-error@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"