@sqrzro/admin 1.0.0-beta.1

package/src/core/TextInputAncillary/TextInputAncillary.module.css

@@ -0,0 +1,64 @@
+.prefix,
+.suffix,
+.clear {
+    align-items: center;
+    background-color: var(--clr-white);
+    border: var(--clr-grey400) solid;
+    border-width: .1rem 0 .1rem .1rem;
+    border-radius: .3rem 0 0 .3rem;
+    bottom: 0;
+    color: var(--clr-grey600);
+    display: flex;
+    flex-direction: column;
+    font-size: var(--fs-sml);
+    font-weight: var(--fw-bold);
+    justify-content: center;
+    margin-right: -.1rem;
+    min-width: 4rem;
+    padding: 0 1.5rem;
+    position: relative;
+    text-align: center;
+
+    &.hasError {
+        border-color: var(--clr-error);
+    }
+
+    &::before {
+        border-left: .1rem var(--clr-grey400) solid;
+        bottom: .6rem;
+        content: '';
+        position: absolute;
+        right: 0;
+        top: .6rem;
+    }
+}
+
+input:focus ~ .prefix,
+input:focus ~ .suffix,
+input:focus ~ .clear {
+    border-color: var(--clr-primary);
+}
+
+.suffix,
+.clear {
+    border-radius: 0 .3rem .3rem 0;
+    border-width: .1rem .1rem .1rem 0;
+    margin-left: -.1rem;
+    margin-right: 0;
+
+    &::before {
+        left: 0;
+        right: auto;
+    }
+}
+
+.clear {
+    padding: 0 1rem;
+}
+
+.loader {
+    pointer-events: none;
+    position: absolute;
+    right: 1.5rem;
+    top: calc(50% - .4rem);
+}

package/src/core/TextInputAncillary/index.tsx

@@ -0,0 +1,72 @@
+import React, { Fragment } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import IconButton from '@core/IconButton';
+import Loader from '@core/Loader';
+
+import type { InputProps } from '@utility/interfaces';
+
+import styles from './TextInputAncillary.module.css';
+
+interface TextInputAncillaryProps extends InputProps {
+    isClearable?: boolean;
+    isLoading?: boolean;
+    onClear: () => void;
+    prefix?: string | null;
+    suffix?: string | null;
+}
+
+const TextInputAncillary: React.FunctionComponent<TextInputAncillaryProps> = ({
+    hasError,
+    isClearable,
+    isLoading,
+    onClear,
+    prefix,
+    suffix,
+    value,
+}) => (
+    <Fragment>
+        {prefix ? (
+            <span className={classNames(styles.prefix, hasError && styles.hasError)}>{prefix}</span>
+        ) : null}
+        {!prefix && suffix ? (
+            <span className={classNames(styles.suffix, hasError && styles.hasError)}>{suffix}</span>
+        ) : null}
+        {isClearable && value ? (
+            <span
+                className={classNames(styles.clear, hasError && styles.hasError)}
+                data-testid="text-input-ancillary-clear"
+            >
+                <IconButton icon="x" onClick={(): void => onClear()} size="sm">
+                    Clear
+                </IconButton>
+            </span>
+        ) : null}
+        {isLoading ? (
+            <span className={styles.loader}>
+                <Loader isMini />
+            </span>
+        ) : null}
+    </Fragment>
+);
+
+TextInputAncillary.propTypes = {
+    onClear: PropTypes.func.isRequired,
+
+    /** If set to trute, the `TextInput` will be styled to indicate this */
+    hasError: PropTypes.bool,
+
+    isClearable: PropTypes.bool,
+    isLoading: PropTypes.bool,
+
+    /**
+     * For uses of `TextInput` that involve an asynchronous process, setting this to true will add a
+     * mini version of the `Loader` component, to indicate that a process is taking place
+     */
+    prefix: PropTypes.string,
+    suffix: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default TextInputAncillary;

package/src/core/Toast/Toast.module.css

@@ -0,0 +1,55 @@
+.root {
+    background-color: var(--clr-grey800);
+    border-radius: .5rem;
+    box-shadow: 0 .3rem .3rem rgb(0, 0, 0, .03), 0 1rem 1rem rgb(0, 0, 0, .03);
+    color: var(--clr-white);
+    left: 50%;
+    max-width: 60rem;
+    min-width: 28rem;
+    opacity: 0;
+    padding: .7rem;
+    padding-left: 1rem;
+    pointer-events: none;
+    position: fixed;
+    top: calc(var(--banner-height) + 2rem);
+    transform: translate3d(-50%, -5rem, 0);
+    transition: opacity .15s, transform .15s;
+    width: 40%;
+    z-index: 20;
+}
+
+.rootIsOpen {
+    opacity: 1;
+    pointer-events: all;
+    transform: translate3d(-50%, 0, 0);
+}
+
+.rootSuccess {
+    background-color: var(--clr-success);
+}
+
+.rootError {
+    background-color: var(--clr-error);
+}
+
+.inner {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+}
+
+.progress {
+    min-width: 3.4rem;
+}
+
+.content {
+    flex-grow: 1;
+    font-size: var(--fs-sml);
+    font-weight: var(--fw-bold);
+    line-height: var(--lh-tight);
+    padding: 0 1.5rem .1rem;
+}
+
+.close {
+    min-width: 4rem;
+}

package/src/core/Toast/Toast.spec.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import ToastService from '@services/ToastService';
+
+import Toast from './index';
+
+describe('Toast', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render', () => {
+        render(<Toast />);
+        expect(screen.getByTestId('toast-root')).not.toHaveClass('rootIsOpen');
+    });
+
+    it('should open success', async () => {
+        render(<Toast />);
+
+        await waitFor(() => {
+            ToastService.success('Lorem Ipsum');
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText('Lorem Ipsum')).toBeInTheDocument();
+        });
+
+        expect(screen.getByTestId('toast-root')).toHaveClass('rootIsOpen rootSuccess');
+    });
+
+    it('should open error', async () => {
+        render(<Toast />);
+
+        await waitFor(() => {
+            ToastService.error('Lorem Ipsum');
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText('Lorem Ipsum')).toBeInTheDocument();
+        });
+
+        expect(screen.getByTestId('toast-root')).toHaveClass('rootIsOpen rootError');
+    });
+
+    it('should close success', async () => {
+        render(<Toast />);
+
+        await waitFor(() => {
+            ToastService.success('Lorem Ipsum');
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText('Lorem Ipsum')).toBeInTheDocument();
+        });
+
+        userEvent.click(screen.getByText('Close'));
+
+        await waitFor(() => {
+            expect(screen.queryByText('Lorem Ipsum')).not.toBeInTheDocument();
+        });
+    });
+
+    it('should automatically close', async () => {
+        jest.useFakeTimers();
+        const mockFn = jest.spyOn(global, 'setTimeout');
+
+        render(<Toast />);
+
+        await waitFor(() => {
+            ToastService.success('Lorem Ipsum');
+        });
+
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        expect(mockFn).toHaveBeenCalledWith(expect.any(Function), 6000);
+    });
+});

package/src/core/Toast/index.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+
+import { EventService, ucwords } from '@sqrzro/utility';
+
+import IconButton from '@core/IconButton';
+import RadialProgress from '@core/RadialProgress';
+
+import styles from './Toast.module.css';
+
+const TTL = 6000;
+
+const iconMap: Record<string, string> = {
+    success: 'checkCircle',
+    error: 'exclamationCircle',
+};
+
+const Toast: React.FunctionComponent = () => {
+    const timeout = useRef<number>();
+
+    const [type, setType] = useState('');
+    const [message, setMessage] = useState('');
+
+    const closeToast = (existingType: string): void => {
+        EventService.publish('@toast/send', { type: existingType });
+        window.clearTimeout(timeout.current);
+    };
+
+    useEffect(() => {
+        const sub = EventService.subscribe<{ message: string; type: string }>(
+            '@toast/send',
+            (_key, data) => {
+                setType(data.type);
+                setMessage(data.message);
+
+                if (timeout.current) {
+                    window.clearTimeout(timeout.current);
+                }
+
+                /*
+                 * A test checks if setTimeout is called in this circumstance. However, due to the
+                 * nature of asynchronous code in tests, coverage does not count this as covered. It
+                 * can therefore be safely ignored.
+                 */
+                /* istanbul ignore next */
+                timeout.current = window.setTimeout(() => closeToast(data.type), TTL);
+            }
+        );
+
+        return (): void => {
+            EventService.unsubscribe(sub);
+        };
+    }, []);
+
+    return (
+        <aside
+            className={classNames(
+                styles.root,
+                message && styles.rootIsOpen,
+                type && styles[`root${ucwords(type)}`]
+            )}
+            data-testid="toast-root"
+        >
+            <div className={styles.inner}>
+                {message ? (
+                    <div className={styles.progress}>
+                        <RadialProgress duration={TTL} icon={iconMap[type]} variant={type} />
+                    </div>
+                ) : null}
+                <p className={styles.content}>{message}</p>
+                <div className={styles.close}>
+                    <IconButton icon="x" onClick={(): void => closeToast(type)} variant="white">
+                        Close
+                    </IconButton>
+                </div>
+            </div>
+        </aside>
+    );
+};
+
+export default Toast;

package/src/core/WeekCalendarDay/WeekCalendarDay.module.css

@@ -0,0 +1,32 @@
+.root {
+    background: repeating-linear-gradient(var(--clr-grey300), white .3rem, white 6rem);
+    background-position: 0 4rem;
+    border-radius: .5rem;
+    position: relative;
+    width: 13%;
+}
+
+.title {
+    background-color: var(--clr-white);
+    border-radius: .5rem;
+    color: var(--clr-grey700);
+    font-size: var(--fs-sml);
+    font-weight: var(--fw-bold);
+    line-height: 4rem;
+    text-align: center;
+}
+
+.item {
+    background-color: var(--clr-link);
+    border-radius: .2rem;
+    color: var(--clr-white);
+    font-size: var(--fs-sml);
+    left: 1rem;
+    padding: .5rem .8rem;
+    position: absolute;
+    right: 1rem;
+
+    &:hover {
+        color: var(--clr-white);
+    }
+}

package/src/core/WeekCalendarDay/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import FormatService from '@services/FormatService';
+
+import Link from '@components/Link';
+
+import styles from './WeekCalendarDay.module.css';
+
+interface DataItem {
+    id: number;
+    datetime: string;
+    patient: { name: string };
+}
+
+interface TransformedItem extends DataItem {
+    offset: number;
+    to: string;
+}
+
+interface WeekCalendarDayProps {
+    data?: DataItem[] | null;
+    date: Date;
+}
+
+const WeekCalendarDay: React.FunctionComponent<WeekCalendarDayProps> = ({ data, date }) => {
+    const filtered: TransformedItem[] = (data || [])
+        .map((item) => {
+            const [itemDate, itemTime] = item.datetime.split(' ');
+
+            if (itemDate !== FormatService.date(date, 'Y-MM-dd')) {
+                return null;
+            }
+
+            const [hours, minutes] = itemTime.split(':');
+            // eslint-disable-next-line @typescript-eslint/no-magic-numbers, no-mixed-operators
+            const offset = (parseInt(hours, 10) - 8) * 60 + parseInt(minutes, 10) + 40;
+
+            return { ...item, offset, to: `/appointments/${item.id}` };
+        })
+        .filter((item): item is TransformedItem => Boolean(item));
+
+    return (
+        <div className={styles.root}>
+            <div className={styles.div}>{FormatService.date(date, 'E dd/MM')}</div>
+            {filtered.map((item) => (
+                <Link key={item.to} to={item.to}>
+                    {FormatService.date(item.datetime, 'HH:mm')} {item.patient.name}
+                </Link>
+            ))}
+        </div>
+    );
+};
+
+WeekCalendarDay.propTypes = {
+    date: PropTypes.instanceOf(Date).isRequired,
+    data: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.number.isRequired,
+            datetime: PropTypes.string.isRequired,
+            patient: PropTypes.shape({
+                name: PropTypes.string.isRequired,
+            }).isRequired,
+        }).isRequired
+    ),
+};
+
+export default WeekCalendarDay;

package/src/filters/BooleanFilter/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Dropdown from '@components/Dropdown';
+
+import type { FilterFieldProps, RenderSummaryArgs } from '@filters/interfaces';
+import { isStringArray } from '@utility/interfaces';
+import type { SimpleObject } from '@utility/interfaces';
+
+const getData = (data?: SimpleObject[] | string[]): SimpleObject[] => {
+    if (!data || !data.length || !isStringArray(data)) {
+        return [];
+    }
+
+    return [
+        {
+            id: 1,
+            name: data[0],
+        },
+        {
+            id: 0,
+            name: data[1],
+        },
+    ];
+};
+
+const BooleanFilter: React.FunctionComponent<FilterFieldProps> = ({ data, ...props }) => (
+    <Dropdown isPanelOnly {...props} data={getData(data)} />
+);
+
+BooleanFilter.propTypes = {
+    data: PropTypes.oneOfType([
+        PropTypes.arrayOf(
+            PropTypes.shape({
+                id: PropTypes.string.isRequired,
+                name: PropTypes.string.isRequired,
+            }).isRequired
+        ),
+        PropTypes.arrayOf(PropTypes.string.isRequired),
+    ]),
+};
+
+export const renderSummary = ({ data, value }: RenderSummaryArgs): string =>
+    getData(data).find((item) => item.id.toString() === value?.toString())?.name || '';
+
+export default BooleanFilter;

package/src/filters/DateFilter/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import CalendarInput from '@components/CalendarInput';
+
+import type { FilterFieldProps, RenderSummaryArgs } from '@filters/interfaces';
+import FormatService from '@services/FormatService';
+
+const YEAR_LENGTH = 4;
+
+const DateFilter: React.FunctionComponent<FilterFieldProps> = (props) => (
+    <CalendarInput isPanelOnly isRange {...props} />
+);
+
+export const renderSummary = ({ value }: RenderSummaryArgs): string => {
+    if (!value || typeof value !== 'string') {
+        return '';
+    }
+
+    const splitValues = value.split(',');
+
+    if (splitValues.length === 1) {
+        return '';
+    }
+
+    if (splitValues[0] === splitValues[1]) {
+        return FormatService.date(splitValues[0]);
+    }
+
+    const isSameYear = splitValues[0].startsWith(splitValues[1].substring(0, YEAR_LENGTH));
+
+    return splitValues
+        .map((item) => FormatService.date(item, isSameYear ? 'dd/MM' : 'dd/MM/Y'))
+        .join(' - ');
+};
+
+export default DateFilter;

package/src/filters/DropdownFilter/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Dropdown, { renderLabel } from '@components/Dropdown';
+
+import type { FilterFieldProps, RenderSummaryArgs } from '@filters/interfaces';
+import { isSimpleObjectArray } from '@utility/interfaces';
+import type { SimpleObject } from '@utility/interfaces';
+
+const checkData = (data?: SimpleObject[] | string[]): SimpleObject[] => {
+    if (!isSimpleObjectArray(data)) {
+        return [];
+    }
+    return data;
+};
+
+const DropdownFilter: React.FunctionComponent<FilterFieldProps> = ({
+    data,
+    extraProps,
+    ...props
+}) => (
+    <Dropdown
+        isPanelOnly
+        {...props}
+        data={checkData(data)}
+        isMultiple={Boolean(extraProps?.isMultiple)}
+    />
+);
+
+DropdownFilter.propTypes = {
+    data: PropTypes.oneOfType([
+        PropTypes.arrayOf(
+            PropTypes.shape({
+                id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+                name: PropTypes.string.isRequired,
+            }).isRequired
+        ),
+        PropTypes.arrayOf(PropTypes.string.isRequired),
+    ]),
+    extraProps: PropTypes.shape({
+        isMultiple: PropTypes.bool,
+    }),
+};
+
+export const renderSummary = ({ data, value, props }: RenderSummaryArgs): string => {
+    if (!data || !isSimpleObjectArray(data)) {
+        return '';
+    }
+
+    return renderLabel(data, value, props?.isMultiple as boolean) || '';
+};
+
+export default DropdownFilter;

package/src/filters/QuickDateFilter/index.tsx

@@ -0,0 +1,74 @@
+import React, { Fragment, useMemo } from 'react';
+import PropTypes from 'prop-types';
+
+import Dropdown from '@components/Dropdown';
+import type { FilterFieldProps, RenderSummaryArgs } from '@filters/interfaces';
+
+import DateFilter, { renderSummary as dateRenderSummary } from '@filters/DateFilter';
+import type { SimpleEvent } from '@utility/interfaces';
+import DateService from '@services/DateService';
+
+const QuickDateFilter: React.FunctionComponent<FilterFieldProps> = ({
+    onChange,
+    panelIndex,
+    setPanelIndex,
+    ...props
+}) => {
+    const data = useMemo(
+        () => [...DateService.getQuickDates(), { id: '[internal]', name: 'Custom...' }],
+        []
+    );
+
+    const handleChange = (event: SimpleEvent): void => {
+        if (event.target.value === '[internal]') {
+            if (setPanelIndex) {
+                setPanelIndex(1);
+            }
+            return;
+        }
+        if (onChange) {
+            onChange(event);
+        }
+    };
+
+    return (
+        <Fragment>
+            <div
+                data-testid="quick-date-filter-dropdown"
+                style={{ display: panelIndex === 0 ? 'block' : 'none' }}
+            >
+                <Dropdown isPanelOnly {...props} data={data} onChange={handleChange} />
+            </div>
+            <div
+                data-testid="quick-date-filter-date-filter"
+                style={{ display: panelIndex === 1 ? 'block' : 'none' }}
+            >
+                <DateFilter {...props} onChange={onChange} />
+            </div>
+        </Fragment>
+    );
+};
+
+QuickDateFilter.propTypes = {
+    panelIndex: PropTypes.number,
+    setPanelIndex: PropTypes.func,
+    onChange: PropTypes.func,
+};
+
+export const renderSummary = ({ value }: RenderSummaryArgs): string => {
+    if (!value || typeof value !== 'string') {
+        return '';
+    }
+
+    const quickDate = DateService.getQuickDates().find(
+        (item) => item.id.toString() === value.toString()
+    );
+
+    if (quickDate) {
+        return quickDate.name;
+    }
+
+    return dateRenderSummary({ value });
+};
+
+export default QuickDateFilter;