@react-fabric/date 1.0.0-beta.0

package/src/i18n/ar.json

@@ -0,0 +1,14 @@
+{
+  "label": {
+    "prevMonth": "الشهر الماضى",
+    "prevYear": "السنة الماضية",
+    "prevDecade": "العقد السابق",
+    "nextMonth": "الشهر القادم",
+    "nextYear": "العام القادم",
+    "nextDecade": "العقد القادم",
+    "today": "اليوم",
+    "hijri": "هجري",
+    "gregorian": "ميلادي"
+  },
+  "number": {}
+}

package/src/i18n/en.json

@@ -0,0 +1,13 @@
+{
+  "label": {
+    "prevMonth": "Previous Month",
+    "prevYear": "Previous Year",
+    "prevDecade": "Previous Decade",
+    "nextMonth": "Next Month",
+    "nextYear": "Next Year",
+    "nextDecade": "Next Decade",
+    "today": "Today",
+    "hijri": "Hijri",
+    "gregorian": "Gregorian"
+  }
+}

package/src/i18n/index.ts

@@ -0,0 +1,31 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { addTranslationBundle } from "@react-fabric/core";
+import ar from "./ar.json";
+import en from "./en.json";
+import arSuper from "./superdate/ar.json";
+import enSuper from "./superdate/en.json";
+
+addTranslationBundle("date", { en, ar });
+addTranslationBundle("superdate", { en: enSuper, ar: arSuper });

package/src/i18n/superdate/ar.json

@@ -0,0 +1,70 @@
+{
+  "separator": " ⇽ ",
+  "label": {
+    "quick": "حدد مسرعا",
+    "relative": "نسبيا",
+    "events": "الأحداث",
+    "absolute": "مطلق",
+    "preset": "المسبقة",
+    "current": "تيار",
+    "previous": "السابق",
+    "from": "من عند",
+    "to": "إلى",
+    "+": "من الان",
+    "-": "منذ",
+    "apply": "يتقدم",
+    "$now": "الآن",
+    "$minute": "دقيقة",
+    "$hour": "ساعة",
+    "$day": "يوم",
+    "$week": "أسبوع",
+    "$month": "شهر",
+    "$quarter": "ربع",
+    "$year": "عام",
+    "$decade": "عقد"
+  },
+  "now": {
+    "$day": "اليوم",
+    "$week": "هذا الاسبوع",
+    "$month": "هذا الشهر",
+    "$quarter": "هذا الربع",
+    "$year": "هذه السنة",
+    "$decade": "هذا العقد"
+  },
+  "next": {
+    "$day": "غدا",
+    "$week": "الاسبوع القادم",
+    "$month": "الشهر القادم",
+    "$quarter": "الربع القادم",
+    "$year": "العام القادم",
+    "$decade": "العقد القادم",
+    "$minute": "بعد دقيقة",
+    "$hour": "بعد ساعة",
+    "$minute_plural": "بعد {{count}} دقائق",
+    "$hour_plural": "بعد {{count}} ساعات",
+    "$day_plural": "بعد {{count}} أيام",
+    "$week_plural": "بعد {{count}} أسابيع",
+    "$month_plural": "بعد {{count}} أشهر",
+    "$quarter_plural": "بعد {{count}} أرباع",
+    "$year_plural": "بعد {{count}} سنوات",
+    "$decade_plural": "بعد {{count}} عقود"
+  },
+  "prev": {
+    "$day": "في الامس",
+    "$week": "الاسبوع الماضي",
+    "$month": "الشهر الماضي",
+    "$quarter": "الربع الأخير",
+    "$year": "العام الماضي",
+    "$decade": "العقد الماضي",
+    "$minute": "منذ دقيقة",
+    "$hour": "منذ ساعة",
+    "$minute_plural": "منذ {{count}} دقيقة",
+    "$hour_plural": "منذ {{count}} ساعات",
+    "$day_plural": "منذ {{count}} أيام",
+    "$week_plural": "من {{count}} اسابيع",
+    "$month_plural": "قبل {{count}} أشهر",
+    "$quarter_plural": "منذ {{count}} أرباع",
+    "$year_plural": "منذ {{count}} سنوات",
+    "$decade_plural": "منذ {{count}} عقود"
+  }
+}

package/src/i18n/superdate/en.json

@@ -0,0 +1,75 @@
+{
+  "separator": " ⇾ ",
+  "event": {
+    "ramadan": "Ramadan",
+    "christmas": "Christmas",
+    "newYear": "New Year"
+  },
+  "label": {
+    "quick": "Quick Select",
+    "relative": "Relative",
+    "absolute": "Absolute",
+    "events": "Events",
+    "preset": "Presets",
+    "current": "Current",
+    "previous": "Previous",
+    "from": "From",
+    "to": "To",
+    "+": "From now",
+    "-": "Ago",
+    "apply": "Apply",
+    "$now": "Now",
+    "$minute": "Minute",
+    "$hour": "Hour",
+    "$day": "Day",
+    "$week": "Week",
+    "$month": "Month",
+    "$quarter": "Quarter",
+    "$year": "Year",
+    "$decade": "Decade"
+  },
+  "now": {
+    "$day": "Today",
+    "$week": "This week",
+    "$month": "This month",
+    "$quarter": "This quarter",
+    "$year": "This year",
+    "$decade": "This decade"
+  },
+  "next": {
+    "$day": "Tomorrow",
+    "$week": "Next week",
+    "$month": "Next month",
+    "$quarter": "Next quarter",
+    "$year": "Next year",
+    "$decade": "Next decade",
+    "$minute": "A minute later",
+    "$hour": "An hour later",
+    "$minute_other": "{{count}} minutes later",
+    "$hour_other": "{{count}} hours later",
+    "$day_other": "{{count}} days later",
+    "$week_other": "{{count}} weeks later",
+    "$month_other": "{{count}} months later",
+    "$quarter_other": "{{count}} quarters later",
+    "$year_other": "{{count}} years later",
+    "$decade_other": "{{count}} decades later"
+  },
+  "prev": {
+    "$day": "Yesterday",
+    "$week": "Last week",
+    "$month": "Last month",
+    "$quarter": "Last quarter",
+    "$year": "Last year",
+    "$decade": "Last decade",
+    "$minute": "A minute ago",
+    "$hour": "An hour ago",
+    "$minute_other": "{{count}} minutes ago",
+    "$hour_other": "{{count}} hours ago",
+    "$day_other": "{{count}} days ago",
+    "$week_other": "{{count}} weeks ago",
+    "$month_other": "{{count}} months ago",
+    "$quarter_other": "{{count}} quarters ago",
+    "$year_other": "{{count}} years ago",
+    "$decade_other": "{{count}} decades ago"
+  }
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import "./hijri";
+import "./i18n";
+
+export { DateDisplay } from "./display/DateDisplay";
+export { DatePanel } from "./panels/DatePanel";
+export { RangePanel } from "./panels/RangePanel";
+export { SuperDate } from "./superdate/Superdate";
+
+export { DateUtil } from "./utils/dateUtil";

package/src/panels/BasePanel.tsx

@@ -0,0 +1,130 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { DateHeader } from "../components/DateHeader";
+import { DatePage } from "../components/DatePage";
+import { DecadePage } from "../components/DecadePage";
+import { MonthPage } from "../components/MonthPage";
+import { TimeSlider } from "../components/TimeSliders";
+import { YearPage } from "../components/YearPage";
+import { PageType, type DateLike } from "../types";
+
+export interface PanelProps {
+  page: PageType;
+  pageDate: Date;
+  selected?: Date | [Date, Date];
+  hilight?: [Date, Date];
+  hour: number;
+  minute: number;
+  min?: DateLike;
+  max?: DateLike;
+  isHijri: boolean;
+  withTime?: boolean;
+
+  hidePrevious?: boolean;
+  hideNext?: boolean;
+
+  changePage: (page: PageType) => void;
+  changePageDate: (date: Date, pageChange?: boolean) => void;
+  changeTime: (time: { hour: number; minute: number }) => void;
+  mouseOver?: (date: Date) => void;
+
+  selectDate: (date: Date) => void;
+  isDateDisabled: (date: Date) => boolean;
+}
+
+export const BasePanel = ({
+  min,
+  max,
+  isHijri,
+  withTime,
+  hideNext,
+  hidePrevious,
+  changePage,
+  changePageDate,
+  changeTime,
+  selectDate,
+  isDateDisabled,
+  ...state
+}: PanelProps) => {
+  return (
+    <div
+      className="grid overflow-hidden select-none"
+      style={{
+        gridTemplate: `"head head" auto "content time" 1fr / 1fr auto`,
+      }}
+    >
+      <DateHeader
+        {...state}
+        min={min}
+        max={max}
+        hideNext={hideNext}
+        hidePrevious={hidePrevious}
+        isHijri={isHijri}
+        changePage={changePage}
+        changePageDate={(dt) => changePageDate(dt, false)}
+      />
+      <DatePage
+        {...state}
+        isHijri={isHijri}
+        selectDate={selectDate}
+        dateDisabled={isDateDisabled}
+        changePageDate={changePageDate}
+      />
+      {state.page === PageType.MONTH && (
+        <MonthPage
+          {...state}
+          isHijri={isHijri}
+          selectDate={selectDate}
+          dateDisabled={isDateDisabled}
+          changePageDate={changePageDate}
+        />
+      )}
+      {state.page === PageType.YEAR && (
+        <YearPage
+          {...state}
+          isHijri={isHijri}
+          selectDate={selectDate}
+          dateDisabled={isDateDisabled}
+          changePageDate={changePageDate}
+        />
+      )}
+      {state.page === PageType.DECADE && (
+        <DecadePage
+          {...state}
+          isHijri={isHijri}
+          selectDate={selectDate}
+          dateDisabled={isDateDisabled}
+          changePageDate={changePageDate}
+        />
+      )}
+      {withTime && state.page === PageType.DATE && (
+        <TimeSlider
+          hour={state.hour}
+          minute={state.minute}
+          onTimeChange={changeTime}
+        />
+      )}
+    </div>
+  );
+};

package/src/panels/DatePanel.tsx

@@ -0,0 +1,235 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Button, useDebounce, useGlobals } from "@react-fabric/core";
+import { isArray, isEmpty } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { isAfter, isBefore, isSameDay } from "date-fns";
+import { useCallback, useEffect, useReducer, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { PageType, type DateLike, type DateProps } from "../types";
+import { DateUtil } from "../utils/dateUtil";
+import { BasePanel } from "./BasePanel";
+
+interface PanelState {
+  page: PageType;
+  pageDate: Date;
+  selected?: Date;
+  hour: number;
+  minute: number;
+}
+
+type PanelActions =
+  | { type: "reset"; date?: DateLike }
+  | { type: "changeDate"; date: Date }
+  | { type: "changeTime"; hour: number; minute: number }
+  | { type: "changePage"; page: PageType }
+  | { type: "changePageDate"; date: Date; pageChange: boolean };
+
+export const DatePanel = ({
+  className,
+  max,
+  min,
+  dateDisabled,
+  onChange,
+  showHijriToggle,
+  value,
+  withTime,
+  ...rest
+}: DateProps) => {
+  const { t } = useTranslation("date");
+  const { currentCalendar } = useGlobals();
+  const [isHijri, setHijri] = useState(currentCalendar === "hijri");
+  const [canSelectToday, setCanSelectToday] = useState(true);
+
+  const fireChange = useDebounce(onChange, [onChange]);
+
+  useEffect(() => {
+    setHijri(currentCalendar === "hijri");
+  }, [currentCalendar]);
+
+  const [state, dispatch] = useReducer(
+    (state: PanelState, action: PanelActions) => {
+      if (action.type === "reset") {
+        if (!isEmpty(action.date)) {
+          const date = new Date(action.date);
+          state.selected = date;
+          state.pageDate = date;
+          state.hour = date.getHours();
+          state.minute = date.getMinutes();
+        } else {
+          state.selected = undefined;
+          state.pageDate = new Date();
+          state.hour = 0;
+          state.minute = 0;
+        }
+      }
+      if (action.type === "changeDate") {
+        action.date.setHours(state.hour);
+        action.date.setMinutes(state.minute);
+        state.selected = action.date;
+        state.pageDate = action.date;
+      }
+      if (action.type === "changeTime") {
+        state.selected?.setHours(action.hour);
+        state.selected?.setMinutes(action.minute);
+        state.hour = action.hour;
+        state.minute = action.minute;
+      }
+      if (action.type === "changePage") {
+        state.page = action.page;
+      }
+      if (action.type === "changePageDate") {
+        state.pageDate = action.date;
+        action.pageChange && (state.page = Math.max(state.page - 1, 0));
+      }
+      if (action.type === "changeDate" || action.type === "changeTime") {
+        if (min && state.selected && isBefore(state.selected, new Date(min))) {
+          state.selected = new Date(min);
+          state.hour = state.selected.getHours();
+          state.minute = state.selected.getMinutes();
+        }
+        if (max && state.selected && isAfter(state.selected, new Date(max))) {
+          state.selected = new Date(max);
+          state.hour = state.selected.getHours();
+          state.minute = state.selected.getMinutes();
+        }
+        state.selected && fireChange?.(state.selected.toISOString());
+      }
+      return { ...state };
+    },
+    {
+      page: PageType.DATE,
+      pageDate: new Date(),
+      hour: 0,
+      minute: 0,
+    } as PanelState,
+  );
+
+  useEffect(() => {
+    let canSelect = true;
+    if (min && canSelect) {
+      canSelect = isAfter(new Date(), min);
+    }
+    if (max && canSelect) {
+      canSelect = isBefore(new Date(), max);
+    }
+    setCanSelectToday(canSelect);
+  }, [min, max]);
+
+  useEffect(() => {
+    dispatch({ type: "reset", date: value });
+  }, [value]);
+
+  const isDateDisabled = useCallback(
+    (dt: Date) => {
+      if (state.page === PageType.DATE) {
+        if (isArray(dateDisabled)) {
+          return !!dateDisabled.find((dd) => isSameDay(new Date(dd), dt));
+        }
+      }
+
+      return DateUtil.isDisabled(dt, state.page, min, max);
+    },
+    [state.page, min, max, dateDisabled],
+  );
+
+  const changePageDate = useCallback((date: Date, pageChange = true) => {
+    dispatch({
+      type: "changePageDate",
+      pageChange,
+      date,
+    });
+  }, []);
+
+  const selectDate = useCallback((date: Date) => {
+    dispatch({
+      type: "changeDate",
+      date,
+    });
+  }, []);
+
+  return (
+    <div
+      className={classNames(
+        "block overflow-hidden bg-base rounded-capped",
+        className,
+      )}
+      {...rest}
+    >
+      <BasePanel
+        {...state}
+        max={max}
+        min={min}
+        withTime={withTime}
+        isHijri={isHijri}
+        selectDate={selectDate}
+        isDateDisabled={isDateDisabled}
+        changeTime={(time) => dispatch({ type: "changeTime", ...time })}
+        changePage={(page) => dispatch({ type: "changePage", page })}
+        changePageDate={changePageDate}
+      />
+      <div className="border-t flex flex-nowrap justify-between px-2">
+        <span>
+          {showHijriToggle && (
+            <Button
+              size="sm"
+              variant="link"
+              color="primary"
+              className="my-1"
+              onClick={() => {
+                setHijri(!isHijri);
+              }}
+            >
+              {t(isHijri ? "label.gregorian" : "label.hijri")}
+            </Button>
+          )}
+        </span>
+        {state.page === PageType.DATE && canSelectToday && (
+          <Button
+            size="sm"
+            variant="link"
+            color="primary"
+            className="my-1"
+            onClick={() => selectDate(new Date())}
+          >
+            {t("label.today")}
+          </Button>
+        )}
+        {state.page !== PageType.DATE && (
+          <Button
+            size="sm"
+            variant="link"
+            color="primary"
+            className="my-1"
+            onClick={() =>
+              dispatch({ type: "changePage", page: PageType.DATE })
+            }
+          >
+            {t("core:action.cancel")}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};