reso-ui 1.1.0

package/src/components/Date-Selector/components/Date-Day-Number/__test__/Date-Day-Number.test.tsx

@@ -0,0 +1,201 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { DateDayNumberComponent } from "@components/Date-Selector/components/Date-Day-Number/Date-Day-Number";
+
+describe("Date Selector Day Number Component Unit Tests", () => {
+  test("should render itself without error", () => {
+    const { debug } = render(<DateDayNumberComponent dayNumber={1} />);
+
+    // debug();
+    const component = screen.queryByTestId("date-day-number-root");
+    expect(component).toBeInTheDocument();
+    expect(component).toHaveTextContent("1");
+  });
+
+  test("should render itself with custom dayNumberDisplay if provided as prop", () => {
+    const { debug } = render(
+      <DateDayNumberComponent dayNumber={1} dayNumberDisplay={"One"} />
+    );
+
+    // debug();
+    const component = screen.queryByTestId("date-day-number-root");
+    expect(component).toBeInTheDocument();
+    expect(component).toHaveTextContent("One");
+  });
+
+  test("should apply default root classNames", () => {
+    const { debug } = render(<DateDayNumberComponent dayNumber={1} />);
+
+    // debug();
+    const component = screen.queryByTestId("date-day-number-root");
+    expect(component).toHaveClass("date_selector_grid_unit");
+    expect(component).toHaveClass("date_day_number_container");
+  });
+
+  test("should apply root theme classNames when provided as prop", () => {
+    const { debug } = render(
+      <DateDayNumberComponent dayNumber={1} theme="dark" />
+    );
+
+    // debug();
+    const component = screen.queryByTestId("date-day-number-root");
+    expect(component).toHaveClass("date_day_number_theme_dark");
+  });
+
+  test("should apply custom root className when provided as prop", () => {
+    const { debug } = render(
+      <DateDayNumberComponent
+        dayNumber={1}
+        rootClassName="sample_date_day_number_className"
+      />
+    );
+
+    // debug();
+    const component = screen.queryByTestId("date-day-number-root");
+    // default
+    expect(component).toHaveClass("date_selector_grid_unit");
+    expect(component).toHaveClass("date_day_number_container");
+    // custom
+    expect(component).toHaveClass("sample_date_day_number_className");
+  });
+
+  describe("isSelected", () => {
+    test("should apply default classNames when [isSelected] prop is true", () => {
+      const { debug } = render(
+        <DateDayNumberComponent dayNumber={1} isSelected={true} />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-day-number-root");
+      // default
+      expect(component).toHaveClass("date_selector_grid_unit");
+      expect(component).toHaveClass("date_day_number_container");
+      // selected
+      expect(component).toHaveClass("date_day_number_selected_theme_light");
+    });
+
+    test("should apply default className but not selected classNames when [isSelected] prop is false", () => {
+      const { debug } = render(
+        <DateDayNumberComponent dayNumber={1} isSelected={false} />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-day-number-root");
+      // default
+      expect(component).toHaveClass("date_selector_grid_unit");
+      expect(component).toHaveClass("date_day_number_container");
+      // selected
+      expect(component).not.toHaveClass("date_day_number_selected_theme_light");
+    });
+
+    test("should apply custom selected className when provided as prop", () => {
+      const { debug } = render(
+        <DateDayNumberComponent
+          dayNumber={1}
+          isSelected={true}
+          selectedClassName="sample_date_day_number_selected_className"
+        />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-day-number-root");
+      // default
+      expect(component).toHaveClass("date_day_number_selected_theme_light");
+      // custom
+      expect(component).toHaveClass(
+        "sample_date_day_number_selected_className"
+      );
+    });
+
+    test("should apply custom selected styles when provided as prop", () => {
+      render(
+        <DateDayNumberComponent
+          dayNumber={1}
+          isSelected={true}
+          selectedStyles={{ border: "2px solid red" }}
+        />
+      );
+
+      const component = screen.queryByTestId("date-day-number-root");
+      expect(component).toHaveStyle("border: 2px solid red");
+    });
+
+    test("should not apply custom selected styles when disabled", () => {
+      render(
+        <DateDayNumberComponent
+          dayNumber={1}
+          isSelected={true}
+          selectedStyles={{ border: "2px solid red" }}
+          disabled
+        />
+      );
+
+      const component = screen.queryByTestId("date-day-number-root");
+      expect(component).not.toHaveStyle("border: 2px solid red");
+    });
+  });
+
+  describe("Today Marker", () => {
+    test("should render if [isToday] prop is true", () => {
+      const { debug } = render(
+        <DateDayNumberComponent dayNumber={1} isToday />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-day-number-today");
+      expect(component).toBeInTheDocument();
+      expect(component).toHaveTextContent("1");
+    });
+
+    test("should apply default marker classNames", () => {
+      const { debug } = render(
+        <DateDayNumberComponent dayNumber={1} isToday />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-day-number-today");
+      expect(component).toHaveClass("date_day_number_today_marker");
+    });
+
+    test("should apply marker theme className when provided as prop", () => {
+      const { debug } = render(
+        <DateDayNumberComponent dayNumber={1} theme="dark" isToday />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-day-number-today");
+      expect(component).toHaveClass("date_day_number_today_theme_dark");
+    });
+
+    test("should apply custom marker className with default classNames when provided as prop", () => {
+      const { debug } = render(
+        <DateDayNumberComponent
+          dayNumber={1}
+          markerClassName="sample_date_day_number_marker_className"
+          isToday
+        />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-day-number-today");
+      // default
+      expect(component).toHaveClass("date_day_number_today_marker");
+      expect(component).toHaveClass("date_day_number_today_theme_light");
+      // custom
+      expect(component).toHaveClass("sample_date_day_number_marker_className");
+    });
+
+    test("should apply custom marker styles when provided as prop", () => {
+      render(
+        <DateDayNumberComponent
+          dayNumber={1}
+          isToday
+          markerStyles={{ border: "2px solid red" }}
+        />
+      );
+
+      const component = screen.queryByTestId("date-day-number-today");
+      expect(component).toHaveStyle("border: 2px solid red");
+    });
+  });
+});

package/src/components/Date-Selector/components/Date-Day-Number/styles/Date-Day-Number.layout.scss

@@ -0,0 +1,22 @@
+.date_day_number_container {
+  // border-width: 1px;
+  // border-style: solid;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.date_day_number_today_marker {
+  border-radius: 90%;
+
+  width: 20px;
+  height: 20px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  margin: auto;
+}

package/src/components/Date-Selector/components/Date-Day-Number/styles/Date-Day-Number.theme.scss

@@ -0,0 +1,15 @@
+.date_day_number_theme_light {
+  @include use_theme(unset, "light");
+  border-color: $primary-grey-medium;
+  &:hover {
+    background-color: $primary-grey-medium-light;
+  }
+}
+
+.date_day_number_selected_theme_light {
+  @include use_theme($primary-blue, "dark");
+}
+
+.date_day_number_today_theme_light {
+  @include use_theme($primary-red, "dark");
+}

package/src/components/Date-Selector/components/Date-Days-Grid/Date-Days-Grid.tsx

@@ -0,0 +1,300 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+import {
+  DateDayNameIndex,
+  DateDayNumber,
+} from "@components/Date-Selector/types";
+
+// !! IMPORT OTHER COMPONENTS FIRST BEFORE IMPORTING STYLE FILES
+import { DateDayName } from "../Date-Day-Name/Date-Day-Name";
+import { DateDayNumberComponent } from "../Date-Day-Number/Date-Day-Number";
+
+// styles
+import "./styles/Date-Days-Grid.layout.scss";
+import "./styles/Date-Days-Grid.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+} from "@utils/styles";
+import { methodHasValue } from "@utils/validations";
+import {
+  destructureDateComponents,
+  getDayDisplayNamesDefault,
+} from "@components/Date-Selector/utils";
+import { getArrayFor } from "@utils/arrays";
+
+export interface IDateDaysGridProps extends IComponent, IThemeProps {
+  monthStartDay: number;
+  monthNumberOfDays: number;
+  prevMonthDays: number;
+  today: Date;
+  selectedYear: number;
+  selectedMonth: number;
+  value?: Date;
+  minimumDate?: Date;
+  maximumDate?: Date;
+  onClickDay?: (newDateObj: Date) => void;
+  getDisplayDayNumber?: (day: DateDayNumber) => DateDayNumber | string;
+  getDisplayDayName?: (day: DateDayNameIndex) => string; // 0 is monday, 6 is sunday
+}
+
+export const DateDaysGrid = ({
+  monthStartDay,
+  monthNumberOfDays,
+  prevMonthDays,
+  today,
+  value,
+  selectedYear,
+  selectedMonth,
+  minimumDate,
+  maximumDate,
+  onClickDay,
+  getDisplayDayName,
+  getDisplayDayNumber,
+  rootClassName,
+  rootStyles = {},
+  theme = "light",
+}: IDateDaysGridProps) => {
+  const COLUMNS = 7;
+  const ROWS = 6;
+  const gridTemplateColumns = `repeat(${String(COLUMNS)}, 1fr)`;
+
+  const isToday = (): number | null => {
+    const {
+      year: todayYear,
+      month: todayMonth,
+      date: todayDate,
+    } = destructureDateComponents(today);
+    if (todayYear === selectedYear && todayMonth === selectedMonth) {
+      return todayDate;
+    }
+
+    return null;
+  };
+
+  const isSelected = (day: DateDayNumber): boolean => {
+    if (value === null || typeof value === "undefined") {
+      return false;
+    }
+    const {
+      year: valueYear,
+      month: valueMonth,
+      date: valueDate,
+    } = destructureDateComponents(value);
+
+    return (
+      valueYear === selectedYear &&
+      valueMonth === selectedMonth &&
+      valueDate === day
+    );
+  };
+
+  const isLessThanMinimum = (d: DateDayNumber): boolean => {
+    if (minimumDate === null || typeof minimumDate === "undefined") {
+      return false;
+    }
+    const {
+      year: minYear,
+      month: minMonth,
+      date: minDate,
+    } = destructureDateComponents(minimumDate);
+    if (selectedYear < minYear || selectedMonth < minMonth) {
+      return true;
+    }
+
+    return (
+      selectedYear === minYear && selectedMonth === minMonth && d < minDate
+    );
+  };
+
+  const isMoreThanMaximum = (d: DateDayNumber): boolean => {
+    if (maximumDate === null || typeof maximumDate === "undefined") {
+      return false;
+    }
+    const {
+      year: maxYear,
+      month: maxMonth,
+      date: maxDate,
+    } = destructureDateComponents(maximumDate);
+    if (selectedYear > maxYear || selectedMonth > maxMonth) {
+      return true;
+    }
+
+    return (
+      selectedYear === maxYear && selectedMonth === maxMonth && d > maxDate
+    );
+  };
+
+  const renderNormalDay = (key: any, dayNumber: DateDayNumber) => {
+    return (
+      <DateDayNumberComponent
+        theme={theme}
+        key={key}
+        dayNumber={dayNumber}
+        dayNumberDisplay={
+          methodHasValue(getDisplayDayNumber)
+            ? getDisplayDayNumber(dayNumber)
+            : dayNumber
+        }
+        isToday={isToday() === dayNumber}
+        onClick={(d) => {
+          onClickDay(new Date(selectedYear, selectedMonth, d));
+        }}
+        isSelected={isSelected(dayNumber)}
+        // for future refence :
+        // selectedClassName="custom_selected_className"
+        // todayClassName="custom_today_className"
+      />
+    );
+  };
+
+  const renderDisabledDay = (
+    key: any,
+    dayNumber: DateDayNumber,
+    nextOrPrevMonth = false
+  ) => {
+    return (
+      <DateDayNumberComponent
+        theme={theme}
+        key={key}
+        dayNumber={dayNumber}
+        dayNumberDisplay={
+          methodHasValue(getDisplayDayNumber)
+            ? getDisplayDayNumber(dayNumber)
+            : dayNumber
+        }
+        disabled
+        isToday={!nextOrPrevMonth && isToday() === dayNumber}
+      />
+    );
+  };
+
+  const isFirstRow = (row: number): boolean => {
+    return row === 0;
+  };
+
+  const columnIsBeforeMonthStartDay = (col: number): boolean => {
+    return col < monthStartDay;
+  };
+
+  const populatedAllMonthDays = (count: number): boolean => {
+    return count > monthNumberOfDays - 1;
+  };
+
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        date_days_grid_container: true,
+      },
+      rootClassName,
+      {
+        no_select: true,
+      }
+    ),
+    createThemeStyles(`date_days_grid_theme_`, theme)
+  );
+
+  let dayCount = 0;
+  let nextMonthDayCount = 0;
+  // because monthStartDay is inclusive, so dont need to deduct 1
+  const firstRowDays = COLUMNS - monthStartDay + 1;
+  let prevMonthPadding = COLUMNS - firstRowDays;
+
+  return (
+    <div
+      className={containerStyles}
+      style={{
+        gridTemplateColumns,
+        ...rootStyles,
+      }}
+      data-testid="date-selector-grid-root"
+    >
+      {getDayDisplayNamesDefault().map((day, key) => {
+        return (
+          <DateDayName key={key} theme={theme}>
+            {methodHasValue(getDisplayDayName)
+              ? getDisplayDayName(key as DateDayNameIndex)
+              : day}
+          </DateDayName>
+        );
+      })}
+      {getArrayFor(ROWS).map((dayRow, rowKey) => {
+        const result = [];
+        getArrayFor(COLUMNS).forEach((dayCol, colKey) => {
+          if (isFirstRow(rowKey)) {
+            if (columnIsBeforeMonthStartDay(colKey)) {
+              const d = prevMonthDays - prevMonthPadding;
+              result.push(
+                renderDisabledDay(
+                  `${dayRow}-${dayCol}`,
+                  d as DateDayNumber,
+                  true
+                )
+              );
+              prevMonthPadding--;
+            } else {
+              dayCount++;
+              if (
+                isLessThanMinimum(dayCount as DateDayNumber) ||
+                isMoreThanMaximum(dayCount as DateDayNumber)
+              ) {
+                result.push(
+                  renderDisabledDay(
+                    `${dayRow}-${dayCol}`,
+                    dayCount as DateDayNumber
+                  )
+                );
+              } else {
+                result.push(
+                  renderNormalDay(
+                    `${dayRow}-${dayCol}`,
+                    dayCount as DateDayNumber
+                  )
+                );
+              }
+            }
+          } else if (populatedAllMonthDays(dayCount)) {
+            nextMonthDayCount++;
+            result.push(
+              renderDisabledDay(
+                `${dayRow}-${dayCol}`,
+                nextMonthDayCount as DateDayNumber,
+                true
+              )
+            );
+          }
+          // all the other month days
+          else {
+            dayCount++;
+            if (
+              isLessThanMinimum(dayCount as DateDayNumber) ||
+              isMoreThanMaximum(dayCount as DateDayNumber)
+            ) {
+              result.push(
+                renderDisabledDay(
+                  `${dayRow}-${dayCol}`,
+                  dayCount as DateDayNumber
+                )
+              );
+            } else {
+              result.push(
+                renderNormalDay(
+                  `${dayRow}-${dayCol}`,
+                  dayCount as DateDayNumber
+                )
+              );
+            }
+          }
+        });
+
+        return result;
+      })}
+    </div>
+  );
+};