76 lines
2.4 KiB
Markdown
76 lines
2.4 KiB
Markdown
# OpenSpec Change: enterprise-gaming-react-crafting
|
|
|
|
- **Change ID**: enterprise-gaming-react-crafting
|
|
- **Package**: `@suaveplan/react-crafting`
|
|
- **Category**: gaming/react
|
|
- **Target path**: `gaming/react/react-crafting`
|
|
- **Status**: PROPOSED
|
|
- **Date**: 2026-04-24
|
|
- **Reference spec**: `/mnt/s/web/suaveplan/enterprise/react-crafting.md`
|
|
|
|
---
|
|
|
|
## Summary
|
|
|
|
Deliver `@suaveplan/react-crafting` on the genesis branch from scratch at enterprise quality. The package is the headless React layer around `@suaveplan/crafting`. A `CraftingUIManager` wraps a `CraftingStation` and `RecipeRegistry`; `useCrafting()` provides state via `useSyncExternalStore`; components render the recipe browser (filtered list with ingredient requirements), the crafting queue (active jobs with progress bars), and the output result notification. 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/crafting` (`workspace:^`) | `CraftingStation`, `RecipeRegistry` |
|
|
| `@suaveplan/events` (`workspace:^`) | Craft event subscriptions |
|
|
| `react` (`catalog:react`) | React 18 |
|
|
|
|
---
|
|
|
|
## Public API surface
|
|
|
|
```ts
|
|
function createCraftingUIManager(station: CraftingStation, registry: RecipeRegistry): CraftingUIManager
|
|
function useCrafting(): CraftingUIState
|
|
|
|
// Components
|
|
function RecipeBrowser(props: RecipeBrowserProps): JSX.Element
|
|
function RecipeCard(props: RecipeCardProps): JSX.Element
|
|
function CraftQueue(props: CraftQueueProps): JSX.Element
|
|
function CraftProgress(props: CraftProgressProps): JSX.Element
|
|
function CraftResult(props: CraftResultProps): JSX.Element
|
|
```
|
|
|
|
---
|
|
|
|
## File layout
|
|
|
|
```text
|
|
gaming/react/react-crafting/
|
|
package.json
|
|
tsconfig.json
|
|
vitest.config.ts
|
|
src/
|
|
index.ts
|
|
types/common.ts + md
|
|
state/crafting-ui-manager.ts + md + test
|
|
hooks/use-crafting.ts + md + test
|
|
components/
|
|
recipe-browser/ (tsx + md + test + stories + index)
|
|
recipe-card/ (tsx + md + test + stories + index)
|
|
craft-queue/ (tsx + md + test + stories + index)
|
|
craft-progress/ (tsx + md + test + stories + index)
|
|
craft-result/ (tsx + md + test + stories + index)
|
|
```
|
|
|
|
---
|
|
|
|
## Impact
|
|
|
|
**Downstream**: game apps show crafting UI in station interaction panel. Prerequisites: `@suaveplan/crafting`, `@suaveplan/events`, react.
|