@sqrzro/admin 2.0.0 → 2.1.0-bz.1

package/src/components/TextInput/TextInput.stories.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import type { ComponentMeta } from '@storybook/react';
-
-import TextInput from './index';
-import type { TextInputProps } from './index';
-
-export default {
-    title: 'Components/TextInput',
-    component: TextInput,
-} as ComponentMeta<typeof TextInput>;
-
-function Template(args: TextInputProps): React.ReactElement {
-    return <TextInput {...args} name="lorem" />;
-}
-
-export const Basic = Template.bind({});
-
-export const WithError = Template.bind({});
-
-WithError.args = {
-    hasError: true,
-};
-
-export const WithLoading = Template.bind({});
-
-WithLoading.args = {
-    isLoading: true,
-};
-
-export const WithPlaceholder = Template.bind({});
-
-WithPlaceholder.args = {
-    placeholder: 'Lorem Ipsum',
-};
-
-export const WithPrefix = Template.bind({});
-
-WithPrefix.args = {
-    prefix: '£',
-};
-
-export const WithSuffix = Template.bind({});
-
-WithSuffix.args = {
-    suffix: '%',
-};

package/src/components/TextInput/index.tsx

@@ -1,11 +0,0 @@
-'use client';
-
-import React from 'react';
-import { TextInputComponent } from '@sqrzro/components';
-import type { TextInputProps } from '@sqrzro/components';
-
-function TextInput(props: TextInputProps): React.ReactElement {
-    return <TextInputComponent {...props} />;
-}
-
-export default TextInput;

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

@@ -1,17 +0,0 @@
-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.getByTestId('text-input-ancillary-prefix')).toHaveTextContent('http://');
-    });
-});

package/src/components/WebsiteInput/index.tsx

@@ -1,18 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import TextInput from '../TextInput';
-import type { TextInputProps } from '../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`.
- */
-function WebsiteInput(props: TextInputProps): React.ReactElement {
-    return <TextInput prefix="http://" {...props} />;
-}
-
-export default WebsiteInput;

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

@@ -1,19 +0,0 @@
-.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

@@ -1,80 +0,0 @@
-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 } }[];
-}
-
-function WeekCalendar({ data }: WeekCalendarProps): React.ReactElement {
-    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/AlertComponent/AlertComponent.module.css

@@ -1,110 +0,0 @@
-@keyframes overlayEnter {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes panelEnter {
-    0% {
-        opacity: 0;
-        transform: translate3d(-50%, 2rem, 0);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translate3d(-50%, 0, 0);
-    }
-}
-
-.root {
-    bottom: 0;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 10;
-}
-
-.overlay {
-    animation: overlayEnter .3s;
-    background-color: rgba(21, 37, 58, .8);
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-}
-
-.panel {
-    animation: panelEnter .15s ease-in-out;
-    animation-delay: .2s;
-    animation-fill-mode: both;
-    left: 50%;
-    position: absolute;
-    top: 15%;
-    transform: translateX(-50%);
-    width: 100%;
-}
-
-.panelSm {
-    max-width: 40rem;
-}
-
-.panelMd {
-    max-width: 56rem;
-}
-
-.panelLg {
-    max-width: 80rem;
-}
-
-.panelXl {
-    max-width: 92rem;
-}
-
-.logo {
-    align-items: center;
-    background-color: var(--clr-brand);
-    border-radius: 0 0 .5rem .5rem;
-    display: flex;
-    fill: var(--clr-white);
-    height: 8rem;
-    justify-content: center;
-    margin: -3rem auto 3rem;
-    width: 6rem;
-}
-
-.logoWarning {
-    background-color: var(--clr-warning);
-}
-
-.title {
-    border-bottom: .1rem var(--clr-grey300) solid;
-    color: var(--clr-grey600);
-    font-size: var(--fs-lrg);
-    font-weight: var(--fw-bold);
-    line-height: 1;
-    margin-bottom: 3rem;
-    margin-left: -.2rem;
-    margin-top: -.5rem;
-    padding-bottom: 2rem;
-    text-align: center;
-}
-
-.actions {
-    border-top: .1rem var(--clr-grey300) solid;
-    display: flex;
-    justify-content: center;
-    margin-bottom: -1rem;
-    margin-top: 3rem;
-    padding-top: 2rem;
-
-    & > * {
-        margin-left: 1rem;
-        width: auto;
-    }
-}

package/src/core/AlertComponent/AlertComponent.spec.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import AlertComponent from './index';
-
-describe('AlertComponent', () => {
-    it('should render', () => {
-        render(<AlertComponent title="Lorem">Lorem</AlertComponent>);
-    });
-
-    it('should render defaults', () => {
-        render(
-            <AlertComponent title="Lorem" isOpen>
-                Lorem
-            </AlertComponent>
-        );
-
-        expect(screen.getByRole('heading')).toHaveClass('title');
-        expect(screen.getByRole('heading')).toHaveTextContent(/^Lorem$/u);
-
-        expect(screen.getByRole('alert')).toHaveTextContent('LoremLorem');
-        expect(screen.getByRole('button')).toBeInTheDocument();
-    });
-
-    it('should render variant', () => {
-        render(
-            <AlertComponent title="Lorem" variant="primary" isOpen>
-                Lorem
-            </AlertComponent>
-        );
-
-        expect(screen.getByTestId('alert-component-logo')).toHaveClass('logo logoPrimary');
-    });
-
-    it('should render icon', () => {
-        render(
-            <AlertComponent icon="x" title="Lorem" isOpen>
-                Lorem
-            </AlertComponent>
-        );
-        expect(screen.getByRole('img', { hidden: true })).toHaveStyle('width: 40px');
-    });
-
-    it('should render actions', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        const actions = [
-            { label: 'Lorem', onClick: mockFn },
-            { label: 'Ipsum', onClick: mockFn, variant: 'secondary' as const },
-        ];
-
-        render(
-            <AlertComponent actions={actions} title="Lorem" isOpen>
-                Lorem
-            </AlertComponent>
-        );
-
-        expect(screen.queryAllByRole('button')).toHaveLength(3);
-
-        expect(screen.queryAllByRole('button')[0]).toHaveTextContent(/^Lorem$/u);
-
-        expect(mockFn).toHaveBeenCalledTimes(0);
-        await user.click(screen.queryAllByRole('button')[0]);
-        expect(mockFn).toHaveBeenCalledTimes(1);
-
-        expect(screen.queryAllByRole('button')[1]).toHaveTextContent(/^Ipsum$/u);
-        expect(screen.queryAllByRole('button')[1]).toHaveClass('root rootSecondary');
-    });
-
-    it('should handle onclose', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        render(
-            <AlertComponent onClose={mockFn} isOpen>
-                Lorem
-            </AlertComponent>
-        );
-
-        await user.click(screen.getByRole('button', { name: 'Close' }));
-        expect(mockFn).toHaveBeenCalledTimes(1);
-    });
-});

package/src/core/AlertComponent/AlertComponent.story.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import StorybookPanel from '../../utility/StorybookPanel';
-
-import AlertComponent from './index';
-
-export default { title: 'Components/AlertComponent', component: AlertComponent };
-
-const mockActions = [{ label: 'Lorem Ipsum', onClick: (): null => null }];
-
-export function Default(): React.ReactElement {
-    return (
-        <StorybookPanel>
-            <AlertComponent title="Lorem">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit
-            </AlertComponent>
-        </StorybookPanel>
-    );
-}
-
-export function WithActions(): React.ReactElement {
-    return (
-        <StorybookPanel>
-            <AlertComponent actions={mockActions} title="Lorem">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit
-            </AlertComponent>
-        </StorybookPanel>
-    );
-}

package/src/core/AlertComponent/index.tsx

@@ -1,109 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import { ucwords } from '@sqrzro/utility';
-
-import Button from '../../components/Button';
-
-import Icon from '../Icon';
-import Panel from '../Panel';
-
-import type { Action, StyleVariant } from '../../utility/interfaces';
-
-// Import styles from './AlertComponent.module.css';
-
-export interface AlertComponentProps {
-    actions?: Action[];
-    children: React.ReactNode;
-    icon?: string;
-    isOpen?: boolean;
-    onClose?: React.MouseEventHandler<HTMLButtonElement>;
-    title?: string;
-    variant?: StyleVariant;
-    width?: string;
-}
-
-/*
-.root {
-    bottom: 0;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 10;
-}
-*/
-
-function AlertComponent({
-    actions,
-    children,
-    icon,
-    isOpen,
-    onClose,
-    title,
-    variant,
-    width,
-}: AlertComponentProps): React.ReactElement | null {
-    if (!isOpen) {
-        return null;
-    }
-
-    function handleClose(event: React.MouseEvent<HTMLButtonElement>): void {
-        if (onClose) {
-            onClose(event);
-        }
-    }
-
-    return (
-        <dialog className="fixed inset-0" open={isOpen}>
-            <div className="/*styles.overlay*/" />
-            <aside className="max-w-sm" role="alert">
-                <Panel isPadded>
-                    <div
-                        className="mx-auto flex h-24 w-16 flex-col justify-center rounded-b-md bg-green-400"
-                        data-testid="alert-component-logo"
-                    >
-                        {icon ? <Icon icon={icon} size={40} /> : null}
-                    </div>
-                    {title ? (
-                        <h3 className="/*styles.title*/" role="heading">
-                            {title}
-                        </h3>
-                    ) : null}
-                    {children}
-                    <footer className="/*styles.actions*/">
-                        {actions?.map((action) => (
-                            <Button
-                                key={action.label}
-                                isDisabled={action.isDisabled}
-                                onClick={action.onClick}
-                                variant={action.variant}
-                            >
-                                {action.label}
-                            </Button>
-                        ))}
-
-                        <Button onClick={handleClose} variant="link">
-                            Close
-                        </Button>
-                    </footer>
-                </Panel>
-            </aside>
-        </dialog>
-    );
-}
-
-AlertComponent.propTypes = {
-    children: PropTypes.node.isRequired,
-    actions: PropTypes.arrayOf(
-        PropTypes.shape({
-            label: PropTypes.string.isRequired,
-            onClick: PropTypes.func.isRequired,
-        }).isRequired
-    ),
-    title: PropTypes.string,
-    variant: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'warning', 'danger']),
-};
-
-export default AlertComponent;

package/src/core/AppHeader/index.tsx

@@ -1,25 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-
-import { EventService } from '@sqrzro/utility';
-
-import Header from '../Header';
-
-function AppHeader(): React.ReactElement {
-    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

@@ -1,18 +0,0 @@
-.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% - 3rem);
-        max-height: 4rem;
-        max-width: 4rem;
-        width: calc(100% - 3rem);
-    }
-}

package/src/core/AppLogo/index.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Link from '../../components/Link';
-import AppLogoImage from '../AppLogoImage';
-
-// Import styles from './AppLogo.module.css';
-
-interface AppLogoProps {
-    isLink?: boolean;
-}
-
-function AppLogo({ isLink }: AppLogoProps): React.ReactElement {
-    const className = 'app-logo flex justify-center items-center';
-
-    if (isLink) {
-        return (
-            <Link className={className} to="/">
-                <AppLogoImage />
-            </Link>
-        );
-    }
-
-    return (
-        <div className={className}>
-            <AppLogoImage />
-        </div>
-    );
-}
-
-AppLogo.propTypes = {
-    isLink: PropTypes.bool,
-};
-
-export default AppLogo;

package/src/core/AppLogoImage/index.tsx

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

package/src/core/AppLogoPlaceholder/index.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-
-function AppLogoPlaceholder(): React.ReactElement {
-    return (
-        <svg
-            height="58"
-            role="img"
-            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/index.tsx

@@ -1 +0,0 @@
-export { AssistiveComponent as Assistive } from '@sqrzro/components';