chore: add datePicker in storybook (CALCOM-10760) (#10784)

* Update datepicker.stories.mdx

* Update datepicker.stories.mdx

* Requested changes

---------

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>

packages/features/calendars/DatePicker.tsx

@@ -69,7 +69,11 @@ export const Day = ({
       {...props}>
       {date.date()}
       {date.isToday() && (
-        <span className="absolute left-1/2 top-1/2 flex h-[5px] w-[5px] -translate-x-1/2 translate-y-[8px] items-center justify-center rounded-full bg-white align-middle sm:translate-y-[12px]">
+        <span
+          className={classNames(
+            "bg-brand-default absolute left-1/2 top-1/2 flex h-[5px] w-[5px] -translate-x-1/2 translate-y-[8px] items-center justify-center rounded-full align-middle sm:translate-y-[12px]",
+            active && "invert"
+          )}>
           <span className="sr-only">{t("today")}</span>
         </span>
       )}

packages/features/calendars/datepicker.stories.mdx

@@ -0,0 +1,78 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Title,
+  VariantsTable,
+  CustomArgsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+import dayjs from "@calcom/dayjs";
+
+import DatePicker from "./DatePicker";
+
+<Meta title="UI/DatePicker" component={DatePicker} />
+
+<Title title="DatePicker" suffix="Brief" subtitle="Version 1.0 — Last Update: 21 Aug 2023" />
+
+## Definition
+
+DatePicker is a clickable element that allows the user to select a specific date from the available list in the component.
+
+## Structure
+
+DatePicker component offers a complete and customizable element for the user to select a specific date in the calendar.
+
+<CustomArgsTable of={DatePicker} />
+
+<Examples title="DatePicker">
+  <Example title="Default">
+    <DatePicker />
+  </Example>
+</Examples>
+
+<Title offset title="DatePicker" suffix="Variants" />
+
+<Canvas>
+  <Story
+    name="DatePicker"
+    args={{
+      weekStart: 0,
+      excludedDates: ["2023-08-20", "2023-08-21"],
+      minDate: dayjs("2023-07-23").utc(),
+      maxDate: dayjs("2023-08-30").utc(),
+      selected: dayjs("2023-08-30").utc(),
+      isLoading: false,
+      onChange: (newDate) => console.log(newDate),
+      onMonthChange: (newMonth) => console.log(newMonth),
+    }}
+    argTypes={{
+      weekStart: {
+        control: {
+          type: "inline-radio",
+          options: [0, 1, 2, 3, 4, 5, 6],
+        },
+      },
+      selected: {
+        control: "date"
+      }
+    }}>
+    {({ weekStart, excludedDates, onChange, onMonthChange, minDate, maxDate, selected, isLoading }) => (
+      <VariantsTable titles={["Default"]} columnMinWidth={150}>
+        <VariantRow variant="Default">
+          <DatePicker
+            weekStart={weekStart}
+            excludedDates={excludedDates}
+            minDate={dayjs(minDate).utc()}
+            maxDate={dayjs(maxDate).utc()}
+            onChange={onChange}
+            onMonthChange={onMonthChange}
+            selected={dayjs(selected)}
+            isLoading={isLoading}
+          />
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>