From 29557d7597bb69bc24727211a8910f45621339cf Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Tue, 14 May 2024 15:39:23 -0400
Subject: [PATCH] [6/n][Storybook] Calendar update argTypes

---
 .../stories/Components/Calendar.stories.tsx   | 60 ++++++++++++++++---
 1 file changed, 51 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/stories/Components/Calendar.stories.tsx b/packages/frontend/src/stories/Components/Calendar.stories.tsx
index 9e214b0d..389d0507 100644
--- a/packages/frontend/src/stories/Components/Calendar.stories.tsx
+++ b/packages/frontend/src/stories/Components/Calendar.stories.tsx
@@ -6,14 +6,37 @@ const meta: Meta<typeof Calendar> = {
   title: 'Components/Calendar',
   component: Calendar,
   tags: ['autodocs'],
-  args: {
-    wrapperProps: 'any' as unknown as any,
-    calendarWrapperProps: 'any' as unknown as any,
-    footerProps: 'any' as unknown as any,
-    actions: 'any' as unknown as any,
-    onSelect: () => {},
-    onCancel: () => {},
-    onReset: () => {},
+  argTypes: {
+    wrapperProps: {
+      control: 'object',
+    },
+    calendarWrapperProps: {
+      control: 'object',
+    },
+    footerProps: {
+      control: 'object',
+    },
+    actions: {
+      control: 'object',
+    },
+    onSelect: {
+      action: 'select',
+    },
+    onCancel: {
+      action: 'cancel',
+    },
+    onReset: {
+      action: 'reset',
+    },
+    selectRange: {
+      control: 'boolean',
+    },
+    activeStartDate: {
+      control: 'date',
+    },
+    value: {
+      control: 'date',
+    },
   },
 };
 
@@ -21,7 +44,9 @@ export default meta;
 
 type Story = StoryObj<typeof Calendar>;
 
-export const Default: Story = {
+export const Default: Story = {};
+
+export const ToShowCode: Story = {
   render: ({
     wrapperProps,
     calendarWrapperProps,
@@ -30,6 +55,10 @@ export const Default: Story = {
     onSelect,
     onCancel,
     onReset,
+    selectRange,
+    activeStartDate,
+    value,
+    ...arg
   }) => (
     <Calendar
       wrapperProps={wrapperProps}
@@ -39,6 +68,19 @@ export const Default: Story = {
       onSelect={onSelect}
       onCancel={onCancel}
       onReset={onReset}
+      selectRange={selectRange}
+      activeStartDate={activeStartDate}
+      value={value}
+      {...arg}
     />
   ),
+  args: {
+    actions: <div>Actions</div>,
+    onSelect: (value) => console.log(value),
+    onCancel: () => console.log('Cancel'),
+    onReset: () => console.log('Reset'),
+    selectRange: false,
+    activeStartDate: new Date(),
+    value: new Date(),
+  },
 };