@sqrzro/admin 1.0.0-beta.1

package/src/core/ListItem/index.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ListItemActions from '@core/ListItemActions';
+import ListItemMetaItem from '@core/ListItemMetaItem';
+import type { ValueObject } from '@core/ListItemMetaItem';
+import ListItemTitle from '@core/ListItemTitle';
+
+import Panel from '@core/Panel';
+
+import type { TransformedObject } from '@utility/interfaces';
+
+import styles from './ListItem.module.css';
+
+interface ListItemProps extends TransformedObject {
+    $shouldPreloadTitle?: boolean;
+    content?: string;
+    meta?: (React.ReactElement | ValueObject | string | null | undefined)[];
+    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLHeadingElement>;
+    secondary?: { title: string };
+    title?: string;
+    to?: string;
+}
+
+const ListItem: React.FunctionComponent<ListItemProps> = ({
+    $actions,
+    $original,
+    $shouldPreloadTitle,
+    content,
+    meta,
+    onClick,
+    secondary,
+    title,
+    to,
+}) => (
+    <Panel>
+        <article>
+            {title ? (
+                <div className={styles.inner}>
+                    <ListItemTitle isPreload={$shouldPreloadTitle} onClick={onClick} to={to}>
+                        {title}
+                    </ListItemTitle>
+                    {secondary && <p className={styles.title}>{secondary.title}</p>}
+                </div>
+            ) : null}
+
+            {content ? <div className={styles.content}>{content}</div> : null}
+
+            {(meta || $actions) && (
+                <footer className={styles.footer}>
+                    {meta && (
+                        <ul className={styles.meta}>
+                            {/* eslint-disable react/no-array-index-key */}
+                            {meta.map((item, index) => (
+                                <ListItemMetaItem key={index} value={item} />
+                            ))}
+                            {/* eslint-enable react/no-array-index-key */}
+                        </ul>
+                    )}
+
+                    {$actions && <ListItemActions actions={$actions} data={$original} />}
+                </footer>
+            )}
+        </article>
+    </Panel>
+);
+
+ListItem.propTypes = {
+    $original: PropTypes.shape({}).isRequired,
+    $actions: PropTypes.oneOfType([
+        PropTypes.arrayOf(
+            PropTypes.shape({
+                label: PropTypes.string.isRequired,
+                onClick: PropTypes.func.isRequired,
+            }).isRequired
+        ),
+        PropTypes.func,
+    ]),
+    $shouldPreloadTitle: PropTypes.bool,
+    content: PropTypes.string,
+    meta: PropTypes.arrayOf(
+        PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.shape({
+                to: PropTypes.string.isRequired,
+                label: PropTypes.string.isRequired,
+            }),
+            PropTypes.element,
+        ])
+    ),
+    secondary: PropTypes.shape({
+        title: PropTypes.string.isRequired,
+    }),
+    title: PropTypes.string,
+    to: PropTypes.string,
+    onClick: PropTypes.func,
+};
+
+export default ListItem;

package/src/core/ListItemAction/ListItemAction.module.css

@@ -0,0 +1,28 @@
+.root {
+    background: transparent;
+    border: 0;
+    color: var(--clr-link);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--fs-sml);
+    font-weight: var(--fw-bold);
+    line-height: 3rem;
+    margin-left: 2rem;
+    padding: 0;
+
+    &:focus {
+        outline: none;
+    }
+
+    &:hover {
+        color: var(--clr-link-hover);
+    }
+}
+
+.rootDanger {
+    color: var(--clr-danger);
+
+    &:hover {
+        color: var(--clr-danger-dark);
+    }
+}

package/src/core/ListItemAction/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import useVariant from '@hooks/useVariant';
+
+import type { ButtonVariant, SimpleAction } from '@utility/interfaces';
+
+import styles from './ListItemAction.module.css';
+
+const ListItemAction: React.FunctionComponent<SimpleAction> = ({ label, onClick, variant }) => {
+    const { applyVariantClassName } = useVariant<ButtonVariant>(variant);
+
+    return (
+        <button
+            className={classNames(styles.root, applyVariantClassName(styles))}
+            onClick={onClick}
+            type="button"
+        >
+            {label}
+        </button>
+    );
+};
+
+ListItemAction.propTypes = {
+    label: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+};
+
+export default ListItemAction;

package/src/core/ListItemActions/ListItemActions.module.css

@@ -0,0 +1,94 @@
+.root {
+    align-items: center;
+    bottom: -.5rem;
+    display: flex;
+    flex-direction: row-reverse;
+    height: 3rem;
+    left: -2rem;
+    position: absolute;
+    right: 0;
+}
+
+td .root {
+    bottom: auto;
+    left: auto;
+    top: calc(50% - 15px);
+}
+
+.control {
+    background: var(--clr-white);
+    border: .1rem var(--clr-grey400) solid;
+    border-radius: .3rem;
+    cursor: pointer;
+    height: 3rem;
+    overflow: hidden;
+    position: relative;
+    text-indent: 5rem;
+    width: 3rem;
+
+    &:focus {
+        border: .1rem var(--clr-grey400) dashed;
+        outline: none;
+    }
+
+    & i,
+    & i::before,
+    & i::after {
+        background-color: var(--clr-link);
+        border-radius: 50%;
+        left: calc(50% - .2rem);
+        position: absolute;
+        height: .4rem;
+        top: calc(50% - .2rem);
+        width: .4rem;
+    }
+
+    & i::before {
+        content: '';
+        left: -.6rem;
+    }
+
+    & i::after {
+        content: '';
+        left: auto;
+        right: -.6rem;
+    }
+}
+
+.list {
+    background: var(--clr-white80);
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+    margin-right: 2rem;
+    opacity: 0;
+    pointer-events: none;
+    transform: translate3d(1rem, 0, 0);
+    transition: opacity .2s, transform .2s;
+}
+
+tr:nth-child(2n - 1) .list {
+    background-color: var(--clr-grey10080);
+}
+
+.listIsOpen {
+    opacity: 1;
+    pointer-events: all;
+    transform: translate3d(0, 0, 0);
+}
+
+.item {
+    background-color: var(--clr-white);
+
+    &:first-child {
+        background: linear-gradient(90deg, var(--clr-white0), var(--clr-white) 1rem);
+    }
+}
+
+tr:nth-child(2n - 1) .item {
+    background-color: var(--clr-grey100);
+
+    &:first-child {
+        background: linear-gradient(90deg, var(--clr-grey1000), var(--clr-grey100) 1rem);
+    }
+}

package/src/core/ListItemActions/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import ListItemAction from '@core/ListItemAction';
+
+import useClickOutside from '@hooks/useClickOutside';
+
+import type { SimpleAction } from '@utility/interfaces';
+
+import styles from './ListItemActions.module.css';
+
+interface ListItemActionsProps {
+    actions: SimpleAction[] | ((data?: Record<string, unknown>) => SimpleAction[]);
+    data?: Record<string, unknown>;
+}
+
+const ListItemActions: React.FunctionComponent<ListItemActionsProps> = ({ actions, data }) => {
+    const [isOpen, setIsOpen, node] = useClickOutside();
+
+    const toggleOpen = (): void => setIsOpen(!isOpen);
+
+    const transformed = typeof actions === 'function' ? actions(data) : actions;
+
+    return (
+        <div ref={node} className={styles.root}>
+            <button className={styles.control} onClick={toggleOpen} type="button">
+                {isOpen ? 'Close' : 'Open'}
+                <i />
+            </button>
+            <ul className={classNames(styles.list, isOpen && styles.listIsOpen)}>
+                {transformed.filter(Boolean).map((item) => (
+                    <li key={item.label} className={styles.item}>
+                        <ListItemAction {...item} />
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+ListItemActions.propTypes = {
+    actions: PropTypes.oneOfType([
+        PropTypes.arrayOf(
+            PropTypes.shape({
+                label: PropTypes.string.isRequired,
+                onClick: PropTypes.func.isRequired,
+            }).isRequired
+        ),
+        PropTypes.func,
+    ]).isRequired,
+    data: PropTypes.shape({}).isRequired,
+};
+
+export default ListItemActions;

package/src/core/ListItemMetaItem/ListItemMetaItem.module.css

@@ -0,0 +1,18 @@
+.root {
+    &:not(:last-child) {
+        align-items: center;
+        display: flex;
+        margin-right: 1.5rem;
+        position: relative;
+
+        &::after {
+            background-color: var(--clr-grey400);
+            border-radius: 50%;
+            content: '';
+            height: .4rem;
+            margin-left: 1.5rem;
+            top: .5em;
+            width: .4rem;
+        }
+    }
+}

package/src/core/ListItemMetaItem/index.tsx

@@ -0,0 +1,54 @@
+import React, { isValidElement } from 'react';
+import PropTypes from 'prop-types';
+
+import Link from '@components/Link';
+
+import Styled from '@core/Styled';
+
+import styles from './ListItemMetaItem.module.css';
+
+export interface ValueObject {
+    to: string;
+    label: string;
+}
+
+interface ListItemMetaItemProps {
+    value?: React.ReactElement | ValueObject | string | null;
+}
+
+const ListItemMetaItem: React.FunctionComponent<ListItemMetaItemProps> = ({ value }) => {
+    if (isValidElement(value)) {
+        return <li className={styles.root}>{value}</li>;
+    }
+
+    if (typeof value !== 'object') {
+        return (
+            <li className={styles.root}>
+                <Styled>{value}</Styled>
+            </li>
+        );
+    }
+
+    if (value?.to) {
+        return (
+            <li className={styles.root}>
+                <Link to={value.to}>{value.label}</Link>
+            </li>
+        );
+    }
+
+    return null;
+};
+
+ListItemMetaItem.propTypes = {
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.shape({
+            to: PropTypes.string.isRequired,
+            label: PropTypes.string.isRequired,
+        }),
+        PropTypes.element,
+    ]),
+};
+
+export default ListItemMetaItem;

package/src/core/ListItemTitle/ListItemTitle.module.css

@@ -0,0 +1,14 @@
+.root {
+    font-size: var(--fs-lrg);
+    font-weight: var(--fw-bold);
+    line-height: 1;
+}
+
+.rootIsLink {
+    color: var(--clr-link);
+    cursor: pointer;
+
+    &:hover {
+        color: var(--clr-link-hover);
+    }
+}

package/src/core/ListItemTitle/ListItemTitle.spec.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import ListItemTitle from './index';
+
+describe('ListItemTitle', () => {
+    it('should render', () => {
+        render(<ListItemTitle>Lorem</ListItemTitle>);
+    });
+
+    it('should render defaults', () => {
+        render(<ListItemTitle>Lorem</ListItemTitle>);
+
+        const title = screen.getByText('Lorem');
+        expect(title).toHaveTextContent(/^Lorem$/u);
+    });
+
+    it('should handle to', () => {
+        render(<ListItemTitle to="lorem">Lorem</ListItemTitle>);
+        expect(screen.getByRole('link')).toHaveAttribute('href', '/lorem');
+    });
+
+    it('should handle onclick without to', () => {
+        const mockFn = jest.fn();
+        render(<ListItemTitle onClick={mockFn}>Lorem</ListItemTitle>);
+        expect(screen.getByRole('button')).toBeInTheDocument();
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(screen.getByRole('button'));
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+});

package/src/core/ListItemTitle/index.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { EventService } from '@sqrzro/utility';
+
+import Link from '@components/Link';
+import Styled from '@core/Styled';
+
+import styles from './ListItemTitle.module.css';
+
+interface ListItemTitleProps {
+    children: React.ReactNode;
+    isPreload?: boolean;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLHeadingElement>;
+    to?: string | null;
+}
+
+const ListItemTitle: React.FunctionComponent<ListItemTitleProps> = ({
+    children,
+    isPreload,
+    onClick,
+    to,
+}) => {
+    const handlePreloadTitle = (
+        event: React.MouseEvent<HTMLAnchorElement | HTMLHeadingElement>
+    ): void => {
+        if (onClick) {
+            onClick(event);
+        }
+
+        if (!isPreload) {
+            return;
+        }
+
+        EventService.publish('@app/title', children);
+    };
+
+    if (to) {
+        return (
+            <h2 className={styles.root}>
+                <Link onClick={handlePreloadTitle} to={to}>
+                    <Styled>{children}</Styled>
+                </Link>
+            </h2>
+        );
+    }
+
+    const clickProps = {
+        className: classNames(styles.root, styles.rootIsLink),
+        onClick,
+        role: 'button',
+        tabIndex: 0,
+    };
+
+    const props = onClick ? clickProps : { className: styles.root };
+
+    return (
+        <h2 {...props}>
+            <Styled>{children}</Styled>
+        </h2>
+    );
+};
+
+ListItemTitle.propTypes = {
+    children: PropTypes.node.isRequired,
+    isPreload: PropTypes.bool,
+    to: PropTypes.string,
+    onClick: PropTypes.func,
+};
+
+export default ListItemTitle;

package/src/core/Loader/Loader.module.css

@@ -0,0 +1,57 @@
+@keyframes anim {
+    0% {
+        opacity: 1;
+    }
+
+    40% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.root {
+    display: flex;
+    height: 1rem;
+    justify-content: space-between;
+    margin: 8rem auto;
+    width: 4rem;
+
+    & span {
+        overflow: hidden;
+        position: absolute;
+        text-indent: 5rem;
+        width: 0;
+    }
+
+    & i {
+        animation: anim 1s;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        background-color: var(--clr-grey400);
+        border-radius: 50%;
+        height: 1rem;
+        width: 1rem;
+
+        &:nth-child(2) {
+            animation-delay: .2s;
+        }
+
+        &:nth-child(3) {
+            animation-delay: .4s;
+        }
+    }
+}
+
+.rootIsMini {
+    height: .8rem;
+    margin: 0;
+    width: 3.2rem;
+
+    & i {
+        height: .8rem;
+        width: .8rem;
+    }
+}

package/src/core/Loader/Loader.story.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Loader from './index';
+
+export default { title: 'Core/Loader', component: Loader };
+
+export const Default = (): React.ReactElement => <Loader />;
+
+export const Mini = (): React.ReactElement => <Loader isMini />;

package/src/core/Loader/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import styles from './Loader.module.css';
+
+interface LoaderProps {
+    isMini?: boolean;
+}
+
+const Loader: React.FunctionComponent<LoaderProps> = ({ isMini }) => (
+    <p className={classNames(styles.root, isMini && styles.rootIsMini)}>
+        <span>Loading...</span>
+        <i />
+        <i />
+        <i />
+    </p>
+);
+
+Loader.propTypes = {
+    /**
+     * If true, displays the `Loader` at a smaller size, for use in components like `AutoSuggest`
+     */
+    isMini: PropTypes.bool,
+};
+
+export default Loader;

package/src/core/MeActions/MeActions.module.css

@@ -0,0 +1,45 @@
+.root {
+    font-size: var(--fs-sml);
+    margin: auto auto 0;
+    position: relative;
+    width: 4rem;
+}
+
+.rootTopbar {
+    margin: 0;
+}
+
+.name {
+    background-color: transparent;
+    border: .2rem var(--clr-white) solid;
+    border-radius: 50%;
+    color: var(--clr-white);
+    cursor: pointer;
+    display: block;
+    font-family: inherit;
+    font-weight: var(--fw-bold);
+    height: 4rem;
+    padding: 0;
+    position: relative;
+    text-align: center;
+    width: 100%;
+
+    &:focus {
+        outline: none;
+
+        &::before {
+            border: .1rem var(--clr-grey500) dashed;
+            border-radius: 50%;
+            bottom: -.5rem;
+            content: '';
+            left: -.5rem;
+            position: absolute;
+            right: -.5rem;
+            top: -.5rem;
+        }
+    }
+
+    & abbr[title] {
+        text-decoration: none;
+    }
+}

package/src/core/MeActions/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import useAppContext from '@hooks/useAppContext';
+import useLayout from '@hooks/useLayout';
+import useClickOutside from '@hooks/useClickOutside';
+
+import MePanel from '@core/MePanel';
+
+import styles from './MeActions.module.css';
+
+const getInitials = (name: string): string =>
+    name
+        .split(' ')
+        .map((item: string) => item[0])
+        .join('');
+
+const MeActions: React.FunctionComponent = () => {
+    const { me } = useAppContext();
+    const { applyLayoutClassName } = useLayout();
+    const [isOpen, setIsOpen, node] = useClickOutside();
+
+    const toggleIsOpen = (): void => setIsOpen(!isOpen);
+
+    /**
+     * This component will never render if there is no `me` (as it is never called from the `App`
+     * component). However, because `me` needs to possibly be null in the AppContext, we need to
+     * check for it here. This code is purely for typescript checking, will never be run, and
+     * can be ignored by coverage.
+     */
+    /* istanbul ignore next */
+    if (!me) {
+        return null;
+    }
+
+    return (
+        <div ref={node} className={classNames(styles.root, applyLayoutClassName(styles))}>
+            <button className={styles.name} onClick={toggleIsOpen} tabIndex={999} type="button">
+                <abbr title={me.name}>{getInitials(me.name)}</abbr>
+            </button>
+            <MePanel data={me} isOpen={isOpen} />
+        </div>
+    );
+};
+
+export default MeActions;