@dhis2-ui/calendar 10.16.1 → 10.16.3-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/calendar",
-    "version": "10.16.1",
+    "version": "10.16.3-alpha.1",
     "description": "UI Calendar",
     "repository": {
         "type": "git",
@@ -33,21 +33,22 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/button": "10.16.1",
-        "@dhis2-ui/card": "10.16.1",
-        "@dhis2-ui/input": "10.16.1",
-        "@dhis2-ui/layer": "10.16.1",
-        "@dhis2-ui/popper": "10.16.1",
+        "@dhis2-ui/button": "10.16.3-alpha.1",
+        "@dhis2-ui/card": "10.16.3-alpha.1",
+        "@dhis2-ui/input": "10.16.3-alpha.1",
+        "@dhis2-ui/layer": "10.16.3-alpha.1",
+        "@dhis2-ui/popper": "10.16.3-alpha.1",
         "@dhis2/multi-calendar-dates": "2.1.2",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.16.1",
-        "@dhis2/ui-icons": "10.16.1",
+        "@dhis2/ui-constants": "10.16.3-alpha.1",
+        "@dhis2/ui-icons": "10.16.3-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
         "build",
-        "types"
+        "types",
+        "src"
     ],
     "devDependencies": {
         "@dhis2/d2-i18n": "^1.1.0",

package/src/__e2e__/calendar-input.e2e.stories.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { CalendarInput as component } from '../index.js'
+import { CalendarWithClearButton } from '../stories/calendar-input.prod.stories.js'
+export default { title: 'CalendarInputTesting', component }
+
+export {
+    EthiopicWithAmharic,
+    EthiopicWithEnglish,
+    NepaliWithEnglish,
+    NepaliWithNepali,
+    GregorianWithArabic,
+    GregorianWithEnglish,
+    IslamicWithArabic,
+} from '../stories/calendar-input.prod.stories.js'
+
+export const TestCalendarWithClearButton = () => {
+    const params = new URLSearchParams(location.search)
+    const calendar = params.get('calendar') ?? 'gregory'
+    const initialDate = params.get('initialDate') ?? null
+
+    return <CalendarWithClearButton calendar={calendar} date={initialDate} />
+}

package/src/calendar/calendar-container.js

@@ -0,0 +1,99 @@
+import { colors, elevations } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React, { useMemo } from 'react'
+import { CalendarTable, CalendarTableProps } from './calendar-table.js'
+import {
+    NavigationContainer,
+    NavigationContainerProps,
+} from './navigation-container.js'
+
+const backgroundColor = colors.white
+
+export const CalendarContainer = React.memo(function CalendarContainer({
+    date,
+    width = '240px',
+    cellSize = '32px',
+    calendarWeekDays,
+    weekDayLabels,
+    currMonth,
+    currYear,
+    nextMonth,
+    nextYear,
+    prevMonth,
+    prevYear,
+    navigateToYear,
+    navigateToMonth,
+    months,
+    years,
+    languageDirection,
+    calendarRef,
+}) {
+    const navigationProps = useMemo(() => {
+        return {
+            currMonth,
+            currYear,
+            nextMonth,
+            nextYear,
+            prevMonth,
+            prevYear,
+            languageDirection,
+            navigateToYear,
+            navigateToMonth,
+            months,
+            years,
+        }
+    }, [
+        currMonth,
+        currYear,
+        languageDirection,
+        nextMonth,
+        nextYear,
+        prevMonth,
+        prevYear,
+        navigateToYear,
+        navigateToMonth,
+        months,
+        years,
+    ])
+    return (
+        <div>
+            <div
+                className="calendar-wrapper"
+                dir={languageDirection}
+                data-test="calendar"
+            >
+                <div ref={calendarRef}>
+                    <NavigationContainer {...navigationProps} />
+                    <CalendarTable
+                        selectedDate={date}
+                        calendarWeekDays={calendarWeekDays}
+                        weekDayLabels={weekDayLabels}
+                        cellSize={cellSize}
+                        width={width}
+                    />
+                </div>
+            </div>
+            <style jsx>{`
+                .calendar-wrapper {
+                    font-family: Roboto, sans-serif;
+                    font-weight: 400;
+                    font-size: 14px;
+                    background-color: ${backgroundColor};
+                    display: flex;
+                    flex-direction: column;
+                    border-radius: 3px;
+                    min-width: ${width};
+                    width: max-content;
+                    box-shadow: ${elevations.popover};
+                }
+            `}</style>
+        </div>
+    )
+})
+
+CalendarContainer.propTypes = {
+    /** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
+    date: PropTypes.string,
+    ...CalendarTableProps,
+    ...NavigationContainerProps,
+}

package/src/calendar/calendar-table-cell.js

@@ -0,0 +1,97 @@
+import { colors } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const CalendarTableCell = ({ day, cellSize, selectedDate }) => {
+    const dayHoverBackgroundColor = colors.grey200
+    const selectedDayBackgroundColor = colors.teal700
+
+    return (
+        <td data-test={day?.dateValue} onClick={day.onClick}>
+            <button
+                name="day"
+                className={cx('day', {
+                    isSelected: selectedDate === day?.dateValue,
+                    isToday: day.isToday,
+                    otherMonth: !day.isInCurrentMonth,
+                })}
+            >
+                {day.label}
+            </button>
+            <style jsx>{`
+                td {
+                    width: ${cellSize};
+                    height: 100%;
+                    height: ${cellSize};
+                    text-align: center;
+                    border: 2px solid transparent;
+                    padding: 0;
+                }
+                td span {
+                    display: inline-flex;
+                    padding: 2px 2px;
+                    justify-content: center;
+                    border: 2px solid transparent;
+                    min-width: 16px;
+                }
+                button {
+                    border: 0;
+                    overflow: hidden;
+                    width: ${cellSize};
+                    height: ${cellSize};
+                    border: 2px solid transparent;
+                    border-radius: 3px;
+                    background: none;
+                    color: ${colors.grey900};
+                }
+                button:hover {
+                    background-color: ${dayHoverBackgroundColor};
+                    text-decoration: underline;
+                    cursor: pointer;
+                }
+                button:active {
+                    background-color: ${colors.grey300};
+                }
+                button.isSelected,
+                button.otherMonth.isSelected {
+                    background-color: ${selectedDayBackgroundColor};
+                    color: white;
+                }
+                button.isToday {
+                    position: relative;
+                }
+                button.isToday::after {
+                    content: '';
+                    position: absolute;
+                    transform: translateX(-50%);
+                    height: 4px;
+                    width: 4px;
+                    bottom: 2px;
+                    left: 50%;
+                    border-radius: 100%;
+                    background-color: ${colors.teal600};
+                }
+                button.isSelected.isToday::after {
+                    background-color: ${colors.teal200};
+                }
+                button.otherMonth {
+                    color: ${colors.grey600};
+                }
+            `}</style>
+        </td>
+    )
+}
+
+CalendarTableCell.propTypes = {
+    cellSize: PropTypes.string,
+    day: PropTypes.shape({
+        dateValue: PropTypes.string,
+        isInCurrentMonth: PropTypes.bool,
+        isSelected: PropTypes.bool,
+        isToday: PropTypes.bool,
+        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        onClick: PropTypes.func,
+    }),
+    selectedDate: PropTypes.string,
+}

package/src/calendar/calendar-table-days-header.js

@@ -0,0 +1,40 @@
+import { colors } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const CalendarTableDaysHeader = ({ weekDayLabels }) => {
+    const dayNamesColor = colors.grey700
+
+    return (
+        <>
+            <thead>
+                <tr>
+                    {weekDayLabels.map((label, i) => (
+                        <th scope="col" key={`weekday-${i}`}>
+                            {label}
+                        </th>
+                    ))}
+                </tr>
+            </thead>
+            <style jsx>{`
+                th {
+                    color: ${dayNamesColor};
+                    font-weight: 300;
+                    font-style: normal;
+                    padding: 8px 8px;
+                    background: none;
+                    font-size: 0.85em;
+                    border: none;
+                    cursor: default;
+                }
+                tr {
+                    border: none;
+                }
+            `}</style>
+        </>
+    )
+}
+
+CalendarTableDaysHeader.propTypes = {
+    weekDayLabels: PropTypes.arrayOf(PropTypes.string),
+}

package/src/calendar/calendar-table.js

@@ -0,0 +1,74 @@
+import { spacers } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { CalendarTableCell } from './calendar-table-cell.js'
+import { CalendarTableDaysHeader } from './calendar-table-days-header.js'
+
+export const CalendarTable = ({
+    weekDayLabels,
+    calendarWeekDays,
+    width,
+    cellSize,
+    selectedDate,
+}) => (
+    <div className="calendar-table-wrapper">
+        <table className="calendar-table">
+            <CalendarTableDaysHeader weekDayLabels={weekDayLabels} />
+            <tbody>
+                {calendarWeekDays.map((week, weekIndex) => (
+                    <tr key={`week-${weekIndex + 1}`}>
+                        {week.map((day) => (
+                            <CalendarTableCell
+                                selectedDate={selectedDate}
+                                day={day}
+                                key={day?.dateValue}
+                                cellSize={cellSize}
+                                width={width}
+                            />
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+        <style jsx>{`
+            .calendar-table {
+                border: none;
+                border-collapse: collapse;
+                width: 100%;
+                margin-block: 0 ${spacers.dp4};
+            }
+            .calendar-table tr,
+            .calendar-table td {
+                border: none;
+            }
+            .calendar-table-wrapper {
+                padding-inline: ${spacers.dp4};
+            }
+        `}</style>
+    </div>
+)
+
+export const CalendarTableProps = {
+    calendarWeekDays: PropTypes.arrayOf(
+        PropTypes.arrayOf(
+            PropTypes.shape({
+                calendarDate: PropTypes.string,
+                isInCurrentMonth: PropTypes.bool,
+                isSelected: PropTypes.bool,
+                isToday: PropTypes.bool,
+                label: PropTypes.oneOfType([
+                    PropTypes.string,
+                    PropTypes.number,
+                ]),
+                zdt: PropTypes.object,
+                onClick: PropTypes.func,
+            }).isRequired
+        ).isRequired
+    ).isRequired,
+    cellSize: PropTypes.string,
+    selectedDate: PropTypes.string,
+    weekDayLabels: PropTypes.arrayOf(PropTypes.string),
+    width: PropTypes.string,
+}
+
+CalendarTable.propTypes = CalendarTableProps

package/src/calendar/calendar.js

@@ -0,0 +1,104 @@
+import {
+    useDatePicker,
+    useResolvedDirection,
+} from '@dhis2/multi-calendar-dates'
+import PropTypes from 'prop-types'
+import React, { useMemo, useState } from 'react'
+import { CalendarContainer } from './calendar-container.js'
+
+export const Calendar = ({
+    onDateSelect,
+    calendar,
+    date,
+    dir,
+    locale,
+    numberingSystem,
+    weekDayFormat = 'narrow',
+    timeZone,
+    width = '240px',
+    cellSize = '32px',
+    pastOnly,
+}) => {
+    const [selectedDateString, setSelectedDateString] = useState(date)
+    const languageDirection = useResolvedDirection(dir, locale)
+
+    const options = {
+        locale,
+        calendar,
+        timeZone,
+        numberingSystem,
+        weekDayFormat,
+        pastOnly,
+    }
+
+    const pickerResults = useDatePicker({
+        onDateSelect: (result) => {
+            const { calendarDateString } = result
+            setSelectedDateString(calendarDateString)
+            onDateSelect(result)
+        },
+        date: selectedDateString,
+        options,
+    })
+
+    const calendarProps = useMemo(() => {
+        return {
+            date,
+            dir,
+            locale,
+            width,
+            cellSize,
+            // minDate,
+            // maxDate,
+            // validation, // todo: clarify how we use validation props (and format) in Calendar (not CalendarInput)
+            // format,
+            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, dir, locale, pickerResults, width, languageDirection])
+
+    return (
+        <div>
+            <CalendarContainer {...calendarProps} />
+        </div>
+    )
+}
+
+export const CalendarProps = {
+    /** 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,
+    /** 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']),
+    /** 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,
+    /** 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,
+    /** the timeZone to use */
+    timeZone: PropTypes.string,
+    /** 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,
+}
+
+Calendar.propTypes = CalendarProps