@sqrzro/admin 2.0.0 → 2.1.0-bz.1

package/src/components/FormRepeater/index.tsx

@@ -1,121 +0,0 @@
-'use client';
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import FormField from '../FormField';
-
-import type { Action, InputEvent, InputProps } from '../../utility/interfaces';
-
-// Import styles from './FormRepeater.module.css';
-
-interface FormRepeaterProps extends InputProps<string[]> {
-    label?: string;
-    max?: number;
-    render: (props: InputProps<string>) => React.ReactElement;
-}
-
-// Parse the values that have been passed in as `value`, and prepare them for the `FormField`s.
-const parseValues = (value?: string[] | string, max?: number): string[] => {
-    // If there is no value, or an empty value, then return an array.
-    if (!value || !Array.isArray(value) || !value.length) {
-        return [''];
-    }
-
-    /*
-     * Otherwise, return the existing array, and an empty string (for the new field, if the max is
-     * Not reached).
-     */
-    return max && value.length >= max ? [...value] : [...value, ''];
-};
-
-const getAction = (
-    onClick: () => void,
-    values: string[],
-    index: number,
-    max?: number
-): Action | null => {
-    if (index === values.length - 1 && index !== (max || 0) - 1) {
-        return null;
-    }
-
-    return {
-        label: 'Remove',
-        onClick,
-        variant: ['bordered', 'danger'],
-    };
-};
-
-function FormRepeater({
-    label,
-    max,
-    name,
-    onChange,
-    render,
-    value,
-}: FormRepeaterProps): React.ReactElement {
-    const values = parseValues(value, max);
-
-    const handleChange = (event: InputEvent<string>, index: number): void => {
-        if (!onChange) {
-            return;
-        }
-
-        const newValue = [
-            ...values.slice(0, index),
-            event.target.value,
-            ...values.slice(index + 1),
-        ];
-
-        onChange({
-            target: {
-                name,
-                value: newValue.filter(Boolean),
-            },
-        });
-    };
-
-    const handleRemove = (index: number): void => {
-        if (!onChange) {
-            return;
-        }
-
-        const newValue = [...values.slice(0, index), ...values.slice(index + 1)];
-
-        onChange({
-            target: {
-                name,
-                value: newValue.filter(Boolean),
-            },
-        });
-    };
-
-    return (
-        <div className="/*styles.root*/">
-            {/* eslint-disable react/no-array-index-key */}
-            {values.map((_item, index) => (
-                <FormField
-                    key={index}
-                    action={getAction(() => handleRemove(index), values, index, max)}
-                    id={`f_${name}_${index}`}
-                    label={index === 0 ? label : ''}
-                    name={name}
-                    onChange={(event): void => handleChange(event, index)}
-                    render={render}
-                    value={values[index]}
-                    isShallow
-                />
-            ))}
-            {/* eslint-enable react/no-array-index-key */}
-        </div>
-    );
-}
-
-FormRepeater.propTypes = {
-    name: PropTypes.string.isRequired,
-    label: PropTypes.string,
-    max: PropTypes.number,
-    onChange: PropTypes.func,
-};
-
-export default FormRepeater;

package/src/components/ImageInput/ImageInput.module.css

@@ -1,74 +0,0 @@
-.root {
-    background-color: var(--clr-white);
-    border: .1rem var(--clr-grey400) solid;
-    border-radius: .3rem;
-    height: 30rem;
-    overflow: hidden;
-    padding: 2rem;
-    position: relative;
-    transition: border-color .2s;
-    width: 100%;
-}
-
-.rootIsDisabled {
-    opacity: .3;
-    pointer-events: none;
-}
-
-.rootIsError {
-    border-color: var(--clr-error);
-}
-
-.rootIsDragTarget {
-    background-color: var(--clr-primary5);
-    border-color: var(--clr-primary);
-}
-
-.placeholder {
-    align-items: center;
-    bottom: 5%;
-    display: flex;
-    fill: var(--clr-grey600);
-    flex-direction: column;
-    left: 0;
-    justify-content: center;
-    position: absolute;
-    right: 0;
-    text-align: center;
-    top: 0;
-}
-
-.placeholderTitle {
-    color: var(--clr-grey600);
-    font-size: var(--fs-lrg);
-    font-weight: var(--fw-bold);
-    line-height: 1;
-    margin-bottom: 1rem;
-    margin-top: 1rem;
-}
-
-.placeholderDescription {
-    color: var(--clr-grey600);
-    font-size: var(--fs-sml);
-    line-height: 1;
-}
-
-.input {
-    bottom: 0;
-    cursor: pointer;
-    font-size: .1rem;
-    height: 200%;
-    left: 0;
-    position: absolute;
-    width: 100%;
-
-    &:focus {
-        outline: none;
-    }
-}
-
-.preview {
-    height: 100%;
-    object-fit: contain;
-    width: 100%;
-}

package/src/components/ImageInput/ImageInput.spec.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import ImageInput from './index';
-
-describe('ImageInput', () => {
-    it('should render', () => {
-        render(<ImageInput name="lorem" />);
-    });
-
-    it('should render defaults', () => {
-        render(<ImageInput name="lorem" />);
-        expect(screen.getByText('Click to Upload')).toBeInTheDocument();
-        expect(screen.getByText('(or drop an image here)')).toBeInTheDocument();
-        expect(screen.queryByRole('img')).not.toBeInTheDocument();
-    });
-
-    it('should render error', () => {
-        render(<ImageInput name="lorem" hasError />);
-        expect(screen.getByTestId('image-input-root')).toHaveClass('rootHasError');
-    });
-
-    it('should render disabled', () => {
-        render(<ImageInput name="lorem" isDisabled />);
-        expect(screen.getByTestId('image-input-root')).toHaveClass('rootIsDisabled');
-    });
-
-    it('should handle onchange', async () => {
-        const user = userEvent.setup();
-
-        const image = new File(['lorem'], 'lorem.png', { type: 'image/png' });
-        const mockFn = jest.fn();
-
-        render(<ImageInput name="lorem" onChange={mockFn} />);
-
-        await user.upload(screen.getByTestId('image-input-input'), image);
-        expect(mockFn).toHaveBeenCalledTimes(1);
-        expect(mockFn).toHaveBeenLastCalledWith({
-            target: { name: 'lorem', value: image },
-        });
-
-        await waitFor(() => {
-            expect(screen.getByRole('img')).toBeInTheDocument();
-        });
-    });
-});

package/src/components/ImageInput/ImageInput.story.tsx

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

package/src/components/ImageInput/index.tsx

@@ -1,93 +0,0 @@
-'use client';
-
-import React, { useEffect, useRef, useState } from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import Icon from '../../core/Icon';
-
-import type { InputProps } from '../../utility/interfaces';
-
-// Import styles from './ImageInput.module.css';
-
-interface HTMLFileElement extends HTMLInputElement {
-    files: FileList;
-}
-
-function ImageInput({
-    name,
-    isDisabled,
-    hasError,
-    onChange,
-}: InputProps<File>): React.ReactElement {
-    const reader = useRef(new FileReader());
-    const [preview, setPreview] = useState('');
-
-    const handleReaderLoad = (): void => {
-        /*
-         * `reader.result` can technically be null, but there's no way to set it to null via a file
-         * input, so we can 'handle' the possibility of null to keep typescript happy, but ignore
-         * this line in code coverage
-         */
-        /* istanbul ignore next */
-        setPreview(reader.current.result?.toString() || '');
-    };
-
-    const handleChange = (event: React.ChangeEvent<HTMLFileElement>): void => {
-        const { target } = event;
-
-        if (target.files.length) {
-            reader.current.readAsDataURL(target.files[0]);
-
-            if (onChange) {
-                onChange({ target: { name, value: target.files[0] } });
-            }
-        }
-    };
-
-    useEffect(() => {
-        reader.current.addEventListener('load', handleReaderLoad);
-
-        return (): void => {
-            reader.current.removeEventListener('load', handleReaderLoad);
-        };
-    }, []);
-
-    return (
-        <div
-            className="/*clsx(
-                styles.root,
-                hasError && styles.rootHasError,
-                isDisabled && styles.rootIsDisabled
-            )*/"
-            data-testid="image-input-root"
-        >
-            {preview ? (
-                <img className="/*styles.preview*/" src={preview} />
-            ) : (
-                <div className="/*styles.placeholder*/">
-                    <Icon icon="upload" size={30} />
-                    <span className="/*styles.placeholderTitle*/">Click to Upload</span>
-                    <em className="/*styles.placeholderDescription*/">(or drop an image here)</em>
-                </div>
-            )}
-
-            <input
-                className="/*styles.input*/"
-                data-testid="image-input-input"
-                name={name}
-                onChange={handleChange}
-                type="file"
-            />
-        </div>
-    );
-}
-
-ImageInput.propTypes = {
-    name: PropTypes.string.isRequired,
-    hasError: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    onChange: PropTypes.func,
-};
-
-export default ImageInput;

package/src/components/InfoPanel/InfoPanel.module.css

@@ -1,20 +0,0 @@
-.root {
-    background-color: var(--clr-primary5);
-    border: .1rem var(--clr-primary) solid;
-    border-radius: .3rem;
-    font-size: var(--fs-sml);
-    font-weight: var(--fw-bold);
-    margin-bottom: 3rem;
-    padding: 1.5rem;
-}
-
-.rootDanger {
-    background-color: var(--clr-error5);
-    border: .1rem var(--clr-error) solid;
-    color: var(--clr-error);
-}
-
-.rootWarning {
-    background-color: var(--clr-warning5);
-    border: .1rem var(--clr-warning) solid;
-}

package/src/components/InfoPanel/InfoPanel.spec.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-
-import InfoPanel from './index';
-
-describe('InfoPanel', () => {
-    it('should render', () => {
-        render(<InfoPanel>Lorem</InfoPanel>);
-    });
-
-    it('should render default', () => {
-        render(<InfoPanel>Lorem</InfoPanel>);
-        expect(screen.getByText('Lorem')).toBeInTheDocument();
-    });
-});

package/src/components/InfoPanel/InfoPanel.story.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import type { Story } from '@storybook/react';
-
-import InfoPanel from './index';
-import type { InfoPanelProps } from './index';
-
-export default {
-    title: 'Components/InfoPanel',
-    component: InfoPanel,
-};
-
-const Template: Story<InfoPanelProps> = (props) => <InfoPanel {...props} />;
-
-export const Basic = Template.bind({});
-
-Basic.args = {
-    children: 'Lorem Ipsum',
-};
-
-export const Danger = Template.bind({});
-
-Danger.args = {
-    children: 'Lorem Ipsum',
-    variant: 'danger',
-};
-
-export const Warning = Template.bind({});
-
-Warning.args = {
-    children: 'Lorem Ipsum',
-    variant: 'warning',
-};

package/src/components/InfoPanel/index.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import useVariant from '../../hooks/useVariant';
-
-import type { StyleVariant } from '../../utility/interfaces';
-
-// Import styles from './InfoPanel.module.css';
-
-export interface InfoPanelProps {
-    children: React.ReactNode;
-    variant?: StyleVariant;
-}
-
-function InfoPanel({ children, variant }: InfoPanelProps): React.ReactElement {
-    const { applyVariantClassName } = useVariant(variant);
-    return <div className="/*clsx(styles.root, applyVariantClassName(styles))*/">{children}</div>;
-}
-
-InfoPanel.propTypes = {
-    children: PropTypes.node.isRequired,
-};
-
-export default InfoPanel;

package/src/components/Link/Link.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 Link from './index';
-
-describe('Link', () => {
-    it('should render', () => {
-        render(<Link to="lorem">Lorem</Link>);
-    });
-
-    it('should render defaults', () => {
-        render(<Link to="lorem">Lorem</Link>);
-        expect(screen.getByRole('link')).toHaveAttribute('href', '/lorem');
-    });
-
-    it('should handle forward slash properly', () => {
-        render(<Link to="/lorem">Lorem</Link>);
-        expect(screen.getByRole('link')).toHaveAttribute('href', '/lorem');
-    });
-
-    it('should render external', () => {
-        render(<Link to="http://lorem">Lorem</Link>);
-        expect(screen.getByRole('link')).toHaveAttribute('href', 'http://lorem');
-    });
-
-    it('should render telephone', () => {
-        render(<Link to="tel://0123456">Lorem</Link>);
-        expect(screen.getByRole('link')).toHaveAttribute('href', 'tel://0123456');
-    });
-
-    it('should render mailto', () => {
-        render(<Link to="mailto://lorem">Lorem</Link>);
-        expect(screen.getByRole('link')).toHaveAttribute('href', 'mailto://lorem');
-    });
-
-    it('should render in new window', () => {
-        render(
-            <Link to="lorem" isNewWindow>
-                Lorem
-            </Link>
-        );
-        expect(screen.getByRole('link')).toHaveAttribute('rel', 'noopener noreferrer');
-        expect(screen.getByRole('link')).toHaveAttribute('target', '_blank');
-    });
-
-    it('should handle onclick', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn().mockImplementation((event: MouseEvent) => {
-            event.preventDefault();
-        });
-
-        render(
-            <Link onClick={mockFn} to="lorem">
-                Lorem
-            </Link>
-        );
-
-        expect(mockFn).toHaveBeenCalledTimes(0);
-        await user.click(screen.getByRole('link'));
-        expect(mockFn).toHaveBeenCalledTimes(1);
-    });
-});

package/src/components/Link/__mocks__/index.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-interface LinkProps {
-    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-}
-
-interface LinkRequire {
-    default: React.FunctionComponent<LinkProps>;
-}
-
-function Link({ onClick, ...props }: LinkProps): React.ReactElement {
-    const { default: ActualLink } = jest.requireActual<LinkRequire>('../Link');
-
-    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>): void => {
-        event.preventDefault();
-        if (onClick) {
-            onClick(event);
-        }
-    };
-
-    return <ActualLink {...props} onClick={handleClick} />;
-}
-
-export default Link;

package/src/components/Link/index.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import NextLink from 'next/link';
-
-interface WindowProps {
-    target?: '_blank';
-    rel?: 'noopener noreferrer';
-}
-
-interface DataProps {
-    'data-test-id'?: string; // eslint-disable-line @typescript-eslint/naming-convention
-}
-
-interface LinkProps extends DataProps {
-    children: React.ReactNode;
-    className?: string;
-    isNewWindow?: boolean;
-    to: string;
-    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-}
-
-interface LinkElementProps extends Omit<LinkProps, 'children' | 'to'>, WindowProps {}
-
-function Link({
-    children,
-    className,
-    isNewWindow,
-    onClick,
-    to,
-    ...dataProps
-}: LinkProps): React.ReactElement {
-    const newWindowProps: WindowProps = isNewWindow
-        ? { target: '_blank', rel: 'noopener noreferrer' }
-        : {};
-    const props: LinkElementProps = { ...newWindowProps, ...dataProps, className, onClick };
-
-    if (/^http/u.exec(to) || /^mailto:/u.exec(to) || /^tel:/u.exec(to)) {
-        return (
-            <a href={to} {...props}>
-                {children}
-            </a>
-        );
-    }
-
-    return (
-        <NextLink href={/^\//u.exec(to) ? to : `/${to}`} {...props}>
-            {children}
-        </NextLink>
-    );
-}
-
-Link.propTypes = {
-    children: PropTypes.node.isRequired,
-    to: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    isNewWindow: PropTypes.bool,
-    onClick: PropTypes.func,
-};
-
-export default Link;

package/src/components/List/List.module.css

@@ -1,9 +0,0 @@
-.root {
-    margin-bottom: 3rem;
-    transition: opacity .5s;
-}
-
-.rootIsDisabled {
-    opacity: .3;
-    pointer-events: none;
-}