@sudobility/consumables_pages 0.0.5 → 0.0.7
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 +37 -0
- package/package.json +4 -4
package/CLAUDE.md
CHANGED
|
@@ -26,4 +26,41 @@ All components are props-driven with labels/formatters for i18n support.
|
|
|
26
26
|
bun run build # Build ESM
|
|
27
27
|
bun run dev # Watch mode
|
|
28
28
|
bun run typecheck # TypeScript check
|
|
29
|
+
bun test # Run tests
|
|
29
30
|
```
|
|
31
|
+
|
|
32
|
+
## Related Projects
|
|
33
|
+
|
|
34
|
+
- **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.
|
|
35
|
+
- **@sudobility/types** — Shared type definitions used across the consumables ecosystem.
|
|
36
|
+
|
|
37
|
+
Dependency direction: `consumables_pages` depends on `consumables_client` (peer dep for types only, not runtime calls)
|
|
38
|
+
|
|
39
|
+
## Coding Patterns
|
|
40
|
+
|
|
41
|
+
- **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.
|
|
42
|
+
- **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.
|
|
43
|
+
- **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.
|
|
44
|
+
- **No direct CSS**: All styling uses Tailwind utility classes. Do not introduce CSS files, CSS modules, or styled-components.
|
|
45
|
+
|
|
46
|
+
## Gotchas
|
|
47
|
+
|
|
48
|
+
- **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.
|
|
49
|
+
- **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.
|
|
50
|
+
- **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`.
|
|
51
|
+
- **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.
|
|
52
|
+
|
|
53
|
+
## Testing
|
|
54
|
+
|
|
55
|
+
- Run tests: `bun test` (uses vitest)
|
|
56
|
+
- Tests use **React Testing Library** with **jsdom** environment.
|
|
57
|
+
- Test that components render correctly given various prop combinations (empty lists, loading states, different label overrides).
|
|
58
|
+
- Test responsive behavior by verifying correct CSS classes are applied.
|
|
59
|
+
- Do not test hook behavior here -- hooks belong to `consumables_client`.
|
|
60
|
+
|
|
61
|
+
## Publishing
|
|
62
|
+
|
|
63
|
+
- Package: `@sudobility/consumables_pages` (public on npm)
|
|
64
|
+
- Build before publish: `bun run build` produces ESM output in `dist/`
|
|
65
|
+
- Bump version in `package.json`, then `npm publish --access public`
|
|
66
|
+
- Ensure `consumables_client` peer dependency version range is correct in `package.json` before publishing
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sudobility/consumables_pages",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
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",
|
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
"prepublishOnly": "bun run build"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
|
-
"@sudobility/consumables_client": "^0.0.
|
|
33
|
-
"@sudobility/types": "^1.9.
|
|
32
|
+
"@sudobility/consumables_client": "^0.0.6",
|
|
33
|
+
"@sudobility/types": "^1.9.53",
|
|
34
34
|
"react": "^18.0.0 || ^19.0.0",
|
|
35
35
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@sudobility/consumables_client": "^0.0.
|
|
38
|
+
"@sudobility/consumables_client": "^0.0.6",
|
|
39
39
|
"@testing-library/jest-dom": "^6.9.1",
|
|
40
40
|
"@testing-library/react": "^16.3.2",
|
|
41
41
|
"@types/bun": "^1.2.8",
|