@molecule/app-transactions-table-react 4.0.0 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TransactionsTable.d.ts","sourceRoot":"","sources":["../src/TransactionsTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI3C,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAEnE,yDAAyD;AACzD,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,kBAAkB,EAAE,CAAA;IAClC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,4FAA4F;IAC5F,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IAC9C,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;IACzC,2DAA2D;IAC3D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,MAAM,CAAA;IAC5C,yEAAyE;IACzE,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC9C,6CAA6C;IAC7C,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,SAAS,CAAA;QAChB,WAAW,CAAC,EAAE,SAAS,CAAA;QACvB,QAAQ,CAAC,EAAE,SAAS,CAAA;QACpB,OAAO,CAAC,EAAE,SAAS,CAAA;QACnB,MAAM,CAAC,EAAE,SAAS,CAAA;KACnB,CAAA;IACD,kEAAkE;IAClE,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAgBD,6FAA6F;AAC7F,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,OAAO,EACP,KAAK,EACL,OAAO,EACP,UAAwB,EACxB,cAAc,EACd,YAAoC,EACpC,UAAgC,EAChC,UAAU,EACV,OAAO,EACP,UAAU,EACV,MAAM,EACN,SAAS,GACV,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"TransactionsTable.d.ts","sourceRoot":"","sources":["../src/TransactionsTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI3C,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAEnE,yDAAyD;AACzD,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,kBAAkB,EAAE,CAAA;IAClC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,4FAA4F;IAC5F,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IAC9C,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;IACzC,2DAA2D;IAC3D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,MAAM,CAAA;IAC5C,yEAAyE;IACzE,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC9C,6CAA6C;IAC7C,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,SAAS,CAAA;QAChB,WAAW,CAAC,EAAE,SAAS,CAAA;QACvB,QAAQ,CAAC,EAAE,SAAS,CAAA;QACpB,OAAO,CAAC,EAAE,SAAS,CAAA;QACnB,MAAM,CAAC,EAAE,SAAS,CAAA;KACnB,CAAA;IACD,kEAAkE;IAClE,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAgBD,6FAA6F;AAC7F,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,OAAO,EACP,KAAK,EACL,OAAO,EACP,UAAwB,EACxB,cAAc,EACd,YAAoC,EACpC,UAAgC,EAChC,UAAU,EACV,OAAO,EACP,UAAU,EACV,MAAM,EACN,SAAS,GACV,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAgMtC;AAED,eAAe,iBAAiB,CAAA"}
|
|
@@ -15,15 +15,15 @@ const DEFAULT_DATE_FORMAT = (d) => {
|
|
|
15
15
|
export function TransactionsTable({ transactions, loading, error, onRetry, retryLabel = 'Try again', categoryStyles, formatAmount = DEFAULT_AMOUNT_FORMAT, formatDate = DEFAULT_DATE_FORMAT, onRowClick, headers, emptyState, footer, className, }) {
|
|
16
16
|
const cm = getClassMap();
|
|
17
17
|
if (loading) {
|
|
18
|
-
return (_jsx("div", { className: cm.cn(
|
|
18
|
+
return (_jsx("div", { className: cm.cn(cm.transactionsTableShell, cm.sp('p', 6), className), "data-mol-id": "transactions-table-loading", children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { "aria-hidden": "true", className: cm.cn(cm.transactionsTableSkeletonRow, cm.sp('mb', 3)) }, i))) }));
|
|
19
19
|
}
|
|
20
20
|
if (error) {
|
|
21
|
-
return (_jsxs("div", { role: "alert", className: cm.cn(
|
|
21
|
+
return (_jsxs("div", { role: "alert", className: cm.cn(cm.transactionsTableShell, cm.sp('p', 10), cm.textCenter, className), "data-mol-id": "transactions-table-error", children: [_jsx("p", { className: cm.cn(cm.transactionsTableTertiaryText, cm.textSize('sm'), cm.sp('mb', 3)), children: error }), onRetry ? (_jsx("button", { type: "button", "data-mol-id": "transactions-table-retry", onClick: onRetry, className: cm.cn(cm.button({ variant: 'solid', color: 'primary', size: 'sm' }), cm.touchTargetCompact), children: retryLabel })) : null] }));
|
|
22
22
|
}
|
|
23
23
|
if (transactions.length === 0 && emptyState) {
|
|
24
|
-
return (_jsx("div", { className: cm.cn(
|
|
24
|
+
return (_jsx("div", { className: cm.cn(cm.transactionsTableShell, cm.sp('p', 12), cm.textCenter, cm.stack(4), className), "data-mol-id": "transactions-table-empty", children: emptyState }));
|
|
25
25
|
}
|
|
26
|
-
return (_jsx("div", { className: cm.cn(
|
|
26
|
+
return (_jsx("div", { className: cm.cn(cm.transactionsTableShell, className), children: _jsxs("div", { className: cm.cn(cm.transactionsTableScroller), children: [_jsxs("table", { className: cm.cn(cm.w('full'), cm.transactionsTableTable), children: [_jsx("thead", { children: _jsx("tr", { className: cm.cn(cm.transactionsTableHeadRow), children: [
|
|
27
27
|
{ key: 'date', label: headers?.date ?? 'Date', right: false },
|
|
28
28
|
{
|
|
29
29
|
key: 'description',
|
|
@@ -33,11 +33,11 @@ export function TransactionsTable({ transactions, loading, error, onRetry, retry
|
|
|
33
33
|
{ key: 'category', label: headers?.category ?? 'Category', right: false },
|
|
34
34
|
{ key: 'account', label: headers?.account ?? 'Account', right: false },
|
|
35
35
|
{ key: 'amount', label: headers?.amount ?? 'Amount', right: true },
|
|
36
|
-
].map((h) => (_jsx("th", { className: cm.cn(cm.sp('px', 6), cm.sp('py', 5), cm.textSize('xs'), cm.fontWeight('bold'),
|
|
36
|
+
].map((h) => (_jsx("th", { className: cm.cn(cm.sp('px', 6), cm.sp('py', 5), cm.textSize('xs'), cm.fontWeight('bold'), cm.transactionsTableHeaderCell, h.right ? cm.textRight : ''), children: h.label }, h.key))) }) }), _jsx("tbody", { className: cm.cn(cm.transactionsTableBody), children: transactions.map((tx) => {
|
|
37
37
|
const catKey = tx.categoryKey.toLowerCase();
|
|
38
38
|
const catStyle = categoryStyles?.[catKey] ?? NEUTRAL_STYLE;
|
|
39
39
|
const isIncome = tx.isIncome ?? tx.amount >= 0;
|
|
40
|
-
return (_jsxs("tr", { "data-mol-id": "transactions-table-row", className: cm.cn(onRowClick ? cm.cursorPointer : '',
|
|
40
|
+
return (_jsxs("tr", { "data-mol-id": "transactions-table-row", className: cm.cn(onRowClick ? cm.cursorPointer : '', cm.transactionsTableRow), onClick: onRowClick ? () => onRowClick(tx) : undefined, children: [_jsx("td", { className: cm.cn(cm.sp('px', 6), cm.sp('py', 5), cm.textSize('sm'), cm.transactionsTableDateCell), children: formatDate(tx.date) }), _jsx("td", { className: cm.cn(cm.sp('px', 6), cm.sp('py', 5)), children: _jsxs("div", { className: cm.cn(cm.flex({ align: 'center' }), cm.transactionsTableDescriptionRow), children: [_jsx("div", { className: cm.cn(cm.w(10), cm.h(10), cm.roundedFull, cm.flex({ align: 'center', justify: 'center' })), style: { backgroundColor: catStyle.bg, color: catStyle.color }, children: _jsx("span", { className: cm.iconGlyphFont, children: catStyle.icon }) }), _jsx("span", { className: cm.cn(cm.fontWeight('bold'), cm.transactionsTableDescription), children: tx.description })] }) }), _jsx("td", { className: cm.cn(cm.sp('px', 6), cm.sp('py', 5)), children: _jsx("span", { className: cm.cn(cm.sp('px', 3), cm.sp('py', 1), cm.fontWeight('bold'), cm.roundedFull, cm.transactionsTableCategoryChip), style: { backgroundColor: catStyle.bg, color: catStyle.color }, children: tx.categoryLabel }) }), _jsx("td", { className: cm.cn(cm.sp('px', 6), cm.sp('py', 5), cm.textSize('sm'), cm.transactionsTableAccountCell), children: tx.account }), _jsxs("td", { className: cm.cn(cm.sp('px', 6), cm.sp('py', 5), cm.textRight, cm.fontWeight('bold'), cm.transactionsTableAmountCell, isIncome ? cm.textPrimary : cm.transactionsTableTertiaryText), children: [isIncome ? '+' : '-', formatAmount(tx.amount)] })] }, tx.id));
|
|
41
41
|
}) })] }), footer ?? null] }) }));
|
|
42
42
|
}
|
|
43
43
|
export default TransactionsTable;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@molecule/app-transactions-table-react",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.1",
|
|
4
4
|
"description": "Financial transactions table: date / description+icon / category chip / account / signed amount columns. Loading skeleton, error state, empty state. Extracted from personal-finance TransactionsTable.",
|
|
5
5
|
"homepage": "https://www.molecule.dev/packages/app-transactions-table-react",
|
|
6
6
|
"type": "module",
|
|
@@ -41,9 +41,9 @@
|
|
|
41
41
|
"react": "^18.0.0 || ^19.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@molecule/app-react": "4.
|
|
45
|
-
"@molecule/app-ui": "1.3.
|
|
46
|
-
"@molecule/app-ui-react": "4.
|
|
44
|
+
"@molecule/app-react": "4.1.2",
|
|
45
|
+
"@molecule/app-ui": "1.3.11",
|
|
46
|
+
"@molecule/app-ui-react": "4.1.0",
|
|
47
47
|
"@types/node": "26.6.5",
|
|
48
48
|
"@types/react": "19.3.0",
|
|
49
49
|
"react": "19.3.1",
|