feat: added DatePicker (#58)

* chore: wip datepicker * chore: wip style fixes * feat: wip added datepicker * chore: focus on current date on datepicker toggle * chore: minor refactors * fix: datepicker disclosure focus restore not working * refactor: refactored duplicate calendar component * feat: added Tab behaviour in datepicker spinbuttons composite * fix: ensure tabIndex 0 * feat: alt arrowdown to open dropdown * refactor: reorganized & refactored code * fix: datepicker on open focus on selected date * chore: fixed calendar types & dateSegment composite spread * feat: datepicker v3 (#70) * refactor(datepicker): ♻️ organize imports and improve code flow * feat(datepicker): ✨ add controllable date picker * refactor(date-picker): ♻️ bring popover close focus back * fix(date-picker): 🐛 fix focus spin button on focus * fix(date-picker): 🐛 fix outside click moving focus to button * refactor(date-picker): ♻️ arrange imports * refactor(date-picker): 🏷️ update types for Date Segment * fix(date-picker): 🐛 fix focus movements * fix(date-picker): 🐛 fix focus & date values * fix: calendar day value lag & few css improvements Co-authored-by: Anurag <[email protected]> * fix: range calendar start date iso timing lag * chore: datepicker stories improvements (#72) * refactor(date-picker): ♻️ added more stories * refactor(date-picker): ♻️ add disabled styles * feat: added segment component (#71) * feat: added Segment component * refactor: review updates & segment aria label fix * chore: event listener rename * feat: added Segment component to DatePicker * fix: datepicker propagation * refactor: unified DateValue type import & removed extra composite in DatePickerState * chore: fieldvalue fix * chore: removed DOMProps * test: css ignore tests Co-authored-by: Navin Moorthy <[email protected]>
adaptui · Oct 7, 2020 · 2698ddf · 2698ddf
1 parent 4dc06ef
commit 2698ddf
Show file tree

Hide file tree

Showing 29 changed files with 1,823 additions and 131 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -7,4 +7,7 @@ module.exports = {
   testMatch: [join(__dirname, "src/**/*.test.{js,ts,tsx}")],
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
   preset: "ts-jest",
+  moduleNameMapper: {
+    "\\.(css|less|sass|scss)$": "<rootDir>/src/__mocks__/styleMock.js",
+  },
 };
diff --git a/src/__mocks__/styleMock.js b/src/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/src/calendar/CalendarState.ts b/src/calendar/CalendarState.ts
@@ -29,13 +29,13 @@ import {
 import { CalendarProps } from "./index.d";
 import { useWeekStart } from "./useWeekStart";
 import { announce } from "../utils/LiveAnnouncer";
-import { generateDaysInMonthArray, isInvalid, useWeekDays } from "./__utils";
+import { isInvalid, useWeekDays, generateDaysInMonthArray } from "./__utils";
 
-export interface IUseCalendarProps extends CalendarProps {
+export interface CalendarStateInitialProps extends Partial<CalendarProps> {
   id?: string;
 }
 
-export function useCalendarState(props: IUseCalendarProps = {}) {
+export function useCalendarState(props: CalendarStateInitialProps = {}) {
   const {
     minValue: initialMinValue,
     maxValue: initialMaxValue,
@@ -142,6 +142,7 @@ export function useCalendarState(props: IUseCalendarProps = {}) {
     currentMonth,
     setCurrentMonth,
     focusedDate,
+    focusCell,
     setFocusedDate,
     focusNextDay() {
       focusCell(addDays(focusedDate, 1));

diff --git a/src/calendar/__keys.ts b/src/calendar/__keys.ts
@@ -17,6 +17,7 @@ const CALENDAR_STATE_KEYS = [
   "currentMonth",
   "setCurrentMonth",
   "focusedDate",
+  "focusCell",
   "setFocusedDate",
   "focusNextDay",
   "focusPreviousDay",

diff --git a/src/calendar/__utils.ts b/src/calendar/__utils.ts
@@ -2,10 +2,11 @@
  * All credit goes to [React Spectrum](https://github.com/adobe/react-spectrum)
  * for these utils inspiration
  */
-import { DateValue } from "./index.d";
+import { endOfDay, setDay } from "date-fns";
 import { RangeValue } from "@react-types/shared";
 import { useDateFormatter } from "@react-aria/i18n";
-import { endOfDay, setDay, startOfDay } from "date-fns";
+
+import { DateValue } from "../calendar/index.d";
 
 export function isInvalid(
   date: Date,
@@ -40,7 +41,7 @@ export function generateDaysInMonthArray(
       const daysInWeek = [...new Array(7).keys()].reduce(
         (days: Date[], dayIndex) => {
           const day = weekIndex * 7 + dayIndex - monthStartsAt + 1;
-          const cellDate = new Date(year, month, day);
+          const cellDate = new Date(year, month, day, new Date().getHours());
 
           return [...days, cellDate];
         },
@@ -58,7 +59,7 @@ export function makeRange(start: Date, end: Date): RangeValue<Date> {
     [start, end] = [end, start];
   }
 
-  return { start: startOfDay(start), end: endOfDay(end) };
+  return { start: start, end: endOfDay(end) };
 }
 
 export function convertRange(range: RangeValue<DateValue>): RangeValue<Date> {

diff --git a/src/calendar/stories/Calendar.stories.tsx b/src/calendar/stories/Calendar.stories.tsx
@@ -3,129 +3,16 @@ import { Meta } from "@storybook/react";
 import { addDays, addWeeks, subWeeks } from "date-fns";
 
 import "./index.css";
-import {
-  Calendar,
-  DateValue,
-  CalendarCell,
-  CalendarGrid,
-  CalendarHeader,
-  CalendarButton,
-  IUseCalendarProps,
-  useCalendarState,
-  CalendarCellButton,
-  CalendarWeekTitle,
-} from "../index";
+import { DateValue } from "../index.d";
+import { CalendarComponent } from "./CalendarComponent";
 
 export default {
   title: "Component/Calendar",
 } as Meta;
 
-const CalendarComp: React.FC<IUseCalendarProps> = props => {
-  const state = useCalendarState(props);
-
-  return (
-    <Calendar {...state} className="calendar">
-      <div className="header">
-        <CalendarButton {...state} goto="previousYear" className="prev-year">
-          <svg
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
-            ></path>
-          </svg>
-        </CalendarButton>
-        <CalendarButton {...state} goto="previousMonth" className="prev-month">
-          <svg
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M15 19l-7-7 7-7"
-            ></path>
-          </svg>
-        </CalendarButton>
-        <CalendarHeader {...state} />
-        <CalendarButton {...state} goto="nextMonth" className="next-month">
-          <svg
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M9 5l7 7-7 7"
-            ></path>
-          </svg>
-        </CalendarButton>
-        <CalendarButton {...state} goto="nextYear" className="next-year">
-          <svg
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M13 5l7 7-7 7M5 5l7 7-7 7"
-            ></path>
-          </svg>
-        </CalendarButton>
-      </div>
-
-      <CalendarGrid {...state} as="table" className="dates">
-        <thead>
-          <tr>
-            {state.weekDays.map((day, dayIndex) => {
-              return (
-                <CalendarWeekTitle
-                  {...state}
-                  as="th"
-                  scope="col"
-                  key={dayIndex}
-                  dayIndex={dayIndex}
-                >
-                  <abbr title={day.title}>{day.abbr}</abbr>
-                </CalendarWeekTitle>
-              );
-            })}
-          </tr>
-        </thead>
-        <tbody>
-          {state.daysInMonth.map((week, weekIndex) => (
-            <tr key={weekIndex}>
-              {week.map((day, dayIndex) => (
-                <CalendarCell {...state} as="td" key={dayIndex} date={day}>
-                  <CalendarCellButton {...state} date={day} />
-                </CalendarCell>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </CalendarGrid>
-    </Calendar>
-  );
-};
-
-export const Default = () => <CalendarComp />;
+export const Default = () => <CalendarComponent />;
 export const DefaultValue = () => (
-  <CalendarComp defaultValue={addDays(new Date(), 1)} />
+  <CalendarComponent defaultValue={new Date(2001, 0, 1)} />
 );
 export const ControlledValue = () => {
   const [value, setValue] = React.useState<DateValue>(addDays(new Date(), 1));
@@ -137,27 +24,27 @@ export const ControlledValue = () => {
         onChange={e => setValue(new Date(e.target.value))}
         value={(value as Date).toISOString().slice(0, 10)}
       />
-      <CalendarComp value={value} onChange={setValue} />
+      <CalendarComponent value={value} onChange={setValue} />
     </div>
   );
 };
 export const MinMaxDate = () => (
-  <CalendarComp minValue={new Date()} maxValue={addWeeks(new Date(), 1)} />
+  <CalendarComponent minValue={new Date()} maxValue={addWeeks(new Date(), 1)} />
 );
 export const MinMaxDefaultDate = () => (
-  <CalendarComp
+  <CalendarComponent
     defaultValue={new Date()}
     minValue={subWeeks(new Date(), 1)}
     maxValue={addWeeks(new Date(), 1)}
   />
 );
 export const isDisabled = () => (
-  <CalendarComp defaultValue={addDays(new Date(), 1)} isDisabled />
+  <CalendarComponent defaultValue={addDays(new Date(), 1)} isDisabled />
 );
 export const isReadOnly = () => (
-  <CalendarComp defaultValue={addDays(new Date(), 1)} isReadOnly />
+  <CalendarComponent defaultValue={addDays(new Date(), 1)} isReadOnly />
 );
 export const autoFocus = () => (
   // eslint-disable-next-line jsx-a11y/no-autofocus
-  <CalendarComp defaultValue={addDays(new Date(), 1)} autoFocus />
+  <CalendarComponent defaultValue={addDays(new Date(), 1)} autoFocus />
 );
diff --git a/src/calendar/stories/CalendarComponent.tsx b/src/calendar/stories/CalendarComponent.tsx
@@ -0,0 +1,122 @@
+import React from "react";
+
+import "./index.css";
+import {
+  Calendar as CalendarWrapper,
+  CalendarButton,
+  CalendarCell,
+  CalendarCellButton,
+  CalendarGrid,
+  CalendarHeader,
+  CalendarWeekTitle,
+  CalendarStateInitialProps,
+  useCalendarState,
+} from "../index";
+import { CalendarStateReturn } from "../CalendarState";
+
+export const CalendarComp: React.FC<CalendarStateReturn> = state => {
+  return (
+    <CalendarWrapper {...state} className="calendar">
+      <div className="header">
+        <CalendarButton {...state} goto="previousYear" className="prev-year">
+          <svg
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+            ></path>
+          </svg>
+        </CalendarButton>
+        <CalendarButton {...state} goto="previousMonth" className="prev-month">
+          <svg
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M15 19l-7-7 7-7"
+            ></path>
+          </svg>
+        </CalendarButton>
+        <CalendarHeader {...state} />
+        <CalendarButton {...state} goto="nextMonth" className="next-month">
+          <svg
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M9 5l7 7-7 7"
+            ></path>
+          </svg>
+        </CalendarButton>
+        <CalendarButton {...state} goto="nextYear" className="next-year">
+          <svg
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M13 5l7 7-7 7M5 5l7 7-7 7"
+            ></path>
+          </svg>
+        </CalendarButton>
+      </div>
+
+      <CalendarGrid {...state} as="table" className="dates">
+        <thead>
+          <tr>
+            {state.weekDays.map((day, dayIndex) => {
+              return (
+                <CalendarWeekTitle
+                  {...state}
+                  as="th"
+                  scope="col"
+                  key={dayIndex}
+                  dayIndex={dayIndex}
+                >
+                  <abbr title={day.title}>{day.abbr}</abbr>
+                </CalendarWeekTitle>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {state.daysInMonth.map((week, weekIndex) => (
+            <tr key={weekIndex}>
+              {week.map((day, dayIndex) => (
+                <CalendarCell {...state} as="td" key={dayIndex} date={day}>
+                  <CalendarCellButton {...state} date={day} />
+                </CalendarCell>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </CalendarGrid>
+    </CalendarWrapper>
+  );
+};
+
+export const CalendarComponent: React.FC<CalendarStateInitialProps> = props => {
+  const state = useCalendarState(props);
+
+  return <CalendarComp {...state} />;
+};
diff --git a/src/calendar/stories/RangeCalendar.stories.tsx b/src/calendar/stories/RangeCalendar.stories.tsx
@@ -136,6 +136,7 @@ export const DefaultValue = () => (
 export const ControlledValue = () => {
   const [start, setStart] = React.useState<DateValue>(subDays(new Date(), 1));
   const [end, setEnd] = React.useState<DateValue>(addDays(new Date(), 1));
+
   return (
     <div>
       <input

diff --git a/src/calendar/stories/index.css b/src/calendar/stories/index.css
@@ -1,5 +1,4 @@
 .calendar {
-  margin-top: 1em;
   max-width: 320px;
   position: relative;
 }