@sqrzro/admin 1.0.0-beta.1

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

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

@@ -0,0 +1,45 @@
+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 image = new File(['lorem'], 'lorem.png', { type: 'image/png' });
+        const mockFn = jest.fn();
+
+        render(<ImageInput name="lorem" onChange={mockFn} />);
+
+        userEvent.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

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

package/src/components/ImageInput/index.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+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;
+}
+
+const ImageInput: React.FunctionComponent<InputProps> = ({
+    name,
+    isDisabled,
+    hasError,
+    onChange,
+}) => {
+    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={classNames(
+                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

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

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

@@ -0,0 +1,15 @@
+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.queryAllByText('Lorem')).toHaveLength(1);
+    });
+});

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+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;
+}
+
+const InfoPanel: React.FunctionComponent<InfoPanelProps> = ({ children, variant }) => {
+    const { applyVariantClassName } = useVariant(variant);
+    return <div className={classNames(styles.root, applyVariantClassName(styles))}>{children}</div>;
+};
+
+InfoPanel.propTypes = {
+    children: PropTypes.node.isRequired,
+};
+
+export default InfoPanel;

package/src/components/Link/Link.spec.tsx

@@ -0,0 +1,62 @@
+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', () => {
+        const mockFn = jest.fn().mockImplementation((event: MouseEvent) => {
+            event.preventDefault();
+        });
+
+        render(
+            <Link onClick={mockFn} to="lorem">
+                Lorem
+            </Link>
+        );
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(screen.getByRole('link'));
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+});

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

@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface LinkProps {
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+}
+
+interface LinkRequire {
+    default: React.FunctionComponent<LinkProps>;
+}
+
+const Link: React.FunctionComponent<LinkProps> = ({ onClick, ...props }) => {
+    const { default: ActualLink } = jest.requireActual<LinkRequire>('@components/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

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import NextLink from 'next/link';
+
+interface DataProps {
+    'data-test-id'?: string;
+}
+
+interface LinkProps extends DataProps {
+    children: React.ReactNode;
+    className?: string;
+    isNewWindow?: boolean;
+    to: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+}
+
+const Link: React.FunctionComponent<LinkProps> = ({
+    children,
+    className,
+    isNewWindow,
+    onClick,
+    to,
+    ...dataProps
+}) => {
+    const newWindowProps = isNewWindow ? { target: '_blank', rel: 'noopener noreferrer' } : {};
+    const props = { ...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}`}>
+            <a {...props}>{children}</a>
+        </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

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