reso-ui 1.1.0

package/src/components/Date-Selector/components/Date-Component-Navigation/__test__/Date-Component-Navigation.test.tsx

@@ -0,0 +1,297 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { DateComponentNavigation } from "@components/Date-Selector/components/Date-Component-Navigation/Date-Component-Navigation";
+
+describe("Date Component Navigation Component Unit Tests", () => {
+  test("should render itself without error", () => {
+    const { debug } = render(<DateComponentNavigation value="sample" />);
+
+    // debug();
+    const component = screen.queryByTestId("date-selector-nav-root");
+    expect(component).toBeInTheDocument();
+  });
+
+  test("should apply default root className", () => {
+    const { debug } = render(<DateComponentNavigation value="sample" />);
+
+    // debug();
+    const component = screen.queryByTestId("date-selector-nav-root");
+    expect(component).toHaveClass("date_component_navigation_container");
+  });
+
+  test("should apply custom root className when provided as prop", () => {
+    const { debug } = render(
+      <DateComponentNavigation
+        value="sample"
+        rootClassName="sample_date_selector_nav_root_className"
+      />
+    );
+
+    // debug();
+    const component = screen.queryByTestId("date-selector-nav-root");
+    expect(component).toHaveClass("sample_date_selector_nav_root_className");
+  });
+
+  test("should apply custom root styles when provided as prop", () => {
+    render(
+      <DateComponentNavigation
+        value="test"
+        rootStyles={{ border: "2px solid red" }}
+      />
+    );
+
+    const component = screen.queryByTestId("date-selector-nav-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should apply root theme classNames when provided as prop", () => {
+    const { debug } = render(
+      <DateComponentNavigation value="sample" theme="dark" />
+    );
+
+    // debug();
+    const component = screen.queryByTestId("date-selector-nav-root");
+    expect(component).toHaveClass(
+      "date_component_navigation_container_theme_dark"
+    );
+  });
+
+  describe("Previous Button", () => {
+    test("should apply default previous button className", () => {
+      const { debug } = render(<DateComponentNavigation value="sample" />);
+
+      // debug();
+      const component = screen.queryByTestId("date-selector-nav-btn-prev");
+      expect(component).toHaveClass("date_component_navigation_button");
+    });
+
+    test("should apply custom previous button className when provided as prop", () => {
+      const { debug } = render(
+        <DateComponentNavigation
+          value="sample"
+          previousBtnClassName="sample_date_selector_prev_btn_className"
+        />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-selector-nav-btn-prev");
+      expect(component).toHaveClass("sample_date_selector_prev_btn_className");
+    });
+
+    test("should apply previous theme classNames when provided as prop", () => {
+      const { debug } = render(
+        <DateComponentNavigation value="sample" theme="dark" />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-selector-nav-btn-prev");
+      expect(component).toHaveClass(
+        "date_component_navigation_button_theme_dark"
+      );
+    });
+
+    test("should apply custom previous button styles when provided as prop", () => {
+      render(
+        <DateComponentNavigation
+          value="test"
+          previousBtnStyles={{ border: "2px solid red" }}
+        />
+      );
+
+      const component = screen.queryByTestId("date-selector-nav-btn-prev");
+      expect(component).toHaveStyle("border: 2px solid red");
+    });
+
+    test("should call onClickPrevious when clicked previous button", () => {
+      const onClickSpy = jest.fn();
+      const { debug } = render(
+        <DateComponentNavigation value="sample" onClickPrevious={onClickSpy} />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-selector-nav-btn-prev");
+      component.click();
+      expect(onClickSpy).toHaveBeenCalled();
+    });
+
+    test("should not call onClickPrevious when clicked previous button and previous button is disabled", () => {
+      const onClickSpy = jest.fn();
+      const { debug } = render(
+        <DateComponentNavigation
+          value="sample"
+          onClickPrevious={onClickSpy}
+          disablePrevious
+        />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-selector-nav-btn-prev");
+      component.click();
+      expect(onClickSpy).not.toHaveBeenCalled();
+    });
+
+    test("should render custom previous component when provided as prop", () => {
+      const CustomPrevComponent = () => {
+        return <div data-testid="date-selector-nav-custom-prev">Prev</div>;
+      };
+      const { debug } = render(
+        <DateComponentNavigation
+          value="sample"
+          customPreviousComponent={CustomPrevComponent}
+        />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-selector-nav-btn-prev");
+      expect(component).toBeInTheDocument();
+
+      const customComponent = screen.queryByTestId(
+        "date-selector-nav-custom-prev"
+      );
+      expect(customComponent).toBeInTheDocument();
+    });
+  });
+
+  describe("Next Button", () => {
+    test("should apply default next button className", () => {
+      const { debug } = render(<DateComponentNavigation value="sample" />);
+
+      // debug();
+      const component = screen.queryByTestId("date-selector-nav-btn-next");
+      expect(component).toHaveClass("date_component_navigation_button");
+    });
+
+    test("should apply custom next button className when provided as prop", () => {
+      const { debug } = render(
+        <DateComponentNavigation
+          value="sample"
+          nextBtnClassName="sample_date_selector_next_btn_className"
+        />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-selector-nav-btn-next");
+      expect(component).toHaveClass("sample_date_selector_next_btn_className");
+    });
+
+    test("should apply next theme classNames when provided as prop", () => {
+      const { debug } = render(
+        <DateComponentNavigation value="sample" theme="dark" />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-selector-nav-btn-next");
+      expect(component).toHaveClass(
+        "date_component_navigation_button_theme_dark"
+      );
+    });
+
+    test("should apply custom next button styles when provided as prop", () => {
+      render(
+        <DateComponentNavigation
+          value="test"
+          nextBtnStyles={{ border: "2px solid red" }}
+        />
+      );
+
+      const component = screen.queryByTestId("date-selector-nav-btn-next");
+      expect(component).toHaveStyle("border: 2px solid red");
+    });
+
+    test("should call onClickNext when clicked next button", () => {
+      const onClickSpy = jest.fn();
+      const { debug } = render(
+        <DateComponentNavigation value="sample" onClickNext={onClickSpy} />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-selector-nav-btn-next");
+      component.click();
+      expect(onClickSpy).toHaveBeenCalled();
+    });
+
+    test("should not call onClickNext when clicked next button and next button is disabled", () => {
+      const onClickSpy = jest.fn();
+      const { debug } = render(
+        <DateComponentNavigation
+          value="sample"
+          onClickNext={onClickSpy}
+          disableNext
+        />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-selector-nav-btn-next");
+      component.click();
+      expect(onClickSpy).not.toHaveBeenCalled();
+    });
+
+    test("should render custom next component when provided as prop", () => {
+      const CustomNextComponent = () => {
+        return <div data-testid="date-selector-nav-custom-next">Next</div>;
+      };
+      const { debug } = render(
+        <DateComponentNavigation
+          value="sample"
+          customNextComponent={CustomNextComponent}
+        />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-selector-nav-btn-next");
+      expect(component).toBeInTheDocument();
+
+      const customComponent = screen.queryByTestId(
+        "date-selector-nav-custom-next"
+      );
+      expect(customComponent).toBeInTheDocument();
+    });
+  });
+
+  describe("Value Text", () => {
+    test("should apply default next button className", () => {
+      const { debug } = render(<DateComponentNavigation value="sample" />);
+
+      // debug();
+      const component = screen.queryByTestId("date-selector-nav-text");
+      expect(component).toHaveClass("date_component_navigation_text");
+    });
+
+    test("should apply custom next button className when provided as prop", () => {
+      const { debug } = render(
+        <DateComponentNavigation
+          value="sample"
+          textClassName="sample_date_selector_nav_text_className"
+        />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-selector-nav-text");
+      expect(component).toHaveClass("sample_date_selector_nav_text_className");
+    });
+
+    test("should apply custom next button styles when provided as prop", () => {
+      render(
+        <DateComponentNavigation
+          value="test"
+          textStyles={{ border: "2px solid red" }}
+        />
+      );
+
+      const component = screen.queryByTestId("date-selector-nav-text");
+      expect(component).toHaveStyle("border: 2px solid red");
+    });
+
+    test("should apply text theme classNames when provided as prop", () => {
+      const { debug } = render(
+        <DateComponentNavigation value="sample" theme="dark" />
+      );
+
+      // debug();
+      const component = screen.queryByTestId("date-selector-nav-text");
+      expect(component).toHaveClass(
+        "date_component_navigation_text_theme_dark"
+      );
+    });
+  });
+});

package/src/components/Date-Selector/components/Date-Component-Navigation/styles/Date-Component-Navigation.layout.scss

@@ -0,0 +1,26 @@
+.date_component_navigation_container {
+  //   border: 1px solid blue;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: auto;
+  margin-bottom: $margin-xxsmall;
+}
+
+.date_component_navigation_button {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 100%;
+  max-width: 42px;
+  min-width: 32px;
+  max-height: 42px;
+  min-height: 32px;
+  text-align: center;
+  cursor: pointer;
+  font-size: $font-size-3;
+}
+
+.date_component_navigation_text {
+  font-size: $font-size-3;
+}

package/src/components/Date-Selector/components/Date-Component-Navigation/styles/Date-Component-Navigation.theme.scss

@@ -0,0 +1,12 @@
+.date_component_navigation_container_theme_light {
+  @include use_theme(unset, "light");
+}
+
+.date_component_navigation_button_theme_light {
+  @include use_theme(unset, "light");
+  border-color: $primary-grey-dark;
+}
+
+.date_component_navigation_text_theme_light {
+  @include use_theme(unset, "light");
+}

package/src/components/Date-Selector/components/Date-Day-Name/Date-Day-Name.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+} from "@utils/styles";
+
+// styles
+import "./styles/Date-Day-Name.layout.scss";
+import "./styles/Date-Day-Name.theme.scss";
+import "../../styles/Date-Selector.shared.scss";
+
+export interface IDateDayNameProps extends IComponent, IThemeProps {
+  children: React.ReactNode;
+}
+
+export const DateDayName = ({
+  children,
+  rootClassName,
+  rootStyles = {},
+  theme = "light",
+}: IDateDayNameProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        date_selector_grid_unit: true,
+        date_day_name_container: true,
+      },
+      rootClassName,
+      {
+        no_select: true,
+      }
+    ),
+    createThemeStyles(`date_day_name_theme_`, theme)
+  );
+
+  return (
+    <div
+      data-testid="date-day-name-root"
+      className={containerStyles}
+      style={rootStyles}
+    >
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,52 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { DateDayName } from "@components/Date-Selector/components/Date-Day-Name/Date-Day-Name";
+
+describe("Date Selector Day Name Component Unit Tests", () => {
+  test("should render itself without error", () => {
+    const { debug } = render(<DateDayName>Sat</DateDayName>);
+
+    // debug();
+    const component = screen.queryByTestId("date-day-name-root");
+    expect(component).toBeInTheDocument();
+    expect(component).toHaveTextContent("Sat");
+  });
+
+  test("should apply default classNames", () => {
+    const { debug } = render(<DateDayName>Sat</DateDayName>);
+
+    // debug();
+    const component = screen.queryByTestId("date-day-name-root");
+    expect(component).toHaveClass("date_selector_grid_unit");
+    expect(component).toHaveClass("date_day_name_container");
+  });
+
+  test("should apply theme className when provided as prop", () => {
+    const { debug } = render(<DateDayName theme="dark">Sat</DateDayName>);
+
+    // debug();
+    const component = screen.queryByTestId("date-day-name-root");
+    expect(component).toHaveClass("date_day_name_theme_dark");
+  });
+
+  test("should apply custom className when provided as prop", () => {
+    const { debug } = render(
+      <DateDayName rootClassName="sample_date_date_name_className">
+        Sat
+      </DateDayName>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("date-day-name-root");
+    expect(component).toHaveClass("sample_date_date_name_className");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    render(
+      <DateDayName rootStyles={{ border: "2px solid red" }}>Sat</DateDayName>
+    );
+
+    const component = screen.queryByTestId("date-day-name-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+});

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

@@ -0,0 +1,5 @@
+.date_day_name_container {
+  font-size: $font-size-1;
+  border-width: 1px;
+  // border-style: solid;
+}

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

@@ -0,0 +1,4 @@
+.date_day_name_theme_light {
+  @include use_theme(unset, "light");
+  border-color: $primary-grey-medium;
+}

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

@@ -0,0 +1,119 @@
+import React from "react";
+import classnames from "classnames";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+} from "@utils/styles";
+
+// styles
+import "./styles/Date-Day-Number.layout.scss";
+import "./styles/Date-Day-Number.theme.scss";
+import "../../styles/Date-Selector.shared.scss";
+
+import { hasValue, methodHasValue, objectHasValue } from "@utils/validations";
+import { DateDayNumber } from "@components/Date-Selector/types";
+
+export interface IDateDayNumberComponentProps extends IComponent, IThemeProps {
+  dayNumber: DateDayNumber;
+  dayNumberDisplay?: DateDayNumber | string;
+  isToday?: boolean;
+  isSelected?: boolean;
+  disabled?: boolean;
+  onClick?: (d: DateDayNumber) => void;
+  selectedClassName?: string;
+  selectedStyles?: React.CSSProperties;
+  markerClassName?: string;
+  markerStyles?: React.CSSProperties;
+}
+
+export const DateDayNumberComponent = ({
+  dayNumber,
+  dayNumberDisplay,
+  isToday = false,
+  isSelected = false,
+  disabled = false,
+  onClick,
+  selectedClassName,
+  selectedStyles = {},
+  markerClassName,
+  markerStyles = {},
+  rootClassName,
+  rootStyles = {},
+  theme = "light",
+}: IDateDayNumberComponentProps) => {
+  const containerStyleDefault = createComponentStyles(
+    createLayoutStyles(
+      {
+        date_selector_grid_unit: true,
+        date_day_number_container: true,
+      },
+      rootClassName,
+      {
+        disabled,
+        no_select: true,
+      }
+    ),
+    createThemeStyles(`date_day_number_theme_`, theme)
+  );
+
+  const containerStyleSelected = createComponentStyles(
+    createLayoutStyles({}, selectedClassName),
+    createThemeStyles(`date_day_number_selected_theme_`, theme)
+  );
+
+  const todayMarkerStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        date_day_number_today_marker: true,
+      },
+      markerClassName
+    ),
+    createThemeStyles(`date_day_number_today_theme_`, theme)
+  );
+
+  const containerClasses = classnames(
+    containerStyleDefault,
+    !disabled && isSelected ? containerStyleSelected : {}
+  );
+  const containerStyle = {
+    ...rootStyles,
+    ...(!disabled && isSelected && objectHasValue(selectedStyles)
+      ? selectedStyles
+      : {}),
+  };
+  const dayNumberText = hasValue(dayNumberDisplay)
+    ? dayNumberDisplay
+    : dayNumber;
+
+  return (
+    <div
+      data-testid="date-day-number-root"
+      className={containerClasses}
+      onClick={() => {
+        if (!disabled && methodHasValue(onClick)) {
+          onClick(dayNumber);
+        }
+      }}
+      style={containerStyle}
+    >
+      {isToday ? (
+        <div
+          data-testid="date-day-number-today"
+          className={todayMarkerStyles}
+          style={markerStyles}
+        >
+          {dayNumberText}
+        </div>
+      ) : (
+        dayNumberText
+      )}
+    </div>
+  );
+};