@kaizen/components 0.0.0-canary-test-exports-20231114054615 → 0.0.0-canary-bundle-size-check-20231115005811

package/src/Calendar/utils/calculateDisabledDays.spec.ts

@@ -0,0 +1,109 @@
+import { DayOfWeek } from "../enums"
+import { calculateDisabledDays } from "./calculateDisabledDays"
+
+const DISABLED_DATE__1 = new Date(2022, 3, 24)
+const DISABLED_DATE__2 = new Date(2022, 3, 25)
+
+const DISABLED_RANGE = {
+  from: new Date(2022, 2, 14),
+  to: new Date(2022, 2, 16),
+}
+
+const DISABLED_BEFORE = new Date(2022, 1, 16)
+const DISABLED_AFTER = new Date(2022, 1, 17)
+
+const DISABLED_BEFORE_AFTER = {
+  after: new Date(2022, 1, 14),
+  before: new Date(2022, 2, 16),
+}
+
+describe("calculateDisabledDays", () => {
+  it("only contains selected disabled dates", () => {
+    expect(
+      calculateDisabledDays({
+        disabledDates: [DISABLED_DATE__1, DISABLED_DATE__2],
+      })
+    ).toEqual([DISABLED_DATE__1, DISABLED_DATE__2])
+  })
+
+  it("correctly combines multiple disabled days", () => {
+    const disabledDays = calculateDisabledDays({
+      disabledDates: [DISABLED_DATE__1, DISABLED_DATE__2],
+      disabledDaysOfWeek: [DayOfWeek.Mon, DayOfWeek.Fri],
+      disabledRange: DISABLED_RANGE,
+      disabledBeforeAfter: DISABLED_BEFORE_AFTER,
+      disabledBefore: DISABLED_BEFORE,
+      disabledAfter: DISABLED_AFTER,
+    })
+
+    const expectedResult = [
+      DISABLED_DATE__1,
+      DISABLED_DATE__2,
+      { dayOfWeek: [1, 5] },
+      DISABLED_RANGE,
+      { before: DISABLED_BEFORE },
+      { after: DISABLED_AFTER },
+      DISABLED_BEFORE_AFTER,
+    ]
+
+    expect(disabledDays).toEqual(expectedResult)
+  })
+
+  it("calculates only days of the week", () => {
+    const disabledDays = calculateDisabledDays({
+      disabledDaysOfWeek: [
+        DayOfWeek.Mon,
+        DayOfWeek.Tue,
+        DayOfWeek.Wed,
+        DayOfWeek.Thu,
+        DayOfWeek.Fri,
+        DayOfWeek.Sat,
+        DayOfWeek.Sun,
+      ],
+    })
+
+    const expectedResult = [{ dayOfWeek: [1, 2, 3, 4, 5, 6, 0] }]
+
+    expect(disabledDays).toEqual(expectedResult)
+  })
+
+  it("calculates only a date range", () => {
+    const disabledDays = calculateDisabledDays({
+      disabledRange: DISABLED_RANGE,
+    })
+
+    const expectedResult = [DISABLED_RANGE]
+
+    expect(disabledDays).toEqual(expectedResult)
+  })
+
+  it("calculates only a before and after dates", () => {
+    const disabledDays = calculateDisabledDays({
+      disabledBeforeAfter: DISABLED_BEFORE_AFTER,
+    })
+
+    const expectedResult = [DISABLED_BEFORE_AFTER]
+
+    expect(disabledDays).toEqual(expectedResult)
+  })
+
+  it("calculates only a before dates", () => {
+    const disabledDays = calculateDisabledDays({
+      disabledBefore: DISABLED_BEFORE,
+    })
+
+    const expectedResult = [{ before: DISABLED_BEFORE }]
+
+    expect(disabledDays).toEqual(expectedResult)
+  })
+
+  it("calculates only a after dates", () => {
+    const disabledDays = calculateDisabledDays({
+      disabledAfter: DISABLED_AFTER,
+    })
+
+    const expectedResult = [{ after: DISABLED_AFTER }]
+
+    expect(disabledDays).toEqual(expectedResult)
+  })
+})

package/src/Calendar/utils/calculateDisabledDays.ts

@@ -0,0 +1,19 @@
+import { Matcher } from "react-day-picker"
+import { DisabledDayMatchers } from "../types"
+
+export const calculateDisabledDays = ({
+  disabledDates = [],
+  disabledDaysOfWeek,
+  disabledRange,
+  disabledBeforeAfter,
+  disabledBefore,
+  disabledAfter,
+}: DisabledDayMatchers): Matcher[] =>
+  [
+    ...disabledDates,
+    disabledDaysOfWeek !== undefined && { dayOfWeek: disabledDaysOfWeek },
+    disabledRange !== undefined && disabledRange,
+    disabledBefore !== undefined && { before: disabledBefore },
+    disabledAfter !== undefined && { after: disabledAfter },
+    disabledBeforeAfter !== undefined && disabledBeforeAfter,
+  ].filter(matcher => matcher !== false)

package/src/Calendar/utils/formatDateAsNumeral.spec.ts

@@ -0,0 +1,24 @@
+import { enUS, enAU } from "date-fns/locale"
+import { formatDateAsNumeral } from "./formatDateAsNumeral"
+
+describe("formatDateAsNumeral", () => {
+  it("formats invalid date as error message", () => {
+    expect(formatDateAsNumeral(new Date("potato"), enUS)).toEqual("")
+  })
+
+  describe("localisation - en-AU", () => {
+    it("formats valid date in en-AU text format", () => {
+      expect(formatDateAsNumeral(new Date("2022-01-16"), enAU)).toEqual(
+        "16/01/2022"
+      )
+    })
+  })
+
+  describe("localisation - en-US", () => {
+    it("formats valid date in en-US text format", () => {
+      expect(formatDateAsNumeral(new Date("2022-01-16"), enUS)).toEqual(
+        "01/16/2022"
+      )
+    })
+  })
+})

package/src/Calendar/utils/formatDateAsNumeral.ts

@@ -0,0 +1,10 @@
+import { format } from "date-fns"
+import { DateFormat } from "../enums"
+import { isInvalidDate } from "./isInvalidDate"
+
+export const formatDateAsNumeral = (date: Date, locale: Locale): string =>
+  isInvalidDate(date)
+    ? ""
+    : format(date, DateFormat.Numeral, {
+        locale,
+      })

package/src/Calendar/utils/formatDateAsText.spec.ts

@@ -0,0 +1,41 @@
+import { enUS, enAU } from "date-fns/locale"
+import { formatDateAsText } from "./formatDateAsText"
+
+describe("formatDateAsText", () => {
+  it("formats invalid date as error message", () => {
+    expect(formatDateAsText(new Date("potato"), undefined, enUS)).toEqual(
+      "Invalid Date"
+    )
+  })
+
+  describe("localisation - en-AU", () => {
+    it("formats valid date in en-AU text format", () => {
+      expect(formatDateAsText(new Date("2022-01-16"), undefined, enAU)).toEqual(
+        "16 Jan 2022"
+      )
+    })
+
+    it("formats disabled date and remains in a in numeral format", () => {
+      const disabledDays = { before: new Date("2022-02-16") }
+
+      expect(
+        formatDateAsText(new Date("2022-01-16"), disabledDays, enAU)
+      ).toEqual("16/01/2022")
+    })
+  })
+
+  describe("localisation - en-US", () => {
+    it("formats valid date in en-US text format", () => {
+      expect(formatDateAsText(new Date("2022-01-16"), undefined, enUS)).toEqual(
+        "Jan 16, 2022"
+      )
+    })
+    it("formats disabled date in and remains in a numeral format", () => {
+      const disabledDays = { before: new Date("2022-02-16") }
+
+      expect(
+        formatDateAsText(new Date("2022-01-16"), disabledDays, enUS)
+      ).toEqual("01/16/2022")
+    })
+  })
+})

package/src/Calendar/utils/formatDateAsText.ts

@@ -0,0 +1,19 @@
+import { format } from "date-fns"
+import { DateFormat } from "../enums"
+import { DisabledDays } from "../types"
+import { isDisabledDate } from "./isDisabledDate"
+import { isInvalidDate } from "./isInvalidDate"
+
+export const formatDateAsText = (
+  date: Date,
+  disabledDays: DisabledDays,
+  locale: Locale
+): string => {
+  if (isDisabledDate(date, disabledDays)) {
+    return format(date, DateFormat.Numeral, { locale })
+  }
+  if (isInvalidDate(date)) {
+    return "Invalid Date"
+  }
+  return format(date, DateFormat.Text, { locale })
+}

package/src/Calendar/utils/index.ts

@@ -0,0 +1,11 @@
+export * from "./calculateDisabledDays"
+export * from "./formatDateAsNumeral"
+export * from "./formatDateAsText"
+export * from "./isDisabledDate"
+export * from "./isInvalidDate"
+export * from "./isValidWeekStartsOn"
+export * from "./isSelectingDayInCalendar"
+export * from "./parseDateAsTextOrNumeral"
+export * from "./parseDateFromNumeralFormatValue"
+export * from "./parseDateFromTextFormatValue"
+export * from "./setFocusInCalendar"

package/src/Calendar/utils/isDisabledDate.spec.ts

@@ -0,0 +1,51 @@
+import { isDisabledDate } from "./isDisabledDate"
+
+describe("isDisabledDate", () => {
+  it("is true when given date is disabled", () => {
+    const disabledDays = new Date(2022, 3, 24)
+    expect(isDisabledDate(new Date(2022, 3, 24), disabledDays)).toEqual(true)
+  })
+
+  it("is false when given date is not disabled", () => {
+    const disabledDays = new Date(2022, 3, 24)
+    expect(isDisabledDate(new Date(2022, 1, 24), disabledDays)).toEqual(false)
+  })
+
+  it("is false when no dates are disabled", () => {
+    expect(isDisabledDate(new Date(2022, 1, 24), undefined)).toEqual(false)
+    expect(isDisabledDate(new Date(2022, 1, 24), [])).toEqual(false)
+  })
+
+  it("correctly checks if a date is disabled before a specified date", () => {
+    const disabledDays = { before: new Date(2022, 1, 24) }
+
+    expect(isDisabledDate(new Date(2022, 1, 23), disabledDays)).toEqual(true)
+    expect(isDisabledDate(new Date(2022, 1, 24), disabledDays)).toEqual(false)
+  })
+
+  it("correctly checks if a date is disabled after a specified date", () => {
+    const disabledDays = { after: new Date(2022, 1, 24) }
+
+    expect(isDisabledDate(new Date(2022, 1, 24), disabledDays)).toEqual(false)
+    expect(isDisabledDate(new Date(2022, 1, 25), disabledDays)).toEqual(true)
+  })
+
+  it("is true when all dates are disabled", () => {
+    const disabledDays = true
+    expect(isDisabledDate(new Date(2022, 3, 24), disabledDays)).toEqual(true)
+  })
+
+  it("correctly checks multiple conditions", () => {
+    const disabledDays = [
+      new Date("2022-04-03"),
+      { from: new Date("2022-05-01"), to: new Date("2022-05-05") },
+    ]
+    expect(isDisabledDate(new Date("2022-04-03"), disabledDays)).toEqual(true)
+    expect(isDisabledDate(new Date("2022-04-04"), disabledDays)).toEqual(false)
+    expect(isDisabledDate(new Date("2022-04-30"), disabledDays)).toEqual(false)
+    expect(isDisabledDate(new Date("2022-05-01"), disabledDays)).toEqual(true)
+    expect(isDisabledDate(new Date("2022-05-03"), disabledDays)).toEqual(true)
+    expect(isDisabledDate(new Date("2022-05-05"), disabledDays)).toEqual(true)
+    expect(isDisabledDate(new Date("2022-05-06"), disabledDays)).toEqual(false)
+  })
+})

package/src/Calendar/utils/isDisabledDate.ts

@@ -0,0 +1,10 @@
+import { isMatch } from "react-day-picker"
+import { DisabledDays } from "../types"
+
+export const isDisabledDate = (
+  date: Date,
+  disabledDays: DisabledDays
+): boolean =>
+  disabledDays === undefined
+    ? false
+    : isMatch(date, Array.isArray(disabledDays) ? disabledDays : [disabledDays])

package/src/Calendar/utils/isInvalidDate.spec.ts

@@ -0,0 +1,39 @@
+import { parse } from "date-fns"
+import { DateFormat } from "../enums"
+import { isInvalidDate } from "./isInvalidDate"
+
+describe("isInvalidDate", () => {
+  describe("when given a numeral date format", () => {
+    it("is not invalid when given a valid numeral date", () => {
+      const parsedDate = parse("02/01/2022", DateFormat.Numeral, new Date())
+      expect(isInvalidDate(parsedDate)).toEqual(false)
+    })
+
+    it("is invalid when given a non-existent date", () => {
+      const parsedDate = parse("13/01/2022", DateFormat.Numeral, new Date())
+      expect(isInvalidDate(parsedDate)).toEqual(true)
+    })
+
+    it("is invalid when given a text formatted date", () => {
+      const parsedDate = parse("May 4, 2022", DateFormat.Numeral, new Date())
+      expect(isInvalidDate(parsedDate)).toEqual(true)
+    })
+  })
+
+  describe("when given a text date format", () => {
+    it("is not invalid when given a valid text date", () => {
+      const parsedDate = parse("May 4, 2022", DateFormat.Text, new Date())
+      expect(isInvalidDate(parsedDate)).toEqual(false)
+    })
+
+    it("is invalid when given a non-existent date", () => {
+      const parsedDate = parse("May 40, 2022", DateFormat.Text, new Date())
+      expect(isInvalidDate(parsedDate)).toEqual(true)
+    })
+
+    it("is invalid when given a numeral formatted date", () => {
+      const parsedDate = parse("02/01/2022", DateFormat.Text, new Date())
+      expect(isInvalidDate(parsedDate)).toEqual(true)
+    })
+  })
+})

package/src/Calendar/utils/isInvalidDate.ts

@@ -0,0 +1,2 @@
+export const isInvalidDate = (parsedDate: Date): boolean =>
+  parsedDate.toString() === "Invalid Date"

package/src/Calendar/utils/isSelectingDayInCalendar.spec.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { CalendarSingle } from "../CalendarSingle"
+import { isSelectingDayInCalendar } from "./isSelectingDayInCalendar"
+
+describe("isSelectingDayInCalendar", () => {
+  it("returns true when target is a Calendar day", () => {
+    render(<CalendarSingle defaultMonth={new Date("2022-02-01")} />)
+    const calendarDayElement = screen.getByRole("button", {
+      name: "1st February (Tuesday)",
+    })
+    expect(isSelectingDayInCalendar(calendarDayElement)).toBe(true)
+  })
+
+  it("returns false when target is not a Calendar day", () => {
+    render(<CalendarSingle defaultMonth={new Date("2022-02-01")} />)
+    const notDayElement = screen.getByText("February 2022")
+    expect(isSelectingDayInCalendar(notDayElement)).toBe(false)
+  })
+})

package/src/Calendar/utils/isSelectingDayInCalendar.ts

@@ -0,0 +1,5 @@
+import calendarStyles from "../baseCalendarClassNames.module.scss"
+
+export const isSelectingDayInCalendar = (
+  target: (EventTarget & Element) | null
+): boolean => target?.classList?.contains(calendarStyles.day) ?? false

package/src/Calendar/utils/isValidWeekStartsOn.ts

@@ -0,0 +1,7 @@
+import { DayPickerProps } from "react-day-picker"
+import { DayOfWeek } from "../enums"
+
+export const isValidWeekStartsOn = (
+  day: DayOfWeek | undefined
+): day is DayPickerProps["weekStartsOn"] =>
+  [0, 1, 2, 3, 4, 5, 6, undefined].includes(day)

package/src/Calendar/utils/parseDateAsTextOrNumeral.spec.ts

@@ -0,0 +1,29 @@
+import { enAU } from "date-fns/locale"
+import { parseDateAsTextOrNumeral } from "./parseDateAsTextOrNumeral"
+
+describe("parseDateAsTextOrNumeral()", () => {
+  describe("given a text date", () => {
+    it("returns a valid date", () => {
+      const parsedDate = parseDateAsTextOrNumeral("1 May 2025", enAU)
+      expect(parsedDate.toString()).toEqual(
+        "Thu May 01 2025 00:00:00 GMT+0000 (Coordinated Universal Time)"
+      )
+    })
+  })
+
+  describe("given a numeral date", () => {
+    it("returns a valid date", () => {
+      const parsedDate = parseDateAsTextOrNumeral("1/5/2025", enAU)
+      expect(parsedDate.toString()).toEqual(
+        "Thu May 01 2025 00:00:00 GMT+0000 (Coordinated Universal Time)"
+      )
+    })
+  })
+
+  describe("given a non date string", () => {
+    it("returns an invalid date", () => {
+      const parsedDate = parseDateAsTextOrNumeral("🥔", enAU)
+      expect(parsedDate.toString()).toEqual("Invalid Date")
+    })
+  })
+})

package/src/Calendar/utils/parseDateAsTextOrNumeral.ts

@@ -0,0 +1,12 @@
+import { parseDateFromNumeralFormatValue } from "./parseDateFromNumeralFormatValue"
+import { parseDateFromTextFormatValue } from "./parseDateFromTextFormatValue"
+
+export const parseDateAsTextOrNumeral = (
+  value: string,
+  locale: Locale
+): Date => {
+  const parsedAsText = parseDateFromTextFormatValue(value, locale)
+  if (parsedAsText.toString() !== "Invalid Date") return parsedAsText
+
+  return parseDateFromNumeralFormatValue(value, locale)
+}

package/src/Calendar/utils/parseDateFromNumeralFormatValue.spec.tsx

@@ -0,0 +1,26 @@
+import { enUS, enAU } from "date-fns/locale"
+import { parseDateFromNumeralFormatValue } from "./parseDateFromNumeralFormatValue"
+
+describe("parseDateFromNumeralFormatValue", () => {
+  it("parses invalid date as error message", () => {
+    expect(parseDateFromNumeralFormatValue("potato", enUS).toString()).toEqual(
+      "Invalid Date"
+    )
+  })
+
+  describe("localisation - en-AU", () => {
+    it("parses valid date in en-AU text format", () => {
+      expect(parseDateFromNumeralFormatValue("15/01/2022", enAU)).toEqual(
+        new Date("2022-01-15")
+      )
+    })
+  })
+
+  describe("localisation - en-US", () => {
+    it("parses valid date in en-US text format", () => {
+      expect(parseDateFromNumeralFormatValue("01/15/2022", enUS)).toEqual(
+        new Date("2022-01-15")
+      )
+    })
+  })
+})

package/src/Calendar/utils/parseDateFromNumeralFormatValue.ts

@@ -0,0 +1,10 @@
+import { parse } from "date-fns"
+import { DateFormat } from "../enums"
+
+export const parseDateFromNumeralFormatValue = (
+  value: string,
+  locale: Locale
+): Date =>
+  parse(value, DateFormat.Numeral, new Date(), {
+    locale,
+  })

package/src/Calendar/utils/parseDateFromTextFormatValue.spec.ts

@@ -0,0 +1,32 @@
+import { enUS, enAU } from "date-fns/locale"
+import { parseDateFromTextFormatValue } from "./parseDateFromTextFormatValue"
+
+describe("parseDateFromTextFormatValue", () => {
+  it("parses empty string as error string", () => {
+    expect(parseDateFromTextFormatValue("", enUS).toString()).toEqual(
+      "Invalid Date"
+    )
+  })
+
+  it("parses invalid date as error string", () => {
+    expect(parseDateFromTextFormatValue("potato", enUS).toString()).toEqual(
+      "Invalid Date"
+    )
+  })
+
+  describe("localisation - en-AU", () => {
+    it("parses valid date in en-AU text format", () => {
+      expect(parseDateFromTextFormatValue("15 Jan 2022", enAU)).toEqual(
+        new Date("2022-01-15")
+      )
+    })
+  })
+
+  describe("localisation - en-US", () => {
+    it("parses valid date in en-US text format", () => {
+      expect(parseDateFromTextFormatValue("Jan 15, 2022", enUS)).toEqual(
+        new Date("2022-01-15")
+      )
+    })
+  })
+})

package/src/Calendar/utils/parseDateFromTextFormatValue.ts

@@ -0,0 +1,10 @@
+import { parse } from "date-fns"
+import { DateFormat } from "../enums"
+
+export const parseDateFromTextFormatValue = (
+  value: string,
+  locale: Locale
+): Date =>
+  parse(value, DateFormat.Text, new Date(), {
+    locale,
+  })

package/src/Calendar/utils/setFocusInCalendar.spec.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { format } from "date-fns"
+import { enUS } from "date-fns/locale"
+import { CalendarSingle, CalendarSingleProps } from "../CalendarSingle"
+import { setFocusInCalendar } from "./setFocusInCalendar"
+
+const CalendarWrapper = (props: Partial<CalendarSingleProps>): JSX.Element => (
+  <CalendarSingle
+    id="calendar-dialog"
+    onDayClick={jest.fn<void, [Date]>()}
+    locale={enUS}
+    onMount={(calendarElement): void =>
+      setFocusInCalendar(calendarElement, props.selected)
+    }
+    {...props}
+  />
+)
+
+const today = new Date()
+const todayFormatted = format(today, "do MMMM (eeee)") // e.g 6th June (Monday)
+
+describe("setFocusInCalendar", () => {
+  it("should focus on today when no date is selected", () => {
+    render(<CalendarWrapper />)
+
+    const dayToFocus = screen.getByRole("button", { name: todayFormatted })
+    expect(dayToFocus).toHaveFocus()
+  })
+
+  it("should focus on the selected day", () => {
+    render(<CalendarWrapper selected={new Date("2022-08-15")} />)
+
+    const dayToFocus = screen.getByRole("button", {
+      name: "15th August (Monday)",
+    })
+    expect(dayToFocus).toHaveFocus()
+  })
+
+  it("should focus on today when selected date is invalid", () => {
+    render(<CalendarWrapper selected={new Date("potato")} />)
+
+    const dayToFocus = screen.getByRole("button", { name: todayFormatted })
+    expect(dayToFocus).toHaveFocus()
+  })
+
+  it("should focus on the first of the month when there is no selected day nor in the current month", () => {
+    render(<CalendarWrapper defaultMonth={new Date("2022-05-01")} />)
+
+    const dayToFocus = screen.getByRole("button", {
+      name: "1st May (Sunday)",
+    })
+    expect(dayToFocus).toHaveFocus()
+  })
+})

package/src/Calendar/utils/setFocusInCalendar.ts

@@ -0,0 +1,24 @@
+import { CalendarRangeElement } from "../CalendarRange"
+import { CalendarSingleElement } from "../CalendarSingle"
+import calendarStyles from "../baseCalendarClassNames.module.scss"
+import { isInvalidDate } from "./isInvalidDate"
+
+const isHTMLElement = (element: Element | undefined): element is HTMLElement =>
+  element instanceof HTMLElement
+
+export const setFocusInCalendar = (
+  calendarElement: CalendarSingleElement | CalendarRangeElement,
+  selectedDay: Date | undefined
+): void => {
+  const daySelectedOrToday = calendarElement.getElementsByClassName(
+    selectedDay && !isInvalidDate(selectedDay)
+      ? calendarStyles.daySelected
+      : calendarStyles.dayToday
+  )[0]
+
+  const dayToFocus =
+    daySelectedOrToday ??
+    calendarElement.getElementsByClassName(calendarStyles.day)[0]
+
+  if (isHTMLElement(dayToFocus)) dayToFocus.focus()
+}

package/src/Card/Card.module.scss

@@ -0,0 +1,38 @@
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+
+.wrapper {
+  color: $color-purple-800;
+  background-color: $color-white;
+  border-radius: $border-borderless-border-radius;
+  box-shadow: $shadow-small-box-shadow;
+}
+
+.informative {
+  background-color: $color-blue-100;
+}
+
+.positive {
+  background-color: $color-green-100;
+}
+
+.cautionary {
+  background-color: $color-yellow-100;
+}
+
+.destructive {
+  background-color: $color-red-100;
+}
+
+.assertive {
+  background-color: $color-orange-100;
+}
+
+.highlight {
+  background-color: $color-purple-100;
+}
+
+.elevated {
+  box-shadow: $shadow-large-box-shadow;
+}