@simplybusiness/mobius-datepicker 4.0.0-beta.7 → 4.0.0-beta.9

package/src/components/NewDatePicker/NewDatePicker.test.tsx

@@ -0,0 +1,121 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { NewDatePicker } from ".";
+
+const mockMatchMedia = (matches: boolean) => {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    configurable: true,
+    value: jest.fn().mockImplementation(query => ({
+      matches,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+};
+
+describe("NewDatePicker", () => {
+  describe("given it is a touch device", () => {
+    beforeEach(() => {
+      mockMatchMedia(true);
+    });
+
+    it("should render without errors", () => {
+      const exampleDate = "2023-11-13";
+      const labelText = "Start date";
+      const testId = "date-picker";
+
+      render(
+        <NewDatePicker
+          defaultValue={exampleDate}
+          label={labelText}
+          data-testid={testId}
+        />,
+      );
+
+      const inputField = screen.getByTestId(testId);
+      const label = screen.getByLabelText(labelText);
+
+      expect(inputField).toHaveValue(exampleDate);
+      expect(label).toBeInTheDocument();
+    });
+
+    describe("when value changes", () => {
+      it("triggers onChange", () => {
+        const labelText = "Start date";
+        const testId = "date-picker";
+        const onChange = jest.fn();
+
+        render(
+          <NewDatePicker
+            label={labelText}
+            data-testid={testId}
+            onChange={onChange}
+          />,
+        );
+
+        const inputField = screen.getByTestId(testId);
+        const newDate = "2015-06-01";
+
+        fireEvent.change(inputField, { target: { value: newDate } });
+
+        expect(inputField).toHaveValue(newDate);
+        expect(onChange).toHaveBeenCalledWith(newDate);
+      });
+    });
+  });
+
+  describe("given it is a non-touch device", () => {
+    beforeEach(() => {
+      mockMatchMedia(false);
+    });
+
+    it("should render without errors", () => {
+      const exampleDate = "2023-11-13";
+      const labelText = "Start date";
+      const testId = "date-picker";
+
+      render(
+        <NewDatePicker
+          defaultValue={exampleDate}
+          label={labelText}
+          data-testid={testId}
+        />,
+      );
+
+      const inputField = screen.getByTestId(testId);
+      const label = screen.getByLabelText(labelText);
+
+      expect(inputField).toHaveValue(exampleDate);
+      expect(label).toBeInTheDocument();
+    });
+
+    describe("when value changes", () => {
+      it("triggers onChange", () => {
+        const labelText = "Start date";
+        const testId = "date-picker";
+        const onChange = jest.fn();
+
+        render(
+          <NewDatePicker
+            label={labelText}
+            data-testid={testId}
+            onChange={onChange}
+          />,
+        );
+
+        const inputField = screen.getByTestId(testId);
+        const newDate = "2015-06-01";
+
+        fireEvent.change(inputField, { target: { value: newDate } });
+
+        expect(inputField).toHaveValue(newDate);
+        expect(onChange).toHaveBeenCalledWith(newDate);
+      });
+    });
+  });
+});

package/src/components/NewDatePicker/NewDatePicker.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import {
+  Button,
+  TextField,
+  TextFieldElementType,
+  TextFieldProps,
+  VisuallyHidden,
+} from "@simplybusiness/mobius";
+import classNames from "classnames/dedupe";
+import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { isTouchDevice } from "../../utils/isTouchDevice";
+import { DatePickerModal } from "./DatePickerModal";
+
+export interface NewDatePickerProps
+  extends Omit<TextFieldProps, "defaultValue" | "onChange"> {
+  onChange?: (date: string) => void;
+  defaultValue?: string;
+  id?: string;
+}
+
+export const NewDatePicker = (props: NewDatePickerProps) => {
+  const {
+    onChange,
+    defaultValue = "",
+    isDisabled,
+    validationState,
+    ...otherProps
+  } = props;
+  const ref = useRef<TextFieldElementType | null>(null);
+  const [top, setTop] = useState<number>(0);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [textFieldVal, setTextFieldVal] = useState<string>(defaultValue); // yyyy-MM-dd
+  const touchDevice = isTouchDevice();
+
+  const containerClasses = classNames("mobius/DatePickerContainer", {
+    "--is-disabled": isDisabled,
+    "--is-valid": validationState === "valid",
+    "--is-invalid": validationState === "invalid",
+  });
+
+  const popoverToggleClasses = classNames("mobius/DateFieldButton", {
+    "--is-valid": validationState === "valid",
+    "--is-invalid": validationState === "invalid",
+  });
+
+  const setPopoverPosition = () => {
+    if (!ref.current || isOpen) return;
+
+    const refHeight = ref.current.getBoundingClientRect().height;
+
+    setTop(refHeight);
+  };
+
+  const togglePopoverVisibility = () => {
+    setIsOpen(!isOpen);
+    setPopoverPosition();
+  };
+
+  const handleTextFieldChange = (event: ChangeEvent<TextFieldElementType>) => {
+    setTextFieldVal(event.target.value);
+  };
+
+  const onDateSelected = (selectedDate: string) => {
+    setTextFieldVal(selectedDate);
+    setIsOpen(false);
+  };
+
+  // When user manually types in date,
+  // select date when popover becomes visible
+  useEffect(() => {
+    if (!textFieldVal) return;
+    if (onChange) {
+      onChange(textFieldVal);
+    }
+  }, [textFieldVal, onChange]);
+
+  if (touchDevice) {
+    return (
+      <TextField
+        type="date"
+        onChange={handleTextFieldChange}
+        value={textFieldVal}
+        isDisabled={isDisabled}
+        validationState={validationState}
+        {...otherProps}
+      />
+    );
+  }
+
+  return (
+    <div className={containerClasses} ref={ref}>
+      <TextField
+        type="date"
+        className="mobius/DatePicker"
+        onChange={handleTextFieldChange}
+        value={textFieldVal}
+        isDisabled={isDisabled}
+        validationState={validationState}
+        {...otherProps}
+      />
+      <Button
+        className={popoverToggleClasses}
+        onClick={togglePopoverVisibility}
+        isDisabled={isDisabled}
+      >
+        <VisuallyHidden>Pick date</VisuallyHidden>
+      </Button>
+      {isOpen && (
+        <DatePickerModal
+          date={textFieldVal}
+          isOpen={isOpen}
+          top={top}
+          onSelected={onDateSelected}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/NewDatePicker/constants.ts

@@ -0,0 +1,3 @@
+export const MONDAY_AS_NUMBER = 1;
+
+export const DEFAULT_LOCALE = window?.navigator?.language || "en-GB";

package/src/components/NewDatePicker/dateObjToString.test.ts

@@ -0,0 +1,17 @@
+import { dateObjToString } from "./dateObjToString";
+
+describe("dateObjToString", () => {
+  describe("given a Date object", () => {
+    it("returns a formatted string as yyyy-mm-dd", () => {
+      const exampleDate = "2023-11-13";
+
+      const input = new Date(exampleDate);
+
+      const actual = dateObjToString(input);
+
+      const expected = exampleDate;
+
+      expect(actual).toEqual(expected);
+    });
+  });
+});

package/src/components/NewDatePicker/dateObjToString.ts

@@ -0,0 +1,3 @@
+import { format } from "date-fns";
+
+export const dateObjToString = (date: Date) => format(date, "yyyy-MM-dd");

package/src/components/NewDatePicker/index.tsx

@@ -0,0 +1 @@
+export * from "./NewDatePicker";

package/src/components/NewDatePicker/weekdayAsOneLetter.test.ts

@@ -0,0 +1,28 @@
+import { weekdayAsOneLetter } from "./weekdayAsOneLetter";
+
+describe("weekdayAsOneLetter", () => {
+  describe("given a Date object and a locale", () => {
+    it("returns weekday as a single letter", () => {
+      const randomMonday = new Date("2023-11-13");
+      const locale = { locale: { code: "en-GB" } };
+
+      const actual = weekdayAsOneLetter(randomMonday, locale);
+
+      const expected = "M";
+
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  describe("given a Date object and no locale", () => {
+    it("returns weekday as a single letter, using en-GB as default locale", () => {
+      const randomMonday = new Date("2023-11-13");
+
+      const actual = weekdayAsOneLetter(randomMonday);
+
+      const expected = "M";
+
+      expect(actual).toEqual(expected);
+    });
+  });
+});

package/src/components/NewDatePicker/weekdayAsOneLetter.ts

@@ -0,0 +1,11 @@
+import { DateFormatter } from "react-day-picker";
+import { DEFAULT_LOCALE } from "./constants";
+
+export const weekdayAsOneLetter: DateFormatter = (weekday, options) => {
+  const locale = options?.locale?.code || DEFAULT_LOCALE;
+  const oneLetter = weekday.toLocaleString(locale, {
+    weekday: "narrow",
+  });
+
+  return oneLetter;
+};

package/src/hooks/useFocusTrap.tsx

@@ -0,0 +1,55 @@
+import { ReactNode, useEffect, useRef } from "react";
+
+const useFocusTrap = () => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    if (containerRef.current) {
+      const element = containerRef.current;
+      const focusableElements =
+        containerRef.current.querySelectorAll<HTMLElement>(
+          '.rdp-nav_button, [tabindex]:not([tabindex="-1"])',
+        );
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      const handleTabKeyPress = (event: KeyboardEvent) => {
+        if (event.key === "Tab") {
+          if (event.shiftKey && document.activeElement === firstElement) {
+            event.preventDefault();
+            lastElement.focus();
+          } else if (
+            !event.shiftKey &&
+            document.activeElement === lastElement // TODO: handle for any day
+          ) {
+            event.preventDefault();
+            firstElement.focus();
+          }
+        }
+      };
+
+      element.addEventListener("keydown", handleTabKeyPress);
+      return () => {
+        element.removeEventListener("keydown", handleTabKeyPress);
+      };
+    }
+  }, []);
+
+  return containerRef;
+};
+
+export type FocusTrapProps = {
+  children: ReactNode;
+};
+
+export default function FocusTrap({ children }: FocusTrapProps) {
+  const focusRef = useFocusTrap();
+
+  return (
+    <div className="trap" ref={focusRef}>
+      {children}
+    </div>
+  );
+}

package/src/utils/excludeControls.test.ts

@@ -0,0 +1,26 @@
+import { excludeControls } from "./excludeControls";
+
+describe("excludeControls", () => {
+  describe("given a list of props", () => {
+    it("returns an object where each prop has an entry with disabled params", () => {
+      const props = ["className", "elementType"];
+
+      const actual = excludeControls(...props);
+
+      const expected = {
+        elementType: {
+          table: {
+            disable: true,
+          },
+        },
+        className: {
+          table: {
+            disable: true,
+          },
+        },
+      };
+
+      expect(actual).toEqual(expected);
+    });
+  });
+});

package/src/utils/excludeControls.ts

@@ -0,0 +1,28 @@
+// This function generates data structure required to hide specified
+// prop from individual stories. Key 'table' is where specified key
+// is disabled.
+//
+// The above is documented here:
+// https://storybook.js.org/docs/react/essentials/controls#disable-controls-for-specific-properties
+//
+// The expected usage looks as follows:
+//
+// <Meta
+//   title="Components/MyComponent"
+//   component={MyComponent}
+//   argTypes={{
+//     label: {
+//       control: {
+//         type: "text",
+//       },
+//       table: {
+//         disable: true,
+//       },
+//     },
+//   }}
+// />
+export const excludeControls = (...args: string[]) =>
+  args.reduce(
+    (prev, acc) => ({ ...prev, [acc]: { table: { disable: true } } }),
+    {},
+  );

package/src/utils/isTouchDevice.ts

@@ -0,0 +1,7 @@
+export const isTouchDevice = (): boolean | undefined => {
+  if (typeof window !== "undefined") {
+    return window.matchMedia("(hover: none), (pointer: coarse)").matches;
+  }
+
+  return undefined;
+};