@sqrzro/admin 1.0.0-beta.7 → 2.0.0

package/src/components/LoginForm/index.tsx

@@ -1,213 +1,114 @@
+'use client';
+
 import React, { Fragment } from 'react';
 import Head from 'next/head';
-import type { NextRouter } from 'next/router';
-
-import { ApiError, ApiService, AuthService } from '@sqrzro/utility';
-
-import Alert from '@components/Alert';
-import Button from '@components/Button';
-import Form from '@components/Form';
-import FormField from '@components/FormField';
-import Link from '@components/Link';
-import PasswordInput from '@components/PasswordInput';
-import TextInput from '@components/TextInput';
-
-import AppLogo from '@core/AppLogo';
-import LoginFormTwoFactor from '@core/LoginFormTwoFactor';
-import Panel from '@core/Panel';
-
-import useAlert from '@hooks/useAlert';
-import useAppContext from '@hooks/useAppContext';
-import type { AuthObject } from '@hooks/useAppContext';
-import useForm from '@hooks/useForm';
-import type { UseFormReturn } from '@hooks/useForm';
-
-import ToastService from '@services/ToastService';
-
-import type { SceneComponentType } from '@utility/interfaces';
-import { NextRouterPropType } from '@utility/prop-types';
-
-import styles from './LoginForm.module.css';
-
-interface LoginResponse {
-    token: string;
-}
-
-interface LoginFormFields {
-    identifier: string;
-    password: string;
-    provider: string;
-    twofactor_code: string; // eslint-disable-line @typescript-eslint/naming-convention
-}
-
-const UNAUTH_CODE = 401;
-const BAD_REQUEST_CODE = 400;
-
-const useLoginForm = (
-    auth: AuthObject,
-    openAlert: () => void,
-    router: Omit<NextRouter, 'events'>
-): UseFormReturn<LoginFormFields> =>
-    useForm<LoginFormFields, LoginResponse>({
-        defaults: {
-            identifier: router.query[auth.identifier]?.toString() || '',
-            password: '',
-            provider: '',
-            twofactor_code: '', // eslint-disable-line @typescript-eslint/naming-convention, camelcase
-        },
-        errorMessage: false,
-        hasFieldErrors: false,
-        method: 'post',
-        successMessage: false,
-        url: auth.loginUrl,
-        onSubmitError: (error: unknown, data, setData): void => {
-            const identifierErrorMessage = `Incorrect ${auth.identifier} or password. Please try again.`;
-
-            /*
-             * Situation: identifier and password are provided, but incorrect
-             * If the error is a 401, assume the identifier/password is wrong.
-             */
-            if (error instanceof ApiError && error.response.status === UNAUTH_CODE) {
-                ToastService.error(identifierErrorMessage);
-                return;
-            }
-
-            /*
-             * Situation: twofactor_code is provided, but incorrect
-             * If the error is a 400, assume the two factor code is wrong.
-             */
-            if (error instanceof ApiError && error.response.status === BAD_REQUEST_CODE) {
-                if (setData) {
-                    setData('twofactor_code', '');
-                }
-                ToastService.error('Incorrect authentication code. Please try again.');
-                return;
-            }
+import { useLoginForm } from '@sqrzro/hooks';
 
-            /*
-             * Situation: `twofactor_code` is not provided
-             * If `twofactor_code` is required, then show the 2FA panel
-             */
-            if (
-                error instanceof ApiService.ApiValidationError &&
-                error.messages.twofactor_code &&
-                /required/u.exec(error.messages.twofactor_code)
-            ) {
-                openAlert();
-                return;
-            }
+import Alert from '../Alert';
+import Button from '../Button';
+import FormField from '../FormField';
+import Link from '../Link';
+import PasswordInput from '../PasswordInput';
+import TextInput from '../TextInput';
 
-            // Situation: identifier/password is not provided (probably)
-            if (error instanceof ApiService.ApiValidationError) {
-                ToastService.error(identifierErrorMessage);
-                return;
-            }
+import AuthForm from '../../core/AuthForm';
+import TwoFactor from '../../core/TwoFactor';
+import TwoFactorSetup from '../../core/TwoFactorSetup';
 
-            /*
-             * Situation: Unknown error
-             * If the error isn't an instance of ApiValidationError, then just provide a generic
-             * error message.
-             */
-            ToastService.error("Something's gone wrong. Please try again.");
-        },
-        onSubmitSuccess: (response) => AuthService.login(response.data.token),
-        transformErrors: (errors) => ({
-            ...errors,
-            identifier: errors[auth.identifier],
-        }),
-        transformRequest: (data) => ({
-            ...data,
-            [auth.identifier]: data.identifier,
-        }),
-    });
+import useAlert from '../../hooks/useAlert';
+import useConfig from '../../hooks/useConfig';
 
-const LoginForm: SceneComponentType = ({ router }) => {
+function LoginForm(): React.ReactElement {
     const { alertProps, openAlert, closeAlert } = useAlert();
-    const { auth, name } = useAppContext();
+    const {
+        alertProps: setupAlertProps,
+        openAlert: openSetupAlert,
+        closeAlert: closeSetupAlert,
+    } = useAlert();
+
+    const { auth, name } = useConfig();
 
     const { fieldProps, formData, formProps, handleSubmit, isLoading, setFormData } = useLoginForm(
         auth,
         openAlert,
-        router
+        openSetupAlert
     );
 
-    const handleKeyDown = (event: React.KeyboardEvent): void => {
+    function handleKeyDown(event: React.KeyboardEvent): void {
         if (event.key === 'Enter') {
             handleSubmit();
         }
-    };
+    }
 
-    const handleAlertClose = (): void => {
+    function handleAlertClose(): void {
         setFormData('provider', '');
-        setFormData('twofactor_code', '');
+        setFormData('two_factor_code', '');
         closeAlert();
-    };
+        closeSetupAlert();
+    }
 
     return (
         <Fragment>
             <Head>
                 <title>Login | {name}</title>
             </Head>
-            <div className={styles.root}>
-                <Panel isPadded>
-                    <div className={styles.logo}>
-                        <AppLogo />
-                    </div>
-                    <Form {...formProps}>
-                        <FormField
-                            {...fieldProps('identifier')}
-                            label={auth.identifierLabel}
-                            onKeyDown={handleKeyDown}
-                            render={TextInput}
-                            isAutoFocus
-                        />
-                        <FormField
-                            {...fieldProps('password')}
-                            label="Password"
-                            onKeyDown={handleKeyDown}
-                            render={PasswordInput}
-                        />
-                        <hr />
-                        <Button isDisabled={isLoading} type="submit" isFullWidth>
-                            {isLoading ? 'Loading...' : 'Log In'}
-                        </Button>
-                    </Form>
-                    <div className={styles.footer}>
-                        <Link
-                            to={`/auth/password${
-                                formData.identifier
-                                    ? `?${auth.identifier}=${formData.identifier}`
-                                    : ''
-                            }`}
-                        >
-                            Forgot Password?
-                        </Link>
-                    </div>
-                </Panel>
-            </div>
+            <AuthForm
+                {...formProps}
+                footer={
+                    <Link
+                        to={`/auth/password${
+                            formData.identifier ? `?${auth.identifier}=${formData.identifier}` : ''
+                        }`}
+                    >
+                        Forgot Password?
+                    </Link>
+                }
+            >
+                <FormField
+                    {...fieldProps('identifier')}
+                    label={auth.identifierLabel}
+                    onKeyDown={handleKeyDown}
+                    render={TextInput}
+                    isAutoFocus
+                />
+                <FormField
+                    {...fieldProps('password')}
+                    label="Password"
+                    onKeyDown={handleKeyDown}
+                    render={PasswordInput}
+                />
+                <hr />
+                <Button isDisabled={isLoading} type="submit" isFullWidth>
+                    {isLoading ? 'Loading...' : 'Log In'}
+                </Button>
+            </AuthForm>
             <Alert
                 {...alertProps}
                 icon="lockClosed"
                 onClose={handleAlertClose}
-                title="2-Step Verification"
+                title="2-Step Authentication"
                 variant="warning"
                 width="sm"
             >
-                <LoginFormTwoFactor
+                <TwoFactor
                     formData={formData}
                     isLoading={isLoading}
                     onSubmit={handleSubmit}
                     setFormData={setFormData}
                 />
             </Alert>
+            <Alert
+                {...setupAlertProps}
+                icon="lockClosed"
+                onClose={handleAlertClose}
+                title="Setup 2-Step Authentication"
+                variant="warning"
+                width="sm"
+            >
+                <TwoFactorSetup data={formData} />
+            </Alert>
         </Fragment>
     );
-};
-
-LoginForm.hasLayout = false;
-
-LoginForm.propTypes = {
-    router: NextRouterPropType.isRequired,
-};
+}
 
 export default LoginForm;

package/src/components/Message/index.tsx

@@ -1,23 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Panel from '@core/Panel';
+import Panel from '../../core/Panel';
 
-import styles from './Message.module.css';
+// Import styles from './Message.module.css';
 
 interface MessageProps {
     children: React.ReactNode;
     title?: string | null;
 }
 
-const Message: React.FunctionComponent<MessageProps> = ({ children, title }) => (
-    <Panel isPadded isSpaced>
-        <div className={styles.root}>
-            {title ? <h3 className={styles.title}>{title}</h3> : null}
-            {children}
-        </div>
-    </Panel>
-);
+function Message({ children, title }: MessageProps): React.ReactElement {
+    return (
+        <Panel isPadded isSpaced>
+            <div className="/*styles.root*/">
+                {title ? <h3 className="/*styles.title*/">{title}</h3> : null}
+                {children}
+            </div>
+        </Panel>
+    );
+}
 
 Message.propTypes = {
     children: PropTypes.node.isRequired,

package/src/components/Modal/index.tsx

@@ -1,21 +1,27 @@
+/* istanbul ignore file */
+
 import React from 'react';
 import { createPortal } from 'react-dom';
 
-import ModalComponent from '@core/ModalComponent';
-import type { ModalComponentProps } from '@core/ModalComponent';
+import ModalComponent from '../../core/ModalComponent';
+import type { ModalComponentProps } from '../../core/ModalComponent';
+
+import { ifWindow } from '@sqrzro/utility';
 
-const Modal = (props: ModalComponentProps): React.ReactElement | null => {
-    if (typeof window === 'undefined') {
-        return null;
-    }
+function Modal(props: ModalComponentProps): React.ReactElement | null {
+    return ifWindow(() => {
+        if (typeof window === 'undefined') {
+            return null;
+        }
 
-    const portalElement = document.getElementById('modal-portal');
+        const portalElement = document.getElementById('modal-portal');
 
-    if (!portalElement) {
-        return null;
-    }
+        if (!portalElement) {
+            return null;
+        }
 
-    return createPortal(<ModalComponent {...props} />, portalElement);
-};
+        return createPortal(<ModalComponent {...props} />, portalElement);
+    }, null);
+}
 
 export default Modal;

package/src/components/ModalActions/ModalActions.spec.tsx

@@ -34,14 +34,16 @@ describe('ModalActions', () => {
         expect(screen.getByRole('button')).toHaveTextContent(/^Saving\.\.\.$/u);
     });
 
-    it('should handle onclick', () => {
+    it('should handle onclick', async () => {
+        const user = userEvent.setup();
+
         const mockFn = jest.fn();
         render(<ModalActions label="Lorem" onClick={mockFn} />);
 
         expect(screen.getByRole('button')).toHaveAttribute('type', 'button');
 
         expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getByRole('button'));
+        await user.click(screen.getByRole('button'));
         expect(mockFn).toHaveBeenCalledTimes(1);
     });
 });

package/src/components/ModalActions/ModalActions.story.tsx

@@ -3,4 +3,6 @@ import ModalActions from './index';
 
 export default { title: 'Components/ModalActions', component: ModalActions };
 
-export const Default = (): React.ReactElement => <ModalActions label="Lorem Ipsum" />;
+export function Default(): React.ReactElement {
+    return <ModalActions label="Lorem Ipsum" />;
+}

package/src/components/ModalActions/index.tsx

@@ -1,11 +1,13 @@
+'use client';
+
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from '@components/Button';
-import type { ButtonVariant } from '@utility/interfaces';
-import { ButtonVariantPropType } from '@utility/prop-types';
+import Button from '../Button';
+import type { ButtonVariant } from '../../utility/interfaces';
+import { ButtonVariantPropType } from '../../utility/prop-types';
 
-import styles from './ModalActions.module.css';
+// Import styles from './ModalActions.module.css';
 
 interface ModalActionsProps {
     isDisabled?: boolean;
@@ -15,26 +17,28 @@ interface ModalActionsProps {
     variant?: ButtonVariant | ButtonVariant[];
 }
 
-const ModalActions: React.FunctionComponent<ModalActionsProps> = ({
+function ModalActions({
     label,
     isDisabled,
     isLoading,
     onClick,
     variant,
-}) => (
-    <div className={styles.root}>
-        <div>
-            <Button
-                isDisabled={isDisabled || isLoading}
-                onClick={onClick}
-                type={onClick ? 'button' : 'submit'}
-                variant={variant}
-            >
-                {isLoading ? 'Saving...' : label}
-            </Button>
+}: ModalActionsProps): React.ReactElement {
+    return (
+        <div className="/*styles.root*/">
+            <div>
+                <Button
+                    isDisabled={isDisabled || isLoading}
+                    onClick={onClick}
+                    type={onClick ? 'button' : 'submit'}
+                    variant={variant}
+                >
+                    {isLoading ? 'Saving...' : label}
+                </Button>
+            </div>
         </div>
-    </div>
-);
+    );
+}
 
 ModalActions.propTypes = {
     label: PropTypes.string.isRequired,

package/src/components/MoneyInput/MoneyInput.story.tsx

@@ -3,4 +3,6 @@ import MoneyInput from './index';
 
 export default { title: 'Components/MoneyInput', component: MoneyInput };
 
-export const Default = (): React.ReactElement => <MoneyInput name="lorem" />;
+export function Default(): React.ReactElement {
+    return <MoneyInput name="lorem" />;
+}

package/src/components/MoneyInput/index.tsx

@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 
-import TextInput from '@components/TextInput';
-import type { TextInputProps } from '@components/TextInput';
+import TextInput from '../TextInput';
+import type { TextInputProps } from '../TextInput';
 
 /**
  * A `TextInput` component with a pre-defined `prefix` prop set to a pound sign. All other props are
@@ -9,8 +11,8 @@ import type { TextInputProps } from '@components/TextInput';
  * prefix can be overridden or removed all together. If this is the case, the component is no
  * different to a `TextInput`.
  */
-const MoneyInput: React.FunctionComponent<TextInputProps> = (props) => (
-    <TextInput prefix="£" {...props} />
-);
+function MoneyInput(props: TextInputProps): React.ReactElement {
+    return <TextInput prefix="£" {...props} />;
+}
 
 export default MoneyInput;

package/src/components/PasswordForm/index.tsx

@@ -1,21 +1,20 @@
 import React, { Fragment } from 'react';
 import Head from 'next/head';
+import type { NextRouter } from 'next/router';
 
-import AppLogo from '@core/AppLogo';
-import Panel from '@core/Panel';
+import PasswordForgotForm from '../../core/PasswordForgotForm';
+import PasswordResetForm from '../../core/PasswordResetForm';
 
-import PasswordForgotForm from '@core/PasswordForgotForm';
-import PasswordResetForm from '@core/PasswordResetForm';
+import useConfig from '../../hooks/useConfig';
 
-import useAppContext from '@hooks/useAppContext';
+import { NextRouterPropType } from '../../utility/prop-types';
 
-import type { SceneComponentType } from '@utility/interfaces';
-import { NextRouterPropType } from '@utility/prop-types';
+interface PasswordFormProps {
+    router: Omit<NextRouter, 'events'>;
+}
 
-import styles from './PasswordForm.module.css';
-
-const PasswordForm: SceneComponentType = ({ router }) => {
-    const { name } = useAppContext();
+function PasswordForm({ router }: PasswordFormProps): React.ReactElement {
+    const { name } = useConfig();
     const { token } = router.query;
 
     return (
@@ -23,21 +22,10 @@ const PasswordForm: SceneComponentType = ({ router }) => {
             <Head>
                 <title>Reset Password | {name}</title>
             </Head>
-            <div className={styles.root}>
-                <Panel isPadded>
-                    <div className={styles.logo}>
-                        <AppLogo />
-                    </div>
-                    {token ? (
-                        <PasswordResetForm router={router} />
-                    ) : (
-                        <PasswordForgotForm router={router} />
-                    )}
-                </Panel>
-            </div>
+            {token ? <PasswordResetForm router={router} /> : <PasswordForgotForm router={router} />}
         </Fragment>
     );
-};
+}
 
 PasswordForm.hasLayout = false;
 

package/src/components/RadioList/RadioList.spec.tsx

@@ -30,12 +30,14 @@ describe('RadioList', () => {
         expect(screen.getAllByRole('radio')[0]).toHaveAttribute('checked');
     });
 
-    it('should handle onchange', () => {
+    it('should handle onchange', async () => {
+        const user = userEvent.setup();
+
         const mockFn = jest.fn();
         render(<RadioList data={mockData} name="lorem" onChange={mockFn} />);
 
         expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getAllByRole('radio')[0]);
+        await user.click(screen.getAllByRole('radio')[0]);
         expect(mockFn).toHaveBeenCalledTimes(1);
         expect(mockFn).toHaveBeenLastCalledWith({
             item: { id: '1', name: 'Lorem' },

package/src/components/RadioList/index.tsx

@@ -1,17 +1,19 @@
+'use client';
+
 import React from 'react';
 
-import ChkRadList from '@core/ChkRadList';
-import type { ChkRadDataItem } from '@core/ChkRadList';
+import ChkRadList from '../../core/ChkRadList';
+import type { ChkRadDataItem } from '../../core/ChkRadList';
 
-import type { InputProps } from '@utility/interfaces';
+import type { InputProps } from '../../utility/interfaces';
 
 interface RadioListProps extends InputProps<string> {
     columns?: number;
     data: ChkRadDataItem[];
 }
 
-const RadioList = (props: RadioListProps): React.ReactElement => (
-    <ChkRadList {...props} type="radio" />
-);
+function RadioList(props: RadioListProps): React.ReactElement {
+    return <ChkRadList {...props} type="radio" />;
+}
 
 export default RadioList;

package/src/components/RootLayout/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { TestService } from '@sqrzro/utility';
+
+import ConfirmModal from '../../core/ConfirmModal';
+import Toast from '../../core/Toast';
+
+import { ConfigProvider } from '../../hooks/useConfig';
+
+import type { Config } from '../../services/ConfigService';
+
+import register from '../../utility/register';
+
+interface RootLayoutProps {
+    children: React.ReactNode;
+    config: Config;
+}
+
+function RootLayout({ children, config }: RootLayoutProps): React.ReactElement {
+    register(config);
+
+    return (
+        <html>
+            <head>
+                <link href="https://fonts.googleapis.com" rel="preconnect" />
+                <link crossOrigin="" href="https://fonts.gstatic.com" rel="preconnect" />
+                <link
+                    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+                    rel="stylesheet"
+                />
+            </head>
+            <body className="bg-slate-50">
+                <ConfigProvider value={config}>
+                    {children}
+                    <div id="alert-portal" />
+                    <div id="modal-portal" />
+                    <ConfirmModal />
+                    <Toast />
+                </ConfigProvider>
+            </body>
+        </html>
+    );
+}
+
+export default RootLayout;

package/src/components/SummaryList/SummaryList.module.css

@@ -1,11 +1,26 @@
 .root {
+    display: grid;
+    gap: 1rem;
     margin-bottom: 3rem;
 
     @media (--media-sml) {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        margin-bottom: 2rem;
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+.rootHas4 {
+    @media (--media-med) {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
+.rootHas6 {
+    @media (--media-med) {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media (--media-xlrg) {
+        grid-template-columns: repeat(6, 1fr);
     }
 }