@sqrzro/admin 1.0.0-beta.1

package/src/components/ConnectedTable/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import ConnectedRepeater from '@core/ConnectedRepeater';
+import type { ConnectedRepeaterElementProps } from '@core/ConnectedRepeater';
+
+import Table from '@components/Table';
+
+const ConnectedTable: React.FunctionComponent<ConnectedRepeaterElementProps> = (props) => (
+    <ConnectedRepeater
+        {...props}
+        render={({ columns, ...renderProps }): React.ReactElement => (
+            <Table columns={columns || {}} {...renderProps} />
+        )}
+    />
+);
+
+export default ConnectedTable;

package/src/components/ContentBlock/ContentBlock.module.css

@@ -0,0 +1,8 @@
+.root {
+    font-size: var(--fs-sml);
+    margin-bottom: 3rem;
+
+    & p:not(:last-child) {
+        margin-bottom: 1.5rem;
+    }
+}

package/src/components/ContentBlock/ContentBlock.spec.tsx

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

package/src/components/ContentBlock/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './ContentBlock.module.css';
+
+interface ContentBlockProps {
+    children: React.ReactNode;
+}
+
+const ContentBlock: React.FunctionComponent<ContentBlockProps> = ({ children }) => (
+    <div className={styles.root}>{children}</div>
+);
+
+ContentBlock.propTypes = { children: PropTypes.node.isRequired };
+
+export default ContentBlock;

package/src/components/DateInput/DateInput.module.css

@@ -0,0 +1,15 @@
+.root {
+    display: flex;
+}
+
+.input {
+    width: 6rem;
+
+    &:not(:last-child) {
+        margin-right: 1rem;
+    }
+}
+
+.inputY {
+    width: 10rem;
+}

package/src/components/DateInput/DateInput.spec.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import DateInput from './index';
+
+describe('DateInput', () => {
+    it('should render', () => {
+        render(<DateInput name="lorem" />);
+    });
+
+    it('should render defaults', () => {
+        render(<DateInput name="lorem" />);
+
+        expect(screen.getAllByRole('textbox')[0]).not.toBeDisabled();
+        expect(screen.getAllByRole('textbox')[0]).toHaveClass('input');
+    });
+
+    it('should have format', () => {
+        render(<DateInput name="lorem" />);
+    });
+
+    it('should have error', () => {
+        render(<DateInput name="lorem" hasError />);
+        expect(screen.getAllByRole('textbox')[0]).toHaveClass('input inputHasError');
+    });
+
+    it('should be disabled', () => {
+        render(<DateInput name="lorem" isDisabled />);
+        expect(screen.getAllByRole('textbox')[0]).toBeDisabled();
+    });
+
+    it('should handle onchange', () => {
+        const mockFn = jest.fn();
+        render(<DateInput name="lorem" onChange={mockFn} />);
+
+        const inputs = screen.getAllByRole('textbox');
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+
+        userEvent.type(inputs[0], '17');
+        expect(mockFn).toHaveBeenCalledTimes(2);
+        expect(mockFn).toHaveBeenLastCalledWith({ target: { name: 'lorem', value: '--17' } });
+
+        userEvent.type(inputs[1], '01');
+        expect(mockFn).toHaveBeenCalledTimes(4);
+        expect(mockFn).toHaveBeenLastCalledWith({ target: { name: 'lorem', value: '-01-17' } });
+
+        userEvent.type(inputs[2], '2000');
+        expect(mockFn).toHaveBeenCalledTimes(8);
+        expect(mockFn).toHaveBeenLastCalledWith({ target: { name: 'lorem', value: '2000-01-17' } });
+    });
+
+    it('should handle if no onchange', () => {
+        const mockFn = jest.fn();
+        render(<DateInput name="lorem" />);
+
+        userEvent.type(screen.getAllByRole('textbox')[0], '17');
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+
+    it('should have value', () => {
+        render(<DateInput name="lorem" value="2020-01-17" />);
+
+        const inputs = screen.getAllByRole('textbox');
+
+        expect(inputs[0]).toHaveValue('17');
+        expect(inputs[1]).toHaveValue('01');
+        expect(inputs[2]).toHaveValue('2020');
+    });
+
+    it('should have partial value', () => {
+        render(<DateInput name="lorem" value="2020--" />);
+
+        const inputs = screen.getAllByRole('textbox');
+
+        expect(inputs[0]).toHaveValue('');
+        expect(inputs[1]).toHaveValue('');
+        expect(inputs[2]).toHaveValue('2020');
+    });
+
+    it('should have invalid value', () => {
+        render(<DateInput name="lorem" value="lorem" />);
+
+        const inputs = screen.getAllByRole('textbox');
+
+        expect(inputs[0]).toHaveValue('');
+        expect(inputs[1]).toHaveValue('');
+        expect(inputs[2]).toHaveValue('');
+    });
+});

package/src/components/DateInput/index.tsx

@@ -0,0 +1,149 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import TextInput from '@components/TextInput';
+
+import type { InputProps, InputValue, SimpleEvent } from '@utility/interfaces';
+
+import styles from './DateInput.module.css';
+
+type FieldDataItem = ['day' | 'month' | 'year', string, 'DD' | 'MM' | 'YYYY'];
+
+interface DateReducerState {
+    day: string;
+    month: string;
+    year: string;
+}
+
+interface DateReducerAction {
+    name?: string;
+    value?: InputValue;
+}
+
+const DEFAULT_DATE: DateReducerState = {
+    day: '',
+    month: '',
+    year: '',
+};
+
+/**
+ * Take an input, and either return an empty default date, or a properly parsed DateReducerState.
+ * This function ensures that no matter what value is passed into the DateInput, it will only ever
+ * return a correctly formatted DateReducerState.
+ *
+ * @param input Any InputValue that has been sent to the DateInput
+ * @returns A properly formatted DateReducerState, which will be 'empty' if the input is invalid
+ */
+const parseDateString = (input?: InputValue): DateReducerState => {
+    if (!input || typeof input !== 'string' || !/.*-.*-.*/u.exec(input)) {
+        return { ...DEFAULT_DATE };
+    }
+
+    const [year, month, day] = input.split('-');
+    return { day, month, year };
+};
+
+/**
+ * This function takes an existing 'state' (an object of strings for the day, month, and year), and
+ * applies an 'action' on it, to return an updated state.
+ *
+ * The action can either contain a name (either 'day', 'month' or 'year'), or no name.
+ *
+ * @param state
+ * @param action
+ * @returns
+ */
+
+const dateReducer = (state: DateReducerState, action: DateReducerAction): DateReducerState => {
+    if (!action.name) {
+        return parseDateString(action.value);
+    }
+
+    return { ...state, [action.name]: action.value };
+};
+
+interface DateInputProps extends InputProps {
+    format?: string;
+}
+
+const DateInput: React.FunctionComponent<DateInputProps> = ({
+    format = 'DMY',
+    hasError,
+    isDisabled,
+    name,
+    onChange,
+    value,
+}) => {
+    const [date, setDate] = useState<DateReducerState>(dateReducer(DEFAULT_DATE, { value }));
+    const { day, month, year } = date;
+
+    /* eslint-disable id-length */
+    const fieldData = useMemo(
+        (): Record<string, FieldDataItem> => ({
+            D: ['day', day, 'DD'],
+            M: ['month', month, 'MM'],
+            Y: ['year', year, 'YYYY'],
+        }),
+        [day, month, year]
+    );
+    /* eslint-enable */
+
+    const handleChange = (event: SimpleEvent, fieldName: string): void => {
+        const target = event.target as HTMLInputElement;
+        const newDate = dateReducer(date, { value: target.value, name: fieldName });
+
+        setDate(newDate);
+
+        const simpleEvent = {
+            target: {
+                name,
+                value: `${newDate.year}-${newDate.month}-${newDate.day}`,
+            },
+        };
+
+        if (onChange) {
+            onChange(simpleEvent);
+        }
+    };
+
+    useEffect(() => {
+        const newDate = dateReducer(date, { value });
+        setDate(newDate);
+    }, [value]);
+
+    return (
+        <div className={styles.root}>
+            {format.split('').map((field) => {
+                const [fieldName, fieldValue, fieldPlaceholder] = fieldData[field];
+
+                return (
+                    <div
+                        key={fieldName}
+                        className={classNames(styles.input, styles[`input${field}`])}
+                    >
+                        <TextInput
+                            hasError={hasError}
+                            isDisabled={isDisabled}
+                            name={`${name}_${field.toLowerCase()}`}
+                            onChange={(event): void => handleChange(event, fieldName)}
+                            placeholder={fieldPlaceholder}
+                            value={fieldValue}
+                        />
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+DateInput.propTypes = {
+    name: PropTypes.string.isRequired,
+    format: PropTypes.string,
+    hasError: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+};
+
+export default DateInput;

package/src/components/Document/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import NextDocument, { Head, Html, Main, NextScript } from 'next/document';
+
+class Document extends NextDocument {
+    /* eslint-disable class-methods-use-this */
+    public render(): JSX.Element {
+        return (
+            <Html lang="en">
+                <Head />
+                <body>
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+        );
+    }
+    /* eslint-enable */
+}
+
+export default Document;

package/src/components/Dropdown/Dropdown.module.css

@@ -0,0 +1,8 @@
+.root {
+    position: relative;
+    z-index: 1;
+}
+
+.rootOpen {
+    z-index: 2;
+}

package/src/components/Dropdown/Dropdown.spec.tsx

@@ -0,0 +1,286 @@
+import React from 'react';
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import Dropdown from './index';
+
+import type { DropdownTransformer } from './index';
+
+const mockData = [
+    {
+        id: 1,
+        name: 'Lorem Ipsum',
+    },
+    {
+        id: '2',
+        name: 'Dolor Sit Amet',
+    },
+    {
+        id: 'lorem',
+        name: 'Another Lorem Ipsum',
+    },
+];
+
+const mockExtendedData = [...mockData, { id: 4, name: 'Adiscit' }];
+
+const mockBooleanData = [
+    {
+        id: 0,
+        name: 'Lorem False',
+    },
+    {
+        id: 1,
+        name: 'Ipsum True',
+    },
+];
+
+const mockDisabledData = [
+    {
+        id: 1,
+        name: 'Lorem Ipsum',
+        isDisabled: true,
+    },
+    {
+        id: 2,
+        name: 'Dolor Sit Amet',
+    },
+];
+
+describe('Dropdown', () => {
+    it('should handle no data', () => {
+        render(<Dropdown name="lorem" />);
+    });
+
+    it('should handle opening and closing', () => {
+        render(<Dropdown data={mockData} name="lorem" />);
+
+        expect(screen.queryAllByRole('option')).toHaveLength(0);
+        expect(screen.getByRole('button', { name: 'Open' })).toHaveTextContent(/^Open$/u);
+
+        userEvent.click(screen.getByRole('button', { name: 'Open' }));
+        expect(screen.queryAllByRole('option')).toHaveLength(3);
+        expect(screen.getByRole('button', { name: 'Close' })).toHaveTextContent(/^Close$/u);
+
+        expect(screen.queryAllByRole('option')[0]).toHaveTextContent(/^Lorem IpsumSelect$/u);
+
+        userEvent.click(screen.getByRole('button', { name: 'Close' }));
+        expect(screen.queryAllByRole('option')).toHaveLength(0);
+        expect(screen.getByRole('button', { name: 'Open' })).toHaveTextContent(/^Open$/u);
+    });
+
+    it('should have value', () => {
+        render(<Dropdown data={mockData} name="lorem" value="1" isPanelOnly />);
+        expect(screen.queryAllByRole('option')[0]).toHaveClass('item itemIsActive');
+        expect(screen.queryAllByRole('option')[1]).toHaveClass('item');
+    });
+
+    it('should have value array', () => {
+        render(<Dropdown data={mockData} name="lorem" value={[1, 2]} isMultiple isPanelOnly />);
+        expect(screen.queryAllByRole('option')[0]).toHaveClass('item itemIsActive');
+        expect(screen.queryAllByRole('option')[1]).toHaveClass('item itemIsActive');
+    });
+
+    it('should render label (1 item)', () => {
+        render(<Dropdown data={mockData} name="lorem" value="1" />);
+        expect(screen.getByText('Lorem Ipsum')).toBeInTheDocument();
+    });
+
+    it('should render label (1 item, multiple)', () => {
+        render(<Dropdown data={mockData} name="lorem" value={[1]} isMultiple />);
+        expect(screen.getByText('Lorem Ipsum')).toBeInTheDocument();
+    });
+
+    it('should render label (2 items)', () => {
+        render(<Dropdown data={mockData} name="lorem" value={[1, 2]} isMultiple />);
+        expect(screen.getByText('Lorem Ipsum & Dolor Sit Amet')).toBeInTheDocument();
+    });
+
+    it('should render label (3 items)', () => {
+        render(<Dropdown data={mockExtendedData} name="lorem" value={[1, 2, 4]} isMultiple />);
+        expect(screen.getByText('Lorem Ipsum & 2 more')).toBeInTheDocument();
+    });
+
+    it('should have error', () => {
+        render(<Dropdown data={mockData} name="lorem" value="1" hasError />);
+        expect(screen.getByText('Lorem Ipsum')).toHaveClass('root rootHasError');
+    });
+
+    it('should be disabled', () => {
+        render(<Dropdown data={mockData} name="lorem" value="1" isDisabled />);
+        expect(screen.getByText('Lorem Ipsum')).toHaveClass('root rootIsDisabled');
+    });
+
+    it('should have disabled options', () => {
+        render(<Dropdown data={mockDisabledData} name="lorem" isPanelOnly />);
+        expect(screen.queryAllByRole('option')[0]).toHaveClass('item itemIsDisabled');
+    });
+
+    it('should be optional', () => {
+        render(<Dropdown data={mockData} name="lorem" value="1" isOptional />);
+        expect(screen.queryAllByRole('button')[1]).toHaveTextContent(/^Clear$/u);
+    });
+
+    it('should be panel only', () => {
+        render(<Dropdown name="lorem" isPanelOnly />);
+        expect(screen.queryAllByRole('listbox')).toHaveLength(1);
+    });
+
+    it('should have placeholder', () => {
+        render(<Dropdown name="lorem" />);
+        expect(screen.getByText('Select...')).toBeDefined();
+    });
+
+    it('should have multiple placeholder', () => {
+        render(<Dropdown name="lorem" isMultiple />);
+        expect(screen.getByText('Select one or more...')).toBeDefined();
+    });
+
+    it('should have custom placeholder', () => {
+        render(<Dropdown name="lorem" placeholder="Lorem" />);
+        expect(screen.getByText('Lorem')).toBeDefined();
+    });
+
+    it('should use transformer', () => {
+        const transformer: DropdownTransformer = (item) => ({
+            id: item.id as number,
+            name: `[[${item.name as string}]]`,
+        });
+
+        render(<Dropdown data={mockData} name="lorem" transformer={transformer} isPanelOnly />);
+        expect(screen.getByText('[[Lorem Ipsum]]')).toBeInTheDocument();
+    });
+
+    it('should error if array value & not isMultiple', () => {
+        jest.spyOn(console, 'error').mockImplementation(() => jest.fn());
+
+        expect(() =>
+            render(<Dropdown data={mockData} name="lorem" value={[1, 2]} />)
+        ).toThrowError();
+
+        // eslint-disable-next-line no-console
+        (console.error as jest.Mock).mockClear();
+    });
+
+    it('should error if not array value & isMultiple', () => {
+        jest.spyOn(console, 'error').mockImplementation(() => jest.fn());
+
+        expect(() =>
+            render(<Dropdown data={mockData} name="lorem" value="1" isMultiple />)
+        ).toThrowError();
+
+        // eslint-disable-next-line no-console
+        (console.error as jest.Mock).mockClear();
+    });
+
+    it('should handle change', () => {
+        const mockFn = jest.fn();
+        render(<Dropdown data={mockData} name="lorem" onChange={mockFn} isPanelOnly />);
+
+        userEvent.click(screen.queryAllByRole('button')[0]);
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            item: { id: 1, name: 'Lorem Ipsum' },
+            target: { name: 'lorem', value: 1 },
+        });
+    });
+
+    it('should handle multiple change', () => {
+        const mockFn = jest.fn();
+        render(<Dropdown data={mockData} name="lorem" onChange={mockFn} isMultiple isPanelOnly />);
+
+        userEvent.click(screen.queryAllByRole('button')[0]);
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            item: { id: 1, name: 'Lorem Ipsum' },
+            target: { name: 'lorem', value: [1] },
+        });
+    });
+
+    it('should handle multiple change with value', () => {
+        const mockFn = jest.fn();
+        render(
+            <Dropdown
+                data={mockData}
+                name="lorem"
+                onChange={mockFn}
+                value={[1]}
+                isMultiple
+                isPanelOnly
+            />
+        );
+
+        userEvent.click(screen.queryAllByRole('button')[0]);
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            item: { id: 1, name: 'Lorem Ipsum' },
+            target: { name: 'lorem', value: [] },
+        });
+    });
+
+    it('should handle 0 value', () => {
+        render(<Dropdown data={mockBooleanData} name="lorem" value={0} isPanelOnly />);
+        expect(screen.queryAllByRole('option')[0]).toHaveClass('item itemIsActive');
+    });
+
+    it('should handle change with boolean', () => {
+        const mockFn = jest.fn();
+        render(
+            <Dropdown data={mockBooleanData} name="lorem" onChange={mockFn} value={0} isPanelOnly />
+        );
+
+        userEvent.click(screen.queryAllByRole('button')[0]);
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            item: { id: 0, name: 'Lorem False' },
+            target: { name: 'lorem', value: 0 },
+        });
+    });
+
+    it('should handle multiple 0 value', () => {
+        const mockFn = jest.fn();
+        render(
+            <Dropdown
+                data={mockBooleanData}
+                name="lorem"
+                onChange={mockFn}
+                value={[]}
+                isMultiple
+                isPanelOnly
+            />
+        );
+
+        userEvent.click(screen.queryAllByRole('button')[0]);
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            item: { id: 0, name: 'Lorem False' },
+            target: { name: 'lorem', value: [0] },
+        });
+    });
+
+    it('should handle keyboard controls', async () => {
+        const mockFn = jest.fn();
+        render(<Dropdown data={mockData} name="lorem" onChange={mockFn} />);
+        userEvent.tab();
+        expect(screen.getByText('Open')).toHaveFocus();
+
+        userEvent.keyboard('{Enter}');
+        expect(screen.queryAllByRole('option')).toHaveLength(3);
+
+        userEvent.keyboard('{ArrowDown}');
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            item: { id: 1, name: 'Lorem Ipsum' },
+            target: { name: 'lorem', value: 1 },
+        });
+
+        userEvent.keyboard('{ArrowUp}');
+        expect(mockFn).toHaveBeenCalledTimes(2);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            item: { id: 'lorem', name: 'Another Lorem Ipsum' },
+            target: { name: 'lorem', value: 'lorem' },
+        });
+
+        userEvent.keyboard('{Escape}');
+        await waitForElementToBeRemoved(screen.queryAllByRole('option')[0]);
+    });
+});

package/src/components/Dropdown/Dropdown.story.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Dropdown from './index';
+
+import TestChangeHandler from '@utility/TestChangeHandler';
+import StorybookPanel from '@utility/StorybookPanel';
+
+export default {
+    title: 'Components/Dropdown',
+    component: Dropdown,
+    decorators: [
+        (storyFn: () => React.ReactElement): React.ReactElement => (
+            <StorybookPanel isDeep>
+                <TestChangeHandler defaultValue={null}>{storyFn()}</TestChangeHandler>
+            </StorybookPanel>
+        ),
+    ],
+};
+
+const data = [
+    { id: 1, name: 'Apple' },
+    { id: 2, name: 'Banana' },
+    { id: 3, name: 'Carrot' },
+];
+
+const scrollData = [
+    { id: 1, name: 'Apple' },
+    { id: 2, name: 'Banana' },
+    { id: 3, name: 'Carrot' },
+    { id: 4, name: 'Date' },
+    { id: 5, name: 'Elephant' },
+    { id: 6, name: 'Fruit' },
+    { id: 7, name: 'Grape' },
+];
+
+const dataWithMeta = data.map((item) => ({ ...item, meta: 'Lorem ipsum dolor' }));
+
+export const Basic = (): React.ReactElement => <Dropdown data={data} name="lorem" />;
+
+export const WithScroll = (): React.ReactElement => <Dropdown data={scrollData} name="lorem" />;
+
+export const Multiple = (): React.ReactElement => (
+    <Dropdown data={scrollData} name="lorem" isMultiple />
+);
+
+export const Optional = (): React.ReactElement => <Dropdown data={data} name="lorem" isOptional />;
+
+export const WithMeta = (): React.ReactElement => <Dropdown data={dataWithMeta} name="lorem" />;
+
+export const NoData = (): React.ReactElement => <Dropdown data={[]} name="lorem" />;
+
+export const Disabled = (): React.ReactElement => <Dropdown data={data} name="lorem" isDisabled />;
+
+export const WithError = (): React.ReactElement => <Dropdown data={data} name="lorem" hasError />;