@sqrzro/admin 1.0.0-beta.1

package/src/components/List/List.spec.tsx

@@ -0,0 +1,311 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { EventService } from '@sqrzro/utility';
+
+import Tag from '@components/Tag';
+
+import type { SimpleAction, TransformedObject } from '@utility/interfaces';
+
+import List from './index';
+
+jest.mock('@components/Link');
+
+const mockData = [
+    {
+        id: 1,
+        title: 'Lorem Ipsum',
+    },
+    {
+        id: 2,
+        title: 'Adiscit Exceptor',
+    },
+];
+
+const mockDataWithMeta = [
+    {
+        id: 1,
+        title: 'Lorem Ipsum',
+        meta: ['Lorem', 'Ipsum'],
+    },
+];
+
+describe('List', () => {
+    const { location } = window;
+
+    afterEach(() => {
+        window.location = location;
+    });
+
+    it('should render', () => {
+        render(<List />);
+    });
+
+    it('should render defaults', () => {
+        render(<List data={mockData} />);
+        expect(screen.getByRole('list')).toHaveClass('root');
+    });
+
+    it('should render no data', () => {
+        render(<List />);
+        expect(screen.getByRole('heading')).toHaveTextContent(/^No results found$/u);
+    });
+
+    it('should render with empty data', () => {
+        render(<List data={[]} />);
+        expect(screen.getByRole('heading')).toHaveTextContent(/^No results found$/u);
+    });
+
+    it('should render list items', () => {
+        render(<List data={mockData} />);
+
+        const listItems = screen.queryAllByRole('listitem');
+        const [firstTitle] = screen.queryAllByRole('heading');
+
+        expect(listItems).toHaveLength(2);
+        expect(firstTitle).toHaveTextContent(/^Lorem Ipsum$/u);
+    });
+
+    it('should be disabled', () => {
+        render(<List data={mockData} isDisabled />);
+        expect(screen.getByRole('list')).toHaveClass('root rootIsDisabled');
+    });
+
+    it('should use transformer', () => {
+        const transformer = (item: Record<string, unknown>): TransformedObject => ({
+            $id: item.id as number,
+            title: `[[${item.title as string}]]`,
+        });
+
+        render(<List data={mockData} transformer={transformer} />);
+
+        const listItems = screen.queryAllByRole('listitem');
+        const [firstTitle] = screen.queryAllByRole('heading');
+
+        expect(listItems).toHaveLength(2);
+        expect(firstTitle).toHaveTextContent(/^\[\[Lorem Ipsum\]\]$/u);
+    });
+
+    it('should use transformer with actions', () => {
+        const transformer = (item: Record<string, unknown>): TransformedObject => ({
+            $id: item.id as number,
+            title: item.title as string,
+        });
+
+        const mockFn = jest.fn();
+        const actions = [{ label: 'Lorem', onClick: mockFn }];
+
+        render(<List data={mockData} transformer={[transformer, actions]} />);
+
+        const buttons = screen.queryAllByText('Lorem');
+
+        expect(buttons).toHaveLength(2);
+        expect(buttons[0]).toBeInstanceOf(HTMLButtonElement);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(buttons[0]);
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should use transformer with actions function', () => {
+        const transformer = (item: Record<string, unknown>): TransformedObject => ({
+            $id: item.id as number,
+            title: item.title as string,
+        });
+
+        const mockFn = jest.fn();
+        const actions = (): SimpleAction[] => [{ label: 'Lorem', onClick: mockFn }];
+
+        render(<List data={mockData} transformer={[transformer, actions]} />);
+
+        const buttons = screen.queryAllByText('Lorem');
+
+        expect(buttons).toHaveLength(2);
+        expect(buttons[0]).toBeInstanceOf(HTMLButtonElement);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(buttons[0]);
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle toggle actions', () => {
+        const transformer = (item: Record<string, unknown>): TransformedObject => ({
+            $id: item.id as number,
+            title: item.title as string,
+        });
+
+        const mockFn = jest.fn();
+        const actions = [{ label: 'Lorem', onClick: mockFn }];
+
+        render(<List data={mockData} transformer={[transformer, actions]} />);
+
+        userEvent.click(screen.queryAllByText('Open')[0]);
+        expect(screen.queryAllByRole('list')[1]).toHaveClass('listIsOpen');
+
+        userEvent.click(screen.queryAllByText('Close')[0]);
+        expect(screen.queryAllByRole('list')[1]).not.toHaveClass('listIsOpen');
+    });
+
+    it('should handle onclick', () => {
+        const mockFn = jest.fn();
+        const data = mockDataWithMeta.map((item) => ({ ...item, onClick: mockFn }));
+        render(<List data={data} />);
+
+        expect(screen.getByRole('button')).toHaveTextContent(/^Lorem Ipsum$/u);
+
+        userEvent.click(screen.getByRole('button'));
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should have a to prop', () => {
+        const mockFn = jest.fn();
+        const data = mockDataWithMeta.map((item) => ({ ...item, onClick: mockFn, to: 'lorem' }));
+        render(<List data={data} />);
+
+        expect(screen.getByRole('link')).toHaveAttribute('href', '/lorem');
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(screen.getByRole('link'));
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should render no title', () => {
+        const data = [{ $id: 1 }, { $id: 2 }];
+        render(<List data={data} />);
+        expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+    });
+
+    it('should handle preloadtitle', () => {
+        const data = mockDataWithMeta.map((item) => ({
+            ...item,
+            to: 'lorem',
+            $shouldPreloadTitle: true,
+        }));
+        render(<List data={data} />);
+
+        expect(EventService.publish).toHaveBeenCalledTimes(0);
+        userEvent.click(screen.getByRole('link'));
+        expect(EventService.publish).toHaveBeenCalledTimes(1);
+        expect(EventService.publish).toHaveBeenCalledWith('@app/title', 'Lorem Ipsum');
+    });
+
+    it('should handle preloadtitle with onclick', () => {
+        const mockFn = jest.fn();
+        const data = mockDataWithMeta.map((item) => ({
+            ...item,
+            onClick: mockFn,
+            to: 'lorem',
+            $shouldPreloadTitle: true,
+        }));
+        render(<List data={data} />);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(screen.getByRole('link'));
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should render secondary title', () => {
+        const data = mockDataWithMeta.map((item) => ({
+            ...item,
+            secondary: { title: 'Secondary' },
+        }));
+        render(<List data={data} />);
+        expect(screen.getByText('Secondary')).toBeInTheDocument();
+        expect(screen.getByText('Secondary')).toHaveClass('title');
+    });
+
+    it('should render content', () => {
+        const data = mockDataWithMeta.map((item) => ({ ...item, content: 'Content' }));
+        render(<List data={data} />);
+        expect(screen.getByText('Content')).toBeInTheDocument();
+        expect(screen.getByText('Content')).toHaveClass('content');
+    });
+
+    it('should have meta items', () => {
+        render(<List data={mockDataWithMeta} />);
+        expect(screen.getByText(/^Lorem$/u)).toBeInTheDocument();
+        expect(screen.getByText(/^Ipsum$/u)).toBeInTheDocument();
+    });
+
+    it('should have meta items with link', () => {
+        const data = mockDataWithMeta.map((item) => ({
+            ...item,
+            meta: [{ label: 'Lorem', to: 'lorem' }],
+        }));
+        render(<List data={data} />);
+
+        expect(screen.getByText(/^Lorem$/u)).toBeInTheDocument();
+        expect(screen.getByText(/^Lorem$/u)).toHaveAttribute('href', '/lorem');
+    });
+
+    it('should have meta with null', () => {
+        const data = mockDataWithMeta.map((item) => ({ ...item, meta: [null, 'Ipsum'] }));
+        render(<List data={data} />);
+
+        expect(screen.queryByText(/^Lorem$/u)).not.toBeInTheDocument();
+    });
+
+    it('should have meta with react element', () => {
+        const data = mockDataWithMeta.map((item) => ({
+            ...item,
+            meta: [<Tag key={0}>Lorem</Tag>],
+        }));
+        render(<List data={data} />);
+
+        expect(screen.getByText(/^Lorem$/u)).toBeInTheDocument();
+        expect(screen.getByText(/^Lorem$/u)).toHaveClass('root');
+    });
+
+    it('should have pagination', () => {
+        render(<List data={mockData} pagination={{ activePage: 1, pageCount: 2 }} />);
+
+        expect(screen.queryAllByTestId('pagination-item-link')).toHaveLength(2);
+        expect(screen.queryAllByTestId('pagination-item-link')[0]).toHaveTextContent(/^1$/u);
+        expect(screen.getByText(/^1$/u)).toHaveClass('link linkIsActive');
+    });
+
+    it('should not have if pagination only has one page', () => {
+        render(<List data={mockData} pagination={{ activePage: 1, pageCount: 1 }} />);
+        expect(screen.queryByTestId('pagination-item-link')).not.toBeInTheDocument();
+    });
+
+    it('should have pagination with lots of pages', () => {
+        render(<List data={mockData} pagination={{ activePage: 20, pageCount: 56 }} />);
+
+        const links = screen.queryAllByTestId('pagination-item-link');
+
+        expect(screen.queryAllByTestId('pagination-item-link')).toHaveLength(5);
+        expect(links[0]).toHaveTextContent(/^1$/u);
+        expect(links[1]).toHaveTextContent(/^19$/u);
+        expect(links[2]).toHaveTextContent(/^20$/u);
+        expect(links[3]).toHaveTextContent(/^21$/u);
+        expect(links[4]).toHaveTextContent(/^56$/u);
+
+        expect(screen.getByText(/^20$/u)).toHaveClass('linkIsActive');
+
+        expect(screen.queryAllByTestId('pagination-item-gap')).toHaveLength(2);
+    });
+
+    it('should have pagination on the last page', () => {
+        render(<List data={mockData} pagination={{ activePage: 10, pageCount: 10 }} />);
+
+        expect(screen.queryAllByTestId('pagination-item-link')).toHaveLength(4);
+        expect(screen.queryAllByTestId('pagination-item-link')[3]).toHaveTextContent(/^10$/u);
+        expect(screen.getByText(/^10$/u)).toHaveClass('linkIsActive');
+    });
+
+    it('should create correct pagination link url', () => {
+        render(<List data={mockData} pagination={{ activePage: 10, pageCount: 10 }} />);
+        expect(screen.getByText(/^1$/u)).toHaveAttribute('href', '/?page=1');
+    });
+
+    it('should create correct pagination link url with existing query', () => {
+        // @ts-expect-error The operand of a 'delete' operator must be optional.
+        delete window.location;
+        window.location = { ...location, search: '?lorem=ipsum' };
+
+        render(<List data={mockData} pagination={{ activePage: 10, pageCount: 10 }} />);
+        expect(screen.getByText(/^1$/u)).toHaveAttribute('href', '/?lorem=ipsum&page=1');
+    });
+});

package/src/components/List/List.story.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import type { Story } from '@storybook/react';
+
+import Tag from '@components/Tag';
+import type { SimpleAction, TransformedObject } from '@utility/interfaces';
+
+import List from './index';
+import type { ListProps } from './index';
+
+export default {
+    title: 'Components/List',
+    component: List,
+};
+
+const meta = ['Dolor', 'Adiscit'];
+const secondary = { title: 'Exceptor' };
+const to = 'http://example.com';
+
+const basicData = [
+    { $id: 1, title: 'Lorem Ipsum' },
+    { $id: 2, title: 'Dolor Sit Amet' },
+];
+
+const data: TransformedObject[] = basicData.map((item) => ({ ...item, meta, secondary, to }));
+
+const transformer = (item: Record<string, unknown>): TransformedObject => ({
+    ...item,
+    $id: item.$id as number,
+    title: `[[${item.title as string}]]`,
+});
+
+const transformerWithTag = (item: Record<string, unknown>): TransformedObject => ({
+    ...transformer(item),
+    meta: [
+        <Tag key="dolor" variant="success">
+            Dolor
+        </Tag>,
+        'Dolor',
+        'Adiscit',
+    ],
+});
+
+const actions: SimpleAction[] = [
+    {
+        label: 'Lorem',
+        onClick: (): null => null,
+    },
+    {
+        label: 'Ipsum',
+        onClick: (): null => null,
+        variant: 'danger',
+    },
+];
+
+const Template: Story<ListProps> = (props) => <List {...props} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+    data,
+};
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+    data: basicData,
+};
+
+export const Transformed = Template.bind({});
+
+Transformed.args = {
+    data,
+    transformer,
+};
+
+export const Empty = Template.bind({});
+
+Empty.args = {};
+
+export const WithActions = Template.bind({});
+
+WithActions.args = {
+    data,
+    transformer: [transformer, actions],
+};
+
+export const WithTagMeta = Template.bind({});
+
+WithTagMeta.args = {
+    data,
+    transformer: transformerWithTag,
+};

package/src/components/List/index.tsx

@@ -0,0 +1,79 @@
+import React, { Fragment } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import EmptyMessage from '@core/EmptyMessage';
+import ListItem from '@core/ListItem';
+import Pagination from '@core/Pagination';
+
+import type { TransformedObject, Transformer } from '@utility/interfaces';
+
+import styles from './List.module.css';
+
+const DEFAULT_TRANSFORMER = (item: Record<string, unknown>): TransformedObject => ({
+    $id: item.id as number,
+    $original: item,
+    ...item,
+});
+
+const transformData = (
+    data: Record<string, unknown>[],
+    transformer: Transformer
+): TransformedObject[] => {
+    const [transformFn, actions] = Array.isArray(transformer) ? transformer : [transformer];
+    return data.map((item) => ({ ...transformFn(item), $actions: actions, $original: item }));
+};
+
+export interface ListProps {
+    data?: Record<string, unknown>[];
+    isDisabled?: boolean;
+    pagination?: { activePage: number; pageCount: number } | null;
+    transformer?: Transformer;
+}
+
+/**
+ * Displays a list of items. Each item in the `data` prop is passed through the `transformer`
+ * function and then displayed. For more information about what `transformer` options are
+ * available, take a look at the `ListItem` documentation.
+ *
+ * The only value that is required for each transformed item is an `$id` as this is used for the
+ * `key` prop.
+ *
+ * If there is no data, an `EmptyMessage` is displayed.
+ */
+const List: React.FunctionComponent<ListProps> = ({
+    data,
+    pagination,
+    transformer,
+    isDisabled,
+}) => {
+    if (!data || !data.length) {
+        return <EmptyMessage />;
+    }
+
+    const transformed = transformData(data, transformer || DEFAULT_TRANSFORMER);
+
+    return (
+        <Fragment>
+            <ul className={classNames(styles.root, isDisabled && styles.rootIsDisabled)}>
+                {transformed.map((item) => (
+                    <li key={item.$id}>
+                        <ListItem {...item} />
+                    </li>
+                ))}
+            </ul>
+            {pagination && <Pagination isDisabled={isDisabled} {...pagination} />}
+        </Fragment>
+    );
+};
+
+List.propTypes = {
+    data: PropTypes.arrayOf(PropTypes.shape({}).isRequired),
+    isDisabled: PropTypes.bool,
+    pagination: PropTypes.shape({
+        activePage: PropTypes.number.isRequired,
+        pageCount: PropTypes.number.isRequired,
+    }),
+};
+
+export default List;

package/src/components/ListActions/ListActions.spec.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import ListActions from './index';
+
+describe('ListActions', () => {
+    it('should render', () => {
+        render(<ListActions label="Lorem" />);
+    });
+});

package/src/components/ListActions/ListActions.story.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import ListActions from './index';
+
+export default { title: 'Components/ListActions', component: ListActions };
+
+export const Default = (): React.ReactElement => <ListActions label="Lorem Ipsum" />;

package/src/components/ListActions/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import FixedActions from '@core/FixedActions';
+
+interface ListActionsProps {
+    children?: React.ReactNode;
+    label: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    to?: string;
+}
+
+const ListActions: React.FunctionComponent<ListActionsProps> = ({
+    children,
+    label,
+    to,
+    onClick,
+}) => (
+    <FixedActions label={label} onClick={onClick} to={to}>
+        {children}
+    </FixedActions>
+);
+
+ListActions.propTypes = {
+    label: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    to: PropTypes.string,
+    onClick: PropTypes.func,
+};
+
+export default ListActions;

package/src/components/LoginForm/LoginForm.module.css

@@ -0,0 +1,21 @@
+.root {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 80vh;
+    justify-content: center;
+    margin: 0 auto;
+    max-width: 48rem;
+    padding: 4rem clamp(2rem, 3.5vw, 5rem);
+}
+
+.logo {
+    background-color: var(--clr-brand);
+    border-radius: 0 0 .5rem .5rem;
+    display: flex;
+    flex-direction: column;
+    height: 10rem;
+    justify-content: center;
+    margin: -3rem auto 3rem;
+    width: 6rem;
+}

package/src/components/LoginForm/LoginForm.spec.tsx

@@ -0,0 +1,63 @@
+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 { createMockRouter } from '@utility/MockRouter';
+
+import LoginForm from './index';
+
+const router = createMockRouter('lorem');
+const routerWithQuery = createMockRouter('lorem', { username: 'ipsum' });
+
+describe('LoginForm', () => {
+    it('should render', () => {
+        render(<LoginForm router={router} />);
+        expect(screen.getByRole('button', { name: 'Log In' })).toHaveTextContent('Log In');
+    });
+
+    it('should have reverse logo', () => {
+        render(<LoginForm router={router} />);
+        expect(screen.getByTestId('app-logo-placeholder')).toHaveClass(
+            'placeholder placeholderIsReverse'
+        );
+    });
+
+    it('should have predefined username', () => {
+        render(<LoginForm router={routerWithQuery} />);
+        expect(screen.getByRole('textbox', { name: 'Username' })).toHaveValue('ipsum');
+    });
+
+    it('should handle submit success', async () => {
+        // @ts-expect-error APIResponse not being available
+        jest.spyOn(ApiService, 'request').mockImplementationOnce(() => ({
+            data: { token: 'lorem' },
+        }));
+
+        render(<LoginForm router={router} />);
+        userEvent.click(screen.getByRole('button', { name: 'Log In' }));
+
+        await waitFor(() => {
+            expect(AuthService.login).toHaveBeenCalledTimes(1);
+        });
+
+        expect(AuthService.login).toHaveBeenLastCalledWith('lorem');
+    });
+
+    it('should handle submit success via keyboard', async () => {
+        // @ts-expect-error APIResponse not being available
+        jest.spyOn(ApiService, 'request').mockImplementationOnce(() => ({
+            data: { token: 'lorem' },
+        }));
+
+        render(<LoginForm router={router} />);
+        userEvent.type(screen.getByRole('textbox', { name: 'Username' }), '{enter}');
+
+        await waitFor(() => {
+            expect(AuthService.login).toHaveBeenCalledTimes(1);
+        });
+
+        expect(AuthService.login).toHaveBeenLastCalledWith('lorem');
+    });
+});