From d8ce7bc3f9d2f786d283dd2d7b0c54a1b43e23b9 Mon Sep 17 00:00:00 2001 From: Giampaolo Bellavite Date: Thu, 19 Sep 2024 08:29:29 -0500 Subject: [PATCH] feat: export locales from react-day-picker/locale (#2474) * Add export of locales from react-day-picker/locale * Update docs, tests and imports --- examples/ItalianLabels.tsx | 2 +- examples/NumberingSystem.test.tsx | 6 +++--- package.json | 14 ++++++++++++++ src/locale.ts | 1 + src/types/props.ts | 2 +- website/docs/docs/localization.mdx | 19 +++++++------------ website/docs/docs/translation.mdx | 6 +++--- website/examples-v8/NumberingSystem.tsx | 2 +- website/src/pages/playground.tsx | 2 +- 9 files changed, 32 insertions(+), 22 deletions(-) create mode 100644 src/locale.ts diff --git a/examples/ItalianLabels.tsx b/examples/ItalianLabels.tsx index 87e4a5cdb0..307e763675 100644 --- a/examples/ItalianLabels.tsx +++ b/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 ( diff --git a/examples/NumberingSystem.test.tsx b/examples/NumberingSystem.test.tsx index a8c78b4c38..221259ebd8 100644 --- a/examples/NumberingSystem.test.tsx +++ b/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(); }); diff --git a/package.json b/package.json index b5902417e8..498cbaa2c5 100644 --- a/package.json +++ b/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", diff --git a/src/locale.ts b/src/locale.ts new file mode 100644 index 0000000000..ca4f05ba5d --- /dev/null +++ b/src/locale.ts @@ -0,0 +1 @@ +export * from "date-fns/locale"; diff --git a/src/types/props.ts b/src/types/props.ts index a932615590..3803ecfeb8 100644 --- a/src/types/props.ts +++ b/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"; * * * @defaultValue enUS - The English locale default of `date-fns`. diff --git a/website/docs/docs/localization.mdx b/website/docs/docs/localization.mdx index f81b3b7f93..4beaee3b2d 100644 --- a/website/docs/docs/localization.mdx +++ b/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"; ; // 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 ; diff --git a/website/docs/docs/translation.mdx b/website/docs/docs/translation.mdx index 9eabcb4fa6..606c0ff0d2 100644 --- a/website/docs/docs/translation.mdx +++ b/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"; ; ``` @@ -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"; diff --git a/website/examples-v8/NumberingSystem.tsx b/website/examples-v8/NumberingSystem.tsx index 7d0efd7707..c9f37ceac6 100644 --- a/website/examples-v8/NumberingSystem.tsx +++ b/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, diff --git a/website/src/pages/playground.tsx b/website/src/pages/playground.tsx index 81abed59cb..026787de91 100644 --- a/website/src/pages/playground.tsx +++ b/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";