@sqrzro/admin 2.0.0 → 2.1.0-bz.1

package/src/core/NavigationDivider/index.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-
-import useLayout from '../../hooks/useLayout';
-
-// Import styles from './NavigationDivider.module.css';
-
-function NavigationDivider(): React.ReactElement {
-    const { applyLayoutClassName } = useLayout();
-    return <li className="/*clsx(styles.root, applyLayoutClassName(styles))*/">-</li>;
-}
-
-export default NavigationDivider;

package/src/core/NavigationItem/NavigationItem.module.css

@@ -1,46 +0,0 @@
-.root {
-    font-size: var(--fs-sml);
-    line-height: 1;
-    text-transform: none;
-}
-
-.rootTopbar {
-    @media (--media-med) {
-        margin: 0 .5rem;
-    }
-}
-
-.link {
-    background-color: transparent;
-    border: 0;
-    color: var(--clr-white);
-    cursor: pointer;
-    display: block;
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    padding: 2rem clamp(1rem, 2.5vw, 3rem);
-    text-align: left;
-    width: 100%;
-
-    &:hover {
-        color: var(--clr-grey200);
-    }
-}
-
-.linkSidebar {
-    @media (--media-med) {
-        padding: 2rem 1rem;
-    }
-}
-
-.linkTopbar {
-    @media (--media-med) {
-        border-radius: .3rem;
-        padding: 1rem;
-    }
-}
-
-.linkIsActive {
-    background-color: var(--clr-grey700);
-}

package/src/core/NavigationItem/index.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import Link from '../../components/Link';
-import useLayout from '../../hooks/useLayout';
-
-import type { NavigationObject } from '../../utility/interfaces';
-
-// Import styles from './NavigationItem.module.css';
-
-interface NavigationItemProps extends NavigationObject {
-    isActive?: boolean;
-}
-
-function NavigationItem({ isActive, label, to, onClick }: NavigationItemProps): React.ReactElement {
-    const { applyLayoutClassName } = useLayout();
-    // Const rootClass = clsx(styles.root, applyLayoutClassName(styles));
-
-    if (to) {
-        return (
-            <li className="rootClass">
-                <Link
-                    className="clsx(styles.link, applyLayoutClassName(styles, 'link'), isActive && styles.linkIsActive)"
-                    onClick={onClick}
-                    to={to}
-                >
-                    {label}
-                </Link>
-            </li>
-        );
-    }
-
-    return (
-        <li className="rootClass">
-            <button className="/*styles.link*/" onClick={onClick} type="button">
-                {label}
-            </button>
-        </li>
-    );
-}
-
-NavigationItem.propTypes = {
-    label: PropTypes.string.isRequired,
-    isActive: PropTypes.bool,
-    to: PropTypes.string,
-    onClick: PropTypes.func,
-};
-
-export default NavigationItem;

package/src/core/Panel/Panel.module.css

@@ -1,26 +0,0 @@
-.root {
-    background-color: var(--clr-white);
-    border-radius: .5rem;
-    margin-bottom: 1rem;
-    padding: 2rem clamp(1rem, 2.5vw, 2rem);
-    width: 100%;
-}
-
-.rootIsPadded {
-    padding: 3rem clamp(1.5rem, 3.75vw, 3rem);
-}
-
-.rootIsSpaced {
-    margin-bottom: 2rem;
-}
-
-.title {
-    border-bottom: .1rem var(--clr-grey300) solid;
-    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;
-}

package/src/core/Panel/Panel.spec.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-
-import Panel from './index';
-
-describe('Panel', () => {
-    it('should render childen', () => {
-        render(<Panel>Lorem</Panel>);
-        expect(screen.getByText('Lorem')).toBeInTheDocument();
-    });
-
-    it('should render title', () => {
-        render(<Panel title="Lorem">Ipsum</Panel>);
-        expect(screen.getByRole('heading')).toHaveTextContent('Lorem');
-    });
-});

package/src/core/Panel/index.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-// Import styles from './Panel.module.css';
-
-interface PanelProps {
-    children: React.ReactNode;
-    isPadded?: boolean;
-    isSpaced?: boolean;
-    title?: string;
-}
-
-function Panel({ children, isPadded, isSpaced, title }: PanelProps): React.ReactElement {
-    return (
-        <div
-            className={clsx('mb-2 w-full rounded-md bg-white p-8', {
-                'mb-4': isSpaced,
-            })}
-        >
-            {title ? (
-                <h2 className="border-b border-b-slate-400 text-lg font-semibold">{title}</h2>
-            ) : null}
-            {children}
-        </div>
-    );
-}
-
-Panel.propTypes = {
-    children: PropTypes.node.isRequired,
-    isPadded: PropTypes.bool,
-    isSpaced: PropTypes.bool,
-};
-
-export default Panel;

package/src/core/PasswordForgotForm/index.tsx

@@ -1,62 +0,0 @@
-'use client';
-
-import React from 'react';
-import type { NextRouter } from 'next/router';
-import { AuthIdentifier, useForm } from '@sqrzro/hooks';
-
-import Button from '../../components/Button';
-import ContentBlock from '../../components/ContentBlock';
-import FormField from '../../components/FormField';
-import TextInput from '../../components/TextInput';
-
-import AuthForm from '../AuthForm';
-
-import useConfig from '../../hooks/useConfig';
-
-interface PasswordForgotFormProps {
-    router: Omit<NextRouter, 'events'>;
-}
-
-interface PasswordForgotFormFields {
-    identifier: string;
-}
-
-function PasswordForgotForm({ router }: PasswordForgotFormProps): React.ReactElement {
-    const { auth } = useConfig();
-
-    const { fieldProps, formProps, isLoading, handleSubmit } = useForm<PasswordForgotFormFields>({
-        defaults: {
-            identifier: router.query[auth.identifier]?.toString() || '',
-        },
-        errorMessage: false,
-        method: 'post',
-        successMessage: 'password ',
-        transformRequest: (data) => ({
-            [auth.identifier]: data.identifier,
-        }),
-        url: auth.passwordUrl,
-    });
-
-    const handleKeyDown = (event: React.KeyboardEvent): void => {
-        if (event.key === 'Enter') {
-            handleSubmit();
-        }
-    };
-
-    return (
-        <AuthForm {...formProps}>
-            <ContentBlock title="Forgotten you password?" isCentered>
-                Enter your {auth.identifier}{' '}
-                {auth.identifier === AuthIdentifier.email ? 'address' : ''} and we will send you an
-                email with a link to reset your password:
-            </ContentBlock>
-            <FormField {...fieldProps('identifier')} onKeyDown={handleKeyDown} render={TextInput} />
-            <hr />
-            <Button isDisabled={isLoading} type="submit" isFullWidth>
-                {isLoading ? 'Loading...' : 'Send Reset Email'}
-            </Button>
-        </AuthForm>
-    );
-}
-
-export default PasswordForgotForm;

package/src/core/PasswordResetForm/index.tsx

@@ -1,65 +0,0 @@
-'use client';
-
-import React from 'react';
-import type { NextRouter } from 'next/router';
-import { useForm } from '@sqrzro/hooks';
-
-import Button from '../../components/Button';
-import FormField from '../../components/FormField';
-import PasswordInput from '../../components/PasswordInput';
-
-import AuthForm from '../AuthForm';
-
-import useConfig from '../../hooks/useConfig';
-
-const AUTH_ROUTE = '/auth/login';
-
-interface PasswordResetFormProps {
-    router: Omit<NextRouter, 'events'>;
-}
-
-interface PasswordResetFormFields {
-    password: string;
-    password_confirmation: string; // eslint-disable-line @typescript-eslint/naming-convention
-}
-
-function PasswordResetForm({ router }: PasswordResetFormProps): React.ReactElement {
-    const { auth } = useConfig();
-
-    const handleSubmitSuccess = (): void => {
-        void router.push(`${AUTH_ROUTE}?email=${router.query.email?.toString() || ''}`);
-    };
-
-    const { fieldProps, formProps, isLoading, handleSubmit } = useForm<PasswordResetFormFields>({
-        errorMessage: false,
-        method: 'post',
-        successMessage: 'Password reset successfully. You can now log in.',
-        url: auth.passwordUrl,
-        onSubmitSuccess: handleSubmitSuccess,
-        transformRequest: (data) => ({ token: router.query.token || '', ...data }),
-    });
-
-    const handleKeyDown = (event: React.KeyboardEvent): void => {
-        if (event.key === 'Enter') {
-            handleSubmit();
-        }
-    };
-
-    return (
-        <AuthForm {...formProps}>
-            <FormField {...fieldProps('password')} label="New Password" render={PasswordInput} />
-            <FormField
-                {...fieldProps('password_confirmation')}
-                label="Confirm New Password"
-                onKeyDown={handleKeyDown}
-                render={PasswordInput}
-            />
-            <hr />
-            <Button isDisabled={isLoading} type="submit" isFullWidth>
-                {isLoading ? 'Loading...' : 'Reset Password'}
-            </Button>
-        </AuthForm>
-    );
-}
-
-export default PasswordResetForm;

package/src/core/RadialProgress/RadialProgress.module.css

@@ -1,78 +0,0 @@
-@keyframes spin {
-    0% {
-        opacity: 1;
-        transform: rotate(0);
-    }
-
-    100% {
-        opacity: 1;
-        transform: rotate(180deg);
-    }
-}
-
-.root {
-    border-radius: 50%;
-    overflow: hidden;
-    padding: .2rem;
-    position: relative;
-}
-
-.semi1 {
-    animation: spin 5s linear;
-    animation-fill-mode: forwards;
-    background-color: var(--clr-white);
-    height: 100%;
-    left: -50%;
-    position: absolute;
-    transform-origin: 100% 50%;
-    top: 0;
-    width: 100%;
-}
-
-.semi2 {
-    animation: spin 5s linear;
-    animation-delay: 5s;
-    animation-fill-mode: forwards;
-    background-color: var(--clr-white);
-    height: 100%;
-    opacity: 0;
-    position: absolute;
-    right: -50%;
-    top: 0;
-    transform-origin: 0 50%;
-    width: 100%;
-}
-
-.mask {
-    background-color: var(--clr-grey800);
-    height: 100%;
-    left: -50%;
-    position: absolute;
-    transform-origin: 100% 50%;
-    top: 0;
-    width: 100%;
-}
-
-.maskError {
-    background-color: var(--clr-error);
-}
-
-.maskSuccess {
-    background-color: var(--clr-success);
-}
-
-.icon {
-    background-color: var(--clr-grey800);
-    border-radius: 50%;
-    display: block;
-    fill: white;
-    position: relative;
-}
-
-.iconError {
-    background-color: var(--clr-error);
-}
-
-.iconSuccess {
-    background-color: var(--clr-success);
-}

package/src/core/RadialProgress/index.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import { ucwords } from '@sqrzro/utility';
-
-import Icon from '../Icon';
-
-// Import styles from './RadialProgress.module.css';
-
-const DURATION_FACTOR = 2000;
-
-interface RadialProgressProps {
-    duration: number;
-    icon: string;
-    variant?: string;
-}
-
-function RadialProgress({ duration, icon, variant }: RadialProgressProps): React.ReactElement {
-    const adjustedDuration = duration / DURATION_FACTOR;
-
-    return (
-        <div className="/*styles.root*/">
-            <div
-                className="/*styles.semi1*/"
-                style={{ animationDuration: `${adjustedDuration}s` }}
-            />
-            <div className="/*clsx(styles.mask, variant && styles[`mask${ucwords(variant)`])*/" />
-            <div
-                className="/*styles.semi2*/"
-                style={{
-                    animationDuration: `${adjustedDuration}s`,
-                    animationDelay: `${adjustedDuration}s`,
-                }}
-            />
-            <div className="/*clsx(styles.icon, variant && styles[`icon${ucwords(variant)`])*/">
-                <Icon icon={icon} size={30} />
-            </div>
-        </div>
-    );
-}
-
-RadialProgress.propTypes = {
-    duration: PropTypes.number.isRequired,
-    icon: PropTypes.string.isRequired,
-    variant: PropTypes.string,
-};
-
-export default RadialProgress;

package/src/core/SettingsForm/index.tsx

@@ -1,26 +0,0 @@
-'use client';
-
-import React from 'react';
-import { useForm } from '@sqrzro/hooks';
-
-import Form from '../../components/Form';
-import FormField from '../../components/FormField';
-import ModalActions from '../../components/ModalActions';
-import TextInput from '../../components/TextInput';
-
-interface SettingsFormFields {
-    name: string;
-}
-
-function SettingsForm(): React.ReactElement {
-    const { fieldProps, formProps } = useForm<SettingsFormFields>({});
-
-    return (
-        <Form {...formProps}>
-            <FormField {...fieldProps('name')} label="Name" render={TextInput} />
-            <ModalActions label="Save Settings" />
-        </Form>
-    );
-}
-
-export default SettingsForm;

package/src/core/SummaryListItem/SummaryListItem.module.css

@@ -1,20 +0,0 @@
-.root {
-    background: var(--clr-white);
-    border-radius: .5rem;
-    line-height: 2.2rem;
-    padding: 1rem 1.5rem;
-    position: relative;
-}
-
-.term {
-    color: var(--clr-grey600);
-    font-size: var(--fs-xsml);
-    font-weight: var(--fw-bold);
-}
-
-.definition {
-    align-items: center;
-    display: flex;
-    font-size: var(--fs-med);
-    font-weight: var(--fw-bold);
-}

package/src/core/SummaryListItem/index.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Link from '../../components/Link';
-import Tag from '../../components/Tag';
-
-import Styled from '../Styled';
-
-import type { StyleVariant } from '../../utility/interfaces';
-
-// Import styles from './SummaryListItem.module.css';
-
-interface SummaryListItemDefinition {
-    key?: string;
-    label?: string;
-    render?: (key: string) => React.ReactNode;
-    tag?: StyleVariant | StyleVariant[];
-    to?: string | null;
-}
-
-export type SummaryListValue = SummaryListItemDefinition | number | string;
-
-export interface SummaryListObject {
-    label: string;
-    value: SummaryListValue;
-}
-
-const renderDefinition = (
-    definition: SummaryListItemDefinition | number | string
-): React.ReactNode => {
-    if (typeof definition !== 'object') {
-        return <Styled>{definition}</Styled>;
-    }
-
-    if (definition.render && typeof definition.render === 'function') {
-        return definition.render(definition.key || '');
-    }
-
-    if (definition.to) {
-        return <Link to={definition.to}>{definition.label}</Link>;
-    }
-
-    if (definition.tag) {
-        return <Tag variant={definition.tag}>{definition.label}</Tag>;
-    }
-
-    return 'object';
-};
-
-function SummaryListItem({ label, value }: SummaryListObject): React.ReactElement {
-    return (
-        <div className="/*styles.root*/">
-            <dt className="/*styles.term*/">{label}</dt>
-            <dd className="/*styles.definition*/">{renderDefinition(value)}</dd>
-        </div>
-    );
-}
-
-SummaryListItem.propTypes = {
-    label: PropTypes.string.isRequired,
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.shape({})])
-        .isRequired,
-};
-
-export default SummaryListItem;

package/src/core/TabItem/TabItem.module.css

@@ -1,28 +0,0 @@
-.root {
-    margin-right: 1rem;
-}
-
-.rootIsDisabled {
-    opacity: .3;
-    pointer-events: none;
-}
-
-.link {
-    background-color: transparent;
-    border: 0;
-    color: var(--clr-grey700);
-    cursor: pointer;
-    border-radius: .3rem;
-    display: block;
-    font-family: inherit;
-    font-size: var(--fs-sml);
-    font-weight: var(--fw-bold);
-    line-height: 1;
-    padding: 1rem;
-    width: 100%;
-}
-
-.linkIsActive {
-    background-color: var(--clr-grey200);
-    pointer-events: none;
-}

package/src/core/TabItem/index.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-
-import Link from '../../components/Link';
-
-import type { NavigationObject } from '../../utility/interfaces';
-
-// Import styles from './TabItem.module.css';
-
-function TabItem({
-    isActive,
-    isDisabled,
-    label,
-    onClick,
-    to,
-}: NavigationObject): React.ReactElement {
-    // Const rootClass = clsx(styles.root, { [styles.rootIsDisabled]: isDisabled });
-
-    if (to) {
-        return (
-            <li className="rootClass">
-                <Link
-                    className="clsx(styles.link, { [styles.linkIsActive]: isActive })"
-                    onClick={onClick}
-                    to={to}
-                >
-                    {label}
-                </Link>
-            </li>
-        );
-    }
-
-    return (
-        <li className="rootClass">
-            <button className="/*styles.link*/" onClick={onClick} type="button">
-                {label}
-            </button>
-        </li>
-    );
-}
-
-export default TabItem;

package/src/core/Tabs/Tabs.module.css

@@ -1,19 +0,0 @@
-.root {
-    background-color: var(--clr-white);
-    box-shadow: 0 .3rem .3rem rgba(0, 0, 0, .02), 0 1rem 1rem rgba(0, 0, 0, .02);
-    padding: 0 clamp(1rem, 2.5vw, 3rem);
-    z-index: 3;
-
-    &::before {
-        border-top: .1rem var(--clr-grey300) solid;
-        content: '';
-        left: clamp(1rem, 2.5vw, 3rem);
-        position: absolute;
-        right: clamp(1rem, 2.5vw, 3rem);
-    }
-}
-
-.list {
-    display: flex;
-    padding: 1rem 0;
-}

package/src/core/Tabs/Tabs.spec.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-
-import * as Router from 'next/router';
-
-import { createMockRouter } from '../../utility/MockRouter';
-
-import Tabs from './index';
-
-describe('Tabs', () => {
-    it('should render tabs correctly', () => {
-        jest.spyOn(Router, 'useRouter').mockImplementation(() => createMockRouter(''));
-
-        const data = [
-            {
-                label: 'Lorem',
-                to: 'lorem',
-            },
-            {
-                label: 'Ipsum',
-                to: 'ipsum',
-            },
-        ];
-
-        render(<Tabs data={data} />);
-
-        expect(screen.getByRole('list')).toBeInTheDocument();
-        expect(screen.queryAllByRole('listitem')[0]).toHaveTextContent(/^Lorem$/u);
-    });
-});