Initial Commit
This commit is contained in:
88
openspec/changes/enterprise-react-rule-builder/proposal.md
Normal file
88
openspec/changes/enterprise-react-rule-builder/proposal.md
Normal file
@@ -0,0 +1,88 @@
|
||||
# OpenSpec Change: enterprise-react-rule-builder
|
||||
|
||||
- **Change ID**: enterprise-react-rule-builder
|
||||
- **Package**: `@suaveplan/react-rule-builder`
|
||||
- **Category**: react
|
||||
- **Target path**: `react/forms/react-rule-builder`
|
||||
- **Status**: PROPOSED
|
||||
- **Date**: 2026-04-24
|
||||
- **Reference spec**: `/mnt/s/web/suaveplan/enterprise/react-rule-builder.md`
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
Deliver `@suaveplan/react-rule-builder` on genesis from scratch at enterprise quality. A visual rule-builder UI that reads/writes a Rule AST: `RuleBuilder`, `LogicGroup` (AND/OR/NOT), `ConditionRow`, `useRuleBuilder` hook, drag-and-drop reordering via `@suaveplan/react-dnd`, and AST path utilities. Genesis deletes the `src/mocks/` directory entirely, adds Storybook stories, Playwright E2E for drag-drop reorder, Zod schema validation at the rule-build boundary, and 100% test coverage using real workspace deps.
|
||||
|
||||
---
|
||||
|
||||
## Current-state audit (genesis)
|
||||
|
||||
Package does not exist on genesis — fresh build.
|
||||
|
||||
---
|
||||
|
||||
## Available workspace deps on genesis
|
||||
|
||||
| Package | Role |
|
||||
|---|---|
|
||||
| `@suaveplan/error` (`workspace:^`) | `RuleBuilderError` |
|
||||
| `@suaveplan/react-dnd` (`workspace:^`) | Drag-drop reordering |
|
||||
| `@suaveplan/react-translate` (`workspace:^`) | i18n |
|
||||
| `@suaveplan/react-ui` (`workspace:^`) | UI primitives |
|
||||
| `zod` (`catalog:forms`) | Rule AST validation |
|
||||
|
||||
External: `tslib catalog:build`. React 18 peer.
|
||||
|
||||
---
|
||||
|
||||
## Preserved public API surface
|
||||
|
||||
```ts
|
||||
RuleBuilder, LogicGroup, ConditionRow
|
||||
useRuleBuilder
|
||||
|
||||
// Helpers
|
||||
createEmptyCondition, createEmptyGroup
|
||||
getApplicableOperators, getRuleAtPath, insertRuleAtPath, removeRuleAtPath, updateRuleAtPath
|
||||
DEFAULT_OPERATORS
|
||||
|
||||
// Types
|
||||
ConditionRowProps, FieldDefinition, LogicGroupProps, OnRuleChange,
|
||||
OperatorOption, RuleBuilderProps, SelectOption
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## New additions for genesis
|
||||
|
||||
1. **No mocks** — all tests use real `@suaveplan/react-dnd`, `@suaveplan/react-translate`, `@suaveplan/react-ui`.
|
||||
2. **`RuleBuilderError`** — codes: `RULE_BUILDER_INVALID_PATH`, `RULE_BUILDER_INVALID_RULE`.
|
||||
3. **Zod `RuleSchema`** — validates the built rule before firing `onRuleChange`; invalid rule throws `RuleBuilderError(RULE_BUILDER_INVALID_RULE)`.
|
||||
4. **Stories** — `RuleBuilder` default, nested-groups, drag-reorder, playground.
|
||||
5. **Playwright E2E** — add condition, drag to reorder, verify AST shape.
|
||||
|
||||
---
|
||||
|
||||
## File layout
|
||||
|
||||
```text
|
||||
react/forms/react-rule-builder/
|
||||
package.json
|
||||
tsconfig.json
|
||||
vitest.config.ts
|
||||
src/
|
||||
index.ts
|
||||
components/
|
||||
rule-builder/ (tsx + types + md + test + stories + index)
|
||||
logic-group/ (tsx + types + md + test + stories + index)
|
||||
condition-row/ (tsx + types + md + test + stories + index)
|
||||
hooks/
|
||||
use-rule-builder/ (ts + types + md + test + index)
|
||||
types/
|
||||
rule-builder.types.ts
|
||||
utils/
|
||||
rule-helpers/ (ts + md + test + index)
|
||||
e2e/
|
||||
rule-builder.spec.ts
|
||||
```
|
||||
87
openspec/changes/enterprise-react-rule-builder/tasks.md
Normal file
87
openspec/changes/enterprise-react-rule-builder/tasks.md
Normal file
@@ -0,0 +1,87 @@
|
||||
# Tasks: enterprise-react-rule-builder
|
||||
|
||||
**Change ID**: enterprise-react-rule-builder
|
||||
**Package**: `@suaveplan/react-rule-builder`
|
||||
**Target path**: `react/forms/react-rule-builder`
|
||||
**Prerequisite packages on Verdaccio**: `@suaveplan/error`, `@suaveplan/react-dnd`, `@suaveplan/react-translate`, `@suaveplan/react-ui`
|
||||
|
||||
---
|
||||
|
||||
## 0. Pre-flight (non-negotiable)
|
||||
|
||||
- [ ] 0.1 Confirm clean working tree (`git status` reports nothing) and no in-flight worktrees with uncommitted work (`git worktree list` then `git status` in each)
|
||||
- [ ] 0.2 If any worktrees exist under `.claude/worktrees/`, account for each one: still-active agent, work-pending-merge, or stale-and-prune. Stale worktrees MUST be removed (`git worktree remove`) before opening a new one — code that has been lost twice on main is the failure mode this guards against.
|
||||
- [ ] 0.3 Confirm the package set in `MANIFEST.md` matches `find packages -maxdepth 3 -name package.json` count. Drift here means a prior change archived without regenerating the manifest.
|
||||
|
||||
## 1. Scaffold
|
||||
|
||||
- [ ] Create directory tree per proposal layout.
|
||||
- [ ] Write `package.json` at `0.1.0` with `"sideEffects": false`, exports map.
|
||||
- [ ] Dependencies: `@suaveplan/error workspace:^`, `@suaveplan/react-dnd workspace:^`, `@suaveplan/react-translate workspace:^`, `@suaveplan/react-ui workspace:^`, `zod catalog:forms`, `@opentelemetry/api catalog:observability`, `tslib catalog:build`.
|
||||
- [ ] Write `tsconfig.json`, `vitest.config.ts`, scripts.
|
||||
- [ ] Confirm `src/mocks/` directory is NOT created — no mocks under any circumstance.
|
||||
|
||||
---
|
||||
|
||||
## 2. Error codes and types
|
||||
|
||||
- [ ] Define `RuleBuilderError` extending `SuaveplanError`; codes: `RULE_BUILDER_INVALID_PATH`, `RULE_BUILDER_INVALID_RULE`.
|
||||
- [ ] Define `FieldDefinition`, `OperatorOption`, `SelectOption`, `RuleBuilderProps`, `LogicGroupProps`, `ConditionRowProps`, `OnRuleChange`.
|
||||
- [ ] Define `DEFAULT_OPERATORS` constant.
|
||||
- [ ] Write `RuleSchema` Zod schema for the rule AST.
|
||||
|
||||
---
|
||||
|
||||
## 3. Utils (`src/utils/rule-helpers/`)
|
||||
|
||||
- [ ] Implement `createEmptyCondition(fieldDefs)`, `createEmptyGroup()`.
|
||||
- [ ] Implement `getApplicableOperators(field, fieldDefs)`, `getRuleAtPath(rule, path)`, `insertRuleAtPath(rule, path, item)`, `removeRuleAtPath(rule, path)`, `updateRuleAtPath(rule, path, updates)`.
|
||||
- [ ] Validate paths in `get/insert/remove/update` — throw `RuleBuilderError(RULE_BUILDER_INVALID_PATH)` on invalid path.
|
||||
- [ ] Write `rule-helpers.test.ts` (≤500 lines): each helper, nested paths, invalid path throws. `{ timeout: 5000 }`.
|
||||
- [ ] Write `rule-helpers.md`.
|
||||
|
||||
---
|
||||
|
||||
## 4. Hook — `useRuleBuilder`
|
||||
|
||||
- [ ] Manages `rule` state; exposes `addCondition(path)`, `addGroup(path)`, `removeItem(path)`, `updateCondition(path, updates)`, `toggleLogic(path)`, `moveItem(from, to)`.
|
||||
- [ ] Validates rule via `RuleSchema` before calling `onRuleChange`; on failure throws `RuleBuilderError(RULE_BUILDER_INVALID_RULE)`.
|
||||
- [ ] Write `use-rule-builder.test.ts`: add, remove, update, move — all using real `useRuleBuilder`. `{ timeout: 5000 }`.
|
||||
- [ ] Write `use-rule-builder.md`.
|
||||
|
||||
---
|
||||
|
||||
## 5. Components
|
||||
|
||||
### ConditionRow
|
||||
|
||||
- [ ] Field selector (from `FieldDefinition[]`), operator selector (from `getApplicableOperators`), value input. Uses `@suaveplan/react-ui` `Select` + `Input`.
|
||||
- [ ] Write test (real `@suaveplan/react-ui` provider), stories (default, all-operators, playground), md.
|
||||
|
||||
### LogicGroup
|
||||
|
||||
- [ ] AND/OR/NOT toggle (uses `@suaveplan/react-ui` `ToggleGroup`); renders children recursively; add-condition + add-group buttons; drag handle wired to `@suaveplan/react-dnd` `Draggable`.
|
||||
- [ ] Write test (nested groups, drag reorder triggers `moveItem`), stories (default, nested, drag-reorder, playground), md.
|
||||
|
||||
### RuleBuilder
|
||||
|
||||
- [ ] Top-level: renders root `LogicGroup`; wraps `useRuleBuilder`; wires `DndProvider` from `@suaveplan/react-dnd`.
|
||||
- [ ] Write test (full render with real deps), stories (default, with-field-definitions, nested-groups, drag-reorder, playground), md.
|
||||
|
||||
---
|
||||
|
||||
## 6. E2E
|
||||
|
||||
- [ ] `e2e/rule-builder.spec.ts` — Playwright:
|
||||
- Add a condition, set field + operator + value, verify AST.
|
||||
- Add nested group, verify nesting.
|
||||
- Drag condition to reorder, verify `moveItem` reflected in AST.
|
||||
|
||||
---
|
||||
|
||||
## 7. Verify and publish
|
||||
|
||||
- [ ] `bunx turbo lint typecheck test --filter=@suaveplan/react-rule-builder` — green.
|
||||
- [ ] `bunx turbo test:coverage --filter=@suaveplan/react-rule-builder` — 100%.
|
||||
- [ ] `bun scripts/publish.ts --package @suaveplan/react-rule-builder`.
|
||||
- [ ] Archive change folder.
|
||||
Reference in New Issue
Block a user