@sqrzro/admin 1.0.0-beta.1

package/src/core/BuildModal/index.tsx

@@ -0,0 +1,119 @@
+import React, { Fragment, useEffect, useState } from 'react';
+
+import { EventService } from '@sqrzro/utility';
+
+import useAppContext from '@hooks/useAppContext';
+
+import BuildService from '@services/BuildService';
+
+import Loader from '@core/Loader';
+import Modal from '@core/Modal';
+
+import type { SimpleAction } from '@utility/interfaces';
+
+interface BuildStatus {
+    title: string;
+    content: React.ReactNode;
+    actions: SimpleAction[] | null;
+}
+
+interface BuildConfig {
+    name: string;
+}
+
+const getStatusMap = (
+    config: BuildConfig,
+    setOpen: (boolean: boolean) => void
+): Record<string, BuildStatus> => ({
+    REQUESTED: {
+        title: `Build ${config.name}`,
+        content: (
+            <Fragment>
+                Changes you&#39;ve made won&#39;t appear on the site until you&#39;ve built them.
+                <br />
+                <strong>This can take up to a couple of minutes.</strong>
+            </Fragment>
+        ),
+        actions: [
+            {
+                label: 'Build',
+                onClick: BuildService.start,
+            },
+            {
+                variant: 'bordered',
+                label: 'Cancel',
+                onClick: (): void => setOpen(false),
+            },
+        ],
+    },
+    PENDING: {
+        title: `Building ${config.name}...`,
+        content: <Loader />,
+        actions: null,
+    },
+    ERROR: {
+        title: 'Build Failed',
+        content: (
+            <Fragment>
+                Unfortunately the build has failed. Please try again, and if the problem continues,
+                contact the site administrator.
+            </Fragment>
+        ),
+        actions: [
+            {
+                label: 'Try Again',
+                onClick: BuildService.start,
+            },
+            {
+                variant: 'bordered',
+                label: 'Cancel',
+                onClick: (): void => setOpen(false),
+            },
+        ],
+    },
+    SUCCESS: {
+        title: 'Build Complete',
+        content: <Fragment>The build has completed successfully.</Fragment>,
+        actions: [
+            {
+                label: 'Close',
+                onClick: (): void => setOpen(false),
+            },
+        ],
+    },
+});
+
+const BuildModal: React.FunctionComponent = () => {
+    const config = useAppContext();
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [status, setStatus] = useState('REQUESTED');
+
+    useEffect(() => {
+        const openSub = EventService.subscribe('@build/open', () => {
+            setStatus('REQUESTED');
+            setIsOpen(true);
+        });
+
+        const statusSub = EventService.subscribe<string>('@build/status', (_key, data) => {
+            setStatus(data);
+        });
+
+        return (): void => {
+            EventService.unsubscribe(openSub);
+            EventService.unsubscribe(statusSub);
+        };
+    }, []);
+
+    if (!isOpen) {
+        return null;
+    }
+
+    const statusMap = getStatusMap(config, setIsOpen);
+
+    const activeStatus: BuildStatus = statusMap[status];
+
+    return <Modal title={activeStatus.title}>{activeStatus.content}</Modal>;
+};
+
+export default BuildModal;

package/src/core/Calendar/index.tsx

@@ -0,0 +1,116 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import CalendarMonth from '@core/CalendarMonth';
+import CalendarNavigation from '@core/CalendarNavigation';
+
+import FormatService from '@services/FormatService';
+
+import type { SimpleEvent, SimpleEventHandler } from '@utility/interfaces';
+
+const getMonthFromDate = (date?: string): string => {
+    const dt = new Date();
+    const currentMonth = `${dt.getFullYear()}-${FormatService.twoDigits(dt.getMonth() + 1)}`;
+
+    if (!date) {
+        return currentMonth;
+    }
+
+    // If the date is a range, just use the first date in the range
+
+    if (/,/u.exec(date)) {
+        return getMonthFromDate(date.split(',')[0]);
+    }
+
+    const match = /^(?<month>[0-9]{4}-[0-9]{2})-[0-9]{2}$/u.exec(date);
+
+    if (!match) {
+        return currentMonth;
+    }
+
+    /* istanbul ignore next: No way to test that there is a match, but without any groups */
+    return match.groups?.month || currentMonth;
+};
+
+interface CalendarProps {
+    disabledDates?: string[] | ((date: string) => boolean);
+    isRange?: boolean;
+    name: string;
+    onChange: SimpleEventHandler;
+    value?: string;
+}
+
+const transformValue = (pendingValue: string, targetValue: string): string =>
+    [pendingValue, targetValue].sort((first, second) => first.localeCompare(second)).join(',');
+
+const getPendingValue = (pendingValue: string, targetValue: string): string => {
+    if (!pendingValue) {
+        return targetValue;
+    }
+    if (!/,/u.exec(pendingValue)) {
+        return transformValue(pendingValue, targetValue);
+    }
+    return targetValue;
+};
+
+const Calendar: React.FunctionComponent<CalendarProps> = ({
+    disabledDates,
+    isRange,
+    name,
+    value,
+    onChange,
+}) => {
+    const [activeMonth, setActiveMonth] = useState(getMonthFromDate(value));
+    const [pendingValue, setPendingValue] = useState('');
+
+    useEffect(() => {
+        setActiveMonth(getMonthFromDate(value));
+    }, [value]);
+
+    const handleNavigation = (event: SimpleEvent<string>): void => {
+        setActiveMonth(event.target.value);
+    };
+
+    const handleChange = (event: SimpleEvent<string>): void => {
+        if (!isRange) {
+            onChange(event);
+            return;
+        }
+
+        const pValue = getPendingValue(pendingValue, event.target.value);
+        setPendingValue(pValue);
+
+        if (!/,/u.exec(pValue)) {
+            return;
+        }
+
+        onChange({ target: { name, value: pValue } });
+    };
+
+    return (
+        <Fragment>
+            <CalendarNavigation month={activeMonth} name={name} onChange={handleNavigation} />
+            <CalendarMonth
+                disabledDates={disabledDates}
+                month={activeMonth}
+                name={name}
+                onClick={handleChange}
+                pendingValue={pendingValue}
+                value={value}
+            />
+        </Fragment>
+    );
+};
+
+Calendar.propTypes = {
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    disabledDates: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.string.isRequired),
+        PropTypes.func,
+    ]),
+    isRange: PropTypes.bool,
+    value: PropTypes.string,
+};
+
+export default Calendar;

package/src/core/CalendarDay/CalendarDay.module.css

@@ -0,0 +1,61 @@
+.root {
+    color: var(--clr-grey700);
+    height: 4rem;
+}
+
+.rootIsHighlighted {
+    background-color: var(--clr-primary10);
+}
+
+.rootIsSelected {
+    background-color: var(--clr-primary20);
+}
+
+.rootIsToday {
+    font-weight: var(--fw-bold);
+    position: relative;
+
+    &::before {
+        border: .2rem var(--clr-grey600) solid;
+        border-radius: 50%;
+        content: '';
+        height: 3rem;
+        left: calc(50% - 1.5rem);
+        position: absolute;
+        top: calc(50% - 1.5rem);
+        width: 3rem;
+    }
+}
+
+.rootIsDisabled {
+    background-color: transparent;
+    color: var(--clr-grey300);
+    pointer-events: none;
+}
+
+.control {
+    background: none;
+    border: 0;
+    color: inherit;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--fs-sml);
+    font-weight: inherit;
+    height: 100%;
+    position: relative;
+    width: 100%;
+
+    &:focus {
+        outline: none;
+
+        &::before {
+            border: .1rem var(--clr-grey400) solid;
+            bottom: .1rem;
+            content: '';
+            left: .1rem;
+            position: absolute;
+            right: .1rem;
+            top: .1rem;
+        }
+    }
+}

package/src/core/CalendarDay/index.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import type { SimpleEventHandler } from '@utility/interfaces';
+
+import DateService from '@services/DateService';
+
+import styles from './CalendarDay.module.css';
+
+export interface DayObject {
+    label: number;
+    date: string;
+}
+
+interface CalendarDayProps {
+    data: DayObject | number;
+    name: string;
+    onClick?: SimpleEventHandler<string>;
+    isDisabled?: boolean;
+    isHighlighted?: boolean;
+    isSelected?: boolean;
+}
+
+const CalendarDay: React.FunctionComponent<CalendarDayProps> = ({
+    data,
+    isDisabled,
+    isHighlighted,
+    isSelected,
+    name,
+    onClick,
+}) => {
+    if (typeof data === 'number') {
+        return <td className={styles.root} />;
+    }
+
+    const handleClick = (): void => {
+        if (onClick) {
+            const simpleEvent = { target: { name, value: data.date } };
+            onClick(simpleEvent);
+        }
+    };
+
+    return (
+        <td
+            className={classNames(
+                styles.root,
+                isHighlighted && styles.rootIsHighlighted,
+                isSelected && styles.rootIsSelected,
+                DateService.isToday(data.date) && styles.rootIsToday,
+                isDisabled && styles.rootIsDisabled
+            )}
+            data-testid={`calendar-day-root-${data.label}`}
+        >
+            <button
+                className={styles.control}
+                disabled={isDisabled}
+                onClick={handleClick}
+                type="button"
+            >
+                {data.label}
+            </button>
+        </td>
+    );
+};
+
+CalendarDay.propTypes = {
+    data: PropTypes.oneOfType([
+        PropTypes.number.isRequired,
+        PropTypes.shape({
+            date: PropTypes.string.isRequired,
+            label: PropTypes.number.isRequired,
+        }).isRequired,
+    ]).isRequired,
+    name: PropTypes.string.isRequired,
+    isDisabled: PropTypes.bool,
+    isHighlighted: PropTypes.bool,
+    isSelected: PropTypes.bool,
+    onClick: PropTypes.func,
+};
+
+export default CalendarDay;

package/src/core/CalendarMonth/CalendarMonth.module.css

@@ -0,0 +1,13 @@
+.root {
+    border-collapse: collapse;
+    margin-bottom: 1.5rem;
+    width: 100%;
+}
+
+.head {
+    color: var(--clr-grey500);
+    font-size: var(--fs-xsml);
+    font-weight: var(--fw-bold);
+    line-height: 1;
+    padding-bottom: 1rem;
+}

package/src/core/CalendarMonth/index.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import DateService from '@services/DateService';
+
+import CalendarWeek from '@core/CalendarWeek';
+import type { WeekObject } from '@core/CalendarWeek';
+
+import type { SimpleEventHandler } from '@utility/interfaces';
+
+import styles from './CalendarMonth.module.css';
+
+const DECIMAL = 10;
+const DAYS_IN_WEEK = 7;
+
+const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+
+const getWeeks = (month: string): WeekObject[] => {
+    const firstDay = `${month}-01`;
+
+    const firstDayofMonth = DateService.getDayOfWeek(firstDay);
+    const daysInMonth = DateService.getDaysInMonth(firstDay);
+    const lastDayofMonth = DateService.getDayOfWeek(`${month}-${daysInMonth}`);
+
+    const beforeDays = Array(firstDayofMonth).fill(0) as 0[];
+    const afterDays = Array(DAYS_IN_WEEK - 1 - lastDayofMonth).fill(0) as 0[];
+
+    const monthDays = Array.from({ length: daysInMonth }).map((_item, index) => ({
+        label: index + 1,
+        date: `${month}-${index + 1 < DECIMAL ? '0' : ''}${index + 1}`,
+    }));
+
+    const days = [...beforeDays, ...monthDays, ...afterDays];
+    const weeks = [];
+
+    for (let index = 0; index < days.length; index += DAYS_IN_WEEK) {
+        weeks.push(days.slice(index, index + DAYS_IN_WEEK));
+    }
+
+    return weeks.filter((week) => JSON.stringify(week) !== '[0,0,0,0,0,0,0]');
+};
+
+interface CalendarMonthProps {
+    disabledDates?: string[] | ((date: string) => boolean);
+    name: string;
+    month: string;
+    onClick?: SimpleEventHandler<string>;
+    pendingValue: string;
+    value?: string;
+}
+
+const CalendarMonth: React.FunctionComponent<CalendarMonthProps> = ({
+    disabledDates,
+    name,
+    month,
+    onClick,
+    pendingValue,
+    value,
+}) => {
+    const weeks = getWeeks(month);
+    return (
+        <table className={styles.root}>
+            <thead>
+                <tr>
+                    {DAYS.map((item) => (
+                        <th key={item} className={styles.head}>
+                            {item}
+                        </th>
+                    ))}
+                </tr>
+            </thead>
+            <tbody>
+                {weeks.map((item) => (
+                    <CalendarWeek
+                        key={typeof item[0] === 'number' ? item[0] : item[0].date}
+                        data={item}
+                        disabledDates={disabledDates}
+                        name={name}
+                        onClick={onClick}
+                        pendingValue={pendingValue}
+                        value={value}
+                    />
+                ))}
+            </tbody>
+        </table>
+    );
+};
+
+CalendarMonth.propTypes = {
+    month: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    pendingValue: PropTypes.string.isRequired,
+    disabledDates: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.string.isRequired),
+        PropTypes.func,
+    ]),
+    value: PropTypes.string,
+    onClick: PropTypes.func,
+};
+
+export default CalendarMonth;

package/src/core/CalendarNavigation/CalendarNavigation.module.css

@@ -0,0 +1,26 @@
+.root {
+    border-bottom: .1rem var(--clr-grey300) solid;
+    margin-bottom: 2rem;
+    padding: 1rem 0;
+    position: relative;
+}
+
+.title {
+    font-size: var(--fs-sml);
+    font-weight: var(--fw-bold);
+    line-height: 4rem;
+    text-align: center;
+}
+
+.control {
+    position: absolute;
+    top: 1.5rem;
+}
+
+.controlPrevious {
+    left: .6rem;
+}
+
+.controlNext {
+    right: .6rem;
+}

package/src/core/CalendarNavigation/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import DateService from '@services/DateService';
+import FormatService from '@services/FormatService';
+
+import IconButton from '@core/IconButton';
+
+import type { SimpleEventHandler } from '@utility/interfaces';
+
+import styles from './CalendarNavigation.module.css';
+
+interface CalendarNavigationProps {
+    month: string;
+    name: string;
+    onChange: SimpleEventHandler<string>;
+}
+
+const CalendarNavigation: React.FunctionComponent<CalendarNavigationProps> = ({
+    month,
+    name,
+    onChange,
+}) => {
+    const handleChange = (value: string): void => {
+        const simpleEvent = { target: { name, value } };
+        onChange(simpleEvent);
+    };
+
+    const handlePrevious = (): void => handleChange(DateService.subMonths(month, 1));
+    const handleNext = (): void => handleChange(DateService.addMonths(month, 1));
+
+    return (
+        <div className={styles.root}>
+            <p className={styles.title}>{FormatService.date(`${month}-01`, 'MMMM y')}</p>
+            <i className={classNames(styles.control, styles.controlPrevious)}>
+                <IconButton icon="arrowLeft" onClick={handlePrevious} size="sm">
+                    Previous
+                </IconButton>
+            </i>
+            <i className={classNames(styles.control, styles.controlNext)}>
+                <IconButton icon="arrowRight" onClick={handleNext} size="sm">
+                    Next
+                </IconButton>
+            </i>
+        </div>
+    );
+};
+
+CalendarNavigation.propTypes = {
+    month: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+};
+
+export default CalendarNavigation;

package/src/core/CalendarWeek/index.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import CalendarDay from '@core/CalendarDay';
+import type { DayObject } from '@core/CalendarDay';
+
+import type { SimpleEventHandler } from '@utility/interfaces';
+
+export type WeekObject = (DayObject | number)[];
+
+interface CalendarWeekProps {
+    data: WeekObject;
+    disabledDates?: string[] | ((date: string) => boolean);
+    name: string;
+    onClick?: SimpleEventHandler<string>;
+    pendingValue: string;
+    value?: string;
+}
+
+const isDisabled = (
+    item: DayObject | number,
+    disabledDates?: string[] | ((date: string) => boolean)
+): boolean => {
+    if (typeof item === 'number' || !disabledDates) {
+        return false;
+    }
+
+    if (typeof disabledDates === 'function') {
+        return disabledDates(item.date);
+    }
+
+    return disabledDates.includes(item.date);
+};
+
+const isSelected = (item: DayObject | number, pendingValue: string, value?: string): boolean => {
+    if (typeof item === 'number') {
+        return false;
+    }
+
+    return (pendingValue || value || '').split(',').includes(item.date);
+};
+
+const isHighlighted = (item: DayObject | number, pendingValue: string, value?: string): boolean => {
+    if (typeof item === 'number') {
+        return false;
+    }
+
+    const [lower, upper] = (pendingValue || value || '').split(',');
+    return item.date > lower && item.date < upper;
+};
+
+const CalendarWeek: React.FunctionComponent<CalendarWeekProps> = ({
+    data,
+    disabledDates,
+    name,
+    onClick,
+    pendingValue,
+    value,
+}) => (
+    <tr>
+        {data.map((item, index) => (
+            <CalendarDay
+                key={typeof item === 'number' ? index : item.date}
+                data={item}
+                isDisabled={isDisabled(item, disabledDates)}
+                isHighlighted={isHighlighted(item, pendingValue, value)}
+                isSelected={isSelected(item, pendingValue, value)}
+                name={name}
+                onClick={onClick}
+            />
+        ))}
+    </tr>
+);
+
+CalendarWeek.propTypes = {
+    data: PropTypes.arrayOf(
+        PropTypes.oneOfType([
+            PropTypes.number.isRequired,
+            PropTypes.shape({
+                date: PropTypes.string.isRequired,
+                label: PropTypes.number.isRequired,
+            }).isRequired,
+        ]).isRequired
+    ).isRequired,
+    name: PropTypes.string.isRequired,
+    pendingValue: PropTypes.string.isRequired,
+    disabledDates: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.string.isRequired),
+        PropTypes.func,
+    ]),
+    value: PropTypes.string,
+    onClick: PropTypes.func,
+};
+
+export default CalendarWeek;

package/src/core/ChkRad/ChkRad.module.css

@@ -0,0 +1,31 @@
+.root {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    position: relative;
+}
+
+.rootIsDisabled {
+    pointer-events: none;
+}
+
+.label {
+    color: var(--clr-grey600);
+    display: block;
+    font-size: var(--fs-sml);
+    font-weight: var(--fw-bold);
+    padding-left: 1.5rem;
+}
+
+input[disabled] ~ .label {
+    opacity: .3;
+    pointer-events: none;
+}
+
+.input {
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+}