@sqrzro/admin 1.0.0-beta.1

package/src/components/Allow/index.tsx

@@ -0,0 +1,42 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import useAppContext from '@hooks/useAppContext';
+import type { Me } from '@hooks/useAppContext';
+
+interface AllowProps {
+    children: React.ReactNode;
+    permission?: string;
+}
+
+const hasPermission = (me: Me, permission?: string): boolean => {
+    if (!me.permissions || !permission) {
+        return true;
+    }
+    return me.permissions.includes(permission);
+};
+
+/**
+ * The `Allow` component is essentially a wrappy that lets a developer display or hide child content
+ * based on the permissions a particular user has.
+ *
+ * By default, the
+ */
+const Allow: React.FunctionComponent<AllowProps> = ({ children, permission }) => {
+    const { me } = useAppContext();
+
+    if (!me || !hasPermission(me, permission)) {
+        return null;
+    }
+
+    // Use the `Fragment` here to get around TS complaining about FunctionComponent
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <Fragment>{children}</Fragment>;
+};
+
+Allow.propTypes = {
+    children: PropTypes.node.isRequired,
+    permission: PropTypes.string,
+};
+
+export default Allow;

package/src/components/App/App.module.css

@@ -0,0 +1,22 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+}
+
+.loader {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    justify-content: center;
+}
+
+.main {
+    display: block;
+    padding-left: var(--banner-width);
+}
+
+.mainTopbar {
+    padding-left: 0;
+}

package/src/components/App/App.spec.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ApiService } from '@sqrzro/utility';
+
+import Scene from '@components/Scene';
+import { createMockRouter } from '@utility/MockRouter';
+
+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 config = { name: 'Lorem', navigation: [], paths: {} };
+const router = createMockRouter('lorem');
+
+describe('App', () => {
+    it('should render', () => {
+        render(<App Component={Component} config={config} router={router} />);
+        expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+
+    it('should render me', async () => {
+        // @ts-expect-error APIResponse not being available
+        jest.spyOn(ApiService, 'get').mockImplementation(() => ({
+            data: {
+                name: 'Lorem',
+            },
+        }));
+
+        render(<App Component={Component} config={config} router={router} />);
+
+        await waitFor(() => {
+            expect(screen.getByText('Component')).toBeInTheDocument();
+        });
+
+        expect(screen.getByTestId('me-panel-title')).toHaveTextContent('Lorem');
+    });
+
+    it('should render without layout', async () => {
+        render(<App Component={ComponentWithoutLayout} config={config} router={router} />);
+
+        await waitFor(() => {
+            expect(screen.getByText('ComponentWithoutLayout')).toBeInTheDocument();
+        });
+
+        expect(screen.queryByTestId('me-panel-title')).not.toBeInTheDocument();
+    });
+
+    it('should render with layout', async () => {
+        render(<App Component={ComponentWithLayout} config={config} router={router} />);
+
+        await waitFor(() => {
+            expect(screen.getByText('Layout')).toBeInTheDocument();
+        });
+    });
+
+    it('should render logo', async () => {
+        render(<App Component={Component} Logo={Logo} config={config} router={router} />);
+
+        await waitFor(() => {
+            expect(screen.getByText('Logo')).toBeInTheDocument();
+        });
+    });
+
+    it('should render brand', async () => {
+        const configWithBrand = { ...config, style: { brand: '#000' } };
+
+        render(<App Component={Component} config={configWithBrand} router={router} />);
+
+        await waitFor(() => {
+            expect(screen.getByTestId('app-brand')).toBeInTheDocument();
+        });
+    });
+
+    it('should render brand without layout', async () => {
+        const configWithBrand = { ...config, style: { brand: '#000' } };
+
+        render(<App Component={ComponentWithoutLayout} config={configWithBrand} router={router} />);
+
+        await waitFor(() => {
+            expect(screen.getByTestId('app-brand')).toBeInTheDocument();
+        });
+    });
+
+    it('should render brand topbar', async () => {
+        const configWithLayout = { ...config, style: { layout: 'topbar' } };
+
+        render(<App Component={Component} config={configWithLayout} router={router} />);
+
+        await waitFor(() => {
+            expect(screen.getByRole('main')).toHaveClass('main mainTopbar');
+        });
+    });
+
+    it('should render scene', async () => {
+        render(<App Component={SceneComponent} config={config} router={router} />);
+
+        await waitFor(() => {
+            expect(screen.getByTestId('header-title')).toHaveTextContent('Scene Title');
+        });
+
+        expect(screen.getByText('Scene Content')).toBeInTheDocument();
+    });
+
+    it('should open mepanel', async () => {
+        render(<App Component={Component} Logo={Logo} config={config} router={router} />);
+
+        await waitFor(() => {
+            expect(screen.getByRole('button', { name: 'Lorem' })).toBeInTheDocument();
+        });
+
+        expect(screen.getByTestId('me-panel-root')).not.toHaveClass('rootIsOpen');
+        userEvent.click(screen.getByRole('button', { name: 'Lorem' }));
+        expect(screen.getByTestId('me-panel-root')).toHaveClass('rootIsOpen');
+    });
+});

package/src/components/App/index.tsx

@@ -0,0 +1,108 @@
+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 { Config, 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 'modern-normalize';
+import '../../styles/variables.css';
+import '../../styles/layout.css';
+
+import type { SceneComponentType } from '@utility/interfaces';
+import { AppPropTypes } from '@utility/prop-types';
+
+import styles from './App.module.css';
+
+const AUTH_ROUTE = '/auth/';
+
+export interface AppProps {
+    Component: SceneComponentType;
+    Logo?: React.ComponentType | null;
+    config?: Config;
+    router: NextRouter;
+}
+
+export type AppType = React.FunctionComponent<AppProps> & {
+    getInitialProps: (context: AppContext) => Promise<AppInitialProps>;
+};
+
+/* eslint-disable @typescript-eslint/naming-convention */
+const App: React.FunctionComponent<AppProps> = ({
+    Component,
+    config,
+    Logo,
+    router,
+    ...pageProps
+}) => {
+    const [me, setMe] = useState<Me>();
+
+    const getMe = async (): Promise<void> => {
+        try {
+            const response = await ApiService.get('me');
+            setMe({ name: '', ...response.data } as Me);
+        } catch (err) {} // eslint-disable-line no-empty
+    };
+
+    useEffect(() => {
+        void getMe();
+    }, []);
+
+    if (!config || (!me && !router.route.startsWith(AUTH_ROUTE))) {
+        return (
+            <div className={styles.loader}>
+                <Loader />
+            </div>
+        );
+    }
+
+    const { brand, layout } = config.style || {};
+
+    if (Component.hasLayout === false) {
+        return (
+            <AppContextProvider value={{ ...config, Logo, me }}>
+                {typeof brand !== 'undefined' && (
+                    <style data-testid="app-brand">{`:root { --clr-brand: ${brand} }`}</style>
+                )}
+                <Component router={router} {...pageProps} />
+                <Toast />
+            </AppContextProvider>
+        );
+    }
+
+    return (
+        <AppContextProvider value={{ ...config, Logo, me }}>
+            {typeof brand !== 'undefined' && (
+                <style data-testid="app-brand">{`:root { --clr-brand: ${brand} }`}</style>
+            )}
+            <div className={styles.root}>
+                <Banner />
+                <main className={classNames(styles.main, layout === 'topbar' && styles.mainTopbar)}>
+                    <AppHeader />
+                    {Component.Layout ? (
+                        <Component.Layout>
+                            <Component router={router} {...pageProps} />
+                        </Component.Layout>
+                    ) : (
+                        <Component router={router} {...pageProps} />
+                    )}
+                </main>
+            </div>
+            <ConfirmModal />
+            <Toast />
+        </AppContextProvider>
+    );
+};
+
+App.propTypes = AppPropTypes;
+
+export default App;

package/src/components/AutoSuggest/AutoSuggest.module.css

@@ -0,0 +1,8 @@
+.root {
+    position: relative;
+    z-index: 1;
+}
+
+.rootOpen {
+    z-index: 2;
+}

package/src/components/AutoSuggest/AutoSuggest.spec.tsx

@@ -0,0 +1,211 @@
+import React from 'react';
+import { render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import fetch from 'jest-fetch-mock';
+
+import { ApiService } from '@sqrzro/utility';
+
+import TestChangeHandler from '@utility/TestChangeHandler';
+
+import AutoSuggest from './index';
+
+const mockData = ['apple', 'banana', 'bandana', 'carrot'];
+const mockObjectData = [
+    { id: 1, name: 'apple', meta: 'lorem' },
+    { id: 2, name: 'banana', meta: 'ipsum' },
+];
+
+describe('AutoSuggest', () => {
+    beforeEach(() => {
+        fetch.resetMocks();
+    });
+
+    it('should render', () => {
+        render(<AutoSuggest name="lorem" />);
+    });
+
+    it('should handle opening (and clickoutside)', async () => {
+        render(
+            <TestChangeHandler>
+                <AutoSuggest data={mockData} name="lorem" />
+                <div>[DOM]</div>
+            </TestChangeHandler>
+        );
+
+        const input = screen.getByRole('textbox');
+
+        expect(screen.queryAllByRole('option')).toHaveLength(0);
+
+        userEvent.type(input, 'ban');
+
+        await waitFor(() => {
+            expect(screen.queryAllByRole('option')).toHaveLength(2);
+        });
+
+        userEvent.click(screen.getByText('[DOM]'));
+        await waitForElementToBeRemoved(screen.queryAllByRole('option'));
+    });
+
+    it('should handle an error getting data', async () => {
+        jest.spyOn(ApiService, 'get').mockImplementationOnce(() => {
+            throw new Error('lorem');
+        });
+
+        render(<AutoSuggest name="lorem" remote="data" />);
+
+        const input = screen.getByRole('textbox');
+        userEvent.type(input, 'ban');
+
+        await waitFor(() => {
+            expect(screen.getByText(/^Something's gone wrong/u)).toBeInTheDocument();
+        });
+    });
+
+    it('should handle remote suggestions', async () => {
+        const mockFn = fetch.mockResponse(JSON.stringify({ data: ['banana', 'bandana'] }));
+
+        render(
+            <TestChangeHandler>
+                <AutoSuggest name="lorem" remote="data" />
+            </TestChangeHandler>
+        );
+
+        const input = screen.getByRole('textbox');
+        userEvent.type(input, 'ban');
+
+        await waitFor(() => {
+            expect(mockFn).toHaveBeenCalledTimes(3);
+        });
+
+        expect(mockFn).toHaveBeenLastCalledWith(
+            '/data?search=ban',
+            expect.objectContaining({ method: 'get' })
+        );
+
+        await waitFor(() => {
+            expect(screen.queryAllByRole('option')).toHaveLength(2);
+        });
+
+        expect(screen.queryAllByRole('option')[0]).toHaveTextContent(/^bananaSelect$/u);
+    });
+
+    it('should handle suggestion objects', async () => {
+        render(
+            <TestChangeHandler>
+                <AutoSuggest data={mockObjectData} name="lorem" />
+            </TestChangeHandler>
+        );
+
+        const input = screen.getByRole('textbox');
+        userEvent.type(input, 'ban');
+
+        await waitFor(() => {
+            expect(screen.queryAllByRole('option')).toHaveLength(1);
+        });
+
+        expect(screen.queryAllByRole('option')[0]).toHaveTextContent(/^bananaipsumSelect$/u);
+    });
+
+    it('should handle remote suggestion objects', async () => {
+        fetch.mockResponse(JSON.stringify({ data: [mockObjectData[0]] }));
+
+        render(
+            <TestChangeHandler>
+                <AutoSuggest name="lorem" remote="data" />
+            </TestChangeHandler>
+        );
+
+        const input = screen.getByRole('textbox');
+        userEvent.type(input, 'app');
+
+        await waitFor(() => {
+            expect(screen.queryAllByRole('option')).toHaveLength(1);
+        });
+
+        expect(screen.queryAllByRole('option')[0]).toHaveTextContent(/^appleloremSelect$/u);
+    });
+
+    it('should handle no suggestions', async () => {
+        fetch.mockResponseOnce(JSON.stringify({ data: null }));
+
+        render(
+            <TestChangeHandler>
+                <AutoSuggest name="lorem" remote="data" />
+            </TestChangeHandler>
+        );
+
+        const input = screen.getByRole('textbox');
+        userEvent.type(input, 'ban');
+
+        await waitFor(() => {
+            expect(screen.queryAllByRole('option')).toHaveLength(0);
+        });
+    });
+
+    it('should handle change if no data or remote', () => {
+        render(<AutoSuggest name="lorem" />);
+
+        const input = screen.getByRole('textbox');
+
+        expect(screen.queryAllByRole('option')).toHaveLength(0);
+
+        userEvent.type(input, 'ban');
+        expect(screen.queryAllByRole('option')).toHaveLength(0);
+    });
+
+    it('should handle onChange (through typing)', () => {
+        render(
+            <TestChangeHandler>
+                <AutoSuggest name="lorem" />
+            </TestChangeHandler>
+        );
+
+        userEvent.type(screen.getByRole('textbox'), 'ban');
+
+        expect(screen.getByRole('textbox')).toHaveValue('ban');
+        expect(screen.getByTestId('test-change-handler-value')).toHaveTextContent('ban');
+    });
+
+    it('should handle onChange (through suggestion)', () => {
+        render(
+            <TestChangeHandler>
+                <AutoSuggest data={mockData} name="lorem" />
+            </TestChangeHandler>
+        );
+
+        userEvent.type(screen.getByRole('textbox'), 'ban');
+
+        expect(screen.getByRole('textbox')).toHaveValue('ban');
+        expect(screen.getByTestId('test-change-handler-value')).toHaveTextContent('ban');
+
+        userEvent.click(screen.queryAllByRole('button')[0]);
+
+        expect(screen.getByRole('textbox')).toHaveValue('banana');
+        expect(screen.getByTestId('test-change-handler-value')).toHaveTextContent('banana');
+    });
+
+    it('should close if value is deleted', async () => {
+        render(
+            <TestChangeHandler>
+                <AutoSuggest data={mockData} name="lorem" />
+            </TestChangeHandler>
+        );
+
+        userEvent.type(screen.getByRole('textbox'), 'a');
+
+        await waitFor(() => {
+            expect(screen.queryAllByRole('option')).toHaveLength(1);
+        });
+
+        userEvent.type(screen.getByRole('textbox'), '{backspace}');
+
+        await waitFor(() => {
+            expect(screen.queryAllByRole('option')).toHaveLength(0);
+        });
+    });
+
+    it('should pass a form error through', () => {
+        render(<AutoSuggest name="lorem" hasError />);
+        expect(screen.getByRole('textbox')).toHaveClass('input inputHasError');
+    });
+});

package/src/components/AutoSuggest/AutoSuggest.story.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import AutoSuggest from './index';
+
+import TestChangeHandler from '@utility/TestChangeHandler';
+import StorybookPanel from '@utility/StorybookPanel';
+
+export default {
+    title: 'Components/AutoSuggest',
+    component: AutoSuggest,
+    decorators: [
+        (storyFn: () => React.ReactElement): React.ReactElement => (
+            <StorybookPanel>
+                <TestChangeHandler>{storyFn()}</TestChangeHandler>
+            </StorybookPanel>
+        ),
+    ],
+};
+
+const data = ['apple', 'banana', 'bandana', 'carrot', 'dessert'];
+const objectData = [
+    { id: 1, name: 'apple' },
+    { id: 2, name: 'banana' },
+    { id: 3, name: 'carrot' },
+];
+
+export const Basic = (): React.ReactElement => <AutoSuggest data={data} name="lorem" />;
+
+export const WithObjectArray = (): React.ReactElement => (
+    <AutoSuggest data={objectData} name="lorem" />
+);