@sqrzro/admin 2.0.0 → 2.1.0-bz.0

package/src/core/MeActions/index.tsx

@@ -1,74 +0,0 @@
-'use client';
-
-import React, { Fragment } from 'react';
-import clsx from 'clsx';
-import { AuthService } from '@sqrzro/utility';
-import { useClickOutside } from '@sqrzro/hooks';
-
-import Modal from '../../components/Modal';
-
-import MePanel from '../MePanel';
-import SettingsForm from '../SettingsForm';
-
-import useConfig from '../../hooks/useConfig';
-import useLayout from '../../hooks/useLayout';
-import useModal from '../../hooks/useModal';
-
-// Import styles from './MeActions.module.css';
-
-function getInitials(name: string): string {
-    return name
-        .split(' ')
-        .map((item: string) => item[0])
-        .join('');
-}
-
-function MeActions(): React.ReactElement | null {
-    const { me } = useConfig();
-    const { applyLayoutClassName } = useLayout();
-
-    const [isOpen, setIsOpen, node] = useClickOutside();
-
-    function toggleIsOpen(): void {
-        return setIsOpen(!isOpen);
-    }
-
-    const { modalProps: settingsModalProps, openModal: openSettingsModal } = useModal();
-
-    const events: Record<string, () => void> = {
-        logout: AuthService.logout,
-        settings: openSettingsModal,
-    };
-
-    /**
-     * 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 (
-        <Fragment>
-            <div ref={node} className="/*clsx(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} events={events} isOpen={isOpen} />
-            </div>
-            <Modal {...settingsModalProps} title="Your Settings">
-                <SettingsForm />
-            </Modal>
-        </Fragment>
-    );
-}
-
-export default MeActions;

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

@@ -1,79 +0,0 @@
-@keyframes enter {
-    from {
-        opacity: 0;
-        transform: translate3d(0, 1rem, 0);
-    }
-
-    to {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-@keyframes enterReverse {
-    from {
-        opacity: 0;
-        transform: translate3d(0, 1rem, 0);
-    }
-
-    to {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.root {
-    animation: enter .2s;
-    background-color: var(--clr-white);
-    border: .1rem var(--clr-grey400) solid;
-    border-radius: .3rem;
-    box-shadow: 0 .3rem .5rem rgba(0, 0, 0, .05);
-    position: absolute;
-    right: 0;
-    top: calc(100% + 1rem);
-    width: 20rem;
-
-    &::before {
-        background-color: var(--clr-grey200);
-        border: var(--clr-grey400) solid;
-        border-width: .1rem 0 0 .1rem;
-        content: '';
-        height: 1rem;
-        position: absolute;
-        right: 1.5rem;
-        top: -.6rem;
-        transform: rotate(45deg);
-        width: 1rem;
-    }
-}
-
-.rootSidebar {
-    @media (--media-med) {
-        animation: enterReverse .2s;
-        bottom: calc(100% + 1.5rem);
-        right: calc(50% - 10rem);
-        top: auto;
-
-        &::before {
-            background-color: var(--clr-white);
-            border-width: 0 .1rem .1rem 0;
-            bottom: -.6rem;
-            right: calc(50% - .5rem);
-            top: auto;
-        }
-    }
-}
-
-.title {
-    background-color: var(--clr-grey200);
-    border-bottom: .1rem var(--clr-grey200) solid;
-    color: var(--clr-grey700);
-    font-weight: var(--fw-normal);
-    font-size: var(--fs-med);
-    padding: 1.3rem;
-
-    & strong {
-        display: block;
-        white-space: nowrap;
-    }
-}

package/src/core/MePanel/index.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import DropdownList from '../DropdownList';
-import type { DropdownEvent } from '../DropdownList';
-
-import useLayout from '../../hooks/useLayout';
-
-// Import styles from './MePanel.module.css';
-
-interface MePanelProps {
-    data: { name: string };
-    events: Record<string, () => void>;
-    isOpen?: boolean;
-}
-
-function MePanel({ data, events, isOpen }: MePanelProps): React.ReactElement | null {
-    const { applyLayoutClassName } = useLayout();
-
-    const handleChange = (event: DropdownEvent): void => {
-        events[event.target.value]();
-    };
-
-    if (!isOpen) {
-        return null;
-    }
-
-    return (
-        <aside
-            className="/*clsx(styles.root, applyLayoutClassName(styles))*/"
-            data-testid="me-panel-root"
-        >
-            <h2 className="/*styles.title*/" data-testid="me-panel-title">
-                Logged in as
-                <strong>{data.name}</strong>
-            </h2>
-            <DropdownList
-                data={[
-                    { id: 'profile', name: 'Your Profile' },
-                    { id: 'settings', name: 'Your Settings' },
-                    { id: 'logout', name: 'Log out' },
-                ]}
-                name="me"
-                onChange={handleChange}
-            />
-        </aside>
-    );
-}
-
-MePanel.propTypes = {
-    data: PropTypes.shape({
-        name: PropTypes.string.isRequired,
-    }).isRequired,
-    isOpen: PropTypes.bool,
-};
-
-export default MePanel;

package/src/core/ModalComponent/ModalComponent.module.css

@@ -1,86 +0,0 @@
-@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 .3s;
-    background-color: rgba(21, 37, 58, .8);
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-}
-
-.panel {
-    animation: panelEnter .2s ease-in-out;
-    animation-delay: .2s;
-    animation-fill-mode: both;
-    background-color: var(--clr-grey100);
-    height: 100%;
-    min-width: 31rem;
-    overflow-y: auto;
-    position: relative;
-    width: 100%;
-}
-
-.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/ModalComponent/ModalComponent.spec.tsx

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

package/src/core/ModalComponent/index.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import { ucwords } from '@sqrzro/utility';
-
-import CloseButton from '../CloseButton';
-import Header from '../Header';
-
-import type { StyleVariant } from '../../utility/interfaces';
-
-// Import styles from './ModalComponent.module.css';
-
-export interface ModalComponentProps {
-    children: React.ReactNode;
-    isOpen?: boolean;
-    onClose?: React.MouseEventHandler<HTMLButtonElement>;
-    title?: string;
-    variant?: StyleVariant;
-    width?: string;
-}
-
-function ModalComponent({
-    children,
-    isOpen,
-    title,
-    variant,
-    width,
-    onClose,
-}: ModalComponentProps): React.ReactElement | null {
-    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="/*clsx(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>
-    );
-}
-
-ModalComponent.propTypes = {
-    children: PropTypes.node.isRequired,
-    isOpen: PropTypes.bool,
-    title: PropTypes.string,
-    width: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
-    onClose: PropTypes.func,
-};
-
-export default ModalComponent;

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

@@ -1,89 +0,0 @@
-.root {
-    background-color: var(--clr-grey800);
-    bottom: 0;
-    display: none;
-    left: 0;
-    padding-bottom: .5rem;
-    position: fixed;
-    right: 0;
-    top: 6rem;
-}
-
-.rootSidebar {
-    @media (--media-med) {
-        background-color: transparent;
-        display: block;
-        order: -1;
-        padding: 0;
-        position: static;
-        width: 100%;
-    }
-}
-
-.rootTopbar {
-    @media (--media-med) {
-        align-items: center;
-        background-color: transparent;
-        display: flex;
-        margin: 0 auto 0 clamp(1rem, 2.5vw, 2rem);
-        order: -1;
-        padding: 0;
-        position: static;
-
-        &.rootIsOpen {
-            display: flex;
-        }
-    }
-}
-
-.rootIsOpen {
-    display: block;
-}
-
-.control {
-    background-color: transparent;
-    border: .2rem var(--clr-white) solid;
-    border-radius: 50%;
-    cursor: pointer;
-    display: block;
-    height: 4rem;
-    margin-left: 1rem;
-    overflow: hidden;
-    position: relative;
-    text-indent: 5rem;
-    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

@@ -1,121 +0,0 @@
-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 ConfigService from '../../services/ConfigService';
-import { createMockRouter } from '../../utility/MockRouter';
-
-import Navigation from './index';
-
-const mockFn = jest.fn();
-
-interface MockUseLayoutReturn {
-    applyLayoutClassName: () => null;
-}
-
-jest.mock(
-    '../../hooks/useLayout',
-    () => (): MockUseLayoutReturn => ({ applyLayoutClassName: (): null => null })
-);
-
-jest.mock('../../components/Link');
-
-describe('Navigation', () => {
-    beforeEach(() => {
-        ConfigService.registerConfig({
-            me: { name: 'Lorem', permissions: ['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' },
-                { label: 'Exceptor', to: 'dolor/3' },
-            ],
-        });
-
-        mockFn.mockClear();
-    });
-
-    it('should render', () => {
-        jest.spyOn(Router, 'useRouter').mockImplementation(() => createMockRouter(''));
-
-        render(<Navigation />);
-
-        expect(screen.getAllByRole('listitem')).toHaveLength(6);
-        expect(screen.getAllByRole('link')[0]).toHaveTextContent('Lorem');
-    });
-
-    it('should open', async () => {
-        const user = userEvent.setup();
-
-        jest.spyOn(Router, 'useRouter').mockImplementation(() => createMockRouter(''));
-
-        render(<Navigation />);
-        expect(screen.getByRole('list')).not.toHaveClass('rootIsOpen');
-
-        await user.click(screen.getByRole('button', { name: 'Open' }));
-
-        expect(screen.getByRole('list')).toHaveClass('rootIsOpen');
-        expect(screen.getByRole('button', { name: 'Close' })).toHaveClass('controlIsOpen');
-    });
-
-    it('should have navigation', () => {
-        jest.spyOn(Router, 'useRouter').mockImplementation(() => createMockRouter(''));
-
-        render(<Navigation />);
-        expect(screen.getByRole('link', { name: 'Lorem' })).toHaveAttribute('href', '/lorem');
-    });
-
-    it('should have active', () => {
-        jest.spyOn(Router, 'useRouter').mockImplementation(() => createMockRouter('lorem'));
-
-        render(<Navigation />);
-        expect(screen.getAllByRole('link')[0]).toHaveClass('linkIsActive');
-    });
-
-    it('should have active with dynamic route', () => {
-        jest.spyOn(Router, 'useRouter').mockImplementation(() =>
-            createMockRouter('dolor/[id]', { id: '3' })
-        );
-
-        render(<Navigation />);
-        expect(screen.getAllByRole('link')[3]).toHaveClass('linkIsActive');
-    });
-
-    it('should have active with nested route', () => {
-        jest.spyOn(Router, 'useRouter').mockImplementation(() => 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').mockImplementation(() => createMockRouter('lorem/dolor'));
-
-        render(<Navigation />);
-        expect(screen.getAllByRole('link')[0]).not.toHaveClass('linkIsActive');
-        expect(screen.getAllByRole('link')[2]).toHaveClass('linkIsActive');
-    });
-
-    it('should handle onclick', async () => {
-        const user = userEvent.setup();
-
-        render(<Navigation />);
-
-        await user.click(screen.getByRole('button', { name: 'Dolor' }));
-        expect(mockFn).toHaveBeenCalledTimes(1);
-    });
-
-    it('should handle navigation and onclick', async () => {
-        const user = userEvent.setup();
-
-        render(<Navigation />);
-
-        await user.click(screen.getByRole('link', { name: 'Ipsum' }));
-        expect(mockFn).toHaveBeenCalledTimes(1);
-    });
-});

package/src/core/Navigation/index.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-import React, { Fragment, useState } from 'react';
-import clsx from 'clsx';
-
-import useConfig from '../../hooks/useConfig';
-import useLayout from '../../hooks/useLayout';
-import useNavigation from '../../hooks/useNavigation';
-
-import Allow from '../../components/Allow';
-
-import NavigationDivider from '../NavigationDivider';
-import NavigationItem from '../NavigationItem';
-
-import type { NavigationObject } from '../../utility/interfaces';
-
-// Import styles from './Navigation.module.css';
-
-function Navigation(): React.ReactElement {
-    const { navigation: appRoutes } = useConfig();
-    const { applyLayoutClassName } = useLayout();
-    const navigation = useNavigation(appRoutes);
-
-    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="/*clsx(styles.control, isOpen && styles.controlIsOpen)*/"
-                onClick={toggleIsOpen}
-                type="button"
-            >
-                {isOpen ? 'Close' : 'Open'}
-            </button>
-            <ul className="clsx(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.label} permission={item.permission}>
-                            <NavigationItem
-                                {...item}
-                                onClick={(event): void => handleClick(event, item)}
-                            />
-                        </Allow>
-                    );
-                })}
-            </ul>
-        </Fragment>
-    );
-}
-
-export default Navigation;

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

@@ -1,3 +0,0 @@
-.root {
-    display: none;
-}