@sudobility/consumables_pages 0.0.11 → 0.0.13
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.
- package/CLAUDE.md +0 -8
- package/README.md +77 -0
- package/package.json +4 -4
package/CLAUDE.md
CHANGED
|
@@ -147,14 +147,6 @@ module.exports = {
|
|
|
147
147
|
- **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.
|
|
148
148
|
- **`tsconfig.json` has `noEmit: true`**: The main tsconfig is for checking only. Building requires `tsconfig.build.json` (via `bun run build`).
|
|
149
149
|
|
|
150
|
-
## Testing
|
|
151
|
-
|
|
152
|
-
- Run tests: `bun test` (uses vitest)
|
|
153
|
-
- Tests use **React Testing Library** with **jsdom** environment.
|
|
154
|
-
- Test that components render correctly given various prop combinations (empty lists, loading states, different label overrides).
|
|
155
|
-
- Test responsive behavior by verifying correct CSS classes are applied.
|
|
156
|
-
- Do not test hook behavior here -- hooks belong to `consumables_client`.
|
|
157
|
-
|
|
158
150
|
## Publishing
|
|
159
151
|
|
|
160
152
|
- Package: `@sudobility/consumables_pages` (public on npm)
|
package/README.md
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
# @sudobility/consumables_pages
|
|
2
|
+
|
|
3
|
+
Web-only presentational UI components for the consumable credits system. Styled with Tailwind CSS.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add @sudobility/consumables_pages
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Consumers must include this package in their Tailwind content configuration:
|
|
12
|
+
|
|
13
|
+
```css
|
|
14
|
+
/* Tailwind v4 */
|
|
15
|
+
@import "tailwindcss";
|
|
16
|
+
@source "../node_modules/@sudobility/consumables_pages/dist";
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import {
|
|
23
|
+
CreditStorePage,
|
|
24
|
+
PurchaseHistoryPage,
|
|
25
|
+
UsageHistoryPage,
|
|
26
|
+
CreditBalanceBadge,
|
|
27
|
+
} from '@sudobility/consumables_pages';
|
|
28
|
+
|
|
29
|
+
<CreditStorePage
|
|
30
|
+
isAuthenticated={true}
|
|
31
|
+
balance={balance}
|
|
32
|
+
packages={packages}
|
|
33
|
+
labels={labels}
|
|
34
|
+
formatters={formatters}
|
|
35
|
+
onPurchase={handlePurchase}
|
|
36
|
+
/>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## API
|
|
40
|
+
|
|
41
|
+
### Components
|
|
42
|
+
|
|
43
|
+
| Component | Description |
|
|
44
|
+
|-----------|-------------|
|
|
45
|
+
| `CreditStorePage` | Balance display + grid of credit packages with buy buttons |
|
|
46
|
+
| `PurchaseHistoryPage` | Responsive table/cards of purchase records with pagination |
|
|
47
|
+
| `UsageHistoryPage` | Responsive table/cards of usage records with pagination |
|
|
48
|
+
| `CreditBalanceBadge` | Inline pill badge showing credit count (for topbar) |
|
|
49
|
+
|
|
50
|
+
### Types
|
|
51
|
+
|
|
52
|
+
All prop interfaces are exported from `src/types.ts`:
|
|
53
|
+
|
|
54
|
+
| Type | Description |
|
|
55
|
+
|------|-------------|
|
|
56
|
+
| `CreditStorePageProps` | Data, labels, formatters, and callbacks for store page |
|
|
57
|
+
| `PurchaseHistoryPageProps` | Purchase records, labels, formatters, pagination |
|
|
58
|
+
| `UsageHistoryPageProps` | Usage records, labels, formatters, pagination |
|
|
59
|
+
| `CreditBalanceBadgeProps` | Balance value, loading state, onClick |
|
|
60
|
+
| `*Labels` / `*Formatters` | Customizable i18n strings and formatting functions |
|
|
61
|
+
|
|
62
|
+
Components are purely presentational -- they receive all data and callbacks via props.
|
|
63
|
+
|
|
64
|
+
## Development
|
|
65
|
+
|
|
66
|
+
```bash
|
|
67
|
+
bun run build # Build ESM via tsc
|
|
68
|
+
bun run dev # Watch mode
|
|
69
|
+
bun test # Run tests (vitest + jsdom + React Testing Library)
|
|
70
|
+
bun run typecheck # TypeScript check
|
|
71
|
+
bun run lint # ESLint
|
|
72
|
+
bun run format # Prettier format
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## License
|
|
76
|
+
|
|
77
|
+
BUSL-1.1
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sudobility/consumables_pages",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.13",
|
|
4
4
|
"description": "Web UI components for consumable credits (credit store, purchase history, usage history)",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -30,13 +30,13 @@
|
|
|
30
30
|
"prepublishOnly": "bun run build"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
|
-
"@sudobility/consumables_client": "^0.0.
|
|
34
|
-
"@sudobility/types": "^1.9.
|
|
33
|
+
"@sudobility/consumables_client": "^0.0.11",
|
|
34
|
+
"@sudobility/types": "^1.9.57",
|
|
35
35
|
"react": "^18.0.0 || ^19.0.0",
|
|
36
36
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@sudobility/consumables_client": "^0.0.
|
|
39
|
+
"@sudobility/consumables_client": "^0.0.11",
|
|
40
40
|
"@testing-library/jest-dom": "^6.9.1",
|
|
41
41
|
"@testing-library/react": "^16.3.2",
|
|
42
42
|
"@types/bun": "^1.2.8",
|