@sqrzro/admin 1.0.0-beta.1

package/src/core/ErrorMessage/ErrorMessage.spec.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import ErrorMessage from './index';
+
+describe('ErrorMessage', () => {
+    it('should render', () => {
+        render(<ErrorMessage />);
+        expect(screen.getByRole('heading')).toHaveTextContent(/^This doesn't look right\.\.\.$/u);
+    });
+
+    it('should render scene', () => {
+        render(<ErrorMessage isScene />);
+        expect(screen.getByTestId('error-message-root')).toHaveClass('rootIsScene');
+    });
+
+    it('should render mini', () => {
+        render(<ErrorMessage isMini />);
+        expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+    });
+
+    it('should render children', () => {
+        render(<ErrorMessage>Lorem</ErrorMessage>);
+        expect(screen.getByText('Lorem')).toBeInTheDocument();
+    });
+
+    it('should not render children if mini', () => {
+        render(<ErrorMessage isMini>Lorem</ErrorMessage>);
+        expect(screen.queryByText('Lorem')).not.toBeInTheDocument();
+    });
+});

package/src/core/ErrorMessage/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import styles from './ErrorMessage.module.css';
+
+interface ErrorMessageProps {
+    children?: React.ReactNode;
+    isMini?: boolean;
+    isScene?: boolean;
+}
+
+const ErrorMessage: React.FunctionComponent<ErrorMessageProps> = ({
+    children,
+    isMini,
+    isScene,
+}) => (
+    <section
+        className={classNames(styles.root, isScene && styles.rootIsScene)}
+        data-testid="error-message-root"
+    >
+        {!isMini && <h3 className={styles.title}>This doesn&#39;t look right...</h3>}
+        <p className={classNames(styles.description, isMini && styles.descriptionIsMini)}>
+            <strong>Something&#39;s gone wrong.</strong> Please try again. If the problem persists,
+            please talk to your system administrator.
+        </p>
+        {!isMini && children ? <small className={styles.meta}>{children}</small> : null}
+    </section>
+);
+
+ErrorMessage.propTypes = {
+    children: PropTypes.node,
+    isMini: PropTypes.bool,
+    isScene: PropTypes.bool,
+};
+
+export default ErrorMessage;

package/src/core/FilterItem/FilterItem.module.css

@@ -0,0 +1,104 @@
+.root {
+    margin-bottom: 1rem;
+    position: relative;
+    transition: opacity .3s;
+
+    @media (--media-med) {
+        margin-bottom: 0;
+        margin-right: .5rem;
+        max-width: 28rem;
+    }
+}
+
+.rootIsDisabled {
+    opacity: .3;
+    pointer-events: none;
+}
+
+.inner {
+    align-items: center;
+    background-color: var(--clr-white);
+    border: .1rem var(--clr-grey400) solid;
+    border-radius: .3rem;
+    color: var(--clr-grey600);
+    display: flex;
+    fill: var(--clr-grey600);
+    font-size: var(--fs-sml);
+    font-weight: var(--fw-bold);
+    height: var(--input-height);
+    padding: 0 1.5rem 0 1.2rem;
+    position: relative;
+}
+
+.innerHasValue {
+    color: var(--clr-grey800);
+    fill: var(--clr-primary);
+    padding: 0 5.5rem 0 1.2rem;
+}
+
+.icon {
+    min-width: 1.2rem;
+}
+
+.count {
+    background-color: var(--clr-primary);
+    border-radius: 50%;
+    color: var(--clr-white);
+    display: block;
+    height: 1.6rem;
+    font-size: var(--fs-xxsml);
+    font-weight: var(--fw-bold);
+    line-height: 1.6rem;
+    min-width: 1.6rem;
+    text-align: center;
+    width: 1.6rem;
+}
+
+.label {
+    overflow: hidden;
+    padding-left: .8rem;
+    padding-bottom: .1rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.control {
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+    height: 100%;
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    text-indent: 80rem;
+    width: 100%;
+}
+
+.controlHasValue {
+    width: calc(100% - 4rem);
+}
+
+.close {
+    align-items: center;
+    bottom: 0;
+    fill: var(--clr-grey600);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 4rem;
+
+    &::before {
+        border-left: .1rem var(--clr-grey400) solid;
+        bottom: .6rem;
+        content: '';
+        left: 0;
+        position: absolute;
+        top: .6rem;
+    }
+}

package/src/core/FilterItem/index.tsx

@@ -0,0 +1,164 @@
+import React, { memo, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { ApiService } from '@sqrzro/utility';
+
+import CloseButton from '@core/CloseButton';
+import Icon from '@core/Icon';
+import InputPanel from '@core/InputPanel';
+
+import type { FilterField } from '@filters/interfaces';
+
+import useClickOutside from '@hooks/useClickOutside';
+
+import type { Remote, SimpleEvent, SimpleEventHandler, SimpleObject } from '@utility/interfaces';
+
+import styles from './FilterItem.module.css';
+
+interface PanelOptions {
+    isScollable?: boolean;
+    // eslint-disable-next-line @typescript-eslint/sort-type-union-intersection-members
+    size?: 'sm' | 'md' | 'lg';
+}
+
+interface FilterItemProps extends FilterField {
+    onCancel: SimpleEventHandler;
+    onChange: SimpleEventHandler;
+    value?: string[] | string | null;
+}
+
+const DEFAULT_PANEL_OPTIONS: PanelOptions = { size: 'md' };
+
+const parseRemote = (remote: Remote): Remote => {
+    if (Array.isArray(remote)) {
+        return [remote[0], { ...remote[1], simpleview: '1' }];
+    }
+    return [remote, { simpleview: '1' }];
+};
+
+const FilterItem: React.FunctionComponent<FilterItemProps> = ({
+    data,
+    label,
+    name,
+    props,
+    remote,
+    renderField,
+    renderSummary,
+    onCancel,
+    onChange,
+    panelOptions,
+    value,
+}) => {
+    const [isOpen, setIsOpen, node] = useClickOutside();
+    const [isDisabled, setIsDisabled] = useState(Boolean(remote));
+
+    const [remoteData, setRemoteData] = useState<SimpleObject[]>([]);
+    const [panelIndex, setPanelIndex] = useState(0);
+
+    const toggleIsOpen = (): void => setIsOpen(!isOpen);
+
+    const handleChange = (event: SimpleEvent): void => {
+        if (event.target.value !== '[internal]') {
+            onChange(event);
+
+            if (!props?.isMultiple) {
+                setIsOpen(false);
+            }
+        }
+    };
+
+    const handleCancel = (): void => {
+        onCancel({ target: { name, value: name } });
+
+        setPanelIndex(0);
+        setIsOpen(false);
+    };
+
+    const handleRemote = async (): Promise<void> => {
+        if (!remote) {
+            return;
+        }
+
+        const response = await ApiService.get<{ data: SimpleObject[] }>(parseRemote(remote));
+        setRemoteData(response.data.data);
+        setIsDisabled(false);
+    };
+
+    useEffect(() => {
+        void handleRemote();
+    }, []);
+
+    const summaryArgs = {
+        data: remote ? remoteData : data,
+        props,
+        value,
+    };
+
+    const summary = renderSummary ? renderSummary(summaryArgs) : value;
+
+    const field = renderField({
+        data: remote ? remoteData : data,
+        extraProps: props,
+        name,
+        onChange: handleChange,
+        panelIndex,
+        setPanelIndex,
+        value,
+    });
+
+    const parsedPanelOptions = Array.isArray(panelOptions) ? panelOptions : [panelOptions];
+
+    return (
+        <div
+            ref={node}
+            className={classNames(styles.root, isDisabled && styles.rootIsDisabled)}
+            data-testid="filter-item-root"
+        >
+            <div className={classNames(styles.inner, value && styles.innerHasValue)}>
+                <div className={styles.icon}>
+                    {Array.isArray(value) && value.length > 1 ? (
+                        <span className={styles.count}>{value.length}</span>
+                    ) : (
+                        <Icon icon="filter" size={12} />
+                    )}
+                </div>
+                <div className={styles.label} data-testid="filter-item-label">
+                    {summary || label}
+                </div>
+                {value ? (
+                    <i className={styles.close}>
+                        <CloseButton label="Cancel" onClick={handleCancel} size="sm" />
+                    </i>
+                ) : null}
+                <button
+                    className={classNames(styles.control, value && styles.controlHasValue)}
+                    onClick={toggleIsOpen}
+                    type="button"
+                >
+                    {isOpen ? 'Close' : 'Open'}
+                </button>
+            </div>
+
+            {isOpen && (
+                <InputPanel {...DEFAULT_PANEL_OPTIONS} {...(parsedPanelOptions[panelIndex] || {})}>
+                    {field}
+                </InputPanel>
+            )}
+        </div>
+    );
+};
+
+FilterItem.propTypes = {
+    label: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    renderField: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
+    props: PropTypes.shape({
+        isMultiple: PropTypes.bool,
+    }),
+    renderSummary: PropTypes.func,
+};
+
+export default memo(FilterItem);

package/src/core/Filters/Filters.module.css

@@ -0,0 +1,86 @@
+.root {
+    background-color: var(--clr-white);
+    border: .1rem var(--clr-grey400) solid;
+    border-radius: .5rem;
+    margin-bottom: 3rem;
+    padding: 1rem;
+
+    @media (--media-med) {
+        background-color: transparent;
+        border-color: transparent;
+        padding: 0;
+    }
+}
+
+.control {
+    @media (--media-med) {
+        display: none;
+    }
+}
+
+.controlIsOpen {
+    display: none;
+}
+
+.content {
+    display: none;
+    position: relative;
+    z-index: 1;
+
+    @media (--media-med) {
+        display: flex;
+        justify-content: space-between;
+    }
+}
+
+.contentIsOpen {
+    display: block;
+}
+
+.close {
+    display: none;
+}
+
+.closeIsOpen {
+    display: block;
+
+    @media (--media-med) {
+        display: none;
+    }
+}
+
+.search {
+    margin-bottom: 1rem;
+    min-width: 30rem;
+
+    @media (--media-med) {
+        margin-bottom: 0;
+    }
+}
+
+.section {
+    @media (--media-med) {
+        align-items: center;
+        display: flex;
+    }
+}
+
+.divider {
+    display: none;
+
+    @media (--media-med) {
+        background-color: var(--clr-grey400);
+        display: block;
+        height: 2rem;
+        margin: 0 2rem;
+        width: .1rem;
+    }
+}
+
+.actions {
+    display: flex;
+}
+
+.actions > * {
+    margin-left: 1rem;
+}