@tactics/toddle-styleguide 5.3.1 → 5.3.3

package/src/utilities/datetime/dayjs-config.ts

@@ -0,0 +1,96 @@
+// dayjs.ts
+import dayjs from 'dayjs';
+
+// 🔌 Import plugins
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import localeData from 'dayjs/plugin/localeData';
+import updateLocale from 'dayjs/plugin/updateLocale';
+
+// 🌍 Import languages
+import 'dayjs/locale/en';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/de';
+import 'dayjs/locale/nl';
+import {Locale} from "./locale";
+
+// ✅ Extend plugins
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
+dayjs.extend(localizedFormat);
+dayjs.extend(localeData);
+dayjs.extend(updateLocale);
+
+
+// 🌍 Import and set locale if needed
+dayjs.updateLocale(Locale.en, {
+    months: [
+        "January", "February", "March", "April", "May", "June",
+        "July", "August", "September", "October", "November", "December"
+    ],
+    monthsShort: [
+        "Jan", "Feb", "Mar", "Apr", "May", "Jun",
+        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
+    ],
+    weekdays: [
+        "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
+    ],
+    weekdaysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    weekdaysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
+});
+
+dayjs.updateLocale(Locale.fr, {
+    months: [
+        "janvier", "février", "mars", "avril", "mai", "juin",
+        "juillet", "août", "septembre", "octobre", "novembre", "décembre"
+    ],
+    monthsShort: [
+        "janv.", "févr.", "mars", "avr.", "mai", "juin",
+        "juil.", "août", "sept.", "oct.", "nov.", "déc."
+    ],
+    weekdays: [
+        "dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"
+    ],
+    weekdaysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
+    weekdaysMin: ["di", "lu", "ma", "me", "je", "ve", "sa"]
+});
+
+dayjs.updateLocale(Locale.nl, {
+    months: [
+        "januari", "februari", "maart", "april", "mei", "juni",
+        "juli", "augustus", "september", "oktober", "november", "december"
+    ],
+    monthsShort: [
+        "jan", "feb", "mrt", "apr", "mei", "jun",
+        "jul", "aug", "sep", "okt", "nov", "dec"
+    ],
+    weekdays: [
+        "zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag"
+    ],
+    weekdaysShort: ["zo", "ma", "di", "wo", "do", "vr", "za"],
+    weekdaysMin: ["zo", "ma", "di", "wo", "do", "vr", "za"]
+});
+
+dayjs.updateLocale(Locale.de, {
+    months: [
+        "Januar", "Februar", "März", "April", "Mai", "Juni",
+        "Juli", "August", "September", "Oktober", "November", "Dezember"
+    ],
+    monthsShort: [
+        "Jan", "Feb", "Mär", "Apr", "Mai", "Jun",
+        "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"
+    ],
+    weekdays: [
+        "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"
+    ],
+    weekdaysShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
+    weekdaysMin: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]
+});
+
+// ✅ Set default locale
+dayjs.locale(Locale.nl);
+
+export default dayjs;

package/src/utilities/datetime/dayoftheweek.class.tsx

@@ -0,0 +1,242 @@
+import {Locale} from './locale';
+import dayjs from './dayjs-config';
+
+export type Iso8601WeekdayNumbers = 1 | 2 | 3 | 4 | 5 | 6 | 7;
+export type ZeroBasedWeekdayNumbers = 0 | 2 | 3 | 4 | 5 | 6;
+
+export class InvalidDayOfWeek extends Error {
+  static invalidDayOfWeek() {
+    return new InvalidDayOfWeek("The provided day of week is invalid.");
+  }
+}
+
+export enum DayOfWeekLocaleAwareOutputFormat {
+  DAY_OF_WEEK_LONG = "long",
+  DAY_OF_WEEK_SHORT = "short",
+  DAY_OF_WEEK_NARROW = "narrow",
+}
+
+export enum DayOfWeekOutputFormat {
+  DAY_OF_WEEK_NUMERIC_ZERO_BASED = "numeric-zero-based",
+  DAY_OF_WEEK_NUMERIC_ISO8601 = "numeric-iso8601",
+}
+
+export enum DayOfWeekIndex {
+  ZERO_BASED = "zero-based", // Sunday = 0, Monday = 6
+  ISO8601 = "iso8601", // Monday = 1, Sunday = 7
+}
+
+export interface IDayOfWeek {
+  asInt(index: DayOfWeekIndex): number;
+  isMonday(): boolean;
+  isTuesday(): boolean;
+  isWednesday(): boolean;
+  isThursday(): boolean;
+  isFriday(): boolean;
+  isSaturday(): boolean;
+  isSunday(): boolean;
+  isWeekend(): boolean;
+  isWeekday(): boolean;
+  offset(): 0 | 1 | 2 | 3 | 4 | 5 | 6; // The offset from Monday
+  format(format: DayOfWeekOutputFormat): string;
+  formatLocale(format: DayOfWeekLocaleAwareOutputFormat, locale: Locale): string;
+}
+
+export class DayOfWeek implements IDayOfWeek {
+  public readonly dayOfWeek: number;
+
+  private constructor(day: Iso8601WeekdayNumbers) {
+    this.dayOfWeek = day;
+  }
+
+  static from(
+    day: Iso8601WeekdayNumbers | ZeroBasedWeekdayNumbers,
+    index: DayOfWeekIndex = DayOfWeekIndex.ISO8601,
+  ): DayOfWeek {
+    if (index === DayOfWeekIndex.ZERO_BASED) {
+      if (day === 7) {
+        throw InvalidDayOfWeek.invalidDayOfWeek();
+      }
+      return DayOfWeek.fromZeroBased(day as ZeroBasedWeekdayNumbers);
+    }
+
+    if (day === 0) {
+      throw InvalidDayOfWeek.invalidDayOfWeek();
+    }
+
+    return DayOfWeek.fromIso8601(day);
+  }
+
+  static fromIso8601(day: Iso8601WeekdayNumbers): DayOfWeek {
+    return new DayOfWeek(day);
+  }
+
+  static fromZeroBased(day: ZeroBasedWeekdayNumbers): DayOfWeek {
+    return new DayOfWeek((day + 1) as Iso8601WeekdayNumbers);
+  }
+
+  asInt(index: DayOfWeekIndex = DayOfWeekIndex.ISO8601): number {
+    return index === DayOfWeekIndex.ISO8601
+      ? this.dayOfWeek
+      : this.dayOfWeek - 1;
+  }
+
+  isMonday(): boolean {
+    return this.dayOfWeek === 1;
+  }
+
+  isTuesday(): boolean {
+    return this.dayOfWeek === 2;
+  }
+
+  isWednesday(): boolean {
+    return this.dayOfWeek === 3;
+  }
+
+  isThursday(): boolean {
+    return this.dayOfWeek === 4;
+  }
+
+  isFriday(): boolean {
+    return this.dayOfWeek === 5;
+  }
+
+  isSaturday(): boolean {
+    return this.dayOfWeek === 6;
+  }
+
+  isSunday(): boolean {
+    return this.dayOfWeek === 7;
+  }
+
+  isWeekend(): boolean {
+    return this.isSaturday() || this.isSunday();
+  }
+
+  isWeekday(): boolean {
+    return !this.isWeekend();
+  }
+
+  offset(): 0 | 1 | 2 | 3 | 4 | 5 | 6 {
+    return this.asInt(DayOfWeekIndex.ZERO_BASED) as 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  }
+
+  formatLocale(format: DayOfWeekLocaleAwareOutputFormat, locale: Locale): string {
+    if (!Object.values(DayOfWeekLocaleAwareOutputFormat).includes(format)) {
+      throw new Error(`Unsupported format: ${format}`);
+    }
+
+    if (this.isMonday()) {
+      // Fixed days in the past to represent a monday.
+      const monday = dayjs("2021-03-01T12:00:00");
+      switch (format) {
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_SHORT:
+          return monday.locale(locale).format('dd')
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_NARROW:
+          return monday.locale(locale).format('ddd')
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_LONG:
+          return monday.locale(locale).format('dddd')
+        default:
+          throw new Error(`Unsupported format: ${format}`);
+      }
+    }
+
+    if (this.isTuesday()) {
+      const tuesday = dayjs("2021-03-02T12:00:00");
+      switch (format) {
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_SHORT:
+          return tuesday.locale(locale).format('dd')
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_NARROW:
+          return tuesday.locale(locale).format('ddd')
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_LONG:
+          return tuesday.locale(locale).format('dddd')
+        default:
+          throw new Error(`Unsupported format: ${format}`);
+      }
+    }
+
+    if (this.isWednesday()) {
+      const wednesday = dayjs("2021-03-03T12:00:00");
+      switch (format) {
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_SHORT:
+          return wednesday.locale(locale).format('dd')
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_NARROW:
+          return wednesday.locale(locale).format('ddd')
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_LONG:
+          return wednesday.locale(locale).format('dddd')
+        default:
+          throw new Error(`Unsupported format: ${format}`);
+      }
+    }
+
+    if (this.isThursday()) {
+      const thursday = dayjs("2021-03-04T12:00:00");
+      switch (format) {
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_SHORT:
+          return thursday.locale(locale).format('dd')
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_NARROW:
+          return thursday.locale(locale).format('ddd')
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_LONG:
+          return thursday.locale(locale).format('dddd')
+        default:
+          throw new Error(`Unsupported format: ${format}`);
+      }
+    }
+
+    if (this.isFriday()) {
+      const friday = dayjs("2021-03-05T12:00:00");
+      switch (format) {
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_SHORT:
+          return friday.locale(locale).format('dd')
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_NARROW:
+          return friday.locale(locale).format('ddd')
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_LONG:
+          return friday.locale(locale).format('dddd')
+        default:
+          throw new Error(`Unsupported format: ${format}`);
+      }
+    }
+
+    if (this.isSaturday()) {
+      const saturday = dayjs("2021-03-06T12:00:00");
+      switch (format) {
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_SHORT:
+          return saturday.locale(locale).format('dd')
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_NARROW:
+          return saturday.locale(locale).format('ddd')
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_LONG:
+          return saturday.locale(locale).format('dddd')
+        default:
+          throw new Error(`Unsupported format: ${format}`);
+      }
+    }
+
+    if (this.isSunday()) {
+      const sunday = dayjs("2021-03-07T12:00:00");
+      switch (format) {
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_SHORT:
+          return sunday.locale(locale).format('dd')
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_NARROW:
+          return sunday.locale(locale).format('ddd')
+        case DayOfWeekLocaleAwareOutputFormat.DAY_OF_WEEK_LONG:
+          return sunday.locale(locale).format('dddd')
+        default:
+          throw new Error(`Unsupported format: ${format}`);
+      }
+    }
+
+    throw new Error(`Unsupported format: ${format}`);
+  }
+
+  format(format: DayOfWeekOutputFormat): string {
+
+    switch (format) {
+      case DayOfWeekOutputFormat.DAY_OF_WEEK_NUMERIC_ZERO_BASED:
+        return String(this.dayOfWeek - 1);
+      case DayOfWeekOutputFormat.DAY_OF_WEEK_NUMERIC_ISO8601:
+        return String(this.dayOfWeek);
+      default:
+        throw new Error(`Unsupported format: ${format}`);
+    }
+  }
+}

package/src/utilities/datetime/hour.class.tsx

@@ -0,0 +1,60 @@
+import {MinuteOutputFormat} from './minute.class';
+import {SecondOutputFormat} from './second.class';
+
+export class InvalidHour extends Error {
+  static outOfRange() {
+    return new InvalidHour("Hour must be between 0 and 23.");
+  }
+}
+
+export enum HourOutputFormat {
+  HOUR_NUMERIC = "hour-numeric",
+  HOUR_TWO_DIGIT = "hour-2-digit",
+}
+
+export interface HourInterface {
+  isSame(other: Hour): boolean;
+  asInt(): number;
+  format(format: HourOutputFormat): string;
+  // formatLocale is not included since seconds don't get formatted local.
+  toSeconds(): number;
+}
+
+export class Hour implements HourInterface {
+  private constructor(private readonly hour: number) {
+    if (hour < 0 || hour > 23) {
+      throw InvalidHour.outOfRange();
+    }
+  }
+
+  static from(hour: number): Hour {
+    return new Hour(hour);
+  }
+
+  asInt(): number {
+    return this.hour;
+  }
+
+  isSame(other: Hour): boolean {
+    return this.asInt() === other.asInt();
+  }
+
+  toSeconds(): number {
+    return this.toMinutes() * 60;
+  }
+
+  toMinutes(): number {
+    return this.hour * 60;
+  }
+
+  format(format: HourOutputFormat): string {
+    switch (format) {
+      case HourOutputFormat.HOUR_NUMERIC:
+        return String(this.hour);
+      case HourOutputFormat.HOUR_TWO_DIGIT:
+        return this.hour.toString().padStart(2, "0");
+      default:
+        throw new Error(`Unsupported format: ${format}`);
+    }
+  }
+}

package/src/utilities/datetime/locale.tsx

@@ -0,0 +1,6 @@
+export enum Locale {
+  en = "en",
+  nl = "nl",
+  fr = "fr",
+  de = "de",
+}

package/src/utilities/datetime/millisecond.class.tsx

@@ -0,0 +1,48 @@
+export class InvalidMilliSecond extends Error {
+  static outOfRange() {
+    return new InvalidMilliSecond("MilliSecond must be between 0 and 999.");
+  }
+}
+
+export enum MilliSecondOutputFormat {
+  MILLISECOND_NUMERIC = "millisecond-numeric",
+  MILLISECOND_THREE_DIGIT = "millisecond-3-digit",
+}
+
+export interface MillisecondInterface {
+  isSame(other: Millisecond): boolean;
+  asInt(): number;
+  format(format: MilliSecondOutputFormat): string;
+  // formatLocale is not included since seconds don't get formatted local.
+}
+
+export class Millisecond implements MillisecondInterface {
+  private constructor(private readonly millisecond: number) {
+    if (millisecond < 0 || millisecond > 999) {
+      throw InvalidMilliSecond.outOfRange();
+    }
+  }
+
+  static from(millisecond: number): Millisecond {
+    return new Millisecond(millisecond);
+  }
+
+  asInt(): number {
+    return this.millisecond;
+  }
+
+  isSame(other: Millisecond): boolean {
+    return this.asInt() === other.asInt();
+  }
+
+  format(format: MilliSecondOutputFormat): string {
+    switch (format) {
+      case MilliSecondOutputFormat.MILLISECOND_NUMERIC:
+        return String(this.millisecond);
+      case MilliSecondOutputFormat.MILLISECOND_THREE_DIGIT:
+        return this.millisecond.toString().padStart(3, "0");
+      default:
+        throw new Error(`Unsupported format: ${format}`);
+    }
+  }
+}

package/src/utilities/datetime/minute.class.tsx

@@ -0,0 +1,55 @@
+import {SecondOutputFormat} from './second.class';
+
+export class InvalidMinute extends Error {
+  static outOfRange() {
+    return new InvalidMinute("Minute must be between 0 and 59.");
+  }
+}
+
+export enum MinuteOutputFormat {
+  MINUTE_NUMERIC = "minute-numeric",
+  MINUTE_TWO_DIGIT = "minute-2-digit",
+}
+
+export interface MinuteInterface {
+  isSame(other: Minute): boolean;
+  asInt(): number;
+  toSeconds(): number;
+  format(format: MinuteOutputFormat): string;
+  // formatLocale is not included since seconds don't get formatted local.
+}
+
+export class Minute {
+  private constructor(private readonly minute: number) {
+    if (minute < 0 || minute > 59) {
+      throw InvalidMinute.outOfRange();
+    }
+  }
+
+  static from(minute: number): Minute {
+    return new Minute(minute);
+  }
+
+  asInt(): number {
+    return this.minute;
+  }
+
+  format(format: MinuteOutputFormat): string {
+    switch (format) {
+      case MinuteOutputFormat.MINUTE_NUMERIC:
+        return String(this.minute);
+      case MinuteOutputFormat.MINUTE_TWO_DIGIT:
+        return this.minute.toString().padStart(2, "0");
+      default:
+        throw new Error(`Unsupported format: ${format}`);
+    }
+  }
+
+  isSame(other: Minute): boolean {
+    return this.asInt() === other.asInt();
+  }
+
+  toSeconds(): number {
+    return this.minute * 60;
+  }
+}

package/src/utilities/datetime/month.class.tsx

@@ -0,0 +1,74 @@
+import {Locale} from './locale';
+import dayjs from './dayjs-config';
+
+export class InvalidMonth extends Error {
+  static notInScope() {
+    return new InvalidMonth("Month must be between 0 and 11.");
+  }
+}
+
+export enum MonthOutputFormat {
+  MONTH_NUMERIC = "month-numeric",
+  MONTH_TWO_DIGIT = "month-2-digit",
+}
+
+export enum MonthLocalAwareOutputFormat {
+  MONTH_LONG = "month-long",
+  MONTH_SHORT = "month-short",
+}
+
+export interface MonthInterface {
+  isSame(month: Month): boolean;
+  asInt(): number;
+  format(format: MonthOutputFormat): string;
+  formatLocale(format: MonthLocalAwareOutputFormat, locale: Locale): string;
+}
+
+export enum MonthIndex {
+  ZERO_BASED = "zero-based", // January = 0, December = 11
+  ONE_BASED = "one-based", // January = 1, December = 12
+}
+
+export class Month implements MonthInterface {
+  private constructor(private readonly month: number) {
+    if (this.month < 0 || this.month > 11) {
+      throw InvalidMonth.notInScope();
+    }
+  }
+
+  static from(month: number, index: MonthIndex = MonthIndex.ZERO_BASED): Month {
+    return new Month(index === MonthIndex.ONE_BASED ? month - 1 : month);
+  }
+
+  asInt(index: MonthIndex = MonthIndex.ZERO_BASED): number {
+    return index === MonthIndex.ONE_BASED ? this.month + 1 : this.month;
+  }
+
+  isSame(month: Month): boolean {
+    return this.asInt() === month.asInt();
+  }
+
+  format(format: MonthOutputFormat): string {
+    const month = this.month + 1; // Stored 0 based.
+    switch (format) {
+      case MonthOutputFormat.MONTH_NUMERIC:
+        return month.toString();
+      case MonthOutputFormat.MONTH_TWO_DIGIT:
+        return month.toString().padStart(2, "0");
+    }
+  }
+
+  formatLocale(format: MonthLocalAwareOutputFormat, locale: Locale): string {
+    // Fake date the format month in locale.
+    const date = dayjs('2023-' + this.format(MonthOutputFormat.MONTH_TWO_DIGIT) + '-01T' + '12:00:00')
+
+    switch (format) {
+      case MonthLocalAwareOutputFormat.MONTH_LONG:
+        return date.locale(locale).format('MMMM');
+      case MonthLocalAwareOutputFormat.MONTH_SHORT:
+        return date.locale(locale).format('MMM');
+      default:
+        throw new Error(`Unsupported format: ${format}`);
+    }
+  }
+}

package/src/utilities/datetime/second.class.tsx

@@ -0,0 +1,52 @@
+import {Locale} from './locale';
+import {MonthLocalAwareOutputFormat, MonthOutputFormat} from './month.class';
+import {YearOutputFormat} from './year.class';
+
+export class InvalidSecond extends Error {
+  static outOfRange() {
+    return new InvalidSecond("Second must be between 0 and 59.");
+  }
+}
+
+export enum SecondOutputFormat {
+  SECOND_NUMERIC = "second-numeric",
+  SECOND_TWO_DIGIT = "second-2-digit",
+}
+
+export interface SecondInterface {
+  isSame(other: Second): boolean;
+  asInt(): number;
+  format(format: SecondOutputFormat): string;
+  // formatLocale is not included since seconds don't get formatted local.
+}
+
+export class Second implements SecondInterface {
+  private constructor(private readonly second: number) {
+    if (second < 0 || second > 59) {
+      throw InvalidSecond.outOfRange();
+    }
+  }
+
+  static from(second: number): Second {
+    return new Second(second);
+  }
+
+  asInt(): number {
+    return this.second;
+  }
+
+  isSame(other: Second): boolean {
+    return this.asInt() === other.asInt();
+  }
+
+  format(format: SecondOutputFormat): string {
+    switch (format) {
+      case SecondOutputFormat.SECOND_NUMERIC:
+        return String(this.second);
+      case SecondOutputFormat.SECOND_TWO_DIGIT:
+        return this.second.toString().padStart(2, "0");
+      default:
+        throw new Error(`Unsupported format: ${format}`);
+    }
+  }
+}