@sqrzro/admin 2.1.0-bz.27 → 2.1.0-bz.29

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface DataTableProps {
+    data: Record<string, string>;
+}
+declare function DataTable({ data }: Readonly<DataTableProps>): React.ReactElement;
+export default DataTable;

package/dist/components/DataTable/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function DataTable({ data }) {
+    return (_jsx("table", { children: _jsx("tbody", { children: Object.entries(data).map(([key, value]) => (_jsxs("tr", { className: "odd:bg-slate-100", children: [_jsx("th", { className: "p-2 font-normal", children: key }), _jsx("td", { className: "p-2 text-right", children: value })] }, key))) }) }));
+}
+export default DataTable;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { StyleVariant } from '@sqrzro/interfaces';
 export interface ListObject<Data = Record<string, unknown>> {
     $data?: Data;
     actions?: (data: Data) => React.ReactNode;
@@ -17,7 +18,8 @@ export interface ListObject<Data = Record<string, unknown>> {
     };
     tertiary?: React.ReactNode;
     title?: React.ReactNode;
+    variant?: StyleVariant;
 }
 export declare function renderMeta(id: string, meta: ListObject['meta']): React.ReactElement | null;
-declare function ListItem<Data = Record<string, unknown>>({ $data, actions, description, href, id, isMinimal, meta, secondary, tertiary, title, }: Readonly<ListObject<Data>>): React.ReactElement;
+declare function ListItem<Data = Record<string, unknown>>({ $data, actions, description, href, id, isMinimal, meta, secondary, tertiary, title, variant, }: Readonly<ListObject<Data>>): React.ReactElement;
 export default ListItem;

package/dist/components/ListItem/index.js

@@ -2,6 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement } from 'react';
 import { Link, tw } from '@sqrzro/components';
 import { filterNull } from '@sqrzro/utility';
+const variantMap = {
+    danger: 'text-red-700',
+};
 function getKey(item) {
     if (isValidElement(item)) {
         return item.key;
@@ -17,9 +20,9 @@ export function renderMeta(id, meta) {
     }
     return (_jsx("table", { className: "w-full text-xs", children: _jsx("tbody", { children: Object.entries(meta).map(([key, value]) => (_jsxs("tr", { className: "odd:bg-slate-100", children: [_jsx("th", { className: "p-2 font-semibold", children: key }), _jsx("td", { className: "p-2 text-right", children: value || '-' })] }, key))) }) }));
 }
-function ListItem({ $data, actions, description, href, id, isMinimal, meta, secondary, tertiary, title, }) {
+function ListItem({ $data, actions, description, href, id, isMinimal, meta, secondary, tertiary, title, variant, }) {
     return (_jsx("li", { children: _jsx("article", { className: tw('', isMinimal
                 ? 'border-b border-slate-200 pb-4'
-                : 'bg-panel rounded p-4 shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)]'), "data-testid": `list-item-root--${id}`, children: _jsxs("div", { className: "grid grid-cols-[3fr_2fr_2fr_auto]", children: [_jsxs("div", { children: [title ? (_jsx("h2", { className: "text-base font-semibold", "data-testid": `list-item-title--${id}`, children: href ? _jsx(Link, { href: href, children: title }) : title })) : null, description, meta ? (_jsx("div", { className: tw('mt-1', isMinimal ? '' : 'flex items-center justify-between'), children: meta ? renderMeta(id, meta) : null })) : null] }), tertiary ? (_jsx("div", { className: "flex h-full flex-col justify-center", children: tertiary })) : null, secondary ? (_jsxs("div", { className: "col-start-3 text-right", children: [secondary.title ? (_jsx("p", { className: "text-base font-semibold", children: secondary.title })) : null, secondary.description ? (_jsx("div", { className: "mt-1 text-xs text-slate-500", children: secondary.description })) : null, secondary.meta ? (_jsx("ul", { className: "mt-1 flex items-center justify-end gap-4 text-xs text-slate-500", children: filterNull(secondary.meta).map((item) => (_jsx("li", { children: item }, getKey(item)))) })) : null] })) : null, typeof actions === 'function' ? actions($data) : null] }) }) }));
+                : 'bg-panel rounded p-4 shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)]', variant ? variantMap[variant] : ''), "data-testid": `list-item-root--${id}`, children: _jsxs("div", { className: "grid grid-cols-[3fr_2fr_2fr_auto]", children: [_jsxs("div", { children: [title ? (_jsx("h2", { className: tw('text-base font-semibold', variant === 'danger' ? 'line-through' : ''), "data-testid": `list-item-title--${id}`, children: href ? _jsx(Link, { href: href, children: title }) : title })) : null, description, meta ? (_jsx("div", { className: tw('mt-1', isMinimal ? '' : 'flex items-center justify-between'), children: meta ? renderMeta(id, meta) : null })) : null] }), tertiary ? (_jsx("div", { className: "flex h-full flex-col justify-center", children: tertiary })) : null, secondary ? (_jsxs("div", { className: "col-start-3 text-right", children: [secondary.title ? (_jsx("p", { className: tw('text-base font-semibold', variant === 'danger' ? 'line-through' : ''), children: secondary.title })) : null, secondary.description ? (_jsx("div", { className: "mt-1 text-xs text-slate-500", children: secondary.description })) : null, secondary.meta ? (_jsx("ul", { className: "mt-1 flex items-center justify-end gap-4 text-xs text-slate-500", children: filterNull(secondary.meta).map((item) => (_jsx("li", { children: item }, getKey(item)))) })) : null] })) : null, typeof actions === 'function' ? actions($data) : null] }) }) }));
 }
 export default ListItem;

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

@@ -1,9 +1,11 @@
 /// <reference types="react" />
 import type { Errorable } from '@sqrzro/interfaces';
-import type { TableClientComponentProps } from '../TableClientComponent';
-export interface TableProps<T> extends Omit<TableClientComponentProps, 'data'> {
-    fn: (filters?: Record<string, string>) => Promise<Errorable<T[]>>;
-    searchParams?: Record<string, string>;
+import type { TableClientComponentProps, TableItemObject } from '../TableClientComponent';
+export interface TableProps<Item, Params> extends Omit<TableClientComponentProps, 'data'> {
+    fn: (params?: Params, searchParams?: URLSearchParams) => Promise<Errorable<Item[]>>;
+    params?: Params;
+    searchParams?: URLSearchParams;
+    transformer?: (item: Item) => TableItemObject;
 }
-declare function Table<T>({ columns, fn, searchParams, }: Readonly<TableProps<T>>): Promise<React.ReactElement>;
+declare function Table<Item extends object, Params>({ columns, fn, params, searchParams, transformer, }: Readonly<TableProps<Item, Params>>): Promise<React.ReactElement>;
 export default Table;

package/dist/components/Table/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import TableClientComponent from '../TableClientComponent';
 function defaultTransformer(item) {
     return {
@@ -6,12 +6,12 @@ function defaultTransformer(item) {
         ...item,
     };
 }
-async function Table({ columns, fn, searchParams, }) {
-    const [response, error] = await fn(searchParams);
+async function Table({ columns, fn, params, searchParams, transformer, }) {
+    const [response, error] = await fn(params, searchParams);
     if (error) {
-        return _jsx("div", { children: "Error" });
+        return _jsxs("div", { children: ["Error - ", error.message] });
     }
-    const data = response.map(defaultTransformer);
+    const data = response.map(transformer || defaultTransformer);
     return _jsx(TableClientComponent, { columns: columns, data: data });
 }
 export default Table;

package/dist/components/index.d.ts

@@ -6,6 +6,8 @@ export type { BadgeProps } from './Badge';
 export { default as Badge } from './Badge';
 export type { DashboardProps } from './Dashboard';
 export { default as Dashboard } from './Dashboard';
+export type { DataTableProps } from './DataTable';
+export { default as DataTable } from './DataTable';
 export type { FilterBarProps, FilterObject } from './FilterBar';
 export { default as FilterBar } from './FilterBar';
 export type { GridListProps } from './GridList';
@@ -17,7 +19,7 @@ export { default as List } from './List';
 export type { ListClientComponentProps } from './ListClientComponent';
 export { default as ListClientComponent } from './ListClientComponent';
 export type { ListObject } from './ListItem';
-export type { ListActionsProps } from './ListActions';
+export type { ListAction, ListActionsProps } from './ListActions';
 export { default as ListActions } from './ListActions';
 export type { PageProps } from './Page';
 export { default as Page } from './Page';
@@ -33,3 +35,4 @@ export { default as SettingsPage } from './SettingsPage';
 export type { TableColumnObject } from './TableClientComponent';
 export type { TableProps } from './Table';
 export { default as Table } from './Table';
+export type { TableItemObject } from './TableClientComponent';

package/dist/components/index.js

@@ -3,6 +3,7 @@ export { Autocomplete, AutocompleteFormField, Button, CalendarInput, CheckboxInp
 export { default as AppLayout } from './AppLayout';
 export { default as Badge } from './Badge';
 export { default as Dashboard } from './Dashboard';
+export { default as DataTable } from './DataTable';
 export { default as FilterBar } from './FilterBar';
 export { default as GridList } from './GridList';
 export { default as InfoPanel } from './InfoPanel';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/admin",
   "type": "module",
-  "version": "2.1.0-bz.27",
+  "version": "2.1.0-bz.29",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",