feat: add new DatePicker component

packages/core/package.json

@@ -98,11 +98,13 @@
     "body-scroll-lock": "^4.0.0-beta.0",
     "browserslist-config-monday": "1.0.6",
     "classnames": "^2.3.2",
+    "date-fns": "^2.30.0",
     "downshift": "^9.0.8",
     "es-toolkit": "^1.39.10",
     "framer-motion": "^6.5.1",
     "monday-ui-style": "0.26.1",
     "react-dates": "21.8.0",
+    "react-day-picker": "^8.8.0",
     "react-focus-lock": "^2.13.2",
     "react-inlinesvg": "^4.1.3",
     "react-is": "^16.9.0",

packages/core/src/components/next/DatePicker/DateContentHoverContext.tsx

@@ -0,0 +1,15 @@
+import React, { createContext, useContext, useMemo, useState } from "react";
+import { noop } from "es-toolkit";
+
+export const DayContentHoverContext = createContext<{
+  hover: Date | undefined;
+  setHover: (_hover: Date | undefined) => void;
+}>({ hover: undefined, setHover: noop });
+
+export const DayContentHoverProvider = ({ children }: { children: React.ReactNode }) => {
+  const [hover, setHover] = useState<Date | undefined>(undefined);
+  const value = useMemo(() => ({ hover, setHover }), [hover]);
+  return <DayContentHoverContext.Provider value={value}>{children}</DayContentHoverContext.Provider>;
+};
+
+export const useDayContentHoverContext = () => useContext(DayContentHoverContext);

packages/core/src/components/next/DatePicker/DatePicker.module.scss

@@ -0,0 +1,286 @@
+@import "~monday-ui-style/dist/mixins";
+
+.datePicker {
+  --day-picker-header-height: 34px;
+  --day-picker-content-height: 234px;
+  --day-picker-day-width: 30px;
+  --day-picker-day-height: 30px;
+  --day-picker-days-horizontal-gap: 4px;
+  --day-picker-days-vertical-gap: 2px;
+  --day-picker-day-change-range: var(--primary-surface-color);
+
+  .datePickerMonths {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-medium);
+    align-items: flex-start;
+  }
+
+  &.withWeekNumber {
+    --day-picker-days-horizontal-gap: 2px;
+    width: 284px;
+    margin: 0;
+
+    .datePickerHead {
+      td:first-child {
+        width: var(--day-picker-day-width);
+        border-top-left-radius: var(--border-radius-medium);
+        border-top-right-radius: var(--border-radius-medium);
+        background-color: var(--primary-background-hover-color);
+
+        &::after {
+          color: var(--secondary-text-color);
+          @include vibe-text(text2, normal);
+          display: flex;
+          justify-content: center;
+          content: "No.";
+        }
+      }
+    }
+
+    .datePickerBody {
+      td:first-child {
+        background-color: var(--primary-background-hover-color);
+      }
+
+      tr:last-child td:first-child {
+        border-bottom-left-radius: var(--border-radius-medium);
+        border-bottom-right-radius: var(--border-radius-medium);
+      }
+    }
+  }
+
+  .datePickerTable {
+    margin-top: var(--spacing-small);
+    border-collapse: collapse;
+    height: var(--day-picker-content-height);
+  }
+
+  .datePickerHead {
+    th {
+      color: var(--secondary-text-color);
+      @include vibe-text(text2, normal);
+      padding-block: 2px;
+      text-align: center;
+      height: var(--day-picker-day-height);
+    }
+  }
+  .datePickerBody {
+    td {
+      color: var(--secondary-text-color);
+      @include vibe-text(text2, normal);
+      text-align: center;
+      padding: 0;
+    }
+
+    .datePickerDay {
+      color: var(--primary-text-color);
+      @include vibe-text(text2, normal);
+      width: var(--day-picker-day-width);
+      height: var(--day-picker-day-height);
+      background: none;
+      border: none;
+      cursor: pointer;
+      border-radius: var(--border-radius-small);
+      margin: var(--day-picker-days-vertical-gap) var(--day-picker-days-horizontal-gap);
+      padding: 0;
+
+      .datePickerDayContent {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        border-radius: var(--border-radius-small);
+      }
+
+      &:focus-visible {
+        outline: none;
+        .datePickerDayContent {
+          outline: 2px solid var(--primary-color);
+        }
+      }
+
+      &.datePickerDayDisabled {
+        color: var(--disabled-text-color);
+        cursor: not-allowed;
+      }
+
+      &:not(
+          .datePickerDayDisabled,
+          .datePickerAddToRangeStart,
+          .datePickerAddToRangeEnd,
+          .datePickerAddToRangeMiddle,
+          .datePickerDayRangeStart,
+          .datePickerDayRangeEnd
+        )
+        .datePickerDayContent:hover {
+        background: var(--primary-background-hover-color);
+      }
+
+      &.datePickerDayOutside {
+        color: var(--disabled-text-color);
+      }
+
+      &.datePickerDaySelected:not(.datePickerDayRangeMiddle, .datePickerRemoveFromRange) {
+        background: var(--primary-color);
+        color: var(--text-color-on-primary);
+      }
+
+      &.datePickerDayRangeStart:not(.datePickerDayRangeEnd, .datePickerRemoveFromRange),
+      &.datePickerDayRangeEnd:not(.datePickerDayRangeStart, .datePickerRemoveFromRange) {
+        background: var(--primary-color);
+        width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));
+      }
+
+      &.datePickerDaySelected:not(.datePickerDayRangeMiddle, .datePickerRemoveFromRange) {
+        background: var(--primary-color);
+        color: var(--text-color-on-primary);
+      }
+
+      &.datePickerDayRangeStart.datePickerRemoveFromRange,
+      &.datePickerDayRangeEnd.datePickerRemoveFromRange {
+        background: var(--primary-color);
+        color: var(--text-color-on-primary);
+      }
+
+      &.datePickerDayRangeStart.datePickerRemoveFromRange:not(.datePickerDayRangeEnd),
+      &.datePickerDayRangeEnd.datePickerRemoveFromRange:not(.datePickerDayRangeStart) {
+        width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));
+      }
+
+      &.datePickerAddToRangeStart,
+      &.datePickerDayRangeStart:not(.datePickerDayRangeEnd) {
+        margin-right: 0;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &.datePickerAddToRangeEnd,
+      &.datePickerDayRangeEnd:not(.datePickerDayRangeStart) {
+        margin-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &.datePickerAddToRangeStart,
+      &.datePickerAddToRangeEnd,
+      &.datePickerAddToRangeMiddle {
+        margin: var(--day-picker-days-vertical-gap) 0;
+      }
+
+      &.datePickerAddToRangeStart:not(.datePickerDayRangeStart, .datePickerDayRangeEnd),
+      &.datePickerAddToRangeEnd:not(.datePickerDayRangeStart, .datePickerDayRangeEnd),
+      &.datePickerAddToRangeMiddle,
+      &.datePickerDayRangeMiddle:not(.datePickerAddToRangeStart, .datePickerAddToRangeEnd) {
+        background-color: var(--primary-selected-color);
+        border: var(--day-picker-days-horizontal-gap) solid var(--primary-selected-color);
+        border-top: none;
+        border-bottom: none;
+        width: calc(var(--day-picker-day-width) + 2 * var(--day-picker-days-horizontal-gap));
+      }
+
+      &.datePickerAddToRangeMiddle,
+      &.datePickerDayRangeMiddle:not(.datePickerAddToRangeStart, .datePickerAddToRangeEnd) {
+        background: var(--primary-selected-color);
+        margin: var(--day-picker-days-vertical-gap) 0;
+        border-radius: 0;
+      }
+
+      &.datePickerRemoveFromRange:not(.datePickerDayRangeStart, .datePickerDayRangeEnd),
+      &.datePickerAddToRangeStart:not(.datePickerDayRangeMiddle, .datePickerDayRangeEnd),
+      &.datePickerAddToRangeEnd:not(.datePickerDayRangeMiddle, .datePickerDayRangeStart),
+      &.datePickerAddToRangeMiddle {
+        background: var(--day-picker-day-change-range);
+        border-color: var(--day-picker-day-change-range);
+      }
+    }
+
+    tr {
+      td:first-child .datePickerDay {
+        &.datePickerDayRangeMiddle,
+        &.datePickerAddToRangeStart:not(.datePickerDayRangeStart, .datePickerDayRangeEnd),
+        &.datePickerAddToRangeMiddle,
+        &.datePickerAddToRangeEnd:not(.datePickerDayRangeStart, .datePickerDayRangeEnd) {
+          border: none;
+          width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));
+          margin-left: var(--day-picker-days-horizontal-gap);
+          border-right: var(--day-picker-days-horizontal-gap) solid var(--primary-selected-color);
+          border-top-left-radius: var(--border-radius-small);
+          border-bottom-left-radius: var(--border-radius-small);
+        }
+
+        &.datePickerRemoveFromRange {
+          border-color: var(--day-picker-day-change-range);
+        }
+
+        &.datePickerAddToRangeEnd,
+        &.datePickerDayRangeEnd:not(.datePickerDayRangeStart) {
+          margin-right: 0;
+        }
+      }
+
+      td:last-child .datePickerDay {
+        &.datePickerDayRangeMiddle,
+        &.datePickerAddToRangeStart:not(.datePickerDayRangeStart, .datePickerDayRangeEnd),
+        &.datePickerAddToRangeMiddle,
+        &.datePickerAddToRangeEnd:not(.datePickerDayRangeStart, .datePickerDayRangeEnd) {
+          border: none;
+          width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));
+          margin-right: var(--day-picker-days-horizontal-gap);
+          border-left: var(--day-picker-days-horizontal-gap) solid var(--primary-selected-color);
+          border-top-right-radius: var(--border-radius-small);
+          border-bottom-right-radius: var(--border-radius-small);
+        }
+
+        &.datePickerRemoveFromRange {
+          border-color: var(--day-picker-day-change-range);
+        }
+
+        &.datePickerAddToRangeStart,
+        &.datePickerDayRangeStart:not(.datePickerDayRangeEnd) {
+          margin-left: 0;
+        }
+      }
+
+      td:first-child .datePickerDay,
+      td:last-child .datePickerDay {
+        &.datePickerAddToRangeStart:not(.datePickerDayRangeMiddle),
+        &.datePickerAddToRangeMiddle,
+        &.datePickerAddToRangeEnd:not(.datePickerDayRangeMiddle) {
+          border-color: var(--day-picker-day-change-range);
+        }
+      }
+
+      td:first-child .datePickerDay,
+      td:last-child .datePickerDay {
+        &.datePickerDaySelected.datePickerDayRangeEnd.datePickerAddToRangeStart {
+          border-left-width: 0;
+        }
+        &.datePickerDaySelected.datePickerDayRangeStart.datePickerAddToRangeEnd {
+          border-right-width: 0;
+        }
+      }
+    }
+
+    .datePickerDaySelected.datePickerDayRangeEnd.datePickerAddToRangeStart {
+      border-radius: var(--border-radius-small) !important;
+      border-color: var(--primary-color) !important;
+      background-color: var(--primary-color) !important;
+
+      &:not(.datePickerHalfRangeSelected) {
+        margin-left: calc(var(--day-picker-days-horizontal-gap) * -1);
+      }
+    }
+
+    .datePickerDaySelected.datePickerDayRangeStart.datePickerAddToRangeEnd {
+      border-radius: var(--border-radius-small) !important;
+      border-color: var(--primary-color) !important;
+      background-color: var(--primary-color) !important;
+
+      &:not(.datePickerHalfRangeSelected) {
+        margin-right: calc(var(--day-picker-days-horizontal-gap) * -1);
+      }
+    }
+  }
+}