refactor: refactor datefield, calendar, date picker

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,
 }

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,
+}

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,
+}

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,
 }

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,
+}

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,