@sqrzro/admin 2.0.0 → 2.1.0-bz.1

package/dist/components/GridList/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ListProps } from '../List';
+export type GridListProps<T> = Omit<ListProps<T>, 'renderItem'>;
+declare function GridList<T extends object>(props: ListProps<T>): React.ReactElement;
+export default GridList;

package/dist/components/GridList/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import GridListItem from '../GridListItem';
+import List from '../List';
+function GridList(props) {
+    return _jsx(List, { ...props, className: "grid grid-cols-3 gap-6", renderItem: GridListItem });
+}
+export default GridList;

package/dist/components/GridListItem/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ListObject } from '../ListItem';
+declare function GridListItem({ actions: Actions, href, id, image, meta, title, }: Readonly<ListObject>): React.ReactElement;
+export default GridListItem;

package/dist/components/GridListItem/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from '@sqrzro/components';
+import { renderMeta } from '../ListItem';
+function GridListItem({ actions: Actions, href, id, image, meta, title, }) {
+    return (_jsx("li", { children: _jsxs("article", { className: "overflow-hidden rounded-md bg-white p-4 shadow", children: [image ? _jsx("img", { alt: "", className: "mb-4 border border-gray-200", src: image }) : null, _jsx("h2", { className: "text-base font-semibold", children: href ? _jsx(Link, { href: href, children: title }) : title }), meta || Actions ? _jsx("hr", { className: "my-4" }) : null, _jsxs("div", { className: "flex items-center justify-between", children: [meta ? renderMeta(meta) : null, Actions ? _jsx(Actions, { id: id }) : null] })] }) }));
+}
+export default GridListItem;

package/dist/components/Icon/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export type IconType = 'error' | 'info' | 'success' | 'warning';
+declare const icons: Record<IconType, () => React.ReactElement>;
+export interface IconProps {
+    type?: keyof typeof icons;
+}
+declare function Icon({ type }: Readonly<IconProps>): React.ReactElement | null;
+export default Icon;

package/dist/components/Icon/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ErrorIcon from '../../icons/ErrorIcon';
+import InfoIcon from '../../icons/InfoIcon';
+import SuccessIcon from '../../icons/SuccessIcon';
+import WarningIcon from '../../icons/WarningIcon';
+const icons = {
+    error: ErrorIcon,
+    info: InfoIcon,
+    success: SuccessIcon,
+    warning: WarningIcon,
+};
+function Icon({ type }) {
+    if (!type) {
+        return null;
+    }
+    const IconComponent = icons[type];
+    if (!IconComponent) {
+        return null;
+    }
+    return _jsx(IconComponent, {});
+}
+export default Icon;

package/dist/components/List/index.d.ts

@@ -1,36 +1,22 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import type { EmptyMessageProps } from '../../core/EmptyMessage';
-import type { SimpleObject, TransformerWithActions } from '../../utility/interfaces';
-export interface ListProps<T extends SimpleObject> {
-    data?: T[];
-    empty?: EmptyMessageProps;
-    isDisabled?: boolean;
-    pagination?: {
-        activePage: number;
-        pageCount: number;
-    } | null;
-    transformer?: TransformerWithActions<T>;
+/// <reference types="react" />
+import type { ErrorablePromise } from '@sqrzro/server';
+import type { FilterMap } from '../FilterBar';
+import type { ListObject } from '../ListItem';
+export interface ListComponentProps {
+    params?: Record<string, string>;
+    searchParams?: Record<string, string>;
 }
-/**
- * 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.
- */
-declare function List<T extends SimpleObject>({ data, empty, pagination, transformer, isDisabled, }: ListProps<T>): React.ReactElement;
-declare namespace List {
-    var propTypes: {
-        data: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{}>>[]>;
-        isDisabled: PropTypes.Requireable<boolean>;
-        pagination: PropTypes.Requireable<PropTypes.InferProps<{
-            activePage: PropTypes.Validator<number>;
-            pageCount: PropTypes.Validator<number>;
-        }>>;
-    };
+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;
 }
+declare function List<T extends object>({ actions, className, filters, fn, params, renderItem, searchParams, transformer, }: Readonly<ListProps<T>>): Promise<React.ReactElement>;
 export default List;

package/dist/components/List/index.js

@@ -1,46 +1,22 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import EmptyMessage from '../../core/EmptyMessage';
-import ListItem from '../../core/ListItem';
-import Pagination from '../../core/Pagination';
-// Import styles from './List.module.css';
-const defaultTransformer = (item) => ({
-    ...item,
-    $id: String(item.id),
-    $original: item,
-});
-const transformData = (data, transformer) => {
-    const [transformFn, actions] = Array.isArray(transformer)
-        ? transformer
-        : [transformer || defaultTransformer];
-    return data.map((item) => ({ ...transformFn(item), $actions: actions, $original: item }));
-};
-/**
- * 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({ data, empty, pagination, transformer, isDisabled, }) {
-    if (!data?.length) {
-        return React.createElement(EmptyMessage, { ...empty });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import clsx from 'clsx';
+import { EmptyMessage } from '@sqrzro/components';
+import FilterBar from '../FilterBar';
+import ListItem from '../ListItem';
+function defaultTransformer() {
+    return {
+        id: 0,
+        title: '',
+    };
+}
+async function List({ actions, className, filters, fn, params, renderItem = ListItem, searchParams, transformer, }) {
+    const [response, error] = await fn(params, searchParams);
+    if (error) {
+        return _jsx("div", { children: "ERRORROROR" });
     }
-    const transformed = transformData(data, transformer);
-    return (React.createElement(Fragment, null,
-        React.createElement("ul", { className: "/*clsx(styles.root, isDisabled && styles.rootIsDisabled)*/" }, transformed.map((item) => (React.createElement("li", { key: item.$id },
-            React.createElement(ListItem, { ...item }))))),
-        pagination ? React.createElement(Pagination, { isDisabled: isDisabled, ...pagination }) : null));
+    const data = response.map(transformer || defaultTransformer);
+    const hasFilters = Boolean(Object.keys(searchParams || []).length);
+    return (_jsxs(Fragment, { children: [filters && (data.length || hasFilters) ? _jsx(FilterBar, { map: filters }) : null, data.length ? (_jsx("ul", { className: clsx(className), children: data.map((item) => renderItem({ actions, ...item })) })) : (_jsx(EmptyMessage, {}))] }));
 }
-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/dist/components/ListAction/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ConfirmableAction } from '@sqrzro/interfaces';
+interface ListActionProps extends ConfirmableAction<number> {
+    id: number;
+}
+declare function ListAction({ id, onClick, label, variant, }: Readonly<ListActionProps>): React.ReactElement;
+export default ListAction;

package/dist/components/ListAction/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConfirmableButton } from '@sqrzro/components';
+function ListAction({ id, onClick, label, variant, }) {
+    function handleClick() {
+        onClick(id);
+    }
+    return (_jsx(ConfirmableButton, { onClick: handleClick, variant: variant, isText: true, children: label }));
+}
+export default ListAction;

package/dist/components/ListActions/index.d.ts

@@ -1,18 +1,8 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-interface ListActionsProps {
-    children?: React.ReactNode;
-    label: string;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    to?: string;
-}
-declare function ListActions({ children, label, to, onClick }: ListActionsProps): React.ReactElement;
-declare namespace ListActions {
-    var propTypes: {
-        label: PropTypes.Validator<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        to: PropTypes.Requireable<string>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-    };
+/// <reference types="react" />
+import type { ConfirmableAction } from '@sqrzro/interfaces';
+export interface ListActionsProps {
+    actions: ConfirmableAction<number>[];
+    id: number;
 }
+declare function ListActions({ actions, id }: Readonly<ListActionsProps>): React.ReactElement;
 export default ListActions;

package/dist/components/ListActions/index.js

@@ -1,14 +1,12 @@
 'use client';
-import React from 'react';
-import PropTypes from 'prop-types';
-import FixedActions from '../../core/FixedActions';
-function ListActions({ children, label, to, onClick }) {
-    return (React.createElement(FixedActions, { label: label, onClick: onClick, to: to }, children));
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useClickOutside } from '@sqrzro/hooks';
+import ListAction from '../ListAction';
+function ListActions({ actions, id }) {
+    const [isOpen, setIsOpen, ref] = useClickOutside();
+    function toggleIsOpen() {
+        setIsOpen(!isOpen);
+    }
+    return (_jsxs("div", { ref: ref, className: "flex flex-row-reverse items-center gap-4", children: [_jsxs("button", { className: "h-4 rotate-90 text-xs leading-[1em] tracking-tighter text-slate-500", onClick: toggleIsOpen, type: "button", children: ["\u2022\u2022\u2022", _jsxs("span", { className: "sr-only", children: [isOpen ? 'Close' : 'Open', " Actions"] })] }), isOpen ? (_jsx("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", children: actions.map(({ label, onClick, variant }) => (_jsx("li", { children: _jsx(ListAction, { id: id, label: label, onClick: onClick, variant: variant }) }, label))) })) : null] }));
 }
-ListActions.propTypes = {
-    label: PropTypes.string.isRequired,
-    children: PropTypes.node,
-    to: PropTypes.string,
-    onClick: PropTypes.func,
-};
 export default ListActions;

package/dist/components/ListItem/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface ListObject {
+    actions?: ({ id }: {
+        id: number;
+    }) => React.ReactElement;
+    href?: string;
+    id: number;
+    image?: string;
+    meta?: string[];
+    title: string;
+}
+export declare function renderMeta(meta: Record<string, string> | string[]): React.ReactElement;
+declare function ListItem({ actions: Actions, href, id, meta, title, }: Readonly<ListObject>): React.ReactElement;
+export default ListItem;

package/dist/components/ListItem/index.js

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

package/dist/components/LoginForm/index.d.ts

@@ -1,3 +1,6 @@
-import React from 'react';
-declare function LoginForm(): React.ReactElement;
+/// <reference types="react" />
+import type { UseFormReturn } from '@sqrzro/hooks';
+import type { UserObject } from '@sqrzro/server';
+export type LoginFormProps = UseFormReturn<UserObject>;
+declare function LoginForm({ fieldProps, formProps }: Readonly<LoginFormProps>): React.ReactElement;
 export default LoginForm;

package/dist/components/LoginForm/index.js

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

package/dist/components/MeActions/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function MeActions(): React.ReactElement;
+export default MeActions;

package/dist/components/MeActions/index.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { removeSession } from '@sqrzro/server';
+import { useRouter } from 'next/navigation';
+function MeActions() {
+    const router = useRouter();
+    async function handleLogout() {
+        await removeSession();
+        router.refresh();
+    }
+    return (_jsx("button", { className: "text-xs text-gray-300", onClick: handleLogout, type: "button", children: "Log Out" }));
+}
+export default MeActions;

package/dist/components/MePanel/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function MePanel(): Promise<React.ReactElement>;
+export default MePanel;

package/dist/components/MePanel/index.js

@@ -0,0 +1,9 @@
+'use server';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getIdFromSession } from '@sqrzro/server';
+import MeActions from '../MeActions';
+async function MePanel() {
+    const id = await getIdFromSession();
+    return (_jsxs("div", { className: "ml-auto flex items-center gap-3", children: [_jsxs("div", { className: "flex flex-col items-end text-white", children: [_jsx("strong", { children: id }), _jsx(MeActions, {})] }), _jsx("div", { className: "h-9 w-9 rounded-full border-4 border-gray-500" })] }));
+}
+export default MePanel;

package/dist/components/Page/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { LinkableAction } from '@sqrzro/interfaces';
+export interface PageProps {
+    actions?: LinkableAction[];
+    basePath?: string;
+    children: React.ReactNode;
+    isFullWidth?: boolean;
+    tabs?: LinkableAction[];
+    title: string;
+}
+declare function Page({ actions, basePath, children, isFullWidth, tabs, title, }: Readonly<PageProps>): React.ReactElement;
+export default Page;

package/dist/components/Page/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Container } from '@sqrzro/components';
+import Tabs from '../Tabs';
+function Page({ actions, basePath, children, isFullWidth, tabs, title, }) {
+    return (_jsxs(Fragment, { children: [_jsx("header", { className: "bg-gray-800 pb-32 text-white", children: _jsxs(Container, { isFullWidth: isFullWidth, children: [_jsxs("div", { className: "flex items-center justify-between py-10", children: [_jsx("h1", { className: "min-h-10 text-3xl font-semibold", children: title }), _jsx("div", { id: "page-actions" })] }), tabs ? (_jsx("div", { className: "-mt-4 mb-8", children: _jsx(Tabs, { basePath: basePath, data: tabs }) })) : null] }) }), _jsx(Container, { isFullWidth: isFullWidth, children: _jsx("div", { className: "-mt-32 flex flex-col gap-8", children: children }) })] }));
+}
+export default Page;

package/dist/components/PageActions/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface PageActionsProps {
+    children: React.ReactNode;
+}
+declare function PageActions({ children }: Readonly<PageActionsProps>): React.ReactElement | null;
+export default PageActions;

package/dist/components/PageActions/index.js

@@ -0,0 +1,13 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+function PageActions({ children }) {
+    const ref = useRef(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/dist/components/Panel/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface PanelProps {
+    children: React.ReactNode;
+    title?: string;
+}
+declare function Panel({ children, title }: Readonly<PanelProps>): React.ReactElement;
+export default Panel;

package/dist/components/Panel/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Panel({ children, title }) {
+    return (_jsxs("article", { children: [title ? _jsx("h3", { children: title }) : null, children] }));
+}
+export default Panel;

package/dist/components/RootLayout/index.d.ts

@@ -1,6 +1,8 @@
-import React from 'react';
-interface RootLayoutProps {
+/// <reference types="react" />
+import type { Config as ConfigObject } from '../../services/ConfigService';
+export interface RootLayoutProps {
     children: React.ReactNode;
+    config?: ConfigObject;
 }
-declare function RootLayout({ children }: RootLayoutProps): React.ReactElement;
+declare function RootLayout({ children, config }: Readonly<RootLayoutProps>): React.ReactElement;
 export default RootLayout;

package/dist/components/RootLayout/index.js

@@ -1,7 +1,14 @@
-import React from 'react';
-function RootLayout({ children }) {
-    return (React.createElement("html", null,
-        React.createElement("head", null),
-        React.createElement("body", null, children)));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { ClassNames, Toaster, registerClassNames } from '@sqrzro/components';
+import { setConfig } from '../../services/ConfigService';
+import classNames from '../../styles/config';
+import Config from '../Config';
+function RootLayout({ children, config }) {
+    registerClassNames(classNames);
+    if (config) {
+        setConfig(config);
+    }
+    return (_jsxs("html", { lang: "en", children: [_jsx("head", {}), _jsxs("body", { children: [_jsx(Config, { data: config }), _jsx(ClassNames, { data: classNames }), children, _jsx(Suspense, { fallback: null, children: _jsx(Toaster, {}) })] })] }));
 }
 export default RootLayout;

package/dist/components/Table/index.d.ts

@@ -1,28 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import type { EmptyMessageProps } from '../../core/EmptyMessage';
-import type { Columns } from '../../core/TableCell';
-import type { PaginationObject, SimpleObject, TransformerWithActions } from '../../utility/interfaces';
-export interface TableProps<T extends SimpleObject> {
-    columns: Columns;
-    data?: T[];
-    empty?: EmptyMessageProps;
-    isDisabled?: boolean;
-    pagination?: PaginationObject;
-    totals?: Record<string, number> | null;
-    transformer?: TransformerWithActions<T>;
-}
-declare function Table<T extends SimpleObject>({ columns, data, empty, isDisabled, pagination, totals, transformer, }: TableProps<T>): React.ReactElement;
-declare namespace Table {
-    var propTypes: {
-        columns: PropTypes.Validator<NonNullable<PropTypes.InferProps<{}>>>;
-        data: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{}>>[]>;
-        isDisabled: PropTypes.Requireable<boolean>;
-        pagination: PropTypes.Requireable<PropTypes.InferProps<{
-            activePage: PropTypes.Validator<number>;
-            pageCount: PropTypes.Validator<number>;
-        }>>;
-        totals: PropTypes.Requireable<PropTypes.InferProps<{}>>;
-    };
+/// <reference types="react" />
+import type { ErrorablePromise } from '@sqrzro/server';
+import type { TableClientComponentProps } from '../TableClientComponent';
+export interface TableProps<T> extends Omit<TableClientComponentProps, 'data'> {
+    fn: (filters?: Record<string, string>) => ErrorablePromise<T[]>;
+    searchParams?: Record<string, string>;
 }
+declare function Table<T>({ columns, fn, searchParams, }: Readonly<TableProps<T>>): Promise<React.ReactElement>;
 export default Table;

package/dist/components/Table/index.js

@@ -1,55 +1,17 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { spliceArray } from '@sqrzro/utility';
-import EmptyMessage from '../../core/EmptyMessage';
-import Pagination from '../../core/Pagination';
-import Panel from '../../core/Panel';
-import TableCell from '../../core/TableCell';
-import TableHead from '../../core/TableHead';
-import TableRow from '../../core/TableRow';
-// Import styles from './Table.module.css';
-const defaultTransformer = (item) => ({
-    ...item,
-    $id: String(item.id),
-    $original: item,
-});
-const transformData = (data, transformer) => {
-    const [transformFn, actions] = Array.isArray(transformer)
-        ? transformer
-        : [transformer || defaultTransformer];
-    return data.map((item) => ({ ...transformFn(item), $actions: actions, $original: item }));
-};
-const transformColumns = (columns) => Object.entries(columns).map(([key, item]) => ({
-    key,
-    title: Array.isArray(item) ? item[0] : item,
-    isRightAligned: Array.isArray(item) ? item[1] : false,
-}));
-function Table({ columns, data, empty, isDisabled, pagination, totals, transformer, }) {
-    if (!data?.length) {
-        return React.createElement(EmptyMessage, { ...empty });
+import { jsx as _jsx } from "react/jsx-runtime";
+import TableClientComponent from '../TableClientComponent';
+function defaultTransformer(item) {
+    return {
+        id: item.id,
+        ...item,
+    };
+}
+async function Table({ columns, fn, searchParams, }) {
+    const [response, error] = await fn(searchParams);
+    if (error) {
+        return _jsx("div", { children: "Error" });
     }
-    const transformedColumns = transformColumns(columns);
-    const transformedData = transformData(data, transformer);
-    return (React.createElement(Fragment, null,
-        React.createElement(Panel, null,
-            React.createElement("div", { className: "/*styles.root*/" },
-                React.createElement("table", { className: "/*clsx(styles.table, isDisabled && styles.tableIsDisabled)*/" },
-                    React.createElement(TableHead, { columns: transformedColumns, hasActions: Boolean(transformedData[0].$actions?.length) }),
-                    React.createElement("tbody", null, transformedData.map((item) => (React.createElement(TableRow, { key: item.$id, columns: transformedColumns, data: item })))),
-                    totals ? (React.createElement("tfoot", null,
-                        React.createElement("tr", null,
-                            React.createElement(TableCell, { value: "Totals:" }),
-                            spliceArray(transformedColumns, 0, 1).map((item) => (React.createElement(TableCell, { key: item.key, isRightAligned: item.isRightAligned, value: totals[item.key].toString() })))))) : null))),
-        pagination ? React.createElement(Pagination, { isDisabled: isDisabled, ...pagination }) : null));
+    const data = response.map(defaultTransformer);
+    return _jsx(TableClientComponent, { columns: columns, data: data });
 }
-Table.propTypes = {
-    columns: PropTypes.shape({}).isRequired,
-    data: PropTypes.arrayOf(PropTypes.shape({}).isRequired),
-    isDisabled: PropTypes.bool,
-    pagination: PropTypes.shape({
-        activePage: PropTypes.number.isRequired,
-        pageCount: PropTypes.number.isRequired,
-    }),
-    totals: PropTypes.shape({}),
-};
 export default Table;

package/dist/components/TableClientComponent/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface TableItemObject {
+    [key: string]: string;
+    id: string;
+}
+interface TableColumnObject {
+    key: string;
+    title: string;
+    type?: 'string';
+}
+export interface TableClientComponentProps {
+    columns: TableColumnObject[];
+    data: TableItemObject[];
+}
+declare function TableClientComponent({ columns, data, }: Readonly<TableClientComponentProps>): React.ReactElement;
+export default TableClientComponent;