87 lines
2.8 KiB
Markdown
87 lines
2.8 KiB
Markdown
# OpenSpec Change: enterprise-gaming-react-bank
|
|
|
|
- **Change ID**: enterprise-gaming-react-bank
|
|
- **Package**: `@suaveplan/react-bank`
|
|
- **Category**: gaming/react
|
|
- **Target path**: `gaming/react/react-bank`
|
|
- **Status**: PROPOSED
|
|
- **Date**: 2026-04-24
|
|
- **Reference spec**: `/mnt/s/web/suaveplan/enterprise/react-bank.md`
|
|
|
|
---
|
|
|
|
## Summary
|
|
|
|
Deliver `@suaveplan/react-bank` on the genesis branch from scratch at enterprise quality. The package provides React components and hooks for a game-banking UI. A typed `BankClient` wraps `@suaveplan/api-plugin-bank` HTTP endpoints; a `BankProvider` context holds account state, loading, and error; `useBank()` exposes the context; six pre-built components cover account list, balance display, interest rates, open account form, transaction history, and transfer form. English locale pack included for `@suaveplan/i18n` under the `bank` namespace. Genesis adds Storybook stories, Vitest DOM tests, and 100% coverage.
|
|
|
|
---
|
|
|
|
## Current-state audit (genesis)
|
|
|
|
Package does not exist on genesis yet — fresh build.
|
|
|
|
---
|
|
|
|
## Available workspace deps on genesis
|
|
|
|
| Package | Role |
|
|
|---|---|
|
|
| `@suaveplan/error` (`workspace:^`) | `BankApiError` |
|
|
| `@suaveplan/events` (`workspace:^`) | Bank event subscriptions |
|
|
| `react` (`catalog:react`) | React 18 |
|
|
| `zod` (`catalog:forms`) | Response validation |
|
|
|
|
---
|
|
|
|
## Public API surface
|
|
|
|
```ts
|
|
function createBankClient(options: BankClientOptions): BankClient
|
|
// listAccounts, getAccount, openAccount, transfer, listTransactions, getInterestRates
|
|
|
|
function BankProvider(props: BankProviderProps): JSX.Element
|
|
function useBank(): BankContext
|
|
|
|
// Components
|
|
function AccountList(props): JSX.Element
|
|
function AccountCard(props): JSX.Element
|
|
function BalanceDisplay(props): JSX.Element
|
|
function InterestRateDisplay(props): JSX.Element
|
|
function OpenAccountForm(props): JSX.Element
|
|
function TransactionHistory(props): JSX.Element
|
|
function TransferForm(props): JSX.Element
|
|
```
|
|
|
|
---
|
|
|
|
## File layout
|
|
|
|
```text
|
|
gaming/react/react-bank/
|
|
package.json
|
|
tsconfig.json
|
|
vitest.config.ts
|
|
src/
|
|
index.ts
|
|
types/common.ts + md
|
|
client/bank-client.ts + md + test
|
|
context/bank-provider.tsx + md + test
|
|
hooks/use-bank.ts + md + test
|
|
components/
|
|
account-list/ (tsx + md + test + stories + index)
|
|
account-card/ (tsx + md + test + stories + index)
|
|
balance-display/ (tsx + md + test + stories + index)
|
|
interest-rate-display/ (tsx + md + test + stories + index)
|
|
open-account-form/ (tsx + md + test + stories + index)
|
|
transaction-history/ (tsx + md + test + stories + index)
|
|
transfer-form/ (tsx + md + test + stories + index)
|
|
i18n/
|
|
en.ts # bankTranslationsEn
|
|
```
|
|
|
|
---
|
|
|
|
## Impact
|
|
|
|
**Downstream**: composable in game UI for VC management. Prerequisites: `@suaveplan/error`, `@suaveplan/events`, react, zod.
|