@emeraldemperaur/vector-sigma 1.0.0 → 1.1.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/README.md +113 -112
- package/lib/index.cjs +42650 -66
- package/lib/index.esm.js +42609 -57
- package/lib/styles.css +1 -0
- package/lib/types/components/avatar/avatar.d.ts +25 -2
- package/lib/types/components/button/button.d.ts +22 -2
- package/lib/types/components/checkbox/checkbox.d.ts +27 -2
- package/lib/types/components/conditional/conditional.d.ts +29 -1
- package/lib/types/components/datepicker/datepicker.d.ts +24 -2
- package/lib/types/components/daterangepicker/daterangepicker.d.ts +24 -2
- package/lib/types/components/datetimepicker/datetimepicker.d.ts +24 -2
- package/lib/types/components/dropdown/dropdown.d.ts +32 -2
- package/lib/types/components/file/file.d.ts +24 -2
- package/lib/types/components/file/filemultiple.d.ts +23 -0
- package/lib/types/components/icons/flagicon.d.ts +8 -0
- package/lib/types/components/icons/icons.d.ts +8 -0
- package/lib/types/components/image/image.d.ts +17 -0
- package/lib/types/components/input/input.d.ts +3 -2
- package/lib/types/components/input/passwordInput.d.ts +3 -0
- package/lib/types/components/input/phoneInput.d.ts +3 -0
- package/lib/types/components/input/uuidInput.d.ts +5 -0
- package/lib/types/components/input/xCreditCardInput.d.ts +3 -0
- package/lib/types/components/inputcurrency/inputcurrency.d.ts +4 -2
- package/lib/types/components/inputcurrency/stockInput.d.ts +3 -0
- package/lib/types/components/radio/radio.d.ts +27 -2
- package/lib/types/components/select/select.d.ts +25 -2
- package/lib/types/components/selectmultiple/selectmultiple.d.ts +25 -2
- package/lib/types/components/slider/range.d.ts +27 -0
- package/lib/types/components/slider/slider.d.ts +25 -2
- package/lib/types/components/toggle/toggle.d.ts +23 -1
- package/lib/types/components/xtitle/xtitle.d.ts +2 -1
- package/lib/types/index.d.ts +16 -2
- package/lib/types/layouts/column/column.d.ts +15 -0
- package/lib/types/layouts/container/container.d.ts +8 -0
- package/lib/types/layouts/row/row.d.ts +8 -0
- package/lib/types/utils/architect.d.ts +28 -6
- package/lib/types/utils/argonaut.d.ts +12 -1
- package/lib/types/utils/chronos.d.ts +1 -0
- package/lib/types/utils/currencyconfig.d.ts +365 -0
- package/lib/types/utils/uuidparser.d.ts +1 -0
- package/lib/types/utils/vinci.d.ts +20 -0
- package/lib/types/vectorSigma.d.ts +3 -2
- package/lib/types/xForm.d.ts +13 -9
- package/package.json +20 -13
- package/lib/index.css +0 -1
- package/lib/index.esm.css +0 -1
package/README.md
CHANGED
|
@@ -1,112 +1,113 @@
|
|
|
1
|
-
# 💠 Vector Sigma
|
|
2
|
-
## Dynamic Form Orchestrator
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
<li>
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
<
|
|
51
|
-
<
|
|
52
|
-
</
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
<
|
|
56
|
-
</
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
<
|
|
69
|
-
</
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
<
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
<
|
|
86
|
-
<p
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
</
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
4
|
+
|
|
5
|
+
### Overview
|
|
6
|
+
<p align="justify">
|
|
7
|
+
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.
|
|
8
|
+
|
|
9
|
+
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.
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
#### Key Features
|
|
13
|
+
<ol>
|
|
14
|
+
<li>
|
|
15
|
+
<strong>Real-Time Form Adaptation:</strong> Adapt the form layout by adding/removing fields, sections or entire steps based on conditional logic.</li>
|
|
16
|
+
<li>
|
|
17
|
+
<strong>Validation Logic Management:</strong> Centralize business rules such as complex field validation, visibility constraints, and facilitate input value pre-population from external APIs.
|
|
18
|
+
</li>
|
|
19
|
+
<li>
|
|
20
|
+
<strong>Form State Coordination:</strong> Monitor the "state" of the form across multi-step processes, allowing users to save progress and resume later.
|
|
21
|
+
</li>
|
|
22
|
+
<li>
|
|
23
|
+
<strong>Application UI Integration:</strong> Connects the form data to backend workflows, CRM systems, or databases immediately upon submission.</li>
|
|
24
|
+
</ol>
|
|
25
|
+
|
|
26
|
+
### Documentation
|
|
27
|
+
|
|
28
|
+
### Installation
|
|
29
|
+
```bash
|
|
30
|
+
npm install @emeraldemperaur/vector-sigma
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Peer Dependencies
|
|
34
|
+
```bash
|
|
35
|
+
npm install react@latest react-dom@latest sass@latest
|
|
36
|
+
```
|
|
37
|
+
### Usage
|
|
38
|
+
```javascript
|
|
39
|
+
var s = "JavaScript/TypeScript Code Snippet";
|
|
40
|
+
alert(s);
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Screenshots
|
|
44
|
+
|
|
45
|
+
#### Automation Workflow Use Case
|
|
46
|
+
|
|
47
|
+
#### Web Application Use Case
|
|
48
|
+
|
|
49
|
+
### Design Tenets
|
|
50
|
+
<ul>
|
|
51
|
+
<li><strong>📦CJS/ESM Compatible</strong></br>
|
|
52
|
+
<p align="justify">Dual mode package with 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>
|
|
53
|
+
</li>
|
|
54
|
+
|
|
55
|
+
<li><strong>🔒JSON Schema Validation</strong></br>
|
|
56
|
+
<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>
|
|
57
|
+
</li>
|
|
58
|
+
|
|
59
|
+
<li><strong>🏗️Builder Object Pattern</strong></br>
|
|
60
|
+
<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>
|
|
61
|
+
|
|
62
|
+
```javascript
|
|
63
|
+
var s = "JavaScript/TypeScript Code Builder Snippet";
|
|
64
|
+
alert(s);
|
|
65
|
+
```
|
|
66
|
+
</li>
|
|
67
|
+
|
|
68
|
+
<li><strong>🛡️Input Validation</strong></br>
|
|
69
|
+
<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>
|
|
70
|
+
</li>
|
|
71
|
+
|
|
72
|
+
<li><strong>🧠Form State Management</strong></br>
|
|
73
|
+
<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>
|
|
74
|
+
</li>
|
|
75
|
+
|
|
76
|
+
<li><strong>🎨Theming Extensibilty</strong></br>
|
|
77
|
+
<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>
|
|
78
|
+
|
|
79
|
+
```javascript
|
|
80
|
+
var s = "JavaScript/TypeScript Style Snippet";
|
|
81
|
+
alert(s);
|
|
82
|
+
```
|
|
83
|
+
</li>
|
|
84
|
+
|
|
85
|
+
<li><strong>🧩Exported UI Components</strong></br>
|
|
86
|
+
<p align="justify">Explicitly exported reusable form UI components with material, outline and neumorphic design variants from package entry point <code>src/index.ts</code> to enable developer-friendly use as lightweight component library.</p>
|
|
87
|
+
<p><em>Container, Row, Column, xAvatar, xButton, CheckboxGroup, ConditionalTrigger, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File, FileMultiple, FlagIcon, Icon, Image, Input, PasswordInput, PhoneInput, UUIDInput, xCreditCardInput, InputCurrency, StockInput, xRadioGroup, OptionSelect, MultipleSelect, RangeSlider, Toggle, xTitle</em></p>
|
|
88
|
+
|
|
89
|
+
```javascript
|
|
90
|
+
var s = "JavaScript/TypeScript Component Snippet";
|
|
91
|
+
alert(s);
|
|
92
|
+
```
|
|
93
|
+
</li>
|
|
94
|
+
|
|
95
|
+
<li><strong>📱Mobile Responsive</strong></br>
|
|
96
|
+
<p align="justify">'Mobile-First' layout design ensures that complex form orchestrations remain usable, accessible, and performant on any viewport.</p>
|
|
97
|
+
</li>
|
|
98
|
+
</ul>
|
|
99
|
+
|
|
100
|
+
### Tool Stack
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|