@jpmorgan-payments/embedded-finance-components 0.5.78 → 0.5.80
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 +76 -0
- package/dist/{2FJCTAHO-Dl68I43v.js → 2FJCTAHO-BRVIU8NY.js} +1 -1
- package/dist/esm/ef-components.js +1 -1
- package/dist/{index-CrCTPzWP.js → index-DJLpOs8Z.js} +6171 -6140
- package/dist/index.d.ts +430 -1
- package/dist/{production-DBFnYXLD.js → production-ufb4VRR-.js} +2 -2
- package/dist/umd/ef-components.js +162 -162
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -55,6 +55,82 @@ const EmbeddedFinanceSection = () => {
|
|
|
55
55
|
};
|
|
56
56
|
```
|
|
57
57
|
|
|
58
|
+
## Main concepts
|
|
59
|
+
|
|
60
|
+
The Embedded UI Components are built using a sophisticated approach that leverages OpenAPI Specifications (OAS) and automated code generation to ensure type safety and consistent API integration.
|
|
61
|
+
|
|
62
|
+
### Architecture Overview
|
|
63
|
+
|
|
64
|
+
```mermaid
|
|
65
|
+
graph TB
|
|
66
|
+
subgraph "Development Time"
|
|
67
|
+
direction TB
|
|
68
|
+
OAS[OpenAPI Specification] --> |Orval Generation| Types[TypeScript Types]
|
|
69
|
+
OAS --> |Orval Generation| Hooks[React Query Hooks]
|
|
70
|
+
|
|
71
|
+
AF[Arazzo Flows] --> |Future: Flow Generation| Flows[Operation Sequences]
|
|
72
|
+
|
|
73
|
+
subgraph "Embedded UI Components"
|
|
74
|
+
direction TB
|
|
75
|
+
Types & Hooks & Flows --> Components
|
|
76
|
+
|
|
77
|
+
subgraph "Opinionated Layer"
|
|
78
|
+
direction LR
|
|
79
|
+
V[Enhanced Client<br/>Validations]
|
|
80
|
+
P[Smart Payload<br/>Formation]
|
|
81
|
+
E[Error Mapping<br/>& Recovery]
|
|
82
|
+
U[UX Optimizations]
|
|
83
|
+
end
|
|
84
|
+
|
|
85
|
+
V & P & E & U --> Components
|
|
86
|
+
end
|
|
87
|
+
end
|
|
88
|
+
|
|
89
|
+
subgraph "Runtime"
|
|
90
|
+
direction TB
|
|
91
|
+
Components --> |API Calls| PSL[Platform Service Layer]
|
|
92
|
+
PSL --> |Authentication| API[Backend APIs]
|
|
93
|
+
end
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Key Architecture Components
|
|
97
|
+
|
|
98
|
+
1. **OpenAPI Specification (OAS) & Future Arazzo Flows**
|
|
99
|
+
|
|
100
|
+
- OAS defines API contracts and types
|
|
101
|
+
- Source of truth for API interfaces
|
|
102
|
+
- Used to generate TypeScript types and React Query hooks
|
|
103
|
+
- Note: Arazzo Flows and automated flow generation are planned future capabilities - currently no flows are pre-configured
|
|
104
|
+
|
|
105
|
+
2. **Automated Code Generation**
|
|
106
|
+
|
|
107
|
+
- Currently, Orval generates from OAS:
|
|
108
|
+
- TypeScript interfaces
|
|
109
|
+
- Type-safe React Query hooks
|
|
110
|
+
- API client utilities
|
|
111
|
+
- Future capability: Flow generation from Arazzo Flows
|
|
112
|
+
- Ensures type consistency between API and UI
|
|
113
|
+
|
|
114
|
+
3. **Component Architecture**
|
|
115
|
+
|
|
116
|
+
Built using generated types and hooks with an opinionated layer providing:
|
|
117
|
+
|
|
118
|
+
- Enhanced client validations based on API specifications
|
|
119
|
+
- Smart payload formation
|
|
120
|
+
- Error mapping & recovery
|
|
121
|
+
- UX optimizations implemented based on best practices:
|
|
122
|
+
- Smart field prepopulation
|
|
123
|
+
- Cognitive load reduction
|
|
124
|
+
- Intelligent navigation
|
|
125
|
+
|
|
126
|
+
4. **Runtime Flow**
|
|
127
|
+
- Components make API calls to Platform Service Layer (PSL)
|
|
128
|
+
- PSL handles:
|
|
129
|
+
- Authentication & authorization
|
|
130
|
+
- Request forwarding to backend APIs
|
|
131
|
+
- Response processing
|
|
132
|
+
- Error handling
|
|
133
|
+
|
|
58
134
|
## Main Components
|
|
59
135
|
|
|
60
136
|
### 1. OnboardingWizardBasic
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var xs = Object.defineProperty;
|
|
2
2
|
var ws = (e, t, n) => t in e ? xs(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
|
|
3
3
|
var Le = (e, t, n) => ws(e, typeof t != "symbol" ? t + "" : t, n);
|
|
4
|
-
import { c as R, d as tr, s as Nn, m as Un, a as B, b as m, e as j, f as te, S as N, g as M, h as pe, u as be, i as H, j as T, k as Re, o as rt, P as zo, l as G, n as $s, p as Ot, q as E, r as I, t as Cs, v as Tt, w as Ss, x as ks, y as mn, F as Es, z as Ds, D as Ms, A as P, I as As, B as nr, C as kn, E as Kr, G as Ts, H as Dt, J as Ft, $ as Ro, K as Br, L as Fs, M as Is, N as Ls, O as qn, Q as Os, R as Ps, T as qs, U as _s } from "./production-
|
|
4
|
+
import { c as R, d as tr, s as Nn, m as Un, a as B, b as m, e as j, f as te, S as N, g as M, h as pe, u as be, i as H, j as T, k as Re, o as rt, P as zo, l as G, n as $s, p as Ot, q as E, r as I, t as Cs, v as Tt, w as Ss, x as ks, y as mn, F as Es, z as Ds, D as Ms, A as P, I as As, B as nr, C as kn, E as Kr, G as Ts, H as Dt, J as Ft, $ as Ro, K as Br, L as Fs, M as Is, N as Ls, O as qn, Q as Os, R as Ps, T as qs, U as _s } from "./production-ufb4VRR-.js";
|
|
5
5
|
var Ko = {
|
|
6
6
|
À: "A",
|
|
7
7
|
Á: "A",
|