feat: persian calendar (#2645)

* feat: persian calendar

* Update docs

* Update playground

* Playground updates

* Update playground

examples/Jalali.test.tsx → examples/Persian.test.tsx

@@ -3,14 +3,14 @@ import React from "react";
 import { grid } from "@/test/elements";
 import { render } from "@/test/render";
 
-import { Jalali } from "./Jalali";
+import { Persian } from "./Persian";
 
 const today = new Date(2024, 11, 22);
 
 beforeAll(() => jest.setSystemTime(today));
 afterAll(() => jest.useRealTimers());
 
 test("should render دی 1403", () => {
-  render(<Jalali />);
+  render(<Persian />);
   expect(grid("دی 1403")).toBeInTheDocument();
 });

examples/Persian.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+import { DayPicker } from "react-day-picker/persian";
+
+export function Persian() {
+  return <DayPicker mode="single" />;
+}

examples/PersianEn.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+import { DayPicker, getDateLib, enUS } from "react-day-picker/persian";
+
+export function PersianEn() {
+  const [selected, setSelected] = React.useState(new Date());
+  const dateLib = getDateLib({ locale: enUS });
+  return (
+    <DayPicker
+      locale={enUS}
+      mode="single"
+      selected={selected}
+      required
+      onSelect={setSelected}
+      footer={`Selected: ${dateLib.format(selected, "d MMM yyyy")}`}
+    />
+  );
+}

examples/PersianFormatted.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import { grid } from "@/test/elements";
+import { render } from "@/test/render";
+
+import { PersianFormatted } from "./PersianFormatted";
+
+const today = new Date(2024, 11, 22);
+
+beforeAll(() => jest.setSystemTime(today));
+afterAll(() => jest.useRealTimers());
+
+test("should render دی 1403", () => {
+  render(<PersianFormatted />);
+  expect(grid("دی 1403")).toBeInTheDocument();
+});

examples/PersianFormatted.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import { DayPicker, getDateLib } from "react-day-picker/persian";
+
+export function PersianFormatted() {
+  const [selected, setSelected] = React.useState(new Date());
+  const dateLib = getDateLib();
+  return (
+    <DayPicker
+      mode="single"
+      selected={selected}
+      required
+      onSelect={setSelected}
+      footer={`Selected: ${dateLib.format(selected, "yyyy/MM/dd")}`}
+    />
+  );
+}

examples/index.ts

@@ -29,7 +29,6 @@ export * from "./InputRange";
 export * from "./InputTime";
 export * from "./ItalianLabels";
 export * from "./ItalianLabels";
-export * from "./Jalali";
 export * from "./Keyboard";
 export * from "./ModifiersClassnames";
 export * from "./ModifiersCustom";
@@ -46,6 +45,9 @@ export * from "./MultipleMonthsPaged";
 export * from "./NumberingSystem";
 export * from "./OutsideDays";
 export * from "./PastDatesDisabled";
+export * from "./Persian";
+export * from "./PersianFormatted";
+export * from "./PersianEn";
 export * from "./Range";
 export * from "./RangeExcludeDisabled";
 export * from "./RangeLong";

jest.config.ts

@@ -31,7 +31,7 @@ const config: Config.InitialOptions = {
       roots: ["<rootDir>/examples"],
       moduleNameMapper: {
         "@/test/(.*)": ["<rootDir>/test/$1"],
-        "react-day-picker/jalali": ["<rootDir>/src/jalali.tsx"],
+        "react-day-picker/persian": ["<rootDir>/src/persian.tsx"],
         "react-day-picker": ["<rootDir>/src/index.ts"],
         "^(\\.\\.?\\/.+)\\.jsx?$": "$1" // see https://github.com/kulshekhar/ts-jest/issues/1057
       }
@@ -42,7 +42,7 @@ const config: Config.InitialOptions = {
       roots: ["<rootDir>/examples"],
       moduleNameMapper: {
         "@/test/(.*)": ["<rootDir>/test/$1"],
-        "react-day-picker/jalali": ["<rootDir>/dist/cjs/jalali.js"],
+        "react-day-picker/persian": ["<rootDir>/dist/cjs/persian.js"],
         "react-day-picker": ["<rootDir>/dist/cjs/index.js"],
         "../src": ["<rootDir>/dist/cjs"], // allow using same @/test/elements in both env
         "^(\\.\\.?\\/.+)\\.jsx?$": "$1" // see https://github.com/kulshekhar/ts-jest/issues/1057

package.json

@@ -42,6 +42,16 @@
         "default": "./dist/cjs/jalali.js"
       }
     },
+    "./persian": {
+      "import": {
+        "types": "./dist/esm/persian.d.ts",
+        "default": "./dist/esm/persian.js"
+      },
+      "require": {
+        "types": "./dist/cjs/persian.d.ts",
+        "default": "./dist/cjs/persian.js"
+      }
+    },
     "./locale": {
       "import": {
         "types": "./dist/esm/locale.d.ts",

persian.d.ts

@@ -0,0 +1 @@
+export * from "./dist/cjs/persian.d.ts";

persian.js

@@ -0,0 +1,4 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+/* eslint-disable no-undef */
+const persian = require("./dist/cjs/persian.js");
+module.exports = persian;

src/jalali.tsx

@@ -1,39 +1,2 @@
-import React from "react";
-
-import * as jalaliDateLib from "date-fns-jalali";
-import { faIR } from "date-fns-jalali/locale";
-
-import { DayPicker as DayPickerComponent } from "./index.js";
-import type { DayPickerProps } from "./types/props.js";
-
-export function DayPicker(
-  props: DayPickerProps & {
-    /**
-     * The locale to use in the calendar.
-     *
-     * @default `faIR` from `date-fns-jalali`
-     */
-    locale?: DayPickerProps["locale"];
-    /**
-     * The direction of the text in the calendar.
-     *
-     * @default `rtl`
-     */
-    dir?: DayPickerProps["dir"];
-    /**
-     * The date library to use in the calendar.
-     *
-     * @default `jalaliDateLib` from `date-fns-jalali`
-     */
-    dateLib?: DayPickerProps["dateLib"];
-  }
-) {
-  return (
-    <DayPickerComponent
-      {...props}
-      locale={props.locale ?? faIR}
-      dir={props.dir ?? "rtl"}
-      dateLib={props.dateLib ?? jalaliDateLib}
-    />
-  );
-}
+/** @deprecated Import from `react-day-picker/persian` instead. */
+export * from "./persian.js";

src/persian.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+
+import * as dateFnsJalali from "date-fns-jalali";
+import { Locale } from "date-fns-jalali";
+import * as locales from "date-fns-jalali/locale";
+
+import {
+  DateLib,
+  DateLibOptions,
+  DayPicker as DayPickerComponent
+} from "./index.js";
+import type { DayPickerProps } from "./types/props.js";
+
+export const faIR = locales.faIR;
+export const enUS = locales.enUS;
+
+/** Render the Persian Calendar */
+export function DayPicker(
+  props: DayPickerProps & {
+    /**
+     * The locale to use in the calendar.
+     *
+     * @default `faIR`
+     */
+    locale?: Locale;
+    /**
+     * The direction of the text in the calendar.
+     *
+     * @default `rtl`
+     */
+    dir?: DayPickerProps["dir"];
+    /**
+     * The date library to use in the calendar.
+     *
+     * @default `jalaliDateLib` from `date-fns-jalali`
+     */
+    dateLib?: DayPickerProps["dateLib"];
+  }
+) {
+  const dateLib = getDateLib({
+    locale: props.locale,
+    weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
+    firstWeekContainsDate: props.firstWeekContainsDate,
+    useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
+    useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens,
+    timeZone: props.timeZone
+  });
+  return (
+    <DayPickerComponent
+      {...props}
+      locale={props.locale ?? faIR}
+      dir={props.dir ?? "rtl"}
+      dateLib={dateLib}
+    />
+  );
+}
+
+/** Returns the date library used in the calendar. */
+export const getDateLib = (options?: DateLibOptions) => {
+  return new DateLib(options, dateFnsJalali);
+};