📝(react) illustrate international calendars of DatePicker component

Show international capabilities of the `DatePicker` component using the
`locale` props and the Cunningham provider. Dates would
be automatically displayed in the appropriate calendar system.

.changeset/polite-mails-remain.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+Add calendar system customization in `DatePicker` component

packages/react/src/components/Forms/DatePicker/index.mdx

@@ -122,6 +122,16 @@ When passing an invalid date, for example outside of the valid range, the DatePi
   <Story id="components-forms-datepicker--invalid-value"/>
 </Canvas>
 
+## International calendars
+
+When passing a locale value to the DatePicker components, dates would be automatically displayed in the appropriate calendar system.
+By default, the DatePicker component uses the CunninghamProvider locale.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--custom-locale"/>
+  <Story id="components-forms-datepicker--cunningham-locale"/>
+</Canvas>
+
 ## Props
 
 You can see the list of props below.

packages/react/src/components/Forms/DatePicker/index.stories.tsx

@@ -95,6 +95,26 @@ export const Fullwidth = {
   },
 };
 
+export const CustomLocale = () => (
+  <div style={{ minHeight: "400px" }}>
+    <CunninghamProvider>
+      <DatePicker
+        label="Pick a date"
+        locale="hi-IN-u-ca-indian"
+        defaultValue="2023-06-25"
+      />
+    </CunninghamProvider>
+  </div>
+);
+
+export const CunninghamLocale = () => (
+  <div style={{ minHeight: "400px" }}>
+    <CunninghamProvider currentLocale="fr-FR">
+      <DatePicker label="Pick a date" defaultValue="2023-06-25" />
+    </CunninghamProvider>
+  </div>
+);
+
 export const Controlled = () => {
   const [value, setValue] = useState<StringOrDate | null>("2023-05-26");
   return (