@ram_28/kf-ai-sdk 1.0.3 → 1.0.5
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 +85 -114
- package/dist/auth/authConfig.d.ts +1 -1
- package/dist/auth/index.d.ts +2 -3
- package/dist/auth/index.d.ts.map +1 -1
- package/dist/index.cjs +9 -9
- package/dist/index.mjs +317 -331
- package/package.json +1 -1
- package/sdk/auth/authConfig.ts +4 -4
- package/sdk/auth/index.ts +2 -21
package/README.md
CHANGED
|
@@ -9,6 +9,7 @@ npm install @ram_28/kf-ai-sdk
|
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
**Peer Dependencies:**
|
|
12
|
+
|
|
12
13
|
```bash
|
|
13
14
|
npm install react @tanstack/react-query
|
|
14
15
|
```
|
|
@@ -31,7 +32,6 @@ import {
|
|
|
31
32
|
// Authentication
|
|
32
33
|
AuthProvider,
|
|
33
34
|
useAuth,
|
|
34
|
-
configureAuth,
|
|
35
35
|
|
|
36
36
|
// Hooks
|
|
37
37
|
useForm,
|
|
@@ -41,15 +41,11 @@ import {
|
|
|
41
41
|
|
|
42
42
|
// API
|
|
43
43
|
api,
|
|
44
|
-
setApiBaseUrl,
|
|
45
44
|
|
|
46
45
|
// Utilities
|
|
47
46
|
formatCurrency,
|
|
48
|
-
formatDate
|
|
49
|
-
} from
|
|
50
|
-
|
|
51
|
-
// Configure API base URL
|
|
52
|
-
setApiBaseUrl('https://api.example.com');
|
|
47
|
+
formatDate,
|
|
48
|
+
} from "@ram_28/kf-ai-sdk";
|
|
53
49
|
```
|
|
54
50
|
|
|
55
51
|
## Authentication
|
|
@@ -58,38 +54,18 @@ The SDK provides a complete authentication solution with cookie-based session ma
|
|
|
58
54
|
|
|
59
55
|
### Setup
|
|
60
56
|
|
|
61
|
-
Wrap your app with `AuthProvider` inside a `QueryClientProvider
|
|
57
|
+
Wrap your app with `AuthProvider` inside a `QueryClientProvider`. No configuration required - it works out of the box:
|
|
62
58
|
|
|
63
59
|
```tsx
|
|
64
|
-
import { QueryClient, QueryClientProvider } from
|
|
65
|
-
import { AuthProvider
|
|
66
|
-
|
|
67
|
-
// Configure API
|
|
68
|
-
setApiBaseUrl('https://api.example.com');
|
|
69
|
-
|
|
70
|
-
// Optional: customize auth settings
|
|
71
|
-
configureAuth({
|
|
72
|
-
defaultProvider: 'google',
|
|
73
|
-
autoRedirect: true,
|
|
74
|
-
refetchOnWindowFocus: false, // Disable session check on tab switch
|
|
75
|
-
refetchOnReconnect: true, // Re-check session on network reconnect
|
|
76
|
-
providers: {
|
|
77
|
-
google: {
|
|
78
|
-
loginPath: '/api/auth/google/login',
|
|
79
|
-
logoutPath: '/api/auth/logout',
|
|
80
|
-
},
|
|
81
|
-
},
|
|
82
|
-
});
|
|
60
|
+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
61
|
+
import { AuthProvider } from "@ram_28/kf-ai-sdk";
|
|
83
62
|
|
|
84
63
|
const queryClient = new QueryClient();
|
|
85
64
|
|
|
86
65
|
function App() {
|
|
87
66
|
return (
|
|
88
67
|
<QueryClientProvider client={queryClient}>
|
|
89
|
-
<AuthProvider
|
|
90
|
-
loadingComponent={<div>Loading...</div>}
|
|
91
|
-
onAuthChange={(status, user) => console.log('Auth:', status, user)}
|
|
92
|
-
>
|
|
68
|
+
<AuthProvider>
|
|
93
69
|
<MyApp />
|
|
94
70
|
</AuthProvider>
|
|
95
71
|
</QueryClientProvider>
|
|
@@ -102,7 +78,7 @@ function App() {
|
|
|
102
78
|
Access authentication state and operations in any component:
|
|
103
79
|
|
|
104
80
|
```tsx
|
|
105
|
-
import { useAuth } from
|
|
81
|
+
import { useAuth } from "@ram_28/kf-ai-sdk";
|
|
106
82
|
|
|
107
83
|
function UserMenu() {
|
|
108
84
|
const { user, isAuthenticated, isLoading, logout, hasRole } = useAuth();
|
|
@@ -115,11 +91,9 @@ function UserMenu() {
|
|
|
115
91
|
<span>Welcome, {user._name}</span>
|
|
116
92
|
<span>Role: {user.Role}</span>
|
|
117
93
|
|
|
118
|
-
{hasRole(
|
|
94
|
+
{hasRole("Admin") && <a href="/admin">Admin Dashboard</a>}
|
|
119
95
|
|
|
120
|
-
<button onClick={() => logout({ redirectUrl:
|
|
121
|
-
Logout
|
|
122
|
-
</button>
|
|
96
|
+
<button onClick={() => logout({ redirectUrl: "/" })}>Logout</button>
|
|
123
97
|
</div>
|
|
124
98
|
);
|
|
125
99
|
}
|
|
@@ -130,40 +104,38 @@ function UserMenu() {
|
|
|
130
104
|
```tsx
|
|
131
105
|
const {
|
|
132
106
|
// User state
|
|
133
|
-
user,
|
|
134
|
-
staticBaseUrl,
|
|
135
|
-
buildId,
|
|
136
|
-
status,
|
|
137
|
-
isAuthenticated,
|
|
138
|
-
isLoading,
|
|
107
|
+
user, // UserDetails | null
|
|
108
|
+
staticBaseUrl, // string | null
|
|
109
|
+
buildId, // string | null
|
|
110
|
+
status, // 'loading' | 'authenticated' | 'unauthenticated'
|
|
111
|
+
isAuthenticated, // boolean
|
|
112
|
+
isLoading, // boolean
|
|
139
113
|
|
|
140
114
|
// Operations
|
|
141
|
-
login,
|
|
142
|
-
logout,
|
|
143
|
-
refreshSession,
|
|
144
|
-
hasRole,
|
|
145
|
-
hasAnyRole,
|
|
115
|
+
login, // (provider?, options?) => void
|
|
116
|
+
logout, // (options?) => Promise<void>
|
|
117
|
+
refreshSession, // () => Promise<SessionResponse | null>
|
|
118
|
+
hasRole, // (role: string) => boolean
|
|
119
|
+
hasAnyRole, // (roles: string[]) => boolean
|
|
146
120
|
|
|
147
121
|
// Error handling
|
|
148
|
-
error,
|
|
149
|
-
clearError,
|
|
122
|
+
error, // Error | null
|
|
123
|
+
clearError, // () => void
|
|
150
124
|
} = useAuth();
|
|
151
125
|
```
|
|
152
126
|
|
|
153
127
|
### Multiple Auth Providers
|
|
154
128
|
|
|
155
129
|
```tsx
|
|
156
|
-
import { useAuth } from
|
|
130
|
+
import { useAuth } from "@ram_28/kf-ai-sdk";
|
|
157
131
|
|
|
158
132
|
function LoginPage() {
|
|
159
133
|
const { login } = useAuth();
|
|
160
134
|
|
|
161
135
|
return (
|
|
162
136
|
<div>
|
|
163
|
-
<button onClick={() => login(
|
|
164
|
-
|
|
165
|
-
</button>
|
|
166
|
-
<button onClick={() => login('microsoft')}>
|
|
137
|
+
<button onClick={() => login("google")}>Continue with Google</button>
|
|
138
|
+
<button onClick={() => login("microsoft")}>
|
|
167
139
|
Continue with Microsoft
|
|
168
140
|
</button>
|
|
169
141
|
</div>
|
|
@@ -174,8 +146,8 @@ function LoginPage() {
|
|
|
174
146
|
### Protected Routes
|
|
175
147
|
|
|
176
148
|
```tsx
|
|
177
|
-
import { useAuth } from
|
|
178
|
-
import { Navigate } from
|
|
149
|
+
import { useAuth } from "@ram_28/kf-ai-sdk";
|
|
150
|
+
import { Navigate } from "react-router-dom";
|
|
179
151
|
|
|
180
152
|
function ProtectedRoute({ children, requiredRoles }) {
|
|
181
153
|
const { isAuthenticated, isLoading, hasAnyRole } = useAuth();
|
|
@@ -190,9 +162,9 @@ function ProtectedRoute({ children, requiredRoles }) {
|
|
|
190
162
|
}
|
|
191
163
|
|
|
192
164
|
// Usage
|
|
193
|
-
<ProtectedRoute requiredRoles={[
|
|
165
|
+
<ProtectedRoute requiredRoles={["Admin", "Manager"]}>
|
|
194
166
|
<AdminDashboard />
|
|
195
|
-
</ProtectedRoute
|
|
167
|
+
</ProtectedRoute>;
|
|
196
168
|
```
|
|
197
169
|
|
|
198
170
|
## Hooks
|
|
@@ -202,11 +174,11 @@ function ProtectedRoute({ children, requiredRoles }) {
|
|
|
202
174
|
Data table hook with sorting, pagination, and React Query integration.
|
|
203
175
|
|
|
204
176
|
```tsx
|
|
205
|
-
import { useTable } from
|
|
177
|
+
import { useTable } from "@ram_28/kf-ai-sdk";
|
|
206
178
|
|
|
207
179
|
function ProductTable() {
|
|
208
180
|
const table = useTable({
|
|
209
|
-
source:
|
|
181
|
+
source: "products",
|
|
210
182
|
enableSorting: true,
|
|
211
183
|
enablePagination: true,
|
|
212
184
|
pageSize: 25,
|
|
@@ -216,8 +188,8 @@ function ProductTable() {
|
|
|
216
188
|
<table>
|
|
217
189
|
<thead>
|
|
218
190
|
<tr>
|
|
219
|
-
<th onClick={() => table.toggleSort(
|
|
220
|
-
<th onClick={() => table.toggleSort(
|
|
191
|
+
<th onClick={() => table.toggleSort("name")}>Name</th>
|
|
192
|
+
<th onClick={() => table.toggleSort("price")}>Price</th>
|
|
221
193
|
</tr>
|
|
222
194
|
</thead>
|
|
223
195
|
<tbody>
|
|
@@ -247,27 +219,27 @@ function ProductTable() {
|
|
|
247
219
|
Schema-driven form hook with backend validation support.
|
|
248
220
|
|
|
249
221
|
```tsx
|
|
250
|
-
import { useForm } from
|
|
222
|
+
import { useForm } from "@ram_28/kf-ai-sdk";
|
|
251
223
|
|
|
252
224
|
function ProductForm() {
|
|
253
225
|
const form = useForm({
|
|
254
|
-
source:
|
|
255
|
-
operation:
|
|
226
|
+
source: "products",
|
|
227
|
+
operation: "create",
|
|
256
228
|
onSuccess: (data) => {
|
|
257
|
-
console.log(
|
|
229
|
+
console.log("Created:", data);
|
|
258
230
|
},
|
|
259
231
|
});
|
|
260
232
|
|
|
261
233
|
return (
|
|
262
234
|
<form onSubmit={form.handleSubmit()}>
|
|
263
|
-
<input {...form.register(
|
|
235
|
+
<input {...form.register("name")} placeholder="Product Name" />
|
|
264
236
|
{form.errors.name && <span>{form.errors.name.message}</span>}
|
|
265
237
|
|
|
266
|
-
<input {...form.register(
|
|
238
|
+
<input {...form.register("price")} type="number" placeholder="Price" />
|
|
267
239
|
{form.errors.price && <span>{form.errors.price.message}</span>}
|
|
268
240
|
|
|
269
241
|
<button type="submit" disabled={form.isSubmitting}>
|
|
270
|
-
{form.isSubmitting ?
|
|
242
|
+
{form.isSubmitting ? "Creating..." : "Create Product"}
|
|
271
243
|
</button>
|
|
272
244
|
</form>
|
|
273
245
|
);
|
|
@@ -279,16 +251,16 @@ function ProductForm() {
|
|
|
279
251
|
Kanban board state management with drag-drop support.
|
|
280
252
|
|
|
281
253
|
```tsx
|
|
282
|
-
import { useKanban, Kanban, KanbanColumn, KanbanCard } from
|
|
254
|
+
import { useKanban, Kanban, KanbanColumn, KanbanCard } from "@ram_28/kf-ai-sdk";
|
|
283
255
|
|
|
284
256
|
function TaskBoard() {
|
|
285
257
|
const kanban = useKanban({
|
|
286
|
-
source:
|
|
287
|
-
groupByField:
|
|
258
|
+
source: "tasks",
|
|
259
|
+
groupByField: "status",
|
|
288
260
|
columns: [
|
|
289
|
-
{ id:
|
|
290
|
-
{ id:
|
|
291
|
-
{ id:
|
|
261
|
+
{ id: "todo", title: "To Do" },
|
|
262
|
+
{ id: "in-progress", title: "In Progress" },
|
|
263
|
+
{ id: "done", title: "Done" },
|
|
292
264
|
],
|
|
293
265
|
});
|
|
294
266
|
|
|
@@ -313,14 +285,17 @@ function TaskBoard() {
|
|
|
313
285
|
Advanced filtering with logical operators.
|
|
314
286
|
|
|
315
287
|
```tsx
|
|
316
|
-
import { useFilter, buildFilterPayload } from
|
|
288
|
+
import { useFilter, buildFilterPayload } from "@ram_28/kf-ai-sdk";
|
|
317
289
|
|
|
318
290
|
function ProductFilter() {
|
|
319
291
|
const filter = useFilter({
|
|
320
292
|
fields: {
|
|
321
|
-
name: { type:
|
|
322
|
-
price: { type:
|
|
323
|
-
category: {
|
|
293
|
+
name: { type: "string" },
|
|
294
|
+
price: { type: "number" },
|
|
295
|
+
category: {
|
|
296
|
+
type: "select",
|
|
297
|
+
options: ["electronics", "clothing", "books"],
|
|
298
|
+
},
|
|
324
299
|
},
|
|
325
300
|
});
|
|
326
301
|
|
|
@@ -331,10 +306,10 @@ function ProductFilter() {
|
|
|
331
306
|
|
|
332
307
|
return (
|
|
333
308
|
<div>
|
|
334
|
-
<button onClick={() => filter.addCondition(
|
|
309
|
+
<button onClick={() => filter.addCondition("name", "contains", "")}>
|
|
335
310
|
Add Name Filter
|
|
336
311
|
</button>
|
|
337
|
-
<button onClick={() => filter.addCondition(
|
|
312
|
+
<button onClick={() => filter.addCondition("price", "gte", 0)}>
|
|
338
313
|
Add Price Filter
|
|
339
314
|
</button>
|
|
340
315
|
<button onClick={handleApply}>Apply Filters</button>
|
|
@@ -348,54 +323,50 @@ function ProductFilter() {
|
|
|
348
323
|
Type-safe API client for CRUD operations.
|
|
349
324
|
|
|
350
325
|
```tsx
|
|
351
|
-
import { api, setApiBaseUrl } from
|
|
326
|
+
import { api, setApiBaseUrl } from "@ram_28/kf-ai-sdk";
|
|
352
327
|
|
|
353
328
|
// Configure base URL
|
|
354
|
-
setApiBaseUrl(
|
|
329
|
+
setApiBaseUrl("https://api.example.com");
|
|
355
330
|
|
|
356
331
|
// CRUD Operations
|
|
357
332
|
async function productOperations() {
|
|
358
333
|
// Get single record
|
|
359
|
-
const product = await api(
|
|
334
|
+
const product = await api("products").get("PROD_123");
|
|
360
335
|
|
|
361
336
|
// Create record
|
|
362
|
-
const created = await api(
|
|
363
|
-
name:
|
|
337
|
+
const created = await api("products").create({
|
|
338
|
+
name: "New Product",
|
|
364
339
|
price: 99.99,
|
|
365
|
-
category:
|
|
340
|
+
category: "electronics",
|
|
366
341
|
});
|
|
367
342
|
|
|
368
343
|
// Update record
|
|
369
|
-
const updated = await api(
|
|
344
|
+
const updated = await api("products").update("PROD_123", {
|
|
370
345
|
price: 89.99,
|
|
371
346
|
});
|
|
372
347
|
|
|
373
348
|
// Delete record
|
|
374
|
-
await api(
|
|
349
|
+
await api("products").delete("PROD_123");
|
|
375
350
|
|
|
376
351
|
// List with filtering and sorting
|
|
377
|
-
const products = await api(
|
|
352
|
+
const products = await api("products").list({
|
|
378
353
|
Filter: {
|
|
379
|
-
Operator:
|
|
354
|
+
Operator: "AND",
|
|
380
355
|
Condition: [
|
|
381
|
-
{ Operator:
|
|
382
|
-
{ Operator:
|
|
356
|
+
{ Operator: "EQ", LHSField: "category", RHSValue: "electronics" },
|
|
357
|
+
{ Operator: "GTE", LHSField: "price", RHSValue: 50 },
|
|
383
358
|
],
|
|
384
359
|
},
|
|
385
|
-
Sort: [
|
|
386
|
-
{ Field: 'price', Order: 'DESC' },
|
|
387
|
-
],
|
|
360
|
+
Sort: [{ Field: "price", Order: "DESC" }],
|
|
388
361
|
Page: 1,
|
|
389
362
|
PageSize: 25,
|
|
390
363
|
});
|
|
391
364
|
|
|
392
365
|
// Count records
|
|
393
|
-
const count = await api(
|
|
366
|
+
const count = await api("products").count({
|
|
394
367
|
Filter: {
|
|
395
|
-
Operator:
|
|
396
|
-
Condition: [
|
|
397
|
-
{ Operator: 'EQ', LHSField: 'inStock', RHSValue: true },
|
|
398
|
-
],
|
|
368
|
+
Operator: "AND",
|
|
369
|
+
Condition: [{ Operator: "EQ", LHSField: "inStock", RHSValue: true }],
|
|
399
370
|
},
|
|
400
371
|
});
|
|
401
372
|
}
|
|
@@ -417,7 +388,7 @@ import type {
|
|
|
417
388
|
CurrencyField,
|
|
418
389
|
PercentageField,
|
|
419
390
|
SelectField,
|
|
420
|
-
} from
|
|
391
|
+
} from "@ram_28/kf-ai-sdk";
|
|
421
392
|
|
|
422
393
|
// Define your data types
|
|
423
394
|
interface Product {
|
|
@@ -427,7 +398,7 @@ interface Product {
|
|
|
427
398
|
price: CurrencyField;
|
|
428
399
|
quantity: NumberField<0>;
|
|
429
400
|
inStock: BooleanField;
|
|
430
|
-
category: SelectField<
|
|
401
|
+
category: SelectField<"electronics" | "clothing" | "books">;
|
|
431
402
|
createdAt: DateTimeField;
|
|
432
403
|
}
|
|
433
404
|
```
|
|
@@ -442,24 +413,24 @@ import {
|
|
|
442
413
|
formatDate,
|
|
443
414
|
formatDateTime,
|
|
444
415
|
formatNumber,
|
|
445
|
-
formatPercentage
|
|
446
|
-
} from
|
|
447
|
-
|
|
448
|
-
formatCurrency(99.99);
|
|
449
|
-
formatDate(new Date());
|
|
450
|
-
formatDateTime(new Date());
|
|
451
|
-
formatNumber(1234.56, 2);
|
|
452
|
-
formatPercentage(0.156);
|
|
416
|
+
formatPercentage,
|
|
417
|
+
} from "@ram_28/kf-ai-sdk";
|
|
418
|
+
|
|
419
|
+
formatCurrency(99.99); // "$99.99"
|
|
420
|
+
formatDate(new Date()); // "Jan 11, 2024"
|
|
421
|
+
formatDateTime(new Date()); // "Jan 11, 2024, 10:30 AM"
|
|
422
|
+
formatNumber(1234.56, 2); // "1,234.56"
|
|
423
|
+
formatPercentage(0.156); // "15.6%"
|
|
453
424
|
```
|
|
454
425
|
|
|
455
426
|
### Class Names
|
|
456
427
|
|
|
457
428
|
```tsx
|
|
458
|
-
import { cn } from
|
|
429
|
+
import { cn } from "@ram_28/kf-ai-sdk";
|
|
459
430
|
|
|
460
431
|
// Merge Tailwind classes with conflict resolution
|
|
461
|
-
cn(
|
|
462
|
-
cn(
|
|
432
|
+
cn("px-4 py-2", "px-6"); // "py-2 px-6"
|
|
433
|
+
cn("text-red-500", condition && "text-blue-500");
|
|
463
434
|
```
|
|
464
435
|
|
|
465
436
|
## Documentation
|
|
@@ -24,7 +24,7 @@ export declare function setAuthProvider(provider: AuthProviderName, config: Auth
|
|
|
24
24
|
export declare function getAuthConfig(): Readonly<AuthConfig>;
|
|
25
25
|
/**
|
|
26
26
|
* Get the base URL for auth endpoints
|
|
27
|
-
* Falls back to API base URL
|
|
27
|
+
* Falls back to API base URL, then window.location.origin
|
|
28
28
|
*/
|
|
29
29
|
export declare function getAuthBaseUrl(): string;
|
|
30
30
|
/**
|
package/dist/auth/index.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
export { AuthProvider } from "./AuthProvider";
|
|
2
2
|
export { useAuth } from "./useAuth";
|
|
3
|
-
export {
|
|
4
|
-
export {
|
|
5
|
-
export type { UserDetails, SessionResponse, AuthStatus, AuthConfig, AuthProviderName, AuthEndpointConfig, AuthProviderProps, UseAuthReturn, LoginOptions, LogoutOptions, } from "./types";
|
|
3
|
+
export { AuthenticationError } from "./authClient";
|
|
4
|
+
export type { UserDetails, SessionResponse, AuthStatus, AuthProviderProps, UseAuthReturn, } from "./types";
|
|
6
5
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/auth/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../sdk/auth/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../sdk/auth/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGnD,YAAY,EACV,WAAW,EACX,eAAe,EACf,UAAU,EACV,iBAAiB,EACjB,aAAa,GACd,MAAM,SAAS,CAAC"}
|