react-cheminfo 0.11.0 → 0.13.0

package/src/ecosystem/ui/Wordmark.tsx

@@ -1,8 +1,11 @@
 import type { CSSProperties, ReactElement } from 'react';
 
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import { siteById } from '../core/lookup.ts';
+import { siteNameColors } from '../core/nameColors.ts';
 import type { SiteId } from '../core/sites.ts';
 
+/** What a site's written name needs. */
 export interface WordmarkProps {
   /** The site whose name is written. */
   siteId: SiteId;
@@ -33,32 +36,29 @@ export interface WordmarkProps {
 export function Wordmark(props: WordmarkProps): ReactElement {
   const { siteId, size = 17, className } = props;
   const site = siteById(siteId);
+  const { lead, alt, dot } = site.name;
+  const colors = siteNameColors(site);
 
   return (
     <span
-      className={className ? `wordmark ${className}` : 'wordmark'}
+      className={joinClassNames('wordmark', className)}
       style={{ ...WORDMARK_STYLE, fontSize: size }}
     >
-      <span className="wordmark__lead" style={{ color: site.brand }}>
-        {site.name.lead}
+      <span className="wordmark__lead" style={{ color: colors.lead }}>
+        {lead}
       </span>
-      {site.name.dot ? (
-        <span className="wordmark__dot" style={{ color: DOT_COLOR }}>
+      {dot ? (
+        <span className="wordmark__dot" style={{ color: colors.dot }}>
           .
         </span>
       ) : null}
-      <span className="wordmark__alt" style={{ color: site.brandAlt }}>
-        {site.name.alt}
+      <span className="wordmark__alt" style={{ color: colors.alt }}>
+        {alt}
       </span>
     </span>
   );
 }
 
-// The separating dot is neutral so the two coloured halves read as the name
-// rather than as three equal parts, and it takes the family's own token when
-// the page defines one.
-const DOT_COLOR = 'var(--text-faint, #8a96a3)';
-
 const WORDMARK_STYLE: CSSProperties = {
   letterSpacing: '-0.01em',
   whiteSpace: 'nowrap',

package/src/ecosystem/ui/ecosystemStyles.ts

@@ -0,0 +1,11 @@
+import type { CSSProperties } from 'react';
+
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
+
+/** The small line that introduces the family, above the footer and the menu. */
+export const ECOSYSTEM_HEADING_STYLE: CSSProperties = {
+  margin: 0,
+  color: TOKEN.textMuted,
+  fontSize: '0.75rem',
+  fontWeight: 600,
+};

package/src/ecosystem/ui/glyphs.tsx

@@ -106,6 +106,21 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       />
     </>
   ),
+  // Two arrows crossing in opposite directions: one notation turned into
+  // another and back, which is the whole of what this one does.
+  openbabel: (alt) => (
+    <g
+      fill="none"
+      strokeWidth="2.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M6.5 12.5h19" stroke="#ffffff" />
+      <path d="M21 8l4.5 4.5L21 17" stroke="#ffffff" />
+      <path d="M25.5 21.5h-19" stroke={alt} />
+      <path d="M11 17l-4.5 4.5L11 26" stroke={alt} />
+    </g>
+  ),
   // An isotopic pattern: the answer this one is asked for most.
   chemcalc: (alt) => (
     <g strokeLinecap="round" strokeWidth="3.4" fill="none">
@@ -114,19 +129,23 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       <path d="M23 24V18" stroke="#ffffff" />
     </g>
   ),
-  // Three peaks of a mixture over the funnel that narrows them to one compound,
-  // which is the dereplication this one does.
+  // The ring and the substituent dots of the DerepFlow logo do not survive
+  // 16 px, so the mark keeps the two elements that carry its meaning: the
+  // compound, and the tick that says it has been identified.
   derepflow: (alt) => (
     <>
-      <g stroke="#ffffff" strokeWidth="4" strokeLinecap="round" fill="none">
-        <path d="M7 15.6V9.4" />
-        <path d="M16 15.6V4.6" />
-        <path d="M25 15.6v-4.6" />
-      </g>
+      <polygon
+        points="12.5,3.9 20.0,8.2 20.0,16.8 12.5,21.1 5.0,16.8 5.0,8.2"
+        stroke="#ffffff"
+        strokeWidth="2.6"
+        strokeLinejoin="round"
+        fill="none"
+      />
+      <circle cx="23.5" cy="23.5" r="7.6" fill={alt} />
       <path
-        d="M6.2 20.4 16 27 25.8 20.4"
-        stroke={alt}
-        strokeWidth="4"
+        d="M20.2 23.6 22.7 26.4 26.9 21"
+        stroke="#ffffff"
+        strokeWidth="2.4"
         strokeLinecap="round"
         strokeLinejoin="round"
         fill="none"

package/src/ecosystem/ui/marks.tsx

@@ -12,6 +12,7 @@ import { GLYPHS } from './glyphs.tsx';
 // into a flat shape at 16 px.
 const MARK_STYLE: CSSProperties = { display: 'block', flex: 'none' };
 
+/** What a site's mark needs. */
 export interface SiteMarkProps {
   /**
    * The site whose mark is drawn, with the two colours it owns. One of `site`
@@ -45,6 +46,11 @@ export interface SiteMarkProps {
    * @default 'literal'
    */
   colors?: 'literal' | 'tokens';
+  /**
+   * Class names added to the root element.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -54,7 +60,14 @@ export interface SiteMarkProps {
  * @throws {Error} When neither `site` nor `siteId` is given.
  */
 export function SiteMark(props: SiteMarkProps): ReactElement {
-  const { site, siteId, size = 28, plate = true, colors = 'literal' } = props;
+  const {
+    className,
+    site,
+    siteId,
+    size = 28,
+    plate = true,
+    colors = 'literal',
+  } = props;
 
   const drawn = site ?? (siteId === undefined ? undefined : siteById(siteId));
   if (drawn === undefined) {
@@ -68,6 +81,7 @@ export function SiteMark(props: SiteMarkProps): ReactElement {
 
   return (
     <svg
+      className={className}
       style={MARK_STYLE}
       width={size}
       height={size}

package/src/error/core/index.ts

@@ -0,0 +1 @@
+export { errorMessage, toError } from './toError.ts';

package/src/error/{ui → core}/toError.ts

@@ -1,10 +1,11 @@
 /**
- * Turn whatever a component threw into an `Error`.
+ * Turn whatever was thrown into an `Error`.
  *
  * A `throw` is not required to carry an `Error` — a rejected fetch, a worker
  * message or a library can throw a string, an object or `undefined` — and the
- * boundary still has to name what happened.
- * @param thrown - The value that came out of the render.
+ * page still has to name what happened. A thrown object reads as its JSON
+ * rather than as `[object Object]`.
+ * @param thrown - The value that was thrown or rejected with.
  * @returns The value itself when it is an error, otherwise one describing it.
  */
 export function toError(thrown: unknown): Error {
@@ -13,6 +14,15 @@ export function toError(thrown: unknown): Error {
   return new Error(describe(thrown));
 }
 
+/**
+ * The sentence to show for whatever was thrown.
+ * @param thrown - The value that was thrown or rejected with.
+ * @returns The message of {@link toError}'s error.
+ */
+export function errorMessage(thrown: unknown): string {
+  return toError(thrown).message;
+}
+
 const UNPRINTABLE = 'an unprintable value was thrown';
 
 function describe(thrown: unknown): string {

package/src/error/ui/ErrorBoundary.tsx

@@ -1,8 +1,9 @@
 import type { ErrorInfo, ReactNode } from 'react';
 import { Component } from 'react';
 
+import { toError } from '../core/toError.ts';
+
 import { ErrorFallback } from './ErrorFallback.tsx';
-import { toError } from './toError.ts';
 
 /** What {@link ErrorBoundary} wraps, and what it does when that part fails. */
 export interface ErrorBoundaryProps {

package/src/error/ui/index.ts

@@ -1,4 +1,7 @@
-export type { ErrorBoundaryProps } from './ErrorBoundary.tsx';
+export type {
+  ErrorBoundaryProps,
+  ErrorBoundaryState,
+} from './ErrorBoundary.tsx';
 export { ErrorBoundary } from './ErrorBoundary.tsx';
 export type { ErrorFallbackProps } from './ErrorFallback.tsx';
 export { ErrorFallback } from './ErrorFallback.tsx';

package/src/format/core/clamp.ts

@@ -0,0 +1,24 @@
+/**
+ * A number held inside a range.
+ *
+ * A value that is not a finite number — `NaN` from a failed parse, an infinity
+ * from a division by zero, a stray value from a link — is not a position
+ * between the bounds, so it lands on the fallback rather than on whichever
+ * bound the comparison happens to pick.
+ * @param value - The number to hold.
+ * @param min - The smallest value allowed.
+ * @param max - The largest value allowed.
+ * @param fallback - What a value that is not finite becomes. Defaults to `min`.
+ * @returns The value, raised to `min` or lowered to `max` when it runs past them.
+ */
+export function clamp(
+  value: number,
+  min: number,
+  max: number,
+  fallback = min,
+): number {
+  if (!Number.isFinite(value)) return fallback;
+  if (value < min) return min;
+  if (value > max) return max;
+  return value;
+}

package/src/format/core/index.ts

@@ -1,9 +1,17 @@
+export { clamp } from './clamp.ts';
 export { MISSING_VALUE } from './missing.ts';
+export type { SignificantDigits } from './numbers.ts';
 export {
   formatCompact,
   formatDecimal,
   formatInteger,
+  formatPercent,
   formatTrimmed,
 } from './numbers.ts';
+export type { FormatRelativeTimeOptions } from './relativeTime.ts';
+export { formatRelativeTime } from './relativeTime.ts';
+export { roundTo } from './roundTo.ts';
+export { formatSuperscript } from './superscript.ts';
+export type { DurationStyle, FormatDurationOptions } from './units.ts';
 export { formatBytes, formatDuration } from './units.ts';
 export { pluralize } from './words.ts';

package/src/format/core/numbers.ts

@@ -1,3 +1,4 @@
+import { clamp } from './clamp.ts';
 import { MISSING_VALUE } from './missing.ts';
 
 const INTEGER_FORMATTER = new Intl.NumberFormat('en-US', {
@@ -10,10 +11,19 @@ const COMPACT_FORMATTER = new Intl.NumberFormat('en-US', {
 });
 
 const MAXIMUM_DIGITS = 20;
+const MAXIMUM_SIGNIFICANT = 21;
 const DEFAULT_DIGITS = 2;
+const DEFAULT_PERCENT_DIGITS = 1;
+const PERCENT = 100;
 
 const decimalFormatters = new Map<number, Intl.NumberFormat>();
 
+/** A precision counted in significant digits rather than in decimals. */
+export interface SignificantDigits {
+  /** How many significant digits to keep, from 1 to 21. */
+  significant: number;
+}
+
 /**
  * A whole number, grouped in thousands: `1,234,567`.
  *
@@ -35,12 +45,12 @@ export function formatInteger(value: number): string {
  * figures wants; use {@link formatTrimmed} for a label that should not carry
  * them.
  * @param value - The number to write.
- * @param digits - Decimals to show. Defaults to `2`; a count outside 0..20 is clamped into it, and one that is not a number falls back to the default.
+ * @param digits - Decimals to show. Defaults to `2`; a count outside 0..20 is clamped into it, and one that is not a finite number falls back to the default.
  * @returns The formatted number, or the missing marker when it is not finite.
  */
 export function formatDecimal(value: number, digits = DEFAULT_DIGITS): string {
   if (!Number.isFinite(value)) return MISSING_VALUE;
-  const safeDigits = clampDigits(digits);
+  const safeDigits = wholeCount(digits, 0, MAXIMUM_DIGITS);
   let formatter = decimalFormatters.get(safeDigits);
   if (formatter === undefined) {
     formatter = new Intl.NumberFormat('en-US', {
@@ -53,19 +63,48 @@ export function formatDecimal(value: number, digits = DEFAULT_DIGITS): string {
 }
 
 /**
- * A number rounded to `digits` decimals with the trailing zeros dropped:
- * `1.5`, `2`, `0.125`.
+ * A number rounded with the trailing zeros dropped: `1.5`, `2`, `0.125`.
  *
- * The thousands are not grouped, so the result stays a number a reader can
- * type back in — this is the form an axis tick, a chip or an exported cell
- * takes.
+ * The precision is a count of decimals, or of significant digits when passed
+ * as `{ significant }` — which is what a concentration spanning decades wants:
+ * `formatTrimmed(0.000_123_45, { significant: 3 })` is `0.000123`. The thousands
+ * are not grouped, so the result stays a number a reader can type back in; a
+ * number too small or too large for plain digits keeps the exponent JavaScript
+ * writes it with, e.g. `1.23e-7`.
  * @param value - The number to write.
- * @param digits - Decimals to round to. Defaults to `2`; a count outside 0..20 is clamped into it, and one that is not a number falls back to the default.
+ * @param digits - Decimals to round to, or `{ significant }`. Defaults to `2` decimals; a count out of range is clamped into it, and one that is not a finite number falls back to 2.
  * @returns The rounded number, or the missing marker when it is not finite.
  */
-export function formatTrimmed(value: number, digits = DEFAULT_DIGITS): string {
+export function formatTrimmed(
+  value: number,
+  digits: number | SignificantDigits = DEFAULT_DIGITS,
+): string {
   if (!Number.isFinite(value)) return MISSING_VALUE;
-  return Number.parseFloat(value.toFixed(clampDigits(digits))).toString();
+  const rounded =
+    typeof digits === 'number'
+      ? value.toFixed(wholeCount(digits, 0, MAXIMUM_DIGITS))
+      : value.toPrecision(
+          wholeCount(digits.significant, 1, MAXIMUM_SIGNIFICANT),
+        );
+  return Number.parseFloat(rounded).toString();
+}
+
+/**
+ * A share written as a percentage with its unit: `74.2 %`.
+ *
+ * The number is held to a fixed count of decimals, so a column of shares lines
+ * up and a title and the sentence under it agree on their precision.
+ * @param share - The share, from 0 to 1 — a fraction, never a percentage.
+ * @param digits - Decimals in the percentage. Defaults to `1`; a count that is not a finite number falls back to it.
+ * @returns The percentage and its unit, or the missing marker when the share is not finite.
+ */
+export function formatPercent(
+  share: number,
+  digits = DEFAULT_PERCENT_DIGITS,
+): string {
+  if (!Number.isFinite(share)) return MISSING_VALUE;
+  const safeDigits = Number.isFinite(digits) ? digits : DEFAULT_PERCENT_DIGITS;
+  return `${formatDecimal(share * PERCENT, safeDigits)} %`;
 }
 
 /**
@@ -78,7 +117,6 @@ export function formatCompact(value: number): string {
   return COMPACT_FORMATTER.format(value);
 }
 
-function clampDigits(digits: number): number {
-  if (!Number.isFinite(digits)) return DEFAULT_DIGITS;
-  return Math.min(MAXIMUM_DIGITS, Math.max(0, Math.trunc(digits)));
+function wholeCount(count: number, minimum: number, maximum: number): number {
+  return Math.trunc(clamp(count, minimum, maximum, DEFAULT_DIGITS));
 }

package/src/format/core/relativeTime.ts

@@ -0,0 +1,80 @@
+import { MISSING_VALUE } from './missing.ts';
+
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+const UNITS: ReadonlyArray<{
+  unit: Intl.RelativeTimeFormatUnit;
+  milliseconds: number;
+}> = [
+  { unit: 'year', milliseconds: 365 * DAY },
+  { unit: 'month', milliseconds: 30 * DAY },
+  { unit: 'week', milliseconds: 7 * DAY },
+  { unit: 'day', milliseconds: DAY },
+  { unit: 'hour', milliseconds: HOUR },
+  { unit: 'minute', milliseconds: MINUTE },
+];
+
+const FORMATTER = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });
+
+/** How {@link formatRelativeTime} measures and what it writes for nothing. */
+export interface FormatRelativeTimeOptions {
+  /**
+   * The instant the distance is measured from, in epoch milliseconds or as a
+   * date. Pass it when a list is drawn, so every row is measured against the
+   * same moment and a test gets the same words every time.
+   * @default Date.now()
+   */
+  now?: number | Date;
+  /**
+   * What is written when there is no instant, or it cannot be read.
+   * @default MISSING_VALUE
+   */
+  missing?: string;
+}
+
+/**
+ * How far an instant is from now, in words: `just now`, `5 minutes ago`,
+ * `yesterday`, `in 3 weeks`.
+ *
+ * The largest unit that fits is used and the count is rounded towards zero, so
+ * ninety minutes read `1 hour ago` rather than claiming two. Under a minute
+ * either way is `just now`, which also absorbs a clock that is a few seconds
+ * ahead. The locale is fixed to `en-US`, like every formatter of this module.
+ * @param instant - Epoch milliseconds, an ISO timestamp or a date.
+ * @param options - See {@link FormatRelativeTimeOptions}.
+ * @returns The phrase, or the missing text when the instant is absent or unreadable.
+ */
+export function formatRelativeTime(
+  instant: number | string | Date | undefined,
+  options: FormatRelativeTimeOptions = {},
+): string {
+  const { now = Date.now(), missing = MISSING_VALUE } = options;
+  const time = toTime(instant);
+  const reference = toTime(now);
+  if (time === undefined || reference === undefined) return missing;
+
+  const elapsed = time - reference;
+  const distance = Math.abs(elapsed);
+  for (const { unit, milliseconds } of UNITS) {
+    if (distance >= milliseconds) {
+      const count = Math.floor(distance / milliseconds);
+      return FORMATTER.format(elapsed < 0 ? -count : count, unit);
+    }
+  }
+  return 'just now';
+}
+
+function toTime(
+  instant: number | string | Date | undefined,
+): number | undefined {
+  if (instant === undefined || instant === '') return undefined;
+  const time =
+    typeof instant === 'number'
+      ? instant
+      : typeof instant === 'string'
+        ? Date.parse(instant)
+        : instant.getTime();
+  return Number.isFinite(time) ? time : undefined;
+}

package/src/format/core/roundTo.ts

@@ -0,0 +1,27 @@
+import { clamp } from './clamp.ts';
+
+const MAXIMUM_DECIMALS = 15;
+const DEFAULT_DECIMALS = 2;
+const POWERS_OF_TEN = [
+  1, 10, 100, 1e3, 1e4, 1e5, 1e6, 1e7, 1e8, 1e9, 1e10, 1e11, 1e12, 1e13, 1e14,
+  1e15,
+] as const;
+
+/**
+ * A number rounded to a fixed count of decimals, and still a number.
+ *
+ * This is the rounding an SVG coordinate or a stored setting takes: `12.3456`
+ * becomes `12.35`, so a figure writes short attributes and two renders of the
+ * same data write the same markup. Use `formatTrimmed` when a string is wanted.
+ * @param value - The number to round.
+ * @param decimals - Decimals to keep, from 0 to 15. Defaults to `2`; a count that is not a finite number falls back to it.
+ * @returns The rounded number; a value that is not finite comes back unchanged.
+ */
+export function roundTo(value: number, decimals = DEFAULT_DECIMALS): number {
+  if (!Number.isFinite(value)) return value;
+  const index = Math.trunc(
+    clamp(decimals, 0, MAXIMUM_DECIMALS, DEFAULT_DECIMALS),
+  );
+  const factor = POWERS_OF_TEN[index] ?? 1;
+  return Math.round(value * factor) / factor;
+}

package/src/format/core/superscript.ts

@@ -0,0 +1,22 @@
+const SUPERSCRIPT_DIGITS = '⁰¹²³⁴⁵⁶⁷⁸⁹';
+const SUPERSCRIPT_MINUS = '⁻';
+
+/**
+ * A whole number written in Unicode superscript characters: `14` becomes `¹⁴`,
+ * `-3` becomes `⁻³`.
+ *
+ * It is how an exponent, a charge or a subshell occupancy is written inside a
+ * plain string — an axis title, an `<option>`, a copied value — where no
+ * `<sup>` element can go.
+ * @param value - The number to write; anything after the decimal point is dropped.
+ * @returns The superscript digits with their sign, or an empty string when the value is not finite.
+ */
+export function formatSuperscript(value: number): string {
+  if (!Number.isFinite(value)) return '';
+  const whole = Math.trunc(value);
+  let text = whole < 0 ? SUPERSCRIPT_MINUS : '';
+  for (const digit of Math.abs(whole).toString()) {
+    text += SUPERSCRIPT_DIGITS.charAt(Number(digit));
+  }
+  return text;
+}

package/src/format/core/units.ts

@@ -2,9 +2,39 @@ import { MISSING_VALUE } from './missing.ts';
 
 const BYTE_UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB'] as const;
 const BYTES_PER_UNIT = 1024;
+const MILLISECONDS_PER_SECOND = 1000;
+const TENTHS_PER_MINUTE = 600;
 const SECONDS_PER_MINUTE = 60;
 const MINUTES_PER_HOUR = 60;
 
+/** How a duration is spelled. */
+export type DurationStyle = 'compact' | 'spaced';
+
+const UNIT_NAMES: Record<
+  DurationStyle,
+  { millisecond: string; second: string; minute: string; hour: string }
+> = {
+  compact: { millisecond: 'ms', second: 's', minute: 'm', hour: 'h' },
+  spaced: { millisecond: ' ms', second: ' s', minute: ' min', hour: ' h' },
+};
+
+/** How {@link formatDuration} writes a duration. */
+export interface FormatDurationOptions {
+  /**
+   * `compact` glues each unit to its number (`3m 20s`), for a table cell;
+   * `spaced` writes the units out (`3 min 20 s`), for a sentence.
+   * @default 'compact'
+   */
+  style?: DurationStyle;
+  /**
+   * Whether a short duration keeps its fraction of a second: under a second it
+   * is written in milliseconds (`450 ms`), and under a minute with one decimal
+   * (`2.3 s`). Without it, both round to whole seconds.
+   * @default false
+   */
+  subSecond?: boolean;
+}
+
 /**
  * A byte count in the largest unit that keeps it under a thousand: `512 B`,
  * `1.5 kB`, `240 MB`.
@@ -29,11 +59,16 @@ export function formatBytes(bytes: number | undefined): string {
 }
 
 /**
- * A duration written with its two largest units: `45s`, `3m 20s`, `2h 05m`.
+ * A duration written with its two largest units: `45s`, `3m 20s`, `2h 05m`,
+ * or `45 s`, `3 min 20 s`, `2 h 05 min` in the spaced style.
  * @param milliseconds - The duration in milliseconds.
+ * @param options - See {@link FormatDurationOptions}.
  * @returns The duration, or the missing marker when there is no finite, non-negative duration.
  */
-export function formatDuration(milliseconds: number | undefined): string {
+export function formatDuration(
+  milliseconds: number | undefined,
+  options: FormatDurationOptions = {},
+): string {
   if (
     milliseconds === undefined ||
     !Number.isFinite(milliseconds) ||
@@ -41,18 +76,30 @@ export function formatDuration(milliseconds: number | undefined): string {
   ) {
     return MISSING_VALUE;
   }
-  const seconds = Math.round(milliseconds / 1000);
-  if (seconds < SECONDS_PER_MINUTE) return `${seconds}s`;
+  const { style = 'compact', subSecond = false } = options;
+  const names = UNIT_NAMES[style];
+
+  if (subSecond) {
+    const whole = Math.round(milliseconds);
+    if (whole < MILLISECONDS_PER_SECOND) return `${whole}${names.millisecond}`;
+    const tenths = Math.round(milliseconds / 100);
+    if (tenths < TENTHS_PER_MINUTE) {
+      return `${(tenths / 10).toFixed(1)}${names.second}`;
+    }
+  }
+
+  const seconds = Math.round(milliseconds / MILLISECONDS_PER_SECOND);
+  if (seconds < SECONDS_PER_MINUTE) return `${seconds}${names.second}`;
 
   const minutes = Math.floor(seconds / SECONDS_PER_MINUTE);
   const remainingSeconds = seconds % SECONDS_PER_MINUTE;
   if (minutes < MINUTES_PER_HOUR) {
-    return `${minutes}m ${pad(remainingSeconds)}s`;
+    return `${minutes}${names.minute} ${pad(remainingSeconds)}${names.second}`;
   }
 
   const hours = Math.floor(minutes / MINUTES_PER_HOUR);
   const remainingMinutes = minutes % MINUTES_PER_HOUR;
-  return `${hours}h ${pad(remainingMinutes)}m`;
+  return `${hours}${names.hour} ${pad(remainingMinutes)}${names.minute}`;
 }
 
 function pad(value: number): string {