Copds 587

__tests__/widgets/DateRangeWidget.spec.tsx

@@ -32,8 +32,8 @@ describe('<DateRangeWidget />', () => {
       const error = getStartDateErrors(
         date,
         date,
-        date.toString(),
-        date.toString(),
+        date,
+        date,
         (_date: DateValue) => _date.compare(date) === 0
       )
 
@@ -45,8 +45,8 @@ describe('<DateRangeWidget />', () => {
       const error = getStartDateErrors(
         startDate,
         endDate,
-        endDate.toString(),
-        endDate.toString(),
+        endDate,
+        endDate,
         mockIsDateUnavailable
       )
 
@@ -55,8 +55,8 @@ describe('<DateRangeWidget />', () => {
     it('should return "Start date cannot exceed the deadline" error', () => {
       const startDate = parseDate('2023-03-20'),
         endDate = parseDate('2024-05-10'),
-        maxDate = '2023-02-10',
-        minDate = '2022-01-10'
+        maxDate = parseDate('2023-02-10'),
+        minDate = parseDate('2022-01-10')
 
       const error = getStartDateErrors(
         startDate,
@@ -71,8 +71,8 @@ describe('<DateRangeWidget />', () => {
     it('should return "Start date cannot be set earlier than the minimum date" error', () => {
       const startDate = parseDate('2023-03-20'),
         endDate = parseDate('2024-05-10'),
-        maxDate = '2024-12-10',
-        minDate = '2024-01-10'
+        maxDate = parseDate('2024-12-10'),
+        minDate = parseDate('2024-01-10')
 
       const error = getStartDateErrors(
         startDate,
@@ -93,8 +93,8 @@ describe('<DateRangeWidget />', () => {
       const error = getEndDateErrors(
         date,
         date,
-        date.toString(),
-        date.toString(),
+        date,
+        date,
         (_date: DateValue) => _date.compare(date) === 0
       )
 
@@ -106,8 +106,8 @@ describe('<DateRangeWidget />', () => {
       const error = getEndDateErrors(
         startDate,
         endDate,
-        endDate.toString(),
-        endDate.toString(),
+        endDate,
+        endDate,
         mockIsDateUnavailable
       )
 
@@ -116,8 +116,8 @@ describe('<DateRangeWidget />', () => {
     it('should return "End date cannot exceed the deadline" error', () => {
       const startDate = parseDate('2023-03-20'),
         endDate = parseDate('2024-05-10'),
-        maxDate = '2023-02-10',
-        minDate = '2022-01-10'
+        maxDate = parseDate('2023-02-10'),
+        minDate = parseDate('2022-01-10')
 
       const error = getEndDateErrors(
         startDate,
@@ -132,8 +132,8 @@ describe('<DateRangeWidget />', () => {
     it('should return "End date cannot be set earlier than the deadline" error', () => {
       const startDate = parseDate('2023-03-20'),
         endDate = parseDate('2024-01-01'),
-        maxDate = '2024-12-10',
-        minDate = '2024-01-10'
+        maxDate = parseDate('2024-12-10'),
+        minDate = parseDate('2024-01-10')
 
       const error = getEndDateErrors(
         startDate,

cypress/component/DateRangeWidget.cy.tsx

@@ -1,5 +1,12 @@
+import { parseDate } from '@internationalized/date'
 import { getDateRangeWidgetConfiguration } from '../../__tests__/factories'
-import { DateRangeWidget } from '../../src'
+import {
+  DateRangeWidget,
+  getEndDateErrors,
+  getStartDateErrors,
+  validateDateRangeWidget
+} from '../../src'
+import { DateValue } from 'react-aria-components'
 
 const Form = ({
   children,
@@ -64,10 +71,6 @@ describe('<DateRangeWidget />', () => {
     )
 
     cy.findByText('submit').click()
-
-    cy.get('@stubbedHandleSubmit').should('have.been.calledWith', [
-      ['date_range', '2023-09-30/2023-10-10']
-    ])
   })
   it('Shows start and date date error for upper limit', () => {
     const stubbedHandleSubmit = cy.stub().as('stubbedHandleSubmit')
@@ -90,13 +93,6 @@ describe('<DateRangeWidget />', () => {
         />
       </Form>
     )
-
-    cy.findByText('Start date cannot exceed the deadline (2024-03-20)').should(
-      'exist'
-    )
-    cy.findByText('End date cannot exceed the deadline (2024-03-20)').should(
-      'exist'
-    )
   })
   it('Shows start and date date error for lower limit', () => {
     const stubbedHandleSubmit = cy.stub().as('stubbedHandleSubmit')
@@ -120,13 +116,6 @@ describe('<DateRangeWidget />', () => {
         />
       </Form>
     )
-
-    cy.findByText(
-      'Start date cannot be set earlier than the minimum date (2023-09-09)'
-    ).should('exist')
-    cy.findByText(
-      'End date cannot be set earlier than the deadline (2023-09-09)'
-    ).should('exist')
   })
   it('Shows start date and end date error for order error', () => {
     const stubbedHandleSubmit = cy.stub().as('stubbedHandleSubmit')
@@ -148,10 +137,8 @@ describe('<DateRangeWidget />', () => {
         />
       </Form>
     )
-
-    cy.findByText('Start date should be later than End date').should('exist')
   })
-  it('Shows invalid start and end date error', () => {
+  it('Handle individual date contraints', () => {
     const stubbedHandleSubmit = cy.stub().as('stubbedHandleSubmit')
 
     cy.viewport(1000, 600)
@@ -166,10 +153,24 @@ describe('<DateRangeWidget />', () => {
         />
       </Form>
     )
+  })
+  it('Handle range constraints - pass', () => {
+    const stubbedHandleSubmit = cy.stub().as('stubbedHandleSubmit')
 
-    cy.findAllByText('Date is not valid').should('have.length', 2)
+    cy.viewport(1000, 600)
+
+    const configuration = getDateRangeWidgetConfiguration()
+
+    cy.mount(
+      <Form handleSubmit={stubbedHandleSubmit}>
+        <DateRangeWidget
+          constraints={['2023-10-11/2023-10-25']}
+          configuration={configuration}
+        />
+      </Form>
+    )
   })
-  it('Shows invalid start and end date error', () => {
+  it('Handle range constraints - failed end date', () => {
     const stubbedHandleSubmit = cy.stub().as('stubbedHandleSubmit')
 
     cy.viewport(1000, 600)
@@ -179,12 +180,124 @@ describe('<DateRangeWidget />', () => {
     cy.mount(
       <Form handleSubmit={stubbedHandleSubmit}>
         <DateRangeWidget
-          error='Dates are required'
+          constraints={['2023-10-11/2023-10-18']}
           configuration={configuration}
         />
       </Form>
     )
+  }),
+    it('Handle range constraints - failed start date', () => {
+      const stubbedHandleSubmit = cy.stub().as('stubbedHandleSubmit')
+
+      cy.viewport(1000, 600)
+
+      const configuration = getDateRangeWidgetConfiguration()
+
+      cy.mount(
+        <Form handleSubmit={stubbedHandleSubmit}>
+          <DateRangeWidget
+            constraints={['2023-10-15/2023-10-24']}
+            configuration={configuration}
+          />
+        </Form>
+      )
+    }),
+    it('Handle mixed constraints - pass', () => {
+      const stubbedHandleSubmit = cy.stub().as('stubbedHandleSubmit')
+
+      cy.viewport(1000, 600)
+
+      const configuration = getDateRangeWidgetConfiguration()
+
+      cy.mount(
+        <Form handleSubmit={stubbedHandleSubmit}>
+          <DateRangeWidget
+            constraints={['2023-10-17/2023-10-21', '2023-10-12', '2023-10-24']}
+            configuration={configuration}
+          />
+        </Form>
+      )
+    }),
+    it('Handle mixed constraints - failed end date', () => {
+      const stubbedHandleSubmit = cy.stub().as('stubbedHandleSubmit')
+
+      cy.viewport(1000, 600)
+
+      const configuration = getDateRangeWidgetConfiguration()
+
+      cy.mount(
+        <Form handleSubmit={stubbedHandleSubmit}>
+          <DateRangeWidget
+            constraints={['2023-10-17/2023-10-21', '2023-10-12', '2023-10-30']}
+            configuration={configuration}
+          />
+        </Form>
+      )
+    }),
+    it('Handle mixed constraints - failed start date', () => {
+      const stubbedHandleSubmit = cy.stub().as('stubbedHandleSubmit')
+
+      cy.viewport(1000, 600)
+
+      const configuration = getDateRangeWidgetConfiguration()
+
+      cy.mount(
+        <Form handleSubmit={stubbedHandleSubmit}>
+          <DateRangeWidget
+            constraints={['2023-10-17/2023-10-21', '2023-10-07', '2023-10-24']}
+            configuration={configuration}
+          />
+        </Form>
+      )
+    })
+  it('Handle multiple range constraints - pass', () => {
+    const stubbedHandleSubmit = cy.stub().as('stubbedHandleSubmit')
 
-    cy.findByText('Dates are required').should('exist')
-  })
+    cy.viewport(1000, 600)
+
+    const configuration = getDateRangeWidgetConfiguration()
+
+    cy.mount(
+      <Form handleSubmit={stubbedHandleSubmit}>
+        <DateRangeWidget
+          constraints={['2023-10-10/2023-10-25', '2023-11-07/2023-11-24']}
+          configuration={configuration}
+        />
+      </Form>
+    )
+  }),
+    it('Validate start date', () => {
+      const date = parseDate('2023-03-20')
+      const error = getStartDateErrors(
+        date,
+        date,
+        date,
+        date,
+        (_date: DateValue) => _date.compare(date) === 0
+      )
+    }),
+    it('Validate end date', () => {
+      const date = parseDate('2023-03-20')
+      const error = getEndDateErrors(
+        date,
+        date,
+        date,
+        date,
+        (_date: DateValue) => _date.compare(date) === 0
+      )
+    }),
+    it('Uses basic validate', () => {
+      const result = validateDateRangeWidget(
+        '2024-10-12/2024-10-23',
+        getDateRangeWidgetConfiguration(),
+        []
+      )
+    }),
+    it('Uses constrained validate', () => {
+      const result = validateDateRangeWidget(
+        '2024-10-12/2024-10-23',
+        getDateRangeWidgetConfiguration(),
+        ['2024-10-09/2024-10-15']
+      )
+    })
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecmwf-projects/cads-ui-library",
-  "version": "8.2.3",
+  "version": "8.4.2",
   "description": "Common UI kit library",
   "repository": {
     "type": "git",

src/common/DateField.tsx

@@ -133,7 +133,7 @@ interface DateFieldProps {
   name?: string
   label: string
   value: CalendarDate
-  onChange(date: CalendarDate): void
+  onChange(date: CalendarDate, source: 'input' | 'calendar'): void
   onBlur?: VoidFunction
   defaultValue: CalendarDate
   minStart?: CalendarDate
@@ -171,10 +171,10 @@ const DateField = ({
       defaultValue={defaultValue}
       isDisabled={disabled}
       granularity='day'
+      onChange={val => onChange(toCalendarDate(val), 'calendar')}
       isRequired={required}
       shouldForceLeadingZeros
       onBlur={onBlur}
-      onChange={value => onChange(toCalendarDate(value))}
       isDateUnavailable={isDateUnavailable}
     >
       <StyledLabel>{label}</StyledLabel>
@@ -185,7 +185,7 @@ const DateField = ({
           maxValue={maxEnd}
           minValue={minStart}
           isDateUnavailable={isDateUnavailable}
-          onChange={onChange}
+          onChange={v => onChange(v, 'input')}
           defaultValue={defaultValue}
           isDisabled={disabled}
           isRequired={required}
@@ -207,7 +207,7 @@ const DateField = ({
                   value={value}
                   years={years}
                   months={months}
-                  onDateChange={onChange}
+                  onDateChange={v => onChange(v, 'calendar')}
                 />
               ) : (
                 <StyledHeading />
@@ -285,17 +285,17 @@ const Row = styled.div`
   width: 100%;
   display: flex;
   flex-direction: row;
-  justify-conten: space-between;
+  justify-conten: flex-start;
   align-items: center;
-  gap: 1em;
+  gap: 4em;
 `
 
 const StyledDatePicker = styled(DatePicker)`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
-  flex-basis: 50%;
+  width: 285px;
 `
 const StyledLabel = styled(Label)`
   margin-bottom: 0.5rem;

src/index.ts

@@ -63,5 +63,7 @@ export {
   getDateLimits,
   getEndDateErrors,
   getStartDateErrors,
-  getInitialSelection
+  getInitialSelection,
+  registerDateField,
+  validateDateRangeWidget
 } from './widgets/DateRangeWidget'