@sqrzro/admin 2.0.0 → 2.1.0-bz.1

package/src/components/Modal/index.tsx

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

package/src/components/ModalActions/ModalActions.module.css

@@ -1,5 +0,0 @@
-.root {
-    border-top: .1rem var(--clr-grey300) solid;
-    display: flex;
-    padding-top: 3rem;
-}

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

@@ -1,49 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import ModalActions from './index';
-
-describe('ModalActions', () => {
-    it('should render', () => {
-        render(<ModalActions label="Lorem" />);
-    });
-
-    it('should render defaults', () => {
-        render(<ModalActions label="Lorem" />);
-
-        expect(screen.getByRole('button')).not.toBeDisabled();
-        expect(screen.getByRole('button')).toHaveClass('root');
-        expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
-    });
-
-    it('should render label', () => {
-        render(<ModalActions label="Lorem" />);
-        expect(screen.getByRole('button')).toHaveTextContent(/^Lorem$/u);
-    });
-
-    it('should be disabled', () => {
-        render(<ModalActions label="Lorem" isDisabled />);
-        expect(screen.getByRole('button')).toBeDisabled();
-    });
-
-    it('should be loading', () => {
-        render(<ModalActions label="Lorem" isLoading />);
-
-        expect(screen.getByRole('button')).toBeDisabled();
-        expect(screen.getByRole('button')).toHaveTextContent(/^Saving\.\.\.$/u);
-    });
-
-    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);
-        await user.click(screen.getByRole('button'));
-        expect(mockFn).toHaveBeenCalledTimes(1);
-    });
-});

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

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

package/src/components/ModalActions/index.tsx

@@ -1,51 +0,0 @@
-'use client';
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Button from '../Button';
-import type { ButtonVariant } from '../../utility/interfaces';
-import { ButtonVariantPropType } from '../../utility/prop-types';
-
-// Import styles from './ModalActions.module.css';
-
-interface ModalActionsProps {
-    isDisabled?: boolean;
-    isLoading?: boolean;
-    label: string;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    variant?: ButtonVariant | ButtonVariant[];
-}
-
-function ModalActions({
-    label,
-    isDisabled,
-    isLoading,
-    onClick,
-    variant,
-}: 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>
-    );
-}
-
-ModalActions.propTypes = {
-    label: PropTypes.string.isRequired,
-    isDisabled: PropTypes.bool,
-    isLoading: PropTypes.bool,
-    variant: ButtonVariantPropType,
-    onClick: PropTypes.func,
-};
-
-export default ModalActions;

package/src/components/MoneyInput/MoneyInput.spec.tsx

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

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

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

package/src/components/MoneyInput/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 pound sign. 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 MoneyInput(props: TextInputProps): React.ReactElement {
-    return <TextInput prefix="£" {...props} />;
-}
-
-export default MoneyInput;

package/src/components/PasswordForm/index.tsx

@@ -1,36 +0,0 @@
-import React, { Fragment } from 'react';
-import Head from 'next/head';
-import type { NextRouter } from 'next/router';
-
-import PasswordForgotForm from '../../core/PasswordForgotForm';
-import PasswordResetForm from '../../core/PasswordResetForm';
-
-import useConfig from '../../hooks/useConfig';
-
-import { NextRouterPropType } from '../../utility/prop-types';
-
-interface PasswordFormProps {
-    router: Omit<NextRouter, 'events'>;
-}
-
-function PasswordForm({ router }: PasswordFormProps): React.ReactElement {
-    const { name } = useConfig();
-    const { token } = router.query;
-
-    return (
-        <Fragment>
-            <Head>
-                <title>Reset Password | {name}</title>
-            </Head>
-            {token ? <PasswordResetForm router={router} /> : <PasswordForgotForm router={router} />}
-        </Fragment>
-    );
-}
-
-PasswordForm.hasLayout = false;
-
-PasswordForm.propTypes = {
-    router: NextRouterPropType.isRequired,
-};
-
-export default PasswordForm;

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

@@ -1,47 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import RadioList from './index';
-
-const mockData = [
-    {
-        label: 'Lorem',
-        value: '1',
-    },
-    {
-        label: 'Ipsum',
-        value: 'ipsum',
-    },
-];
-
-describe('RadioList', () => {
-    it('should render', () => {
-        render(<RadioList data={mockData} name="lorem" />);
-    });
-
-    it('should render radio buttons', () => {
-        render(<RadioList data={mockData} name="lorem" />);
-        expect(screen.queryAllByRole('radio')).toHaveLength(2);
-    });
-
-    it('should highlight selected', () => {
-        render(<RadioList data={mockData} name="lorem" value="1" />);
-        expect(screen.getAllByRole('radio')[0]).toHaveAttribute('checked');
-    });
-
-    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);
-        await user.click(screen.getAllByRole('radio')[0]);
-        expect(mockFn).toHaveBeenCalledTimes(1);
-        expect(mockFn).toHaveBeenLastCalledWith({
-            item: { id: '1', name: 'Lorem' },
-            target: { name: 'lorem', value: '1' },
-        });
-    });
-});

package/src/components/RadioList/index.tsx

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

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

@@ -1,31 +0,0 @@
-.root {
-    display: grid;
-    gap: 1rem;
-    margin-bottom: 3rem;
-
-    @media (--media-sml) {
-        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);
-    }
-}
-
-.rootIsDisabled {
-    opacity: .3;
-    pointer-events: none;
-    transition: opacity .3s;
-}

package/src/components/SummaryList/SummaryList.spec.tsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-
-import SummaryList from './index';
-
-const mockData = [
-    {
-        label: 'Lorem',
-        value: 'Lorem Ipsum',
-    },
-    {
-        label: 'Ipsum',
-        value: 'Adiscit Exceptor',
-    },
-];
-
-describe('SummaryList', () => {
-    it('should render', () => {
-        render(<SummaryList data={mockData} />);
-    });
-
-    it('should render defaults', () => {
-        render(<SummaryList data={mockData} />);
-
-        expect(screen.getByTestId('summary-list-root')).toHaveClass('root');
-        expect(screen.queryAllByRole('definition')).toHaveLength(2);
-    });
-
-    it('should render disabled', () => {
-        render(<SummaryList data={mockData} isDisabled />);
-        expect(screen.getByTestId('summary-list-root')).toHaveClass('root rootIsDisabled');
-    });
-
-    it('should render def with render function', () => {
-        const mockFunctionData = [
-            {
-                label: 'Lorem',
-                value: { render: (): React.ReactNode => <div>Lorem Ipsum</div> },
-            },
-        ];
-        render(<SummaryList data={mockFunctionData} />);
-        expect(screen.getByText('Lorem Ipsum')).toBeInTheDocument();
-    });
-
-    it('should render def with a link', () => {
-        const mockLinkData = [
-            {
-                label: 'Lorem',
-                value: { label: 'Lorem', type: 'link', to: 'lorem' },
-            },
-        ];
-        render(<SummaryList data={mockLinkData} />);
-        expect(screen.getByRole('link')).toHaveTextContent('Lorem');
-    });
-
-    it('should render styled', () => {
-        const mockStyledData = [
-            {
-                label: 'Lorem',
-                value: '[primary]:Styled',
-            },
-        ];
-        render(<SummaryList data={mockStyledData} />);
-        expect(screen.getByText('Styled')).toHaveStyle('color: var(--clr-primary)');
-    });
-
-    it('should render tag', () => {
-        const mockTagData = [
-            {
-                label: 'Lorem',
-                value: { label: 'Lorem', tag: 'primary' as const },
-            },
-        ];
-
-        render(<SummaryList data={mockTagData} />);
-        expect(screen.getByTestId('tag-root')).toBeInTheDocument();
-    });
-
-    it('should return if invalid type', () => {
-        const mockInvalidData = [
-            {
-                label: 'Lorem',
-                value: {},
-            },
-        ];
-        render(<SummaryList data={mockInvalidData} />);
-        expect(screen.getByText('object')).toBeInTheDocument();
-    });
-});

package/src/components/SummaryList/SummaryList.story.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import SummaryList from './index';
-
-const mockData = [
-    { label: 'Lorem', value: 'Lorem' },
-    { label: 'Ipsum', value: 'Ipsum' },
-];
-
-export default { title: 'Components/SummaryList', component: SummaryList };
-
-export function Default(): React.ReactElement {
-    return <SummaryList data={mockData} />;
-}

package/src/components/SummaryList/index.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import SummaryListItem from '../../core/SummaryListItem';
-import type { SummaryListObject } from '../../core/SummaryListItem';
-
-// Import styles from './SummaryList.module.css';
-
-interface SummaryListProps {
-    data: SummaryListObject[];
-    isDisabled?: boolean;
-}
-
-function SummaryList({ data, isDisabled }: SummaryListProps): React.ReactElement {
-    return (
-        <dl
-            className="/*clsx(styles.root, styles[`rootHas${data.length`], {[styles.rootIsDisabled]: isDisabled})*/"
-            data-testid="summary-list-root"
-        >
-            {data.map((item) => (
-                <SummaryListItem key={item.label} label={item.label} value={item.value} />
-            ))}
-        </dl>
-    );
-}
-
-SummaryList.propTypes = {
-    data: PropTypes.arrayOf(
-        PropTypes.shape({
-            label: PropTypes.string.isRequired,
-            value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.shape({})])
-                .isRequired,
-        }).isRequired
-    ).isRequired,
-    isDisabled: PropTypes.bool,
-};
-
-export default SummaryList;

package/src/components/Switch/Switch.module.css

@@ -1,86 +0,0 @@
-.root {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    position: relative;
-}
-
-.rootIsDisabled {
-    opacity: .3;
-    pointer-events: none;
-}
-
-.rootIsMultiline {
-    align-items: flex-start;
-}
-
-.icon {
-    align-items: center;
-    background-color: var(--clr-white);
-    border: .1rem var(--clr-grey500) solid;
-    border-radius: 1.2rem;
-    display: flex;
-    fill: var(--clr-white);
-    height: 2.4rem;
-    justify-content: center;
-    min-width: 3.6rem;
-    padding-bottom: .1rem;
-    position: relative;
-    top: 0;
-    width: 2.4rem;
-
-    &::before {
-        background-color: var(--clr-grey500);
-        border-radius: 50%;
-        content: '';
-        height: 1.8rem;
-        left: .2rem;
-        position: absolute;
-        top: .2rem;
-        transition: transform .2s;
-        width: 1.8rem;
-    }
-}
-
-input:checked ~ .icon {
-    background-color: var(--clr-primary);
-    border-color: var(--clr-primary);
-
-    &::before {
-        background-color: var(--clr-white);
-        transform: translateX(1.2rem);
-    }
-}
-
-.iconIsMultiline {
-    top: .2rem;
-}
-
-.label {
-    color: var(--clr-grey600);
-    display: block;
-    font-size: var(--fs-sml);
-    font-weight: var(--fw-bold);
-    padding-left: 1.5rem;
-}
-
-.labelIsDisabled {
-    pointer-events: none;
-}
-
-.input {
-    left: 0;
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-}
-
-.extra {
-    color: var(--clr-grey500);
-    display: block;
-    font-size: var(--fs-sml);
-    line-height: 1.4;
-    padding-left: 1.5rem;
-    padding-top: .4rem;
-}

package/src/components/Switch/Switch.spec.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import Switch from './index';
-
-describe('WebsiteInput', () => {
-    it('should render', () => {
-        render(<Switch label="Lorem" name="lorem" />);
-    });
-
-    it('should handle defaults', () => {
-        render(<Switch label="Lorem" name="lorem" />);
-
-        expect(screen.getByTestId('switch-root')).toHaveClass('root');
-        expect(screen.getByRole('checkbox')).toBeInTheDocument();
-        expect(screen.queryByRole('checkbox', { checked: true })).not.toBeInTheDocument();
-    });
-
-    it('should be multiline', () => {
-        render(<Switch label="Lorem" name="lorem" isMultiline />);
-        expect(screen.getByTestId('switch-root')).toHaveClass('root rootIsMultiline');
-    });
-
-    it('should be disabled', () => {
-        render(<Switch label="Lorem" name="lorem" isDisabled />);
-        expect(screen.getByTestId('switch-root')).toHaveClass('root rootIsDisabled');
-    });
-
-    it('should have extra', () => {
-        render(<Switch extra="Ipsum" label="Lorem" name="lorem" />);
-
-        expect(screen.getByTestId('switch-root')).toHaveClass('root rootIsMultiline');
-        expect(screen.getByText('Ipsum')).toBeDefined();
-    });
-
-    it('should handle click', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        render(<Switch label="Lorem" name="lorem" onChange={mockFn} />);
-
-        expect(mockFn).toHaveBeenCalledTimes(0);
-        await user.click(screen.getByTestId('switch-root'));
-        expect(mockFn).toHaveBeenCalledTimes(1);
-    });
-
-    it('should handle change if no onchange', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        render(<Switch label="Lorem" name="lorem" />);
-
-        await user.click(screen.getByTestId('switch-root'));
-        expect(mockFn).toHaveBeenCalledTimes(0);
-    });
-
-    it('should render value', () => {
-        const mockValue = true;
-        render(<Switch label="Lorem" name="lorem" value={mockValue} />);
-
-        expect(screen.getByRole('checkbox', { checked: true })).toBeInTheDocument();
-    });
-});