dev-api-ui 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "dev-api-ui",
-  "version": "0.1.7",
+  "version": "0.1.8",
+  "private": false,
   "files": [
     "ui"
   ],

package/ui/components/HubPage.tsx

@@ -145,7 +145,12 @@ function deltaColor(up: boolean): string {
 
 // The shared table / list layout used in both list and search modes
 function RowTable({ rows, group }: { rows: Row[]; group: string }) {
-  const slugFor = (r: Row) => r.slug;
+  // Derive the route slug from the symbol so it always follows the house lowercase-hyphen
+  // convention (EUR/USD → eur-usd), matching every vertical's /<group>/<base>-<quote> routes.
+  // The hand-maintained `slug` field shipped un-hyphenated demo values (eurusd) that 404'd on the
+  // real hyphenated routes (BUG-3); deriving removes that drift class. Symbols without a slash
+  // (energy: PJM-RT) pass through lowercased, matching their existing slugs.
+  const slugFor = (r: Row) => r.sym.toLowerCase().replace('/', '-');
   return (
     <div
       style={{

package/ui/format.ts

@@ -0,0 +1,59 @@
+/**
+ * Currency/number formatting helpers backed by Intl.NumberFormat + CLDR.
+ * Zero-decimal currencies (JPY, KRW, VND, …) render without fractional digits
+ * automatically — no lookup table required.
+ */
+
+/**
+ * Returns the correct maximumFractionDigits for a currency code, or 2 on error.
+ * Uses a throw-away Intl.NumberFormat so we never duplicate CLDR data.
+ */
+function fractionDigits(currencyCode: string, locale: string): number {
+  try {
+    return new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: currencyCode,
+    }).resolvedOptions().maximumFractionDigits ?? 2;
+  } catch {
+    return 2;
+  }
+}
+
+/**
+ * Formats `value` as a localised currency string including the symbol/code.
+ * Uses Intl.NumberFormat so minor-unit digit count is correct per ISO-4217
+ * (JPY → 0 decimals, USD → 2, BHD → 3, etc.).
+ * Falls back to a plain number string if `currencyCode` is invalid.
+ */
+export function formatCurrencyAmount(
+  value: number,
+  currencyCode: string,
+  locale = 'en-US',
+): string {
+  try {
+    return new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: currencyCode,
+    }).format(value);
+  } catch {
+    return new Intl.NumberFormat(locale).format(value);
+  }
+}
+
+/**
+ * Formats `value` with the correct decimal precision for `currencyCode` but
+ * WITHOUT a currency symbol — for callers that render their own prefix/suffix.
+ * Falls back to 2 decimal places if `currencyCode` is invalid.
+ */
+export function formatCurrencyNumber(
+  value: number,
+  currencyCode: string,
+  locale = 'en-US',
+): string {
+  const digits = fractionDigits(currencyCode, locale);
+  return new Intl.NumberFormat(locale, {
+    style: 'decimal',
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+  }).format(value);
+}

package/ui/index.ts

@@ -48,3 +48,6 @@ export { default as StatusMark } from './components/StatusMark';
 // The illustrative SERIES_DATA blob stays internal (demo-only, not public API).
 export { getSeriesData } from './data/series';
 export type { RangeEntry, RelatedEntry, ReadingEntry, SeriesData } from './data/series';
+
+// Formatting helpers
+export { formatCurrencyAmount, formatCurrencyNumber } from './format';