Skip to content

Commit 90c3883

Browse files
jycouettechniq
jycouet
authored and
techniq
committed
🕰️ 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
1 parent ceb9d25 commit 90c3883

31 files changed

+1808
-433
lines changed

‎.changeset/light-ways-dress.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte-ux': minor
3+
---
4+
5+
BREAKING: removed `dateDisplay()` in favor of `format()`

‎.changeset/ninety-carpets-cross.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte-ux': patch
3+
---
4+
5+
add locale management of date leveraging intl

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@ coverage/
66
.idea/
77
.svelte-kit/
88
.env
9+
.DS_Store
910

1011
test-*

‎packages/svelte-ux/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"prepublishOnly": "svelte-package",
1414
"check": "svelte-check --tsconfig ./tsconfig.json",
1515
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
16-
"test:unit": "vitest",
16+
"test:unit": "TZ=UTC+4 vitest --coverage",
1717
"lint": "prettier --ignore-path ../../.gitignore --check .",
1818
"format": "prettier --ignore-path ../../.gitignore --write .",
1919
"typedoc": "typedoc",
@@ -29,6 +29,7 @@
2929
"@types/lodash-es": "^4.17.11",
3030
"@types/marked": "^6.0.0",
3131
"@types/prismjs": "^1.26.3",
32+
"@vitest/coverage-v8": "^0.34.6",
3233
"autoprefixer": "^10.4.16",
3334
"execa": "^8.0.1",
3435
"marked": "^10.0.0",
@@ -56,8 +57,7 @@
5657
"clsx": "^2.0.0",
5758
"d3-array": "^3.2.4",
5859
"d3-scale": "^4.0.2",
59-
"d3-time": "^3.1.0",
60-
"date-fns": "^2.30.0",
60+
"date-fns": "^3.0.5",
6161
"immer": "^10.0.3",
6262
"lodash-es": "^4.17.21",
6363
"posthog-js": "^1.95.1",

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

Lines changed: 26 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<script lang="ts">
22
import { createEventDispatcher } from 'svelte';
3-
import { format as dateFormat, isWithinInterval } from 'date-fns';
3+
import { isWithinInterval } from 'date-fns';
44
55
import Button from './Button.svelte';
6-
import { getDateFuncsByPeriodType, PeriodType } from '../utils/date';
6+
import { DateToken, getDateFuncsByPeriodType, PeriodType } from '../utils/date';
77
import type { SelectedDate } from '../utils/date';
88
import { cls } from '../utils/styles';
99
import { getComponentTheme } from './theme';
10+
import { format as format_ux } from '../utils';
1011
1112
const dispatch = createEventDispatcher();
1213
@@ -16,21 +17,17 @@
1617
export let selected: SelectedDate;
1718
export let hidden: boolean = false;
1819
export let fade: boolean = false;
19-
export let format = getDefaultFormat(periodType);
20+
export let format = getCustomFormat(periodType);
2021
2122
const theme = getComponentTheme('DateButton');
2223
23-
function getDefaultFormat(periodType: PeriodType) {
24+
function getCustomFormat(periodType: PeriodType) {
2425
switch (periodType) {
25-
case PeriodType.CalendarYear:
26-
case PeriodType.FiscalYearOctober:
27-
return 'yyyy';
28-
case PeriodType.Month:
29-
return 'MMM';
3026
case PeriodType.Day:
31-
return 'd';
27+
return DateToken.DayOfMonth_numeric;
3228
default:
33-
return 'MM/dd/yyyy';
29+
// returning undefined will use the default format of PeriodType
30+
return undefined;
3431
}
3532
}
3633
@@ -40,33 +37,33 @@
4037
selected instanceof Date
4138
? isSame(date, selected)
4239
: selected instanceof Array
43-
? selected.some((d) => isSame(date, d))
44-
: selected instanceof Object
45-
? selected.from
46-
? isWithinInterval(date, {
47-
start: start(selected.from),
48-
end: end(selected.to ?? selected.from),
49-
})
50-
: false
51-
: false;
40+
? selected.some((d) => isSame(date, d))
41+
: selected instanceof Object
42+
? selected.from
43+
? isWithinInterval(date, {
44+
start: start(selected.from),
45+
end: end(selected.to ?? selected.from),
46+
})
47+
: false
48+
: false;
5249
5350
$: isSelectedStart =
5451
selected instanceof Date
5552
? isSame(date, selected)
5653
: selected instanceof Array
57-
? selected.some((d) => isSame(date, d))
58-
: selected instanceof Object
59-
? isSame(date, selected.from ?? selected.to)
60-
: false;
54+
? selected.some((d) => isSame(date, d))
55+
: selected instanceof Object
56+
? isSame(date, selected.from ?? selected.to)
57+
: false;
6158
6259
$: isSelectedEnd =
6360
selected instanceof Date
6461
? isSame(date, selected)
6562
: selected instanceof Array
66-
? selected.some((d) => isSame(date, d))
67-
: selected instanceof Object
68-
? isSame(date, selected.to ?? selected.from)
69-
: false;
63+
? selected.some((d) => isSame(date, d))
64+
: selected instanceof Object
65+
? isSame(date, selected.to ?? selected.from)
66+
: false;
7067
7168
$: isCurrent = isSame(date, new Date());
7269
@@ -107,6 +104,6 @@
107104
dispatch('dateChange', date);
108105
}}
109106
>
110-
{dateFormat(date, format)}
107+
{format_ux(date, periodType, { custom: format })}
111108
</Button>
112109
</div>

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<script lang="ts">
22
import { createEventDispatcher } from 'svelte';
3-
import { parse as parseDate, format as formatDate } from 'date-fns';
3+
import { parse as parseDate } from 'date-fns';
4+
import { PeriodType, format as format_ux } from '../utils';
5+
import { getSettings } from './settings';
46
57
import Field from './Field.svelte';
68
79
import Input from './Input.svelte';
810
import DatePickerField from './DatePickerField.svelte';
911
import { getComponentTheme } from './theme';
1012
11-
export let value: Date = null;
12-
export let format = 'MM/dd/yyyy';
13+
export let value: Date | null = null;
14+
export let format = getSettings().formats?.dates?.baseParsing ?? 'MM/dd/yyyy';
1315
export let mask = format.toLowerCase();
1416
export let replace = 'dmyh';
1517
export let picker = false;
@@ -27,14 +29,14 @@
2729
2830
const theme = getComponentTheme('DateField');
2931
30-
let inputValue = '';
32+
let inputValue: string | undefined = '';
3133
3234
const dispatch = createEventDispatcher();
3335
34-
function onInputChange(e) {
36+
function onInputChange(e: any) {
3537
inputValue = e.detail.value;
3638
const lastValue = value;
37-
const parsedValue = parseDate(inputValue, format, new Date());
39+
const parsedValue = parseDate(inputValue ?? '', format, new Date());
3840
value = isNaN(parsedValue.valueOf()) ? null : parsedValue;
3941
if (value != lastValue) {
4042
dispatch('change', { value });
@@ -55,13 +57,13 @@
5557
{clearable}
5658
on:clear={() => {
5759
value = null;
58-
inputValue = null;
60+
inputValue = undefined;
5961
dispatch('change', { value });
6062
}}
6163
let:id
6264
>
6365
<Input
64-
value={value ? formatDate(value, format) : inputValue}
66+
value={value ? format_ux(value, PeriodType.Day, { custom: format }) : inputValue}
6567
{mask}
6668
{replace}
6769
{id}

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

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@
66
import Button from './Button.svelte';
77
import Field from './Field.svelte';
88
import Dialog from './Dialog.svelte';
9-
import { getDateFuncsByPeriodType, PeriodType } from '../utils/date';
9+
import { DateToken, getDateFuncsByPeriodType, PeriodType } from '../utils/date';
1010
import DateSelect from './DateSelect.svelte';
11-
import { dateDisplay } from '../utils/dateDisplay';
1211
import { getComponentTheme } from './theme';
12+
import { format } from '../utils';
13+
import { getDictionary } from './settings';
1314
1415
const dispatch = createEventDispatcher();
1516
@@ -37,18 +38,23 @@
3738
3839
// let format: string = 'EEE, MMM d';
3940
// Show "Day of Week", "Year", etc based on perioType (see DayStepper, MonthStepper)
40-
let primaryFormat = '';
41-
let secondaryFormat = '';
41+
let primaryFormat: string | string[] = '';
42+
let secondaryFormat: string | string[] = '';
4243
4344
$: switch (periodType) {
4445
case PeriodType.Month:
45-
primaryFormat = 'MMMM';
46-
secondaryFormat = 'yyyy';
46+
primaryFormat = DateToken.Month_long;
47+
secondaryFormat = DateToken.Year_numeric;
4748
break;
4849
case PeriodType.Day:
4950
default:
50-
primaryFormat = 'MMMM do, yyyy';
51-
secondaryFormat = 'eeee';
51+
primaryFormat = [
52+
DateToken.Month_long,
53+
DateToken.DayOfMonth_withOrdinal,
54+
DateToken.Year_numeric,
55+
];
56+
57+
secondaryFormat = DateToken.DayOfWeek_long;
5258
}
5359
5460
$: currentValue = value;
@@ -58,7 +64,7 @@
5864
<Button icon={mdiCalendar} on:click={() => (open = true)} {...$$restProps} />
5965
{:else}
6066
<Field
61-
label={label ?? dateDisplay(value, { format: secondaryFormat })}
67+
label={label ?? format(value, PeriodType.Day, { custom: secondaryFormat })}
6268
{icon}
6369
{error}
6470
{hint}
@@ -92,7 +98,7 @@
9298
on:click={() => (open = true)}
9399
{id}
94100
>
95-
{dateDisplay(value, { format: primaryFormat })}
101+
{format(value, PeriodType.Day, { custom: primaryFormat })}
96102
</button>
97103

98104
<div slot="append">
@@ -129,10 +135,10 @@
129135
{#if currentValue}
130136
<div class="flex flex-col justify-center bg-accent-500 text-white px-6 h-24" transition:slide>
131137
<div class="text-sm text-white/50">
132-
{dateDisplay(currentValue, { format: secondaryFormat })}
138+
{format(currentValue, PeriodType.Day, { custom: secondaryFormat })}
133139
</div>
134140
<div class="text-3xl text-white">
135-
{dateDisplay(currentValue, { format: primaryFormat })}
141+
{format(currentValue, PeriodType.Day, { custom: primaryFormat })}
136142
</div>
137143
</div>
138144
{/if}
@@ -153,13 +159,13 @@
153159
value = currentValue;
154160
dispatch('change', value);
155161
}}
156-
class="bg-accent-500 text-white hover:bg-accent-600">OK</Button
162+
class="bg-accent-500 text-white hover:bg-accent-600">{getDictionary().Ok}</Button
157163
>
158164
<Button
159165
on:click={() => {
160166
open = false;
161167
currentValue = value;
162-
}}>Cancel</Button
168+
}}>{getDictionary().Cancel}</Button
163169
>
164170
</div>
165171
</Dialog>

0 commit comments

Comments
 (0)