dev-api-ui 0.1.7 → 0.1.9

package/package.json

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

package/ui/components/HubPage.tsx

@@ -70,6 +70,12 @@ const GROUP_CONFIG: Record<string, GroupConfig> = {
 
 type Row = { sym: string; name: string; last: string; delta: string; up: boolean; status: string; cat: string; slug: string };
 
+// Route slug derived from the symbol so links always follow the house lowercase-hyphen convention
+// (EUR/USD → eur-usd), matching every vertical's /<group>/<base>-<quote> routes. Used by BOTH the
+// leaf "Popular" cards and the list/search RowTable — the hand-maintained `slug` field shipped
+// un-hyphenated demo values (eurusd) that 404'd (BUG-3). Slash-less symbols (PJM-RT) just lowercase.
+const routeSlug = (sym: string) => sym.toLowerCase().replace('/', '-');
+
 const GROUP_ROWS: Record<string, Row[]> = {
   fx: [
     { sym: 'EUR/USD', name: 'Euro / US Dollar',              last: '1.08642',  delta: '+0.31%', up: true,  status: 'Live',    cat: 'Majors',  slug: 'eurusd'  },
@@ -145,7 +151,7 @@ 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;
+  const slugFor = (r: Row) => routeSlug(r.sym);
   return (
     <div
       style={{
@@ -374,7 +380,7 @@ export default function HubPage({ group, description, pairs: pairsOverride, eyeb
                 {popular.map((p) => (
                   <Link
                     key={p.sym}
-                    href={`/${group}/${p.slug}`}
+                    href={`/${group}/${routeSlug(p.sym)}`}
                     style={{
                       display: 'block',
                       background: 'var(--surface)',

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';