From d67057ea985e344e9cd7414dccca6c3eb25df7db Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Fri, 17 Mar 2023 22:23:39 +0900
Subject: [PATCH] refactor: refactor datefield, calendar, date picker

---
 .../components/Calendar/Calendar.stories.tsx  |  3 +-
 .../Calendar/ControlledCalendar.stories.tsx   | 30 +++++++++++++++++
 .../DateField/ControlledDateField.stories.tsx | 31 ++++++++++++++++++
 .../DateField/DateField.stories.tsx           |  3 +-
 .../ControlledDatePicker.stories.tsx          | 32 +++++++++++++++++++
 .../DatePicker/DatePicker.stories.tsx         |  2 +-
 6 files changed, 98 insertions(+), 3 deletions(-)
 create mode 100644 packages/lsd-react/src/components/Calendar/ControlledCalendar.stories.tsx
 create mode 100644 packages/lsd-react/src/components/DateField/ControlledDateField.stories.tsx
 create mode 100644 packages/lsd-react/src/components/DatePicker/ControlledDatePicker.stories.tsx

diff --git a/packages/lsd-react/src/components/Calendar/Calendar.stories.tsx b/packages/lsd-react/src/components/Calendar/Calendar.stories.tsx
index a3b64b9..8bf8f27 100644
--- a/packages/lsd-react/src/components/Calendar/Calendar.stories.tsx
+++ b/packages/lsd-react/src/components/Calendar/Calendar.stories.tsx
@@ -25,5 +25,6 @@ export const Root: Story<CalendarProps> = (arg) => {
 }
 
 Root.args = {
-  value: '',
+  value: undefined,
+  onChange: undefined,
 }
diff --git a/packages/lsd-react/src/components/Calendar/ControlledCalendar.stories.tsx b/packages/lsd-react/src/components/Calendar/ControlledCalendar.stories.tsx
new file mode 100644
index 0000000..34874fe
--- /dev/null
+++ b/packages/lsd-react/src/components/Calendar/ControlledCalendar.stories.tsx
@@ -0,0 +1,30 @@
+import { Meta, Story } from '@storybook/react'
+import { useRef } from 'react'
+import { Calendar, CalendarProps } from './Calendar'
+
+export default {
+  title: 'ControlledCalendar',
+  component: Calendar,
+} as Meta
+
+export const Root: Story<CalendarProps> = (arg) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  return (
+    <div ref={ref} style={{ width: '300px' }}>
+      <Calendar
+        {...arg}
+        handleDateFieldChange={(date) => console.log(date?.toDateString())}
+        open={true}
+        handleRef={ref}
+      >
+        Calendar
+      </Calendar>
+    </div>
+  )
+}
+
+Root.args = {
+  value: '2023-01-01',
+  onChange: undefined,
+}
diff --git a/packages/lsd-react/src/components/DateField/ControlledDateField.stories.tsx b/packages/lsd-react/src/components/DateField/ControlledDateField.stories.tsx
new file mode 100644
index 0000000..943160a
--- /dev/null
+++ b/packages/lsd-react/src/components/DateField/ControlledDateField.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, Story } from '@storybook/react'
+import { DateField, DateFieldProps } from './DateField'
+
+export default {
+  title: 'ControlledDateField',
+  component: DateField,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['medium', 'large'],
+      },
+      defaultValue: 'large',
+    },
+  },
+} as Meta
+
+export const Root: Story<DateFieldProps> = ({ ...args }) => {
+  return <DateField {...args} />
+}
+
+Root.args = {
+  size: 'large',
+  supportingText: 'Supporting text',
+  disabled: false,
+  value: '2023-01-01',
+  onChange: undefined,
+  error: false,
+  errorIcon: false,
+  clearButton: true,
+}
diff --git a/packages/lsd-react/src/components/DateField/DateField.stories.tsx b/packages/lsd-react/src/components/DateField/DateField.stories.tsx
index f88b2f7..15b82d1 100644
--- a/packages/lsd-react/src/components/DateField/DateField.stories.tsx
+++ b/packages/lsd-react/src/components/DateField/DateField.stories.tsx
@@ -23,8 +23,9 @@ Root.args = {
   size: 'large',
   supportingText: 'Supporting text',
   disabled: false,
+  value: undefined,
+  onChange: undefined,
   error: false,
   errorIcon: false,
   clearButton: true,
-  onChange: undefined,
 }
diff --git a/packages/lsd-react/src/components/DatePicker/ControlledDatePicker.stories.tsx b/packages/lsd-react/src/components/DatePicker/ControlledDatePicker.stories.tsx
new file mode 100644
index 0000000..91a7b80
--- /dev/null
+++ b/packages/lsd-react/src/components/DatePicker/ControlledDatePicker.stories.tsx
@@ -0,0 +1,32 @@
+import { Meta, Story } from '@storybook/react'
+import { DatePicker, DatePickerProps } from './DatePicker'
+
+export default {
+  title: 'ControlledDatePicker',
+  component: DatePicker,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['medium', 'large'],
+      },
+      defaultValue: 'large',
+    },
+  },
+} as Meta
+
+export const Root: Story<DatePickerProps> = ({ ...args }) => {
+  return <DatePicker {...args}>DatePicker</DatePicker>
+}
+
+Root.args = {
+  size: 'large',
+  supportingText: 'Supporting text',
+  disabled: false,
+  error: false,
+  value: '2023-01-01',
+  onChange: undefined,
+  errorIcon: false,
+  clearButton: true,
+  withCalendar: true,
+}
diff --git a/packages/lsd-react/src/components/DatePicker/DatePicker.stories.tsx b/packages/lsd-react/src/components/DatePicker/DatePicker.stories.tsx
index 758dd4e..976c3a3 100644
--- a/packages/lsd-react/src/components/DatePicker/DatePicker.stories.tsx
+++ b/packages/lsd-react/src/components/DatePicker/DatePicker.stories.tsx
@@ -24,7 +24,7 @@ Root.args = {
   supportingText: 'Supporting text',
   disabled: false,
   error: false,
-  value: '',
+  value: undefined,
   onChange: undefined,
   errorIcon: false,
   clearButton: true,