@sqrzro/admin 1.0.0-beta.1

package/src/core/MePanel/MePanel.module.css

@@ -0,0 +1,75 @@
+.root {
+    background-color: var(--clr-white);
+    border-radius: .5rem;
+    bottom: calc(100% + 1.5rem);
+    box-shadow: 0 .3rem 2rem rgba(0, 0, 0, .3);
+    left: 0;
+    opacity: 0;
+    padding: 1.5rem;
+    position: absolute;
+    pointer-events: none;
+    transform: translateY(-1rem);
+    transition: opacity .2s ease-in-out, transform .2s ease-in-out;
+    width: 30rem;
+
+    &::before {
+        border-top: 1rem var(--clr-white) solid;
+        border-left: 1rem transparent solid;
+        border-right: 1rem transparent solid;
+        content: '';
+        position: absolute;
+        left: 1rem;
+        bottom: -1rem;
+    }
+}
+
+.rootTopbar {
+    bottom: auto;
+    left: auto;
+    right: 0;
+    top: calc(100% + 1.5rem);
+    transform: translateY(1rem);
+
+    &::before {
+        border-bottom: 1rem var(--clr-white) solid;
+        border-top: none;
+        bottom: auto;
+        left: auto;
+        right: 1rem;
+        top: -1rem;
+    }
+}
+
+.rootIsOpen {
+    opacity: 1;
+    pointer-events: all;
+    transform: translateY(0);
+}
+
+.title {
+    border-bottom: .1rem var(--clr-grey200) solid;
+    color: var(--clr-grey700);
+    font-weight: var(--fw-bold);
+    font-size: var(--fs-lrg);
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+}
+
+.action {
+    background: none;
+    border: 0;
+    color: var(--clr-link);
+    cursor: pointer;
+    display: block;
+    font-family: inherit;
+    font-size: var(--fs-xsml);
+    padding: 0;
+
+    &:hover {
+        color: var(--clr-link-hover);
+    }
+
+    &:focus {
+        outline: none;
+    }
+}

package/src/core/MePanel/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { AuthService } from '@sqrzro/utility';
+
+import useLayout from '@hooks/useLayout';
+
+import styles from './MePanel.module.css';
+
+interface MePanelProps {
+    data: { name: string };
+    isOpen?: boolean;
+}
+
+const MePanel: React.FunctionComponent<MePanelProps> = ({ data, isOpen }) => {
+    const { applyLayoutClassName } = useLayout();
+
+    return (
+        <aside
+            className={classNames(
+                styles.root,
+                applyLayoutClassName(styles),
+                isOpen && styles.rootIsOpen
+            )}
+            data-testid="me-panel-root"
+        >
+            <h2 className={styles.title} data-testid="me-panel-title">
+                {data.name}
+            </h2>
+            <button className={styles.action} onClick={AuthService.logout} type="button">
+                Sign Out
+            </button>
+        </aside>
+    );
+};
+
+MePanel.propTypes = {
+    data: PropTypes.shape({
+        name: PropTypes.string.isRequired,
+    }).isRequired,
+    isOpen: PropTypes.bool,
+};
+
+export default MePanel;

package/src/core/Modal/Modal.module.css

@@ -0,0 +1,84 @@
+@keyframes overlayEnter {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes panelEnter {
+    0% {
+        opacity: 0;
+        transform: translate3d(100%, 0, 0);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.root {
+    bottom: 0;
+    display: flex;
+    justify-content: flex-end;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 10;
+}
+
+.overlay {
+    animation: overlayEnter .2s;
+    background-color: rgba(21, 37, 58, .9);
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.panel {
+    animation: panelEnter .2s;
+    background-color: var(--clr-grey100);
+    height: 100%;
+    min-width: 31rem;
+    overflow-y: auto;
+    position: relative;
+    width: 70%;
+}
+
+.panelSm {
+    max-width: 48rem;
+}
+
+.panelMd {
+    max-width: 56rem;
+}
+
+.panelLg {
+    max-width: 80rem;
+}
+
+.panelXl {
+    max-width: 92rem;
+}
+
+.content {
+    padding: 3rem clamp(1rem, 2.5vw, 3rem) 6rem;
+    position: relative;
+}
+
+.close {
+    position: fixed;
+    right: clamp(1rem, 2.5vw, 3rem);
+    top: 1.2rem;
+    z-index: 3;
+
+    @media (--media-sml) {
+        top: 2.2rem;
+    }
+}

package/src/core/Modal/Modal.spec.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import Modal from './index';
+
+describe('Modal', () => {
+    it('should render', () => {
+        render(<Modal isOpen>Lorem</Modal>);
+        expect(screen.getByText('Lorem')).toBeInTheDocument();
+        expect(screen.getByTestId('modal-panel')).toHaveClass('panelMd');
+    });
+
+    it('should render title', () => {
+        render(
+            <Modal title="Modal Title" isOpen>
+                Lorem
+            </Modal>
+        );
+        expect(screen.getByRole('heading')).toHaveTextContent('Modal Title');
+    });
+
+    it('should render variant title', () => {
+        render(
+            <Modal title="Modal Title" variant="danger" isOpen>
+                Lorem
+            </Modal>
+        );
+        expect(screen.getByRole('heading')).toHaveClass('titleDanger');
+    });
+
+    it('should handle onclose', () => {
+        const mockFn = jest.fn();
+        render(
+            <Modal onClose={mockFn} isOpen>
+                Lorem
+            </Modal>
+        );
+
+        userEvent.click(screen.getByRole('button', { name: 'Close' }));
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle close with no onclose', () => {
+        const mockFn = jest.fn();
+        render(<Modal isOpen>Lorem</Modal>);
+
+        userEvent.click(screen.getByRole('button', { name: 'Close' }));
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+});

package/src/core/Modal/index.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { ucwords } from '@sqrzro/utility';
+
+import CloseButton from '@core/CloseButton';
+import Header from '@core/Header';
+
+import type { StyleVariant } from '@utility/interfaces';
+
+import styles from './Modal.module.css';
+
+export interface ModalProps {
+    children: React.ReactNode;
+    isOpen?: boolean;
+    title?: string;
+    variant?: StyleVariant;
+    width?: string;
+    onClose?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+const Modal: React.FunctionComponent<ModalProps> = ({
+    children,
+    isOpen,
+    title,
+    variant,
+    width,
+    onClose,
+}) => {
+    if (!isOpen) {
+        return null;
+    }
+
+    const handleClose = (event: React.MouseEvent<HTMLButtonElement>): void => {
+        if (onClose) {
+            onClose(event);
+        }
+    };
+
+    return (
+        <div className={styles.root} data-testid="modal-root">
+            <i className={styles.overlay} />
+            <div
+                className={classNames(styles.panel, styles[`panel${ucwords(width || 'md')}`])}
+                data-testid="modal-panel"
+            >
+                {title ? <Header title={title} variant={variant} /> : null}
+                <div className={styles.content}>{children}</div>
+                <i className={styles.close}>
+                    <CloseButton onClick={handleClose} />
+                </i>
+            </div>
+        </div>
+    );
+};
+
+Modal.propTypes = {
+    children: PropTypes.node.isRequired,
+    isOpen: PropTypes.bool,
+    title: PropTypes.string,
+    width: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+    onClose: PropTypes.func,
+};
+
+export default Modal;

package/src/core/Navigation/Navigation.module.css

@@ -0,0 +1,83 @@
+.root {
+    @media (--media-med) {
+        padding-top: 1rem;
+    }
+}
+
+.rootTopbar {
+    background-color: var(--clr-grey800);
+    bottom: 0;
+    display: none;
+    left: 0;
+    padding-bottom: .5rem;
+    position: fixed;
+    right: 0;
+    top: 6rem;
+
+    @media (--media-med) {
+        align-items: center;
+        background-color: transparent;
+        display: flex;
+        margin: 0 auto 0 clamp(1rem, 2.5vw, 2rem);
+        padding: 0;
+        position: relative;
+        top: 0;
+    }
+}
+
+.rootIsOpen {
+    display: block;
+
+    @media (--media-med) {
+        display: flex;
+    }
+}
+
+.control {
+    background-color: transparent;
+    border: .2rem var(--clr-white) solid;
+    border-radius: 50%;
+    cursor: pointer;
+    display: block;
+    height: 4rem;
+    overflow: hidden;
+    position: fixed;
+    right: 6rem;
+    text-indent: 5rem;
+    top: 1rem;
+    width: 4rem;
+
+    &::before {
+        border-top: .2rem var(--clr-white) solid;
+        border-bottom: .6rem var(--clr-white) double;
+        content: '';
+        height: 1rem;
+        left: 1rem;
+        position: absolute;
+        right: 1rem;
+        top: calc(50% - .5rem);
+    }
+
+    @media (--media-med) {
+        display: none;
+    }
+}
+
+.controlIsOpen {
+    &::before,
+    &::after {
+        background-color: var(--clr-white);
+        border: 0;
+        content: '';
+        height: .2rem;
+        left: 1rem;
+        position: absolute;
+        right: 1rem;
+        top: calc(50% - .1rem);
+        transform: rotate(45deg);
+    }
+
+    &::after {
+        transform: rotate(-45deg);
+    }
+}

package/src/core/Navigation/Navigation.spec.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import * as Router from 'next/router';
+
+import type { Config } from '@hooks/useAppContext';
+import { createMockRouter } from '@utility/MockRouter';
+
+import Navigation from './index';
+
+const mockFn = jest.fn();
+
+jest.mock(
+    '@hooks/useAppContext',
+    () => (): Config => ({
+        me: { name: 'Lorem', permissions: ['lorem'] },
+        name: 'Lorem',
+        navigation: [
+            { label: 'Lorem', to: 'lorem' },
+            '-',
+            { label: 'Ipsum', to: 'ipsum', onClick: mockFn },
+            { label: 'Dolor', onClick: mockFn },
+            { label: 'Sit Amet' },
+            { label: 'Lorem Ipsum', to: 'lorem/dolor' },
+        ],
+        paths: {},
+    })
+);
+
+jest.mock('@components/Link');
+
+describe('Navigation', () => {
+    beforeEach(() => {
+        mockFn.mockClear();
+    });
+
+    it('should render', () => {
+        render(<Navigation />);
+        expect(screen.getAllByRole('listitem')).toHaveLength(6);
+
+        expect(screen.getAllByRole('link')[0]).toHaveTextContent('Lorem');
+        expect(screen.getAllByRole('listitem')[1]).toHaveTextContent('-');
+    });
+
+    it('should open', () => {
+        render(<Navigation />);
+        expect(screen.getByRole('list')).not.toHaveClass('rootIsOpen');
+
+        userEvent.click(screen.getByRole('button', { name: 'Open' }));
+
+        expect(screen.getByRole('list')).toHaveClass('rootIsOpen');
+        expect(screen.getByRole('button', { name: 'Close' })).toHaveClass('controlIsOpen');
+    });
+
+    it('should have navigation', () => {
+        render(<Navigation />);
+        expect(screen.getByRole('link', { name: 'Lorem' })).toHaveAttribute('href', '/lorem');
+    });
+
+    it('should have active', () => {
+        jest.spyOn(Router, 'useRouter').mockImplementationOnce(() => createMockRouter('lorem'));
+
+        render(<Navigation />);
+        expect(screen.getAllByRole('link')[0]).toHaveClass('linkIsActive');
+    });
+
+    it('should have active with nested route', () => {
+        jest.spyOn(Router, 'useRouter').mockImplementationOnce(() =>
+            createMockRouter('lorem/ipsum')
+        );
+
+        render(<Navigation />);
+        expect(screen.getAllByRole('link')[0]).toHaveClass('linkIsActive');
+        expect(screen.getAllByRole('link')[2]).not.toHaveClass('linkIsActive');
+    });
+
+    it('should have active with most specific route', () => {
+        jest.spyOn(Router, 'useRouter').mockImplementationOnce(() =>
+            createMockRouter('lorem/dolor')
+        );
+
+        render(<Navigation />);
+        expect(screen.getAllByRole('link')[0]).not.toHaveClass('linkIsActive');
+        expect(screen.getAllByRole('link')[2]).toHaveClass('linkIsActive');
+    });
+
+    it('should handle onclick', () => {
+        render(<Navigation />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Dolor' }));
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle navigation and onclick', () => {
+        render(<Navigation />);
+
+        userEvent.click(screen.getByRole('link', { name: 'Ipsum' }));
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+});

package/src/core/Navigation/index.tsx

@@ -0,0 +1,109 @@
+import React, { Fragment, useState } from 'react';
+import classNames from 'classnames';
+import { useRouter } from 'next/router';
+import type { NextRouter } from 'next/router';
+
+import useAppContext from '@hooks/useAppContext';
+import useLayout from '@hooks/useLayout';
+
+import Allow from '@components/Allow';
+
+import NavigationDivider from '@core/NavigationDivider';
+import NavigationItem from '@core/NavigationItem';
+
+import type { NavigationObject } from '@utility/interfaces';
+
+import styles from './Navigation.module.css';
+
+const checkActiveRoute = (router: NextRouter, route: string): boolean => {
+    if (!router || route === '') {
+        return false;
+    }
+
+    const rgx = new RegExp(`^/${route.replace(/^\//u, '')}.*`, 'iu');
+    return Boolean(rgx.exec(router.asPath));
+};
+
+const getActiveRoute = (router: NextRouter, navigation: (NavigationObject | string)[]): string => {
+    const activeRoutes = navigation
+        .map((item: NavigationObject | string): string => {
+            if (typeof item === 'string' || !item.to) {
+                return '';
+            }
+
+            return item.to;
+        })
+        .filter((item: string) => checkActiveRoute(router, item))
+        /*
+         * Sorting by length descending ensures that we get the most 'specific' route. For example,
+         * if there were routes for `lorem` and `lorem/ipsum` in the navigation, we would only want
+         * to highlight `lorem/ipsum` if it was the active route.
+         */
+        .sort((first: string, second: string) => second.length - first.length);
+
+    return activeRoutes[0];
+};
+
+const Navigation: React.FunctionComponent = () => {
+    const { navigation } = useAppContext();
+    const { applyLayoutClassName } = useLayout();
+    const router = useRouter();
+
+    const activeRoute = getActiveRoute(router, navigation);
+
+    const [isOpen, setIsOpen] = useState(false);
+
+    const toggleIsOpen = (): void => setIsOpen(!isOpen);
+
+    const handleClick = (
+        event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
+        item: NavigationObject
+    ): void => {
+        setIsOpen(false);
+
+        if (item.onClick) {
+            item.onClick(event);
+        }
+    };
+
+    return (
+        <Fragment>
+            <button
+                className={classNames(styles.control, isOpen && styles.controlIsOpen)}
+                onClick={toggleIsOpen}
+                type="button"
+            >
+                {isOpen ? 'Close' : 'Open'}
+            </button>
+            <ul
+                className={classNames(
+                    styles.root,
+                    applyLayoutClassName(styles),
+                    isOpen && styles.rootIsOpen
+                )}
+            >
+                {navigation.map((item, index) => {
+                    if (typeof item === 'string') {
+                        // eslint-disable-next-line react/no-array-index-key
+                        return <NavigationDivider key={index} />;
+                    }
+
+                    return (
+                        <Allow
+                            key={item.to || item.onClick?.toString() || '.'}
+                            permission={item.permission}
+                        >
+                            <NavigationItem
+                                {...item}
+                                isActive={item.to === activeRoute}
+                                onClick={(event): void => handleClick(event, item)}
+                            />
+                        </Allow>
+                    );
+                })}
+            </ul>
+        </Fragment>
+    );
+};
+
+export default Navigation;

package/src/core/NavigationDivider/NavigationDivider.module.css

@@ -0,0 +1,18 @@
+.root {
+    background-color: var(--clr-grey700);
+    height: .1rem;
+    margin: 1rem 0;
+    overflow: hidden;
+    text-indent: 100%;
+}
+
+.rootTopbar {
+    background-color: var(--clr-grey600);
+    margin: 0;
+
+    @media (--media-med) {
+        height: 2rem;
+        margin: 0 1rem;
+        width: .1rem;
+    }
+}

package/src/core/NavigationDivider/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import useLayout from '@hooks/useLayout';
+
+import styles from './NavigationDivider.module.css';
+
+const NavigationDivider: React.FunctionComponent = () => {
+    const { applyLayoutClassName } = useLayout();
+    return <li className={classNames(styles.root, applyLayoutClassName(styles))}>-</li>;
+};
+
+export default NavigationDivider;

package/src/core/NavigationItem/NavigationItem.module.css

@@ -0,0 +1,51 @@
+.root {
+    font-size: var(--fs-sml);
+    line-height: 4rem;
+    margin-bottom: 1rem;
+    padding: 0 1rem;
+}
+
+.rootTopbar {
+    line-height: 1;
+    margin: 0;
+    padding: 0;
+    text-transform: none;
+
+    @media (--media-med) {
+        margin: 0 .5rem;
+    }
+}
+
+.link {
+    background-color: transparent;
+    border: 0;
+    color: var(--clr-white);
+    cursor: pointer;
+    display: block;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    padding: 0 1rem;
+    text-align: left;
+    width: 100%;
+
+    &:hover {
+        color: var(--clr-grey200);
+    }
+
+    @media (--media-med) {
+        border-radius: .3rem;
+    }
+}
+
+.linkTopbar {
+    padding: 2rem clamp(1rem, 2.5vw, 3rem);
+
+    @media (--media-med) {
+        padding: 1rem;
+    }
+}
+
+.linkIsActive {
+    background-color: var(--clr-grey700);
+}