@tactics/toddle-styleguide 5.3.1 → 5.4.0

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

@@ -0,0 +1,190 @@
+import {Hour, HourOutputFormat} from './hour.class';
+import {Minute, MinuteOutputFormat} from './minute.class';
+import {Second, SecondOutputFormat} from './second.class';
+import {Millisecond, MilliSecondOutputFormat} from './millisecond.class';
+
+export class InvalidTimeOutputFormat extends Error {
+  static unknownFormat() {
+    return new InvalidTimeOutputFormat("The provided format is invalid.");
+  }
+}
+
+export enum TimeInputFormat {
+  SHORT = "HH:mm",
+  WITH_SECONDS = "HH:mm:ss",
+  WITH_MILLISECONDS = "HH:mm:ss.SSS",
+}
+
+export enum TimeOutputFormat {
+  TIME_SHORT = "HH:mm",
+  TIME_WITH_SECONDS = "HH:mm:ss",
+  TIME_WITH_MILLISECONDS = "HH:mm:ss.SSS",
+}
+
+export interface TimeInterface {
+  hour: Hour;
+  minute: Minute;
+  second: Second;
+  millisecond: Millisecond;
+  format(format: TimeOutputFormat): string;
+  // formatLocale is not included since time don't get formatted local.
+
+  isSame(time: TimeInterface): boolean;
+  isBefore(other: TimeInterface): boolean;
+  isAfter(other: TimeInterface): boolean;
+  toMilliseconds(): number;
+  toIso8601(): string;
+}
+
+export class Time implements TimeInterface {
+  private constructor(
+    public readonly hour: Hour,
+    public readonly minute: Minute,
+    public readonly second: Second,
+    public readonly millisecond: Millisecond,
+  ) {}
+
+  static from(
+    hour: number,
+    minute: number,
+    second?: number,
+    millisecond?: number,
+  ): Time {
+    return new Time(
+      Hour.from(hour),
+      Minute.from(minute),
+      second ? Second.from(second) : Second.from(0),
+      millisecond ? Millisecond.from(millisecond) : Millisecond.from(0),
+    );
+  }
+
+  private static fromShort(timeString: string) {
+    const split = timeString.split(":").map(Number);
+    if (split.length !== 2) {
+      throw new Error(
+        'Invalid time string format. Expected format is "HH:mm".',
+      );
+    }
+
+    const [hour, minute] = split;
+
+    if (isNaN(hour) || isNaN(minute)) {
+      throw new Error(
+        'Invalid time string format. Expected format is "HH:mm".',
+      );
+    }
+
+    return Time.from(hour, minute, 0, 0);
+  }
+
+  private static fromWithSeconds(timeString: string) {
+    const split = timeString.split(":").map(Number);
+    if (split.length !== 3) {
+      throw new Error(
+        'Invalid time string format. Expected format is "HH:mm:ss".',
+      );
+    }
+
+    const [hour, minute, second] = split;
+
+    if (isNaN(hour) || isNaN(minute) || isNaN(second)) {
+      throw new Error(
+        'Invalid time string format. Expected format is "HH:mm:ss".',
+      );
+    }
+
+    return Time.from(hour, minute, second, 0);
+  }
+
+  private static fromWithMilliSeconds(timeString: string) {
+    const split = timeString.split(".");
+
+    if (split.length !== 2) {
+      throw new Error(
+        'Invalid time string format. Expected format is "HH:mm:ss.SSS".',
+      );
+    }
+
+    const [rest, millies] = split;
+
+    const restSplit = rest.split(":").map(Number);
+    const millisec = Number(millies);
+
+    if (restSplit.length !== 3) {
+      throw new Error(
+        'Invalid time string format. Expected format is "HH:mm:ss.SSS".',
+      );
+    }
+
+    const [hour, minute, second] = restSplit;
+
+    if (isNaN(hour) || isNaN(minute) || isNaN(second) || isNaN(millisec)) {
+      throw new Error(
+        'Invalid time string format. Expected format is "HH:mm:ss.SSS".',
+      );
+    }
+
+    return Time.from(hour, minute, second, millisec);
+  }
+
+  static fromFormat(timeString: string, format: TimeInputFormat): Time {
+    switch (format) {
+      case TimeInputFormat.WITH_MILLISECONDS:
+        return Time.fromWithMilliSeconds(timeString);
+      case TimeInputFormat.WITH_SECONDS:
+        return Time.fromWithSeconds(timeString);
+      case TimeInputFormat.SHORT:
+        return Time.fromShort(timeString);
+      default:
+        throw InvalidTimeOutputFormat.unknownFormat();
+    }
+  }
+
+  public toIso8601(): string {
+    return this.format(TimeOutputFormat.TIME_WITH_MILLISECONDS);
+  }
+
+  // Formats the time (hh:mm format)
+  format(format: TimeOutputFormat): string {
+    const formattedHour = this.hour.format(HourOutputFormat.HOUR_TWO_DIGIT);
+    const formattedMinute = this.minute.format(
+      MinuteOutputFormat.MINUTE_TWO_DIGIT,
+    );
+
+    switch (format) {
+      case TimeOutputFormat.TIME_WITH_MILLISECONDS:
+        return `${formattedHour}:${formattedMinute}:${this.second.format(SecondOutputFormat.SECOND_TWO_DIGIT)}.${this.millisecond.format(MilliSecondOutputFormat.MILLISECOND_THREE_DIGIT)}`;
+      case TimeOutputFormat.TIME_WITH_SECONDS:
+        return `${formattedHour}:${formattedMinute}:${this.second.format(SecondOutputFormat.SECOND_TWO_DIGIT)}`;
+      case TimeOutputFormat.TIME_SHORT:
+        return `${formattedHour}:${formattedMinute}`;
+    }
+  }
+
+  isSame(other: TimeInterface): boolean {
+    return (
+      this.hour.isSame(other.hour) &&
+      this.minute.isSame(other.minute) &&
+      this.second.isSame(other.second) &&
+      this.millisecond.isSame(other.millisecond)
+    );
+  }
+
+  isBefore(other: TimeInterface): boolean {
+    return this.toMilliseconds() < other.toMilliseconds();
+  }
+
+  isAfter(other: Time): boolean {
+    return this.toMilliseconds() > other.toMilliseconds();
+  }
+
+  toMilliseconds(): number {
+    return (
+      (this.hour.asInt() * 3600 +
+        this.minute.asInt() * 60 +
+        this.second.asInt()) *
+      1000 +
+      this.millisecond.asInt()
+    );
+  }
+}

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

@@ -0,0 +1,36 @@
+import dayjs from './dayjs-config';
+
+export interface TimeZoneInterface {
+    name(): string;
+    isSame(zone: TimeZoneInterface): boolean;
+}
+
+export class TimeZone implements TimeZoneInterface {
+    private readonly zone: string;
+
+    private constructor(private readonly timezone: string) {
+        this.zone = timezone;
+    }
+
+    static from(timezone: string): TimeZoneInterface {
+        return new TimeZone(timezone);
+    }
+
+    static UTC(): TimeZoneInterface {
+        return new TimeZone('UTC');
+    }
+
+    isSame(zone: TimeZoneInterface): boolean {
+        return this.name() === zone.name();
+    }
+
+    name(): string {
+        return this.zone;
+    }
+}
+
+export const SystemTimezone: TimeZoneInterface = TimeZone.from(
+  dayjs.tz.guess(),
+);
+
+export const UTCTimezone: TimeZoneInterface = TimeZone.UTC();

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

@@ -0,0 +1,78 @@
+export class InvalidYear extends Error {
+  static negativeNumber() {
+    return new InvalidYear("Year must be a non-negative number.");
+  }
+}
+
+export enum YearOutputFormat {
+  /** Month and day numeric (e.g., 2020) */
+  YEAR_NUMERIC = "year-numeric",
+  /** Month and day numeric (e.g., 20) */
+  YEAR_TWO_DIGIT = "year-2-digit",
+}
+
+export interface YearInterface {
+  isSame(year: Year): boolean;
+  isBefore(year: Year): boolean;
+  isAfter(year: Year): boolean;
+  asInt(): number;
+  previous(): Year;
+  next(): Year;
+  add(years: number): Year;
+
+  format(format: YearOutputFormat): string;
+  // formatLocale is not included since year don't get formatted local.
+}
+
+export class Year implements YearInterface {
+  constructor(private readonly year: number) {
+    if (year < 0) {
+      throw InvalidYear.negativeNumber();
+    }
+
+    this.year = year;
+  }
+
+  static from(year: number): Year {
+    return new Year(year);
+  }
+
+  asInt() : number {
+    return this.year;
+  }
+
+  format(format: YearOutputFormat): string {
+    switch (format) {
+      case YearOutputFormat.YEAR_NUMERIC:
+        return String(this.year);
+      case YearOutputFormat.YEAR_TWO_DIGIT:
+        return String(this.year).slice(-2);
+      default:
+        throw new Error(`Unsupported format: ${format}`);
+    }
+  }
+
+  add(years: number): Year {
+    return Year.from(this.asInt() + years);
+  }
+
+  previous(): Year {
+    return Year.from(this.asInt() - 1);
+  }
+
+  next(): Year {
+    return Year.from(this.asInt() + 1);
+  }
+
+  isBefore(year: Year): boolean {
+    return this.asInt() < year.asInt();
+  }
+
+  isAfter(year: Year): boolean {
+    return this.asInt() > year.asInt();
+  }
+
+  isSame(year: Year): boolean {
+    return this.asInt() === year.asInt();
+  }
+}

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

@@ -0,0 +1,80 @@
+import {Year, YearOutputFormat} from './year.class';
+import {Month, MonthOutputFormat} from './month.class';
+import {Day, DayOutputFormat} from './day.class';
+import {Locale} from './locale';
+import dayjs from './dayjs-config';
+
+export enum YearAndMonthLocaleAwareOutputFormat {
+  /** Month and year only (e.g., October 2024) */
+  YEAR_AND_MONTH_FULL = "MMMM yyyy",
+
+  /** Month and year only (e.g., Oct 2024) */
+  YEAR_AND_MONTH_SHORT = "MM yyyy",
+}
+
+export enum YearAndMonthOutputFormat {
+  /** Month and day numeric (e.g., 10/2024) */
+  YEAR_AND_MONTH_NUMERIC = "MM/yyyy",
+}
+
+export interface YearAndMonthInterface {
+  daysInMonth(): 28 | 29 | 30 | 31;
+  format(format: YearAndMonthOutputFormat): string;
+  formatLocale(format: YearAndMonthLocaleAwareOutputFormat, locale: Locale): string;
+}
+
+export class YearAndMonth implements YearAndMonthInterface {
+  private constructor(
+    private readonly year: Year,
+    private readonly month: Month,
+  ) {}
+
+  static from(year: Year, month: Month): YearAndMonth {
+    return new YearAndMonth(year, month);
+  }
+
+  daysInMonth(): 28 | 29 | 30 | 31 {
+    const currentMonth = new Date(
+      this.year.asInt(),
+      this.month.asInt() + 1, // We add 1 to get the next month
+      0, // Will return the last day of the previous month
+    );
+    return currentMonth.getDate() as 28 | 29 | 30 | 31;
+  }
+
+  format(format: YearAndMonthOutputFormat): string {
+    switch (format) {
+      case YearAndMonthOutputFormat.YEAR_AND_MONTH_NUMERIC:
+        return String(this.year.asInt() + '/' + this.month.asInt());
+      default:
+        throw new Error(`Unsupported format: ${format}`);
+    }
+  }
+
+  formatLocale(format: YearAndMonthLocaleAwareOutputFormat, locale: Locale): string {
+
+    const day = Day.from(1);
+
+    // Fake a day to let dayjs handle the local formatting.
+    // this works since we only format year and month, and date is not changed.
+    const fakedDay = dayjs.utc(
+      this.year.format(YearOutputFormat.YEAR_NUMERIC) + '-' + this.month.format(MonthOutputFormat.MONTH_TWO_DIGIT) + '-' + day.format(DayOutputFormat.DAY_TWO_DIGIT) + 'T' + '12:00:00'
+    );
+
+    if (!fakedDay.isValid()) {
+      throw new Error(`Invalid day`);
+    }
+
+    const localeAware = fakedDay.locale(locale)
+
+    switch (format) {
+      case YearAndMonthLocaleAwareOutputFormat.YEAR_AND_MONTH_SHORT:
+        return localeAware.format('MMM YYYY')
+      case YearAndMonthLocaleAwareOutputFormat.YEAR_AND_MONTH_FULL:
+        return localeAware.format('MMMM YYYY')
+      default:
+        throw new Error(`Unsupported format: ${format}`);
+    }
+  }
+
+}

package/src/components/atoms/background-gradient/__snapshots__/background-gradient.test.js.snap

@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test gradient background should render a gradient background 1`] = `
-<ViewManagerAdapter_ExpoLinearGradient
-  colors={
-    [
-      4281681564,
-      4284775115,
-      4284775115,
-    ]
-  }
-  endPoint={
-    [
-      0.9,
-      0.9,
-    ]
-  }
-  locations={
-    [
-      0,
-      0.55,
-      1,
-    ]
-  }
-  startPoint={
-    [
-      0.1,
-      0.1,
-    ]
-  }
-  style={
-    {
-      "height": "100%",
-      "position": "absolute",
-      "width": "100%",
-      "zIndex": -1,
-    }
-  }
-/>
-`;

package/src/components/atoms/background-gradient/background-gradient.test.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import render from 'react-test-renderer';
-import {BackgroundGradient} from './background-gradient.component';
-
-describe('test gradient background', () => {
-  it('should render a gradient background', () => {
-    const tree = render.create(<BackgroundGradient />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});