@react-fabric/date 1.0.0-beta.0

package/dist/types/types/index.d.ts

@@ -0,0 +1,70 @@
+import { type ColorType, type CssProp, type TestProps } from "@react-fabric/core/dist/types/types";
+export type DateLike = Date | string | number;
+export type DateParsed = Date | undefined;
+export declare enum PageType {
+    DATE = 0,
+    MONTH = 1,
+    YEAR = 2,
+    DECADE = 3
+}
+export declare enum DatePart {
+    NOW = "$now",
+    MINUTE = "$minute",
+    HOUR = "$hour",
+    DAY = "$day",
+    WEEK = "$week",
+    MONTH = "$month",
+    QUARTER = "$quarter",
+    YEAR = "$year",
+    DECADE = "$decade"
+}
+export interface BaseProps {
+    min?: DateLike;
+    max?: DateLike;
+    withTime?: boolean;
+    showHijriToggle?: boolean;
+    dateDisabled?: DateLike[] | ((date: Date) => boolean);
+}
+export interface DateProps extends BaseProps, CssProp, TestProps {
+    value?: DateLike;
+    onChange?: (date: string) => void;
+}
+export interface RangeProps extends BaseProps, CssProp, TestProps {
+    value?: [start: DateLike, end: DateLike];
+    onChange?: (dates: [start: string, end: string]) => void;
+    presets?: Record<string, [DateLike, DateLike]>;
+}
+export interface EventType<D = DateLike> {
+    label: string;
+    icon?: string;
+    start: D;
+    end: D;
+    hijri?: boolean;
+}
+export interface PresetType {
+    value: string;
+    label: string;
+}
+export interface SuperDateProps {
+    as?: "button" | "chip";
+    color?: ColorType;
+    variant?: "solid" | "outline" | "link";
+    /**
+     * relative date value
+     */
+    value?: string;
+    /**
+     * change handler
+     */
+    onChange?: (value: string, dates: [string, string]) => void;
+    /**
+     * list of calendar events
+     */
+    events?: EventType[];
+    /**
+     * list of relative presets
+     *
+     * {value:'$year-5|$year', label:'last 5 years'}
+     */
+    presets?: PresetType[];
+}

package/dist/types/utils/dateUtil.d.ts

@@ -0,0 +1,30 @@
+import { PageType, type DateLike } from "../types";
+export declare namespace DateUtil {
+    const format: (date?: DateLike, fmt?: string, locale?: string, isHijri?: boolean) => string;
+    const isRelative: (date: DateLike) => date is string;
+    const isRelativeRange: (date: DateLike) => date is string;
+    const startOfDay: (date?: Date, isHijri?: boolean) => Date;
+    const startOfWeek: (date: Date, isHijri?: boolean) => Date;
+    const startOfMonth: (date: Date, isHijri?: boolean) => Date;
+    const startOfYear: (date: Date, isHijri?: boolean) => Date;
+    const startOfDecade: (date: Date, isHijri?: boolean) => Date;
+    const startOfCentury: (date: Date, isHijri?: boolean) => Date;
+    const endOfDay: (date?: Date, isHijri?: boolean) => Date;
+    const endOfWeek: (date: Date, isHijri?: boolean) => Date;
+    const endOfMonth: (date: Date, isHijri?: boolean) => Date;
+    const endOfYear: (date: Date, isHijri?: boolean) => Date;
+    const endOfDecade: (date: Date, isHijri?: boolean) => Date;
+    const endOfCentury: (date: Date, isHijri?: boolean) => Date;
+    const addDays: (date: Date, d: number, isHijri?: boolean) => Date;
+    const addWeeks: (date: Date, d: number, isHijri?: boolean) => Date;
+    const addMonths: (date: Date, d: number, isHijri?: boolean) => Date;
+    const addYears: (date: Date, d: number, isHijri?: boolean) => Date;
+    const getWeek: (date: Date, locale: string, isHijri?: boolean) => string;
+    const isSameMonth: (date: Date, compare: Date, isHijri?: boolean) => boolean;
+    const isSameYear: (date: Date, compare: Date, isHijri?: boolean) => boolean;
+    const isDisabled: (date: Date, page: PageType, min?: DateLike, max?: DateLike) => boolean;
+    const parseDate: (datelike: string) => Date;
+    const parseRange: (datelike: string) => [Date, Date];
+    const relativeTooltip: (datelike?: string, isHijri?: boolean) => string;
+    const relativeLabel: (datelike?: string, isHijri?: boolean) => string | undefined;
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@react-fabric/date",
+  "version": "1.0.0-beta.0",
+  "description": "RUF: Date package",
+  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
+  "license": "MIT",
+  "repository": "https://github.com/adarshpastakia/react-ui-framework/tree/main/packages/date",
+  "source": "src/index.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "directories": {
+    "src": "src",
+    "test": "tests"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "makelink": "yarn link",
+    "removelink": "yarn unlink",
+    "prebuild": "rm -rf ./dist",
+    "build:dts": "tsc -p ./tsconfig.build.json",
+    "build:rollup": "rollup -c ../../rollup.config.mjs",
+    "build": "npm-run-all -p build:rollup build:dts",
+    "watch:dts": "tsc -w -p ./tsconfig.build.json",
+    "watch:rollup": "rollup -w -c ../../rollup.config.mjs",
+    "watch": "npm-run-all -p watch:rollup watch:dts"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.26.24",
+    "@react-fabric/core": "^1.0.0-beta.0",
+    "@react-fabric/form": "^1.0.0-beta.0",
+    "@react-fabric/utilities": "^1.0.0-beta.0",
+    "classnames": "^2.5.1",
+    "date-fns": "^4.0.0",
+    "resize-observer-polyfill": "^1.5.1"
+  },
+  "peerDependencies": {
+    "i18next": "^23.15.1",
+    "react": ">=18.0.0 <20.0.0",
+    "react-dom": ">=18.0.0 <20.0.0",
+    "react-i18next": "^15.0.2"
+  },
+  "devDependencies": {
+    "@types/react-color": "^3.0.12"
+  },
+  "engines": {
+    "node": ">=18.12.0",
+    "npm": ">=8.19.0"
+  },
+  "gitHead": "83fa79064b1d57e71149005432192d506810bbda"
+}

package/src/components/Date.module.css

@@ -0,0 +1,75 @@
+/*
+ * 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.
+ */
+
+@layer comp {
+  .dateHeader {
+    box-shadow: 0 -1px 0 theme(colors.tint.200/50%) inset;
+  }
+
+  .timeSlider {
+    height: 11.25rem;
+
+    &::before,
+    &::after {
+      content: "";
+      z-index: 10;
+      display: block;
+      box-shadow: 0 0 3rem 0.25rem theme(colors.tint.600);
+    }
+
+    &::before {
+      position: sticky;
+      top: 0;
+    }
+
+    &::after {
+      position: sticky;
+      bottom: 0;
+    }
+
+    & > :first-child,
+    & > :last-child {
+      height: calc(50% - 0.75rem);
+    }
+
+    & [data-skew="1"] > div {
+      transform: scaleY(0.9);
+      opacity: 0.9;
+    }
+
+    & [data-skew="2"] > div {
+      transform: scaleY(0.75);
+      opacity: 0.75;
+    }
+
+    & [data-skew="3"] > div {
+      transform: scaleY(0.65);
+      opacity: 0.65;
+    }
+
+    & [data-skew="4"] > div {
+      transform: scaleY(0.5);
+      opacity: 0.5;
+    }
+  }
+}

package/src/components/DateCell.tsx

@@ -0,0 +1,181 @@
+/*
+ * 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 { isArray } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  isAfter,
+  isBefore,
+  isSameDay,
+  isSameMonth,
+  isSameYear,
+  startOfDecade,
+} from "date-fns";
+import i18next from "i18next";
+import { useMemo } from "react";
+import { PageType } from "../types";
+import { DateUtil } from "../utils/dateUtil";
+
+export interface DateCellProps {
+  date: Date;
+  page: PageType;
+  selected?: Date | [Date, Date];
+  hilight?: [Date, Date];
+  isHijri?: boolean;
+  isMuted?: boolean;
+  className?: string;
+  selectDate?: (date: Date) => void;
+  changePageDate?: (date: Date) => void;
+  mouseOver?: (date: Date) => void;
+  dateDisabled?: (date: Date) => boolean;
+}
+
+export const DateCell = ({
+  date = new Date(),
+  isMuted = false,
+  ...props
+}: DateCellProps) => {
+  const {
+    page,
+    selected,
+    hilight,
+    isHijri,
+    className,
+    selectDate,
+    changePageDate,
+    mouseOver,
+    dateDisabled,
+  } = props;
+
+  const isToday = useMemo(() => isSameDay(date, new Date()), [date]);
+  const isSelected = useMemo(
+    () => selected && !isArray(selected) && isSameDay(date, selected),
+    [date, page, selected],
+  );
+
+  const isMarked = useMemo(() => {
+    switch (page) {
+      case PageType.MONTH:
+        return selected && !isArray(selected) && isSameMonth(date, selected);
+      case PageType.YEAR:
+        return selected && !isArray(selected) && isSameYear(date, selected);
+      case PageType.DECADE:
+        return (
+          selected &&
+          !isArray(selected) &&
+          isSameYear(startOfDecade(date), startOfDecade(selected))
+        );
+    }
+  }, [date, page, selected]);
+
+  const isHilightEdge = useMemo(() => {
+    if (!isMuted) {
+      if (hilight) {
+        return isSameDay(date, hilight[0]);
+      } else if (Array.isArray(selected)) {
+        const [start, end] = selected;
+        let hilight: string | false = false;
+        if (isSameDay(date, start) && isSameDay(date, end))
+          hilight = "startend";
+        else if (isSameDay(date, start)) hilight = "start";
+        else if (isSameDay(date, end)) hilight = "end";
+        return hilight;
+      }
+    }
+  }, [date, hilight, selected, isMuted]);
+
+  const isHilight = useMemo(() => {
+    if (!isMuted) {
+      if (hilight) {
+        const [start, end] = hilight;
+        if (isBefore(start, end)) {
+          return (
+            isAfter(date, start) &&
+            isBefore(date, DateUtil.addDays(end, 1, isHijri))
+          );
+        } else {
+          return (
+            isBefore(date, start) &&
+            isAfter(date, DateUtil.addDays(end, -1, isHijri))
+          );
+        }
+      } else if (Array.isArray(selected)) {
+        const [start, end] = selected;
+        return (
+          isAfter(date, DateUtil.startOfDay(start, isHijri)) &&
+          isBefore(date, DateUtil.startOfDay(end, isHijri))
+        );
+      }
+    }
+  }, [isMuted, hilight, selected, date, isHijri]);
+
+  const isDisabled = useMemo(
+    () => !!isSelected || dateDisabled?.(date),
+    [date, dateDisabled, isSelected],
+  );
+
+  return (
+    <div
+      role="none"
+      className={classNames(
+        "p-1 m-px text-sm text-center rounded",
+        className,
+        !isDisabled && isMuted && "text-tint-500",
+        (isToday || isMarked) &&
+          "underline underline-offset-4 text-primary-700",
+        (!!isSelected || isHilightEdge) && "bg-primary-400 text-white",
+        isHilightEdge === "start" && "rounded-e-none",
+        isHilightEdge === "end" && "rounded-s-none",
+        isHilight && "bg-primary-50 rounded-none",
+        !isDisabled &&
+          "cursor-pointer hover:bg-primary-100 hover:text-primary-700",
+        isDisabled && "text-tint-100 cursor-not-allowed",
+      )}
+      onFocus={() => hilight && page === PageType.DATE && mouseOver?.(date)}
+      onMouseOver={() => hilight && page === PageType.DATE && mouseOver?.(date)}
+      onClick={() =>
+        !isDisabled &&
+        (page === PageType.DATE ? selectDate?.(date) : changePageDate?.(date))
+      }
+    >
+      {page === PageType.DATE &&
+        DateUtil.format(date, "d", i18next.language, isHijri)}
+      {page === PageType.MONTH &&
+        DateUtil.format(date, "MMM", i18next.language, isHijri)}
+      {page === PageType.YEAR &&
+        DateUtil.format(date, "yyyy", i18next.language, isHijri)}
+      {page === PageType.DECADE &&
+        `${DateUtil.format(
+          DateUtil.startOfDecade(date, isHijri),
+          "yyyy",
+          i18next.language,
+          isHijri,
+        )}-${DateUtil.format(
+          DateUtil.endOfDecade(date, isHijri),
+          "yy",
+          i18next.language,
+          isHijri,
+        )}`}
+    </div>
+  );
+};

package/src/components/DateHeader.tsx

@@ -0,0 +1,223 @@
+/*
+ * 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, CoreIcons } from "@react-fabric/core";
+import classNames from "classnames";
+import { addDays, isAfter, isBefore } from "date-fns";
+import i18next from "i18next";
+import { useMemo } from "react";
+import { type DateLike, PageType } from "../types";
+import { DateUtil } from "../utils/dateUtil";
+
+interface Props {
+  min?: DateLike;
+  max?: DateLike;
+  pageDate: Date;
+  page: PageType;
+  isHijri?: boolean;
+  hidePrevious?: boolean;
+  hideNext?: boolean;
+  changePage: (page: PageType) => void;
+  changePageDate: (date: Date) => void;
+}
+
+export const DateHeader = (props: Props) => {
+  const {
+    page,
+    pageDate = new Date(),
+    changePage,
+    changePageDate,
+    hideNext,
+    hidePrevious,
+    min,
+    max,
+    isHijri = false,
+  } = props;
+
+  const headLabel = useMemo(() => {
+    switch (page) {
+      case PageType.DATE:
+        return DateUtil.format(pageDate, "MMM yyyy", i18next.language, isHijri);
+      case PageType.MONTH:
+        return DateUtil.format(pageDate, "yyyy", i18next.language, isHijri);
+      case PageType.YEAR:
+        return `${DateUtil.format(
+          DateUtil.startOfDecade(pageDate, isHijri),
+          "yyyy",
+          i18next.language,
+          isHijri,
+        )} - ${DateUtil.format(
+          DateUtil.endOfDecade(pageDate, isHijri),
+          "yyyy",
+          i18next.language,
+          isHijri,
+        )}`;
+      case PageType.DECADE:
+        return `${DateUtil.format(
+          DateUtil.startOfCentury(pageDate, isHijri),
+          "yyyy",
+          i18next.language,
+          isHijri,
+        )} - ${DateUtil.format(
+          DateUtil.endOfCentury(pageDate, isHijri),
+          "yyyy",
+          i18next.language,
+          isHijri,
+        )}`;
+    }
+  }, [i18next.language, isHijri, page, pageDate]);
+
+  const [startPage, endPage] = useMemo(() => {
+    if (page === PageType.DATE) {
+      const dateBefore = addDays(DateUtil.startOfYear(pageDate, isHijri), -1);
+      const dateAfter = addDays(DateUtil.endOfYear(pageDate, isHijri), 1);
+
+      return [
+        min && isBefore(dateBefore, min) ? null : dateBefore,
+        max && isAfter(dateAfter, max) ? null : dateAfter,
+      ];
+    }
+    if (page === PageType.MONTH) {
+      const dateBefore = addDays(DateUtil.startOfDecade(pageDate, isHijri), -1);
+      const dateAfter = addDays(DateUtil.endOfDecade(pageDate, isHijri), 1);
+
+      return [
+        min && isBefore(dateBefore, min) ? null : dateBefore,
+        max && isAfter(dateAfter, max) ? null : dateAfter,
+      ];
+    }
+    if (page === PageType.YEAR) {
+      const dateBefore = addDays(
+        DateUtil.startOfCentury(pageDate, isHijri),
+        -1,
+      );
+      const dateAfter = addDays(DateUtil.endOfCentury(pageDate, isHijri), 1);
+
+      return [
+        min && isBefore(dateBefore, min) ? null : dateBefore,
+        max && isAfter(dateAfter, max) ? null : dateAfter,
+      ];
+    }
+    return [];
+  }, [page, min, max, pageDate, isHijri]);
+
+  const [previousPage, nextPage] = useMemo(() => {
+    if (page === PageType.DATE) {
+      const dateBefore = addDays(DateUtil.startOfMonth(pageDate, isHijri), -1);
+      const dateAfter = addDays(DateUtil.endOfMonth(pageDate, isHijri), 1);
+      return [
+        min && isBefore(dateBefore, min) ? null : dateBefore,
+        max && isAfter(dateAfter, max) ? null : dateAfter,
+      ];
+    }
+    if (page === PageType.MONTH) {
+      const dateBefore = addDays(DateUtil.startOfYear(pageDate, isHijri), -1);
+      const dateAfter = addDays(DateUtil.endOfYear(pageDate, isHijri), 1);
+      return [
+        min && isBefore(dateBefore, min) ? null : dateBefore,
+        max && isAfter(dateAfter, max) ? null : dateAfter,
+      ];
+    }
+    if (page === PageType.YEAR) {
+      const dateBefore = addDays(DateUtil.startOfDecade(pageDate, isHijri), -1);
+      const dateAfter = addDays(DateUtil.endOfDecade(pageDate, isHijri), 1);
+
+      return [
+        min && isBefore(dateBefore, min) ? null : dateBefore,
+        max && isAfter(dateAfter, max) ? null : dateAfter,
+      ];
+    }
+    if (page === PageType.DECADE) {
+      const dateBefore = addDays(
+        DateUtil.startOfCentury(pageDate, isHijri),
+        -1,
+      );
+      const dateAfter = addDays(DateUtil.endOfCentury(pageDate, isHijri), 1);
+
+      return [
+        min && isBefore(dateBefore, min) ? null : dateBefore,
+        max && isAfter(dateAfter, max) ? null : dateAfter,
+      ];
+    }
+    return [];
+  }, [page, min, max, pageDate, isHijri]);
+
+  return (
+    <div className="flex flex-nowrap items-center area-head" data-page={page}>
+      {startPage !== undefined && (
+        <Button
+          icon={CoreIcons.chevronsLeft}
+          rtlFlip
+          size="sm"
+          variant="link"
+          aria-label="start"
+          disabled={!startPage}
+          className={classNames(hidePrevious && "invisible")}
+          onClick={() => startPage && changePageDate?.(startPage)}
+        />
+      )}
+      <Button
+        icon={CoreIcons.chevronLeft}
+        rtlFlip
+        size="sm"
+        variant="link"
+        aria-label="prev"
+        disabled={!previousPage}
+        className={classNames(hidePrevious && "invisible")}
+        onClick={() => previousPage && changePageDate?.(previousPage)}
+      />
+      <div
+        role="none"
+        onClick={() => changePage(page + 1)}
+        className={classNames(
+          "flex-1 px-2 py-1 text-primary-600 text-center text-sm font-medium truncate",
+          page === PageType.DECADE ? "pointer-events-none" : "cursor-pointer",
+        )}
+      >
+        {headLabel}
+      </div>
+      <Button
+        icon={CoreIcons.chevronRight}
+        rtlFlip
+        size="sm"
+        variant="link"
+        aria-label="next"
+        disabled={!nextPage}
+        className={classNames(hideNext && "invisible")}
+        onClick={() => nextPage && changePageDate?.(nextPage)}
+      />
+      {endPage !== undefined && (
+        <Button
+          icon={CoreIcons.chevronsRight}
+          rtlFlip
+          size="sm"
+          variant="link"
+          aria-label="end"
+          disabled={!endPage}
+          className={classNames(hideNext && "invisible")}
+          onClick={() => endPage && changePageDate?.(endPage)}
+        />
+      )}
+    </div>
+  );
+};