@sqrzro/admin 1.0.0-beta.7 → 2.0.0

package/src/components/ImageInput/index.tsx

@@ -1,23 +1,25 @@
+'use client';
+
 import React, { useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
-import Icon from '@core/Icon';
+import Icon from '../../core/Icon';
 
-import type { InputProps } from '@utility/interfaces';
+import type { InputProps } from '../../utility/interfaces';
 
-import styles from './ImageInput.module.css';
+// Import styles from './ImageInput.module.css';
 
 interface HTMLFileElement extends HTMLInputElement {
     files: FileList;
 }
 
-const ImageInput = ({
+function ImageInput({
     name,
     isDisabled,
     hasError,
     onChange,
-}: InputProps<File>): React.ReactElement => {
+}: InputProps<File>): React.ReactElement {
     const reader = useRef(new FileReader());
     const [preview, setPreview] = useState('');
 
@@ -53,25 +55,25 @@ const ImageInput = ({
 
     return (
         <div
-            className={classNames(
+            className="/*clsx(
                 styles.root,
                 hasError && styles.rootHasError,
                 isDisabled && styles.rootIsDisabled
-            )}
+            )*/"
             data-testid="image-input-root"
         >
             {preview ? (
-                <img className={styles.preview} src={preview} />
+                <img className="/*styles.preview*/" src={preview} />
             ) : (
-                <div className={styles.placeholder}>
+                <div className="/*styles.placeholder*/">
                     <Icon icon="upload" size={30} />
-                    <span className={styles.placeholderTitle}>Click to Upload</span>
-                    <em className={styles.placeholderDescription}>(or drop an image here)</em>
+                    <span className="/*styles.placeholderTitle*/">Click to Upload</span>
+                    <em className="/*styles.placeholderDescription*/">(or drop an image here)</em>
                 </div>
             )}
 
             <input
-                className={styles.input}
+                className="/*styles.input*/"
                 data-testid="image-input-input"
                 name={name}
                 onChange={handleChange}
@@ -79,7 +81,7 @@ const ImageInput = ({
             />
         </div>
     );
-};
+}
 
 ImageInput.propTypes = {
     name: PropTypes.string.isRequired,

package/src/components/InfoPanel/index.tsx

@@ -1,22 +1,22 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
-import useVariant from '@hooks/useVariant';
+import useVariant from '../../hooks/useVariant';
 
-import type { StyleVariant } from '@utility/interfaces';
+import type { StyleVariant } from '../../utility/interfaces';
 
-import styles from './InfoPanel.module.css';
+// Import styles from './InfoPanel.module.css';
 
 export interface InfoPanelProps {
     children: React.ReactNode;
     variant?: StyleVariant;
 }
 
-const InfoPanel: React.FunctionComponent<InfoPanelProps> = ({ children, variant }) => {
+function InfoPanel({ children, variant }: InfoPanelProps): React.ReactElement {
     const { applyVariantClassName } = useVariant(variant);
-    return <div className={classNames(styles.root, applyVariantClassName(styles))}>{children}</div>;
-};
+    return <div className="/*clsx(styles.root, applyVariantClassName(styles))*/">{children}</div>;
+}
 
 InfoPanel.propTypes = {
     children: PropTypes.node.isRequired,

package/src/components/Link/Link.spec.tsx

@@ -44,7 +44,9 @@ describe('Link', () => {
         expect(screen.getByRole('link')).toHaveAttribute('target', '_blank');
     });
 
-    it('should handle onclick', () => {
+    it('should handle onclick', async () => {
+        const user = userEvent.setup();
+
         const mockFn = jest.fn().mockImplementation((event: MouseEvent) => {
             event.preventDefault();
         });
@@ -56,7 +58,7 @@ describe('Link', () => {
         );
 
         expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getByRole('link'));
+        await user.click(screen.getByRole('link'));
         expect(mockFn).toHaveBeenCalledTimes(1);
     });
 });

package/src/components/Link/__mocks__/index.tsx

@@ -8,8 +8,8 @@ interface LinkRequire {
     default: React.FunctionComponent<LinkProps>;
 }
 
-const Link: React.FunctionComponent<LinkProps> = ({ onClick, ...props }) => {
-    const { default: ActualLink } = jest.requireActual<LinkRequire>('@components/Link');
+function Link({ onClick, ...props }: LinkProps): React.ReactElement {
+    const { default: ActualLink } = jest.requireActual<LinkRequire>('../Link');
 
     const handleClick = (event: React.MouseEvent<HTMLAnchorElement>): void => {
         event.preventDefault();
@@ -19,6 +19,6 @@ const Link: React.FunctionComponent<LinkProps> = ({ onClick, ...props }) => {
     };
 
     return <ActualLink {...props} onClick={handleClick} />;
-};
+}
 
 export default Link;

package/src/components/Link/index.tsx

@@ -8,7 +8,7 @@ interface WindowProps {
 }
 
 interface DataProps {
-    'data-test-id'?: string;
+    'data-test-id'?: string; // eslint-disable-line @typescript-eslint/naming-convention
 }
 
 interface LinkProps extends DataProps {
@@ -21,14 +21,14 @@ interface LinkProps extends DataProps {
 
 interface LinkElementProps extends Omit<LinkProps, 'children' | 'to'>, WindowProps {}
 
-const Link: React.FunctionComponent<LinkProps> = ({
+function Link({
     children,
     className,
     isNewWindow,
     onClick,
     to,
     ...dataProps
-}) => {
+}: LinkProps): React.ReactElement {
     const newWindowProps: WindowProps = isNewWindow
         ? { target: '_blank', rel: 'noopener noreferrer' }
         : {};
@@ -43,11 +43,11 @@ const Link: React.FunctionComponent<LinkProps> = ({
     }
 
     return (
-        <NextLink href={/^\//u.exec(to) ? to : `/${to}`}>
-            <a {...props}>{children}</a>
+        <NextLink href={/^\//u.exec(to) ? to : `/${to}`} {...props}>
+            {children}
         </NextLink>
     );
-};
+}
 
 Link.propTypes = {
     children: PropTypes.node.isRequired,

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

@@ -4,17 +4,18 @@ import userEvent from '@testing-library/user-event';
 
 import { EventService } from '@sqrzro/utility';
 
-import Tag from '@components/Tag';
+import Tag from '../Tag';
 
-import type { Action, SimpleObject, Transformer } from '@utility/interfaces';
+import type { Action, SimpleObject, Transformer } from '../../utility/interfaces';
 
 import List from './index';
 
-jest.mock('@components/Link');
+jest.mock('../Link');
 
 interface MockDataObject extends SimpleObject {
     id: string;
     title: string;
+    reference?: string;
     meta?: string[];
 }
 
@@ -29,6 +30,19 @@ const mockData: MockDataObject[] = [
     },
 ];
 
+const mockDataWithReference: MockDataObject[] = [
+    {
+        id: '1',
+        title: 'Lorem Ipsum',
+        reference: 'REF-1',
+    },
+    {
+        id: '2',
+        title: 'Adiscit Exceptor',
+        reference: 'REF-2',
+    },
+];
+
 const mockDataWithMeta: MockDataObject[] = [
     {
         id: '1',
@@ -68,7 +82,9 @@ describe('List', () => {
         expect(screen.getByRole('heading')).toHaveTextContent(/^Lorem$/u);
     });
 
-    it('should handle custom empty action', () => {
+    it('should handle custom empty action', async () => {
+        const user = userEvent.setup();
+
         const onClick = jest.fn();
         const action = { label: 'Lorem', onClick };
         render(<List data={[]} empty={{ action }} />);
@@ -76,7 +92,7 @@ describe('List', () => {
         expect(screen.getByRole('heading')).toHaveTextContent(/^No results found$/u);
 
         expect(onClick).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getByRole('button'));
+        await user.click(screen.getByRole('button'));
         expect(onClick).toHaveBeenCalledTimes(1);
     });
 
@@ -87,6 +103,13 @@ describe('List', () => {
         expect(screen.queryAllByRole('heading')[0]).toHaveTextContent(/^Lorem Ipsum$/u);
     });
 
+    it('should render list items with reference', () => {
+        render(<List data={mockDataWithReference} />);
+
+        expect(screen.queryAllByRole('listitem')).toHaveLength(2);
+        expect(screen.queryAllByRole('heading')[0]).toHaveTextContent(/^Lorem IpsumREF-1$/u);
+    });
+
     it('should be disabled', () => {
         render(<List data={mockData} isDisabled />);
         expect(screen.getByRole('list')).toHaveClass('root rootIsDisabled');
@@ -104,7 +127,9 @@ describe('List', () => {
         expect(screen.queryAllByRole('heading')[0]).toHaveTextContent(/^\[\[Lorem Ipsum\]\]$/u);
     });
 
-    it('should use transformer with actions', () => {
+    it('should use transformer with actions', async () => {
+        const user = userEvent.setup();
+
         const transformer: Transformer<MockDataObject> = (item) => ({
             $id: item.id,
             title: item.title,
@@ -119,11 +144,13 @@ describe('List', () => {
         expect(screen.queryAllByText('Lorem')[0]).toBeInstanceOf(HTMLButtonElement);
 
         expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.queryAllByText('Lorem')[0]);
+        await user.click(screen.queryAllByText('Lorem')[0]);
         expect(mockFn).toHaveBeenCalledTimes(1);
     });
 
-    it('should use transformer with actions function', () => {
+    it('should use transformer with actions function', async () => {
+        const user = userEvent.setup();
+
         const transformer: Transformer<MockDataObject> = (item) => ({
             $id: item.id,
             title: item.title,
@@ -138,11 +165,13 @@ describe('List', () => {
         expect(screen.queryAllByText('Lorem')[0]).toBeInstanceOf(HTMLButtonElement);
 
         expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.queryAllByText('Lorem')[0]);
+        await user.click(screen.queryAllByText('Lorem')[0]);
         expect(mockFn).toHaveBeenCalledTimes(1);
     });
 
-    it('should handle toggle actions', () => {
+    it('should handle toggle actions', async () => {
+        const user = userEvent.setup();
+
         const transformer: Transformer<MockDataObject> = (item) => ({
             $id: item.id,
             title: item.title,
@@ -153,10 +182,10 @@ describe('List', () => {
 
         render(<List data={mockData} transformer={[transformer, actions]} />);
 
-        userEvent.click(screen.queryAllByText('Open')[0]);
+        await user.click(screen.queryAllByText('Open')[0]);
         expect(screen.queryAllByRole('list')[1]).toHaveClass('listIsOpen');
 
-        userEvent.click(screen.queryAllByText('Close')[0]);
+        await user.click(screen.queryAllByText('Close')[0]);
         expect(screen.queryAllByRole('list')[1]).not.toHaveClass('listIsOpen');
     });
 
@@ -175,18 +204,22 @@ describe('List', () => {
         expect(screen.getAllByText('Action Label')[0]).toHaveClass('root rootIsDisabled');
     });
 
-    it('should handle onclick', () => {
+    it('should handle onclick', async () => {
+        const user = userEvent.setup();
+
         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'));
+        await user.click(screen.getByRole('button'));
         expect(mockFn).toHaveBeenCalledTimes(1);
     });
 
-    it('should have a to prop', () => {
+    it('should have a to prop', async () => {
+        const user = userEvent.setup();
+
         const mockFn = jest.fn();
         const data = mockDataWithMeta.map((item) => ({ ...item, onClick: mockFn, to: 'lorem' }));
         render(<List data={data} />);
@@ -194,7 +227,7 @@ describe('List', () => {
         expect(screen.getByRole('link')).toHaveAttribute('href', '/lorem');
 
         expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getByRole('link'));
+        await user.click(screen.getByRole('link'));
         expect(mockFn).toHaveBeenCalledTimes(1);
     });
 
@@ -204,7 +237,9 @@ describe('List', () => {
         expect(screen.queryByRole('heading')).not.toBeInTheDocument();
     });
 
-    it('should handle preloadtitle', () => {
+    it('should handle preloadtitle', async () => {
+        const user = userEvent.setup();
+
         const data = mockDataWithMeta.map((item) => ({
             ...item,
             to: 'lorem',
@@ -213,12 +248,14 @@ describe('List', () => {
         render(<List data={data} />);
 
         expect(EventService.publish).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getByRole('link'));
+        await user.click(screen.getByRole('link'));
         expect(EventService.publish).toHaveBeenCalledTimes(1);
         expect(EventService.publish).toHaveBeenCalledWith('@app/title', 'Lorem Ipsum');
     });
 
-    it('should handle preloadtitle with onclick', () => {
+    it('should handle preloadtitle with onclick', async () => {
+        const user = userEvent.setup();
+
         const mockFn = jest.fn();
         const data = mockDataWithMeta.map((item) => ({
             ...item,
@@ -229,7 +266,7 @@ describe('List', () => {
         render(<List data={data} />);
 
         expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getByRole('link'));
+        await user.click(screen.getByRole('link'));
         expect(mockFn).toHaveBeenCalledTimes(1);
     });
 

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import type { Story } from '@storybook/react';
 
-import Tag from '@components/Tag';
-import type { Action, SimpleObject, Transformer } from '@utility/interfaces';
+import Tag from '../Tag';
+import type { Action, SimpleObject, Transformer } from '../../utility/interfaces';
+import StorybookPanel from '../../utility/StorybookPanel';
 
 import List from './index';
 import type { ListProps } from './index';
@@ -10,6 +11,11 @@ import type { ListProps } from './index';
 export default {
     title: 'Components/List',
     component: List,
+    decorators: [
+        (storyFn: () => React.ReactElement): React.ReactElement => (
+            <StorybookPanel>{storyFn()}</StorybookPanel>
+        ),
+    ],
 };
 
 const meta = ['Dolor', 'Adiscit'];
@@ -85,6 +91,19 @@ export const Empty = Template.bind({});
 
 Empty.args = {};
 
+export const EmptyCustom = Template.bind({});
+
+EmptyCustom.args = {
+    empty: {
+        title: 'Lorem',
+        description: 'Lorem ipsum dolor sit amet exceptor',
+        action: {
+            label: 'Lorem Ipsum',
+            onClick: (): null => null,
+        },
+    },
+};
+
 export const WithActions = Template.bind({});
 
 WithActions.args = {

package/src/components/List/index.tsx

@@ -1,20 +1,20 @@
 import React, { Fragment } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
-import EmptyMessage from '@core/EmptyMessage';
-import type { EmptyMessageProps } from '@core/EmptyMessage';
-import ListItem from '@core/ListItem';
-import Pagination from '@core/Pagination';
+import EmptyMessage from '../../core/EmptyMessage';
+import type { EmptyMessageProps } from '../../core/EmptyMessage';
+import ListItem from '../../core/ListItem';
+import Pagination from '../../core/Pagination';
 
 import type {
     SimpleObject,
     TransformedObject,
     Transformer,
     TransformerWithActions,
-} from '@utility/interfaces';
+} from '../../utility/interfaces';
 
-import styles from './List.module.css';
+// Import styles from './List.module.css';
 
 const defaultTransformer: Transformer = (item) => ({
     ...item,
@@ -51,14 +51,14 @@ export interface ListProps<T extends SimpleObject> {
  *
  * If there is no data, an `EmptyMessage` is displayed.
  */
-const List = <T extends SimpleObject>({
+function List<T extends SimpleObject>({
     data,
     empty,
     pagination,
     transformer,
     isDisabled,
-}: ListProps<T>): React.ReactElement => {
-    if (!data || !data.length) {
+}: ListProps<T>): React.ReactElement {
+    if (!data?.length) {
         return <EmptyMessage {...empty} />;
     }
 
@@ -66,17 +66,17 @@ const List = <T extends SimpleObject>({
 
     return (
         <Fragment>
-            <ul className={classNames(styles.root, isDisabled && styles.rootIsDisabled)}>
+            <ul className="/*clsx(styles.root, isDisabled && styles.rootIsDisabled)*/">
                 {transformed.map((item) => (
                     <li key={item.$id}>
                         <ListItem {...item} />
                     </li>
                 ))}
             </ul>
-            {pagination && <Pagination isDisabled={isDisabled} {...pagination} />}
+            {pagination ? <Pagination isDisabled={isDisabled} {...pagination} /> : null}
         </Fragment>
     );
-};
+}
 
 List.propTypes = {
     data: PropTypes.arrayOf(PropTypes.shape({}).isRequired),

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

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

package/src/components/ListActions/index.tsx

@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import FixedActions from '@core/FixedActions';
+import FixedActions from '../../core/FixedActions';
 
 interface ListActionsProps {
     children?: React.ReactNode;
@@ -10,16 +12,13 @@ interface ListActionsProps {
     to?: string;
 }
 
-const ListActions: React.FunctionComponent<ListActionsProps> = ({
-    children,
-    label,
-    to,
-    onClick,
-}) => (
-    <FixedActions label={label} onClick={onClick} to={to}>
-        {children}
-    </FixedActions>
-);
+function ListActions({ children, label, to, onClick }: ListActionsProps): React.ReactElement {
+    return (
+        <FixedActions label={label} onClick={onClick} to={to}>
+            {children}
+        </FixedActions>
+    );
+}
 
 ListActions.propTypes = {
     label: PropTypes.string.isRequired,

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

@@ -1,10 +1,12 @@
+/* eslint-disable no-undefined */
+
 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 { createMockRouter } from '../../utility/MockRouter';
 
 import LoginForm from './index';
 
@@ -23,34 +25,44 @@ describe('LoginForm', () => {
     });
 
     it('should handle submit success', async () => {
+        const user = userEvent.setup();
+
+        const mockFn = jest.fn();
+        AuthService.registerConfig({ context: [{ cookie: '' }, { cookie: mockFn }] });
+
         // @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 user.click(screen.getByRole('button', { name: 'Log In' }));
 
         await waitFor(() => {
-            expect(AuthService.login).toHaveBeenCalledTimes(1);
+            expect(mockFn).toHaveBeenCalledTimes(1);
         });
 
-        expect(AuthService.login).toHaveBeenLastCalledWith('lorem');
+        expect(mockFn).toHaveBeenLastCalledWith('token', 'lorem', undefined);
     });
 
     it('should handle submit success via keyboard', async () => {
+        const user = userEvent.setup();
+
+        const mockFn = jest.fn();
+        AuthService.registerConfig({ context: [{ cookie: '' }, { cookie: mockFn }] });
+
         // @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 user.type(screen.getByRole('textbox', { name: 'Username' }), '{enter}');
 
         await waitFor(() => {
-            expect(AuthService.login).toHaveBeenCalledTimes(1);
+            expect(mockFn).toHaveBeenCalledTimes(1);
         });
 
-        expect(AuthService.login).toHaveBeenLastCalledWith('lorem');
+        expect(mockFn).toHaveBeenLastCalledWith('token', 'lorem', undefined);
     });
 });

package/src/components/LoginForm/LoginForm.story.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Story } from '@storybook/react';
+
+import { createMockRouter } from '../../utility/MockRouter';
+import StorybookPanel from '../../utility/StorybookPanel';
+
+import LoginForm from './index';
+
+export default {
+    title: 'Components/LoginForm',
+    component: LoginForm,
+    decorators: [
+        (storyFn: () => React.ReactElement): React.ReactElement => (
+            <StorybookPanel>{storyFn()}</StorybookPanel>
+        ),
+    ],
+};
+
+const router = createMockRouter();
+
+const Template: Story = (props) => <LoginForm router={router} {...props} />;
+
+export const Basic = Template.bind({});
+
+Basic.args = { router };