@sqrzro/admin 1.0.0-beta.1

package/src/components/Dropdown/index.tsx

@@ -0,0 +1,224 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { parseNumeric, parseNumericArray, toggleArrayItem } from '@sqrzro/utility';
+
+import DropdownPanel from '@core/DropdownPanel';
+import InputPanel from '@core/InputPanel';
+import StaticTextInput from '@core/StaticTextInput';
+
+import useAccessiblePanel from '@hooks/useAccessiblePanel';
+import useClickOutside from '@hooks/useClickOutside';
+
+import type { InputProps, InputValue, SimpleEvent, SimpleObject } from '@utility/interfaces';
+
+import styles from './Dropdown.module.css';
+
+export type DropdownTransformer = (item: Record<string, unknown> | SimpleObject) => SimpleObject;
+
+interface DropdownProps extends InputProps {
+    data?: Record<string, unknown>[] | SimpleObject[];
+    isMultiple?: boolean;
+    isOptional?: boolean;
+    isPanelOnly?: boolean;
+    placeholder?: string;
+    transformer?: DropdownTransformer;
+}
+
+const transformData = (
+    data?: Record<string, unknown>[] | SimpleObject[],
+    transformer?: DropdownTransformer
+): SimpleObject[] => {
+    if (!data) {
+        return [];
+    }
+
+    if (!transformer) {
+        return data.map((item) => ({
+            ...item,
+            id: parseNumeric(item.id),
+            name: item.name as string,
+        }));
+    }
+
+    return data.map((item) => transformer(item));
+};
+
+const parseNumericValue = (
+    value?: InputValue,
+    isMultiple?: boolean
+): (number | string)[] | number | string => {
+    if (Array.isArray(value)) {
+        return parseNumericArray(value);
+    }
+    const parsed = parseNumeric(value);
+    return isMultiple ? [parsed] : parsed;
+};
+
+export const renderLabel = (
+    transformed: SimpleObject[],
+    value?: InputValue,
+    isMultiple?: boolean
+): string | null => {
+    const parsedValue = parseNumericValue(value, isMultiple);
+
+    const values = Array.isArray(parsedValue) ? parsedValue : [parsedValue];
+    const labels = transformed.filter((item) => values.includes(item.id));
+
+    if (!labels.length) {
+        return null;
+    }
+
+    if (labels.length === 1) {
+        return labels[0].name;
+    }
+
+    if (labels.length === 2) {
+        return `${labels[0].name} & ${labels[1].name}`;
+    }
+
+    return `${labels[0].name} & ${labels.length - 1} more`;
+};
+
+const Dropdown: React.FunctionComponent<DropdownProps> = ({
+    data,
+    hasError,
+    isDisabled,
+    isOptional,
+    isMultiple,
+    isPanelOnly,
+    name,
+    onChange,
+    placeholder,
+    transformer,
+    value,
+}) => {
+    if (!isMultiple && Array.isArray(value)) {
+        throw new Error('Dropdown has an array value but has not been set to `isMultiple`');
+    }
+
+    if (isMultiple && value && !Array.isArray(value)) {
+        throw new Error('Dropdown has been set to `isMultiple` but does not have an array value');
+    }
+
+    const [isOpen, setIsOpen, node] = useClickOutside();
+    const transformed = transformData(data, transformer);
+    const parsedValue = parseNumericValue(value, isMultiple);
+
+    const toggleIsOpen = (): void => setIsOpen(!isOpen);
+
+    /**
+     * If the dropdown has been defined as `isMultiple`, the value should be an array in which
+     * values are shown and hidden, depending on what has been selected
+     * @param event
+     */
+    const handleMultipleChange = (event: SimpleEvent): void => {
+        const newArray = toggleArrayItem(
+            parsedValue as (number | string)[],
+            parseNumeric(event.target.value)
+        ).filter((item) => item !== '');
+
+        const simpleEvent: SimpleEvent<(number | string)[]> = {
+            item: event.item,
+            target: { name, value: newArray },
+        };
+
+        if (event.item) {
+            simpleEvent.item = { ...event.item };
+        }
+
+        if (onChange) {
+            onChange(simpleEvent);
+        }
+    };
+
+    const handleChange = (event: SimpleEvent): void => {
+        if (event.target.value !== null && isMultiple) {
+            handleMultipleChange(event);
+            return;
+        }
+
+        if (onChange) {
+            onChange(event);
+        }
+
+        setIsOpen(false);
+    };
+
+    if (isPanelOnly) {
+        return (
+            <DropdownPanel
+                data={transformed}
+                isMultiple={isMultiple}
+                name={name}
+                onChange={handleChange}
+                value={parsedValue}
+            />
+        );
+    }
+
+    const { handleKeyboard } = useAccessiblePanel({
+        data: transformed,
+        name,
+        onChange,
+        value: parsedValue,
+    });
+
+    return (
+        <div ref={node} className={classNames(styles.root, isOpen && styles.rootOpen)}>
+            <StaticTextInput
+                hasError={hasError}
+                icon="chevronDown"
+                isDisabled={isDisabled || !data || !data.length}
+                isOpen={isOpen}
+                isOptional={isOptional}
+                label={renderLabel(transformed, parsedValue, isMultiple)}
+                name={name}
+                onChange={handleChange}
+                onClick={toggleIsOpen}
+                onKeyDown={handleKeyboard}
+                placeholder={placeholder || (isMultiple ? 'Select one or more...' : 'Select...')}
+                value={parsedValue}
+            />
+
+            {isOpen && !isDisabled && (
+                <InputPanel isScrollable>
+                    <DropdownPanel
+                        data={transformed}
+                        isMultiple={isMultiple}
+                        name={name}
+                        onChange={handleChange}
+                        value={parsedValue}
+                    />
+                </InputPanel>
+            )}
+        </div>
+    );
+};
+
+Dropdown.propTypes = {
+    name: PropTypes.string.isRequired,
+
+    /**
+     * An array of the data that will populate the dropdown. `id` and `name` are required.
+     * If `meta` is specified, it appears as smaller text below the name.
+     * If `isDisabled` is true, the value will not be selectable
+     */
+    data: PropTypes.arrayOf(PropTypes.shape({}).isRequired),
+    hasError: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    isMultiple: PropTypes.bool,
+    isOptional: PropTypes.bool,
+    isPanelOnly: PropTypes.bool,
+    placeholder: PropTypes.string,
+    transformer: PropTypes.func,
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired),
+    ]),
+    onChange: PropTypes.func,
+};
+
+export default Dropdown;

package/src/components/Fieldset/Fieldset.spec.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import Fieldset from './index';
+
+describe('Fieldset', () => {
+    it('should render', () => {
+        render(<Fieldset>Lorem</Fieldset>);
+    });
+
+    it('should render default', () => {
+        render(<Fieldset>Lorem</Fieldset>);
+
+        expect(screen.queryAllByText('Lorem')).toHaveLength(1);
+        expect(screen.queryAllByText('Ipsum')).toHaveLength(0);
+    });
+
+    it('should render legend', () => {
+        render(<Fieldset legend="Ipsum">Lorem</Fieldset>);
+        expect(screen.queryAllByText('Ipsum')).toHaveLength(1);
+    });
+});

package/src/components/Fieldset/Fieldset.story.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import StorybookPanel from '@utility/StorybookPanel';
+
+import Fieldset from './index';
+
+export default { title: 'Components/Fieldset', component: Fieldset };
+
+export const Default = (): React.ReactElement => (
+    <StorybookPanel>
+        <Fieldset legend="Lorem Ipsum">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </Fieldset>
+    </StorybookPanel>
+);
+
+export const WithoutLegend = (): React.ReactElement => (
+    <StorybookPanel>
+        <Fieldset>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Fieldset>
+    </StorybookPanel>
+);

package/src/components/Fieldset/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import FormLegend from '@core/FormLegend';
+import Panel from '@core/Panel';
+
+interface FieldsetProps {
+    children: React.ReactNode;
+    legend?: string;
+}
+
+/**
+ * Simply a styled wrapper for a `fieldset` element. The `legend` prop isn't required but is
+ * probably recommended in most instances.
+ */
+const Fieldset: React.FunctionComponent<FieldsetProps> = ({ children, legend }) => (
+    <fieldset>
+        <Panel isPadded isSpaced>
+            {legend ? <FormLegend>{legend}</FormLegend> : null}
+            {children}
+        </Panel>
+    </fieldset>
+);
+
+Fieldset.propTypes = {
+    children: PropTypes.node.isRequired,
+    legend: PropTypes.string,
+};
+
+export default Fieldset;

package/src/components/FileInput/FileInput.module.css

@@ -0,0 +1,18 @@
+.root {
+    overflow: hidden;
+    position: relative;
+}
+
+.input {
+    bottom: 0;
+    cursor: pointer;
+    font-size: .1rem;
+    height: 200%;
+    position: absolute;
+    left: 0;
+    width: 100%;
+
+    &:focus {
+        outline: none;
+    }
+}

package/src/components/FileInput/FileInput.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import FileInput from './index';
+
+describe('FileInput', () => {
+    it('should render', () => {
+        render(<FileInput name="lorem" />);
+    });
+
+    it('should show the filename when uploaded', () => {
+        const file = new File(['lorem'], 'lorem.pdf', { type: 'application/pdf' });
+        render(<FileInput name="lorem" />);
+
+        userEvent.upload(screen.getByTestId('file-input-input'), file);
+        expect(screen.getByTestId('static-text-input-root')).toHaveTextContent(/^lorem\.pdf/u);
+    });
+
+    it('should render error', () => {
+        render(<FileInput name="lorem" hasError />);
+        expect(screen.getByTestId('file-input-root')).toHaveClass('rootHasError');
+    });
+
+    it('should render disabled', () => {
+        render(<FileInput name="lorem" isDisabled />);
+        expect(screen.getByTestId('file-input-root')).toHaveClass('rootIsDisabled');
+    });
+
+    it('should handle onchange', () => {
+        const file = new File(['lorem'], 'lorem.pdf', { type: 'application/pdf' });
+        const mockFn = jest.fn();
+
+        render(<FileInput name="lorem" onChange={mockFn} />);
+
+        userEvent.upload(screen.getByTestId('file-input-input'), file);
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            target: { name: 'lorem', value: [file] },
+        });
+    });
+});

package/src/components/FileInput/FileInput.story.tsx

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

package/src/components/FileInput/index.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import StaticTextInput from '@core/StaticTextInput';
+
+import type { InputProps } from '@utility/interfaces';
+
+import styles from './FileInput.module.css';
+
+interface HTMLFileElement extends HTMLInputElement {
+    files: FileList;
+}
+
+const FileInput: React.FunctionComponent<InputProps> = ({
+    id,
+    hasError,
+    isDisabled,
+    name,
+    onChange,
+}) => {
+    const [fileName, setFileName] = useState('');
+
+    const handleChange = (event: React.ChangeEvent<HTMLFileElement>): void => {
+        const { target } = event;
+
+        if (target.files.length) {
+            setFileName(target.files[0].name);
+        }
+
+        const simpleEvent = {
+            target: { name, value: Array.from(target.files) },
+        };
+
+        if (onChange) {
+            onChange(simpleEvent);
+        }
+    };
+
+    return (
+        <div
+            className={classNames(
+                styles.root,
+                hasError && styles.rootHasError,
+                isDisabled && styles.rootIsDisabled
+            )}
+            data-testid="file-input-root"
+        >
+            <StaticTextInput
+                icon="upload"
+                label={fileName}
+                name={name}
+                placeholder="Choose file..."
+                value={fileName}
+            />
+            <input
+                className={styles.input}
+                data-testid="file-input-input"
+                id={id || `c_${name}`}
+                name={name}
+                onChange={handleChange}
+                type="file"
+            />
+        </div>
+    );
+};
+
+FileInput.propTypes = {
+    name: PropTypes.string.isRequired,
+};
+
+export default FileInput;

package/src/components/FilterLink/FilterLink.module.css

@@ -0,0 +1,9 @@
+.root {
+    align-items: center;
+    display: inline-flex;
+    fill: var(--clr-link);
+}
+
+.icon {
+    margin-right: .5rem;
+}

package/src/components/FilterLink/FilterLink.spec.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import FilterLink from './index';
+
+describe('FilterLink', () => {
+    it('should render', () => {
+        render(<FilterLink to={{ lorem: 'lorem' }}>Lorem</FilterLink>);
+    });
+
+    it('should render children', () => {
+        render(<FilterLink to={{ lorem: 'lorem' }}>Lorem</FilterLink>);
+        expect(screen.getByText('Lorem')).toBeInTheDocument();
+    });
+
+    it('should render link', () => {
+        render(<FilterLink to={{ lorem: 'lorem' }}>Lorem</FilterLink>);
+        expect(screen.getByRole('link')).toHaveAttribute('href', '/?lorem=lorem');
+    });
+});

package/src/components/FilterLink/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Link from '@components/Link';
+
+import Icon from '@core/Icon';
+
+import FilterService from '@services/FilterService';
+
+import styles from './FilterLink.module.css';
+
+interface FilterLinkProps {
+    children: React.ReactNode;
+    to: Record<string, string>;
+}
+
+const FilterLink: React.FunctionComponent<FilterLinkProps> = ({ children, to }) => (
+    <Link className={styles.root} to={FilterService.getUrlForFilters(to)}>
+        <i className={styles.icon}>
+            <Icon icon="filter" size={12} />
+        </i>
+        {children}
+    </Link>
+);
+
+FilterLink.propTypes = {
+    children: PropTypes.node.isRequired,
+    to: PropTypes.shape({}).isRequired,
+};
+
+export default FilterLink;

package/src/components/Form/Form.spec.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import Button from '@components/Button';
+import FormField from '@components/FormField';
+
+import Form from './index';
+
+const mockData = { name: 'lorem' };
+
+describe('Form', () => {
+    it('should render', () => {
+        const mockFn = jest.fn();
+        render(
+            <Form data={mockData} onChange={mockFn}>
+                <FormField name="name" />
+            </Form>
+        );
+
+        expect(screen.getByRole('textbox')).toHaveValue('lorem');
+    });
+
+    it('should render invalid elements', () => {
+        const mockFn = jest.fn();
+
+        // eslint-disable-next-line react/no-children-prop
+        render(<Form children={['lorem']} data={mockData} onChange={mockFn} />);
+        expect(screen.getByText('lorem')).toBeInTheDocument();
+    });
+
+    it('should render errors', () => {
+        const mockFn = jest.fn();
+        render(
+            <Form data={mockData} errors={{ name: '1' }} onChange={mockFn}>
+                <FormField name="name" />
+            </Form>
+        );
+
+        expect(screen.getByRole('textbox')).toHaveClass('input inputHasError');
+    });
+
+    it('should handle onchange', () => {
+        const mockFn = jest.fn();
+        render(
+            <Form data={mockData} onChange={mockFn}>
+                <FormField name="name" />
+            </Form>
+        );
+
+        userEvent.type(screen.getByRole('textbox'), 'l');
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith('name', 'loreml');
+    });
+
+    it('should handle onsubmit', () => {
+        const mockFn = jest.fn();
+        render(
+            <Form data={mockData} onChange={mockFn} onSubmit={mockFn}>
+                <FormField name="name" />
+                <Button type="submit">Submit</Button>
+            </Form>
+        );
+
+        userEvent.click(screen.getByRole('button'));
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+});

package/src/components/Form/index.tsx

@@ -0,0 +1,87 @@
+import React, { Children, cloneElement, isValidElement } from 'react';
+import PropTypes from 'prop-types';
+
+import type { InputValue, SimpleEvent } from '@utility/interfaces';
+
+interface FormProps {
+    children: React.ReactNode;
+    data: Record<string, InputValue>;
+    errors?: Record<string, string>;
+    onChange: (key: string, value: InputValue) => void;
+    onSubmit?: (event: React.FormEvent) => void;
+}
+
+const recursiveMap = (
+    children: React.ReactNode,
+    fn: (c: React.ReactElement) => React.ReactNode
+): React.ReactNode =>
+    Children.map(children, (child) => {
+        if (!isValidElement(child)) {
+            return child;
+        }
+
+        const props = child.props as Record<string, string>;
+
+        if (props.children) {
+            const newChild = cloneElement(child, {
+                children: recursiveMap(props.children, fn),
+            });
+
+            return fn(newChild);
+        }
+
+        return fn(child);
+    });
+
+interface FormChildProps {
+    name?: string;
+    error?: string;
+}
+
+const Form: React.FunctionComponent<FormProps> = ({
+    children,
+    data,
+    errors,
+    onChange,
+    onSubmit,
+}) => {
+    const handleChildChange = (event: SimpleEvent): void => {
+        const { target } = event;
+        onChange(target.name, target.value);
+    };
+
+    const handleSubmit = (event: React.FormEvent): void => {
+        event.preventDefault();
+
+        if (onSubmit) {
+            onSubmit(event);
+        }
+    };
+
+    const injectedChildren = recursiveMap(children, (child): React.ReactElement => {
+        /* eslint-disable react/prop-types */
+        const props = child.props as FormChildProps;
+
+        if (!props.name) {
+            return child;
+        }
+
+        const error = errors ? errors[props.name] : props.error;
+        const value = data[props.name];
+
+        return cloneElement(child, { error, onChange: handleChildChange, value });
+        /* eslint-enable */
+    });
+
+    return <form onSubmit={handleSubmit}>{injectedChildren}</form>;
+};
+
+Form.propTypes = {
+    children: PropTypes.node.isRequired,
+    data: PropTypes.shape({}).isRequired,
+    onChange: PropTypes.func.isRequired,
+    errors: PropTypes.shape({}),
+    onSubmit: PropTypes.func,
+};
+
+export default Form;

package/src/components/FormActions/FormActions.spec.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import FormActions from './index';
+
+describe('FormActions', () => {
+    it('should render', () => {
+        render(<FormActions label="Lorem" />);
+    });
+});