Add datePicker in storybook

packages/ui/components/form/datepicker/datepicker.stories.mdx

@@ -0,0 +1,76 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Title,
+  VariantsTable,
+  CustomArgsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import DatePicker from "./DatePicker";
+
+<Meta title="UI/DatePicker" component={DatePicker} />
+
+## Definition
+
+DatePicker is a clickable element that allows the user to select a specific date from the available list in the component.
+
+## Structure
+
+Each DatePicker has a state to determine whether it's disabled or not, and the current selected date.
+
+<CustomArgsTable of={DatePicker} />
+
+<Examples title="DatePicker Variants">
+  <Example title="Default">
+    <DatePicker date={new Date('2023-08-15')} />
+  </Example>
+  <Example title="Disabled">
+    <DatePicker date={new Date('2023-08-15')} disabled={true} />
+  </Example>
+  <Example title="minDate">
+    <DatePicker date={new Date('2023-08-15')} minDate={new Date('2023-08-12')} />
+  </Example>
+</Examples>
+
+<Title offset title="DatePicker" suffix="Variants" />
+
+<Canvas>
+  <Story
+    name="DatePicker"
+    args={{
+      date: new Date('2023-08-15'),
+      minDate: new Date('2023-08-12'),
+      disabled: false,
+      onDatesChange: (newDate) => {
+        console.log(newDate)
+      },
+    }}
+    argTypes={{
+      date: {
+        control: {
+          type: "date",
+        },
+      },
+      disabled: {
+        control: {
+          type: "boolean",
+        },
+      },
+      minDate: {
+        control: {
+          type: "date",
+        },
+      },
+    }}>
+    {({ date, minDate, disabled, onDatesChange }) => (
+      <VariantsTable titles={["Default"]} columnMinWidth={150}>
+        <VariantRow disabled={disabled}>
+          <DatePicker date={date} minDate={minDate} disabled={disabled} onDatesChange={onDatesChange} />
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>