🎉 NEW: ready to look

techniq · Nov 16, 2023 · a9bce73 · a9bce73
1 parent 2fc6582
commit a9bce73
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 11 deletions.
diff --git a/packages/svelte-ux/src/lib/utils/format.ts b/packages/svelte-ux/src/lib/utils/format.ts
@@ -1,8 +1,8 @@
 import { isFunction } from 'lodash-es';
 
 import { formatDate, PeriodType } from './date';
-import { formatNumberAsStyle } from './number';
-import type { FormatNumberStyle } from './number';
+import { formatNumber } from './number';
+import type { FormatNumberOptions, FormatNumberStyle } from './number';
 
 export type FormatType =
   | FormatNumberStyle
@@ -12,16 +12,30 @@ export type FormatType =
 /**
  * Generic format which can handle Dates, Numbers, or custom format function
  */
-export function format(value: any, format?: FormatType, ...extraFuncArgs: any[]) {
+export function format(
+  value: number | null,
+  format?: FormatNumberStyle,
+  extraFuncArgs?: FormatNumberOptions
+): string;
+export function format(
+  value: string | Date | null | undefined,
+  format?: PeriodType,
+  ...extraFuncArgs: any[]
+): string;
+export function format(value: any, format?: FormatType, ...extraFuncArgs: any[]): any {
   let formattedValue = value ?? ''; // Do not render `null`
 
   if (format) {
+    // TODO QUESTION: is this used?
     if (isFunction(format)) {
       formattedValue = format(value, ...extraFuncArgs);
     } else if (format in PeriodType) {
       formattedValue = formatDate(value, format as PeriodType, ...extraFuncArgs);
     } else if (typeof value === 'number') {
-      formattedValue = formatNumberAsStyle(value, format as FormatNumberStyle, ...extraFuncArgs);
+      formattedValue = formatNumber(value, {
+        style: format,
+        ...extraFuncArgs[0],
+      });
     }
   }
 

diff --git a/packages/svelte-ux/src/lib/utils/number.test.ts b/packages/svelte-ux/src/lib/utils/number.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 
-import { clamp, formatNumber, formatNumberAsStyle, round } from './number';
+import { clamp, formatNumber, round } from './number';
 
 describe('clamp()', () => {
   it('no change', () => {
@@ -67,6 +67,7 @@ describe('formatNumber()', () => {
   it('formats number with integer', () => {
     const actual = formatNumber(1234.5678, { style: 'integer' });
     expect(actual).equal('1234');
+    expect(actual).equal('1,234'); // TODO: Today its like this... It's intended? (I leave the test breaking for now)
   });
 
   it('formats number with default fraction digits', () => {
@@ -81,7 +82,6 @@ describe('formatNumber()', () => {
 
   it('returns value with significant digits', () => {
     const actual = formatNumber(1234.5678, {
-      // style: 'decimal', // Optional, default is decimal
       notation: 'compact',
       maximumSignificantDigits: 2,
     });
@@ -90,7 +90,6 @@ describe('formatNumber()', () => {
 
   it('returns value with significant digits', () => {
     const actual = formatNumber(1000, {
-      // style: 'decimal', // Optional, default is decimal
       notation: 'compact',
       minimumSignificantDigits: 2,
     });

diff --git a/packages/svelte-ux/src/lib/utils/number.ts b/packages/svelte-ux/src/lib/utils/number.ts
@@ -10,7 +10,7 @@ export type FormatNumberStyle =
   | 'percentRound'
   | 'metric';
 
-type FormatNumberOptions = Intl.NumberFormatOptions & {
+export type FormatNumberOptions = Intl.NumberFormatOptions & {
   style?: FormatNumberStyle;
   locales?: string | undefined;
   fractionDigits?: number;
@@ -41,7 +41,12 @@ export function formatNumber(
   }
 
   // todo set defaults in a context or something
-  const defaults: FormatNumberOptions = { currency: 'USD', fractionDigits: 2 };
+  const defaults: FormatNumberOptions = {
+    locales: 'en',
+    currency: 'USD',
+    fractionDigits: 2,
+    currencyDisplay: 'symbol',
+  };
 
   const formatter = Intl.NumberFormat(options.locales ?? defaults.locales ?? undefined, {
     // Let's always starts with all defaults

diff --git a/packages/svelte-ux/src/routes/docs/utils/format/+page.svelte b/packages/svelte-ux/src/routes/docs/utils/format/+page.svelte
@@ -21,9 +21,9 @@
   <div>{format(1234.56, 'currency')}</div>
   <div>{format(0.5678, 'percent')}</div>
   <div>{format(0.5678, 'percentRound')}</div>
-  <div>{format(1_234_567, 'metric')}</div>
+  <div>{format(1_234_567, 'metric', { minimumSignificantDigits: 5 })}</div>
   <div>{format(1_200_000, 'metric')}</div>
-  <div>{format(0.5678, 'percent', 1)}</div>
+  <div>{format(0.5678, 'percent', { fractionDigits: 1 })}</div>
 </Preview>
 
 <h2>Period formats</h2>