@sqrzro/admin 1.0.0-beta.1

package/src/components/TextInput/TextInput.spec.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TestChangeHandler from '@utility/TestChangeHandler';
+
+import TextInput from './index';
+
+describe('TextInput', () => {
+    it('should render', () => {
+        render(<TextInput name="lorem" />);
+    });
+
+    it('should handle onChange', () => {
+        render(
+            <TestChangeHandler>
+                <TextInput name="lorem" />
+            </TestChangeHandler>
+        );
+
+        userEvent.type(screen.getByRole('textbox'), 'lorem');
+
+        expect(screen.getByRole('textbox')).toHaveValue('lorem');
+        expect(screen.getByTestId('test-change-handler-value')).toHaveTextContent('lorem');
+    });
+
+    it('should handle change if no onChange', () => {
+        const mockFn = jest.fn();
+        render(<TextInput name="lorem" />);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+
+        const input = screen.getByRole('textbox');
+        userEvent.type(input, 'lorem');
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+
+    it('should render disabled', () => {
+        render(<TextInput name="lorem" isDisabled />);
+
+        expect(screen.getByRole('textbox')).toBeDisabled();
+        expect(screen.getByTestId('text-input-root')).toHaveClass('root rootIsDisabled');
+    });
+
+    it('should render prefix', () => {
+        render(<TextInput name="lorem" prefix="LOREM" />);
+
+        expect(screen.getByTestId('text-input-root')).toHaveClass('root rootHasPrefix');
+        expect(screen.queryByText('LOREM')).toHaveClass('prefix');
+    });
+
+    it('should render suffix', () => {
+        render(<TextInput name="lorem" suffix="LOREM" />);
+
+        expect(screen.getByTestId('text-input-root')).toHaveClass('root rootHasSuffix');
+        expect(screen.queryByText('LOREM')).toHaveClass('suffix');
+    });
+
+    it('should handle prefix and suffix', () => {
+        render(<TextInput name="lorem" prefix="LOREM" suffix="LOREM" />);
+
+        expect(screen.getByTestId('text-input-root')).toHaveClass('root rootHasPrefix');
+        expect(screen.queryByText('LOREM')).toHaveClass('prefix');
+    });
+
+    it('should render no autocomplete', () => {
+        render(<TextInput autocomplete={false} name="lorem" />);
+        expect(screen.getByRole('textbox')).toHaveAttribute('autocomplete', 'off');
+    });
+
+    it('should have custom id', () => {
+        render(<TextInput id="ipsum" name="lorem" />);
+        expect(screen.getByRole('textbox')).toHaveAttribute('id', 'ipsum');
+    });
+
+    it('should render loading', () => {
+        render(<TextInput name="lorem" isLoading />);
+        expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+
+    it('should render placeholder', () => {
+        render(<TextInput name="lorem" placeholder="lorem" />);
+        expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'lorem');
+    });
+
+    it('should have error', () => {
+        render(<TextInput name="lorem" hasError />);
+        expect(screen.getByRole('textbox')).toHaveClass('input inputHasError');
+    });
+
+    it('should have prefix and error', () => {
+        render(<TextInput name="lorem" prefix="LOREM" hasError />);
+        expect(screen.queryByText('LOREM')).toHaveClass('hasError');
+    });
+
+    it('should have suffix and error', () => {
+        render(<TextInput name="lorem" suffix="LOREM" hasError />);
+        expect(screen.queryByText('LOREM')).toHaveClass('hasError');
+    });
+
+    it('should have clear button and error', () => {
+        render(<TextInput name="lorem" value="Lorem" hasError isClearable />);
+        expect(screen.getByTestId('text-input-ancillary-clear')).toHaveClass('hasError');
+    });
+
+    it('should handle onclear', () => {
+        const mockFn = jest.fn();
+        render(<TextInput name="lorem" onClear={mockFn} value="Lorem" isClearable />);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(screen.getByText('Clear'));
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({ target: { name: 'lorem', value: '' } });
+    });
+
+    it('should handle onclear with onchange', () => {
+        const mockFn = jest.fn();
+        render(<TextInput name="lorem" onChange={mockFn} value="Lorem" isClearable />);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(screen.getByText('Clear'));
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({ target: { name: 'lorem', value: '' } });
+    });
+
+    it('should handle onclear with no onchange', () => {
+        const mockFn = jest.fn();
+        render(<TextInput name="lorem" value="Lorem" isClearable />);
+
+        userEvent.click(screen.getByText('Clear'));
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+});

package/src/components/TextInput/TextInput.story.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import TextInput from './index';
+
+import TestChangeHandler from '@utility/TestChangeHandler';
+
+export default {
+    title: 'Components/TextInput',
+    component: TextInput,
+    decorators: [
+        (storyFn: () => React.ReactElement): React.ReactElement => (
+            <TestChangeHandler>{storyFn()}</TestChangeHandler>
+        ),
+    ],
+};
+
+export const Basic = (): React.ReactElement => <TextInput name="lorem" />;
+
+export const WithError = (): React.ReactElement => <TextInput name="lorem" hasError />;
+
+export const WithLoading = (): React.ReactElement => <TextInput name="lorem" isLoading />;
+
+export const WithPlaceholder = (): React.ReactElement => (
+    <TextInput name="lorem" placeholder="Lorem Ipsum" />
+);

package/src/components/TextInput/index.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import TextInputAncillary from '@core/TextInputAncillary';
+
+import type { InputProps, InputValue, SimpleEventHandler } from '@utility/interfaces';
+
+import styles from './TextInput.module.css';
+
+export interface TextInputProps
+    extends InputProps<InputValue, HTMLInputElement | HTMLTextAreaElement> {
+    autocomplete?: boolean;
+    isClearable?: boolean;
+    isLoading?: boolean;
+    onClear?: SimpleEventHandler;
+    placeholder?: string;
+    prefix?: string | null;
+    suffix?: string | null;
+    type?: string;
+}
+
+/**
+ * A customisable text input component.
+ */
+const TextInput: React.FunctionComponent<TextInputProps> = ({
+    autocomplete,
+    hasError,
+    id,
+    isClearable,
+    isDisabled,
+    isLoading,
+    name,
+    onChange,
+    onClear,
+    onKeyDown,
+    placeholder,
+    prefix,
+    suffix,
+    value,
+    type,
+}) => {
+    const handleChange = (event: React.ChangeEvent): void => {
+        const target = event.target as HTMLInputElement;
+        const simpleEvent = { target: { name, value: target.value } };
+
+        if (onChange) {
+            onChange(simpleEvent);
+        }
+    };
+
+    const handleClear = (): void => {
+        const simpleEvent = { target: { name, value: '' } };
+
+        if (onClear) {
+            onClear(simpleEvent);
+            return;
+        }
+
+        if (onChange) {
+            onChange(simpleEvent);
+        }
+    };
+
+    return (
+        <div
+            className={classNames(
+                styles.root,
+                prefix && styles.rootHasPrefix,
+                ((!prefix && suffix) || (isClearable && value)) && styles.rootHasSuffix,
+                isDisabled && styles.rootIsDisabled
+            )}
+            data-testid="text-input-root"
+        >
+            <input
+                autoComplete={
+                    autocomplete === false
+                        ? 'off'
+                        : undefined /* eslint-disable-line no-undefined */
+                }
+                className={classNames(
+                    styles.input,
+                    hasError && styles.inputHasError,
+                    prefix && styles.inputHasPrefix,
+                    ((!prefix && suffix) || (isClearable && value)) && styles.inputHasSuffix
+                )}
+                disabled={isDisabled}
+                id={id || `c_${name}`}
+                name={name}
+                onChange={handleChange}
+                onKeyDown={onKeyDown}
+                placeholder={placeholder}
+                type={type}
+                value={value?.toString() || ''}
+            />
+            <TextInputAncillary
+                hasError={hasError}
+                isClearable={isClearable}
+                isLoading={isLoading}
+                name={name}
+                onClear={handleClear}
+                prefix={prefix}
+                suffix={suffix}
+                value={value}
+            />
+        </div>
+    );
+};
+
+TextInput.propTypes = {
+    /** The name of the field. An ID is also generated from this (`c_${name}`). */
+    name: PropTypes.string.isRequired,
+
+    /**
+     * Whether or not the browser's autocomplete should be enabled. This can interfere with
+     * components like `AutoSuggest`, so it is recommended to set this to false in these instances.
+     */
+    autocomplete: PropTypes.bool,
+
+    /** If set to true, the `TextInput` will be styled to indicate this */
+    hasError: PropTypes.bool,
+
+    id: PropTypes.string,
+
+    /** If set to true, and the input has a value, a control to clear the input is displayed */
+    isClearable: PropTypes.bool,
+
+    /** If set to true, the input and any associated controls are disabled */
+    isDisabled: 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
+     */
+    isLoading: PropTypes.bool,
+    placeholder: PropTypes.string,
+    prefix: PropTypes.string,
+    suffix: PropTypes.string,
+    type: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    onChange: PropTypes.func,
+    onClear: PropTypes.func,
+    onKeyDown: PropTypes.func,
+};
+
+export default TextInput;

package/src/components/WebsiteInput/WebsiteInput.spec.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import WebsiteInput from './index';
+
+describe('WebsiteInput', () => {
+    it('should render', () => {
+        render(<WebsiteInput name="lorem" />);
+    });
+
+    it('should render prefix', () => {
+        render(<WebsiteInput name="lorem" />);
+
+        expect(screen.getByTestId('text-input-root')).toHaveClass('root rootHasPrefix');
+        expect(screen.queryByText('http://')).toHaveClass('prefix');
+    });
+});

package/src/components/WebsiteInput/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import TextInput from '@components/TextInput';
+import type { TextInputProps } from '@components/TextInput';
+
+/**
+ * A `TextInput` component with a pre-defined `prefix` prop set to a 'http://'. All other props are
+ * simply passed through to the TextInput. Technically, the order of the props is such that the
+ * prefix can be overridden or removed all together. If this is the case, the component is no
+ * different to a `TextInput`.
+ */
+const WebsiteInput: React.FunctionComponent<TextInputProps> = (props) => (
+    <TextInput prefix="http://" {...props} />
+);
+
+export default WebsiteInput;

package/src/components/WeekCalendar/WeekCalendar.module.css

@@ -0,0 +1,19 @@
+.root {
+    display: flex;
+    justify-content: space-between;
+}
+
+.scale {
+    background-color: var(--clr-white);
+    border-radius: .5rem;
+    padding-top: 3.2rem;
+    width: 6rem;
+}
+
+.hour {
+    color: var(--clr-grey700);
+    font-size: var(--fs-sml);
+    font-weight: var(--fw-bold);
+    height: 6rem;
+    text-align: center;
+}

package/src/components/WeekCalendar/index.tsx

@@ -0,0 +1,80 @@
+import React, { useMemo } from 'react';
+import { addDays, getWeek } from 'date-fns';
+import PropTypes from 'prop-types';
+
+import FormatService from '@services/FormatService';
+
+import WeekCalendarDay from '@core/WeekCalendarDay';
+
+import styles from './WeekCalendar.module.css';
+
+/*
+ * This function gets the first date of a week number. It 'Just Works', but it uses a lot of magic
+ * numbers, so it's easiest to just disable the eslint rule.
+ */
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+const getFirstDayOfWeek = (week: number, year: number): Date => {
+    const weekInDays = 7 * week;
+    const firstDayOfWeek = new Date(year, 0, weekInDays - 6);
+    const dow = firstDayOfWeek.getDay();
+    const ISOweekStart = firstDayOfWeek;
+
+    if (dow <= 4) {
+        ISOweekStart.setDate(firstDayOfWeek.getDate() - firstDayOfWeek.getDay() + 1);
+    } else {
+        ISOweekStart.setDate(firstDayOfWeek.getDate() + 8 - firstDayOfWeek.getDay());
+    }
+
+    return ISOweekStart;
+};
+/* eslint-enable */
+
+const formatHour = (hour: number): string => `${FormatService.twoDigits(hour)}00`;
+
+const DAYS_IN_WEEK = 7;
+const FIRST_HOUR = 8;
+
+interface WeekCalendarProps {
+    data: { id: number; datetime: string; patient: { name: string } }[];
+}
+
+const WeekCalendar: React.FunctionComponent<WeekCalendarProps> = ({ data }) => {
+    const week = useMemo<number>(() => getWeek(new Date()), []);
+
+    let days = [getFirstDayOfWeek(week, new Date().getFullYear())];
+
+    for (let index = 1; index < DAYS_IN_WEEK; index += 1) {
+        days = [...days, addDays(days[0], index)];
+    }
+
+    return (
+        <div className={styles.root}>
+            <div className={styles.scale}>
+                {/* eslint-disable react/no-array-index-key */}
+                {Array.from({ length: 12 }).map((_item, index) => (
+                    <div key={index} className={styles.hour}>
+                        {formatHour(index + FIRST_HOUR)}
+                    </div>
+                ))}
+                {/* eslint-enable */}
+            </div>
+            {days.map((item) => (
+                <WeekCalendarDay key={item.toString()} data={data} date={item} />
+            ))}
+        </div>
+    );
+};
+
+WeekCalendar.propTypes = {
+    data: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.number.isRequired,
+            datetime: PropTypes.string.isRequired,
+            patient: PropTypes.shape({
+                name: PropTypes.string.isRequired,
+            }).isRequired,
+        }).isRequired
+    ).isRequired,
+};
+
+export default WeekCalendar;

package/src/core/AppHeader/index.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from 'react';
+
+import { EventService } from '@sqrzro/utility';
+
+import Header from '@core/Header';
+
+const AppHeader: React.FunctionComponent = () => {
+    const [title, setTitle] = useState<string>();
+
+    useEffect(() => {
+        const sub = EventService.subscribe<string>('@app/title', (_key, data) => {
+            setTitle(data);
+        });
+
+        return (): void => {
+            EventService.unsubscribe(sub);
+        };
+    }, []);
+
+    return <Header title={title} />;
+};
+
+export default AppHeader;

package/src/core/AppLogo/AppLogo.module.css

@@ -0,0 +1,19 @@
+.root {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    position: relative;
+    text-indent: -999rem;
+    white-space: nowrap;
+    width: 100%;
+
+    & svg {
+        height: calc(100% - 2rem);
+        left: 1rem;
+        position: absolute;
+        top: 1rem;
+        width: calc(100% - 2rem);
+    }
+}

package/src/core/AppLogo/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Link from '@components/Link';
+import AppLogoImage from '@core/AppLogoImage';
+
+import styles from './AppLogo.module.css';
+
+interface AppLogoProps {
+    isLink?: boolean;
+}
+
+const AppLogo: React.FunctionComponent<AppLogoProps> = ({ isLink }) => {
+    if (isLink) {
+        return (
+            <Link className={styles.root} to="/">
+                <AppLogoImage />
+            </Link>
+        );
+    }
+
+    return (
+        <div className={styles.root}>
+            <AppLogoImage />
+        </div>
+    );
+};
+
+AppLogo.propTypes = {
+    isLink: PropTypes.bool,
+};
+
+export default AppLogo;

package/src/core/AppLogoImage/index.tsx

@@ -0,0 +1,19 @@
+import React, { Fragment } from 'react';
+
+import useAppContext from '@hooks/useAppContext';
+
+import Assistive from '@core/Assistive';
+import AppLogoPlaceholder from '@core/AppLogoPlaceholder';
+
+const AppLogoImage: React.FunctionComponent = () => {
+    const { Logo, name } = useAppContext();
+
+    return (
+        <Fragment>
+            <Assistive>{name}</Assistive>
+            {Logo ? <Logo /> : <AppLogoPlaceholder />}
+        </Fragment>
+    );
+};
+
+export default AppLogoImage;

package/src/core/AppLogoPlaceholder/index.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable max-len */
+
+import React from 'react';
+
+const AppLogoPlaceholder: React.FunctionComponent = () => (
+    <svg height="58" viewBox="0 0 58 58" width="58" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M11.2738 41.615C8.73625 38.0625 7.25 33.7125 7.25 29C7.25 17.0375 17.0375 7.25 29 7.25C33.7125 7.25 38.0625 8.73625 41.615 11.2738L49.8075 3.08125C50.9312 1.9575 50.1338 0 48.5387 0H7.25C3.2625 0 0 3.2625 0 7.25V48.5025C0 50.1338 1.9575 50.9313 3.08125 49.7713L11.2738 41.615Z"
+            fill="white"
+        />
+        <path
+            d="M43.4637 30.0512C43.6812 26.97 42.92 24.07 41.47 21.6412L21.6412 41.47C24.07 42.92 26.97 43.6812 30.0512 43.4637C37.1925 42.9562 42.9562 37.1925 43.4637 30.0512Z"
+            fill="white"
+        />
+        <path
+            d="M46.7263 16.385C49.2638 19.9375 50.75 24.2875 50.75 29C50.75 40.9625 40.9625 50.75 29 50.75C24.2875 50.75 19.9375 49.2638 16.385 46.7263L8.19251 54.9188C7.06876 56.0425 7.86626 58 9.46126 58H50.75C54.7375 58 58 54.7375 58 50.75V9.49751C58 7.86626 56.0425 7.06876 54.9188 8.22876L46.7263 16.385Z"
+            fill="white"
+        />
+        <path
+            d="M14.5362 27.9488C14.3187 31.03 15.08 33.93 16.53 36.3588L36.3587 16.53C33.93 15.08 31.03 14.3188 27.9487 14.5363C20.8075 15.0438 15.0437 20.8075 14.5362 27.9488Z"
+            fill="white"
+        />
+    </svg>
+);
+
+export default AppLogoPlaceholder;

package/src/core/Assistive/Assistive.module.css

@@ -0,0 +1,10 @@
+.root {
+    height: .1rem;
+    left: -99em;
+    overflow: hidden;
+    pointer-events: none;
+    position: absolute;
+    top: auto;
+    white-space: nowrap;
+    width: .1rem;
+}

package/src/core/Assistive/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './Assistive.module.css';
+
+interface AssistiveProps {
+    children: React.ReactNode;
+}
+
+const Assistive: React.FunctionComponent<AssistiveProps> = ({ children }) => (
+    <span className={styles.root}>{children}</span>
+);
+
+Assistive.propTypes = {
+    children: PropTypes.node.isRequired,
+};
+
+export default Assistive;

package/src/core/Banner/Banner.module.css

@@ -0,0 +1,36 @@
+.root {
+    background-color: var(--clr-grey900);
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    left: 0;
+    padding-bottom: 2rem;
+    position: fixed;
+    top: 0;
+    width: var(--banner-width);
+    z-index: 5;
+}
+
+.rootTopbar {
+    align-items: center;
+    flex-direction: row;
+    height: 6rem;
+    justify-content: space-between;
+    padding: 0;
+    padding-right: 1rem;
+    position: sticky;
+    top: 0;
+    width: 100%;
+}
+
+.logo {
+    background-color: var(--clr-brand);
+    height: var(--header-height);
+    padding: 1rem;
+}
+
+.logoTopbar {
+    height: 100%;
+    padding: 0;
+    width: 6rem;
+}

package/src/core/Banner/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import AppLogo from '@core/AppLogo';
+import Navigation from '@core/Navigation';
+import MeActions from '@core/MeActions';
+import useLayout from '@hooks/useLayout';
+
+import styles from './Banner.module.css';
+
+const Banner: React.FunctionComponent = () => {
+    const { applyLayoutClassName } = useLayout();
+
+    return (
+        <header className={classNames(styles.root, applyLayoutClassName(styles))}>
+            <div className={classNames(styles.logo, applyLayoutClassName(styles, 'logo'))}>
+                <AppLogo isLink />
+            </div>
+            <Navigation />
+            <MeActions />
+        </header>
+    );
+};
+
+export default Banner;