@dhis2-ui/calendar 10.16.2 → 10.16.3

package/src/calendar-input/calendar-input.js

@@ -0,0 +1,262 @@
+import {
+    useDatePicker,
+    useResolvedDirection,
+    validateDateString,
+} from '@dhis2/multi-calendar-dates'
+import { Button } from '@dhis2-ui/button'
+import { InputField } from '@dhis2-ui/input'
+import { Layer } from '@dhis2-ui/layer'
+import { Popper } from '@dhis2-ui/popper'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useRef, useState, useMemo, useEffect } from 'react'
+import { CalendarContainer } from '../calendar/calendar-container.js'
+import i18n from '../locales/index.js'
+
+const offsetModifier = {
+    name: 'offset',
+    options: {
+        offset: [0, 2],
+    },
+}
+
+export const CalendarInput = ({
+    onDateSelect: parentOnDateSelect,
+    calendar,
+    date,
+    dir,
+    locale,
+    numberingSystem,
+    weekDayFormat = 'narrow',
+    width = '300px',
+    cellSize = '32px',
+    clearable,
+    minDate,
+    maxDate,
+    format,
+    strictValidation,
+    inputWidth,
+    dataTest = 'dhis2-uiwidgets-calendar-inputfield',
+    pastOnly,
+    ...rest
+} = {}) => {
+    const ref = useRef()
+    const calendarRef = useRef()
+    const popperRef = useRef()
+    const [open, setOpen] = useState(false)
+    const [partialDate, setPartialDate] = useState(date)
+
+    useEffect(() => setPartialDate(date), [date])
+
+    const useDatePickerOptions = useMemo(
+        () => ({
+            calendar,
+            locale,
+            numberingSystem,
+            weekDayFormat,
+            pastOnly,
+        }),
+        [calendar, locale, numberingSystem, weekDayFormat, pastOnly]
+    )
+
+    const onChooseDate = (date, validationOptions) => {
+        if (!date) {
+            parentOnDateSelect?.({
+                calendarDateString: null,
+                validation: { valid: true },
+            })
+            return
+        }
+
+        const validation = validateDateString(date, validationOptions)
+        parentOnDateSelect?.({
+            calendarDateString: date,
+            validation,
+        })
+    }
+
+    const validationOptions = useMemo(
+        () => ({
+            calendar,
+            format,
+            minDateString: minDate,
+            maxDateString: maxDate,
+            strictValidation,
+        }),
+        [calendar, format, maxDate, minDate, strictValidation]
+    )
+
+    const pickerResults = useDatePicker({
+        onDateSelect: (result) => {
+            onChooseDate(result.calendarDateString, validationOptions)
+            setOpen(false)
+        },
+        date,
+        ...validationOptions,
+        options: useDatePickerOptions,
+    })
+
+    const handleChange = (e) => {
+        setOpen(false)
+        setPartialDate(e.value)
+    }
+
+    const handleBlur = (_, e) => {
+        if (
+            e.relatedTarget &&
+            (calendarRef.current?.contains(e.relatedTarget) ||
+                popperRef.current === e.relatedTarget)
+        ) {
+            return
+        }
+
+        onChooseDate(partialDate, validationOptions)
+        setOpen(false)
+    }
+
+    const onFocus = () => {
+        setOpen(true)
+        rest?.onFocus?.()
+    }
+
+    const languageDirection = useResolvedDirection(dir, locale)
+
+    const calendarProps = useMemo(
+        () => ({
+            date,
+            width,
+            cellSize,
+            isValid: pickerResults.isValid,
+            calendarWeekDays: pickerResults.calendarWeekDays,
+            weekDayLabels: pickerResults.weekDayLabels,
+            currMonth: pickerResults.currMonth,
+            currYear: pickerResults.currYear,
+            nextMonth: pickerResults.nextMonth,
+            nextYear: pickerResults.nextYear,
+            prevMonth: pickerResults.prevMonth,
+            prevYear: pickerResults.prevYear,
+            navigateToYear: pickerResults.navigateToYear,
+            navigateToMonth: pickerResults.navigateToMonth,
+            months: pickerResults.months,
+            years: pickerResults.years,
+            languageDirection,
+        }),
+        [cellSize, date, pickerResults, width, languageDirection]
+    )
+
+    return (
+        <>
+            <div className="calendar-input-wrapper" ref={ref}>
+                <InputField
+                    label={i18n.t('Pick a date')}
+                    {...rest}
+                    dataTest={dataTest}
+                    type="text"
+                    onFocus={onFocus}
+                    value={partialDate}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    inputWidth={inputWidth}
+                />
+                {clearable && (
+                    <div
+                        className={cx('calendar-clear-button', {
+                            'with-icon':
+                                rest.valid ||
+                                rest.error ||
+                                rest.warning ||
+                                rest.loading,
+                            'with-dense-wrapper': rest.dense,
+                        })}
+                    >
+                        <Button
+                            dataTest="calendar-clear-button"
+                            secondary
+                            small
+                            onClick={() => onChooseDate(null)}
+                            type="button"
+                        >
+                            {i18n.t('Clear')}
+                        </Button>
+                    </div>
+                )}
+            </div>
+            {open && (
+                <Layer onBackdropClick={() => setOpen(false)}>
+                    <Popper
+                        reference={ref}
+                        placement="bottom-start"
+                        modifiers={[offsetModifier]}
+                        onFirstUpdate={(component) => {
+                            popperRef.current = component?.elements?.popper
+                        }}
+                    >
+                        <CalendarContainer
+                            {...calendarProps}
+                            calendarRef={calendarRef}
+                        />
+                    </Popper>
+                </Layer>
+            )}
+
+            <style jsx>
+                {`
+                    .calendar-input-wrapper {
+                        position: relative;
+                        width: ${inputWidth};
+                    }
+                    .calendar-clear-button {
+                        position: absolute;
+                        inset-inline-end: ${rest.error || rest.warning
+                            ? '36px'
+                            : '6px'};
+                        inset-block-start: 27px;
+                    }
+                    .calendar-clear-button.with-icon {
+                        inset-inline-end: 36px;
+                    }
+                    .calendar-clear-button.with-dense-wrapper {
+                        inset-block-start: 23px;
+                    }
+                `}
+            </style>
+        </>
+    )
+}
+
+CalendarInput.propTypes = {
+    /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts  */
+    calendar: PropTypes.any.isRequired,
+    /** Called with signature `(null)` \|\| `({ dateCalendarString: string, validation: { error: boolean, warning: boolean, validationText: string} })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
+    onDateSelect: PropTypes.func.isRequired,
+    /** the size of a single cell in the table forming the calendar */
+    cellSize: PropTypes.string,
+    /** Whether the clear button is displayed */
+    clearable: PropTypes.bool,
+    /** 'data-test' attribute of `InputField` component */
+    dataTest: PropTypes.string,
+    /** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
+    date: PropTypes.string,
+    /** the direction of the library - internally the library will use rtl for rtl-languages but this can be overridden here for more control */
+    dir: PropTypes.oneOf(['ltr', 'rtl']),
+    /** The date format to use either `YYYY-MM-DD` or `DD-MM-YYYY` */
+    format: PropTypes.oneOf(['YYYY-MM-DD', 'DD-MM-YYYY']),
+    /** the width of input field */
+    inputWidth: PropTypes.string,
+    /** any valid locale -  if none provided, the internal library will fallback to the user locale (more info here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/hooks/internal/useResolvedLocaleOptions.ts#L15) */
+    locale: PropTypes.string,
+    /** The maximum selectable date */
+    maxDate: PropTypes.string,
+    /** The minimum selectable date */
+    minDate: PropTypes.string,
+    /** numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts */
+    numberingSystem: PropTypes.string,
+    /** When true, only shows years in the past (current year and earlier) */
+    pastOnly: PropTypes.bool,
+    /** Whether to use strict validation by showing errors for out-of-range dates when enabled (default), and warnings when disabled */
+    strictValidation: PropTypes.bool,
+    /** the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow) */
+    weekDayFormat: PropTypes.oneOf(['narrow', 'short', 'long']),
+    /** the width of the calendar component */
+    width: PropTypes.string,
+}

package/src/features/supports_calendar_clear_button/supports_calendar_clear_button.js

@@ -0,0 +1,64 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'a "{word}" calendar is rendered with a selected date "{word}"',
+    (calendar, initialDate) => {
+        cy.visitStory(
+            'CalendarInputTesting',
+            'Test Calendar With Clear Button',
+            {
+                qs: {
+                    initialDate,
+                    calendar,
+                },
+            }
+        )
+
+        cy.get('[data-test="storybook-calendar-date-value"]').should(
+            'have.text',
+            initialDate
+        )
+    }
+)
+
+Then('we should be able to clear it', () => {
+    cy.get(`[data-test="calendar-clear-button"]`).click()
+    cy.get('[data-test="storybook-calendar-date-value"]').should(
+        'have.text',
+        'undefined'
+    )
+})
+
+Then('show the current month afterwards', () => {
+    cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click()
+    cy.get('.isToday').should('be.visible')
+})
+
+Then("allow selecting today's date", () => {
+    cy.get('.isToday')
+        .parent()
+        .invoke('attr', 'data-test')
+        .then((todayDate) => {
+            cy.get('.isToday').click()
+            cy.get('[data-test="storybook-calendar-date-value"]').should(
+                'have.text',
+                todayDate
+            )
+            cy.get(
+                '[data-test="dhis2-uiwidgets-calendar-inputfield"] input'
+            ).should('have.value', todayDate)
+        })
+})
+
+Then('highlight today as the selected date', () => {
+    cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click()
+    cy.get('.isToday')
+        .parent()
+        .invoke('attr', 'data-test')
+        .then((todayDate) => {
+            cy.get('.isSelected').should(
+                'have.text',
+                Number(todayDate.split('-')[2]).toString()
+            )
+        })
+})

package/src/features/supports_calendar_clear_button.feature

@@ -0,0 +1,23 @@
+Feature: The Calendar allows clearing the selection
+
+    Scenario: Clear the selection in the Gregorian calendar
+        Given a "gregory" calendar is rendered with a selected date "2021-10-13"
+        Then we should be able to clear it
+        And show the current month afterwards
+        And allow selecting today's date
+        And highlight today as the selected date
+
+    Scenario: Clear the selection in the Ethiopic calendar
+        Given a "ethiopic" calendar is rendered with a selected date "2014-02-03"
+        Then we should be able to clear it
+        And show the current month afterwards
+        And allow selecting today's date
+        And highlight today as the selected date
+
+    Scenario: Clear the selection in the Nepali calendar
+        Given a "nepali" calendar is rendered with a selected date "2078-06-27"
+        Then we should be able to clear it
+        And show the current month afterwards
+        And allow selecting today's date
+        And highlight today as the selected date
+

package/src/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js

@@ -0,0 +1,61 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('an Ethiopic calendar is rendered in {word}', (language) => {
+    cy.visitStory('CalendarInputTesting', `Ethiopic With ${language}`)
+
+    cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click()
+    cy.get('[data-test=calendar]').should('be.visible')
+})
+
+Then('days should be rendered in "{word}"', (language) => {
+    const days =
+        language === 'amharic'
+            ? ['ሰኞ', 'ማክሰ', 'ረቡዕ', 'ሐሙስ', 'ዓርብ', 'ቅዳሜ', 'እሑድ']
+            : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+
+    days.forEach((day) => {
+        cy.contains(day).should('be.visible')
+    })
+})
+
+Then('months should be rendered in "{word}" with navigation', (language) => {
+    const months =
+        language === 'amharic'
+            ? { current: 'ጥቅምት', previous: 'መስከረም', next: 'ኅዳር' }
+            : { current: 'Tekemt', previous: 'Meskerem', next: 'Hedar' }
+
+    cy.get('[data-test="calendar-month-select"] option:selected').should(
+        'have.text',
+        months.current
+    )
+    cy.get('[data-test="calendar-next-month"]').click()
+    cy.get('[data-test="calendar-month-select"] option:selected').should(
+        'have.text',
+        months.next
+    )
+    cy.get('[data-test="calendar-previous-month"]').click()
+    cy.get('[data-test="calendar-previous-month"]').click()
+    cy.get('[data-test="calendar-month-select"] option:selected').should(
+        'have.text',
+        months.previous
+    )
+})
+
+Then('the era should not be displayed in the year', () => {
+    cy.get('[data-test="calendar-year-select"] option:selected').should(
+        'not.contain.text',
+        'ERA'
+    )
+})
+
+Then('we should be able to select a day', () => {
+    const date = '2014-02-03'
+    cy.get(`[data-test="${date}"]`).click()
+
+    cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should(
+        'have.value',
+        date
+    )
+
+    cy.get('[data-test="storybook-calendar-result"]').should('have.text', date)
+})

package/src/features/supports_ethiopic_calendar.feature

@@ -0,0 +1,20 @@
+Feature: The Calendar renders in the Ethiopic calendar system
+
+    Scenario: Display an Ethiopic calendar in Amharic
+        Given an Ethiopic calendar is rendered in "amharic"
+        Then days should be rendered in "amharic"
+        And months should be rendered in "amharic" with navigation
+
+    Scenario: Select a day in the Ethiopic calendar in Amharic
+        Given an Ethiopic calendar is rendered in "amharic"
+        Then we should be able to select a day
+
+    Scenario: Display an Ethiopic calendar in English
+        Given an Ethiopic calendar is rendered in "english"
+        Then days should be rendered in "english"
+        And months should be rendered in "english" with navigation
+        And the era should not be displayed in the year
+
+    Scenario: Select a day in the Ethiopic calendar in English
+        Given an Ethiopic calendar is rendered in English
+        Then we should be able to select a day

package/src/features/supports_gregorian_calendar/supports_gregorian_calendar.js

@@ -0,0 +1,62 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a Gregorian calendar is rendered in {word}', (language) => {
+    cy.visitStory('CalendarInputTesting', `Gregorian With ${language}`)
+
+    cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click()
+    cy.get('[data-test=calendar]').should('be.visible')
+})
+
+Then('days should be rendered in "{word}"', (language) => {
+    const days =
+        language === 'arabic'
+            ? [
+                  'الاثنين',
+                  'الثلاثاء',
+                  'الأربعاء',
+                  'الخميس',
+                  'الجمعة',
+                  'السبت',
+                  'الأحد',
+              ]
+            : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+
+    days.forEach((day) => {
+        cy.contains(day).should('be.visible')
+    })
+})
+
+Then('months should be rendered in "{word}" with navigation', (language) => {
+    const months =
+        language === 'english'
+            ? { current: 'October', previous: 'September', next: 'November' }
+            : { current: 'أكتوبر', previous: 'سبتمبر', next: 'نوفمبر' }
+
+    cy.get('[data-test="calendar-month-select"] option:selected').should(
+        'have.text',
+        months.current
+    )
+    cy.get('[data-test="calendar-next-month"]').click()
+    cy.get('[data-test="calendar-month-select"] option:selected').should(
+        'have.text',
+        months.next
+    )
+    cy.get('[data-test="calendar-previous-month"]').click()
+    cy.get('[data-test="calendar-previous-month"]').click()
+    cy.get('[data-test="calendar-month-select"] option:selected').should(
+        'have.text',
+        months.previous
+    )
+})
+
+Then('we should be able to select a day', () => {
+    const date = '2021-10-13'
+    cy.get(`[data-test="${date}"]`).click()
+
+    cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should(
+        'have.value',
+        date
+    )
+
+    cy.get('[data-test="storybook-calendar-result"]').should('have.text', date)
+})

package/src/features/supports_gregorian_calendar.feature

@@ -0,0 +1,19 @@
+Feature: The Calendar renders in the Gregorian calendar system
+
+    Scenario: Display a Gregorian calendar in arabic
+        Given a Gregorian calendar is rendered in "arabic"
+        Then days should be rendered in "arabic"
+        And months should be rendered in "arabic" with navigation
+
+    Scenario: Select a day in the Gregorian calendar in arabic
+        Given a Gregorian calendar is rendered in "arabic"
+        Then we should be able to select a day
+
+    Scenario: Display a Gregorian calendar in English
+        Given a Gregorian calendar is rendered in "english"
+        Then days should be rendered in "english"
+        And months should be rendered in "english" with navigation
+
+    Scenario: Select a day in the Gregorian calendar in English
+        Given a Gregorian calendar is rendered in English
+        Then we should be able to select a day

package/src/features/supports_islamic_calendar/supports_islamic_calendar.js

@@ -0,0 +1,17 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('an Islamic calendar is rendered with Arabic locale', () => {
+    cy.visitStory('CalendarInputTesting', `Islamic With Arabic`)
+    cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click()
+    cy.get('[data-test=calendar]').should('be.visible')
+})
+
+Then('days should be rendered in Arabic', () => {
+    cy.contains('الأحد').should('be.visible')
+    cy.contains('السبت').should('be.visible')
+    cy.contains('الجمعة').should('be.visible')
+    cy.contains('الخميس').should('be.visible')
+    cy.contains('الأربعاء').should('be.visible')
+    cy.contains('الثلاثاء').should('be.visible')
+    cy.contains('الاثنين').should('be.visible')
+})

package/src/features/supports_islamic_calendar.feature

@@ -0,0 +1,5 @@
+Feature: The Calendar renders in the islamic-civil calendar system
+
+    Scenario: A Calendar for the Islamic calendar
+        Given an Islamic calendar is rendered with Arabic locale
+        Then days should be rendered in Arabic

package/src/features/supports_nepali_calendar/supports_nepali_calendar.js

@@ -0,0 +1,60 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a nepali calendar in "{word}" is rendered', (language) => {
+    cy.visitStory('CalendarInputTesting', `Nepali With ${language}`)
+    cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]', {
+        timeout: 10000,
+    }).click()
+    cy.get('[data-test=calendar]').should('be.visible')
+})
+
+Then('nepali days should be rendered in "{word}"', (language) => {
+    const days =
+        language === 'nepali'
+            ? ['आइत', 'सोम', 'सोम', 'बुध', 'बिही', 'शुक्र', 'शनि']
+            : ['Som', 'Mangl', 'Budha', 'Bihi', 'Shukra', 'Shani', 'Aaita']
+
+    days.forEach((day) => {
+        cy.contains(day).should('be.visible')
+    })
+})
+
+Then('months should be rendered in "{word}" with navigation', (language) => {
+    //
+
+    const months =
+        language === 'nepali'
+            ? { current: 'असोज', previous: 'भदौ', next: 'कार्तिक' }
+            : { current: 'Ashwin', previous: 'Bhadra', next: 'Kartik' }
+
+    cy.get('[data-test="calendar-month-select"] option:selected').should(
+        'have.text',
+        months.current
+    )
+    cy.get('[data-test="calendar-next-month"]').click()
+    cy.get('[data-test="calendar-month-select"] option:selected').should(
+        'have.text',
+        months.next
+    )
+    cy.get('[data-test="calendar-previous-month"]').click()
+    cy.get('[data-test="calendar-previous-month"]').click()
+    cy.get('[data-test="calendar-month-select"] option:selected').should(
+        'have.text',
+        months.previous
+    )
+})
+
+Then('we should be able to select a day', () => {
+    const nepaliDate = '2078-06-27'
+    cy.get(`[data-test="${nepaliDate}"]`).click()
+
+    cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should(
+        'have.value',
+        nepaliDate
+    )
+
+    cy.get('[data-test="storybook-calendar-result"]').should(
+        'have.text',
+        nepaliDate
+    )
+})

package/src/features/supports_nepali_calendar.feature

@@ -0,0 +1,19 @@
+Feature: The Calendar renders in Nepali calendar system
+
+    Scenario: Display a Nepali calendar in Nepali
+        Given a nepali calendar in "nepali" is rendered
+        Then nepali days should be rendered in "nepali"
+        And months should be rendered in "nepali" with navigation
+
+    Scenario: Select a day in the Nepali calendar in Nepali
+        Given a nepali calendar in "nepali" is rendered
+        Then we should be able to select a day
+
+    Scenario: Display a Nepali calendar in English
+        Given a nepali calendar in "english" is rendered
+        Then nepali days should be rendered in "english"
+        And months should be rendered in "english" with navigation
+
+    Scenario: Select a day in the Nepali calendar in English
+        Given a nepali calendar in "english" is rendered
+        Then we should be able to select a day

package/src/index.js

@@ -0,0 +1,2 @@
+export { Calendar } from './calendar/calendar.js'
+export { CalendarInput } from './calendar-input/calendar-input.js'

package/src/locales/en/translations.json

@@ -0,0 +1,6 @@
+{
+    "Go to previous year": "Go to previous year",
+    "Go to next year": "Go to next year",
+    "Pick a date": "Pick a date",
+    "Clear": "Clear"
+}

package/src/locales/index.js

@@ -0,0 +1,16 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+import i18n from '@dhis2/d2-i18n'
+
+import enTranslations from './en/translations.json'
+
+const namespace = 'default'
+i18n.addResources('en', namespace, enTranslations)
+
+export default i18n