@sqrzro/admin 1.0.0-beta.1

package/src/core/ConnectedRepeater/index.tsx

@@ -0,0 +1,248 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import React, { Fragment, useEffect, useState } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import PropTypes from 'prop-types';
+
+import { ApiService } from '@sqrzro/utility';
+
+import SummaryList from '@components/SummaryList';
+import type { SummaryListObject, SummaryListValue } from '@core/SummaryListItem';
+import ConnectedRepeaterComponent from '@core/ConnectedRepeaterComponent';
+import type { ConnectedRepeaterRenderProps } from '@core/ConnectedRepeaterComponent';
+import Filters from '@core/Filters';
+import type { Columns } from '@core/TableCell';
+
+import useFilters from '@hooks/useFilters';
+
+import type { FilterField } from '@filters/interfaces';
+import type { PaginationObject, Remote, SimpleAction, Transformer } from '@utility/interfaces';
+
+import type { FilterMap } from '@services/FilterService';
+
+interface ResponseData {
+    data?: Record<string, unknown>[];
+    totals?: Record<string, number> | null;
+    meta?: { current_page: string; last_page: string };
+    summary?: Record<string, string>;
+}
+
+export interface ListFunctions {
+    reloadList: () => void;
+}
+
+export interface ConnectedRepeaterElementProps {
+    actions?: SimpleAction[];
+    columns?: Columns;
+    filters?: FilterField[];
+    hasSearch?: boolean;
+    hasSummaryToggle?: boolean;
+    isDisabled?: boolean;
+    remote: Remote;
+    setFunctions?: (functions: ListFunctions) => void;
+    summary?: SummaryListObject[];
+    transformer?: Transformer;
+}
+
+interface ConnectedRepeaterProps extends ConnectedRepeaterElementProps {
+    render: (props: ConnectedRepeaterRenderProps) => React.ReactElement;
+}
+
+const parseRemote = (remote: Remote, filterData: FilterMap): Remote => {
+    if (typeof remote === 'string') {
+        return [remote, Object.fromEntries(filterData)];
+    }
+    return [remote[0], { ...remote[1], ...Object.fromEntries(filterData) }];
+};
+
+const transformPagination = (data: {
+    current_page: string;
+    last_page: string;
+}): PaginationObject => ({
+    activePage: parseInt(data.current_page, 10),
+    pageCount: parseInt(data.last_page, 10),
+});
+
+/**
+ * Note: There are two ways the  data for `<SummaryList>` can be defined - either just passed
+ * through as a normal `SummaryListItem` or via a `Record<string, string>` from the remote
+ * response. If that's the case, the Record needs to be converted to a SummaryListItem, using the
+ * `value` of the Record as the key. For example, take a remote response with a `summary` object of
+ * the following:
+ *
+ * ```
+ * { lorem: 'ipsum' }
+ * ```
+ *
+ * In this instance, you would pass a `summary` prop like so:
+ *
+ * ```
+ * { label: 'Lorem', value: 'lorem' }
+ * ```
+ *
+ * The parser function would then take the value of 'lorem' and replace it with the remote value
+ * with the matching key, which would leave you with the following:
+ *
+ * ```
+ * { label: 'Lorem', value: 'ipsum' }
+ * ```
+ */
+
+const parseSummaryValue = (
+    value: SummaryListValue,
+    remoteSummary: Record<string, string>
+): SummaryListValue => {
+    if (typeof value === 'string' || typeof value === 'number') {
+        return remoteSummary[value];
+    }
+
+    if (typeof value.key === 'undefined') {
+        return '';
+    }
+
+    return { ...value, key: remoteSummary[value.key] };
+};
+
+const parseSummary = (
+    summary: SummaryListObject[],
+    remoteSummary: Record<string, string>
+): SummaryListObject[] =>
+    summary.map((item) => ({ ...item, value: parseSummaryValue(item.value, remoteSummary) }));
+
+const ConnectedRepeater: React.FunctionComponent<ConnectedRepeaterProps> = ({
+    actions,
+    columns,
+    filters,
+    hasSearch,
+    hasSummaryToggle,
+    isDisabled,
+    remote,
+    render,
+    setFunctions,
+    summary,
+    transformer,
+}) => {
+    const [filterData] = useFilters();
+
+    const [data, setData] = useState<Record<string, unknown>[]>();
+    const [pagination, setPagination] = useState<PaginationObject>();
+    const [totals, setTotals] = useState<Record<string, number> | null>();
+
+    const [error, setError] = useState('');
+
+    const [isLoading, setIsLoading] = useState(true);
+    const [isRefreshing, setIsRefreshing] = useState(true);
+
+    const [isSummaryOpen, setIsSummaryOpen] = useState(false);
+    const [remoteSummary, setRemoteSummary] = useState<SummaryListObject[]>([]);
+
+    const toggleIsSummaryOpen = (): void => setIsSummaryOpen(!isSummaryOpen);
+
+    const getData = async (): Promise<void> => {
+        setIsRefreshing(true);
+
+        if (summary) {
+            setRemoteSummary(summary.map((item) => ({ ...item, value: '-' })));
+        }
+
+        try {
+            const response = await ApiService.get<ResponseData>(parseRemote(remote, filterData));
+            setIsLoading(false);
+            setIsRefreshing(false);
+
+            setData(response.data.data);
+            setTotals(response.data.totals);
+
+            if (response.data.summary) {
+                setRemoteSummary(parseSummary(summary || [], response.data.summary));
+            }
+
+            if (response.data.meta) {
+                setPagination(transformPagination(response.data.meta));
+            }
+        } catch (err) {
+            if (err instanceof Error) {
+                setError(err.toString());
+            }
+
+            setIsLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (setFunctions) {
+            const functions: ListFunctions = { reloadList: async () => getData() };
+            setFunctions(functions);
+        }
+    }, [filterData]);
+
+    useDeepCompareEffect(() => {
+        void getData();
+    }, [filterData]);
+
+    const summaryAction = {
+        label: isSummaryOpen ? 'Hide Summary' : 'Show Summary',
+        onClick: toggleIsSummaryOpen,
+    };
+
+    const parsedActions =
+        summary && hasSummaryToggle ? [...(actions || []), summaryAction] : actions;
+
+    return (
+        <Fragment>
+            {(hasSearch || filters?.length) && (
+                <Filters
+                    actions={parsedActions}
+                    fields={filters}
+                    hasSearch={hasSearch}
+                    isDisabled={!data || !data.length}
+                />
+            )}
+            {summary && (!hasSummaryToggle || (hasSummaryToggle && isSummaryOpen)) ? (
+                <SummaryList data={remoteSummary} isDisabled={isDisabled || isRefreshing} />
+            ) : null}
+            <ConnectedRepeaterComponent
+                columns={columns}
+                data={data}
+                error={error}
+                isDisabled={isDisabled || isRefreshing}
+                isLoading={isLoading}
+                pagination={pagination}
+                render={render}
+                totals={totals}
+                transformer={transformer}
+            />
+        </Fragment>
+    );
+};
+
+ConnectedRepeater.propTypes = {
+    render: PropTypes.func.isRequired,
+    actions: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            onClick: PropTypes.func.isRequired,
+        }).isRequired
+    ),
+    columns: PropTypes.shape({}),
+    filters: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            name: PropTypes.string.isRequired,
+            renderField: PropTypes.func.isRequired,
+        }).isRequired
+    ),
+    hasSearch: PropTypes.bool,
+    hasSummaryToggle: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    setFunctions: PropTypes.func,
+    summary: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.shape({})])
+                .isRequired,
+        }).isRequired
+    ),
+};
+
+export default ConnectedRepeater;

package/src/core/ConnectedRepeaterComponent/index.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import EmptyMessage from '@core/EmptyMessage';
+import ErrorMessage from '@core/ErrorMessage';
+import Loader from '@core/Loader';
+
+import type { Columns } from '@core/TableCell';
+import type { PaginationObject, Transformer } from '@utility/interfaces';
+
+export interface ConnectedRepeaterRenderProps {
+    columns?: Columns;
+    data?: Record<string, unknown>[];
+    isDisabled?: boolean;
+    pagination?: PaginationObject;
+    totals?: Record<string, number> | null;
+    transformer?: Transformer;
+}
+
+interface ConnectedRepeaterComponentProps {
+    columns?: Columns;
+    data?: Record<string, unknown>[];
+    error?: string;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    pagination?: PaginationObject;
+    render: (props: ConnectedRepeaterRenderProps) => React.ReactElement;
+    totals?: Record<string, number> | null;
+    transformer?: Transformer;
+}
+
+const ConnectedRepeaterComponent: React.FunctionComponent<ConnectedRepeaterComponentProps> = ({
+    columns,
+    data,
+    error,
+    isDisabled,
+    isLoading,
+    pagination,
+    render,
+    totals,
+    transformer,
+}) => {
+    if (error) {
+        return <ErrorMessage>{error}</ErrorMessage>;
+    }
+
+    if (isLoading) {
+        return <Loader />;
+    }
+
+    if (!data || !data.length) {
+        return <EmptyMessage />;
+    }
+
+    const props: ConnectedRepeaterRenderProps = {
+        columns,
+        data,
+        isDisabled,
+        pagination,
+        totals,
+        transformer,
+    };
+
+    return render(props);
+};
+
+export default ConnectedRepeaterComponent;

package/src/core/Container/Container.module.css

@@ -0,0 +1,12 @@
+.root {
+    padding: 3rem clamp(1rem, 2.5vw, 3rem);
+}
+
+.rootTopbar {
+    margin: 0 auto;
+    max-width: 110rem;
+}
+
+.rootTopbar.rootIsWide {
+    max-width: none;
+}

package/src/core/Container/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import useLayout from '@hooks/useLayout';
+
+import styles from './Container.module.css';
+
+interface ContainerProps {
+    children: React.ReactNode;
+    isWide?: boolean;
+}
+
+const Container: React.FunctionComponent<ContainerProps> = ({ children, isWide }) => {
+    const { applyLayoutClassName } = useLayout();
+
+    return (
+        <div
+            className={classNames(
+                styles.root,
+                isWide && styles.rootIsWide,
+                applyLayoutClassName(styles)
+            )}
+        >
+            {children}
+        </div>
+    );
+};
+
+Container.propTypes = {
+    children: PropTypes.node.isRequired,
+    isWide: PropTypes.bool,
+};
+
+export default Container;

package/src/core/DropdownPanel/DropdownPanel.module.css

@@ -0,0 +1,68 @@
+.item {
+    align-items: center;
+    border-top: .1rem var(--clr-grey200) solid;
+    color: var(--clr-grey700);
+    display: flex;
+    overflow: hidden;
+    padding: 1.3rem;
+    position: relative;
+
+    &:first-child {
+        border-top: 0;
+    }
+}
+
+.itemIsActive {
+    background-color: var(--clr-primary10);
+
+    &::before {
+        border: .4rem var(--clr-white) solid;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+}
+
+.itemIsDisabled {
+    opacity: .3;
+    pointer-events: none;
+}
+
+.icon {
+    padding-right: 1rem;
+}
+
+.title {
+    display: block;
+    font-size: var(--fs-sml);
+    padding-bottom: .1rem;
+}
+
+.meta {
+    color: var(--clr-grey500);
+    display: block;
+    font-size: var(--fs-xsml);
+    height: 2rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.control {
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+    height: 100%;
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    text-indent: -999em;
+    width: 100%;
+
+    &:focus {
+        outline: none;
+    }
+}

package/src/core/DropdownPanel/index.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import ChkRadIcon from '@core/ChkRadIcon';
+import type { SimpleEvent, SimpleEventHandler, SimpleObject } from '@utility/interfaces';
+
+import styles from './DropdownPanel.module.css';
+
+export interface DropdownItem extends SimpleObject {
+    isDisabled?: boolean;
+    meta?: string;
+}
+
+interface DropdownEvent extends SimpleEvent {
+    item: DropdownItem;
+}
+
+interface DropdownPanelProps {
+    data: DropdownItem[];
+    isMultiple?: boolean;
+    name: string;
+    onChange: SimpleEventHandler<boolean | number | string | null, DropdownEvent>;
+    value?: (number | string)[] | number | string;
+}
+
+const isActive = (id: number | string, value?: (number | string)[] | number | string): boolean => {
+    if (Array.isArray(value)) {
+        return value.includes(id);
+    }
+    return value === id;
+};
+
+const DropdownPanel: React.FunctionComponent<DropdownPanelProps> = ({
+    data,
+    isMultiple,
+    name,
+    onChange,
+    value,
+}) => (
+    <ul role="listbox">
+        {data.map((item: DropdownItem) => (
+            <li
+                key={item.id}
+                className={classNames(
+                    styles.item,
+                    isActive(item.id, value) && styles.itemIsActive,
+                    item.isDisabled && styles.itemIsDisabled
+                )}
+                role="option"
+            >
+                {isMultiple && (
+                    <span className={styles.icon}>
+                        <ChkRadIcon isChecked={isActive(item.id, value)} />
+                    </span>
+                )}
+                <span className={styles.content}>
+                    <span className={styles.title}>{item.name}</span>
+                    {item.meta && <small className={styles.meta}>{item.meta}</small>}
+                </span>
+                <button
+                    className={styles.control}
+                    data-testid={`dropdown-panel-control-${item.id}`}
+                    onClick={(): void => onChange({ item, target: { name, value: item.id } })}
+                    tabIndex={-1}
+                    type="button"
+                >
+                    Select
+                </button>
+            </li>
+        ))}
+    </ul>
+);
+
+DropdownPanel.propTypes = {
+    data: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+            name: PropTypes.string.isRequired,
+        }).isRequired
+    ).isRequired,
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    isMultiple: PropTypes.bool,
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired),
+    ]),
+};
+
+export default DropdownPanel;

package/src/core/EmptyMessage/EmptyMessage.module.css

@@ -0,0 +1,18 @@
+.root {
+    align-items: center;
+    color: var(--clr-grey600);
+    display: flex;
+    flex-direction: column;
+    height: 20rem;
+    justify-content: center;
+}
+
+.title {
+    font-size: var(--fs-xlrg);
+    font-weight: var(--fs-body);
+    margin-bottom: 1rem;
+}
+
+.description {
+    margin-bottom: 3rem;
+}

package/src/core/EmptyMessage/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './EmptyMessage.module.css';
+
+interface EmptyMessageProps {
+    description?: string;
+    title?: string;
+}
+
+const DEFAULT_TITLE = 'No results found';
+const DEFAULT_DESCRIPTION = 'If you think this is an error, please contact the site administrator';
+
+/**
+ * By default, `EmptyMessage` simply displays a message to the user when no results have been found
+ * in a particular list. However, the `title` and `description` can be customised, allowing the
+ * component to be used for any situation where a standout message is required.
+ */
+const EmptyMessage: React.FunctionComponent<EmptyMessageProps> = ({ description, title }) => (
+    <section className={styles.root}>
+        <h1 className={styles.title}>{title || DEFAULT_TITLE}</h1>
+        <p className={styles.description}>{description || DEFAULT_DESCRIPTION}</p>
+    </section>
+);
+
+EmptyMessage.propTypes = {
+    description: PropTypes.string,
+    title: PropTypes.string,
+};
+
+export default EmptyMessage;

package/src/core/ErrorBoundary/ErrorBoundary.spec.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import ErrorBoundary from './index';
+
+describe('ErrorBoundary', () => {
+    it('should render if no children', () => {
+        render(
+            <ErrorBoundary>
+                <div>Lorem</div>
+            </ErrorBoundary>
+        );
+
+        expect(screen.getByText('Lorem')).toBeInTheDocument();
+    });
+
+    it('should render and error', () => {
+        const spy = jest.spyOn(console, 'error').mockImplementation(() => null);
+
+        const ErroringComponent: React.FunctionComponent = () => {
+            throw new Error('Lorem Ipsum');
+        };
+
+        render(
+            <ErrorBoundary>
+                <ErroringComponent />
+            </ErrorBoundary>
+        );
+
+        expect(screen.getByText('Error: Lorem Ipsum')).toBeInTheDocument();
+        spy.mockRestore();
+    });
+});

package/src/core/ErrorBoundary/index.tsx

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import ErrorMessage from '@core/ErrorMessage';
+
+interface ErrorBoundaryState {
+    error: Error | null;
+}
+
+class ErrorBoundary extends Component<Record<string, unknown>, ErrorBoundaryState> {
+    public static propTypes = {
+        children: PropTypes.node.isRequired,
+    };
+
+    public constructor(props: Record<string, unknown>) {
+        super(props);
+        this.state = { error: null };
+    }
+
+    public static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+        return { error };
+    }
+
+    /* eslint-disable class-methods-use-this, no-console */
+    public shouldComponentUpdate(): boolean {
+        return true;
+    }
+    /* eslint-enable */
+
+    public render(): React.ReactNode {
+        const { error } = this.state;
+        const { children } = this.props;
+
+        if (error) {
+            return <ErrorMessage>{error.toString()}</ErrorMessage>;
+        }
+
+        return children;
+    }
+}
+
+export default ErrorBoundary;

package/src/core/ErrorMessage/ErrorMessage.module.css

@@ -0,0 +1,25 @@
+.root {
+    color: var(--clr-error);
+}
+
+.rootIsScene {
+    padding: 3rem;
+}
+
+.title {
+    font-size: var(--fs-xlrg);
+    font-weight: var(--fw-bold);
+    margin-bottom: 1rem;
+}
+
+.description {
+    margin-bottom: 3rem;
+}
+
+.descriptionIsMini {
+    font-size: var(--fs-xsml);
+}
+
+.meta {
+    font-size: var(--fs-sml);
+}