@sqrzro/admin 2.0.0 → 2.1.0-bz.1

package/src/components/List/index.tsx

@@ -1,90 +1,70 @@
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 import clsx from 'clsx';
-import PropTypes from 'prop-types';
+import { EmptyMessage } from '@sqrzro/components';
+import type { ErrorablePromise } from '@sqrzro/server';
 
-import EmptyMessage from '../../core/EmptyMessage';
-import type { EmptyMessageProps } from '../../core/EmptyMessage';
-import ListItem from '../../core/ListItem';
-import Pagination from '../../core/Pagination';
+import FilterBar from '../FilterBar';
+import type { FilterMap } from '../FilterBar';
+import ListItem from '../ListItem';
+import type { ListObject } from '../ListItem';
 
-import type {
-    SimpleObject,
-    TransformedObject,
-    Transformer,
-    TransformerWithActions,
-} from '../../utility/interfaces';
-
-// Import styles from './List.module.css';
-
-const defaultTransformer: Transformer = (item) => ({
-    ...item,
-    $id: String(item.id),
-    $original: item,
-});
-
-const transformData = <T extends SimpleObject>(
-    data: T[],
-    transformer?: TransformerWithActions<T>
-): TransformedObject<T>[] => {
-    const [transformFn, actions] = Array.isArray(transformer)
-        ? transformer
-        : [transformer || defaultTransformer];
+export interface ListComponentProps {
+    params?: Record<string, string>;
+    searchParams?: Record<string, string>;
+}
 
-    return data.map((item) => ({ ...transformFn(item), $actions: actions, $original: item }));
-};
+export interface ListProps<T> {
+    actions?: ({ id }: { readonly id: number }) => React.ReactElement;
+    className?: string;
+    filters?: FilterMap;
+    fn: (
+        params?: Record<string, string>,
+        searchParams?: Record<string, string>
+    ) => ErrorablePromise<T[]>;
+    renderItem?: (props: ListObject) => React.ReactElement;
+    params?: Record<string, string>;
+    searchParams?: Record<string, string>;
+    transformer?: (item: T) => ListObject;
+}
 
-export interface ListProps<T extends SimpleObject> {
-    data?: T[];
-    empty?: EmptyMessageProps;
-    isDisabled?: boolean;
-    pagination?: { activePage: number; pageCount: number } | null;
-    transformer?: TransformerWithActions<T>;
+function defaultTransformer(): ListObject {
+    return {
+        id: 0,
+        title: '',
+    };
 }
 
-/**
- * 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.
- */
-function List<T extends SimpleObject>({
-    data,
-    empty,
-    pagination,
+async function List<T extends object>({
+    actions,
+    className,
+    filters,
+    fn,
+    params,
+    renderItem = ListItem,
+    searchParams,
     transformer,
-    isDisabled,
-}: ListProps<T>): React.ReactElement {
-    if (!data?.length) {
-        return <EmptyMessage {...empty} />;
+}: Readonly<ListProps<T>>): Promise<React.ReactElement> {
+    const [response, error] = await fn(params, searchParams);
+
+    if (error) {
+        return <div>ERRORROROR</div>;
     }
 
-    const transformed = transformData(data, transformer);
+    const data = response.map(transformer || defaultTransformer);
+    const hasFilters = Boolean(Object.keys(searchParams || []).length);
 
     return (
         <Fragment>
-            <ul className="/*clsx(styles.root, isDisabled && styles.rootIsDisabled)*/">
-                {transformed.map((item) => (
-                    <li key={item.$id}>
-                        <ListItem {...item} />
-                    </li>
-                ))}
-            </ul>
-            {pagination ? <Pagination isDisabled={isDisabled} {...pagination} /> : null}
+            {filters && (data.length || hasFilters) ? <FilterBar map={filters} /> : null}
+            {data.length ? (
+                <ul className={clsx(className)}>
+                    {data.map((item) => renderItem({ actions, ...item }))}
+                </ul>
+            ) : (
+                <EmptyMessage />
+            )}
         </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/ListAction/index.tsx

@@ -0,0 +1,25 @@
+import { ConfirmableButton } from '@sqrzro/components';
+import type { ConfirmableAction } from '@sqrzro/interfaces';
+
+interface ListActionProps extends ConfirmableAction<number> {
+    id: number;
+}
+
+function ListAction({
+    id,
+    onClick,
+    label,
+    variant,
+}: Readonly<ListActionProps>): React.ReactElement {
+    function handleClick(): void {
+        onClick(id);
+    }
+
+    return (
+        <ConfirmableButton onClick={handleClick} variant={variant} isText>
+            {label}
+        </ConfirmableButton>
+    );
+}
+
+export default ListAction;

package/src/components/ListActions/index.tsx

@@ -1,30 +1,43 @@
 'use client';
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import { useClickOutside } from '@sqrzro/hooks';
+import type { ConfirmableAction } from '@sqrzro/interfaces';
 
-import FixedActions from '../../core/FixedActions';
+import ListAction from '../ListAction';
 
-interface ListActionsProps {
-    children?: React.ReactNode;
-    label: string;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    to?: string;
+export interface ListActionsProps {
+    actions: ConfirmableAction<number>[];
+    id: number;
 }
 
-function ListActions({ children, label, to, onClick }: ListActionsProps): React.ReactElement {
+function ListActions({ actions, id }: Readonly<ListActionsProps>): React.ReactElement {
+    const [isOpen, setIsOpen, ref] = useClickOutside();
+
+    function toggleIsOpen(): void {
+        setIsOpen(!isOpen);
+    }
+
     return (
-        <FixedActions label={label} onClick={onClick} to={to}>
-            {children}
-        </FixedActions>
+        <div ref={ref} className="flex flex-row-reverse items-center gap-4">
+            <button
+                className="h-4 rotate-90 text-xs leading-[1em] tracking-tighter text-slate-500"
+                onClick={toggleIsOpen}
+                type="button"
+            >
+                &bull;&bull;&bull;
+                <span className="sr-only">{isOpen ? 'Close' : 'Open'} Actions</span>
+            </button>
+            {isOpen ? (
+                <ul className="showpanel relative flex origin-right gap-4 bg-white before:absolute before:left-[-999em] before:right-full before:h-full before:bg-white/80">
+                    {actions.map(({ label, onClick, variant }) => (
+                        <li key={label}>
+                            <ListAction id={id} label={label} onClick={onClick} variant={variant} />
+                        </li>
+                    ))}
+                </ul>
+            ) : null}
+        </div>
     );
 }
 
-ListActions.propTypes = {
-    label: PropTypes.string.isRequired,
-    children: PropTypes.node,
-    to: PropTypes.string,
-    onClick: PropTypes.func,
-};
-
 export default ListActions;

package/src/components/ListItem/index.tsx

@@ -0,0 +1,56 @@
+import { Link } from '@sqrzro/components';
+import { Fragment } from 'react';
+
+export interface ListObject {
+    actions?: ({ id }: { id: number }) => React.ReactElement;
+    href?: string;
+    id: number;
+    image?: string;
+    meta?: string[];
+    title: string;
+}
+
+export function renderMeta(meta: Record<string, string> | string[]): React.ReactElement {
+    if (Array.isArray(meta)) {
+        return (
+            <ul className="flex gap-4 text-xs">
+                {meta.map((item) => (
+                    <li key={item}>{item}</li>
+                ))}
+            </ul>
+        );
+    }
+
+    return (
+        <dl className="w-full text-xs">
+            {Object.entries(meta).map(([key, value]) => (
+                <div key={key} className="flex justify-between p-2 odd:bg-gray-100">
+                    <dt>{key}</dt>
+                    <dd>{value}</dd>
+                </div>
+            ))}
+        </dl>
+    );
+}
+
+function ListItem({
+    actions: Actions,
+    href,
+    id,
+    meta,
+    title,
+}: Readonly<ListObject>): React.ReactElement {
+    return (
+        <li className="mb-4">
+            <article className="overflow-hidden rounded-md bg-white p-4 shadow">
+                <h2 className="font-semibold">{href ? <Link href={href}>{title}</Link> : title}</h2>
+                <div className="mt-2 flex items-center justify-between">
+                    {meta ? renderMeta(meta) : null}
+                    {Actions ? <Actions id={id} /> : null}
+                </div>
+            </article>
+        </li>
+    );
+}
+
+export default ListItem;

package/src/components/LoginForm/index.tsx

@@ -1,113 +1,33 @@
 'use client';
 
-import React, { Fragment } from 'react';
-import Head from 'next/head';
-import { useLoginForm } from '@sqrzro/hooks';
+import { Form, FormField, FormSubmit, PasswordInput, TextInput } from '@sqrzro/components';
+import type { UseFormReturn } from '@sqrzro/hooks';
+import type { UserObject } from '@sqrzro/server';
 
-import Alert from '../Alert';
-import Button from '../Button';
-import FormField from '../FormField';
-import Link from '../Link';
-import PasswordInput from '../PasswordInput';
-import TextInput from '../TextInput';
-
-import AuthForm from '../../core/AuthForm';
-import TwoFactor from '../../core/TwoFactor';
-import TwoFactorSetup from '../../core/TwoFactorSetup';
-
-import useAlert from '../../hooks/useAlert';
-import useConfig from '../../hooks/useConfig';
-
-function LoginForm(): React.ReactElement {
-    const { alertProps, openAlert, closeAlert } = useAlert();
-    const {
-        alertProps: setupAlertProps,
-        openAlert: openSetupAlert,
-        closeAlert: closeSetupAlert,
-    } = useAlert();
-
-    const { auth, name } = useConfig();
-
-    const { fieldProps, formData, formProps, handleSubmit, isLoading, setFormData } = useLoginForm(
-        auth,
-        openAlert,
-        openSetupAlert
-    );
-
-    function handleKeyDown(event: React.KeyboardEvent): void {
-        if (event.key === 'Enter') {
-            handleSubmit();
-        }
-    }
-
-    function handleAlertClose(): void {
-        setFormData('provider', '');
-        setFormData('two_factor_code', '');
-        closeAlert();
-        closeSetupAlert();
-    }
+export type LoginFormProps = UseFormReturn<UserObject>;
 
+function LoginForm({ fieldProps, formProps }: Readonly<LoginFormProps>): React.ReactElement {
     return (
-        <Fragment>
-            <Head>
-                <title>Login | {name}</title>
-            </Head>
-            <AuthForm
-                {...formProps}
-                footer={
-                    <Link
-                        to={`/auth/password${
-                            formData.identifier ? `?${auth.identifier}=${formData.identifier}` : ''
-                        }`}
-                    >
-                        Forgot Password?
-                    </Link>
-                }
-            >
-                <FormField
-                    {...fieldProps('identifier')}
-                    label={auth.identifierLabel}
-                    onKeyDown={handleKeyDown}
-                    render={TextInput}
-                    isAutoFocus
-                />
-                <FormField
-                    {...fieldProps('password')}
-                    label="Password"
-                    onKeyDown={handleKeyDown}
-                    render={PasswordInput}
-                />
-                <hr />
-                <Button isDisabled={isLoading} type="submit" isFullWidth>
-                    {isLoading ? 'Loading...' : 'Log In'}
-                </Button>
-            </AuthForm>
-            <Alert
-                {...alertProps}
-                icon="lockClosed"
-                onClose={handleAlertClose}
-                title="2-Step Authentication"
-                variant="warning"
-                width="sm"
-            >
-                <TwoFactor
-                    formData={formData}
-                    isLoading={isLoading}
-                    onSubmit={handleSubmit}
-                    setFormData={setFormData}
-                />
-            </Alert>
-            <Alert
-                {...setupAlertProps}
-                icon="lockClosed"
-                onClose={handleAlertClose}
-                title="Setup 2-Step Authentication"
-                variant="warning"
-                width="sm"
-            >
-                <TwoFactorSetup data={formData} />
-            </Alert>
-        </Fragment>
+        <div className="flex h-screen flex-col items-center justify-center bg-slate-800 pb-[10vh]">
+            <div className="mx-auto mb-8 h-12 w-12 rounded-full border-4 border-primary" />
+            <div className="w-full max-w-sm rounded-lg bg-white p-8 shadow-lg">
+                <h1 className="mb-8 text-center text-xl font-semibold">Sign in to continue</h1>
+                <Form {...formProps}>
+                    <FormField label="Email" {...fieldProps('email')} render={TextInput} />
+                    <FormField
+                        label="Password"
+                        {...fieldProps('password')}
+                        render={PasswordInput}
+                    />
+                    <div className="mt-8 text-center">
+                        <a className="mb-6 block text-primary" href="/#">
+                            Forgot Password?
+                        </a>
+                        <FormSubmit isFullWidth>Sign In</FormSubmit>
+                    </div>
+                </Form>
+            </div>
+        </div>
     );
 }
 

package/src/components/MeActions/index.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { removeSession } from '@sqrzro/server';
+import { useRouter } from 'next/navigation';
+
+function MeActions(): React.ReactElement {
+    const router = useRouter();
+
+    async function handleLogout(): Promise<void> {
+        await removeSession();
+        router.refresh();
+    }
+
+    return (
+        <button className="text-xs text-gray-300" onClick={handleLogout} type="button">
+            Log Out
+        </button>
+    );
+}
+
+export default MeActions;

package/src/components/MePanel/index.tsx

@@ -0,0 +1,21 @@
+'use server';
+
+import { getIdFromSession } from '@sqrzro/server';
+
+import MeActions from '../MeActions';
+
+async function MePanel(): Promise<React.ReactElement> {
+    const id = await getIdFromSession();
+
+    return (
+        <div className="ml-auto flex items-center gap-3">
+            <div className="flex flex-col items-end text-white">
+                <strong>{id}</strong>
+                <MeActions />
+            </div>
+            <div className="h-9 w-9 rounded-full border-4 border-gray-500" />
+        </div>
+    );
+}
+
+export default MePanel;

package/src/components/Page/index.tsx

@@ -0,0 +1,60 @@
+import { Fragment } from 'react';
+import { Button, Container } from '@sqrzro/components';
+import type { LinkableAction } from '@sqrzro/interfaces';
+
+import Tabs from '../Tabs';
+
+export interface PageProps {
+    actions?: LinkableAction[];
+    basePath?: string;
+    children: React.ReactNode;
+    isFullWidth?: boolean;
+    tabs?: LinkableAction[];
+    title: string;
+}
+
+function Page({
+    actions,
+    basePath,
+    children,
+    isFullWidth,
+    tabs,
+    title,
+}: Readonly<PageProps>): React.ReactElement {
+    return (
+        <Fragment>
+            <header className="bg-gray-800 pb-32 text-white">
+                <Container isFullWidth={isFullWidth}>
+                    <div className="flex items-center justify-between py-10">
+                        <h1 className="min-h-10 text-3xl font-semibold">{title}</h1>
+                        <div id="page-actions" />
+                        {/* {actions ? (
+                            <div className="sticky top-0">
+                                {actions.map(({ href, label, onClick }) => (
+                                    <Button
+                                        key={href}
+                                        href={href}
+                                        onClick={onClick}
+                                        variant="primary"
+                                    >
+                                        {label}
+                                    </Button>
+                                ))}
+                            </div>
+                        ) : null} */}
+                    </div>
+                    {tabs ? (
+                        <div className="-mt-4 mb-8">
+                            <Tabs basePath={basePath} data={tabs} />
+                        </div>
+                    ) : null}
+                </Container>
+            </header>
+            <Container isFullWidth={isFullWidth}>
+                <div className="-mt-32 flex flex-col gap-8">{children}</div>
+            </Container>
+        </Fragment>
+    );
+}
+
+export default Page;

package/src/components/PageActions/index.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+export interface PageActionsProps {
+    children: React.ReactNode;
+}
+
+function PageActions({ children }: Readonly<PageActionsProps>): React.ReactElement | null {
+    const ref = useRef<HTMLElement | null>(null);
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        ref.current = document.getElementById('page-actions');
+        setMounted(true);
+    }, []);
+
+    return mounted && ref.current ? createPortal(children, ref.current) : null;
+}
+
+export default PageActions;

package/src/components/Panel/Panel.spec.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+
+import Panel from './index';
+
+describe('Panel', () => {
+    it('should render', () => {
+        render(<Panel />);
+        expect(screen.queryByText('Panel')).toBeInTheDocument();
+    });
+});

package/src/components/Panel/Panel.stories.tsx

@@ -0,0 +1,9 @@
+import Panel from './index';
+
+export default { title: 'Components/Panel', component: Panel };
+
+export const Default = (): React.ReactElement => <Panel>Example Panel</Panel>;
+
+export const WithTitle = (): React.ReactElement => (
+    <Panel title="Example Title">Example Panel</Panel>
+);

package/src/components/Panel/index.tsx

@@ -0,0 +1,15 @@
+interface PanelProps {
+    children: React.ReactNode;
+    title?: string;
+}
+
+function Panel({ children, title }: Readonly<PanelProps>): React.ReactElement {
+    return (
+        <article>
+            {title ? <h3>{title}</h3> : null}
+            {children}
+        </article>
+    );
+}
+
+export default Panel;

package/src/components/RootLayout/index.tsx

@@ -1,42 +1,36 @@
-import React from 'react';
+import { Suspense } from 'react';
 
-import { TestService } from '@sqrzro/utility';
+import { ClassNames, Toaster, registerClassNames } from '@sqrzro/components';
 
-import ConfirmModal from '../../core/ConfirmModal';
-import Toast from '../../core/Toast';
+import { setConfig } from '../../services/ConfigService';
+import type { Config as ConfigObject } from '../../services/ConfigService';
 
-import { ConfigProvider } from '../../hooks/useConfig';
+import classNames from '../../styles/config';
 
-import type { Config } from '../../services/ConfigService';
+import Config from '../Config';
 
-import register from '../../utility/register';
-
-interface RootLayoutProps {
+export interface RootLayoutProps {
     children: React.ReactNode;
-    config: Config;
+    config?: ConfigObject;
 }
 
-function RootLayout({ children, config }: RootLayoutProps): React.ReactElement {
-    register(config);
+function RootLayout({ children, config }: Readonly<RootLayoutProps>): React.ReactElement {
+    registerClassNames(classNames);
+
+    if (config) {
+        setConfig(config);
+    }
 
     return (
-        <html>
-            <head>
-                <link href="https://fonts.googleapis.com" rel="preconnect" />
-                <link crossOrigin="" href="https://fonts.gstatic.com" rel="preconnect" />
-                <link
-                    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
-                    rel="stylesheet"
-                />
-            </head>
-            <body className="bg-slate-50">
-                <ConfigProvider value={config}>
-                    {children}
-                    <div id="alert-portal" />
-                    <div id="modal-portal" />
-                    <ConfirmModal />
-                    <Toast />
-                </ConfigProvider>
+        <html lang="en">
+            <head />
+            <body>
+                <Config data={config} />
+                <ClassNames data={classNames} />
+                {children}
+                <Suspense fallback={null}>
+                    <Toaster />
+                </Suspense>
             </body>
         </html>
     );