@rajeev02/app-shell 0.1.0 → 0.2.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 +205 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
# @rajeev02/app-shell
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@rajeev02/app-shell)
|
|
4
|
+
[](https://github.com/Rajeev02/rajeev-sdk/blob/main/LICENSE)
|
|
5
|
+
|
|
6
|
+
**Feature-slice app architecture** with API client, onboarding, chat, cart & checkout (GST), feature flags, multi-step forms with Indian ID validation, and analytics.
|
|
7
|
+
|
|
8
|
+
Part of [Rajeev SDK](https://github.com/Rajeev02/rajeev-sdk) — cross-platform infrastructure libraries for building apps that work everywhere.
|
|
9
|
+
|
|
10
|
+
## Why use this?
|
|
11
|
+
|
|
12
|
+
- **API client** — Offline-first HTTP client with caching (cache-first, stale-while-revalidate), retry, interceptors
|
|
13
|
+
- **Cart & checkout** — Add items, apply coupons, calculate GST, generate order summaries
|
|
14
|
+
- **Feature flags** — Enable/disable features at runtime with percentage rollouts, user targeting, A/B variants
|
|
15
|
+
- **Onboarding** — Configurable onboarding slides with progress tracking and completion callbacks
|
|
16
|
+
- **Chat engine** — Real-time messaging with typing indicators, read receipts, and message history
|
|
17
|
+
- **Form engine** — Multi-step forms with Indian ID validation (Aadhaar, PAN, IFSC, GSTIN, pincode)
|
|
18
|
+
- **Analytics** — Event tracking with session management, user properties, and batched uploads
|
|
19
|
+
|
|
20
|
+
## Platform Support
|
|
21
|
+
|
|
22
|
+
| Platform | Engine | Status |
|
|
23
|
+
| ---------- | ---------- | ------ |
|
|
24
|
+
| iOS 16+ | TypeScript | ✅ |
|
|
25
|
+
| Android 7+ | TypeScript | ✅ |
|
|
26
|
+
| Web | TypeScript | ✅ |
|
|
27
|
+
|
|
28
|
+
## Installation
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm install @rajeev02/app-shell
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Peer Dependencies
|
|
35
|
+
|
|
36
|
+
- `react` >= 18.3.0
|
|
37
|
+
- `react-native` >= 0.84.0 _(optional)_
|
|
38
|
+
|
|
39
|
+
## Quick Start
|
|
40
|
+
|
|
41
|
+
### API Client
|
|
42
|
+
|
|
43
|
+
```typescript
|
|
44
|
+
import { ApiClient } from "@rajeev02/app-shell";
|
|
45
|
+
|
|
46
|
+
const api = new ApiClient({
|
|
47
|
+
baseUrl: "https://api.example.com",
|
|
48
|
+
timeout: 30_000,
|
|
49
|
+
retries: 3,
|
|
50
|
+
cacheStrategy: "stale-while-revalidate",
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
// Add auth interceptor
|
|
54
|
+
api.addRequestInterceptor((config) => ({
|
|
55
|
+
...config,
|
|
56
|
+
headers: { ...config.headers, Authorization: `Bearer ${token}` },
|
|
57
|
+
}));
|
|
58
|
+
|
|
59
|
+
// Make requests
|
|
60
|
+
const users = await api.get("/users", { page: 1 });
|
|
61
|
+
const order = await api.post("/orders", { items: [...] });
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Cart & Checkout
|
|
65
|
+
|
|
66
|
+
```typescript
|
|
67
|
+
import { CartManager } from "@rajeev02/app-shell";
|
|
68
|
+
|
|
69
|
+
const cart = new CartManager({ gstRate: 0.18, currency: "INR" });
|
|
70
|
+
|
|
71
|
+
cart.addItem({ id: "1", name: "iPhone 16", price: 79_999, quantity: 1 });
|
|
72
|
+
cart.addItem({ id: "2", name: "AirPods Pro", price: 24_999, quantity: 1 });
|
|
73
|
+
|
|
74
|
+
cart.applyCoupon({ code: "SAVE10", discountPercent: 10 });
|
|
75
|
+
|
|
76
|
+
const summary = cart.getSummary();
|
|
77
|
+
// → {
|
|
78
|
+
// items: 2,
|
|
79
|
+
// subtotal: 104998,
|
|
80
|
+
// gst: 18899,
|
|
81
|
+
// discount: -10499,
|
|
82
|
+
// total: 113398
|
|
83
|
+
// }
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Feature Flags
|
|
87
|
+
|
|
88
|
+
```typescript
|
|
89
|
+
import { FeatureFlagManager } from "@rajeev02/app-shell";
|
|
90
|
+
|
|
91
|
+
const flags = new FeatureFlagManager();
|
|
92
|
+
|
|
93
|
+
flags.register({
|
|
94
|
+
id: "new_checkout",
|
|
95
|
+
name: "New Checkout Flow",
|
|
96
|
+
enabled: true,
|
|
97
|
+
rolloutPercentage: 50, // 50% of users
|
|
98
|
+
targetUsers: ["beta-group"],
|
|
99
|
+
variants: {
|
|
100
|
+
control: { buttonColor: "blue" },
|
|
101
|
+
treatment: { buttonColor: "green" },
|
|
102
|
+
},
|
|
103
|
+
});
|
|
104
|
+
|
|
105
|
+
if (flags.isEnabled("new_checkout", userId)) {
|
|
106
|
+
const variant = flags.getVariant("new_checkout", userId);
|
|
107
|
+
// → "control" or "treatment"
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### Forms with Indian ID Validation
|
|
112
|
+
|
|
113
|
+
```typescript
|
|
114
|
+
import { FormEngine, getKycFormConfig } from "@rajeev02/app-shell";
|
|
115
|
+
|
|
116
|
+
const form = new FormEngine(getKycFormConfig());
|
|
117
|
+
|
|
118
|
+
// Built-in Indian ID validators
|
|
119
|
+
form.validateField("aadhaar", "1234 5678 9012"); // → { valid: true }
|
|
120
|
+
form.validateField("pan", "ABCPE1234F"); // → { valid: true }
|
|
121
|
+
form.validateField("ifsc", "SBIN0001234"); // → { valid: true }
|
|
122
|
+
form.validateField("gstin", "22ABCDE1234F1Z5"); // → { valid: true }
|
|
123
|
+
form.validateField("pincode", "560001"); // → { valid: true }
|
|
124
|
+
|
|
125
|
+
// Multi-step form navigation
|
|
126
|
+
form.nextStep();
|
|
127
|
+
form.prevStep();
|
|
128
|
+
const progress = form.getProgress(); // → { current: 2, total: 4, percent: 50 }
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Chat Engine
|
|
132
|
+
|
|
133
|
+
```typescript
|
|
134
|
+
import { ChatEngine } from "@rajeev02/app-shell";
|
|
135
|
+
|
|
136
|
+
const chat = new ChatEngine({
|
|
137
|
+
userId: "user-123",
|
|
138
|
+
onMessageReceived: (msg) => updateUI(msg),
|
|
139
|
+
onTypingStatusChanged: (userId, isTyping) =>
|
|
140
|
+
showTypingIndicator(userId, isTyping),
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
chat.sendMessage({
|
|
144
|
+
roomId: "support",
|
|
145
|
+
text: "Hi, I need help with my order",
|
|
146
|
+
type: "text",
|
|
147
|
+
});
|
|
148
|
+
|
|
149
|
+
chat.markAsRead("support", "msg-001");
|
|
150
|
+
chat.setTyping("support", true);
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### Analytics
|
|
154
|
+
|
|
155
|
+
```typescript
|
|
156
|
+
import { AnalyticsEngine } from "@rajeev02/app-shell";
|
|
157
|
+
|
|
158
|
+
const analytics = new AnalyticsEngine({
|
|
159
|
+
endpoint: "https://analytics.example.com/events",
|
|
160
|
+
batchSize: 20,
|
|
161
|
+
flushIntervalMs: 30_000,
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
analytics.setUserId("user-123");
|
|
165
|
+
analytics.setUserProperties({ plan: "pro", city: "Bengaluru" });
|
|
166
|
+
|
|
167
|
+
analytics.track("purchase_completed", {
|
|
168
|
+
amount: 999,
|
|
169
|
+
currency: "INR",
|
|
170
|
+
method: "upi",
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
analytics.trackScreen("HomeScreen");
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
## Modules
|
|
177
|
+
|
|
178
|
+
| Module | Description |
|
|
179
|
+
| -------------------- | --------------------------------------------- |
|
|
180
|
+
| `ApiClient` | HTTP client with caching, retry, interceptors |
|
|
181
|
+
| `CartManager` | Cart with GST, coupons, order summaries |
|
|
182
|
+
| `FeatureFlagManager` | Feature flags, A/B testing, rollouts |
|
|
183
|
+
| `OnboardingManager` | Configurable onboarding flow |
|
|
184
|
+
| `ChatEngine` | Real-time messaging |
|
|
185
|
+
| `FormEngine` | Multi-step forms with Indian ID validation |
|
|
186
|
+
| `AnalyticsEngine` | Event tracking and session management |
|
|
187
|
+
|
|
188
|
+
## Indian ID Validators
|
|
189
|
+
|
|
190
|
+
| Validator | Format | Example |
|
|
191
|
+
| --------- | ------------- | ----------------- |
|
|
192
|
+
| Aadhaar | 12 digits | `1234 5678 9012` |
|
|
193
|
+
| PAN | `AAAAA0000A` | `ABCPE1234F` |
|
|
194
|
+
| IFSC | `AAAA0000000` | `SBIN0001234` |
|
|
195
|
+
| GSTIN | 15 chars | `22ABCDE1234F1Z5` |
|
|
196
|
+
| Pincode | 6 digits | `560001` |
|
|
197
|
+
| Phone | 10 digits | `9876543210` |
|
|
198
|
+
|
|
199
|
+
## Full Documentation
|
|
200
|
+
|
|
201
|
+
📖 [Complete API docs with all modules and types](https://github.com/Rajeev02/rajeev-sdk/blob/main/docs/usage/APP-SHELL.md)
|
|
202
|
+
|
|
203
|
+
## License
|
|
204
|
+
|
|
205
|
+
MIT © 2026 [Rajeev Kumar Joshi](https://rajeev02.github.io)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rajeev02/app-shell",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Feature-Slice app architecture — API client, navigation, onboarding, chat, video, forms, cart, state, analytics",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"author": "Rajeev Kumar Joshi <rajeevjoshi91@gmail.com> (https://rajeev02.github.io)",
|