🕰️ NEW: formatDate (#137)

* re init my mess dates

* update for consistency

* moving format to intl

* tests with also fr local

* dico

* dateDisplay update

* Humm

* tmp rename to format_fns

* realignement & doc update

* add a playground

* Month & monthYear

* DateField

* Date Range

* Month done

* rmv all usage of dateDisplay

* Nice nice nice

* casing

* enums casing

* oups, need to comment fr for now in the doc

* formats

* okay with date of week

* update docs

* add changeset

* rmv dateDisplay

* cleanup

* dico

* keep Day default

* rmv useless

* Okay, adding DayTime & TimeOnly

* of course, updating doc is always good :)

* Swtich default to use Tokens enum

Author: jycouet

.changeset/light-ways-dress.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+BREAKING: removed `dateDisplay()` in favor of `format()`

.changeset/ninety-carpets-cross.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+add locale management of date leveraging intl

.gitignore

@@ -6,5 +6,6 @@ coverage/
 .idea/
 .svelte-kit/
 .env
+.DS_Store
 
 test-*

packages/svelte-ux/package.json

@@ -13,7 +13,7 @@
     "prepublishOnly": "svelte-package",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "test:unit": "vitest",
+    "test:unit": "TZ=UTC+4 vitest --coverage",
     "lint": "prettier --ignore-path ../../.gitignore --check .",
     "format": "prettier --ignore-path ../../.gitignore --write .",
     "typedoc": "typedoc",
@@ -29,6 +29,7 @@
     "@types/lodash-es": "^4.17.11",
     "@types/marked": "^6.0.0",
     "@types/prismjs": "^1.26.3",
+    "@vitest/coverage-v8": "^0.34.6",
     "autoprefixer": "^10.4.16",
     "execa": "^8.0.1",
     "marked": "^10.0.0",
@@ -56,8 +57,7 @@
     "clsx": "^2.0.0",
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
-    "d3-time": "^3.1.0",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.0.5",
     "immer": "^10.0.3",
     "lodash-es": "^4.17.21",
     "posthog-js": "^1.95.1",

packages/svelte-ux/src/lib/components/DateButton.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  import { format as dateFormat, isWithinInterval } from 'date-fns';
+  import { isWithinInterval } from 'date-fns';
 
   import Button from './Button.svelte';
-  import { getDateFuncsByPeriodType, PeriodType } from '../utils/date';
+  import { DateToken, getDateFuncsByPeriodType, PeriodType } from '../utils/date';
   import type { SelectedDate } from '../utils/date';
   import { cls } from '../utils/styles';
   import { getComponentTheme } from './theme';
+  import { format as format_ux } from '../utils';
 
   const dispatch = createEventDispatcher();
 
@@ -16,21 +17,17 @@
   export let selected: SelectedDate;
   export let hidden: boolean = false;
   export let fade: boolean = false;
-  export let format = getDefaultFormat(periodType);
+  export let format = getCustomFormat(periodType);
 
   const theme = getComponentTheme('DateButton');
 
-  function getDefaultFormat(periodType: PeriodType) {
+  function getCustomFormat(periodType: PeriodType) {
     switch (periodType) {
-      case PeriodType.CalendarYear:
-      case PeriodType.FiscalYearOctober:
-        return 'yyyy';
-      case PeriodType.Month:
-        return 'MMM';
       case PeriodType.Day:
-        return 'd';
+        return DateToken.DayOfMonth_numeric;
       default:
-        return 'MM/dd/yyyy';
+        // returning undefined will use the default format of PeriodType
+        return undefined;
     }
   }
 
@@ -40,33 +37,33 @@
     selected instanceof Date
       ? isSame(date, selected)
       : selected instanceof Array
-      ? selected.some((d) => isSame(date, d))
-      : selected instanceof Object
-      ? selected.from
-        ? isWithinInterval(date, {
-            start: start(selected.from),
-            end: end(selected.to ?? selected.from),
-          })
-        : false
-      : false;
+        ? selected.some((d) => isSame(date, d))
+        : selected instanceof Object
+          ? selected.from
+            ? isWithinInterval(date, {
+                start: start(selected.from),
+                end: end(selected.to ?? selected.from),
+              })
+            : false
+          : false;
 
   $: isSelectedStart =
     selected instanceof Date
       ? isSame(date, selected)
       : selected instanceof Array
-      ? selected.some((d) => isSame(date, d))
-      : selected instanceof Object
-      ? isSame(date, selected.from ?? selected.to)
-      : false;
+        ? selected.some((d) => isSame(date, d))
+        : selected instanceof Object
+          ? isSame(date, selected.from ?? selected.to)
+          : false;
 
   $: isSelectedEnd =
     selected instanceof Date
       ? isSame(date, selected)
       : selected instanceof Array
-      ? selected.some((d) => isSame(date, d))
-      : selected instanceof Object
-      ? isSame(date, selected.to ?? selected.from)
-      : false;
+        ? selected.some((d) => isSame(date, d))
+        : selected instanceof Object
+          ? isSame(date, selected.to ?? selected.from)
+          : false;
 
   $: isCurrent = isSame(date, new Date());
 
@@ -107,6 +104,6 @@
       dispatch('dateChange', date);
     }}
   >
-    {dateFormat(date, format)}
+    {format_ux(date, periodType, { custom: format })}
   </Button>
 </div>

packages/svelte-ux/src/lib/components/DateField.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  import { parse as parseDate, format as formatDate } from 'date-fns';
+  import { parse as parseDate } from 'date-fns';
+  import { PeriodType, format as format_ux } from '../utils';
+  import { getSettings } from './settings';
 
   import Field from './Field.svelte';
 
   import Input from './Input.svelte';
   import DatePickerField from './DatePickerField.svelte';
   import { getComponentTheme } from './theme';
 
-  export let value: Date = null;
-  export let format = 'MM/dd/yyyy';
+  export let value: Date | null = null;
+  export let format = getSettings().formats?.dates?.baseParsing ?? 'MM/dd/yyyy';
   export let mask = format.toLowerCase();
   export let replace = 'dmyh';
   export let picker = false;
@@ -27,14 +29,14 @@
 
   const theme = getComponentTheme('DateField');
 
-  let inputValue = '';
+  let inputValue: string | undefined = '';
 
   const dispatch = createEventDispatcher();
 
-  function onInputChange(e) {
+  function onInputChange(e: any) {
     inputValue = e.detail.value;
     const lastValue = value;
-    const parsedValue = parseDate(inputValue, format, new Date());
+    const parsedValue = parseDate(inputValue ?? '', format, new Date());
     value = isNaN(parsedValue.valueOf()) ? null : parsedValue;
     if (value != lastValue) {
       dispatch('change', { value });
@@ -55,13 +57,13 @@
   {clearable}
   on:clear={() => {
     value = null;
-    inputValue = null;
+    inputValue = undefined;
     dispatch('change', { value });
   }}
   let:id
 >
   <Input
-    value={value ? formatDate(value, format) : inputValue}
+    value={value ? format_ux(value, PeriodType.Day, { custom: format }) : inputValue}
     {mask}
     {replace}
     {id}

packages/svelte-ux/src/lib/components/DatePickerField.svelte

@@ -6,10 +6,11 @@
   import Button from './Button.svelte';
   import Field from './Field.svelte';
   import Dialog from './Dialog.svelte';
-  import { getDateFuncsByPeriodType, PeriodType } from '../utils/date';
+  import { DateToken, getDateFuncsByPeriodType, PeriodType } from '../utils/date';
   import DateSelect from './DateSelect.svelte';
-  import { dateDisplay } from '../utils/dateDisplay';
   import { getComponentTheme } from './theme';
+  import { format } from '../utils';
+  import { getDictionary } from './settings';
 
   const dispatch = createEventDispatcher();
 
@@ -37,18 +38,23 @@
 
   // let format: string = 'EEE, MMM d';
   // Show "Day of Week", "Year", etc based on perioType (see DayStepper, MonthStepper)
-  let primaryFormat = '';
-  let secondaryFormat = '';
+  let primaryFormat: string | string[] = '';
+  let secondaryFormat: string | string[] = '';
 
   $: switch (periodType) {
     case PeriodType.Month:
-      primaryFormat = 'MMMM';
-      secondaryFormat = 'yyyy';
+      primaryFormat = DateToken.Month_long;
+      secondaryFormat = DateToken.Year_numeric;
       break;
     case PeriodType.Day:
     default:
-      primaryFormat = 'MMMM do, yyyy';
-      secondaryFormat = 'eeee';
+      primaryFormat = [
+        DateToken.Month_long,
+        DateToken.DayOfMonth_withOrdinal,
+        DateToken.Year_numeric,
+      ];
+
+      secondaryFormat = DateToken.DayOfWeek_long;
   }
 
   $: currentValue = value;
@@ -58,7 +64,7 @@
   <Button icon={mdiCalendar} on:click={() => (open = true)} {...$$restProps} />
 {:else}
   <Field
-    label={label ?? dateDisplay(value, { format: secondaryFormat })}
+    label={label ?? format(value, PeriodType.Day, { custom: secondaryFormat })}
     {icon}
     {error}
     {hint}
@@ -92,7 +98,7 @@
       on:click={() => (open = true)}
       {id}
     >
-      {dateDisplay(value, { format: primaryFormat })}
+      {format(value, PeriodType.Day, { custom: primaryFormat })}
     </button>
 
     <div slot="append">
@@ -129,10 +135,10 @@
   {#if currentValue}
     <div class="flex flex-col justify-center bg-accent-500 text-white px-6 h-24" transition:slide>
       <div class="text-sm text-white/50">
-        {dateDisplay(currentValue, { format: secondaryFormat })}
+        {format(currentValue, PeriodType.Day, { custom: secondaryFormat })}
       </div>
       <div class="text-3xl text-white">
-        {dateDisplay(currentValue, { format: primaryFormat })}
+        {format(currentValue, PeriodType.Day, { custom: primaryFormat })}
       </div>
     </div>
   {/if}
@@ -153,13 +159,13 @@
         value = currentValue;
         dispatch('change', value);
       }}
-      class="bg-accent-500 text-white hover:bg-accent-600">OK</Button
+      class="bg-accent-500 text-white hover:bg-accent-600">{getDictionary().Ok}</Button
     >
     <Button
       on:click={() => {
         open = false;
         currentValue = value;
-      }}>Cancel</Button
+      }}>{getDictionary().Cancel}</Button
     >
   </div>
 </Dialog>