✨(react) internationalize calendar system in DatePicker

Component was lacking some customization capabilities.
Using the browser calendar system wasn't enough modular.
This introduces a `locale` props, that allows a higher
customization of the component. By default, the calendar
system of the DatePicker is synchronized with the Cunningham
Provider.

packages/react/src/components/Forms/DatePicker/DatePicker.spec.tsx

@@ -1131,4 +1131,160 @@ describe("<DatePicker/>", () => {
     await user.keyboard("{ArrowRight}");
     expectFocusedMonthToBeEqual(nextMonthValue);
   });
+
+  it("uses the locale props calendar system", async () => {
+    const user = userEvent.setup();
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          locale="hi-IN-u-ca-indian"
+          defaultValue="2023-06-25"
+        />
+      </CunninghamProvider>
+    );
+
+    const input = (await screen.findAllByRole("button"))[0];
+
+    // Toggle button opens the calendar.
+    await user.click(input);
+    expectCalendarToBeOpen();
+    expectDateFieldToBeDisplayed();
+
+    // Make sure dateField is in the right locale
+    const dateFieldContent = screen.getByRole("presentation").textContent;
+    expect(dateFieldContent).eq("4/4/1945 शक");
+
+    // Make sure month is in the right locale
+    const focusedMonth = screen
+      .getByRole("combobox", {
+        name: "Select a month",
+      })!
+      .textContent?.replace("arrow_drop_down", "");
+    expect(focusedMonth).eq("आषाढ़");
+
+    // Make sure year is in the right locale
+    const focusedYear = screen
+      .getByRole("combobox", {
+        name: "Select a year",
+      })!
+      .textContent?.replace("arrow_drop_down", "");
+    expect(focusedYear).eq("1945 शक");
+
+    // Make sure weekdays are in the right locale
+    screen.getByText("रवि");
+    screen.getByText("सोम");
+    screen.getByText("मंगल");
+    screen.getByText("बुध");
+    screen.getByText("गुरु");
+    screen.getByText("शुक्र");
+    screen.getByText("शनि");
+  });
+
+  it("uses the cunningham provider props calendar systems", async () => {
+    const user = userEvent.setup();
+    render(
+      <CunninghamProvider currentLocale="fr-FR">
+        <DatePicker label="Pick a date" defaultValue="2023-06-25" />
+      </CunninghamProvider>
+    );
+
+    const input = (await screen.findAllByRole("button"))[0];
+
+    // Toggle button opens the calendar.
+    await user.click(input);
+    expectCalendarToBeOpen();
+    expectDateFieldToBeDisplayed();
+
+    // Make sure dateField is in the right locale
+    const dateFieldContent = screen.getByRole("presentation").textContent;
+    expect(dateFieldContent).eq("25/06/2023");
+
+    // Make sure month is in the right locale
+    const focusedMonth = screen
+      .getByRole("combobox", {
+        name: "Sélectionner un mois",
+      })!
+      .textContent?.replace("arrow_drop_down", "");
+    expect(focusedMonth).eq("juin");
+
+    // Make sure year is in the right locale
+    const focusedYear = screen
+      .getByRole("combobox", {
+        name: "Sélectionner une année",
+      })!
+      .textContent?.replace("arrow_drop_down", "");
+    expect(focusedYear).eq("2023");
+
+    // Make sure weekdays are in the right locale
+    screen.getByText("lun.");
+    screen.getByText("mar.");
+    screen.getByText("mer.");
+    screen.getByText("jeu.");
+    screen.getByText("ven.");
+    screen.getByText("sam.");
+    screen.getByText("dim.");
+  });
+
+  it("makes sure the locale props override the cunningham provider calendar system", async () => {
+    const user = userEvent.setup();
+    render(
+      <CunninghamProvider currentLocale="fr-FR">
+        <DatePicker
+          label="Pick a date"
+          defaultValue="2023-06-25"
+          locale="hi-IN-u-ca-indian"
+        />
+      </CunninghamProvider>
+    );
+
+    const input = (await screen.findAllByRole("button"))[0];
+
+    // Toggle button opens the calendar.
+    await user.click(input);
+    expectCalendarToBeOpen();
+    expectDateFieldToBeDisplayed();
+
+    // Make sure dateField is in the right locale
+    const dateFieldContent = screen.getByRole("presentation").textContent;
+    expect(dateFieldContent).eq("4/4/1945 शक");
+
+    // Make sure month is in the right locale
+    // And aria-label uses the right translation.
+    const focusedMonth = screen
+      .getByRole("combobox", {
+        name: "Sélectionner un mois",
+      })!
+      .textContent?.replace("arrow_drop_down", "");
+    expect(focusedMonth).eq("आषाढ़");
+
+    // Make sure year is in the right locale
+    // And aria-label uses the right translation.
+    const focusedYear = screen
+      .getByRole("combobox", {
+        name: "Sélectionner une année",
+      })!
+      .textContent?.replace("arrow_drop_down", "");
+    expect(focusedYear).eq("1945 शक");
+
+    // Make sure weekdays are in the right locale
+    screen.getByText("रवि");
+    screen.getByText("सोम");
+    screen.getByText("मंगल");
+    screen.getByText("बुध");
+    screen.getByText("गुरु");
+    screen.getByText("शुक्र");
+    screen.getByText("शनि");
+  });
+
+  it("has a wrong locale props", async () => {
+    vi.spyOn(console, "error").mockImplementation(() => undefined);
+    expect(() =>
+      render(
+        <CunninghamProvider>
+          <DatePicker label="Pick a date" locale="111" />
+        </CunninghamProvider>
+      )
+    ).toThrow("Incorrect locale information provided");
+  });
 });

packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx

@@ -11,6 +11,7 @@ import {
 } from "@react-stately/datepicker";
 import { DateRangePickerAria, DatePickerAria } from "@react-aria/datepicker";
 import classNames from "classnames";
+import { I18nProvider } from "@react-aria/i18n";
 import { Button } from ":/components/Button";
 import { Popover } from ":/components/Popover";
 import { Field, FieldProps } from ":/components/Forms/Field";
@@ -27,6 +28,7 @@ export type DatePickerAuxSubProps = FieldProps & {
   maxValue?: StringOrDate;
   disabled?: boolean;
   name?: string;
+  locale?: string;
 };
 
 export type DatePickerAuxProps = PropsWithChildren &
@@ -58,13 +60,14 @@ const DatePickerAux = forwardRef(
       calendar,
       children,
       name,
+      locale,
       disabled = false,
       optionalClassName,
       ...props
     }: DatePickerAuxProps,
     ref: Ref<HTMLDivElement>
   ) => {
-    const { t } = useCunningham();
+    const { t, currentLocale } = useCunningham();
     const pickerRef = useRef<HTMLDivElement>(null);
 
     const isDateInvalid = useMemo(
@@ -79,6 +82,7 @@ const DatePickerAux = forwardRef(
       pickerProps.buttonProps;
 
     return (
+      <I18nProvider locale={locale || currentLocale}>
         <Field {...props}>
           <div
             ref={pickerRef}
@@ -87,7 +91,9 @@ const DatePickerAux = forwardRef(
               "c__date-picker--invalid": isDateInvalid,
               "c__date-picker--success": props.state === "success",
               "c__date-picker--focused":
-              !isDateInvalid && !disabled && (pickerState.isOpen || isFocused),
+                !isDateInvalid &&
+                !disabled &&
+                (pickerState.isOpen || isFocused),
             })}
           >
             <div
@@ -166,6 +172,7 @@ const DatePickerAux = forwardRef(
             )}
           </div>
         </Field>
+      </I18nProvider>
     );
   }
 );