@sudobility/consumables_pages 0.0.3 → 0.0.6

package/CLAUDE.md

@@ -26,4 +26,41 @@ All components are props-driven with labels/formatters for i18n support.
 bun run build        # Build ESM
 bun run dev          # Watch mode
 bun run typecheck    # TypeScript check
+bun test             # Run tests
 ```
+
+## Related Projects
+
+- **consumables_client** (`@sudobility/consumables_client`) — Peer dependency that provides hooks (`useBalance`, `usePurchaseCredits`, etc.) and data types. This package does NOT call those hooks internally; the consuming app calls them and passes data as props.
+- **@sudobility/types** — Shared type definitions used across the consumables ecosystem.
+
+Dependency direction: `consumables_pages` depends on `consumables_client` (peer dep for types only, not runtime calls)
+
+## Coding Patterns
+
+- **Props-driven components (no internal state)**: Components receive all data and callbacks via props. They do not call hooks, manage state, or fetch data. This makes them pure presentational components.
+- **Customizable labels and formatters for i18n**: All user-facing text is passed in via `labels` props, and numeric/date formatting uses `formatter` props. Never hardcode user-visible strings inside components.
+- **Responsive design with Tailwind sm/lg breakpoints**: Components use Tailwind's `sm:` and `lg:` prefixes for responsive layouts (e.g., cards on mobile, tables on desktop). Follow this pattern for any new components.
+- **No direct CSS**: All styling uses Tailwind utility classes. Do not introduce CSS files, CSS modules, or styled-components.
+
+## Gotchas
+
+- **Consumer app must provide Tailwind CSS**: This package emits Tailwind class names but does NOT bundle Tailwind itself. If the consuming app does not have Tailwind configured, components will render unstyled. This is by design.
+- **Components are purely presentational**: No hooks are called inside components. The parent app is responsible for calling `useBalance()`, `usePurchaseCredits()`, etc. from `consumables_client` and passing the results as props. Breaking this pattern creates tight coupling.
+- **No internal state**: Components derive everything from props. If you need loading states or error states, they must be passed in as props, not managed internally with `useState`.
+- **Peer dependency on consumables_client**: The package depends on `consumables_client` for TypeScript types (e.g., `CreditPackage`, `CreditBalance`), but it never imports runtime code from it. The peer dependency ensures type compatibility.
+
+## Testing
+
+- Run tests: `bun test` (uses vitest)
+- Tests use **React Testing Library** with **jsdom** environment.
+- Test that components render correctly given various prop combinations (empty lists, loading states, different label overrides).
+- Test responsive behavior by verifying correct CSS classes are applied.
+- Do not test hook behavior here -- hooks belong to `consumables_client`.
+
+## Publishing
+
+- Package: `@sudobility/consumables_pages` (public on npm)
+- Build before publish: `bun run build` produces ESM output in `dist/`
+- Bump version in `package.json`, then `npm publish --access public`
+- Ensure `consumables_client` peer dependency version range is correct in `package.json` before publishing

package/dist/CreditBalanceBadge.d.ts

@@ -0,0 +1,2 @@
+import type { CreditBalanceBadgeProps } from "./types";
+export declare function CreditBalanceBadge({ balance, isLoading, onClick, className, }: CreditBalanceBadgeProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/CreditBalanceBadge.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CreditBalanceBadge({ balance, isLoading, onClick, className, }) {
+    if (isLoading) {
+        return (_jsx("span", { className: `inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium text-gray-400 ${className || ""}`, children: _jsx("span", { className: "animate-pulse", children: "..." }) }));
+    }
+    if (balance === null)
+        return null;
+    const Wrapper = onClick ? "button" : "span";
+    return (_jsxs(Wrapper, { onClick: onClick, className: `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${balance > 0
+            ? "bg-blue-100 text-blue-700"
+            : "bg-red-100 text-red-700"} ${onClick ? "cursor-pointer hover:opacity-80" : ""} ${className || ""}`, children: [_jsx("svg", { className: "w-3.5 h-3.5", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z", clipRule: "evenodd" }) }), balance] }));
+}

package/dist/CreditStorePage.d.ts

@@ -0,0 +1,2 @@
+import type { CreditStorePageProps } from "./types";
+export declare function CreditStorePage({ isAuthenticated, balance, packages, isLoading, isPurchasing, error, onPurchase, onLoginClick, labels, formatters, className, }: CreditStorePageProps): import("react/jsx-runtime").JSX.Element;

package/dist/CreditStorePage.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CreditStorePage({ isAuthenticated, balance, packages, isLoading, isPurchasing, error, onPurchase, onLoginClick, labels, formatters, className, }) {
+    return (_jsxs("div", { className: className, children: [_jsx("h1", { className: "text-2xl font-bold mb-6", children: labels.title }), isAuthenticated && balance !== null && (_jsxs("div", { className: "mb-8 p-4 bg-blue-50 rounded-lg border border-blue-200", children: [_jsx("p", { className: "text-sm text-blue-600 font-medium", children: labels.currentBalanceLabel }), _jsx("p", { className: "text-3xl font-bold text-blue-900", children: formatters.formatCredits(balance) })] })), error && (_jsxs("div", { className: "mb-6 p-4 bg-red-50 rounded-lg border border-red-200", children: [_jsx("p", { className: "text-sm font-medium text-red-800", children: labels.errorTitle }), _jsx("p", { className: "text-sm text-red-600", children: error })] })), !isAuthenticated && (_jsxs("div", { className: "mb-6 p-4 bg-yellow-50 rounded-lg border border-yellow-200", children: [_jsx("p", { className: "text-sm text-yellow-800", children: labels.loginRequired }), _jsx("button", { onClick: onLoginClick, className: "mt-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700", children: "Log in" })] })), isLoading && (_jsx("div", { className: "flex justify-center py-12", children: _jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }) })), !isLoading && packages.length === 0 && (_jsx("p", { className: "text-gray-500 text-center py-8", children: labels.noProducts })), !isLoading && packages.length > 0 && (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: packages.map((pkg) => (_jsx("div", { className: "p-6 bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-shadow", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-3xl font-bold text-gray-900", children: formatters.formatCredits(pkg.credits) }), formatters.getPackageDescription && (_jsx("p", { className: "text-sm text-gray-500 mt-1", children: formatters.getPackageDescription(pkg.packageId) })), _jsx("p", { className: "text-xl font-semibold text-blue-600 mt-3", children: pkg.priceString }), _jsx("button", { onClick: () => onPurchase(pkg.packageId), disabled: isPurchasing || !isAuthenticated, className: "mt-4 w-full px-4 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: isPurchasing
+                                    ? labels.purchasingButton
+                                    : labels.purchaseButton })] }) }, pkg.packageId))) }))] }));
+}

package/dist/PurchaseHistoryPage.d.ts

@@ -0,0 +1,2 @@
+import type { PurchaseHistoryPageProps } from "./types";
+export declare function PurchaseHistoryPage({ purchases, isLoading, error, onLoadMore, hasMore, labels, formatters, className, }: PurchaseHistoryPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/PurchaseHistoryPage.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function PurchaseHistoryPage({ purchases, isLoading, error, onLoadMore, hasMore, labels, formatters, className, }) {
+    return (_jsxs("div", { className: className, children: [_jsx("h1", { className: "text-2xl font-bold mb-6", children: labels.title }), error && (_jsx("div", { className: "mb-4 p-3 bg-red-50 rounded-lg border border-red-200", children: _jsx("p", { className: "text-sm text-red-600", children: error }) })), isLoading && (_jsx("div", { className: "flex justify-center py-12", children: _jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }) })), !isLoading && purchases.length === 0 && (_jsx("p", { className: "text-gray-500 text-center py-8", children: labels.noRecords })), !isLoading && purchases.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden sm:block overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-gray-200", children: [_jsx("th", { className: "text-left py-3 px-4 font-medium text-gray-500", children: labels.columnDate }), _jsx("th", { className: "text-right py-3 px-4 font-medium text-gray-500", children: labels.columnCredits }), _jsx("th", { className: "text-left py-3 px-4 font-medium text-gray-500", children: labels.columnSource }), _jsx("th", { className: "text-right py-3 px-4 font-medium text-gray-500", children: labels.columnAmount })] }) }), _jsx("tbody", { children: purchases.map((purchase) => (_jsxs("tr", { className: "border-b border-gray-100 hover:bg-gray-50", children: [_jsx("td", { className: "py-3 px-4 text-gray-700", children: formatters.formatDate(purchase.created_at) }), _jsxs("td", { className: "py-3 px-4 text-right font-medium text-green-600", children: ["+", purchase.credits] }), _jsx("td", { className: "py-3 px-4 text-gray-600", children: formatters.formatSource(purchase.source) }), _jsx("td", { className: "py-3 px-4 text-right text-gray-600", children: purchase.price_cents != null && purchase.currency
+                                                    ? formatters.formatAmount(purchase.price_cents, purchase.currency)
+                                                    : "-" })] }, purchase.id))) })] }) }), _jsx("div", { className: "sm:hidden space-y-3", children: purchases.map((purchase) => (_jsx("div", { className: "p-4 bg-white rounded-lg border border-gray-200", children: _jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-gray-500", children: formatters.formatDate(purchase.created_at) }), _jsx("p", { className: "text-sm text-gray-600", children: formatters.formatSource(purchase.source) })] }), _jsxs("div", { className: "text-right", children: [_jsxs("p", { className: "font-medium text-green-600", children: ["+", purchase.credits] }), purchase.price_cents != null && purchase.currency && (_jsx("p", { className: "text-sm text-gray-500", children: formatters.formatAmount(purchase.price_cents, purchase.currency) }))] })] }) }, purchase.id))) }), hasMore && onLoadMore && (_jsx("div", { className: "mt-4 text-center", children: _jsx("button", { onClick: onLoadMore, className: "px-4 py-2 text-sm text-blue-600 hover:text-blue-800 font-medium", children: labels.loadMore }) }))] }))] }));
+}

package/dist/UsageHistoryPage.d.ts

@@ -0,0 +1,2 @@
+import type { UsageHistoryPageProps } from "./types";
+export declare function UsageHistoryPage({ usages, isLoading, error, onLoadMore, hasMore, labels, formatters, className, }: UsageHistoryPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/UsageHistoryPage.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function UsageHistoryPage({ usages, isLoading, error, onLoadMore, hasMore, labels, formatters, className, }) {
+    return (_jsxs("div", { className: className, children: [_jsx("h1", { className: "text-2xl font-bold mb-6", children: labels.title }), error && (_jsx("div", { className: "mb-4 p-3 bg-red-50 rounded-lg border border-red-200", children: _jsx("p", { className: "text-sm text-red-600", children: error }) })), isLoading && (_jsx("div", { className: "flex justify-center py-12", children: _jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }) })), !isLoading && usages.length === 0 && (_jsx("p", { className: "text-gray-500 text-center py-8", children: labels.noRecords })), !isLoading && usages.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden sm:block overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-gray-200", children: [_jsx("th", { className: "text-left py-3 px-4 font-medium text-gray-500", children: labels.columnDate }), _jsx("th", { className: "text-left py-3 px-4 font-medium text-gray-500", children: labels.columnFilename })] }) }), _jsx("tbody", { children: usages.map((usage) => (_jsxs("tr", { className: "border-b border-gray-100 hover:bg-gray-50", children: [_jsx("td", { className: "py-3 px-4 text-gray-700", children: formatters.formatDate(usage.created_at) }), _jsx("td", { className: "py-3 px-4 text-gray-600", children: usage.filename || "-" })] }, usage.id))) })] }) }), _jsx("div", { className: "sm:hidden space-y-3", children: usages.map((usage) => (_jsxs("div", { className: "p-4 bg-white rounded-lg border border-gray-200", children: [_jsx("p", { className: "text-sm text-gray-500", children: formatters.formatDate(usage.created_at) }), _jsx("p", { className: "text-sm text-gray-700 font-medium", children: usage.filename || "-" })] }, usage.id))) }), hasMore && onLoadMore && (_jsx("div", { className: "mt-4 text-center", children: _jsx("button", { onClick: onLoadMore, className: "px-4 py-2 text-sm text-blue-600 hover:text-blue-800 font-medium", children: labels.loadMore }) }))] }))] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { CreditStorePage } from "./CreditStorePage";
+export { PurchaseHistoryPage } from "./PurchaseHistoryPage";
+export { UsageHistoryPage } from "./UsageHistoryPage";
+export { CreditBalanceBadge } from "./CreditBalanceBadge";
+export type { CreditStorePageProps, CreditStorePageLabels, CreditStorePageFormatters, PurchaseHistoryPageProps, PurchaseHistoryPageLabels, PurchaseHistoryPageFormatters, UsageHistoryPageProps, UsageHistoryPageLabels, UsageHistoryPageFormatters, CreditBalanceBadgeProps, } from "./types";

package/dist/index.js

@@ -0,0 +1,4 @@
+export { CreditStorePage } from "./CreditStorePage";
+export { PurchaseHistoryPage } from "./PurchaseHistoryPage";
+export { UsageHistoryPage } from "./UsageHistoryPage";
+export { CreditBalanceBadge } from "./CreditBalanceBadge";

package/dist/types.d.ts

@@ -0,0 +1,80 @@
+import type { CreditPackage } from "@sudobility/consumables_client";
+import type { ConsumablePurchaseRecord, ConsumableUsageRecord } from "@sudobility/types";
+export interface CreditStorePageLabels {
+    title: string;
+    currentBalanceLabel: string;
+    creditsUnit: string;
+    purchaseButton: string;
+    purchasingButton: string;
+    noProducts: string;
+    errorTitle: string;
+    loginRequired: string;
+}
+export interface CreditStorePageFormatters {
+    formatCredits: (count: number) => string;
+    getPackageDescription?: (packageId: string) => string;
+}
+export interface CreditStorePageProps {
+    isAuthenticated: boolean;
+    balance: number | null;
+    packages: CreditPackage[];
+    isLoading: boolean;
+    isPurchasing: boolean;
+    error: string | null;
+    onPurchase: (packageId: string) => Promise<void>;
+    onLoginClick: () => void;
+    labels: CreditStorePageLabels;
+    formatters: CreditStorePageFormatters;
+    className?: string;
+}
+export interface PurchaseHistoryPageLabels {
+    title: string;
+    columnDate: string;
+    columnCredits: string;
+    columnSource: string;
+    columnProduct: string;
+    columnAmount: string;
+    noRecords: string;
+    loadMore: string;
+}
+export interface PurchaseHistoryPageFormatters {
+    formatDate: (dateStr: string) => string;
+    formatAmount: (cents: number, currency: string) => string;
+    formatSource: (source: string) => string;
+}
+export interface PurchaseHistoryPageProps {
+    purchases: ConsumablePurchaseRecord[];
+    isLoading: boolean;
+    error: string | null;
+    onLoadMore?: () => void;
+    hasMore?: boolean;
+    labels: PurchaseHistoryPageLabels;
+    formatters: PurchaseHistoryPageFormatters;
+    className?: string;
+}
+export interface UsageHistoryPageLabels {
+    title: string;
+    columnDate: string;
+    columnFilename: string;
+    noRecords: string;
+    loadMore: string;
+}
+export interface UsageHistoryPageFormatters {
+    formatDate: (dateStr: string) => string;
+}
+export interface UsageHistoryPageProps {
+    usages: ConsumableUsageRecord[];
+    isLoading: boolean;
+    error: string | null;
+    onLoadMore?: () => void;
+    hasMore?: boolean;
+    labels: UsageHistoryPageLabels;
+    formatters: UsageHistoryPageFormatters;
+    className?: string;
+}
+export interface CreditBalanceBadgeProps {
+    balance: number | null;
+    isLoading: boolean;
+    onClick?: () => void;
+    className?: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/consumables_pages",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "description": "Web UI components for consumable credits (credit store, purchase history, usage history)",
   "type": "module",
   "main": "./dist/index.js",
@@ -17,7 +17,7 @@
     "CLAUDE.md"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc -p tsconfig.build.json",
     "dev": "tsc --watch",
     "clean": "rm -rf dist",
     "typecheck": "bunx tsc --noEmit",
@@ -29,13 +29,13 @@
     "prepublishOnly": "bun run build"
   },
   "peerDependencies": {
-    "@sudobility/consumables_client": "^0.0.3",
-    "@sudobility/types": "^1.9.51",
+    "@sudobility/consumables_client": "^0.0.4",
+    "@sudobility/types": "^1.9.52",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@sudobility/consumables_client": "^0.0.3",
+    "@sudobility/consumables_client": "^0.0.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/bun": "^1.2.8",