feat(format): Support passing locale as part of config object (#82)

Author: techniq

.changeset/open-schools-spend.md

@@ -0,0 +1,5 @@
+---
+'@layerstack/utils': patch
+---
+
+feat(format): Support passing `locale` as part of config object

packages/utils/src/lib/format.test.ts

@@ -16,6 +16,29 @@ describe('format()', () => {
     expect(actual).equal('');
   });
 
+  describe('format based on value type', () => {
+    it('integer', () => {
+      const actual = format(1234);
+      expect(actual).equal('1,234');
+    });
+    it('decimal', () => {
+      const actual = format(1234.5678);
+      expect(actual).equal('1,234.57');
+    });
+    it('date string', () => {
+      const actual = format(testDateStr);
+      expect(actual).equal('11/21/2023');
+    });
+    it('date', () => {
+      const actual = format(parseDate(testDateStr));
+      expect(actual).equal('11/21/2023');
+    });
+    it('string', () => {
+      const actual = format('hello');
+      expect(actual).equal('hello');
+    });
+  });
+
   describe('formats number', () => {
     // See `number.test.ts` for more number tests
     it('returns original value as string for style "none"', () => {
@@ -46,6 +69,16 @@ describe('format()', () => {
       expect(actual).equal('1,234.57');
     });
 
+    it('formats with "decimal" config with locale (es)', () => {
+      const actual = format(1234.5678, { type: 'decimal', locale: 'es' });
+      expect(actual).equal('1234,57');
+    });
+
+    it('formats with "decimal" config with locale (de)', () => {
+      const actual = format(1234.5678, { type: 'decimal', locale: 'de' });
+      expect(actual).equal('1.234,57');
+    });
+
     it('formats with "decimal" config with extra options', () => {
       const actual = format(1234.5678, { type: 'decimal', options: { fractionDigits: 3 } });
       expect(actual).equal('1,234.568');
@@ -100,32 +133,19 @@ describe('format()', () => {
       expect(actual).equal('11/21/2023');
     });
 
-    it('formats date with config with extra options', () => {
-      const actual = format(testDate, { type: 'day', options: { variant: 'short' } });
-      expect(actual).equal('11/21');
+    it('formats date with config with locale', () => {
+      const actual = format(testDate, { type: 'day', locale: 'es' });
+      expect(actual).equal('21/11/2023');
     });
-  });
 
-  describe('format based on value type', () => {
-    it('format based on value type (integer)', () => {
-      const actual = format(1234);
-      expect(actual).equal('1,234');
-    });
-    it('format based on value type (decimal)', () => {
-      const actual = format(1234.5678);
-      expect(actual).equal('1,234.57');
-    });
-    it('format based on value type (date string)', () => {
-      const actual = format(testDateStr);
-      expect(actual).equal('11/21/2023');
-    });
-    it('format based on value type (date)', () => {
-      const actual = format(parseDate(testDateStr));
-      expect(actual).equal('11/21/2023');
+    it('formats date with config with locale', () => {
+      const actual = format(testDate, { type: 'day', locale: 'de' });
+      expect(actual).equal('21.11.2023');
     });
-    it('format based on value type (string)', () => {
-      const actual = format('hello');
-      expect(actual).equal('hello');
+
+    it('formats date with config with extra options', () => {
+      const actual = format(testDate, { type: 'day', options: { variant: 'short' } });
+      expect(actual).equal('11/21');
     });
   });
 });

packages/utils/src/lib/format.ts

@@ -7,7 +7,7 @@ import {
 } from './date.js';
 import { formatNumberWithLocale } from './number.js';
 import type { FormatNumberOptions, FormatNumberStyle } from './number.js';
-import { defaultLocale, type LocaleSettings } from './locale.js';
+import { createLocaleSettings, defaultLocale, type LocaleSettings } from './locale.js';
 import {
   PeriodType,
   type FormatDateOptions,
@@ -29,33 +29,51 @@ export type { FormatNumberStyle, PeriodType, PeriodTypeCode };
  */
 export function format(value: null | undefined, format?: FormatType): string;
 export function format(value: null | undefined, config: { type: FormatType }): string;
+
+// number
 export function format(
   value: number,
   format?: FormatNumberStyle | CustomFormatter,
-  options?: FormatNumberOptions
+  options?: FormatNumberOptions,
+  locale?: string
 ): string;
 export function format(
   value: number,
-  config: { type: FormatNumberStyle | CustomFormatter; options?: FormatNumberOptions }
+  config: {
+    type: FormatNumberStyle | CustomFormatter;
+    options?: FormatNumberOptions;
+    locale?: string;
+  }
 ): string;
+
+// Date
 export function format(
   value: string | Date,
   format?: PeriodType | PeriodTypeCode | CustomFormatter,
-  options?: FormatDateOptions
+  options?: FormatDateOptions,
+  locale?: string
 ): string;
 export function format(
   value: string | Date,
-  config: { type: PeriodType | PeriodTypeCode | CustomFormatter; options?: FormatDateOptions }
+  config: {
+    type: PeriodType | PeriodTypeCode | CustomFormatter;
+    options?: FormatDateOptions;
+    locale?: string;
+  }
 ): string;
+
 export function format(
   value: any,
   formatOrConfig?:
     | FormatType
-    | { type: FormatType; options?: FormatNumberOptions | FormatDateOptions },
+    | { type: FormatType; options?: FormatNumberOptions | FormatDateOptions; locale?: string },
   options?: FormatNumberOptions | FormatDateOptions
 ): any {
-  if (formatOrConfig && typeof formatOrConfig === 'object' && 'type' in formatOrConfig) {
-    return formatWithLocale(defaultLocale, value, formatOrConfig.type, formatOrConfig.options);
+  if (typeof formatOrConfig === 'object') {
+    const locale = formatOrConfig.locale
+      ? createLocaleSettings({ locale: formatOrConfig.locale })
+      : defaultLocale;
+    return formatWithLocale(locale, value, formatOrConfig.type, formatOrConfig.options);
   }
   return formatWithLocale(defaultLocale, value, formatOrConfig as FormatType, options);
 }

sites/docs/src/routes/docs/utils/format/+page.svelte

@@ -11,7 +11,7 @@
   import Code from '$docs/Code.svelte';
 
   let value = 1234.56;
-  let style: FormatNumberStyle = 'decimal';
+  let numberType: FormatNumberStyle = 'decimal';
   let currency: Intl.NumberFormatOptions['currency'] | undefined = 'USD';
   let notation: Intl.NumberFormatOptions['notation'] = 'standard';
 
@@ -50,8 +50,8 @@
   <TextField label="value" bind:value type="decimal" />
 
   <MenuField
-    label="style"
-    bind:value={style}
+    label="type"
+    bind:value={numberType}
     options={[
       'integer',
       'decimal',
@@ -72,7 +72,7 @@
       value,
     }))}
     stepper
-    disabled={style !== 'currency' && style !== 'currencyRound'}
+    disabled={numberType !== 'currency' && numberType !== 'currencyRound'}
   />
 
   <MenuField
@@ -94,7 +94,7 @@
 </div>
 
 <Preview>
-  <div>{format(value, style, { currency, notation })}</div>
+  <div>{format(value, { type: numberType, locale, options: { currency, notation } })}</div>
 </Preview>
 
 <h2>Playground dates</h2>
@@ -118,7 +118,7 @@
 </div>
 
 <Preview>
-  <div>{format(myDate, periodType)}</div>
+  <div>{format(myDate, { type: periodType, locale })}</div>
 </Preview>
 
 <h1>Numbers</h1>