@24i/bigscreen-sdk 0.9.9-alpha.2147

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

@@ -0,0 +1,153 @@
+import type {
+    DateTimeFormatOptions, Hour, Minute, Second, Year, DateTimeFormattter,
+    DateFormatOptions, TimeFormatOptions,
+} from './types';
+
+const NOON = 12;
+
+export const SECOND_FROM_END = 2;
+
+export const h24 = (date: Date) => date.getHours().toString();
+
+export const hh24 = (date: Date) => {
+    const h = h24(date);
+    return h.length === 1 ? `0${h}` : h;
+};
+
+export const h12 = (date: Date) => {
+    const h = date.getHours() % NOON;
+    return h === 0 ? '12' : h.toString();
+};
+
+export const hh12 = (date: Date) => {
+    const h = h12(date);
+    return h.length === 1 ? `0${h}` : h;
+};
+
+export const m = (date: Date) => date.getMinutes().toString();
+
+export const mm = (date: Date) => {
+    const min = m(date);
+    return min.length === 1 ? `0${min}` : min;
+};
+
+export const s = (date: Date) => date.getSeconds().toString();
+
+export const ss = (date: Date) => {
+    const sec = s(date);
+    return sec.length === 1 ? `0${sec}` : sec;
+};
+
+export const amOrPm = (date: Date) => (
+    date.getHours() < NOON ? 'AM' : 'PM'
+);
+
+export const h24Mm = (date: Date) => `${h24(date)}:${mm(date)}`;
+export const h24MmSs = (date: Date) => `${h24(date)}:${mm(date)}:${ss(date)}`;
+export const hh24Mm = (date: Date) => `${hh24(date)}:${mm(date)}`;
+export const hh24MmSs = (date: Date) => `${hh24(date)}:${mm(date)}:${ss(date)}`;
+
+export const h12Mm = (date: Date) => `${h12(date)}:${mm(date)} ${amOrPm(date)}`;
+export const h12MmSs = (date: Date) => `${h12(date)}:${mm(date)}:${ss(date)} ${amOrPm(date)}`;
+export const hh12Mm = (date: Date) => `${hh12(date)}:${mm(date)} ${amOrPm(date)}`;
+export const hh12MmSs = (date: Date) => `${hh12(date)}:${mm(date)}:${ss(date)} ${amOrPm(date)}`;
+
+const addHour = (hour: Hour | undefined, use12Hours: boolean, date: Date) => {
+    if (hour === '2-digit') return use12Hours ? hh12(date) : hh24(date);
+    if (hour === 'numeric') return use12Hours ? h12(date) : h24(date);
+    return '';
+};
+
+const addMinute = (minute: Minute | undefined, shouldSeparate: boolean, date: Date) => {
+    let timeString = shouldSeparate ? ':' : '';
+    if (minute === '2-digit') timeString += mm(date);
+    else if (minute === 'numeric') timeString += m(date);
+    return timeString;
+};
+
+const addSecond = (second: Second | undefined, shouldSeparate: boolean, date: Date) => {
+    let timeString = shouldSeparate ? ':' : '';
+    if (second === '2-digit') timeString += ss(date);
+    else if (second === 'numeric') timeString += s(date);
+    return timeString;
+};
+
+const COMMON_CASES: Record<string, (date: Date) => string> = {
+    // hour|minute|second|ampm
+    '2-digit|2-digit|undefined|true': hh12Mm,
+    '2-digit|2-digit|undefined|false': hh24Mm,
+    '2-digit|2-digit|2-digit|true': hh12MmSs,
+    '2-digit|2-digit|2-digit|false': hh24MmSs,
+    'numeric|2-digit|undefined|true': h12Mm,
+    'numeric|2-digit|undefined|false': h24Mm,
+    'numeric|2-digit|2-digit|true': h12MmSs,
+    'numeric|2-digit|2-digit|false': h24MmSs,
+} as const;
+
+export const collonSeparatedHourMinuteSecond = (
+    date: Date, { hour, minute, second }: DateTimeFormatOptions, use12Hours = false,
+) => {
+    const commonFormatter = COMMON_CASES[`${hour}|${minute}|${second}|${use12Hours}`];
+    if (commonFormatter) return commonFormatter(date);
+    let timeString = '';
+    timeString += addHour(hour, use12Hours, date);
+    timeString += addMinute(minute, typeof minute !== 'undefined' && timeString.length > 0, date);
+    timeString += addSecond(second, typeof second !== 'undefined' && timeString.length > 0, date);
+    timeString += use12Hours ? ` ${amOrPm(date)}` : '';
+    return timeString;
+};
+
+export const collonSeparatedHour24MinuteSecond = (date: Date, options: DateTimeFormatOptions) => (
+    collonSeparatedHourMinuteSecond(date, options, false)
+);
+
+export const collonSeparatedHour12MinuteSecond = (date: Date, options: DateTimeFormatOptions) => (
+    collonSeparatedHourMinuteSecond(date, options, true)
+);
+
+export const processYear = (dateStringParts: string[], year: Year | undefined, date: Date) => {
+    if (typeof year === 'undefined') return;
+    const fullYear = date.getFullYear().toString();
+    dateStringParts.push(
+        year === '2-digit'
+            ? fullYear.substring(fullYear.length - SECOND_FROM_END)
+            : fullYear,
+    );
+};
+
+const toLocaleStringFormatter = (
+    toLocaleTimeString: (date: Date) => ((options?: TimeFormatOptions) => string),
+    toLocaleDateString: (date: Date) => ((options?: DateFormatOptions) => string),
+    localeStringDateTimeSeparator = ', ',
+) => (date: Date) => (options?: DateTimeFormatOptions) => {
+    const datePart = toLocaleDateString(date)(options);
+    const timePart = toLocaleTimeString(date)(options);
+    if (datePart.length === 0) {
+        if (timePart.length === 0) return '';
+        return timePart;
+    }
+    if (timePart.length === 0) {
+        return datePart;
+    }
+    return `${datePart}${localeStringDateTimeSeparator}${timePart}`;
+};
+
+export const dateFormatter = (
+    toLocaleTimeString: (date: Date) => ((options?: TimeFormatOptions) => string),
+    toLocaleDateString: (date: Date) => ((options?: DateFormatOptions) => string),
+    localeStringDateTimeSeparator?: string,
+) => (
+    timestampOrDate: Parameters<DateTimeFormattter>[0],
+): ReturnType<DateTimeFormattter> => {
+    const date = typeof timestampOrDate === 'number'
+        ? new Date(timestampOrDate)
+        : timestampOrDate;
+
+    return {
+        toLocaleTimeString: toLocaleTimeString(date),
+        toLocaleDateString: toLocaleDateString(date),
+        toLocaleString: toLocaleStringFormatter(
+            toLocaleTimeString, toLocaleDateString, localeStringDateTimeSeparator,
+        )(date),
+    };
+};

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

@@ -0,0 +1,95 @@
+import { collonSeparatedHour24MinuteSecond, dateFormatter, processYear } from './common';
+import type { DateTimeFormatOptions, Weekday, Day, Month, Year } from './types';
+
+const WEEKDAYS = {
+    narrow: [
+        'N', 'P', 'Ú', 'S', 'Č', 'P', 'S',
+    ],
+    short: [
+        'ne', 'po', 'út', 'st', 'čt', 'pá', 'so',
+    ],
+    long: [
+        'neděle', 'pondělí', 'úterý', 'středa', 'čtvrtek', 'pátek', 'sobota',
+    ],
+};
+
+const NARROW_MONTHS = [
+    '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12',
+];
+
+const SHORT_MONTHS = [
+    'led', 'úno', 'bře', 'dub', 'kvě', 'čvn', 'čvc', 'srp', 'zář', 'říj', 'lis', 'pro',
+];
+
+const LONG_MONTHS_ALONE = [
+    'leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen', 'září',
+    'říjen', 'listopad', 'prosinec',
+];
+
+const LONG_MONTHS_WITH_DAY = [
+    'ledna', 'února', 'března', 'dubna', 'května', 'června', 'července', 'srpna', 'září',
+    'října', 'listopadu', 'prosince',
+];
+
+const processMonth = (
+    dateStringParts: string[],
+    year: Year | undefined,
+    month: Month | undefined,
+    day: Day | undefined,
+    date: Date,
+) => {
+    if (typeof month === 'undefined') return;
+    if (month === 'numeric' || month === '2-digit') {
+        const numericMonth = (date.getMonth() + 1).toString();
+        dateStringParts.push(
+            `${month === '2-digit' && numericMonth.length === 1
+                ? numericMonth.toString().padStart(2, '0')
+                : numericMonth}.`,
+        );
+    } else if (month === 'long') {
+        const months = typeof day === 'undefined' ? LONG_MONTHS_ALONE : LONG_MONTHS_WITH_DAY;
+        dateStringParts.push(months[date.getMonth()]);
+    } else if (month === 'narrow') {
+        dateStringParts.push(`${NARROW_MONTHS[date.getMonth()]}.`);
+    } else if (typeof year === 'undefined') {
+        dateStringParts.push(`${NARROW_MONTHS[date.getMonth()]}.`);
+    } else {
+        dateStringParts.push(SHORT_MONTHS[date.getMonth()]);
+    }
+};
+
+const processWeekday = (dateStringParts: string[], weekday: Weekday | undefined, date: Date) => {
+    if (typeof weekday === 'undefined') return;
+    dateStringParts.push(WEEKDAYS[weekday][date.getDay()]);
+};
+
+const processDay = (dateStringParts: string[], day: Day | undefined, date: Date) => {
+    if (typeof day === 'undefined') return;
+    const numericDay = date.getDate().toString();
+    dateStringParts.push(
+        `${day === '2-digit' && numericDay.length === 1
+            ? numericDay.toString().padStart(2, '0')
+            : numericDay}.`,
+    );
+};
+
+const toLocaleDateString = (date: Date) => (
+    { weekday, day, month, year }: DateTimeFormatOptions = {
+        day: 'numeric', month: 'numeric', year: 'numeric',
+    },
+) => {
+    const dateStringParts: string[] = [];
+    processWeekday(dateStringParts, weekday, date);
+    processDay(dateStringParts, day, date);
+    processMonth(dateStringParts, year, month, day, date);
+    processYear(dateStringParts, year, date);
+    return dateStringParts.join(' ');
+};
+
+const toLocaleTimeString = (date: Date) => (
+    options: DateTimeFormatOptions = {
+        hour: 'numeric', minute: '2-digit', second: '2-digit',
+    },
+) => collonSeparatedHour24MinuteSecond(date, options);
+
+export const csDateFormatter = dateFormatter(toLocaleTimeString, toLocaleDateString, ' ');

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

@@ -0,0 +1,76 @@
+import {
+    collonSeparatedHour12MinuteSecond, dateFormatter, processYear, SECOND_FROM_END,
+} from './common';
+import { MONTHS, processWeekday, isDdMmYyyy } from './en-common';
+import type { DateTimeFormatOptions, Day, Month, Year } from './types';
+
+const processMonth = (
+    dateStringParts: string[],
+    year: Year | undefined,
+    month: Month | undefined,
+    date: Date,
+) => {
+    if (typeof month === 'undefined') return;
+    if (month === 'numeric' || month === '2-digit') {
+        const numericMonth = (date.getMonth() + 1).toString();
+        dateStringParts.push(`${
+            numericMonth.length === 1
+                ? numericMonth.toString().padStart(2, '0')
+                : numericMonth
+        }${typeof year !== 'undefined' ? ',' : ''}`);
+    } else {
+        dateStringParts.push(MONTHS[month][date.getMonth()]);
+    }
+};
+
+const processDay = (
+    dateStringParts: string[],
+    month: Month | undefined,
+    day: Day | undefined,
+    date: Date,
+) => {
+    if (typeof day === 'undefined') return;
+    const strDay = date.getDate().toString();
+    dateStringParts.push(
+        strDay.length === 1 && (month === 'numeric' || month === '2-digit')
+            ? strDay.padStart(2, '0')
+            : strDay,
+    );
+};
+
+const getDdMmYyyy = (dateStringParts: string[], year: Year | undefined, date: Date) => {
+    const fullYear = date.getFullYear().toString();
+    const y = year === '2-digit'
+        ? fullYear.substring(fullYear.length - SECOND_FROM_END) : fullYear;
+    const numericMonth = (date.getMonth() + 1).toString();
+    const m = numericMonth.length === 1 ? `0${numericMonth}` : numericMonth;
+    const numericDay = date.getDate().toString();
+    const d = numericDay.length === 1 ? `0${numericDay}` : numericDay;
+    dateStringParts.push(`${d}/${m}/${y}`);
+};
+
+export 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);
+    // dd/mm/yyyy
+    if (isDdMmYyyy(year, month, day)) {
+        getDdMmYyyy(dateStringParts, year, date);
+        return dateStringParts.join(' ');
+    }
+    processDay(dateStringParts, month, day, date);
+    processMonth(dateStringParts, year, month, date);
+    processYear(dateStringParts, year, date);
+    return dateStringParts.join(' ');
+};
+
+const toLocaleTimeString = (date: Date) => (
+    options: DateTimeFormatOptions = {
+        hour: 'numeric', minute: '2-digit', second: '2-digit',
+    },
+) => collonSeparatedHour12MinuteSecond(date, options).toLowerCase();
+
+export const en001DateFormatter = dateFormatter(toLocaleTimeString, toLocaleDateString);

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

@@ -0,0 +1,54 @@
+import type { Day, Month, Weekday, Year } from './types';
+
+export const MONTHS = {
+    narrow: [
+        'J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D',
+    ],
+    short: [
+        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+    ],
+    long: [
+        'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+        'October', 'November', 'December',
+    ],
+};
+
+export const WEEKDAYS = {
+    narrow: [
+        'S', 'M', 'T', 'W', 'T', 'F', 'S',
+    ],
+    short: [
+        'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat',
+    ],
+    long: [
+        'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday',
+    ],
+};
+
+export 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 = WEEKDAYS[weekday][date.getDay()];
+    if (
+        typeof year !== 'undefined'
+        || typeof month !== 'undefined'
+        || typeof day !== 'undefined'
+    ) {
+        weekdayString += ',';
+    }
+    dateStringParts.push(weekdayString);
+};
+
+export const isDdMmYyyy = (
+    year: Year | undefined,
+    month: Month | undefined,
+    day: Day | undefined,
+) => (
+    !!year && !!day && (month === '2-digit' || month === 'numeric')
+);

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

@@ -0,0 +1,83 @@
+import {
+    collonSeparatedHour12MinuteSecond,
+    dateFormatter,
+    processYear,
+    SECOND_FROM_END,
+} from './common';
+import { MONTHS, processWeekday, isDdMmYyyy } from './en-common';
+import type { DateTimeFormatOptions, Day, Month, Year } from './types';
+
+const processMonth = (dateStringParts: string[], month: Month | undefined, date: Date) => {
+    if (typeof month === 'undefined') return;
+    if (month === 'numeric' || month === '2-digit') {
+        const numericMonth = (date.getMonth() + 1).toString();
+        dateStringParts.push(
+            month === '2-digit' && numericMonth.length === 1
+                ? `0${numericMonth}` : numericMonth,
+        );
+    } else {
+        dateStringParts.push(MONTHS[month][date.getMonth()]);
+    }
+};
+
+const processDay = (
+    dateStringParts: string[],
+    year: Year | undefined,
+    day: Day | undefined,
+    date: Date,
+) => {
+    if (typeof day === 'undefined') return;
+    const strDay = date.getDate().toString();
+    dateStringParts.push(
+        `${
+            day === '2-digit' && strDay.length === 1
+                ? strDay.padStart(2, '0')
+                : strDay
+        }${typeof year !== 'undefined' ? ',' : ''}`,
+    );
+};
+
+const getDdMmYyyy = (
+    dateStringParts: string[],
+    year: Year | undefined,
+    month: Month | undefined,
+    day: Day | undefined,
+    date: Date,
+) => {
+    const fullYear = date.getFullYear().toString();
+    const y = year === '2-digit'
+        ? fullYear.substring(fullYear.length - SECOND_FROM_END) : fullYear;
+    const numericMonth = (date.getMonth() + 1).toString();
+    const m = month === '2-digit' && numericMonth.length === 1
+        ? `0${numericMonth}` : numericMonth;
+    const numericDay = date.getDate().toString();
+    const d = day === '2-digit' && numericDay.length === 1
+        ? `0${numericDay}` : numericDay;
+    dateStringParts.push(`${m}/${d}/${y}`);
+};
+
+export const toLocaleDateString = (date: Date) => (
+    { weekday, year, month, day }: DateTimeFormatOptions = {
+        year: 'numeric', month: 'numeric', day: 'numeric',
+    },
+) => {
+    const dateStringParts: string[] = [];
+    processWeekday(dateStringParts, year, month, day, weekday, date);
+    // mm/dd/yyyy
+    if (isDdMmYyyy(year, month, day)) {
+        getDdMmYyyy(dateStringParts, year, month, day, date);
+        return dateStringParts.join(' ');
+    }
+    processMonth(dateStringParts, month, date);
+    processDay(dateStringParts, year, day, date);
+    processYear(dateStringParts, year, date);
+    return dateStringParts.join(' ');
+};
+
+const toLocaleTimeString = (date: Date) => (
+    options: DateTimeFormatOptions = {
+        hour: 'numeric', minute: '2-digit', second: '2-digit',
+    },
+) => collonSeparatedHour12MinuteSecond(date, options);
+
+export const enUsDateFormatter = dateFormatter(toLocaleTimeString, toLocaleDateString);

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

@@ -0,0 +1,64 @@
+import { collonSeparatedHour24MinuteSecond, dateFormatter, processYear } from './common';
+import { MONTHS, WEEKDAYS } from './en-common';
+import type { DateTimeFormatOptions, Day, Month, Weekday, Year } from './types';
+
+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();
+        // iso month is always 2-digit (even numeric)
+        dateParts.push(
+            strMonth.length === 1 ? `0${strMonth}` : strMonth,
+        );
+    } else {
+        dateParts.push(MONTHS[month][date.getMonth()]);
+    }
+};
+
+const processWeekday = (
+    dateStringParts: string[],
+    year: Year | undefined,
+    month: Month | undefined,
+    day: Day | undefined,
+    weekday: Weekday | undefined,
+    date: Date,
+) => {
+    if (typeof weekday === 'undefined') return;
+    const isOnlyWeekday = (
+        typeof year === 'undefined'
+        && typeof month === 'undefined'
+        && typeof day === 'undefined'
+    );
+    dateStringParts.push(`${WEEKDAYS[weekday][date.getDay()]}${isOnlyWeekday ? '' : ','}`);
+};
+
+const processDay = (dateParts: string[], day: Day | undefined, date: Date) => {
+    if (typeof day === 'undefined') return;
+    const strDate = date.getDate().toString();
+    // iso date is always 2-digit (even numeric)
+    dateParts.push(strDate.length === 1 ? `0${strDate}` : strDate);
+};
+
+export 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, date);
+    processMonth(dateParts, month, date);
+    processYear(dateParts, year, date);
+    dateStringParts.push(dateParts.join(dateConnection));
+    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);

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

@@ -0,0 +1,47 @@
+/**
+ * Following types are based on ECMA 402 specification (Intl.DateTimeFormat)
+ */
+
+type Narrow = 'narrow';
+type Short = 'short';
+type Long = 'long';
+type TwoDigit = '2-digit';
+type Numeric = 'numeric';
+
+export type Weekday = Narrow | Short | Long;
+export type Year = TwoDigit | Numeric;
+export type Month = TwoDigit | Numeric | Narrow | Short | Long;
+export type Day = TwoDigit | Numeric;
+export type Hour = TwoDigit | Numeric;
+export type Minute = TwoDigit | Numeric;
+export type Second = TwoDigit | Numeric;
+
+type TimeKeys = 'hour' | 'minute' | 'second';
+
+type DateKeys = 'weekday' | 'year' | 'month' | 'day';
+
+export type DateTimeFormatOptions = {
+    weekday?: Weekday,
+    year?: Year,
+    month?: Month,
+    day?: Day,
+    hour?: Hour,
+    minute?: Minute,
+    second?: Second,
+};
+
+export type DateFormatOptions = Pick<DateTimeFormatOptions, DateKeys>;
+export type TimeFormatOptions = Pick<DateTimeFormatOptions, TimeKeys>;
+
+export type DateTimeFormattter = (timestampOrDate: number | Date) => {
+    toLocaleString(options?: DateTimeFormatOptions): string,
+    toLocaleTimeString(options?: TimeFormatOptions): string,
+    toLocaleDateString(options?: DateFormatOptions): string,
+};
+
+export type Props = {
+    type: 'date',
+    value: number | Date,
+    locale?: string,
+    options?: DateTimeFormatOptions,
+};

package/packages/l10n/src/index.ts

@@ -0,0 +1,2 @@
+export { l10n } from './l10n';
+export { Locale } from './Locale';

package/packages/l10n/src/l10n.ts

@@ -0,0 +1,54 @@
+import { EventsManager, IEvents } from '@24i/bigscreen-sdk/events-manager';
+import { isoDateFormatter } from './date/iso';
+import { Formatters } from './types';
+
+type Events = {
+    'localechange': () => void,
+};
+class L10n implements IEvents<Events> {
+    private readonly events = new EventsManager<Events>();
+
+    addEventListener = this.events.addEventListener;
+
+    removeEventListener = this.events.removeEventListener;
+
+    triggerEvent = this.events.triggerEvent;
+
+    private locale = 'iso';
+
+    private readonly formatters: Formatters = {
+        date: {
+            iso: isoDateFormatter,
+        },
+    };
+
+    private getFormatterByLocale(formatter: keyof Formatters, locale: string = this.locale) {
+        const localeFormatter = this.formatters[formatter][locale];
+        if (localeFormatter) return localeFormatter;
+        // eslint-disable-next-line no-console
+        console.warn(`
+            Formatter '${formatter}' for locale '${locale}' was requested
+            but not found. Falling back to 'iso' ${formatter} formatter!
+        `);
+        return this.formatters[formatter].iso;
+    }
+
+    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);
+    }
+
+    addFormatter<T extends keyof Formatters, U extends keyof Formatters[T]>(
+        formatterType: T, locale: keyof Formatters[T], formatter: Formatters[T][U],
+    ) {
+        this.formatters[formatterType][locale] = formatter;
+    }
+}
+
+export const l10n = new L10n();

package/packages/l10n/src/types.ts

@@ -0,0 +1,22 @@
+import { DateTimeFormattter, Props as DateTimeProps } from './date/types';
+
+type FormatterTypes = 'date';
+
+/**
+ * This will ensure that there will always be at least iso formatter
+ */
+interface IFormatters extends Record<FormatterTypes, {
+    iso: (...args: any) => any,
+    [key: string]: (...args: any) => any,
+}> {}
+
+export interface Formatters extends IFormatters {
+    date: {
+        iso: DateTimeFormattter,
+        [key: string]: DateTimeFormattter,
+    },
+}
+
+export type Props = (
+    | DateTimeProps
+);