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

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

@@ -0,0 +1,255 @@
+import { Button } from '@dhis2-ui/button'
+import React, { useState } from 'react'
+import { Field, Form } from 'react-final-form'
+import { CalendarInput } from '../calendar-input/calendar-input.js'
+import { CalendarStoryWrapper } from './calendar-story-wrapper.js'
+
+const subtitle = `[Experimental] Calendar Input is a wrapper around Calendar displaying an input that triggers the calendar`
+const description = `
+Use a CalendarInput where there is a need to let the user input a date.
+
+Note that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.
+
+\`\`\`js
+import { CalendarInput } from '@dhis2/ui'
+\`\`\`
+`
+
+export default {
+    title: 'CalendarInput',
+    component: CalendarInput,
+    parameters: {
+        componentSubtitle: subtitle,
+        docs: { description: { component: description } },
+    },
+}
+
+const buildCalendar =
+    ({ date, locale, calendar }) =>
+    () =>
+        (
+            <CalendarStoryWrapper
+                component={CalendarInput}
+                dir="ltr"
+                timeZone="Africa/Khartoum"
+                weekDayFormat="short"
+                date={date}
+                locale={locale}
+                calendar={calendar}
+                onDateSelect={() => {}}
+            />
+        )
+
+export const EthiopicWithAmharic = buildCalendar({
+    calendar: 'ethiopic',
+    locale: 'am-ET',
+    date: '2014-02-03', // 13 Oct 2021
+})
+
+export const EthiopicWithEnglish = buildCalendar({
+    calendar: 'ethiopian', // using "ethiopian" rather than the correct "ethiopic" to immitate DHIS2 calendar types
+    locale: 'en-ET',
+    date: '2014-02-03', // 13 Oct 2021
+})
+
+export const NepaliWithNepali = buildCalendar({
+    calendar: 'nepali',
+    locale: 'ne-NP',
+    date: '2078-06-27', // 13 Oct 2021
+})
+
+export const NepaliWithEnglish = buildCalendar({
+    calendar: 'nepali',
+    locale: 'en-NP',
+    date: '2078-06-27', // 13 Oct 2021
+})
+
+export const GregorianWithEnglish = buildCalendar({
+    calendar: 'gregorian',
+    locale: 'en-CA',
+    date: '2021-10-13',
+})
+
+export const GregorianWithArabic = buildCalendar({
+    calendar: 'gregorian',
+    locale: 'ar-SD',
+    date: '2021-10-13',
+})
+
+export const IslamicWithArabic = () => {
+    return (
+        <div style={{ direction: 'rtl' }}>
+            <CalendarStoryWrapper
+                component={CalendarInput}
+                dir="rtl"
+                timeZone="Africa/Khartoum"
+                weekDayFormat="short"
+                date="1477-01-13"
+                locale="ar-SD"
+                calendar="islamic-civil"
+                clearable={true}
+                onDateSelect={() => {}}
+            />
+        </div>
+    )
+}
+
+export const CalendarWithClearButton = ({
+    calendar = 'gregory',
+    date: initialDate = null,
+}) => {
+    const [date, setDate] = useState(initialDate)
+    return (
+        <>
+            <CalendarInput
+                calendar={calendar}
+                date={date}
+                onDateSelect={(date) => {
+                    setDate(date?.calendarDateString)
+                }}
+                clearable
+            />
+            <div>
+                value:
+                <span data-test="storybook-calendar-date-value">
+                    {date ?? 'undefined'}
+                </span>
+            </div>
+        </>
+    )
+}
+
+export function CalendarWithStrictValidation() {
+    const [validation, setValidation] = useState({})
+
+    const errored = () => {
+        if (validation.error) {
+            return { calendar: validation.validationText }
+        }
+    }
+
+    return (
+        <Form
+            onSubmit={(values, meta) => {
+                console.log('SUBMITTING', { values, meta })
+            }}
+            initialValues={{ calendar: '2022-10-12' }}
+            validate={errored}
+        >
+            {({ handleSubmit, invalid }) => {
+                return (
+                    <form onSubmit={handleSubmit}>
+                        <Field name="calendar">
+                            {(props) => (
+                                <CalendarInput
+                                    {...props}
+                                    label="Enter a date"
+                                    helpText="Date has to be after 2022-11-01"
+                                    input={props.input}
+                                    meta={props.meta}
+                                    editable
+                                    date={props.input.value}
+                                    calendar="gregory"
+                                    {...validation}
+                                    minDate="2022-11-01"
+                                    onDateSelect={(date) => {
+                                        const validation = {
+                                            ...date.validation,
+                                            validationText:
+                                                date.validation
+                                                    .validationCode ===
+                                                'WRONG_FORMAT'
+                                                    ? 'custom validation message for format'
+                                                    : date.validation
+                                                          .validationText,
+                                        }
+                                        setValidation(validation)
+                                        props.input.onChange(
+                                            date ? date?.calendarDateString : ''
+                                        )
+                                    }}
+                                />
+                            )}
+                        </Field>
+
+                        <Button
+                            type="submit"
+                            disabled={invalid}
+                            onClick={handleSubmit}
+                        >
+                            Submit
+                        </Button>
+                    </form>
+                )
+            }}
+        </Form>
+    )
+}
+
+export function CalendarWithNonStrictValidation() {
+    const [validation, setValidation] = useState({})
+
+    const errored = () => {
+        if (validation.error) {
+            return { calendar: validation.validationText }
+        }
+    }
+
+    return (
+        <Form
+            onSubmit={(values, meta) => {
+                console.log('SUBMITTING', { values, meta })
+            }}
+            initialValues={{ calendar: '2022-10-12' }}
+            validate={errored}
+        >
+            {({ handleSubmit, invalid }) => {
+                return (
+                    <form onSubmit={handleSubmit}>
+                        <Field name="calendar">
+                            {(props) => (
+                                <CalendarInput
+                                    {...props}
+                                    label="Enter a date"
+                                    helpText="Date has to be after 2022-11-01"
+                                    input={props.input}
+                                    meta={props.meta}
+                                    editable
+                                    date={props.input.value}
+                                    calendar="gregory"
+                                    {...validation}
+                                    minDate="2022-11-01"
+                                    strictValidation={false}
+                                    onDateSelect={(date) => {
+                                        const validation = {
+                                            ...date.validation,
+                                            validationText:
+                                                date.validation
+                                                    .validationCode ===
+                                                'WRONG_FORMAT'
+                                                    ? 'custom validation message for format'
+                                                    : date.validation
+                                                          .validationText,
+                                        }
+                                        setValidation(validation)
+                                        props.input.onChange(
+                                            date ? date?.calendarDateString : ''
+                                        )
+                                    }}
+                                />
+                            )}
+                        </Field>
+
+                        <Button
+                            type="submit"
+                            disabled={invalid}
+                            onClick={handleSubmit}
+                        >
+                            Submit
+                        </Button>
+                    </form>
+                )
+            }}
+        </Form>
+    )
+}

package/src/stories/calendar-story-wrapper.js

@@ -0,0 +1,161 @@
+import { constants } from '@dhis2/multi-calendar-dates'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { Calendar } from '../calendar/calendar.js'
+
+const { calendars, numberingSystems } = constants
+export const CalendarStoryWrapper = (props) => {
+    const {
+        calendar = 'gregory',
+        locale,
+        timeZone,
+        dir,
+        component: Component = Calendar,
+        date,
+        weekDayFormat = 'narrow',
+    } = props
+    const [selectedCalendar, setSelectedCalendar] = useState(calendar)
+    const [selectedNumberingSystem, setSelectedNumberingSystem] = useState()
+    const [selectedDirection, setSelectedDirection] = useState(dir)
+    const [selectedWeekFormat, setWeekDayFormat] = useState(weekDayFormat)
+
+    const [selectedLocale, setLocale] = useState(locale)
+    const [selectedDate, setSelectedDate] = useState({
+        calendarDateString: date,
+    })
+
+    const changeCalendar = ({ target: { value } }) => {
+        setSelectedCalendar(value)
+    }
+    const changeNumberingSystem = ({ target: { value } }) => {
+        if (value === '-1') {
+            setSelectedNumberingSystem(null)
+        } else {
+            setSelectedNumberingSystem(value)
+        }
+    }
+    const changeDirection = ({ target: { value } }) => {
+        setSelectedDirection(value)
+    }
+
+    const changeWeekFormat = ({ target: { value } }) => {
+        setWeekDayFormat(value)
+    }
+
+    const onLocaleChanged = ({ target: { value } }) => {
+        setLocale(value)
+    }
+
+    return (
+        <div>
+            <div
+                style={{
+                    fontSize: '0.8em',
+                    marginBottom: 20,
+                    gap: 5,
+                    display: 'flex',
+                    alignItems: 'center',
+                }}
+            >
+                <div>Options</div>
+                <input
+                    defaultValue={locale}
+                    placeholder="locale"
+                    onBlur={onLocaleChanged}
+                />
+                <select onChange={changeCalendar} value={selectedCalendar}>
+                    <option disabled key={calendar} value="-1">
+                        Select calendar
+                    </option>
+                    {calendars.map((calendar) => {
+                        return (
+                            <option value={calendar} key={calendar}>
+                                {calendar}
+                            </option>
+                        )
+                    })}
+                </select>
+                <select
+                    onChange={changeNumberingSystem}
+                    value={selectedNumberingSystem}
+                >
+                    <option disabled key={calendar} value="-1">
+                        Select numbering system
+                    </option>
+                    {numberingSystems.map((system) => {
+                        return (
+                            <option value={system} key={system}>
+                                {system}
+                            </option>
+                        )
+                    })}
+                </select>
+                <select onChange={changeDirection} value={selectedDirection}>
+                    <option disabled value="-1">
+                        Select direction
+                    </option>
+                    <option value="ltr">Left-To-Right</option>
+                    <option value="rtl">Right-To-Left</option>
+                </select>
+                <select onChange={changeWeekFormat} value={selectedWeekFormat}>
+                    <option disabled value="-1">
+                        Select format
+                    </option>
+                    <option value="narrow">narrow</option>
+                    <option value="short">short</option>
+                    <option value="long">long</option>
+                </select>
+            </div>
+            <Component
+                {...props}
+                calendar={selectedCalendar}
+                dir={selectedDirection}
+                locale={selectedLocale}
+                date={selectedDate.calendarDateString}
+                onDateSelect={(date) => {
+                    setSelectedDate(date)
+                }}
+                {...selectedDate.validation}
+                timeZone={timeZone}
+                weekDayFormat={selectedWeekFormat}
+                numberingSystem={selectedNumberingSystem}
+            />
+            <div
+                style={{
+                    marginTop: 10,
+                    gap: 5,
+                    fontSize: '12px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                }}
+            >
+                <div>
+                    {selectedDate && (
+                        <>
+                            <div>
+                                <label>calendar date: </label>
+                                <span data-test="storybook-calendar-result">
+                                    {selectedDate.calendarDateString}
+                                </span>
+                            </div>
+                            <div>
+                                <label>callback:</label>
+                                {JSON.stringify(selectedDate, null, 2)}
+                            </div>
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+CalendarStoryWrapper.propTypes = {
+    calendar: PropTypes.string.isRequired,
+    component: PropTypes.elementType.isRequired,
+    date: PropTypes.string,
+    dir: PropTypes.oneOf(['ltr', 'rtl']),
+    locale: PropTypes.string,
+    timeZone: PropTypes.string,
+    weekDayFormat: PropTypes.string,
+}

package/src/stories/calendar.prod.stories.js

@@ -0,0 +1,91 @@
+import React from 'react'
+import { Calendar } from '../calendar/calendar.js'
+import { CalendarStoryWrapper } from './calendar-story-wrapper.js'
+
+const subtitle = `[Experimental] Calendar component is useful for creating a variety of calendars including Ethiopic, Islamic etc..`
+const description = `
+Use a Calendar where there is a need to let the user select a date.
+
+Note that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.
+
+\`\`\`js
+import { Calendar } from '@dhis2/ui'
+\`\`\`
+`
+
+export default {
+    title: 'Calendar',
+    component: Calendar,
+    parameters: {
+        componentSubtitle: subtitle,
+        docs: { description: { component: description } },
+    },
+    argTypes: {
+        calendar: {
+            control: 'select',
+            options: [
+                'gregory',
+                'islamic',
+                'nepali',
+                'ethiopic',
+                'persian',
+                'indian',
+            ],
+        },
+        weekDayFormat: {
+            control: 'select',
+            options: ['long', 'short', 'narrow'],
+        },
+        locale: {
+            control: 'text',
+        },
+        numberingSystem: {
+            control: 'select',
+            options: ['latn', 'arab', 'ethi'],
+        },
+        pastOnly: {
+            control: 'boolean',
+            defaultValue: false,
+        },
+    },
+}
+
+export const Basic = (args) => {
+    return <Calendar {...args} />
+}
+
+Basic.args = {
+    onDateSelect: (date) => console.log(date),
+    calendar: 'gregory',
+    weekDayFormat: 'narrow',
+    locale: 'en',
+}
+
+export const Ethiopic = (args) => {
+    return (
+        <CalendarStoryWrapper
+            calendar="ethiopic"
+            locale="am-et"
+            numberingSystem="ethi"
+            date="2014-04-05" // 13th of October 2022
+            timeZone="Africa/Khartoum"
+            {...args}
+        />
+    )
+}
+
+export const Nepali = (args) => {
+    return (
+        <CalendarStoryWrapper
+            calendar="nepali"
+            locale="ne-NP"
+            date="2079-06-29" // 13th of October 2022
+            timeZone="Africa/Khartoum"
+            {...args}
+        />
+    )
+}
+
+export const WithAnyCalendar = (args) => {
+    return <CalendarStoryWrapper calendar="gregory" locale="en-GB" {...args} />
+}