@djangocfg/payments 2.1.541 → 2.1.542

package/README.md

@@ -61,7 +61,6 @@ directive that points Tailwind at this package's sources):
 ```css
 /* your app's globals.css */
 @import "@djangocfg/ui-core/styles/full";
-@import "@djangocfg/ui-tools/styles";
 @import "@djangocfg/payments/styles";   /* ← add this */
 ```
 
@@ -81,14 +80,15 @@ Next.js hosts also add the package to `transpilePackages`.
 | `CheckoutDialog` | component | close-locked dialog shell (CheckoutGuard + ui-core Dialog); wrap your checkout body in it |
 | `CheckoutForm` | component | provider-agnostic form shell (ui-core only); inject the provider field via `paymentField` |
 | `StripePaymentElement` | component | `<Elements>` + `<PaymentElement>`; render-props the live Elements to the host |
-| `PaymentHistory` | component | DataTable of `PaymentRecord` |
+| `PaymentHistory` | component | sortable table of `PaymentRecord` (ui-core `Table`) |
 | `PaymentStatusBadge` | component | status pill on ui-core semantic tokens (success/warning/info/destructive) |
 | `toMinorUnits` / `toMajorUnits` / `formatAmount` | util | money at the boundary (amounts cross as integer minor units) |
 
 ## Conventions
 
 - Source-consumed (no bundler); `main`/`types`/`exports` → `./src/index.ts`.
-- ui-core flat import; ui-tools subpath-only (`@djangocfg/ui-tools/data-table`).
+- ui-core flat import. No widget dependency: a package may not depend on a
+  widget (`widgets/CLAUDE.md`).
 - Does **not** mount its own `<UiProviders>` — the host provides it once.
 - Locale-free: user-facing labels are props/slots (host supplies i18n).
 - Verify with `pnpm -F @djangocfg/payments check` (tsc).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/payments",
-  "version": "2.1.541",
+  "version": "2.1.542",
   "description": "Provider-agnostic React payments module (Stripe-first): checkout state machine, Payment Element wrapper, close-guard context, mock adapter for keyless development",
   "keywords": [
     "payments",
@@ -41,6 +41,7 @@
   "files": [
     "dist",
     "src",
+    "!src/**/*.stories.tsx",
     "README.md",
     "LICENSE"
   ],
@@ -53,25 +54,22 @@
     "@stripe/stripe-js": "^9.9.0"
   },
   "peerDependencies": {
-    "@djangocfg/ui-core": "^2.1.541",
-    "@djangocfg/ui-tools": "^2.1.541",
+    "@djangocfg/ui-core": "^2.1.542",
     "lucide-react": "^0.545.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
-  },
-  "peerDependenciesMeta": {
-    "@djangocfg/ui-tools": {
-      "optional": true
-    }
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.541",
-    "@djangocfg/ui-core": "^2.1.541",
-    "@djangocfg/ui-tools": "^2.1.541",
+    "@djangocfg/eslint-config": "^2.1.542",
+    "@djangocfg/typescript-config": "^2.1.542",
+    "@djangocfg/ui-core": "^2.1.542",
+    "@storybook/react-vite": "^10.5.0",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",
+    "eslint": "^9.39.5",
     "lucide-react": "0.545.0",
+    "storybook": "^10.5.0",
     "typescript": "^5.9.3"
   },
   "publishConfig": {

package/src/components/PaymentHistory.tsx

@@ -3,16 +3,36 @@
 // ============================================================================
 // @djangocfg/payments — PaymentHistory
 // ============================================================================
-// A DataTable of PaymentRecord rows. Uses the ui-tools DataTable (subpath
-// import, per the in-repo rule) and the PaymentStatusBadge. Pure
-// presentational — the host feeds `records` (e.g. from usePaymentHistory()).
+// A sortable table of PaymentRecord rows, built on the ui-core Table
+// primitives. Pure presentational — the host feeds `records` (e.g. from
+// usePaymentHistory()).
+//
+// This deliberately does NOT use a generic data-grid. A package may not depend
+// on a widget (see widgets/CLAUDE.md), and the two sortable columns here are
+// the whole requirement; a grid would buy filtering, pagination and selection
+// that this surface never shows.
 
-import React, { useMemo } from 'react';
-import { DataTable, type DataTableColumn } from '@djangocfg/ui-tools/data-table';
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@djangocfg/ui-core';
 import { PaymentStatusBadge } from './PaymentStatusBadge';
 import { formatAmount } from '../domain/money';
 import type { PaymentRecord } from '../domain/types';
 
+type SortKey = 'createdAt' | 'amount';
+type SortDirection = 'asc' | 'desc';
+
+interface SortState {
+  key: SortKey;
+  direction: SortDirection;
+}
+
 export interface PaymentHistoryProps {
   records: PaymentRecord[];
   loading?: boolean;
@@ -22,6 +42,8 @@ export interface PaymentHistoryProps {
   className?: string;
 }
 
+const SORT_INDICATOR: Record<SortDirection, string> = { asc: '↑', desc: '↓' };
+
 export function PaymentHistory({
   records,
   loading,
@@ -30,50 +52,89 @@ export function PaymentHistory({
   locale,
   className,
 }: PaymentHistoryProps) {
-  const columns = useMemo<DataTableColumn<PaymentRecord>[]>(
-    () => [
-      {
-        key: 'createdAt',
-        header: 'Date',
-        sortable: true,
-        cell: (p) => new Date(p.createdAt).toLocaleDateString(locale),
-      },
-      {
-        key: 'reference',
-        header: 'For',
-        cell: (p) => `${p.reference.kind} · ${p.reference.id}`,
-      },
-      {
-        key: 'amount',
-        header: 'Amount',
-        sortable: true,
-        cell: (p) => formatAmount(p.amount, p.currency, locale),
-      },
-      {
-        key: 'provider',
-        header: 'Provider',
-        cell: (p) => p.provider,
-      },
-      {
-        key: 'status',
-        header: 'Status',
-        cell: (p) => <PaymentStatusBadge status={p.status} />,
-      },
-    ],
-    [locale],
+  const [sort, setSort] = useState<SortState>({ key: 'createdAt', direction: 'desc' });
+
+  const toggleSort = useCallback((key: SortKey) => {
+    setSort((current) =>
+      current.key === key
+        ? { key, direction: current.direction === 'asc' ? 'desc' : 'asc' }
+        : { key, direction: 'desc' },
+    );
+  }, []);
+
+  const sortedRecords = useMemo(() => {
+    const factor = sort.direction === 'asc' ? 1 : -1;
+    // Sort a copy: `records` belongs to the host and may be memoized upstream.
+    return [...records].sort((a, b) => {
+      if (sort.key === 'amount') return (a.amount - b.amount) * factor;
+      return (Date.parse(a.createdAt) - Date.parse(b.createdAt)) * factor;
+    });
+  }, [records, sort]);
+
+  const rows = useMemo(
+    () =>
+      sortedRecords.map((record) => ({
+        record,
+        id: record.id,
+        date: new Date(record.createdAt).toLocaleDateString(locale),
+        reference: `${record.reference.kind} · ${record.reference.id}`,
+        amount: formatAmount(record.amount, record.currency, locale),
+      })),
+    [sortedRecords, locale],
+  );
+
+  const renderSortableHead = (key: SortKey, label: string) => (
+    <TableHead>
+      <button
+        type="button"
+        onClick={() => toggleSort(key)}
+        className="inline-flex items-center gap-1 font-medium hover:text-foreground"
+        aria-sort={sort.key === key ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none'}
+      >
+        {label}
+        {sort.key === key ? <span aria-hidden>{SORT_INDICATOR[sort.direction]}</span> : null}
+      </button>
+    </TableHead>
   );
 
   return (
     <div className={className}>
-      <DataTable
-        data={records}
-        columns={columns}
-        getRowId={(p) => p.id}
-        loading={loading}
-        emptyMessage={emptyMessage}
-        onRowClick={onRowClick}
-        getRowClassName={onRowClick ? () => 'cursor-pointer' : undefined}
-      />
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {renderSortableHead('createdAt', 'Date')}
+            <TableHead>For</TableHead>
+            {renderSortableHead('amount', 'Amount')}
+            <TableHead>Provider</TableHead>
+            <TableHead>Status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {loading || rows.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={5} className="py-8 text-center text-muted-foreground">
+                {loading ? 'Loading…' : emptyMessage}
+              </TableCell>
+            </TableRow>
+          ) : (
+            rows.map((row) => (
+              <TableRow
+                key={row.id}
+                onClick={onRowClick ? () => onRowClick(row.record) : undefined}
+                className={onRowClick ? 'cursor-pointer' : undefined}
+              >
+                <TableCell>{row.date}</TableCell>
+                <TableCell>{row.reference}</TableCell>
+                <TableCell>{row.amount}</TableCell>
+                <TableCell>{row.record.provider}</TableCell>
+                <TableCell>
+                  <PaymentStatusBadge status={row.record.status} />
+                </TableCell>
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
     </div>
   );
 }

package/src/transport/mock-adapter.ts

@@ -100,7 +100,7 @@ export function createMockPaymentAdapter(
       return { status: 'succeeded', intentId };
     },
 
-    async createSubscription(input: StartSubscriptionInput): Promise<SubscriptionIntent> {
+    async createSubscription(_input: StartSubscriptionInput): Promise<SubscriptionIntent> {
       await delay(latencyMs);
       const subId = nextId('sub');
       // Mock the deferred flow: a paid first invoice → confirmPayment path, with