@sqrzro/admin 1.0.0-beta.7 → 2.0.0

package/src/components/TextInput/TextInput.story.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import TextInput from './index';
-
-import TestChangeHandler from '@utility/TestChangeHandler';
-
-export default {
-    title: 'Components/TextInput',
-    component: TextInput,
-    decorators: [
-        (storyFn: () => React.ReactElement): React.ReactElement => (
-            <TestChangeHandler>{storyFn()}</TestChangeHandler>
-        ),
-    ],
-};
-
-export const Basic = (): React.ReactElement => <TextInput name="lorem" />;
-
-export const WithError = (): React.ReactElement => <TextInput name="lorem" hasError />;
-
-export const WithLoading = (): React.ReactElement => <TextInput name="lorem" isLoading />;
-
-export const WithPlaceholder = (): React.ReactElement => (
-    <TextInput name="lorem" placeholder="Lorem Ipsum" />
-);

package/src/core/App/App.module.css

@@ -1,24 +0,0 @@
-.root {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-}
-
-.rootSidebar {
-    @media (--media-med) {
-        display: grid;
-        grid-template-columns: 22rem 1fr;
-    }
-}
-
-.loader {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    justify-content: center;
-}
-
-.main {
-    display: block;
-}

package/src/core/App/App.spec.tsx

@@ -1,265 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { ApiService, AuthService } from '@sqrzro/utility';
-
-import Scene from '@components/Scene';
-import { createMockRouter } from '@utility/MockRouter';
-
-import { AppLayout, getAppContextFromConfig } from '@hooks/useAppContext';
-
-import App from './index';
-
-const Component = (): React.ReactElement => <div>Component</div>;
-
-const ComponentWithoutLayout = (): React.ReactElement => <div>ComponentWithoutLayout</div>;
-ComponentWithoutLayout.hasLayout = false;
-
-const ComponentWithLayout = (): React.ReactElement => <div>ComponentWithLayout</div>;
-const Layout = (): React.ReactElement => <div>Layout</div>;
-ComponentWithLayout.Layout = Layout;
-
-const SceneComponent = (): React.ReactElement => <Scene title="Scene Title">Scene Content</Scene>;
-
-const Logo = (): React.ReactElement => <div>Logo</div>;
-
-const context = getAppContextFromConfig({ name: 'Lorem' });
-const router = createMockRouter('lorem');
-
-describe('App', () => {
-    beforeEach(() => {
-        (ApiService.get as jest.Mock).mockClear();
-    });
-
-    it('should render', () => {
-        render(<App Component={Component} context={context} router={router} $isHooked />);
-        expect(screen.getByText('Loading...')).toBeInTheDocument();
-    });
-
-    it('should return error if not hooked', () => {
-        const mockConsole = jest.spyOn(console, 'error').mockImplementation(() => jest.fn());
-
-        expect(() =>
-            render(<App Component={Component} context={context} router={router} />)
-        ).toThrow('App should not be called directly');
-
-        mockConsole.mockRestore();
-    });
-
-    it('should render me', async () => {
-        // @ts-expect-error APIResponse not being available
-        const mockFn = jest.spyOn(ApiService, 'get').mockImplementation(() => ({
-            data: {
-                name: 'Lorem',
-            },
-        }));
-
-        render(<App Component={Component} context={context} router={router} $isHooked />);
-
-        await waitFor(() => {
-            expect(screen.getByText('Component')).toBeInTheDocument();
-        });
-
-        expect(screen.getByRole('button', { name: 'Lorem' })).toBeInTheDocument();
-        mockFn.mockRestore();
-    });
-
-    it('should render without layout', async () => {
-        // @ts-expect-error APIResponse not being available
-        const mockFn = jest.spyOn(ApiService, 'get').mockImplementation(() => ({
-            data: {
-                name: 'Lorem',
-            },
-        }));
-
-        render(
-            <App Component={ComponentWithoutLayout} context={context} router={router} $isHooked />
-        );
-
-        await waitFor(() => {
-            expect(screen.getByText('ComponentWithoutLayout')).toBeInTheDocument();
-        });
-
-        expect(screen.queryByTestId('me-panel-title')).not.toBeInTheDocument();
-        mockFn.mockRestore();
-    });
-
-    it('should render with layout', async () => {
-        // @ts-expect-error APIResponse not being available
-        const mockFn = jest.spyOn(ApiService, 'get').mockImplementation(() => ({
-            data: {
-                name: 'Lorem',
-            },
-        }));
-
-        render(<App Component={ComponentWithLayout} context={context} router={router} $isHooked />);
-
-        await waitFor(() => {
-            expect(screen.getByText('Layout')).toBeInTheDocument();
-        });
-
-        mockFn.mockRestore();
-    });
-
-    it('should render logo', async () => {
-        // @ts-expect-error APIResponse not being available
-        const mockFn = jest.spyOn(ApiService, 'get').mockImplementation(() => ({
-            data: {
-                name: 'Lorem',
-            },
-        }));
-
-        const contextWithLogo = { ...context, Logo };
-
-        render(<App Component={Component} context={contextWithLogo} router={router} $isHooked />);
-
-        await waitFor(() => {
-            expect(screen.getByText('Logo')).toBeInTheDocument();
-        });
-
-        mockFn.mockRestore();
-    });
-
-    it('should render brand', async () => {
-        // @ts-expect-error APIResponse not being available
-        const mockFn = jest.spyOn(ApiService, 'get').mockImplementation(() => ({
-            data: {
-                name: 'Lorem',
-            },
-        }));
-
-        const contextWithBrand = getAppContextFromConfig({
-            ...context,
-            style: { brand: '#000' },
-        });
-
-        render(<App Component={Component} context={contextWithBrand} router={router} $isHooked />);
-
-        await waitFor(() => {
-            expect(screen.getByTestId('app-brand')).toBeInTheDocument();
-        });
-
-        mockFn.mockRestore();
-    });
-
-    it('should render brand without layout', async () => {
-        // @ts-expect-error APIResponse not being available
-        const mockFn = jest.spyOn(ApiService, 'get').mockImplementation(() => ({
-            data: {
-                name: 'Lorem',
-            },
-        }));
-
-        const contextWithBrand = getAppContextFromConfig({
-            ...context,
-            style: { brand: '#000' },
-        });
-
-        render(
-            <App
-                Component={ComponentWithoutLayout}
-                context={contextWithBrand}
-                router={router}
-                $isHooked
-            />
-        );
-
-        await waitFor(() => {
-            expect(screen.getByTestId('app-brand')).toBeInTheDocument();
-        });
-
-        mockFn.mockRestore();
-    });
-
-    it('should render brand topbar', async () => {
-        // @ts-expect-error APIResponse not being available
-        const mockFn = jest.spyOn(ApiService, 'get').mockImplementation(() => ({
-            data: {
-                name: 'Lorem',
-            },
-        }));
-
-        const contextWithLayout = { ...context, style: { layout: AppLayout.topbar } };
-
-        render(<App Component={Component} context={contextWithLayout} router={router} $isHooked />);
-
-        await waitFor(() => {
-            expect(screen.getByRole('main')).toHaveClass('main mainTopbar');
-        });
-
-        mockFn.mockRestore();
-    });
-
-    it('should render scene', async () => {
-        // @ts-expect-error APIResponse not being available
-        const mockFn = jest.spyOn(ApiService, 'get').mockImplementation(() => ({
-            data: {
-                name: 'Lorem',
-            },
-        }));
-
-        render(<App Component={SceneComponent} context={context} router={router} $isHooked />);
-
-        await waitFor(() => {
-            expect(screen.getByTestId('header-title')).toHaveTextContent('Scene Title');
-        });
-
-        expect(screen.getByText('Scene Content')).toBeInTheDocument();
-        mockFn.mockRestore();
-    });
-
-    it('should open mepanel', async () => {
-        // @ts-expect-error APIResponse not being available
-        const mockFn = jest.spyOn(ApiService, 'get').mockImplementation(() => ({
-            data: {
-                name: 'Lorem',
-            },
-        }));
-
-        render(<App Component={Component} context={context} router={router} $isHooked />);
-
-        await waitFor(() => {
-            expect(screen.getByRole('button', { name: 'Lorem' })).toBeInTheDocument();
-        });
-
-        expect(screen.queryByTestId('me-panel-root')).not.toBeInTheDocument();
-        userEvent.click(screen.getByRole('button', { name: 'Lorem' }));
-        expect(screen.getByTestId('me-panel-root')).toBeInTheDocument();
-
-        mockFn.mockRestore();
-    });
-
-    it('should logout', async () => {
-        // @ts-expect-error APIResponse not being available
-        const mockFn = jest.spyOn(ApiService, 'get').mockImplementation(() => ({
-            data: {
-                name: 'Lorem',
-            },
-        }));
-
-        render(<App Component={Component} context={context} router={router} $isHooked />);
-
-        await waitFor(() => {
-            expect(screen.getByRole('button', { name: 'Lorem' })).toBeInTheDocument();
-        });
-
-        userEvent.click(screen.getByRole('button', { name: 'Lorem' }));
-        userEvent.click(screen.getByTestId('dropdown-panel-control-logout'));
-
-        expect(AuthService.logout).toHaveBeenCalledTimes(1);
-
-        mockFn.mockRestore();
-    });
-
-    it('should handle me with custom meurl', async () => {
-        const customContext = getAppContextFromConfig({ ...context, auth: { meUrl: 'lorem' } });
-        render(<App Component={Component} context={customContext} router={router} $isHooked />);
-
-        await waitFor(() => {
-            expect(ApiService.get).toHaveBeenCalledTimes(1);
-        });
-
-        expect(ApiService.get).toHaveBeenLastCalledWith('lorem');
-    });
-});

package/src/core/App/index.tsx

@@ -1,115 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import type { AppContext, AppInitialProps } from 'next/app';
-import type { NextRouter } from 'next/router';
-import classNames from 'classnames';
-
-import { ApiService } from '@sqrzro/utility';
-
-import { AppContextProvider } from '@hooks/useAppContext';
-import type { AppContextObject, Me } from '@hooks/useAppContext';
-
-import AppHeader from '@core/AppHeader';
-import Banner from '@core/Banner';
-import ConfirmModal from '@core/ConfirmModal';
-import Loader from '@core/Loader';
-import Toast from '@core/Toast';
-
-import useLayout from '@hooks/useLayout';
-
-import 'modern-normalize';
-import '../../styles/variables.css';
-import '../../styles/layout.css';
-
-import type { SceneComponentType } from '@utility/interfaces';
-
-import styles from './App.module.css';
-
-const AUTH_ROUTE = '/auth/';
-
-export interface AppProps {
-    $isHooked?: boolean;
-    Component: SceneComponentType;
-    context: AppContextObject;
-    router: NextRouter;
-}
-
-export type AppType = React.FunctionComponent<AppProps> & {
-    getInitialProps: (context: AppContext) => Promise<AppInitialProps>;
-};
-
-/* eslint-disable @typescript-eslint/naming-convention */
-const App: React.FunctionComponent<AppProps> = ({
-    $isHooked,
-    Component,
-    context,
-    router,
-    ...pageProps
-}) => {
-    if (!$isHooked) {
-        throw new Error('App should not be called directly. Please use the `createApp` function.');
-    }
-
-    const [me, setMe] = useState<Me>();
-
-    const getMe = async (): Promise<void> => {
-        try {
-            const response = await ApiService.get<Me>(context.auth.meUrl);
-            setMe(response.data);
-        } catch (err) {} // eslint-disable-line no-empty
-    };
-
-    useEffect(() => {
-        void getMe();
-    }, []);
-
-    if (!me && !router.route.startsWith(AUTH_ROUTE)) {
-        return (
-            <div className={styles.loader}>
-                <Loader />
-            </div>
-        );
-    }
-
-    const { brand } = context.style;
-    const { applyLayoutClassName } = useLayout(context);
-
-    if (Component.hasLayout === false) {
-        return (
-            <AppContextProvider value={{ ...context, me }}>
-                {typeof brand !== 'undefined' && (
-                    <style data-testid="app-brand">{`:root { --clr-brand: ${brand} }`}</style>
-                )}
-                <Component router={router} {...pageProps} />
-                <div id="alert-portal" />
-                <Toast />
-            </AppContextProvider>
-        );
-    }
-
-    return (
-        <AppContextProvider value={{ ...context, me }}>
-            {typeof brand !== 'undefined' && (
-                <style data-testid="app-brand">{`:root { --clr-brand: ${brand} }`}</style>
-            )}
-            <div className={classNames(styles.root, applyLayoutClassName(styles))}>
-                <Banner />
-                <main className={classNames(styles.main, applyLayoutClassName(styles, 'main'))}>
-                    <AppHeader />
-                    {Component.Layout ? (
-                        <Component.Layout>
-                            <Component router={router} {...pageProps} />
-                        </Component.Layout>
-                    ) : (
-                        <Component router={router} {...pageProps} />
-                    )}
-                </main>
-            </div>
-            <div id="alert-portal" />
-            <div id="modal-portal" />
-            <ConfirmModal />
-            <Toast />
-        </AppContextProvider>
-    );
-};
-
-export default App;

package/src/core/Assistive/Assistive.module.css

@@ -1,10 +0,0 @@
-.root {
-    height: .1rem;
-    left: -99em;
-    overflow: hidden;
-    pointer-events: none;
-    position: absolute;
-    top: auto;
-    white-space: nowrap;
-    width: .1rem;
-}

package/src/core/ChkRad/ChkRad.module.css

@@ -1,31 +0,0 @@
-.root {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    position: relative;
-}
-
-.rootIsDisabled {
-    pointer-events: none;
-}
-
-.label {
-    color: var(--clr-grey600);
-    display: block;
-    font-size: var(--fs-sml);
-    font-weight: var(--fw-bold);
-    padding-left: 1.5rem;
-}
-
-input[disabled] ~ .label {
-    opacity: .3;
-    pointer-events: none;
-}
-
-.input {
-    left: 0;
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-}

package/src/core/ChkRad/ChkRad.spec.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import ChkRad from './index';
-
-describe('ChkRad', () => {
-    it('should render', () => {
-        render(<ChkRad label="Lorem" name="lorem" />);
-    });
-
-    it('should render defaults', () => {
-        render(<ChkRad label="Lorem" name="lorem" />);
-        expect(screen.getByLabelText('Lorem')).toHaveAttribute('name', 'lorem');
-    });
-
-    it('should render disabled', () => {
-        render(<ChkRad label="Lorem" name="lorem" isDisabled />);
-
-        expect(screen.getByRole('checkbox')).toBeDisabled();
-        expect(screen.getByTestId('chkrad-root')).toHaveClass('root rootIsDisabled');
-    });
-
-    it('should render with react element as label', () => {
-        const Lorem: React.FunctionComponent = () => <span>Lorem</span>;
-        render(<ChkRad label={<Lorem />} name="lorem" />);
-
-        expect(screen.getByLabelText('Lorem')).toHaveAttribute('name', 'lorem');
-    });
-
-    it('should handle onChange', () => {
-        const mockFn = jest.fn();
-        render(<ChkRad label="Lorem" name="lorem" onChange={mockFn} value="lorem" />);
-
-        expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getByRole('checkbox'));
-        expect(mockFn).toHaveBeenCalledTimes(1);
-        expect(mockFn).toHaveBeenLastCalledWith({
-            item: { id: 'lorem', name: 'Lorem' },
-            target: { name: 'lorem', value: 'lorem' },
-        });
-    });
-
-    it('should handle onChange with no value', () => {
-        const mockFn = jest.fn();
-        render(<ChkRad label="Lorem" name="lorem" onChange={mockFn} />);
-
-        expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getByRole('checkbox'));
-        expect(mockFn).toHaveBeenCalledTimes(1);
-        expect(mockFn).toHaveBeenLastCalledWith({
-            item: { id: '', name: 'Lorem' },
-            target: { name: 'lorem', value: '' },
-        });
-    });
-
-    it('should handle click if no onChange', () => {
-        const mockFn = jest.fn();
-        render(<ChkRad label="Lorem" name="lorem" />);
-
-        expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getByRole('checkbox'));
-        expect(mockFn).toHaveBeenCalledTimes(0);
-    });
-
-    it('should handle onChange with react element as label', () => {
-        const Lorem: React.FunctionComponent = () => <span>Lorem</span>;
-        const mockFn = jest.fn();
-        render(<ChkRad label={<Lorem />} name="lorem" onChange={mockFn} value="lorem" />);
-
-        expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getByRole('checkbox'));
-        expect(mockFn).toHaveBeenCalledTimes(1);
-        expect(mockFn).toHaveBeenLastCalledWith({
-            item: { id: 'lorem', name: '[object Object]' },
-            target: { name: 'lorem', value: 'lorem' },
-        });
-    });
-});

package/src/core/ChkRad/index.tsx

@@ -1,75 +0,0 @@
-import React, { useRef } from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import ChkRadIcon from '@core/ChkRadIcon';
-
-import type { InputProps } from '@utility/interfaces';
-
-import styles from './ChkRad.module.css';
-
-interface ChkRadProps extends InputProps<string> {
-    isChecked?: boolean;
-    label: React.ReactElement | string;
-    type?: 'checkbox' | 'radio';
-}
-
-/**
- * Either a checkbox or a radio button. The onChange event will return a string of the value of
- * the checked item.
- */
-const ChkRad: React.FunctionComponent<ChkRadProps> = ({
-    id,
-    isDisabled,
-    name,
-    label,
-    isChecked,
-    onChange,
-    type,
-    value,
-}) => {
-    const ref = useRef<HTMLDivElement>(null);
-
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-        if (onChange) {
-            const item = { id: event.target.value, name: String(label) };
-            const target = { name, value: event.target.value };
-            onChange({ item, target });
-        }
-    };
-
-    return (
-        <label
-            className={classNames(styles.root, isDisabled && styles.rootIsDisabled)}
-            data-testid="chkrad-root"
-        >
-            <input
-                checked={Boolean(isChecked)}
-                className={styles.input}
-                disabled={isDisabled}
-                id={id || name}
-                name={name}
-                onChange={handleChange}
-                type={type || 'checkbox'}
-                value={value}
-            />
-            <ChkRadIcon type={type} />
-            <div ref={ref} className={styles.label}>
-                {label}
-            </div>
-        </label>
-    );
-};
-
-ChkRad.propTypes = {
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-    name: PropTypes.string.isRequired,
-    id: PropTypes.string,
-    isChecked: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    type: PropTypes.oneOf(['checkbox', 'radio']),
-    value: PropTypes.string,
-    onChange: PropTypes.func,
-};
-
-export default ChkRad;

package/src/core/ChkRadIcon/ChkRadIcon.module.css

@@ -1,29 +0,0 @@
-.root {
-    align-items: center;
-    background-color: var(--clr-white);
-    border: .1rem var(--clr-grey500) solid;
-    border-radius: .3rem;
-    display: flex;
-    fill: var(--clr-white);
-    height: 2.4rem;
-    justify-content: center;
-    min-width: 2.4rem;
-    padding-bottom: .1rem;
-    top: 0;
-    width: 2.4rem;
-}
-
-.rootIsChecked,
-input:checked ~ .root {
-    background-color: var(--clr-primary);
-    border-color: var(--clr-primary);
-}
-
-input[disabled] ~ .root {
-    opacity: .3;
-    pointer-events: none;
-}
-
-.rootRadio {
-    border-radius: 50%;
-}

package/src/core/ChkRadIcon/index.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import { ucwords } from '@sqrzro/utility';
-
-import Icon from '@core/Icon';
-
-import styles from './ChkRadIcon.module.css';
-
-interface ChkRadIconProps {
-    isChecked?: boolean;
-    type?: 'checkbox' | 'radio';
-}
-
-const ChkRadIcon: React.FunctionComponent<ChkRadIconProps> = ({ isChecked, type = 'checkbox' }) => (
-    <i
-        className={classNames(
-            styles.root,
-            styles[`root${ucwords(type)}`],
-            isChecked && styles.rootIsChecked
-        )}
-    >
-        <Icon icon="check" />
-    </i>
-);
-
-ChkRadIcon.propTypes = {
-    isChecked: PropTypes.bool,
-    type: PropTypes.oneOf(['checkbox', 'radio']),
-};
-
-export default ChkRadIcon;