📝(react) add DateRangePicker documentation

Provide a concise example using the range selection
in a controlled way. Most of DateRangePicker props
are similar to the DatePicker.

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

@@ -1,6 +1,7 @@
 
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
 import { DatePicker } from "./index";
+import { DateRangePicker } from "./index";
 
 <Meta title="Components/Forms/DatePicker/Doc" component={DatePicker}/>
 
@@ -16,6 +17,15 @@ UI components provided by [React-Spectrum](https://react-spectrum.adobe.com/reac
 
 ## Basic
 
+<Source
+  language='ts'
+  dark
+  format={false}
+  code={`
+  <DatePicker label="Pick a date" />
+  `}
+/>
+
 <Canvas>
   <Story id="components-forms-datepicker--default"/>
 </Canvas>
@@ -27,6 +37,38 @@ You can use the following props to change the default value of the DatePicker co
   <Story id="components-forms-datepicker--default-value"/>
 </Canvas>
 
+## Range
+
+<Source
+  language='ts'
+  dark
+  format={false}
+  code={`
+  <DateRangePicker startLabel="Start date" endLabel="Due date" name="datepicker" />
+  `}
+/>
+
+When using it within a form, you'll access its values using separate inputs for the start and end values. The start input's
+name will be the `DateRangePicker`'s name suffixed by `_start` and the end input's name will be the `DateRangePicker`'s name suffixed by `_end`.
+Ex: If a `DateRangePicker` is named `"subscription"`, you would access its values as follow:
+
+<Source
+  language='ts'
+  dark
+  format={false}
+  code={`
+
+  formData = {
+    datepickerStart: data.get("subscription_start"),
+    datepickerEnd: data.get("subscription_end"),
+  };
+  `}
+/>
+
+<Canvas>
+  <Story id="components-forms-datepicker--range-default"/>
+</Canvas>
+
 
 ## States
 
@@ -61,6 +103,7 @@ using the component in a controlled way.
 
 <Canvas sourceState="shown">
   <Story id="components-forms-datepicker--controlled"/>
+  <Story id="components-forms-datepicker--range-controlled"/>
 </Canvas>
 
 ## MinValue / MaxValue
@@ -83,8 +126,14 @@ When passing an invalid date, for example outside of the valid range, the DatePi
 
 You can see the list of props below.
 
+### DatePicker
+
 <ArgsTable of={DatePicker} />
 
+### DateRangePicker
+
+<ArgsTable of={DateRangePicker} />
+
 
 ## Design tokens
 

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

@@ -2,8 +2,12 @@ import { Meta, StoryFn } from "@storybook/react";
 import React, { useState } from "react";
 import { CunninghamProvider } from ":/components/Provider";
 import { Button } from ":/components/Button";
+import DateRangePicker from ":/components/Forms/DatePicker/DateRangePicker";
 import DatePicker from ":/components/Forms/DatePicker/DatePicker";
-import { StringOrDate } from ":/components/Forms/DatePicker/types";
+import {
+  StringOrDate,
+  StringsOrDateRange,
+} from ":/components/Forms/DatePicker/types";
 
 export default {
   title: "Components/Forms/DatePicker",
@@ -103,3 +107,48 @@ export const Controlled = () => {
     </CunninghamProvider>
   );
 };
+
+export const RangeDefault = () => {
+  return (
+    <div style={{ minHeight: "400px" }}>
+      <CunninghamProvider>
+        <DateRangePicker startLabel="Start date" endLabel="Due date" />
+      </CunninghamProvider>
+    </div>
+  );
+};
+
+export const RangeDefaultValue = () => {
+  return (
+    <CunninghamProvider>
+      <DateRangePicker
+        startLabel="Start date"
+        endLabel="Due date"
+        defaultValue={["2023-05-23", "2023-06-23"]}
+      />
+    </CunninghamProvider>
+  );
+};
+
+export const RangeControlled = () => {
+  const [value, setValue] = useState<StringsOrDateRange | null>([
+    "2023-05-23",
+    "2023-06-23",
+  ]);
+  return (
+    <div>
+      <CunninghamProvider>
+        <div>Value: {value?.join("  ")}</div>
+        <DateRangePicker
+          startLabel="Start date"
+          endLabel="Due date"
+          minValue="2023-01-23"
+          maxValue="2023-08-23"
+          value={value}
+          onChange={(e) => setValue(e)}
+        />
+        <Button onClick={() => setValue(null)}>Reset</Button>
+      </CunninghamProvider>
+    </div>
+  );
+};