@smvtech/x-flux 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/README.md +118 -0
- package/dist/index.d.mts +5242 -0
- package/dist/index.d.ts +5242 -0
- package/dist/index.js +1371 -0
- package/dist/index.mjs +1322 -0
- package/package.json +75 -0
package/README.md
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
# x-flux
|
|
2
|
+
|
|
3
|
+
A powerful, production-ready React package for managing effective document collection flows, visa questionnaires, travellers, and applications.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @smvtech/x-flux
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
**Note:** When you install this package, `axios` will be automatically installed as a dependency. You don't need to install it separately.
|
|
12
|
+
|
|
13
|
+
## Peer Dependencies
|
|
14
|
+
|
|
15
|
+
These must be installed in your project:
|
|
16
|
+
- `react` ^18.0.0
|
|
17
|
+
- `react-dom` ^18.0.0
|
|
18
|
+
- `zod` ^3.21.0
|
|
19
|
+
|
|
20
|
+
## Quick Start
|
|
21
|
+
|
|
22
|
+
### 1. Initialize with Config
|
|
23
|
+
|
|
24
|
+
```typescript
|
|
25
|
+
import { initializeEDCFlow, EDCFlowProvider, useEDCFlow } from '@smvtech/x-flux';
|
|
26
|
+
|
|
27
|
+
// Initialize once in your app (usually in App.tsx or index.tsx)
|
|
28
|
+
initializeEDCFlow({
|
|
29
|
+
baseUrls: {
|
|
30
|
+
STAG: 'https://api-staging.example.com',
|
|
31
|
+
PROD: 'https://api.example.com',
|
|
32
|
+
LOCAL: 'https://api-dev.example.com'
|
|
33
|
+
},
|
|
34
|
+
environment: 'PROD', // or 'STAG' or 'LOCAL'
|
|
35
|
+
jwtToken: 'your-jwt-token-here'
|
|
36
|
+
});
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### 2. Use the Provider
|
|
40
|
+
|
|
41
|
+
```typescript
|
|
42
|
+
function App() {
|
|
43
|
+
return (
|
|
44
|
+
<EDCFlowProvider orderId="your-order-id">
|
|
45
|
+
<YourComponent />
|
|
46
|
+
</EDCFlowProvider>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### 3. Use the Hook
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
function YourComponent() {
|
|
55
|
+
const {
|
|
56
|
+
applicants,
|
|
57
|
+
loading,
|
|
58
|
+
error,
|
|
59
|
+
addApplicant,
|
|
60
|
+
updateAnswer,
|
|
61
|
+
updateTraveller,
|
|
62
|
+
deleteApplicant
|
|
63
|
+
} = useEDCFlow();
|
|
64
|
+
|
|
65
|
+
if (loading) return <div>Loading...</div>;
|
|
66
|
+
if (error) return <div>Error: {error}</div>;
|
|
67
|
+
|
|
68
|
+
return (
|
|
69
|
+
<div>
|
|
70
|
+
{Object.values(applicants).map(applicant => (
|
|
71
|
+
<div key={applicant.application_id}>
|
|
72
|
+
<h3>{applicant.traveller.first_name}</h3>
|
|
73
|
+
</div>
|
|
74
|
+
))}
|
|
75
|
+
</div>
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Configuration
|
|
81
|
+
|
|
82
|
+
Each project passes its own config:
|
|
83
|
+
|
|
84
|
+
```typescript
|
|
85
|
+
interface EDCConfig {
|
|
86
|
+
baseUrls: {
|
|
87
|
+
STAG: string;
|
|
88
|
+
PROD: string;
|
|
89
|
+
LOCAL: string;
|
|
90
|
+
};
|
|
91
|
+
environment: 'PROD' | 'STAG' | 'LOCAL';
|
|
92
|
+
jwtToken: string;
|
|
93
|
+
}
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## API
|
|
97
|
+
|
|
98
|
+
### `initializeEDCFlow(config: EDCConfig)`
|
|
99
|
+
|
|
100
|
+
Initialize the package. Call once before using `EDCFlowProvider`.
|
|
101
|
+
|
|
102
|
+
### `EDCFlowProvider`
|
|
103
|
+
|
|
104
|
+
**Props:**
|
|
105
|
+
- `orderId: string` - The order ID to manage
|
|
106
|
+
- `children: ReactNode`
|
|
107
|
+
|
|
108
|
+
### `useEDCFlow()`
|
|
109
|
+
|
|
110
|
+
Returns:
|
|
111
|
+
- `orderId`, `order`, `questionnaire`, `applicants`
|
|
112
|
+
- `loading`, `error`, `success`
|
|
113
|
+
- `addApplicant`, `updateAnswer`, `updateTraveller`, `deleteApplicant`
|
|
114
|
+
- `refreshApplicant`, `refreshOrder`
|
|
115
|
+
|
|
116
|
+
## License
|
|
117
|
+
|
|
118
|
+
Private - Internal use only
|