feat: better number formatting

Author: aradzie

packages/keybr-intl/lib/numbers.ts

@@ -44,6 +44,11 @@ const factory = (intl: IntlShape): IntlNumbers => {
         style: "percent",
         maximumFractionDigits: opts,
       };
+    } else if (opts.style !== "percent") {
+      opts = {
+        ...opts,
+        style: "percent",
+      };
     }
     // Do not round up to 100% if the value is less than one.
     // Add decimal digits instead.

packages/page-typing-test/lib/components/ReplayProgress.tsx

@@ -1,3 +1,4 @@
+import { useIntlNumbers } from "@keybr/intl";
 import { useFormatter } from "@keybr/lesson-ui";
 import {
   AnimationFrames,
@@ -9,19 +10,23 @@ import { useEffect, useState } from "react";
 import { type ReplayState } from "../session/index.ts";
 
 export function ReplayProgress({ stepper }: { readonly stepper: ReplayState }) {
+  const { formatInteger } = useIntlNumbers();
   const { formatSpeed } = useFormatter();
-  const { progress, time } = useReplayProgress(stepper);
+  const {
+    progress: { progress, length, speed },
+    time,
+  } = useReplayProgress(stepper);
   return (
     <Para align="center">
       <NameValue
         name="Progress"
-        value={`${progress.progress}/${progress.length}`}
+        value={`${formatInteger(progress)}/${formatInteger(length)}`}
       />
       <NameValue
         name="Time"
         value={formatDuration(time, { showMillis: true })}
       />
-      <NameValue name="Speed" value={formatSpeed(progress.speed)} />
+      <NameValue name="Speed" value={formatSpeed(speed)} />
     </Para>
   );
 }

packages/page-typing-test/lib/components/TestProgress.tsx

@@ -10,7 +10,7 @@ export const TestProgress0 = memo(function TestProgress({
 }: {
   readonly progress: Progress;
 }) {
-  const { formatNumber, formatPercents } = useIntlNumbers();
+  const { formatInteger, formatPercents } = useIntlNumbers();
   const { formatSpeed } = useFormatter();
   return (
     <Para className={styles.root}>
@@ -21,9 +21,14 @@ export const TestProgress0 = memo(function TestProgress({
       <div className={styles.info}>
         <Value value={formatDuration(time, { showMillis: true })} />
         {" / "}
-        <Value value={formatNumber(length)} />
+        <Value value={formatInteger(length)} />
         {" / "}
-        <Value value={formatPercents(progress)} />
+        <Value
+          value={formatPercents(progress, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+        />
         {" / "}
         <Value value={formatSpeed(speed)} />
       </div>