feat: export locales from react-day-picker/locale (#2474)

* Add export of locales from react-day-picker/locale

* Update docs, tests and imports

Author: gpbl

examples/ItalianLabels.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import { format } from "date-fns";
-import { it } from "date-fns/locale";
 import { DayPicker } from "react-day-picker";
+import { it } from "react-day-picker/locale";
 
 export function ItalianLabels() {
   return (

examples/NumberingSystem.test.tsx

@@ -4,7 +4,7 @@ import { render, screen } from "@/test/render";
 
 import { NumberingSystem } from "./NumberingSystem";
 
-const today = new Date(2021, 10, 25);
+const today = new Date(2024, 8, 19);
 
 beforeAll(() => jest.setSystemTime(today));
 afterAll(() => jest.useRealTimers());
@@ -14,8 +14,8 @@ beforeEach(() => {
 });
 
 test("should localize the days", () => {
-  expect(screen.getByText("أحد")).toBeInTheDocument();
+  expect(screen.getByText("أربعاء")).toBeInTheDocument();
 });
 test("should localize the week numbers", () => {
-  expect(screen.getByText("٤٥")).toBeInTheDocument();
+  expect(screen.getByText("١٤")).toBeInTheDocument();
 });

package.json

@@ -74,6 +74,20 @@
         "default": "./dist/cjs/jalali.js"
       }
     },
+    "./locale": {
+      "require": {
+        "types": "./dist/cjs/locale.d.ts",
+        "default": "./dist/cjs/locale.js"
+      },
+      "import": {
+        "types": "./dist/esm/locale.d.ts",
+        "default": "./dist/esm/locale.js"
+      },
+      "default": {
+        "types": "./dist/cjs/locale.d.ts",
+        "default": "./dist/cjs/locale.js"
+      }
+    },
     "./style.css": {
       "require": "./src/style.css",
       "import": "./src/style.css",

src/locale.ts

@@ -0,0 +1 @@
+export * from "date-fns/locale";

src/types/props.ts

@@ -357,7 +357,7 @@ export interface PropsBase {
    * localize the calendar.
    *
    * @example
-   *   import { es } from "date-fns/locale";
+   *   import { es } from "react-day-picker/locale";
    *   <DayPicker locale={es} />
    *
    * @defaultValue enUS - The English locale default of `date-fns`.

website/docs/docs/localization.mdx

@@ -12,22 +12,19 @@ Learn how to set the locale, changing the time zone, and adjust other calendar o
 | --------- | ------------------------------------------ | ----------------------------------- |
 | `locale`  | [`Locale`](https://date-fns.org/docs/I18n) | Set the locale. Default is `en-US`. |
 
-### 1. Install date-fns
+DayPicker export the [date-fns](https://date-fns.org) locales for easier calendar localization. To set a different locale, import it from `react-day-picker/locale`.
 
-DayPicker uses the [date-fns](https://date-fns.org) library for calendar localization. To set a different locale, install `date-fns`:
-
-```bash npm2yarn
-npm install date-fns
+```bash ts
+// import the locale object
+import { es } from "react-day-picker/locale";
 ```
 
-### 2. Set a Different Locale
-
-By default, the locale is set to English (US). To localize the calendar, pass a [`Locale`](https://date-fns.org/docs/I18n) object to the `locale` prop.
+By default, the locale is set to English (US). To localize the calendar, pass the imported [`Locale`](https://date-fns.org/docs/I18n) object to the `locale` prop.
 
 For example, to localize the calendar in Spanish, import the `es` locale object from `date-fns` and pass it to the component.
 
 ```tsx
-import { es } from "date-fns/locale";
+import { es } from "react-day-picker/locale";
 
 <DayPicker locale={es} />; // Set the locale to Spanish
 ```
@@ -106,8 +103,6 @@ export function TimeZone() {
 
 ## Calendar Options
 
-## Locale props
-
 | Prop Name               | Type                                          | Description                                                        |
 | ----------------------- | --------------------------------------------- | ------------------------------------------------------------------ |
 | `weekStartsOn`          | `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `7` | Display the days falling into the other months.                    |
@@ -182,8 +177,8 @@ You can set the right-to-left direction and change the locale as needed.
 ```tsx title="./JalaliCalendar.jsx"
 import React from "react";
 
-import { faIR } from "date-fns/locale";
 import { DayPicker } from "react-day-picker/jalali";
+import { faIR } from "react-day-picker/locale";
 
 export function Jalali() {
   return <DayPicker mode="single" locale={faIR} dir="rtl" />;

website/docs/docs/translation.mdx

@@ -30,7 +30,7 @@ The `labels` prop allows you to customize the [ARIA labels](./accessibility.mdx)
 
 ```tsx
 import { format } from "date-fns";
-import { it } from "date-fns/locale";
+import { it } from "react-day-picker/locale";
 
 function ItalianLabels() {
   return (
@@ -89,7 +89,7 @@ The following labels are optional and should work out of the box in most languag
 To set the text direction to right-to-left, use the `dir` prop with the value `rtl`.
 
 ```tsx
-import { arSA } from "date-fns/locale";
+import { arSA } from "react-day-picker/locale";
 
 <DayPicker locale={arSA} dir="rtl" />;
 ```
@@ -130,8 +130,8 @@ For example, to switch to Hindu-Arabic numerals, use the native [`Date.toLocaleS
 
 ```tsx
 import { format } from "date-fns/format";
-import { arSA } from "date-fns/locale";
 import { DayPicker, Formatters } from "react-day-picker";
+import { arSA } from "react-day-picker/locale";
 
 const NU_LOCALE = "ar-u-nu-arab";
 

website/examples-v8/NumberingSystem.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { format } from "date-fns";
-import { arSA } from "date-fns/locale";
+import { arSA } from "react-day-picker/locale";
 
 import {
   DateFormatter,

website/src/pages/playground.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 
 import Layout from "@theme/Layout";
-import * as locales from "date-fns/locale";
 import {
   DateRange,
   DayPicker,
   DayPickerProps,
   isDateRange
 } from "react-day-picker";
+import * as locales from "react-day-picker/locale";
 
 import { BrowserWindow } from "../components/BrowserWindow";
 import { HighlightWithTheme } from "../components/HighlightWithTheme";