@emeraldemperaur/vector-sigma 1.0.0
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/LICENSE +21 -0
- package/README.md +112 -0
- package/lib/index.cjs +4591 -0
- package/lib/index.css +1 -0
- package/lib/index.esm.css +1 -0
- package/lib/index.esm.js +4570 -0
- package/lib/types/components/avatar/avatar.d.ts +2 -0
- package/lib/types/components/button/button.d.ts +2 -0
- package/lib/types/components/checkbox/checkbox.d.ts +2 -0
- package/lib/types/components/conditional/conditional.d.ts +2 -0
- package/lib/types/components/datepicker/datepicker.d.ts +2 -0
- package/lib/types/components/daterangepicker/daterangepicker.d.ts +2 -0
- package/lib/types/components/datetimepicker/datetimepicker.d.ts +2 -0
- package/lib/types/components/dropdown/dropdown.d.ts +2 -0
- package/lib/types/components/file/file.d.ts +2 -0
- package/lib/types/components/input/input.d.ts +2 -0
- package/lib/types/components/inputcurrency/inputcurrency.d.ts +2 -0
- package/lib/types/components/radio/radio.d.ts +2 -0
- package/lib/types/components/select/select.d.ts +2 -0
- package/lib/types/components/selectmultiple/selectmultiple.d.ts +2 -0
- package/lib/types/components/slider/slider.d.ts +2 -0
- package/lib/types/components/toggle/toggle.d.ts +2 -0
- package/lib/types/components/xtitle/xtitle.d.ts +2 -0
- package/lib/types/index.d.ts +20 -0
- package/lib/types/primeMatrix.d.ts +1 -0
- package/lib/types/utils/architect.d.ts +183 -0
- package/lib/types/utils/argonaut.d.ts +1 -0
- package/lib/types/utils/chronos.d.ts +6 -0
- package/lib/types/vectorSigma.d.ts +2 -0
- package/lib/types/xForm.d.ts +15 -0
- package/package.json +70 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Build by ME
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
# 💠 Vector Sigma
|
|
2
|
+
## Dynamic Form Orchestrator: NPM Package 📦
|
|
3
|
+
|
|
4
|
+
### Overview
|
|
5
|
+
<p align="justify">
|
|
6
|
+
Vector Sigma is a dynamic form orchestrator package for rapidly creating and managing the complex lifecycle of interactive extensible input forms that can be easily embedded into a React front-end client interface for use in data capturing & onboarding applications or systems.
|
|
7
|
+
|
|
8
|
+
Fields, Input Validation and Submission can be defined and parametized in real-time predicated on a JSON (JavaScript Object Notation) xForm definition or builder object pattern.
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
#### Key Features
|
|
12
|
+
<ol>
|
|
13
|
+
<li>
|
|
14
|
+
<strong>Real-Time Form Adaptation:</strong> Adapt the form layout by adding/removing fields, sections or entire steps based on conditional logic.</li>
|
|
15
|
+
<li>
|
|
16
|
+
<strong>Validation Logic Management:</strong> Centralize business rules such as complex field validation, visibility constraints, and facilitate input value pre-population from external APIs.
|
|
17
|
+
</li>
|
|
18
|
+
<li>
|
|
19
|
+
<strong>Form State Coordination:</strong> Monitor the "state" of the form across multi-step processes, allowing users to save progress and resume later.
|
|
20
|
+
</li>
|
|
21
|
+
<li>
|
|
22
|
+
<strong>Application UI Integration:</strong> Connects the form data to backend workflows, CRM systems, or databases immediately upon submission.</li>
|
|
23
|
+
</ol>
|
|
24
|
+
|
|
25
|
+
### Documentation
|
|
26
|
+
|
|
27
|
+
### Installation
|
|
28
|
+
```bash
|
|
29
|
+
npm install @emeraldemperaur/vector-sigma
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Peer Dependencies
|
|
33
|
+
```bash
|
|
34
|
+
npm install bootstrap@latest react@latest react-bootstrap@latest react-dom@latest sass@latest
|
|
35
|
+
```
|
|
36
|
+
### Usage
|
|
37
|
+
```javascript
|
|
38
|
+
var s = "JavaScript/TypeScript Code Snippet";
|
|
39
|
+
alert(s);
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Screenshots
|
|
43
|
+
|
|
44
|
+
#### Automation Workflow Use Case
|
|
45
|
+
|
|
46
|
+
#### Web Application Use Case
|
|
47
|
+
|
|
48
|
+
### Design Tenets
|
|
49
|
+
<ul>
|
|
50
|
+
<li><strong>📦CJS/ESM Compatible</strong></br>
|
|
51
|
+
<p align="justify">Dual mode package comprised of both CommonJS (CJS) & ES Modules (ESM) builds bundled using <code>Rollup.js</code> to facilitate universal module compatibility and enable effortless integration across legacy and modern JavaScript ecosystems.</p>
|
|
52
|
+
</li>
|
|
53
|
+
|
|
54
|
+
<li><strong>🔒JSON Schema Validation</strong></br>
|
|
55
|
+
<p align="justify">Adopted <code>Zod</code> as the native engine for JSON schema validation to provide a TypeScript-first validation layer. Schema validation guarantees any schema object provided strictly adheres with the expected API model before rendering to client viewport.</p>
|
|
56
|
+
</li>
|
|
57
|
+
|
|
58
|
+
<li><strong>🏗️Builder Object Pattern</strong></br>
|
|
59
|
+
<p align="justify">Method chaining offers a modern, fluent alternative to static JSON object configuration that elevates the Developer Experience (DX) by enabling rapid form creation using intuitive method chains that are human-readable and generate type-safe xForm schema definitions automatically.</p>
|
|
60
|
+
|
|
61
|
+
```javascript
|
|
62
|
+
var s = "JavaScript/TypeScript Code Builder Snippet";
|
|
63
|
+
alert(s);
|
|
64
|
+
```
|
|
65
|
+
</li>
|
|
66
|
+
|
|
67
|
+
<li><strong>🛡️Input Validation</strong></br>
|
|
68
|
+
<p align="justify">Declarative schema (JSON) facilitates a validation engine that is comprehensive, accessible and easy to maintain. <code>onChange()</code>, <code>onBlur()</code> input event control state updates, errors and <code>values</code> are handled automatically. <code>onSubmit()</code> handler is automatically blocked if the input is invalid</p>
|
|
69
|
+
</li>
|
|
70
|
+
|
|
71
|
+
<li><strong>🧠Form State Management</strong></br>
|
|
72
|
+
<p align="justify">Leveraged Formik for robust React state management and Yup for declarative schema validation to adhere strictly to the standard React form lifecycle, ensuring compatibility with Redux DevTools & standard debugging workflows.</p>
|
|
73
|
+
</li>
|
|
74
|
+
|
|
75
|
+
<li><strong>🎨Theming Extensibilty</strong></br>
|
|
76
|
+
<p align="justify">Customizable to fit seamlessly into an existing Design System and allow developer control of the visual layer through standard CSS patterns</p>
|
|
77
|
+
|
|
78
|
+
```javascript
|
|
79
|
+
var s = "JavaScript/TypeScript Style Snippet";
|
|
80
|
+
alert(s);
|
|
81
|
+
```
|
|
82
|
+
</li>
|
|
83
|
+
|
|
84
|
+
<li><strong>🧩Exported UI Components</strong></br>
|
|
85
|
+
<p align="justify">Explicitly exported reusable form UI components from package entry point <code>src/index.ts</code> to enable developer-friendly use as lightweight component library</p>
|
|
86
|
+
<p><em>Avatar, Button, Checkbox, Conditional, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File, Input, InputCurrency, Radio, Select, SelectMultiple, Slider, Toggle, xTitle</em></p>
|
|
87
|
+
|
|
88
|
+
```javascript
|
|
89
|
+
var s = "JavaScript/TypeScript Component Snippet";
|
|
90
|
+
alert(s);
|
|
91
|
+
```
|
|
92
|
+
</li>
|
|
93
|
+
|
|
94
|
+
<li><strong>📱Mobile Responsive</strong></br>
|
|
95
|
+
<p align="justify">'Mobile-First' layout design ensures that complex form orchestrations remain usable, accessible, and performant on any viewport</p>
|
|
96
|
+
</li>
|
|
97
|
+
</ul>
|
|
98
|
+
|
|
99
|
+
### Tool Stack
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|