@sqrzro/admin 2.0.0 → 2.1.0-bz.0

package/src/core/AuthForm/AuthForm.module.css

@@ -1,35 +0,0 @@
-.root {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    height: 80vh;
-    justify-content: center;
-    margin: 0 auto;
-    max-width: 48rem;
-    padding: 4rem clamp(2rem, 3.5vw, 5rem);
-
-    @media (--media-sml) {
-        max-width: 40rem;
-        padding: 4rem 0;
-    }
-}
-
-.logo {
-    background-color: var(--clr-brand);
-    border-radius: 0 0 .5rem .5rem;
-    display: flex;
-    flex-direction: column;
-    height: 10rem;
-    justify-content: center;
-    margin: -3rem auto 3rem;
-    width: 6rem;
-}
-
-.logoWarning {
-    background-color: var(--clr-warning);
-}
-
-.footer {
-    padding-top: 3rem;
-    text-align: center;
-}

package/src/core/AuthForm/AuthForm.spec.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import Button from '../../components/Button';
-
-import AuthForm from './index';
-
-describe('AuthForm', () => {
-    it('should render children', () => {
-        const mockFn = jest.fn();
-        render(<AuthForm onSubmit={mockFn}>Lorem</AuthForm>);
-        expect(screen.getByText('Lorem')).toBeInTheDocument();
-    });
-
-    it('should render applogo', () => {
-        const mockFn = jest.fn();
-        render(<AuthForm onSubmit={mockFn}>Lorem</AuthForm>);
-        expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
-    });
-
-    it('should render icon', () => {
-        const mockFn = jest.fn();
-
-        render(
-            <AuthForm icon="x" onSubmit={mockFn}>
-                Lorem
-            </AuthForm>
-        );
-
-        expect(screen.getByRole('img', { hidden: true })).toHaveStyle('width: 40px');
-    });
-
-    it('should render variant', () => {
-        const mockFn = jest.fn();
-
-        render(
-            <AuthForm onSubmit={mockFn} variant="primary">
-                Lorem
-            </AuthForm>
-        );
-
-        expect(screen.getByTestId('auth-form-logo')).toHaveClass('logo logoPrimary');
-    });
-
-    it('should render footer', () => {
-        const mockFn = jest.fn();
-
-        render(
-            <AuthForm footer="Ipsum" onSubmit={mockFn}>
-                Lorem
-            </AuthForm>
-        );
-
-        expect(screen.getByText('Ipsum')).toBeInTheDocument();
-    });
-
-    it('should handle onsubmit', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-
-        render(
-            <AuthForm onSubmit={mockFn}>
-                <Button type="submit">Submit</Button>
-            </AuthForm>
-        );
-
-        await user.click(screen.getByRole('button'));
-        expect(mockFn).toHaveBeenCalledTimes(1);
-    });
-});

package/src/core/AuthForm/index.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-
-import { ucwords } from '@sqrzro/utility';
-
-import Form from '../../components/Form';
-import type { FormProps } from '../../components/Form';
-
-import AppLogo from '../AppLogo';
-import Icon from '../Icon';
-import Panel from '../Panel';
-
-import type { StyleVariant } from '../../utility/interfaces';
-import useVariant from '../../hooks/useVariant';
-
-// Import styles from './AuthForm.module.css';
-
-interface AuthFormProps extends FormProps {
-    footer?: React.ReactNode;
-    icon?: string;
-    variant?: StyleVariant;
-}
-
-/*     background-color: var(--clr-brand);
-    border-radius: 0 0 .5rem .5rem;
-    display: flex;
-    flex-direction: column;
-    height: 10rem;
-    justify-content: center;
-    margin: -3rem auto 3rem;
-    width: 6rem;
-
-*/
-
-function AuthForm({
-    children,
-    footer,
-    icon,
-    variant,
-    ...formProps
-}: AuthFormProps): React.ReactElement {
-    const { applyVariantClassName } = useVariant(variant);
-
-    return (
-        <div className="mx-auto flex h-[80vh] max-w-sm flex-col items-center justify-center">
-            <Panel isPadded>
-                <div
-                    className={clsx(
-                        'mx-auto -mt-8 flex h-24 w-16 flex-col justify-center rounded-b-md bg-green-400',
-                        applyVariantClassName({ warning: 'bg-amber-400' })
-                    )}
-                    data-testid="auth-form-logo"
-                >
-                    {icon ? <Icon icon={icon} size={40} /> : <AppLogo />}
-                </div>
-                <Form {...formProps}>{children}</Form>
-                {footer ? <div className="/*styles.footer*/">{footer}</div> : null}
-            </Panel>
-        </div>
-    );
-}
-
-export default AuthForm;

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

@@ -1,34 +0,0 @@
-.root {
-    align-items: center;
-    background-color: var(--clr-grey900);
-    display: flex;
-    flex-direction: row;
-    height: 6rem;
-    padding-right: clamp(1rem, 2.5vw, 3rem);
-    position: sticky;
-    top: 0;
-    width: 100%;
-    z-index: 5;
-}
-
-.rootSidebar {
-    @media (--media-med) {
-        flex-direction: column;
-        height: 100vh;
-        padding: 0 0 4rem;
-    }
-}
-
-.logo {
-    background-color: var(--clr-brand);
-    height: 100%;
-    order: -99;
-    width: 6rem;
-}
-
-.logoSidebar {
-    @media (--media-med) {
-        height: var(--header-height);
-        width: 100%;
-    }
-}

package/src/core/Banner/index.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-
-import AppLogo from '../AppLogo';
-// Import Navigation from '../Navigation';
-import MeActions from '../MeActions';
-import useLayout from '../../hooks/useLayout';
-
-// Import styles from './Banner.module.css';
-
-function Banner(): React.ReactElement {
-    const { applyLayoutClassName } = useLayout();
-
-    return (
-        <header className="sticky top-0 h-screen bg-slate-800">
-            <div className="/*clsx(styles.logo, applyLayoutClassName(styles, 'logo'))*/">
-                <AppLogo isLink />
-            </div>
-            <MeActions />
-            {/* <Navigation /> */}
-        </header>
-    );
-}
-
-export default Banner;

package/src/core/Calendar/index.tsx

@@ -1,118 +0,0 @@
-'use client';
-
-import React, { Fragment, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-
-import CalendarMonth from '../CalendarMonth';
-import CalendarNavigation from '../CalendarNavigation';
-
-import FormatService from '../../services/FormatService';
-
-import type { InputEvent } 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: (event: InputEvent<string>) => void;
-    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;
-};
-
-function Calendar({
-    disabledDates,
-    isRange,
-    name,
-    value,
-    onChange,
-}: CalendarProps): React.ReactElement {
-    const [activeMonth, setActiveMonth] = useState(getMonthFromDate(value));
-    const [pendingValue, setPendingValue] = useState('');
-
-    useEffect(() => {
-        setActiveMonth(getMonthFromDate(value));
-    }, [value]);
-
-    const handleNavigation = (event: InputEvent<string>): void => {
-        setActiveMonth(event.target.value);
-    };
-
-    const handleChange = (event: InputEvent<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

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

@@ -1,82 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import type { InputEventHandler } 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?: InputEventHandler<string>;
-    isDisabled?: boolean;
-    isHighlighted?: boolean;
-    isSelected?: boolean;
-}
-
-function CalendarDay({
-    data,
-    isDisabled,
-    isHighlighted,
-    isSelected,
-    name,
-    onClick,
-}: CalendarDayProps): React.ReactElement {
-    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="/*clsx(
-                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

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

@@ -1,103 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import DateService from '../../services/DateService';
-
-import CalendarWeek from '../CalendarWeek';
-import type { WeekObject } from '../CalendarWeek';
-
-import type { InputEvent } from '../../utility/interfaces';
-
-type Day = 0 | { label: number; date: string };
-
-// 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: Day[] = [...beforeDays, ...monthDays, ...afterDays];
-    const weeks: Day[][] = [];
-
-    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?: (event: InputEvent<string>) => void;
-    pendingValue: string;
-    value?: string;
-}
-
-function CalendarMonth({
-    disabledDates,
-    name,
-    month,
-    onClick,
-    pendingValue,
-    value,
-}: CalendarMonthProps): React.ReactElement {
-    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

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

@@ -1,55 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import DateService from '../../services/DateService';
-import FormatService from '../../services/FormatService';
-
-import IconButton from '../IconButton';
-
-import type { InputEventHandler } from '../../utility/interfaces';
-
-// Import styles from './CalendarNavigation.module.css';
-
-interface CalendarNavigationProps {
-    month: string;
-    name: string;
-    onChange: InputEventHandler<string>;
-}
-
-function CalendarNavigation({
-    month,
-    name,
-    onChange,
-}: CalendarNavigationProps): React.ReactElement {
-    const handleChange = (value: string): void => {
-        onChange({ target: { name, value } });
-    };
-
-    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="/*clsx(styles.control, styles.controlPrevious)*/">
-                <IconButton icon="arrowLeft" onClick={handlePrevious} size="sm">
-                    Previous
-                </IconButton>
-            </i>
-            <i className="/*clsx(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;