fix: change value in input

packages/ui/src/components/DateInputV2/Context.tsx → packages/ui/src/components/DateInput/Context.tsx

@@ -1,5 +1,6 @@
 import { createContext } from 'react'
 import type { Dispatch, SetStateAction } from 'react'
+import { DAYS_DEFAULT, MONTHS_ARR_DEFAULT, MONTHS_DEFAULT } from './constants'
 
 export type ContextProps = {
   showMonthYearPicker?: boolean
@@ -23,6 +24,7 @@ export type ContextProps = {
   DAYS: Record<string, string>
   MONTHS_ARR: string[]
   setValue: Dispatch<SetStateAction<Date | null>>
+  setInputValue: Dispatch<SetStateAction<string | undefined>>
   value?: Date | null
   range?: {
     start: Date | null
@@ -36,6 +38,7 @@ export type ContextProps = {
   >
   startDate?: Date | null
   endDate?: Date | null
+  format?: (value?: Date) => string | undefined
 } & (
   | {
       selectsRange: true
@@ -52,51 +55,11 @@ export type ContextProps = {
       ) => void
     }
 )
-const DAYS_DEFAULT = {
-  Sunday: 'Su',
-  Monday: 'Mo',
-  Tuesday: 'Tu',
-  Wednesday: 'We',
-  Thursday: 'Th',
-  Friday: 'Fr',
-  Saturday: 'Sa',
-}
-
-// Calendar months names and short names
-const MONTHS_DEFAULT = {
-  January: 'Jan',
-  February: 'Feb',
-  March: 'Mar',
-  April: 'Apr',
-  May: 'May',
-  June: 'Jun',
-  July: 'Jul',
-  August: 'Aug',
-  September: 'Sep',
-  October: 'Oct',
-  November: 'Nov',
-  December: 'Dec',
-}
-
-export const MONTHS_ARR_DEFAULT = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-]
-
 export const DateInputContext = createContext<ContextProps>({
   showMonthYearPicker: false,
   disabled: false,
   setValue: () => null,
+  setInputValue: () => null,
   monthToShow: 1,
   yearToShow: 2000,
   setMonthToShow: () => null,

packages/ui/src/components/DateInput/__stories__/Controlled.stories.tsx

@@ -2,19 +2,27 @@ import type { StoryFn } from '@storybook/react'
 import type { ComponentProps } from 'react'
 import { useState } from 'react'
 import { DateInput } from '..'
+import { Button } from '../../Button'
+import { Stack } from '../../Stack'
 
 export const Controlled: StoryFn<ComponentProps<typeof DateInput>> = args => {
   const [value, setValue] = useState<
     Date | Date[] | [Date | null, Date | null] | null
   >(new Date('December 17, 1995 03:24:00'))
 
   return (
-    <DateInput
-      {...args}
-      label="Date"
-      value={value as Date}
-      onChange={setValue}
-    />
+    <Stack gap={2}>
+      <DateInput
+        {...args}
+        label="Date"
+        value={value as Date}
+        onChange={setValue}
+      />
+      Selected date : {value?.toString()}
+      <Button onClick={() => setValue(new Date('December 26, 1995 03:24:00'))}>
+        Set date to 1995-12-26
+      </Button>
+    </Stack>
   )
 }
 

packages/ui/src/components/DateInput/__stories__/Disabled.stories.tsx

@@ -6,3 +6,11 @@ Disabled.args = {
   label: 'Disabled',
   disabled: true,
 }
+
+Disabled.decorators = [
+  StoryComponent => (
+    <div style={{ height: '350px' }}>
+      <StoryComponent />
+    </div>
+  ),
+]

packages/ui/src/components/DateInput/__stories__/Error.stories.tsx

@@ -14,3 +14,11 @@ Error.args = {
   label: 'Error',
   error: 'This is an error',
 }
+
+Error.decorators = [
+  StoryComponent => (
+    <div style={{ height: '350px' }}>
+      <StoryComponent />
+    </div>
+  ),
+]

packages/ui/src/components/DateInput/__stories__/Exclude.stories.tsx

@@ -1,7 +1,23 @@
-import { Template } from './Template'
-
-export const Exclude = Template.bind({})
+import type { StoryFn } from '@storybook/react'
+import type { ComponentProps } from 'react'
+import { DateInput } from '..'
+import { Stack } from '../../Stack'
 
+export const Exclude: StoryFn<ComponentProps<typeof DateInput>> = args => (
+  <Stack gap={3}>
+    <DateInput {...args} />
+    <DateInput
+      {...args}
+      showMonthYearPicker
+      label="With months"
+      excludeDates={[
+        new Date('November 1, 1995 03:24:00'),
+        new Date('January 14, 1995 03:24:00'),
+        new Date('March 22, 1995 03:24:00'),
+      ]}
+    />
+  </Stack>
+)
 Exclude.parameters = {
   docs: {
     description: {

packages/ui/src/components/DateInput/__stories__/I18n.stories.tsx

@@ -62,6 +62,7 @@ export const I18n: StoryFn<ComponentProps<typeof DateInput>> = args => {
           setValue(v as Date)
         }}
         label={currentLocale}
+        selectsRange={false}
       />
     </div>
   )

packages/ui/src/components/DateInput/__stories__/Months.stories.tsx

@@ -1,34 +1,17 @@
-import type { StoryFn } from '@storybook/react'
-import { useState } from 'react'
-import { DateInput } from '..'
+import { Template } from './Template'
 
-export const Months: StoryFn = args => {
-  const [startDate, setStartDate] = useState<Date | null>(null)
-  const [endDate, setEndDate] = useState<Date | null>(null)
-  const onChange = (dates: [Date | null, Date | null]) => {
-    const [start, end] = dates
-    setStartDate(start)
-    setEndDate(end)
-  }
+export const Months = Template.bind({})
 
-  return (
-    <DateInput
-      label="Date"
-      startDate={startDate}
-      endDate={endDate}
-      onChange={onChange}
-      showMonthYearPicker
-      selectsRange
-      {...args}
-    />
-  )
+Months.args = {
+  label: 'Months',
+  showMonthYearPicker: true,
+  disabled: false,
 }
 
-Months.parameters = {
-  docs: {
-    description: {
-      story:
-        'Using prop `showMonthYearPicker` you can select only months and years.',
-    },
-  },
-}
+Months.decorators = [
+  StoryComponent => (
+    <div style={{ height: '350px' }}>
+      <StoryComponent />
+    </div>
+  ),
+]

packages/ui/src/components/DateInput/__stories__/Playground.stories.tsx

@@ -2,4 +2,14 @@ import { Template } from './Template'
 
 export const Playground = Template.bind({})
 
-Playground.args = Template.args
+Playground.args = {
+  placeholder: 'YYYY-MM-DD',
+}
+
+Playground.decorators = [
+  StoryComponent => (
+    <div style={{ height: '350px' }}>
+      <StoryComponent />
+    </div>
+  ),
+]

packages/ui/src/components/DateInput/__stories__/Range.stories.tsx

@@ -1,25 +1,69 @@
 import type { StoryFn } from '@storybook/react'
+import type { ComponentProps } from 'react'
 import { useState } from 'react'
 import { DateInput } from '..'
+import { Stack } from '../../Stack'
 
-export const Range: StoryFn = args => {
+const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
+export const Range: StoryFn<ComponentProps<typeof DateInput>> = args => {
   const [startDate, setStartDate] = useState<Date | null>(null)
   const [endDate, setEndDate] = useState<Date | null>(null)
-  const onChange = (dates: [Date | null, Date | null]) => {
+
+  const [startMonth, setStartMonth] = useState<Date | null>(
+    new Date('March 2024'),
+  )
+  const [endMonth, setEndMonth] = useState<Date | null>(null)
+
+  const onChange = (dates: [Date | null, Date | null] | Date[]) => {
     const [start, end] = dates
     setStartDate(start)
     setEndDate(end)
   }
 
+  const onChangeMonth = (dates: [Date | null, Date | null] | Date[]) => {
+    const [start, end] = dates
+    setStartMonth(start)
+    setEndMonth(end)
+  }
+
   return (
-    <DateInput
-      label="Date"
-      onChange={onChange}
-      startDate={startDate}
-      endDate={endDate}
-      selectsRange
-      {...args}
-    />
+    <Stack>
+      <DateInput
+        label="Date"
+        onChange={onChange}
+        startDate={startDate}
+        endDate={endDate}
+        selectsRange
+        {...args}
+      />
+      Selected dates : {startDate?.toDateString()} - {endDate?.toDateString()}
+      <DateInput
+        label="Month"
+        onChange={onChangeMonth}
+        startDate={startMonth}
+        endDate={endMonth}
+        selectsRange
+        showMonthYearPicker
+        {...args}
+      />
+      Selected months : {startMonth ? months[startMonth.getMonth()] : null}
+      {startMonth?.getFullYear()} -
+      {endMonth ? months[endMonth.getMonth()] : null}
+      {endMonth?.getFullYear()}
+    </Stack>
   )
 }
 

packages/ui/src/components/DateInput/__stories__/Size.stories.tsx

@@ -9,3 +9,7 @@ export const Size: StoryFn<typeof DateInput> = args => (
     ))}
   </Stack>
 )
+
+Size.args = {
+  value: 'Sat 24 Dec 2024',
+}

packages/ui/src/components/DateInput/__stories__/Template.tsx

@@ -1,12 +1,12 @@
 import type { StoryFn } from '@storybook/react'
-import type { ComponentProps } from 'react'
 import { DateInput } from '..'
 
-export const Template: StoryFn<ComponentProps<typeof DateInput>> = props => (
+export const Template: StoryFn<typeof DateInput> = props => (
   <DateInput {...props} />
 )
 
 Template.args = {
   label: 'Date Input',
   required: true,
+  placeholder: 'YYYY-MM-DD',
 }

packages/ui/src/components/DateInput/__stories__/index.stories.tsx

@@ -3,26 +3,17 @@ import { DateInput } from '..'
 
 export default {
   component: DateInput,
-  decorators: [
-    Stories => (
-      <div style={{ height: 360 }}>
-        <Stories />
-      </div>
-    ),
-  ],
   title: 'Components/Data Entry/DateInput',
 } as Meta
-
 export { Playground } from './Playground.stories'
 export { Size } from './Size.stories'
-export { Exclude } from './Exclude.stories'
-export { Range } from './Range.stories'
-export { Uncontrolled } from './Uncontrolled.stories'
-export { Controlled } from './Controlled.stories'
 export { Error } from './Error.stories'
 export { Disabled } from './Disabled.stories'
 export { Required } from './Required.stories'
 export { Months } from './Months.stories'
+export { Exclude } from './Exclude.stories'
+export { MinMax } from './MinMax.stories'
 export { Localized } from './Localized.stories'
+export { Controlled } from './Controlled.stories'
+export { Range } from './Range.stories'
 export { I18n } from './I18n.stories'
-export { MinMax } from './MinMax.stories'