✨(react) add DatePicker component

Based on the Figma DS design by Alex, a mono date-picker
component has been added. It uses react-aria headless ui
component capabilities, with downshift headless ui component.
React-aria was not supporting by default dropdown menus to
select months and years. We could not reuse Popover component
from react-aria because we are not using their headless ui
component for the button one. Clicking on the toggle calendar
button triggers both the button and the popover click outside
events. React-aria button uses a custom onPress props that is
disabled by their popover. Instead, I have implemented a simple
custom hook. This is the first acceptable version of the component.
Some minor user interaction are missing. This first component
doesn't support time selection.

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

@@ -0,0 +1,104 @@
+import { Meta, StoryFn } from "@storybook/react";
+import React, { useState } from "react";
+import { CunninghamProvider } from ":/components/Provider";
+import { Button } from ":/components/Button";
+import { DatePicker } from "./index";
+
+export default {
+  title: "Components/Forms/DatePicker",
+  component: DatePicker,
+} as Meta<typeof DatePicker>;
+
+const Template: StoryFn<typeof DatePicker> = (args) => (
+  <CunninghamProvider>
+    <DatePicker {...args} label="Pick a date" />
+  </CunninghamProvider>
+);
+
+export const Default = () => (
+  <div style={{ minHeight: "400px" }}>
+    <CunninghamProvider>
+      <DatePicker label="Pick a date" />
+    </CunninghamProvider>
+  </div>
+);
+
+export const Disabled = {
+  render: Template,
+  args: { disabled: true },
+};
+
+export const DefaultValue = {
+  render: Template,
+  args: { defaultValue: "2023-05-24" },
+};
+
+export const DisabledValue = {
+  render: Template,
+  args: { disabled: true, defaultValue: "2023-05-24" },
+};
+
+export const Error = {
+  render: Template,
+  args: {
+    defaultValue: "2023-05-24",
+    state: "error",
+    text: "Something went wrong",
+  },
+};
+
+export const Success = {
+  render: Template,
+  args: {
+    defaultValue: "2023-05-24",
+    state: "success",
+    text: "Well done",
+  },
+};
+
+export const MinMaxValue = {
+  render: Template,
+  args: {
+    defaultValue: "2023-05-24",
+    minValue: "2023-04-23",
+    maxValue: "2023-06-23",
+  },
+};
+
+export const InvalidValue = {
+  render: Template,
+  args: {
+    defaultValue: "2023-02-24",
+    minValue: "2023-04-23",
+    maxValue: "2023-06-23",
+  },
+};
+
+export const WithText = {
+  render: Template,
+  args: {
+    defaultValue: "2023-05-24",
+    text: "This is a text, you can display anything you want here like warnings, information or errors.",
+  },
+};
+
+export const Controlled = () => {
+  const [value, setValue] = useState<string | Date>("2023-05-26");
+  return (
+    <CunninghamProvider>
+      <div>
+        <div>
+          Value: <span>{value?.toString()}</span>
+        </div>
+        <DatePicker
+          label="Pick a date"
+          value={value}
+          onChange={(e: string) => {
+            setValue(e);
+          }}
+        />
+        <Button onClick={() => setValue("")}>Reset</Button>
+      </div>
+    </CunninghamProvider>
+  );
+};