formanitor 0.0.1
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/README.md +70 -0
- package/dist/index.cjs +2360 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +389 -0
- package/dist/index.d.ts +389 -0
- package/dist/index.mjs +2318 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +75 -0
package/README.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# Formanitor
|
|
2
|
+
|
|
3
|
+
Formanitor is a powerful, schema-driven dynamic form library for React. It is designed to separate core logic (validation, rules, workflow) from the UI layer, enabling you to build complex, role-based forms with ease.
|
|
4
|
+
|
|
5
|
+
## 🚀 Key Features
|
|
6
|
+
|
|
7
|
+
- **Schema-Driven:** Define your entire form (layout, fields, validation) in a single JSON object.
|
|
8
|
+
- **Headless Core:** Logic is decoupled from the UI, powered by a custom observable store.
|
|
9
|
+
- **Workflow Engine:** Built-in state machine for managing form lifecycles (e.g., Draft -> In Progress -> Finalised).
|
|
10
|
+
- **Rule Engine:** simple JSON-based rules for field visibility, disabling, and requirement toggling.
|
|
11
|
+
- **Role-Based Access:** Granular permissions (view/edit/hide) per field based on user roles.
|
|
12
|
+
- **Async Data:** Support for loading dropdown options from API endpoints.
|
|
13
|
+
- **Persistence:** Pluggable adapters for LocalStorage, SessionStorage, IndexedDB, or API.
|
|
14
|
+
- **Event System:** Emit signals (e.g., `HIGH_PAIN_ALERT`) based on field changes.
|
|
15
|
+
|
|
16
|
+
## 🛠 Tech Stack
|
|
17
|
+
|
|
18
|
+
- React 19 + Vite
|
|
19
|
+
- TypeScript
|
|
20
|
+
- Tailwind CSS
|
|
21
|
+
- shadcn/ui (Radix UI) components
|
|
22
|
+
|
|
23
|
+
## 📦 Project Structure
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
src/
|
|
27
|
+
├── core/ # Pure TS Logic (Store, Rules, Validation)
|
|
28
|
+
├── react/ # React Bindings (Hooks, Context, Renderer)
|
|
29
|
+
├── ui/ # UI Components (Layouts, Widgets)
|
|
30
|
+
│ ├── shadcn/ # Base accessible components
|
|
31
|
+
│ └── widgets/ # Form-specific widgets (Text, Select, Repeatable)
|
|
32
|
+
└── App.tsx # Demo Application
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## 🏃♂️ Getting Started
|
|
36
|
+
|
|
37
|
+
1. **Install Dependencies:**
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
npm install
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
2. **Run Development Server:**
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
npm run dev
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
3. **Explore the Demo:**
|
|
50
|
+
Open the app to see the **OBG Intake Form** in action. You can:
|
|
51
|
+
- Switch roles (Patient, Nurse, Doctor) to see permissions change.
|
|
52
|
+
- Enter "Age < 18" to see the Rule Engine hide the "Pain Score" field.
|
|
53
|
+
- Select "Pain Score > 7" to trigger a `HIGH_PAIN_ALERT` event.
|
|
54
|
+
- Transition the workflow state from Draft to Finalised.
|
|
55
|
+
|
|
56
|
+
## 📝 Example Schema
|
|
57
|
+
|
|
58
|
+
```json
|
|
59
|
+
{
|
|
60
|
+
"id": "demo-form",
|
|
61
|
+
"layout": [{ "type": "section", "title": "Info", "children": ["name"] }],
|
|
62
|
+
"fields": {
|
|
63
|
+
"name": { "type": "text", "label": "Full Name", "required": true }
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## 📄 License
|
|
69
|
+
|
|
70
|
+
MIT
|