feat(DateInput): new prop input (#4737)

* feat: new prop input dateinput

* fix: feedback and add prop to DateField

* fix: tests

* fix: rebase

.changeset/cold-bananas-poke.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`<DateInput />`: new prop `input` to show calendar as a card, with no input

.changeset/spicy-files-fold.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/form": patch
+---
+
+Add prop `input` to `<DateInputFieldV2 />`

packages/form/src/components/DateField/__stories__/Input.stories.tsx

@@ -0,0 +1,18 @@
+import type { StoryFn } from '@storybook/react'
+import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
+import { DateField } from '..'
+import { Submit } from '../../Submit'
+
+export const Input: StoryFn<ComponentProps<typeof DateField>> = args => (
+  <Stack gap={1}>
+    <DateField {...args} />
+    <Submit>Submit</Submit>
+  </Stack>
+)
+
+Input.args = {
+  name: 'date',
+  required: true,
+  input: 'calendar',
+}

packages/form/src/components/DateField/__stories__/index.stories.tsx

@@ -4,18 +4,11 @@ import { DateField, Form } from '../..'
 import { useForm } from '../../..'
 import { mockErrors } from '../../../mocks'
 
-const yesterdayDate = new Date(Date.now() - 60 * 60 * 24 * 1000)
-const todayDate = new Date()
-const INITIAL_FORM_VALUES = {
-  date: [yesterdayDate, todayDate],
-}
-
 export default {
   component: DateField,
   decorators: [
     ChildStory => {
       const methods = useForm({
-        defaultValues: INITIAL_FORM_VALUES,
         mode: 'onChange',
       })
       const {
@@ -89,3 +82,4 @@ export { Required } from './Required.stories'
 export { MinMaxDate } from './MinMaxDate.stories'
 export { MinMaxDateWithTimeField } from './MinMaxWithTimeField.stories'
 export { MinMaxDateRange } from './MinMaxDateRange.stories'
+export { Input } from './Input.stories'

packages/form/src/components/DateField/index.tsx

@@ -70,6 +70,7 @@ export const DateField = <
   'data-testid': dataTestId,
   shouldUnregister = false,
   showMonthYearPicker,
+  input = 'text',
 }: DateFieldProps<TFieldValues, TFieldName>) => {
   const { getError } = useErrors()
   const {
@@ -152,6 +153,7 @@ export const DateField = <
           ? (field.value as [Date | null, Date | null])[1]
           : undefined
       }
+      input={input}
     />
   )
 }

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

@@ -4,6 +4,7 @@ import type { Dispatch, SetStateAction } from 'react'
 export type ContextProps = {
   showMonthYearPicker?: boolean
   disabled: boolean
+  readOnly: boolean
   /**
    * month to show on popup - NOT selectedValue
    */
@@ -70,4 +71,5 @@ export const DateInputContext = createContext<ContextProps>({
   MONTHS_ARR: [],
   selectsRange: false,
   setVisible: () => null,
+  readOnly: false,
 })

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

@@ -0,0 +1,44 @@
+import type { StoryFn } from '@storybook/react'
+import type { ComponentProps } from 'react'
+import { useState } from 'react'
+import { DateInput } from '..'
+import { Stack } from '../../Stack'
+
+export const Calendar: StoryFn<ComponentProps<typeof DateInput>> = args => {
+  const [value, setValue] = useState<Date | null>()
+
+  return (
+    <Stack gap={2}>
+      <DateInput
+        {...args}
+        label="As a calendar"
+        value={value}
+        onChange={setValue}
+        input="calendar"
+        selectsRange={false}
+      />
+      Selected date: {value?.toDateString()}
+    </Stack>
+  )
+}
+
+Calendar.args = {
+  input: 'calendar',
+}
+
+Calendar.decorators = [
+  StoryComponent => (
+    <div style={{ height: '350px' }}>
+      <StoryComponent />
+    </div>
+  ),
+]
+
+Calendar.parameters = {
+  docs: {
+    description: {
+      story:
+        'Set prop `input` to "calendar" in order to only display the calendar part of the component (no popover, no text input).',
+    },
+  },
+}

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

@@ -8,5 +8,5 @@ export const Template: StoryFn<typeof DateInput> = props => (
 Template.args = {
   label: 'Date Input',
   required: true,
-  placeholder: 'YYYY-MM-DD',
+  placeholder: 'MM-DD-YYYY',
 }

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

@@ -17,3 +17,4 @@ export { Localized } from './Localized.stories'
 export { Controlled } from './Controlled.stories'
 export { Range } from './Range.stories'
 export { I18n } from './I18n.stories'
+export { Calendar } from './Calendar.stories'