reso-ui 1.1.0

package/src/components/Date-Selector/components/Date-Selector-Header/__test__/Date-Selector-Header.test.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { DateSelectorHeader } from "@components/Date-Selector/components/Date-Selector-Header/Date-Selector-Header";
+
+describe("Date Selector Header Component Unit Tests", () => {
+  test("should render itself without error", () => {
+    const { debug } = render(<DateSelectorHeader text="sample" />);
+
+    // debug();
+    const component = screen.queryByTestId("date-selector-header-root");
+    expect(component).toBeInTheDocument();
+    expect(component).toHaveTextContent("sample");
+  });
+
+  test("should apply default className", () => {
+    const { debug } = render(<DateSelectorHeader text="sample" />);
+
+    // debug();
+    const component = screen.queryByTestId("date-selector-header-root");
+    expect(component).toHaveClass("date_selector_header");
+  });
+
+  test("should apply default and opened classNames when [opened] prop is true", () => {
+    const { debug } = render(
+      <DateSelectorHeader text="sample" opened={true} />
+    );
+
+    // debug();
+    const component = screen.queryByTestId("date-selector-header-root");
+    expect(component).toHaveClass("date_selector_header");
+    expect(component).toHaveClass("date_selector_header_opened");
+  });
+
+  test("should apply default className but not opened classNames when [opened] prop is false", () => {
+    const { debug } = render(
+      <DateSelectorHeader text="sample" opened={false} />
+    );
+
+    // debug();
+    const component = screen.queryByTestId("date-selector-header-root");
+    expect(component).toHaveClass("date_selector_header");
+    expect(component).not.toHaveClass("date_selector_header_opened");
+  });
+
+  test("should apply theme classNames when provided as prop", () => {
+    const { debug } = render(<DateSelectorHeader text="sample" theme="dark" />);
+
+    // debug();
+    const component = screen.queryByTestId("date-selector-header-root");
+    expect(component).toHaveClass("date_selector_header_theme_dark");
+  });
+
+  test("should apply custom className when provided as prop", () => {
+    const { debug } = render(
+      <DateSelectorHeader
+        text="sample"
+        rootClassName="sample_date_selector_header_className"
+      />
+    );
+
+    // debug();
+    const component = screen.queryByTestId("date-selector-header-root");
+    expect(component).toHaveClass("sample_date_selector_header_className");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    render(
+      <DateSelectorHeader
+        text="test"
+        rootStyles={{ border: "2px solid red" }}
+      />
+    );
+
+    const component = screen.queryByTestId("date-selector-header-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should call onClick when clicked", () => {
+    const onClickSpy = jest.fn();
+    const { debug } = render(
+      <DateSelectorHeader text="sample" onClick={onClickSpy} />
+    );
+
+    // debug();
+    const component = screen.queryByTestId("date-selector-header-root");
+    component.click();
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  test("should not call onClick when disabled", () => {
+    const onClickSpy = jest.fn();
+    const { debug } = render(
+      <DateSelectorHeader text="sample" onClick={onClickSpy} disabled />
+    );
+
+    // debug();
+    const component = screen.queryByTestId("date-selector-header-root");
+    component.click();
+    expect(onClickSpy).not.toHaveBeenCalled();
+  });
+});

package/src/components/Date-Selector/components/Date-Selector-Header/styles/Date-Selector-Header.layout.scss

@@ -0,0 +1,27 @@
+.date_selector_header {
+  // layout should follow Form Input
+  height: $input-text-height;
+  font-size: $font-size-3;
+  font-weight: inherit;
+  border-width: 1px;
+  border-style: solid;
+  width: 100%;
+  padding: 0 $padding-small;
+  border-radius: $border-radius-default;
+  //   overflow: visible;
+  //   position: relative;
+
+  text-align: left;
+  cursor: pointer;
+
+  box-shadow: 0px 2px 15px rgba(34, 60, 102, 0.2);
+
+  &:hover {
+    border: 1px solid green;
+  }
+}
+
+.date_selector_header_opened {
+  border-bottom: none;
+  border-radius: $border-radius-default $border-radius-default 0 0;
+}

package/src/components/Date-Selector/components/Date-Selector-Header/styles/Date-Selector-Header.theme.scss

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

package/src/components/Date-Selector/index.ts

@@ -0,0 +1,3 @@
+/* istanbul ignore file */
+import "@styles/global.scss";
+export * from "./Date-Selector";

package/src/components/Date-Selector/stories/Date-Selector.stories.tsx

@@ -0,0 +1,140 @@
+import React, { useState } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { DateSelector, IDateSelectorProps } from "@components/Date-Selector";
+import "./storiesStyle.scss";
+
+import dedent from "ts-dedent";
+import { Flex } from "@components/Containers/Flex";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Form/Controls/Date Selector",
+  component: DateSelector,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A Date Selector component.
+
+            It supports Margin props, except Margin Bottom, which you may or may not adjust to your liking.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof DateSelector>;
+
+const ComponentTemplate: ComponentStory<typeof DateSelector> = (args) => {
+  const storyProps = {
+    value: new Date(),
+    rootStyles: { marginBottom: "280px" },
+    ...args,
+  } as IDateSelectorProps;
+  return <DateSelector {...storyProps} />;
+};
+
+export const Default = ComponentTemplate.bind({});
+Default.args = {};
+
+export const DefaultDisabled = ComponentTemplate.bind({});
+DefaultDisabled.args = { disabled: true };
+
+export const WithCustomRootClassName = ComponentTemplate.bind({});
+WithCustomRootClassName.args = {
+  rootClassName: "date-selector-stories-sample",
+};
+
+export const WithCustomRootStyles = ComponentTemplate.bind({});
+WithCustomRootStyles.args = {
+  rootStyles: {
+    marginBottom: "280px",
+    backgroundColor: "cyan",
+    color: "orange",
+    fontWeight: "bold",
+  },
+};
+
+export const WithCustomGridStyles = ComponentTemplate.bind({});
+WithCustomGridStyles.args = {
+  gridContainerStyles: {
+    marginBottom: "280px",
+    backgroundColor: "cyan",
+    color: "orange",
+  },
+};
+
+export const BindingToParentState = () => {
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+
+  return (
+    <Flex direction="column" align="start">
+      <p>Selected Date: {`${selectedDate}`}</p>
+      <DateSelector
+        value={selectedDate}
+        onChange={(d) => setSelectedDate(d)}
+        rootStyles={{ marginBottom: "280px" }}
+      />
+    </Flex>
+  );
+};
+
+export const CustomDateNumbers = () => {
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+
+  return (
+    <Flex direction="column" align="start">
+      <p>Selected Date: {`${selectedDate}`}</p>
+      <DateSelector
+        value={selectedDate}
+        onChange={(d) => setSelectedDate(d)}
+        rootStyles={{ marginBottom: "280px" }}
+        getDisplayDayNumber={(d) => `X${d}`}
+      />
+    </Flex>
+  );
+};
+
+export const CustomFormatting = () => {
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+
+  return (
+    <Flex direction="column" align="start">
+      <p>Selected Date: {`${selectedDate}`}</p>
+      <DateSelector
+        value={selectedDate}
+        onChange={(d) => setSelectedDate(d)}
+        rootStyles={{ marginBottom: "280px" }}
+        format={(d) => `Selected Date: ${d.toDateString()}`}
+      />
+    </Flex>
+  );
+};
+
+// export const WithCustomContainerStyles = ComponentTemplate.bind({});
+// WithCustomContainerStyles.args = {
+//   rootStyles: {
+//     backgroundColor: "red",
+//   },
+// };
+
+// export const WithCustomLinkClassName = ComponentTemplate.bind({});
+// WithCustomLinkClassName.args = {
+//   linkClassName: "back-stories-sample-link",
+// };
+
+// export const WithCustomLinkStyles = ComponentTemplate.bind({});
+// WithCustomLinkStyles.args = {
+//   linkStyles: {
+//     color: "red",
+//   },
+// };
+
+// export const Disabled = ComponentTemplate.bind({});
+// Disabled.args = {
+//   disabled: true,
+// };

package/src/components/Date-Selector/stories/storiesStyle.scss

@@ -0,0 +1,4 @@
+.date-selector-stories-sample {
+  background-color: yellowgreen;
+  color: red;
+}

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

@@ -0,0 +1,36 @@
+.date_selector_container {
+  // border: 2px solid red;
+  width: 280px;
+  border-radius: $border-radius-default;
+}
+
+.date_selector_container_opened {
+  border-radius: $border-radius-default $border-radius-default 0 0;
+}
+
+.date_selector_grid_container {
+  border-style: solid;
+  border-width: 1px;
+  border-top: none;
+  width: 100%;
+  //   line-height: 32px;
+  border-radius: 0 0 $border-radius-default $border-radius-default;
+  box-shadow: 0px 2px 15px rgba(34, 60, 102, 0.2);
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 5;
+
+  transition: opacity 0.1s ease, height 0.1s ease, padding 0.1s linear;
+  animation-direction: forwards;
+  padding: 0;
+  opacity: 0;
+  height: 0;
+}
+
+.date_selector_grid_container_opened {
+  height: auto;
+  opacity: 1;
+  padding: $padding-xxsmall;
+}

package/src/components/Date-Selector/styles/Date-Selector.shared.scss

@@ -0,0 +1,4 @@
+.date_selector_grid_unit {
+  text-align: center;
+  height: 24px;
+}

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

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

package/src/components/Date-Selector/types/index.ts

@@ -0,0 +1,77 @@
+export type DateDayNumber =
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16
+  | 17
+  | 18
+  | 19
+  | 20
+  | 21
+  | 22
+  | 23
+  | 24
+  | 25
+  | 26
+  | 27
+  | 28
+  | 29
+  | 30
+  | 31;
+
+export type DateMonthIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
+export type DateDayNameIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+export type DateComponent = {
+  year: number;
+  month: number;
+  date: number;
+};
+
+/**
+ * {
+ *      0: 1
+ * }
+ */
+export type DaysMappingMap = {
+  [id in DateDayNameIndex]: DateDayNameIndex;
+};
+
+/**
+ * {
+ *      0: 'Mon'
+ * }
+ */
+export type DayNamesMap = {
+  [id in DateDayNameIndex]: string;
+};
+
+/**
+ * {
+ *      0: 'January'
+ * }
+ */
+export type MonthsNamesMap = {
+  [id in DateMonthIndex]: string;
+};
+
+/**
+ * {
+ *      2020: '2020'
+ * }
+ */
+export type YearNamesMap = {
+  [id: number]: string;
+};

package/src/components/Date-Selector/utils/__test__/Date-Selector-Utils.test.ts

@@ -0,0 +1,62 @@
+import {
+  getMonthDisplayNameDefault,
+  getDayDisplayNamesDefault,
+  getRemappedDayIndex,
+  destructureDateComponents,
+  MONTHS_NAMES_DEFAULT,
+} from "@components/Date-Selector/utils/index";
+
+import {
+  DateDayNameIndex,
+  DateMonthIndex,
+} from "@components/Date-Selector/types/index";
+
+describe("Date Selector Utility Methods Unit Tests", () => {
+  describe("getDayDisplayNamesDefault", () => {
+    test("should retrieve default day display names array", () => {
+      const expected = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      const result = getDayDisplayNamesDefault();
+      expect(result).toStrictEqual(expected);
+    });
+  });
+
+  describe("getMonthDisplayNameDefault", () => {
+    test.each([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11])(
+      "should retrieve default month display name",
+      (idx) => {
+        const result = getMonthDisplayNameDefault(idx as DateMonthIndex);
+        expect(result).toEqual(MONTHS_NAMES_DEFAULT[idx]);
+      }
+    );
+  });
+
+  describe("destructureDateComponents", () => {
+    test("should return DateComponent objects with Year, Month, and Date number properties", () => {
+      const sampleDate = new Date();
+      const result = destructureDateComponents(sampleDate);
+
+      expect(result).toHaveProperty("year");
+      expect(result.year).toBeTruthy();
+      expect(typeof result.year).toEqual("number");
+
+      expect(result).toHaveProperty("month");
+      expect(result.month).toBeTruthy();
+      expect(typeof result.month).toEqual("number");
+
+      expect(result).toHaveProperty("year");
+      expect(result.date).toBeTruthy();
+      expect(typeof result.date).toEqual("number");
+    });
+  });
+
+  describe("getRemappedDayIndex", () => {
+    // javascript date gives value of 0-6 from sunday (0) to saturday (6).
+    test.each([0, 1, 2, 3, 4, 5, 6])("should retrieve day index", (idx) => {
+      // we remap it to be from mon [0] to sun [6]
+      const expectedRemappedDays = [6, 0, 1, 2, 3, 4, 5];
+
+      const result = getRemappedDayIndex(idx as DateDayNameIndex);
+      expect(result).toEqual(expectedRemappedDays[idx]);
+    });
+  });
+});

package/src/components/Date-Selector/utils/index.ts

@@ -0,0 +1,76 @@
+import {
+  DateComponent,
+  DayNamesMap,
+  DaysMappingMap,
+  DateDayNameIndex,
+  DateMonthIndex,
+  MonthsNamesMap,
+} from "@components/Date-Selector/types";
+
+/*    this variable is needed because by default javascript date gives value of 0-6
+ *    from sunday (0) to saturday (6).
+ *    However, we remap it to be from mon [0] to sun [6]
+ */
+const REMAPPED_DAYS: DaysMappingMap = {
+  0: 6, // sunday to last day
+  1: 0,
+  2: 1,
+  3: 2,
+  4: 3,
+  5: 4,
+  6: 5,
+};
+
+export const DAY_NAMES_DEFAULT: DayNamesMap = {
+  0: "Mon",
+  1: "Tue",
+  2: "Wed",
+  3: "Thu",
+  4: "Fri",
+  5: "Sat",
+  6: "Sun",
+};
+
+export const MONTHS_NAMES_DEFAULT: MonthsNamesMap = {
+  0: "January",
+  1: "February",
+  2: "March",
+  3: "April",
+  4: "May",
+  5: "June",
+  6: "July",
+  7: "August",
+  8: "September",
+  9: "October",
+  10: "November",
+  11: "December",
+};
+
+const getDayDisplayNamesDefault = (): string[] => {
+  return Object.keys(DAY_NAMES_DEFAULT).map(
+    (idKey) => DAY_NAMES_DEFAULT[idKey]
+  );
+};
+
+const getMonthDisplayNameDefault = (id: DateMonthIndex): string => {
+  return MONTHS_NAMES_DEFAULT[`${id}`];
+};
+
+const getRemappedDayIndex = (id: DateDayNameIndex): DateDayNameIndex => {
+  return REMAPPED_DAYS[`${id}`];
+};
+
+const destructureDateComponents = (date: Date): DateComponent => {
+  return {
+    year: date.getFullYear(),
+    month: date.getMonth(),
+    date: date.getDate(),
+  };
+};
+
+export {
+  getMonthDisplayNameDefault,
+  getDayDisplayNamesDefault,
+  getRemappedDayIndex,
+  destructureDateComponents,
+};