@24i/bigscreen-sdk 1.0.4 → 1.0.5-4.alpha-2832

package/packages/l10n/src/date/de.ts

@@ -0,0 +1,97 @@
+import { processYear, dateFormatter, toTwoDigitLocaleTimeString } from './common';
+import { DateTimeFormatOptions, Day, Month, Weekday, Year } from './types';
+
+// https://web.library.yale.edu/cataloging/months
+const DE_MONTHS = {
+    narrow: [
+        'J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D',
+    ],
+    short: [
+        'Jan', 'Feb', 'März', 'Apr', 'Mai', 'Juni', 'Juli', 'Aug', 'Sept', 'Okt', 'Nov', 'Dez',
+    ],
+    long: [
+        'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+        'Oktober', 'November', 'Dezember',
+    ],
+};
+
+const DE_WEEKDAYS = {
+    narrow: [
+        'S', 'M', 'D', 'M', 'D', 'F', 'S',
+    ],
+    short: [
+        'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa',
+    ],
+    long: [
+        'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag',
+    ],
+};
+
+const processDay = (dateParts: string[], day: Day | undefined, date: Date) => {
+    if (typeof day === 'undefined') return;
+    const strDate = date.getDate().toString();
+    dateParts.push(`${strDate}.`);
+};
+
+const processMonth = (
+    dateParts: string[],
+    month: Month | undefined,
+    date: Date,
+) => {
+    if (typeof month === 'undefined') return;
+    if (month === '2-digit' || month === 'numeric') {
+        const strMonth = `${(date.getMonth() + 1).toString()}.`;
+        dateParts.push(strMonth);
+    } else {
+        const finalMonth = DE_MONTHS[month][date.getMonth()];
+        if (month === 'short') dateParts.push(`${finalMonth}.`);
+        else dateParts.push(finalMonth);
+    }
+};
+
+const processWeekday = (
+    dateStringParts: string[],
+    year: Year | undefined,
+    month: Month | undefined,
+    day: Day | undefined,
+    weekday: Weekday | undefined,
+    date: Date,
+) => {
+    if (typeof weekday === 'undefined') return;
+    let weekdayString = DE_WEEKDAYS[weekday][date.getDay()];
+    if (weekday === 'short') weekdayString += '.';
+    if (
+        typeof year !== 'undefined'
+        || typeof month !== 'undefined'
+        || typeof day !== 'undefined'
+    ) {
+        weekdayString += ',';
+    }
+    dateStringParts.push(weekdayString);
+};
+
+const toLocaleDateString = (date: Date) => (
+    { weekday, year, month, day }: DateTimeFormatOptions = {
+        year: 'numeric', month: '2-digit', day: '2-digit',
+    },
+) => {
+    const dateStringParts: string[] = [];
+    processWeekday(dateStringParts, year, month, day, weekday, date);
+    const dateConnection = '';
+    const dateParts: string[] = [];
+    processDay(dateParts, day, date);
+    if ((month === 'narrow'
+        || month === 'short'
+        || month === 'long')
+        && day != null
+    ) {
+        dateParts.push(' ');
+    }
+    processMonth(dateParts, month, date);
+    if (month === 'long') dateParts.push(' ');
+    processYear(dateParts, year, date);
+    dateStringParts.push(dateParts.join(dateConnection));
+    return dateStringParts.join(' ');
+};
+
+export const deDateFormatter = dateFormatter(toTwoDigitLocaleTimeString, toLocaleDateString);

package/packages/l10n/src/date/en-001.ts

@@ -1,7 +1,7 @@
 import {
     collonSeparatedHour12MinuteSecond, dateFormatter, processYear, SECOND_FROM_END,
 } from './common';
-import { MONTHS, processWeekday, isDdMmYyyy } from './en-common';
+import { EN_MONTHS, processWeekday, isDdMmYyyy } from './en-common';
 import type { DateTimeFormatOptions, Day, Month, Year } from './types';
 
 const processMonth = (
@@ -19,7 +19,7 @@ const processMonth = (
                 : numericMonth
         }${typeof year !== 'undefined' ? ',' : ''}`);
     } else {
-        dateStringParts.push(MONTHS[month][date.getMonth()]);
+        dateStringParts.push(EN_MONTHS[month][date.getMonth()]);
     }
 };
 
@@ -49,7 +49,7 @@ const getDdMmYyyy = (dateStringParts: string[], year: Year | undefined, date: Da
     dateStringParts.push(`${d}/${m}/${y}`);
 };
 
-export const toLocaleDateString = (date: Date) => (
+const toLocaleDateString = (date: Date) => (
     { weekday, year, month, day }: DateTimeFormatOptions = {
         year: 'numeric', month: '2-digit', day: '2-digit',
     },

package/packages/l10n/src/date/en-common.ts

@@ -1,6 +1,6 @@
-import type { Day, Month, Weekday, Year } from './types';
+import type { Day, Month, Weekday, LocaleData, Year } from './types';
 
-export const MONTHS = {
+export const EN_MONTHS = {
     narrow: [
         'J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D',
     ],
@@ -13,7 +13,7 @@ export const MONTHS = {
     ],
 };
 
-export const WEEKDAYS = {
+export const EN_WEEKDAYS = {
     narrow: [
         'S', 'M', 'T', 'W', 'T', 'F', 'S',
     ],
@@ -32,9 +32,10 @@ export const processWeekday = (
     day: Day | undefined,
     weekday: Weekday | undefined,
     date: Date,
+    weekdaysLocaleData: LocaleData = EN_WEEKDAYS,
 ) => {
     if (typeof weekday === 'undefined') return;
-    let weekdayString = WEEKDAYS[weekday][date.getDay()];
+    let weekdayString = weekdaysLocaleData[weekday][date.getDay()];
     if (
         typeof year !== 'undefined'
         || typeof month !== 'undefined'

package/packages/l10n/src/date/en-us.ts

@@ -4,7 +4,7 @@ import {
     processYear,
     SECOND_FROM_END,
 } from './common';
-import { MONTHS, processWeekday, isDdMmYyyy } from './en-common';
+import { EN_MONTHS, processWeekday, isDdMmYyyy } from './en-common';
 import type { DateTimeFormatOptions, Day, Month, Year } from './types';
 
 const processMonth = (dateStringParts: string[], month: Month | undefined, date: Date) => {
@@ -16,7 +16,7 @@ const processMonth = (dateStringParts: string[], month: Month | undefined, date:
                 ? `0${numericMonth}` : numericMonth,
         );
     } else {
-        dateStringParts.push(MONTHS[month][date.getMonth()]);
+        dateStringParts.push(EN_MONTHS[month][date.getMonth()]);
     }
 };
 
@@ -56,7 +56,7 @@ const getDdMmYyyy = (
     dateStringParts.push(`${m}/${d}/${y}`);
 };
 
-export const toLocaleDateString = (date: Date) => (
+const toLocaleDateString = (date: Date) => (
     { weekday, year, month, day }: DateTimeFormatOptions = {
         year: 'numeric', month: 'numeric', day: 'numeric',
     },

package/packages/l10n/src/date/es.ts

@@ -0,0 +1,71 @@
+import { processYear, dateFormatter, toNumericLocaleTimeString } from './common';
+import { processWeekday } from './en-common';
+import { DateTimeFormatOptions, Day, Month } from './types';
+
+const ES_MONTHS = {
+    narrow: [
+        'E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D',
+    ],
+    // https://web.library.yale.edu/cataloging/months
+    short: [
+        'ene', 'feb', 'mar', 'abr', 'mayo', 'jun', 'jul', 'ago', 'set', 'oct', 'nov', 'dic',
+    ],
+    long: [
+        'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+        'octubre', 'noviembre', 'diciembre',
+    ],
+};
+
+const ES_WEEKDAYS = {
+    // https://letsspeakspanish.com/blog/days-of-week-months-seasons-in-spanish/
+    narrow: [
+        'D', 'L', 'M', 'X', 'J', 'V', 'S',
+    ],
+    short: [
+        'dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb',
+    ],
+    long: [
+        'domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado',
+    ],
+};
+
+const processDay = (dateParts: string[], day: Day | undefined, date: Date) => {
+    if (typeof day === 'undefined') return;
+    const strDate = date.getDate().toString();
+    dateParts.push(strDate);
+};
+
+const processMonth = (
+    dateParts: string[],
+    month: Month | undefined,
+    date: Date,
+) => {
+    if (typeof month === 'undefined') return;
+    if (month === '2-digit' || month === 'numeric') {
+        const strMonth = (date.getMonth() + 1).toString();
+        dateParts.push(strMonth);
+    } else {
+        const finalMonth = ES_MONTHS[month][date.getMonth()];
+        dateParts.push(finalMonth);
+    }
+};
+
+const toLocaleDateString = (date: Date) => (
+    { weekday, year, month, day }: DateTimeFormatOptions = {
+        year: 'numeric', month: '2-digit', day: '2-digit',
+    },
+) => {
+    const dateStringParts: string[] = [];
+    processWeekday(dateStringParts, year, month, day, weekday, date, ES_WEEKDAYS);
+    const dateConnection = month === '2-digit' || month === 'numeric' ? '/' : ' ';
+    const dateParts: string[] = [];
+    processDay(dateParts, day, date);
+    if (month === 'long' && day != null) dateParts.push('de');
+    processMonth(dateParts, month, date);
+    if (month === 'long') dateParts.push('de');
+    processYear(dateParts, year, date);
+    dateStringParts.push(dateParts.join(dateConnection));
+    return dateStringParts.join(' ');
+};
+
+export const esDateFormatter = dateFormatter(toNumericLocaleTimeString, toLocaleDateString);

package/packages/l10n/src/date/fr.ts

@@ -0,0 +1,94 @@
+import { dateFormatter, processYear, toTwoDigitLocaleTimeString } from './common';
+import { DateTimeFormatOptions, Day, Month, Weekday, Year } from './types';
+
+// https://web.library.yale.edu/cataloging/months
+const FR_MONTHS = {
+    narrow: [
+        'J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D',
+    ],
+    short: [
+        'janv', 'févr', 'mars', 'avril', 'mai', 'juin', 'juil', 'août', 'sept', 'oct', 'nov', 'déc',
+    ],
+    long: [
+        'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
+        'octobre', 'novembre', 'décembre',
+    ],
+};
+
+const FR_WEEKDAYS = {
+    narrow: [
+        'D', 'L', 'M', 'M', 'J', 'V', 'S',
+    ],
+    short: [
+        'dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam',
+    ],
+    long: [
+        'dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi',
+    ],
+};
+
+const processWeekday = (
+    dateStringParts: string[],
+    year: Year | undefined,
+    month: Month | undefined,
+    day: Day | undefined,
+    weekday: Weekday | undefined,
+    date: Date,
+) => {
+    if (typeof weekday === 'undefined') return;
+    let weekdayString = FR_WEEKDAYS[weekday][date.getDay()];
+    if (
+        (typeof year !== 'undefined'
+        || typeof month !== 'undefined'
+        || typeof day !== 'undefined') && weekday !== 'long'
+    ) {
+        weekdayString += '.';
+    }
+    dateStringParts.push(weekdayString);
+};
+
+const processDay = (
+    dateParts: string[], day: Day | undefined, month: Month | undefined, date: Date,
+) => {
+    if (typeof day === 'undefined') return;
+    const strDate = date.getDate().toString();
+    dateParts.push(
+        strDate.length === 1 && month !== 'short' && month !== 'long' ? `0${strDate}` : strDate,
+    );
+};
+
+const processMonth = (
+    dateParts: string[],
+    month: Month | undefined,
+    date: Date,
+) => {
+    if (typeof month === 'undefined') return;
+    if (month === '2-digit' || month === 'numeric') {
+        const strMonth = (date.getMonth() + 1).toString();
+        dateParts.push(
+            strMonth.length === 1 ? `0${strMonth}` : strMonth,
+        );
+    } else {
+        const finalMonth = FR_MONTHS[month][date.getMonth()];
+        if (month === 'short') dateParts.push(`${finalMonth}.`);
+        else dateParts.push(finalMonth);
+    }
+};
+
+const toLocaleDateString = (date: Date) => (
+    { weekday, year, month, day }: DateTimeFormatOptions = {
+        year: 'numeric', month: '2-digit', day: '2-digit',
+    },
+) => {
+    const dateStringParts: string[] = [];
+    processWeekday(dateStringParts, year, month, day, weekday, date);
+    const dateConnection = month === '2-digit' || month === 'numeric' ? '/' : ' ';
+    const dateParts: string[] = [];
+    processDay(dateParts, day, month, date);
+    processMonth(dateParts, month, date);
+    processYear(dateParts, year, date);
+    dateStringParts.push(dateParts.join(dateConnection));
+    return dateStringParts.join(' ');
+};
+
+export const frDateFormatter = dateFormatter(toTwoDigitLocaleTimeString, toLocaleDateString, ' ');

package/packages/l10n/src/date/he.ts

@@ -0,0 +1,101 @@
+import { processYear, dateFormatter, toNumericLocaleTimeString } from './common';
+import { DateTimeFormatOptions, Day, Month, Weekday } from './types';
+
+const HE_MONTHS = {
+    narrow: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    short: [
+        'ינו׳',
+        'פבר׳',
+        'מרץ',
+        'אפר׳',
+        'מאי',
+        'יוני',
+        'יולי',
+        'אוג׳',
+        'ספט׳',
+        'אוק׳',
+        'נוב׳',
+        'דצמ׳',
+    ],
+    long: [
+        'ינואר',
+        'פברואר',
+        'מרץ',
+        'אפריל',
+        'מאי',
+        'יוני',
+        'יולי',
+        'אוגוסט',
+        'ספטמבר',
+        'אוקטובר',
+        'נובמבר',
+        'דצמבר',
+    ],
+};
+
+const HE_WEEKDAYS = {
+    narrow: ['א׳', 'ב׳', 'ג׳', 'ד׳', 'ה׳', 'ו׳', 'ש׳'],
+    short: ['יום א׳', 'יום ב׳', 'יום ג׳', 'יום ד׳', 'יום ה׳', 'יום ו׳', 'שבת'],
+    long: ['יום ראשון', 'יום שני', 'יום שלישי', 'יום רביעי', 'יום חמישי', 'יום שישי', 'יום שבת'],
+};
+
+const processWeekday = (
+    dateStringParts: string[],
+    weekday: Weekday | undefined,
+    date: Date,
+) => {
+    if (typeof weekday === 'undefined') return;
+    const weekdayString = HE_WEEKDAYS[weekday][date.getDay()];
+    dateStringParts.push(`${weekdayString},`);
+};
+
+const processDay = (dateParts: string[], day: Day | undefined, date: Date) => {
+    if (typeof day === 'undefined') return;
+    const strDate = date.getDate().toString();
+    dateParts.push(strDate);
+};
+
+const processMonth = (
+    dateParts: string[],
+    day:Day | undefined,
+    month: Month | undefined,
+    date: Date,
+) => {
+    if (typeof month === 'undefined') return;
+    if (month === '2-digit' || month === 'numeric') {
+        const strMonth = (date.getMonth() + 1).toString();
+        dateParts.push(strMonth);
+        return;
+    }
+    const finalMonth = HE_MONTHS[month][date.getMonth()];
+    if (day != null) {
+        dateParts.push(`ב${finalMonth}`);
+        return;
+    }
+    dateParts.push(finalMonth);
+};
+
+const toLocaleDateString = (date: Date) => (
+    { weekday, year, month, day }: DateTimeFormatOptions = {
+        year: 'numeric', month: '2-digit', day: '2-digit',
+    },
+) => {
+    const dateStringParts: string[] = [];
+    processWeekday(dateStringParts, weekday, date);
+    const dateConnection = month === 'numeric' || month === '2-digit' ? '.' : '';
+    const dateParts: string[] = [];
+    processDay(dateParts, day, date);
+    if ((month === 'narrow'
+        || month === 'short'
+        || month === 'long')
+        && day != null
+    ) {
+        dateParts.push(' ');
+    }
+    processMonth(dateParts, day, month, date);
+    if (month === 'long') dateParts.push(' ');
+    processYear(dateParts, year, date);
+    dateStringParts.push(dateParts.join(dateConnection));
+    return dateStringParts.join(' ');
+};
+export const heDateFormatter = dateFormatter(toNumericLocaleTimeString, toLocaleDateString);

package/packages/l10n/src/date/iso.ts

@@ -1,8 +1,13 @@
-import { collonSeparatedHour24MinuteSecond, dateFormatter, processYear } from './common';
-import { MONTHS, WEEKDAYS } from './en-common';
+import { dateFormatter, processYear, toTwoDigitLocaleTimeString } from './common';
+import { EN_MONTHS, EN_WEEKDAYS } from './en-common';
 import type { DateTimeFormatOptions, Day, Month, Weekday, Year } from './types';
 
-const processMonth = (dateParts: string[], month: Month | undefined, date: Date) => {
+const processMonth = (
+    dateParts: string[],
+    month: Month | undefined,
+    date: Date,
+
+) => {
     if (typeof month === 'undefined') return;
     if (month === '2-digit' || month === 'numeric') {
         const strMonth = (date.getMonth() + 1).toString();
@@ -11,7 +16,7 @@ const processMonth = (dateParts: string[], month: Month | undefined, date: Date)
             strMonth.length === 1 ? `0${strMonth}` : strMonth,
         );
     } else {
-        dateParts.push(MONTHS[month][date.getMonth()]);
+        dateParts.push(EN_MONTHS[month][date.getMonth()]);
     }
 };
 
@@ -29,7 +34,7 @@ const processWeekday = (
         && typeof month === 'undefined'
         && typeof day === 'undefined'
     );
-    dateStringParts.push(`${WEEKDAYS[weekday][date.getDay()]}${isOnlyWeekday ? '' : ','}`);
+    dateStringParts.push(`${EN_WEEKDAYS[weekday][date.getDay()]}${isOnlyWeekday ? '' : ','}`);
 };
 
 const processDay = (dateParts: string[], day: Day | undefined, date: Date) => {
@@ -39,7 +44,7 @@ const processDay = (dateParts: string[], day: Day | undefined, date: Date) => {
     dateParts.push(strDate.length === 1 ? `0${strDate}` : strDate);
 };
 
-export const toLocaleDateString = (date: Date) => (
+const toLocaleDateString = (date: Date) => (
     { weekday, year, month, day }: DateTimeFormatOptions = {
         year: 'numeric', month: '2-digit', day: '2-digit',
     },
@@ -55,10 +60,4 @@ export const toLocaleDateString = (date: Date) => (
     return dateStringParts.join(' ');
 };
 
-const toLocaleTimeString = (date: Date) => (
-    options: DateTimeFormatOptions = {
-        hour: '2-digit', minute: '2-digit', second: '2-digit',
-    },
-) => collonSeparatedHour24MinuteSecond(date, options);
-
-export const isoDateFormatter = dateFormatter(toLocaleTimeString, toLocaleDateString);
+export const isoDateFormatter = dateFormatter(toTwoDigitLocaleTimeString, toLocaleDateString);

package/packages/l10n/src/date/types.ts

@@ -20,6 +20,8 @@ type TimeKeys = 'hour' | 'minute' | 'second';
 
 type DateKeys = 'weekday' | 'year' | 'month' | 'day';
 
+type FormatType = 'dateFormatLong' | 'dateFormatNumeric' | 'dateFormatShort' | 'timeFormat';
+
 export type DateTimeFormatOptions = {
     weekday?: Weekday,
     year?: Year,
@@ -28,6 +30,7 @@ export type DateTimeFormatOptions = {
     hour?: Hour,
     minute?: Minute,
     second?: Second,
+    formatType?: FormatType,
 };
 
 export type DateFormatOptions = Pick<DateTimeFormatOptions, DateKeys>;
@@ -45,3 +48,9 @@ export type Props = {
     locale?: string,
     options?: DateTimeFormatOptions,
 };
+
+export type LocaleData = {
+    narrow: string[];
+    short: string[];
+    long: string[];
+};

package/packages/l10n/src/l10n.ts

@@ -1,11 +1,26 @@
+import { format } from 'date-fns';
+import * as fnsLocales from 'date-fns/locale';
 import { EventsManager, IEvents } from '@24i/bigscreen-sdk/events-manager';
+import { csDateFormatter } from './date/cs';
+import { deDateFormatter } from './date/de';
+import { esDateFormatter } from './date/es';
+import { frDateFormatter } from './date/fr';
+import { heDateFormatter } from './date/he';
 import { isoDateFormatter } from './date/iso';
 import { Formatters } from './types';
+import { DateTimeFormatOptions } from './date/types';
 
 type Events = {
     'localechange': () => void,
 };
+
+type DateFnsConfig = Partial<
+Record<NonNullable<DateTimeFormatOptions['formatType']>, string | null>
+>;
+
 class L10n implements IEvents<Events> {
+    private dateFnsConfig: DateFnsConfig = {};
+
     private readonly events = new EventsManager<Events>();
 
     addEventListener = this.events.addEventListener;
@@ -19,6 +34,11 @@ class L10n implements IEvents<Events> {
     private readonly formatters: Formatters = {
         date: {
             iso: isoDateFormatter,
+            cs: csDateFormatter,
+            fr: frDateFormatter,
+            es: esDateFormatter,
+            de: deDateFormatter,
+            he: heDateFormatter,
         },
     };
 
@@ -33,15 +53,53 @@ class L10n implements IEvents<Events> {
         return this.formatters[formatter].iso;
     }
 
+    init(config: DateFnsConfig) {
+        this.dateFnsConfig = config;
+    }
+
     setLocale(locale: string) {
         if (locale === this.locale) return;
         this.locale = locale;
         this.triggerEvent('localechange');
     }
 
-    date(timestamp: number | Date, locale?: string) {
-        const formatter = this.getFormatterByLocale('date', locale);
-        return formatter(timestamp);
+    getDateFnsFormatter = (
+        timestamp: number | Date,
+        locale: string,
+        fallbackCb: (options?: DateTimeFormatOptions) => string,
+        fallbackFormatType?: DateTimeFormatOptions['formatType'],
+    ) => (
+        (options?: DateTimeFormatOptions): string => {
+            const { formatType, ...baseOptions } = options || {};
+            const dateFnsBsFormat = this.dateFnsConfig?.[formatType || fallbackFormatType!];
+            if (!dateFnsBsFormat) {
+                if (!options || Object.keys(baseOptions).length === 0) {
+                    return fallbackCb();
+                }
+                return fallbackCb(baseOptions);
+            }
+            return format(
+                timestamp,
+                dateFnsBsFormat,
+                { locale: fnsLocales[locale as keyof typeof fnsLocales] },
+            );
+        }
+    );
+
+    date(timestamp: number | Date, locale: string = this.locale) {
+        const formatter = this.getFormatterByLocale('date', locale)(timestamp);
+
+        return {
+            toLocaleString: this.getDateFnsFormatter(
+                timestamp, locale, formatter.toLocaleString,
+            ),
+            toLocaleTimeString: this.getDateFnsFormatter(
+                timestamp, locale, formatter.toLocaleTimeString, 'timeFormat',
+            ),
+            toLocaleDateString: this.getDateFnsFormatter(
+                timestamp, locale, formatter.toLocaleDateString, 'dateFormatShort',
+            ),
+        };
     }
 
     addFormatter<T extends keyof Formatters, U extends keyof Formatters[T]>(