@sqrzro/admin 1.0.0-beta.1

package/src/filters/interfaces.ts

@@ -0,0 +1,40 @@
+import type { FormFieldComponentProps } from '@components/FormField';
+import type { InputValue, Remote, SimpleObject } from '@utility/interfaces';
+
+interface PanelOptions {
+    isScrollable?: boolean;
+    // eslint-disable-next-line @typescript-eslint/sort-type-union-intersection-members
+    size?: 'sm' | 'md' | 'lg';
+}
+
+export interface FilterOptions {
+    data?: SimpleObject[] | string[];
+    label: string;
+    name: string;
+    props?: Record<string, unknown>;
+    remote?: Remote;
+}
+
+export interface FilterFieldProps extends FormFieldComponentProps {
+    data?: SimpleObject[] | string[];
+    extraProps?: Record<string, unknown>;
+    panelIndex?: number;
+    setPanelIndex?: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export interface RenderSummaryArgs {
+    data?: SimpleObject[] | string[];
+    props?: Record<string, unknown>;
+    value?: InputValue;
+}
+
+export interface FilterField {
+    data?: SimpleObject[] | string[];
+    label: string;
+    name: string;
+    panelOptions?: PanelOptions | PanelOptions[];
+    props?: Record<string, unknown>;
+    remote?: Remote;
+    renderField: (props: FilterFieldProps) => React.ReactNode;
+    renderSummary?: (args: RenderSummaryArgs) => string;
+}

package/src/hooks/useAccessiblePanel.spec.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TestChangeHandler from '@utility/TestChangeHandler';
+
+import type { SimpleEventHandler, SimpleObject } from '@utility/interfaces';
+
+import useAccessiblePanel from './useAccessiblePanel';
+
+interface ComponentProps {
+    data?: SimpleObject[];
+    onChange?: SimpleEventHandler;
+    value?: (number | string)[] | number | string;
+}
+
+const mockData = [
+    {
+        id: 'Lorem',
+        name: 'Lorem',
+    },
+    {
+        id: 'Ipsum',
+        name: 'Ipsum',
+    },
+    {
+        id: 'Dolor',
+        name: 'Dolor',
+    },
+];
+
+const Component: React.FunctionComponent<ComponentProps> = ({ data, onChange, value }) => {
+    const { handleKeyboard } = useAccessiblePanel({ data, name: 'lorem', onChange, value });
+    return <input onKeyDown={handleKeyboard} />;
+};
+
+describe('useAccessiblePanel', () => {
+    it('should handle no data', () => {
+        const mockFn = jest.fn();
+        render(<Component onChange={mockFn} />);
+
+        userEvent.type(screen.getByRole('textbox'), '{ArrowDown}');
+        expect(mockFn).toHaveBeenCalledTimes(0);
+
+        userEvent.type(screen.getByRole('textbox'), '{ArrowUp}');
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+
+    it('should get previous index', () => {
+        render(
+            <TestChangeHandler>
+                <Component data={mockData} />
+            </TestChangeHandler>
+        );
+
+        userEvent.type(screen.getByRole('textbox'), '{ArrowUp}');
+        expect(screen.getByTestId('test-change-handler-root')).toHaveTextContent('Dolor');
+
+        userEvent.type(screen.getByRole('textbox'), '{ArrowUp}');
+        expect(screen.getByTestId('test-change-handler-root')).toHaveTextContent('Ipsum');
+
+        userEvent.type(screen.getByRole('textbox'), '{ArrowUp}');
+        expect(screen.getByTestId('test-change-handler-root')).toHaveTextContent('Lorem');
+
+        userEvent.type(screen.getByRole('textbox'), '{ArrowUp}');
+        expect(screen.getByTestId('test-change-handler-root')).toHaveTextContent('Dolor');
+    });
+
+    it('should get next index', () => {
+        render(
+            <TestChangeHandler>
+                <Component data={mockData} />
+            </TestChangeHandler>
+        );
+
+        userEvent.type(screen.getByRole('textbox'), '{ArrowDown}');
+        expect(screen.getByTestId('test-change-handler-root')).toHaveTextContent('Lorem');
+
+        userEvent.type(screen.getByRole('textbox'), '{ArrowDown}');
+        expect(screen.getByTestId('test-change-handler-root')).toHaveTextContent('Ipsum');
+
+        userEvent.type(screen.getByRole('textbox'), '{ArrowDown}');
+        expect(screen.getByTestId('test-change-handler-root')).toHaveTextContent('Dolor');
+
+        userEvent.type(screen.getByRole('textbox'), '{ArrowDown}');
+        expect(screen.getByTestId('test-change-handler-root')).toHaveTextContent('Lorem');
+    });
+});

package/src/hooks/useAccessiblePanel.ts

@@ -0,0 +1,74 @@
+import type { KeyboardEvent, KeyboardEventHandler } from 'react';
+
+import { parseNumeric } from '@sqrzro/utility';
+
+import type { SimpleEventHandler, SimpleObject } from '@utility/interfaces';
+
+interface UseAccessiblePanelArgs {
+    data?: SimpleObject[];
+    name: string;
+    onChange?: SimpleEventHandler;
+    value?: (number | string)[] | number | string;
+}
+
+interface UseAccessiblePanelReturn<T> {
+    handleKeyboard: KeyboardEventHandler<T>;
+}
+
+const getPreviousIndex = (index: number, limit: number): number => {
+    if (index <= 0) {
+        return limit - 1;
+    }
+    return index - 1;
+};
+
+const getNextIndex = (index: number, limit: number): number => {
+    if (index + 1 >= limit) {
+        return 0;
+    }
+    return index + 1;
+};
+
+const handleChange = <T>(
+    event: KeyboardEvent<T>,
+    name: string,
+    index: number,
+    data?: SimpleObject[],
+    onChange?: SimpleEventHandler
+): void => {
+    event.preventDefault();
+
+    if (!onChange || !data || !data[index]) {
+        return;
+    }
+
+    onChange({
+        item: data[index],
+        target: { name, value: data[index].id },
+    });
+};
+
+const useAccessiblePanel = <T = HTMLButtonElement | HTMLInputElement>({
+    data,
+    name,
+    onChange,
+    value,
+}: UseAccessiblePanelArgs): UseAccessiblePanelReturn<T> => {
+    const handleKeyboard = (event: KeyboardEvent<T>): void => {
+        const activeIndex = (data || []).findIndex((item) => parseNumeric(item.id) === value);
+
+        if (event.key === 'ArrowDown') {
+            const newIndex = getNextIndex(activeIndex, (data || []).length);
+            handleChange<T>(event, name, newIndex, data, onChange);
+        }
+
+        if (event.key === 'ArrowUp') {
+            const newIndex = getPreviousIndex(activeIndex, (data || []).length);
+            handleChange<T>(event, name, newIndex, data, onChange);
+        }
+    };
+
+    return { handleKeyboard };
+};
+
+export default useAccessiblePanel;

package/src/hooks/useAppContext.ts

@@ -0,0 +1,77 @@
+import { createContext, createElement, useContext } from 'react';
+import merge from 'deepmerge';
+import PropTypes from 'prop-types';
+
+import type { NavigationObject } from '@utility/interfaces';
+
+export interface Me {
+    name: string;
+    permissions?: string[];
+}
+
+interface AppContextObject {
+    auth: {
+        identifier?: string;
+        identifierLabel?: string;
+        tfa?: boolean;
+    } | null;
+    Logo: React.ComponentType<{ isReverse?: boolean }> | null;
+    me: Me | null;
+    name: string;
+    navigation: (NavigationObject | string)[];
+    paths: { api?: string; app?: string };
+    style: { brand?: string; layout?: string } | null;
+}
+
+export interface Config extends Partial<AppContextObject> {
+    name: AppContextObject['name'];
+}
+
+const DEFAULTS: AppContextObject = {
+    auth: {},
+    Logo: null,
+    me: null,
+    name: '',
+    navigation: [],
+    paths: {},
+    style: {},
+};
+
+const AppContext = createContext(DEFAULTS);
+
+interface AppContextProviderProps {
+    children: React.ReactNode;
+    value: Config;
+}
+
+export const AppContextProvider: React.FunctionComponent<AppContextProviderProps> = ({
+    children,
+    value,
+}) => createElement(AppContext.Provider, { value: merge(DEFAULTS, value) }, children);
+
+AppContextProvider.propTypes = {
+    children: PropTypes.node.isRequired,
+    value: PropTypes.shape({
+        auth: PropTypes.shape({}),
+        Logo: PropTypes.func,
+        me: PropTypes.shape({
+            name: PropTypes.string.isRequired,
+        }).isRequired,
+        name: PropTypes.string.isRequired,
+        navigation: PropTypes.arrayOf(
+            PropTypes.oneOfType([
+                PropTypes.shape({
+                    label: PropTypes.string.isRequired,
+                    to: PropTypes.string,
+                }).isRequired,
+                PropTypes.string.isRequired,
+            ]).isRequired
+        ).isRequired,
+        paths: PropTypes.shape({}).isRequired,
+        style: PropTypes.shape({}),
+    }).isRequired,
+};
+
+const useAppContext = (): AppContextObject => useContext(AppContext);
+
+export default useAppContext;

package/src/hooks/useClickOutside.ts

@@ -0,0 +1,49 @@
+import { useEffect, useRef, useState } from 'react';
+import type { MutableRefObject } from 'react';
+
+const useClickOutside = (): [
+    boolean,
+    (bool: boolean) => void,
+    MutableRefObject<HTMLDivElement | null>
+] => {
+    let mounted = true;
+
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const node = useRef<HTMLDivElement>(null);
+
+    const handleClickOutside = (event: Event): void => {
+        if (node.current?.contains(event.target as HTMLDivElement)) {
+            return;
+        }
+        setTimeout(() => {
+            if (mounted) {
+                setIsOpen(false);
+            }
+        });
+    };
+
+    const handleEscapeKey = (event: KeyboardEvent): void => {
+        if (event.key === 'Escape') {
+            setTimeout(() => {
+                if (mounted) {
+                    setIsOpen(false);
+                }
+            });
+        }
+    };
+
+    useEffect(() => {
+        document.addEventListener('click', handleClickOutside);
+        document.addEventListener('keydown', handleEscapeKey);
+
+        return (): void => {
+            mounted = false;
+            document.removeEventListener('click', handleClickOutside);
+            document.removeEventListener('keydown', handleEscapeKey);
+        };
+    }, []);
+
+    return [isOpen, (bool: boolean): void => setIsOpen(bool), node];
+};
+
+export default useClickOutside;

package/src/hooks/useConnectedList.ts

@@ -0,0 +1,26 @@
+import { createElement, useCallback, useState } from 'react';
+
+import ConnectedList from '@components/ConnectedList';
+import type { ConnectedRepeaterElementProps, ListFunctions } from '@core/ConnectedRepeater';
+
+interface UseConnectedListReturn extends ListFunctions {
+    ConnectedList: React.FunctionComponent;
+}
+
+const useConnectedList = (): UseConnectedListReturn => {
+    const [listFunctions, setListFunctions] = useState<ListFunctions>({ reloadList: () => null });
+
+    return {
+        ConnectedList: useCallback(
+            (props) =>
+                createElement(ConnectedList, {
+                    ...props,
+                    setFunctions: (fnc: ListFunctions) => setListFunctions(fnc),
+                } as ConnectedRepeaterElementProps),
+            []
+        ),
+        reloadList: listFunctions.reloadList,
+    };
+};
+
+export default useConnectedList;

package/src/hooks/useFilters.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+
+import { parseSearch } from '@sqrzro/utility';
+
+import FilterService from '@services/FilterService';
+import type { FilterMap, FilterOptions } from '@services/FilterService';
+
+const useFilters = (options?: FilterOptions): [FilterMap, (data: FilterMap) => void] => {
+    const router = useRouter();
+    const [filters, setFilters] = useState<FilterMap>(
+        FilterService.parseQuery(parseSearch(window.location.search))
+    );
+
+    useEffect(() => {
+        setFilters(FilterService.parseQuery(parseSearch(window.location.search), options));
+    }, [window.location.search]);
+
+    const applyFilters = (data: FilterMap): void => {
+        void router.push(FilterService.makeUrl(data));
+    };
+
+    return [filters, applyFilters];
+};
+
+export default useFilters;

package/src/hooks/useForm.spec.ts

@@ -0,0 +1,126 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { waitFor } from '@testing-library/react';
+
+import { ApiService } from '@sqrzro/utility';
+
+import ToastService from '@services/ToastService';
+
+import useForm from './useForm';
+
+jest.mock('@services/ToastService', () => ({
+    success: jest.fn(),
+    error: jest.fn(),
+}));
+
+const mockErrorResponse = {
+    data: { errors: {} },
+    headers: new Headers(),
+    status: 422,
+    url: 'lorem',
+};
+
+describe('useForm', () => {
+    beforeEach(() => {
+        (ToastService.error as jest.Mock).mockClear();
+    });
+
+    it('should handle default submit success', async () => {
+        // @ts-expect-error APIResponse not being available
+        jest.spyOn(ApiService, 'request').mockImplementation(() => ({
+            data: { token: 'lorem' },
+        }));
+
+        const mockFn = jest.fn();
+        const { result } = renderHook(() => useForm({ url: 'lorem', formData: {} }));
+
+        await waitFor(() => {
+            result.current.handleSubmit();
+        });
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+
+    it('should handle submit success', async () => {
+        // @ts-expect-error APIResponse not being available
+        jest.spyOn(ApiService, 'request').mockImplementation(() => ({
+            data: { token: 'lorem' },
+        }));
+
+        const mockFn = jest.fn();
+        const { result } = renderHook(() =>
+            useForm({ url: 'lorem', formData: {}, onSubmitSuccess: mockFn })
+        );
+
+        await waitFor(() => {
+            result.current.handleSubmit();
+        });
+
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle default submit error', async () => {
+        jest.spyOn(ApiService, 'request').mockImplementation(() => {
+            throw new Error('lorem');
+        });
+
+        const mockFn = jest.fn();
+        const { result } = renderHook(() => useForm({ url: 'lorem', formData: {} }));
+
+        await waitFor(() => {
+            result.current.handleSubmit();
+        });
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+
+    it('should handle submit error', async () => {
+        jest.spyOn(ApiService, 'request').mockImplementation(() => {
+            throw new Error('lorem');
+        });
+
+        const mockFn = jest.fn();
+        const { result } = renderHook(() =>
+            useForm({ url: 'lorem', formData: {}, onSubmitError: mockFn })
+        );
+
+        await waitFor(() => {
+            result.current.handleSubmit();
+        });
+
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should toast error message', async () => {
+        jest.spyOn(ApiService, 'request').mockImplementation(() => {
+            throw new ApiService.ApiValidationError(mockErrorResponse);
+        });
+
+        const { result } = renderHook(() =>
+            useForm({ url: 'lorem', formData: {}, errorMessage: 'error lorem' })
+        );
+
+        await waitFor(() => {
+            result.current.handleSubmit();
+        });
+
+        expect(ToastService.error).toHaveBeenCalledTimes(1);
+        expect(ToastService.error).toHaveBeenLastCalledWith('error lorem');
+    });
+
+    it('should toast with default error message', async () => {
+        jest.spyOn(ApiService, 'request').mockImplementation(() => {
+            throw new ApiService.ApiValidationError(mockErrorResponse);
+        });
+
+        const { result } = renderHook(() => useForm({ url: 'lorem', formData: {} }));
+
+        await waitFor(() => {
+            result.current.handleSubmit();
+        });
+
+        expect(ToastService.error).toHaveBeenCalledTimes(1);
+        expect(ToastService.error).toHaveBeenLastCalledWith(
+            'Could not save. Please check the form.'
+        );
+    });
+});

package/src/hooks/useForm.ts

@@ -0,0 +1,99 @@
+import { useState } from 'react';
+
+import { ApiService } from '@sqrzro/utility';
+
+import ToastService from '@services/ToastService';
+import type { InputValue } from '@utility/interfaces';
+
+interface ApiResponseObject<T = Record<string, unknown>> {
+    data: T & { errors?: Record<string, [string]> };
+    headers: Headers;
+    status: number;
+    url: string;
+}
+
+interface UseFormArgs {
+    errorMessage?: string | false;
+    formData: Record<string, InputValue>;
+    method?: 'get' | 'patch' | 'post';
+    successMessage?: string | false;
+    url: string;
+    onSubmitSuccess?: (response: ApiResponseObject) => void;
+    onSubmitError?: (err?: Error) => void;
+    transformRequest?: (data: Record<string, InputValue>) => Record<string, InputValue>;
+}
+
+interface UseFormReturn {
+    errors: Record<string, string>;
+    isLoading: boolean;
+    handleSubmit: () => void;
+}
+
+const useForm = ({
+    errorMessage,
+    formData,
+    method = 'post',
+    successMessage,
+    url,
+    onSubmitSuccess = (): void => void 0,
+    onSubmitError = (): void => void 0,
+    transformRequest = (data): Record<string, InputValue> => data,
+}: UseFormArgs): UseFormReturn => {
+    const [errors, setErrors] = useState<Record<string, string>>({});
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+
+    const handleSubmitSuccess = (response: ApiResponseObject): void => {
+        setIsLoading(false);
+
+        if (successMessage !== false) {
+            ToastService.success(successMessage || 'Saved successfully');
+        }
+        onSubmitSuccess(response);
+    };
+
+    const handleSubmitError = (error: unknown): void => {
+        /*
+         * This will almost certainly never happen in reality, but because the catch block in the
+         * handleSubmit function can only expect an unknown type, we can check it's an Error here.
+         * This can be safely ignored by coverage.
+         */
+        /* istanbul ignore next */
+        if (!(error instanceof Error)) {
+            return;
+        }
+
+        setIsLoading(false);
+        onSubmitError(error);
+
+        /*
+         * If the `err` is not a `ApiValidationError`, `getErrorsFromResponse` will throw it again.
+         * For this reason, it needs to be in a try/catch block, and a general error message should
+         * be toasted if the error was not validation.
+         */
+
+        try {
+            setErrors(ApiService.getErrorsFromResponse(error));
+            if (errorMessage !== false) {
+                ToastService.error(errorMessage || 'Could not save. Please check the form.');
+            }
+        } catch (err) {
+            ToastService.error("Something's gone wrong. Please try again.");
+        }
+    };
+
+    const handleSubmit = async (): Promise<void> => {
+        setErrors({});
+        setIsLoading(true);
+
+        try {
+            const response = await ApiService.request(method, url, transformRequest(formData));
+            handleSubmitSuccess(response);
+        } catch (err: unknown) {
+            handleSubmitError(err);
+        }
+    };
+
+    return { errors, isLoading, handleSubmit };
+};
+
+export default useForm;

package/src/hooks/useFormData.spec.ts

@@ -0,0 +1,40 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { waitFor } from '@testing-library/react';
+
+import useFormData from './useFormData';
+
+describe('useFormData', () => {
+    it('should have fields', () => {
+        const { result } = renderHook(() => useFormData({ data: { lorem: 1 }, fields: ['lorem'] }));
+        expect(result.current[0]).toEqual({ lorem: 1 });
+    });
+
+    it('should handle no fields', () => {
+        const { result } = renderHook(() => useFormData({ data: { lorem: 1 } }));
+        expect(result.current[0]).toEqual({});
+    });
+
+    it('should have defaults', () => {
+        const { result } = renderHook(() =>
+            useFormData({ defaults: { lorem: 1 }, data: { lorem: 2 }, fields: ['lorem'] })
+        );
+        expect(result.current[0]).toEqual({ lorem: 2 });
+    });
+
+    it('should handle only defaults', () => {
+        const { result } = renderHook(() =>
+            useFormData({ defaults: { lorem: 1 }, fields: ['lorem'] })
+        );
+        expect(result.current[0]).toEqual({ lorem: 1 });
+    });
+
+    it('should set data', async () => {
+        const { result } = renderHook(() => useFormData({ data: { lorem: 1 }, fields: ['lorem'] }));
+
+        await waitFor(() => {
+            result.current[1]('lorem', 2);
+        });
+
+        expect(result.current[0]).toEqual({ lorem: 2 });
+    });
+});

package/src/hooks/useFormData.ts

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+
+import type { InputValue } from '@utility/interfaces';
+
+import { getFromObject } from '@sqrzro/utility';
+
+export interface FormDataArgs {
+    data?: Record<string, InputValue>;
+    defaults?: Record<string, InputValue>;
+    fields?: string[];
+}
+
+export type FormDataReturn = [Record<string, InputValue>, (key: string, value: InputValue) => void];
+
+const useFormData = ({ data, defaults, fields }: FormDataArgs): FormDataReturn => {
+    const [fData, setFData] = useState(
+        getFromObject({ ...(defaults || {}), ...(data || {}) }, fields || [])
+    );
+
+    const setFormData = (key: string, value: InputValue): void => {
+        setFData({ ...fData, [key]: value });
+    };
+
+    return [fData, setFormData];
+};
+
+export default useFormData;