@sqrzro/admin 1.0.0-beta.1

package/src/components/FormActions/FormActions.story.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import StorybookPanel from '@utility/StorybookPanel';
+
+import Button from '@components/Button';
+import FormActions from './index';
+
+export default { title: 'Components/FormActions', component: FormActions };
+
+export const Basic = (): React.ReactElement => (
+    <StorybookPanel>
+        <FormActions label="Lorem Ipsum" />
+    </StorybookPanel>
+);
+
+export const WithChildren = (): React.ReactElement => (
+    <StorybookPanel>
+        <FormActions label="Lorem Ipsum">
+            <Button variant="danger">Dolor</Button>
+            <Button variant="bordered">Adiscit Exceptor</Button>
+        </FormActions>
+    </StorybookPanel>
+);

package/src/components/FormActions/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import FixedActions from '@core/FixedActions';
+
+interface FormActionsProps {
+    children?: React.ReactNode;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    label: string;
+}
+
+const FormActions: React.FunctionComponent<FormActionsProps> = ({
+    children,
+    label,
+    isDisabled,
+    isLoading,
+}) => (
+    <FixedActions isDisabled={isDisabled} isLoading={isLoading} label={label} type="submit">
+        {children}
+    </FixedActions>
+);
+
+FormActions.propTypes = {
+    label: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    isDisabled: PropTypes.bool,
+    isLoading: PropTypes.bool,
+};
+
+export default FormActions;

package/src/components/FormField/FormField.module.css

@@ -0,0 +1,71 @@
+.root {
+    clear: both;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: repeat(3, auto);
+    margin-bottom: 3rem;
+    position: relative;
+
+    &:last-child {
+        margin-bottom: .5rem;
+    }
+
+    @media (--media-lrg) {
+        grid-template-columns: min(50rem, 100%) auto;
+    }
+}
+
+.rootHasError {
+    &::before {
+        background-color: var(--clr-error5);
+        bottom: -1.5rem;
+        content: '';
+        left: clamp(-3rem, -3.75vw, -1.5rem);
+        position: absolute;
+        right: clamp(-3rem, -3.75vw, -1.5rem);
+        top: -1.5rem;
+    }
+}
+
+.rootIsShallow {
+    margin-bottom: 1.5rem;
+
+    &:last-child {
+        margin-bottom: .5rem;
+    }
+}
+
+.rootWidthFull {
+    grid-template-columns: 1fr auto;
+}
+
+.label {
+    margin-bottom: 1rem;
+    position: relative;
+}
+
+.field {
+    grid-area: 2 / 1 / 3 / 2;
+    position: relative;
+}
+
+.action {
+    display: flex;
+    grid-area: 2 / 2 / 3 / 3;
+    margin-left: 1rem;
+    position: relative;
+
+    & > * {
+        width: auto;
+    }
+
+    & > *:not(:last-child) {
+        margin-right: .5rem;
+    }
+}
+
+.error {
+    grid-area: 3 / 1 / 4 / 2;
+    margin-top: 1rem;
+    position: relative;
+}

package/src/components/FormField/FormField.spec.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TestChangeHandler from '@utility/TestChangeHandler';
+
+import FormField from './index';
+
+describe('FormField', () => {
+    it('should render', () => {
+        render(<FormField name="lorem" />);
+    });
+
+    it('should render defaults', () => {
+        render(<FormField name="lorem" />);
+
+        expect(screen.getByRole('textbox')).toHaveAttribute('name', 'lorem');
+        expect(screen.getByTestId('form-field-root')).toHaveClass('root');
+        expect(screen.queryByRole('button')).toBeNull();
+        expect(screen.queryByText('(Optional)')).toBeNull();
+    });
+
+    it('should have action', () => {
+        const mockFn = jest.fn();
+        render(<FormField action={{ label: 'Lorem', onClick: mockFn }} name="lorem" />);
+
+        const button = screen.getByRole('button');
+        expect(button).toHaveTextContent(/^Lorem$/u);
+        expect(button).not.toBeDisabled();
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(button);
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should have variant action', () => {
+        const mockFn = jest.fn();
+        render(
+            <FormField
+                action={{ label: 'Lorem', onClick: mockFn, variant: 'danger' }}
+                name="lorem"
+            />
+        );
+
+        expect(screen.getByRole('button')).toHaveClass('root rootDanger');
+    });
+
+    it('should have disabled action', () => {
+        const mockFn = jest.fn();
+        render(
+            <FormField
+                action={{ isDisabled: true, label: 'Lorem', onClick: mockFn }}
+                name="lorem"
+            />
+        );
+
+        const button = screen.getByRole('button');
+        expect(button).toBeDisabled();
+
+        userEvent.click(button);
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+
+    it('should have action while disabled', () => {
+        const mockFn = jest.fn();
+        render(<FormField action={{ label: 'Lorem', onClick: mockFn }} name="lorem" isDisabled />);
+
+        const button = screen.getByRole('button');
+        expect(button).toBeDisabled();
+
+        userEvent.click(button);
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+
+    it('should have error', () => {
+        render(<FormField error="Lorem" name="lorem" />);
+
+        expect(screen.getByTestId('form-field-root')).toHaveClass('root rootHasError');
+        expect(screen.getByText('Lorem')).not.toBeNull();
+    });
+
+    it('should have label', () => {
+        render(<FormField label="Lorem" name="lorem" />);
+        expect(screen.getByText('Lorem')).not.toBeNull();
+    });
+
+    it('should have custom id', () => {
+        render(<FormField id="ipsum" name="lorem" />);
+        expect(screen.getByRole('textbox')).toHaveAttribute('id', 'ipsum');
+    });
+
+    it('should render component', () => {
+        render(<FormField name="lorem" render={(): React.ReactElement => <div>Lorem</div>} />);
+        expect(screen.getByTestId('form-field-root')).toHaveTextContent(/^Lorem$/u);
+    });
+
+    it('should have value', () => {
+        render(<FormField name="lorem" value="Lorem" />);
+        expect(screen.getByRole('textbox')).toHaveValue('Lorem');
+    });
+
+    it('should be disabled', () => {
+        render(<FormField name="lorem" isDisabled />);
+        expect(screen.getByRole('textbox')).toBeDisabled();
+    });
+
+    it('should be optional', () => {
+        render(<FormField label="Lorem" name="lorem" isOptional />);
+        expect(screen.getByText('(Optional)')).not.toBeNull();
+    });
+
+    it('should have full width', () => {
+        render(<FormField name="lorem" width="full" />);
+        expect(screen.getByTestId('form-field-root')).toHaveClass('root rootWidthFull');
+    });
+
+    it('should handle onchange', () => {
+        render(
+            <TestChangeHandler>
+                <FormField name="lorem" />
+            </TestChangeHandler>
+        );
+
+        userEvent.type(screen.getByRole('textbox'), 'lorem');
+        expect(screen.getByRole('textbox')).toHaveValue('lorem');
+        expect(screen.getByTestId('test-change-handler-value')).toHaveTextContent('lorem');
+    });
+
+    it('should handle onkeydown', () => {
+        const mockFn = jest.fn();
+        render(<FormField name="lorem" onKeyDown={mockFn} />);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.type(screen.getByRole('textbox'), 'a');
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+});

package/src/components/FormField/FormField.story.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import FormField from './index';
+
+export default { title: 'Components/FormField', component: FormField };
+
+export const Default = (): React.ReactElement => <FormField label="Lorem Ipsum" name="lorem" />;
+
+export const WithoutLabel = (): React.ReactElement => <FormField name="lorem" />;
+
+export const WithError = (): React.ReactElement => <FormField error="Lorem Ipsum" name="lorem" />;
+
+export const Optional = (): React.ReactElement => (
+    <FormField label="Lorem Ipsum" name="lorem" isOptional />
+);
+
+export const CustomRender = (): React.ReactElement => (
+    <FormField
+        label="Lorem Ipsum"
+        name="lorem"
+        render={(props): JSX.Element => <span>{JSON.stringify(props)}</span>}
+    />
+);

package/src/components/FormField/index.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { ucwords } from '@sqrzro/utility';
+
+import FormError from '@core/FormError';
+import FormLabel from '@core/FormLabel';
+
+import Button from '@components/Button';
+import TextInput from '@components/TextInput';
+
+import type { InputProps, SimpleAction } from '@utility/interfaces';
+
+import styles from './FormField.module.css';
+
+export interface FormFieldComponentProps extends InputProps {
+    action?: SimpleAction | null;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+}
+
+interface FormFieldProps extends FormFieldComponentProps {
+    error?: string;
+    isOptional?: boolean;
+    isShallow?: boolean;
+    label?: string | null;
+    render?: ((props: FormFieldComponentProps) => React.ReactNode) | null;
+    width?: 'full' | null;
+}
+
+/**
+ * Render some kind of form control, plus a label and error message if specified. By default, it
+ * will render a `TextInput`. Using the `render` prop however, you can render any component you
+ * like. The rendered component will be passed the following props from `FormField`:
+ *
+ *  ```
+ *  name, value, hasError, isOptional, onChange
+ * ```
+ *
+ * The rendered component can then handle these in any way it likes.
+ */
+const FormField: React.FunctionComponent<FormFieldProps> = ({
+    action,
+    error,
+    id,
+    isDisabled,
+    isOptional,
+    isShallow,
+    label,
+    name,
+    onChange,
+    onKeyDown,
+    render,
+    value,
+    width,
+}) => {
+    const props = {
+        id,
+        name,
+        hasError: Boolean(error),
+        isDisabled,
+        isOptional,
+        onChange,
+        onKeyDown,
+    };
+    const component = render
+        ? render
+        : (): React.ReactNode => <TextInput value={value?.toString()} {...props} />;
+
+    return (
+        <div
+            className={classNames(
+                styles.root,
+                error && styles.rootHasError,
+                isShallow && styles.rootIsShallow,
+                width && styles[`rootWidth${ucwords(width)}`]
+            )}
+            data-testid="form-field-root"
+        >
+            {label ? (
+                <div className={styles.label}>
+                    <FormLabel htmlFor={`c_${name}`} isOptional={isOptional}>
+                        {label}
+                    </FormLabel>
+                </div>
+            ) : null}
+            <div className={styles.field}>{component({ value, ...props })}</div>
+            {action ? (
+                <div className={styles.action}>
+                    <Button
+                        isDisabled={isDisabled || action.isDisabled}
+                        onClick={action.onClick}
+                        variant={action.variant}
+                    >
+                        {action.label}
+                    </Button>
+                </div>
+            ) : null}
+            {error ? (
+                <div className={styles.error}>
+                    <FormError message={error} />
+                </div>
+            ) : null}
+        </div>
+    );
+};
+
+/*
+ * This is necessary to ensure `<Form />` components can still identify a `FormField` even after
+ * minification (in production mode)
+ */
+FormField.displayName = 'FormField';
+
+FormField.propTypes = {
+    /**
+     * The name of the field. Passed to the rendered component, as well as being used to link the
+     * label to the form control, for accessibility
+     */
+    name: PropTypes.string.isRequired,
+
+    action: PropTypes.shape({
+        isDisabled: PropTypes.bool,
+        label: PropTypes.string.isRequired,
+        onClick: PropTypes.func.isRequired,
+    }),
+
+    /**
+     * An error message. If specified, an error message is displayed and a bool value `hasError` is
+     * passed to the rendered component
+     */
+    error: PropTypes.string,
+
+    id: PropTypes.string,
+
+    isDisabled: PropTypes.bool,
+
+    /**
+     * If the field is not required (and has a label), a small label is displayed indicating this
+     */
+    isOptional: PropTypes.bool,
+
+    isShallow: PropTypes.bool,
+
+    /**
+     * The form label that will appear above the rendered component. Not required, but recommended
+     * for accessibility
+     */
+    label: PropTypes.string,
+
+    /**
+     * A function that should return a component. The first and only argument of the function is an
+     * object containing the `props` defined in the introduction above.
+     */
+    render: PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    value: PropTypes.any,
+    width: PropTypes.oneOf(['full']),
+    onChange: PropTypes.func,
+    onKeyDown: PropTypes.func,
+};
+
+export default FormField;

package/src/components/FormRepeater/FormRepeater.module.css

@@ -0,0 +1,3 @@
+.root {
+    margin-bottom: 3rem;
+}

package/src/components/FormRepeater/FormRepeater.spec.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TestChangeHandler from '@utility/TestChangeHandler';
+
+import FormRepeater from './index';
+
+describe('FormRepeater', () => {
+    it('should render', () => {
+        render(<FormRepeater name="lorem" />);
+    });
+
+    it('should render the initial field', () => {
+        render(<FormRepeater name="lorem" />);
+        expect(screen.getAllByRole('textbox')).toHaveLength(1);
+        expect(screen.getAllByRole('textbox')[0]).toHaveValue('');
+    });
+
+    it('should render an additional empty field', () => {
+        render(<FormRepeater name="lorem" value={['Lorem']} />);
+        expect(screen.getAllByRole('textbox')).toHaveLength(2);
+        expect(screen.getAllByRole('textbox')[0]).toHaveValue('Lorem');
+        expect(screen.getAllByRole('textbox')[1]).toHaveValue('');
+    });
+
+    it('should render remove buttons', () => {
+        render(<FormRepeater name="lorem" value={['Lorem']} />);
+        expect(screen.getAllByText('Remove')).toHaveLength(1);
+    });
+
+    it('should render labels', () => {
+        render(<FormRepeater label="Lorem" name="lorem" value={['Lorem', 'Ipsum']} />);
+        expect(screen.getByText('Lorem')).toBeInTheDocument();
+    });
+
+    it('should have unique ids for each textinput', () => {
+        render(<FormRepeater name="lorem" value={['Lorem', 'Ipsum']} />);
+        expect(screen.getAllByRole('textbox')[0]).toHaveAttribute('id', 'c_lorem_0');
+        expect(screen.getAllByRole('textbox')[1]).toHaveAttribute('id', 'c_lorem_1');
+    });
+
+    it('should handle max properly', () => {
+        render(<FormRepeater max={3} name="lorem" value={['Lorem', 'Ipsum', 'Dolor']} />);
+        expect(screen.getAllByRole('textbox')).toHaveLength(3);
+        expect(screen.getAllByText('Remove')).toHaveLength(3);
+    });
+
+    it('should handle null values properly', () => {
+        render(<FormRepeater name="lorem" value={['Lorem', null]} />);
+        expect(screen.getAllByRole('textbox')).toHaveLength(3);
+        expect(screen.getAllByRole('textbox')[1]).toHaveValue('');
+    });
+
+    it('should handle onChange ', () => {
+        render(
+            <TestChangeHandler>
+                <FormRepeater name="lorem" />
+            </TestChangeHandler>
+        );
+
+        userEvent.type(screen.getAllByRole('textbox')[0], 'Ipsum');
+        expect(screen.getAllByRole('textbox')[0]).toHaveValue('Ipsum');
+        expect(screen.getByTestId('test-change-handler-value')).toHaveTextContent('["Ipsum"]');
+    });
+
+    it('should handle onChange with existing ', () => {
+        render(
+            <TestChangeHandler defaultValue={['Lorem']}>
+                <FormRepeater name="lorem" />
+            </TestChangeHandler>
+        );
+
+        userEvent.type(screen.getAllByRole('textbox')[0], 'Ipsum');
+
+        expect(screen.getAllByRole('textbox')[0]).toHaveValue('LoremIpsum');
+        expect(screen.getByTestId('test-change-handler-value')).toHaveTextContent('["LoremIpsum"]');
+    });
+
+    it('should handle onChange with new', () => {
+        render(
+            <TestChangeHandler defaultValue={['Lorem']}>
+                <FormRepeater name="lorem" />
+            </TestChangeHandler>
+        );
+
+        userEvent.type(screen.getAllByRole('textbox')[1], 'Ipsum');
+
+        expect(screen.getAllByRole('textbox')[1]).toHaveValue('Ipsum');
+        expect(screen.getByTestId('test-change-handler-value')).toHaveTextContent(
+            '["Lorem","Ipsum"]'
+        );
+    });
+
+    it('should handle change if no onChange', () => {
+        const mockFn = jest.fn();
+        render(<FormRepeater name="lorem" />);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.type(screen.getAllByRole('textbox')[0], 'a');
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+
+    it('should handle remove', () => {
+        const mockFn = jest.fn();
+        render(<FormRepeater name="lorem" onChange={mockFn} value={['Lorem', 'Ipsum', 'Dolor']} />);
+
+        expect(screen.getAllByRole('textbox')).toHaveLength(4);
+        expect(mockFn).toHaveBeenCalledTimes(0);
+
+        userEvent.click(screen.getAllByText('Remove')[0]);
+
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            target: { name: 'lorem', value: ['Ipsum', 'Dolor'] },
+        });
+    });
+
+    it('should handle remove if no onChange', () => {
+        const mockFn = jest.fn();
+        render(<FormRepeater name="lorem" value={['Lorem']} />);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(screen.getAllByText('Remove')[0]);
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+});

package/src/components/FormRepeater/index.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import FormField from '@components/FormField';
+
+import type { InputProps, InputValue, SimpleAction, SimpleEvent } from '@utility/interfaces';
+
+import styles from './FormRepeater.module.css';
+
+interface FormRepeaterProps extends InputProps {
+    label?: string;
+    max?: number;
+}
+
+// Parse the values that have been passed in as `value`, and prepare them for the `FormField`s.
+const parseValues = (value?: InputValue, 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).
+     */
+    const stringifiedValue = value.map((item) => (item || '').toString());
+
+    return max && value.length >= max ? [...stringifiedValue] : [...stringifiedValue, ''];
+};
+
+const getAction = (
+    onClick: () => void,
+    values: string[],
+    index: number,
+    max?: number
+): SimpleAction | null => {
+    if (index === values.length - 1 && index !== (max || 0) - 1) {
+        return null;
+    }
+
+    return {
+        label: 'Remove',
+        onClick,
+        variant: ['bordered', 'danger'],
+    };
+};
+
+const FormRepeater: React.FunctionComponent<FormRepeaterProps> = ({
+    label,
+    max,
+    name,
+    onChange,
+    value,
+}) => {
+    const values = parseValues(value, max);
+
+    const handleChange = (event: SimpleEvent, 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={`c_${name}_${index}`}
+                    label={index === 0 ? label : null}
+                    name={name}
+                    onChange={(event): void => handleChange(event, index)}
+                    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;