@ram_28/kf-ai-sdk 1.0.29 → 1.0.30
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/package.json +1 -1
- package/docs/QUICK_REFERENCE.md +0 -274
- package/docs/datetime.md +0 -144
package/package.json
CHANGED
package/docs/QUICK_REFERENCE.md
DELETED
|
@@ -1,274 +0,0 @@
|
|
|
1
|
-
# KF AI SDK - Quick Reference
|
|
2
|
-
|
|
3
|
-
Quick reference for common operations. See individual hook docs for detailed examples.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install @ram_28/kf-ai-sdk
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
import { setApiBaseUrl } from "@ram_28/kf-ai-sdk/api";
|
|
13
|
-
setApiBaseUrl("https://api.your-domain.com");
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
---
|
|
17
|
-
|
|
18
|
-
## useTable
|
|
19
|
-
|
|
20
|
-
[Full Documentation](./useTable.md)
|
|
21
|
-
|
|
22
|
-
```typescript
|
|
23
|
-
import { useTable } from "@ram_28/kf-ai-sdk/table";
|
|
24
|
-
|
|
25
|
-
const table = useTable<Product>({
|
|
26
|
-
source: "BDO_Products",
|
|
27
|
-
columns: [
|
|
28
|
-
{ fieldId: "Title", enableSorting: true },
|
|
29
|
-
{ fieldId: "Price", enableSorting: true },
|
|
30
|
-
],
|
|
31
|
-
initialState: {
|
|
32
|
-
pagination: { pageNo: 1, pageSize: 10 },
|
|
33
|
-
},
|
|
34
|
-
});
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
| Property | Description |
|
|
38
|
-
|----------|-------------|
|
|
39
|
-
| `table.rows` | Current data |
|
|
40
|
-
| `table.isLoading` | Loading state |
|
|
41
|
-
| `table.search.setQuery(q)` | Set search |
|
|
42
|
-
| `table.sort.toggle(field)` | Toggle sort |
|
|
43
|
-
| `table.filter.addCondition({...})` | Add filter |
|
|
44
|
-
| `table.pagination.goToNext()` | Next page |
|
|
45
|
-
|
|
46
|
-
---
|
|
47
|
-
|
|
48
|
-
## useForm
|
|
49
|
-
|
|
50
|
-
[Full Documentation](./useForm.md)
|
|
51
|
-
|
|
52
|
-
```typescript
|
|
53
|
-
import { useForm } from "@ram_28/kf-ai-sdk/form";
|
|
54
|
-
|
|
55
|
-
const form = useForm<Product>({
|
|
56
|
-
source: "BDO_Products",
|
|
57
|
-
operation: "create", // or "update"
|
|
58
|
-
recordId: "...", // for update
|
|
59
|
-
});
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
| Property | Description |
|
|
63
|
-
|----------|-------------|
|
|
64
|
-
| `form.register(field)` | Register input |
|
|
65
|
-
| `form.handleSubmit(onSuccess, onError)` | Submit handler |
|
|
66
|
-
| `form.errors` | Validation errors |
|
|
67
|
-
| `form.isValid` | Form validity |
|
|
68
|
-
| `form.getField(name)` | Field metadata |
|
|
69
|
-
| `form.watch(field)` | Watch value |
|
|
70
|
-
|
|
71
|
-
---
|
|
72
|
-
|
|
73
|
-
## useKanban
|
|
74
|
-
|
|
75
|
-
[Full Documentation](./useKanban.md)
|
|
76
|
-
|
|
77
|
-
```typescript
|
|
78
|
-
import { useKanban } from "@ram_28/kf-ai-sdk/kanban";
|
|
79
|
-
|
|
80
|
-
const kanban = useKanban<TaskData>({
|
|
81
|
-
source: "BDO_Tasks",
|
|
82
|
-
columns: [
|
|
83
|
-
{ id: "todo", title: "To Do", position: 0 },
|
|
84
|
-
{ id: "done", title: "Done", position: 1 },
|
|
85
|
-
],
|
|
86
|
-
enableDragDrop: true,
|
|
87
|
-
});
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
| Property | Description |
|
|
91
|
-
|----------|-------------|
|
|
92
|
-
| `kanban.columns` | Columns with cards |
|
|
93
|
-
| `kanban.createCard({...})` | Create card |
|
|
94
|
-
| `kanban.moveCard(id, columnId)` | Move card |
|
|
95
|
-
| `kanban.getCardProps(card)` | Drag props |
|
|
96
|
-
| `kanban.filter.addCondition({...})` | Filter cards |
|
|
97
|
-
|
|
98
|
-
---
|
|
99
|
-
|
|
100
|
-
## useFilter
|
|
101
|
-
|
|
102
|
-
[Full Documentation](./useFilter.md)
|
|
103
|
-
|
|
104
|
-
```typescript
|
|
105
|
-
import { useFilter, isCondition, isConditionGroup } from "@ram_28/kf-ai-sdk/filter";
|
|
106
|
-
|
|
107
|
-
const filter = useFilter({
|
|
108
|
-
initialOperator: "And",
|
|
109
|
-
});
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
| Property | Description |
|
|
113
|
-
|----------|-------------|
|
|
114
|
-
| `filter.addCondition({...})` | Add condition |
|
|
115
|
-
| `filter.addConditionGroup(op)` | Add group |
|
|
116
|
-
| `filter.clearAllConditions()` | Clear all |
|
|
117
|
-
| `filter.payload` | API-ready payload |
|
|
118
|
-
| `filter.hasConditions` | Has filters |
|
|
119
|
-
|
|
120
|
-
### Operators
|
|
121
|
-
|
|
122
|
-
| Operator | Description |
|
|
123
|
-
|----------|-------------|
|
|
124
|
-
| `EQ`, `NE` | Equal, Not Equal |
|
|
125
|
-
| `GT`, `GTE`, `LT`, `LTE` | Comparisons |
|
|
126
|
-
| `Between`, `NotBetween` | Range |
|
|
127
|
-
| `IN`, `NIN` | List match |
|
|
128
|
-
| `Contains`, `NotContains` | Text search |
|
|
129
|
-
| `Empty`, `NotEmpty` | Null check |
|
|
130
|
-
|
|
131
|
-
---
|
|
132
|
-
|
|
133
|
-
## useAuth
|
|
134
|
-
|
|
135
|
-
[Full Documentation](./useAuth.md)
|
|
136
|
-
|
|
137
|
-
```typescript
|
|
138
|
-
import { useAuth, AuthProvider } from "@ram_28/kf-ai-sdk/auth";
|
|
139
|
-
|
|
140
|
-
// Wrap app
|
|
141
|
-
<AuthProvider config={{ sessionEndpoint: "/api/id" }}>
|
|
142
|
-
<App />
|
|
143
|
-
</AuthProvider>
|
|
144
|
-
|
|
145
|
-
// Use in components
|
|
146
|
-
const auth = useAuth();
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
| Property | Description |
|
|
150
|
-
|----------|-------------|
|
|
151
|
-
| `auth.user` | Current user |
|
|
152
|
-
| `auth.isAuthenticated` | Auth status |
|
|
153
|
-
| `auth.login(provider?)` | Sign in |
|
|
154
|
-
| `auth.logout()` | Sign out |
|
|
155
|
-
| `auth.hasRole(role)` | Check role |
|
|
156
|
-
| `auth.hasAnyRole(roles)` | Check roles |
|
|
157
|
-
|
|
158
|
-
---
|
|
159
|
-
|
|
160
|
-
## Common Patterns
|
|
161
|
-
|
|
162
|
-
### Filter by Category
|
|
163
|
-
|
|
164
|
-
```typescript
|
|
165
|
-
table.filter.clearAllConditions();
|
|
166
|
-
table.filter.addCondition({
|
|
167
|
-
Operator: "EQ",
|
|
168
|
-
LHSField: "Category",
|
|
169
|
-
RHSValue: "Electronics",
|
|
170
|
-
});
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
### Filter by Date Range
|
|
174
|
-
|
|
175
|
-
```typescript
|
|
176
|
-
table.filter.addCondition({
|
|
177
|
-
Operator: "Between",
|
|
178
|
-
LHSField: "CreatedAt",
|
|
179
|
-
RHSValue: [startDate, endDate],
|
|
180
|
-
});
|
|
181
|
-
```
|
|
182
|
-
|
|
183
|
-
### My Tasks Filter
|
|
184
|
-
|
|
185
|
-
```typescript
|
|
186
|
-
table.filter.addCondition({
|
|
187
|
-
Operator: "EQ",
|
|
188
|
-
LHSField: "AssignedTo",
|
|
189
|
-
RHSValue: currentUserId,
|
|
190
|
-
});
|
|
191
|
-
```
|
|
192
|
-
|
|
193
|
-
### Sortable Column Header
|
|
194
|
-
|
|
195
|
-
```typescript
|
|
196
|
-
<th onClick={() => table.sort.toggle("Price")}>
|
|
197
|
-
Price {table.sort.field === "Price" && (table.sort.direction === "asc" ? "↑" : "↓")}
|
|
198
|
-
</th>
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
### Pagination Controls
|
|
202
|
-
|
|
203
|
-
```typescript
|
|
204
|
-
<button onClick={table.pagination.goToPrevious} disabled={!table.pagination.canGoPrevious}>
|
|
205
|
-
Previous
|
|
206
|
-
</button>
|
|
207
|
-
<span>Page {table.pagination.pageNo} of {table.pagination.totalPages}</span>
|
|
208
|
-
<button onClick={table.pagination.goToNext} disabled={!table.pagination.canGoNext}>
|
|
209
|
-
Next
|
|
210
|
-
</button>
|
|
211
|
-
```
|
|
212
|
-
|
|
213
|
-
### Protected Route
|
|
214
|
-
|
|
215
|
-
```typescript
|
|
216
|
-
function ProtectedRoute({ children }) {
|
|
217
|
-
const auth = useAuth();
|
|
218
|
-
if (auth.isLoading) return <div>Loading...</div>;
|
|
219
|
-
if (!auth.isAuthenticated) return <div>Please sign in</div>;
|
|
220
|
-
return children;
|
|
221
|
-
}
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
### Role-Based UI
|
|
225
|
-
|
|
226
|
-
```typescript
|
|
227
|
-
{auth.hasRole("Admin") && <AdminPanel />}
|
|
228
|
-
{auth.hasAnyRole(["Seller", "Admin"]) && <ProductManagement />}
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
---
|
|
232
|
-
|
|
233
|
-
## Date Handling
|
|
234
|
-
|
|
235
|
-
### Display Encoded Date
|
|
236
|
-
```typescript
|
|
237
|
-
import { decodeDate } from "@ram_28/kf-ai-sdk/api";
|
|
238
|
-
import { formatDate } from "@ram_28/kf-ai-sdk/utils";
|
|
239
|
-
|
|
240
|
-
const readable = formatDate(decodeDate(record.OrderDate), 'medium');
|
|
241
|
-
// => "Mar 15, 2025"
|
|
242
|
-
```
|
|
243
|
-
|
|
244
|
-
### Display Timestamp
|
|
245
|
-
```typescript
|
|
246
|
-
import { decodeDateTime } from "@ram_28/kf-ai-sdk/api";
|
|
247
|
-
import { formatDateTime } from "@ram_28/kf-ai-sdk/utils";
|
|
248
|
-
|
|
249
|
-
const readable = formatDateTime(decodeDateTime(record._created_at), 'medium');
|
|
250
|
-
// => "Mar 15, 2025, 10:30:45 AM"
|
|
251
|
-
```
|
|
252
|
-
|
|
253
|
-
[Full Documentation](./datetime.md)
|
|
254
|
-
|
|
255
|
-
---
|
|
256
|
-
|
|
257
|
-
## Type Imports
|
|
258
|
-
|
|
259
|
-
```typescript
|
|
260
|
-
// Table
|
|
261
|
-
import type { UseTableOptionsType, UseTableReturnType, ColumnDefinitionType } from "@ram_28/kf-ai-sdk/table/types";
|
|
262
|
-
|
|
263
|
-
// Form
|
|
264
|
-
import type { UseFormOptionsType, UseFormReturnType, FormFieldConfigType } from "@ram_28/kf-ai-sdk/form/types";
|
|
265
|
-
|
|
266
|
-
// Kanban
|
|
267
|
-
import type { UseKanbanOptionsType, UseKanbanReturnType, KanbanCardType, ColumnConfigType } from "@ram_28/kf-ai-sdk/kanban/types";
|
|
268
|
-
|
|
269
|
-
// Filter
|
|
270
|
-
import type { ConditionType, ConditionGroupType, ConditionOperatorType, FilterType } from "@ram_28/kf-ai-sdk/filter/types";
|
|
271
|
-
|
|
272
|
-
// Auth
|
|
273
|
-
import type { UseAuthReturnType, UserDetailsType, AuthStatusType } from "@ram_28/kf-ai-sdk/auth/types";
|
|
274
|
-
```
|
package/docs/datetime.md
DELETED
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
# Date & DateTime Handling
|
|
2
|
-
|
|
3
|
-
Working with Date and DateTime fields in the SDK.
|
|
4
|
-
|
|
5
|
-
## API Response Format
|
|
6
|
-
|
|
7
|
-
The backend returns dates in encoded format:
|
|
8
|
-
- **Date**: `{ "$__d__": "YYYY-MM-DD" }`
|
|
9
|
-
- **DateTime**: `{ "$__dt__": unix_timestamp_seconds }`
|
|
10
|
-
|
|
11
|
-
## Imports
|
|
12
|
-
|
|
13
|
-
```typescript
|
|
14
|
-
// Decoding & formatting for API
|
|
15
|
-
import {
|
|
16
|
-
decodeDate,
|
|
17
|
-
decodeDateTime,
|
|
18
|
-
formatDate,
|
|
19
|
-
formatDateTime,
|
|
20
|
-
parseDate,
|
|
21
|
-
parseDateTime,
|
|
22
|
-
} from "@ram_28/kf-ai-sdk/api";
|
|
23
|
-
|
|
24
|
-
// UI display formatting
|
|
25
|
-
import {
|
|
26
|
-
formatDate,
|
|
27
|
-
formatDateTime
|
|
28
|
-
} from "@ram_28/kf-ai-sdk/utils";
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
## Decoding API Responses
|
|
32
|
-
|
|
33
|
-
Convert encoded dates to JavaScript Date objects.
|
|
34
|
-
|
|
35
|
-
### decodeDate
|
|
36
|
-
```typescript
|
|
37
|
-
const apiResponse = { "$__d__": "2025-03-15" };
|
|
38
|
-
const date = decodeDate(apiResponse);
|
|
39
|
-
// => Date object for March 15, 2025
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
### decodeDateTime
|
|
43
|
-
```typescript
|
|
44
|
-
const apiResponse = { "$__dt__": 1769110463 };
|
|
45
|
-
const date = decodeDateTime(apiResponse);
|
|
46
|
-
// => Date object with full timestamp
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
## Formatting for API Requests
|
|
50
|
-
|
|
51
|
-
Convert Date objects to strings the API expects.
|
|
52
|
-
|
|
53
|
-
### formatDate (API)
|
|
54
|
-
```typescript
|
|
55
|
-
import { formatDate } from "@ram_28/kf-ai-sdk/api";
|
|
56
|
-
|
|
57
|
-
const date = new Date(2025, 2, 15);
|
|
58
|
-
formatDate(date); // => "2025-03-15"
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
### formatDateTime (API)
|
|
62
|
-
```typescript
|
|
63
|
-
import { formatDateTime } from "@ram_28/kf-ai-sdk/api";
|
|
64
|
-
|
|
65
|
-
const date = new Date(2025, 2, 15, 10, 30, 45);
|
|
66
|
-
formatDateTime(date); // => "2025-03-15 10:30:45"
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
## Formatting for UI Display
|
|
70
|
-
|
|
71
|
-
Convert Date objects to human-readable strings.
|
|
72
|
-
|
|
73
|
-
### formatDate (UI)
|
|
74
|
-
```typescript
|
|
75
|
-
import { formatDate } from "@ram_28/kf-ai-sdk/utils";
|
|
76
|
-
|
|
77
|
-
const date = new Date(2025, 2, 15);
|
|
78
|
-
formatDate(date, 'short'); // => "3/15/25"
|
|
79
|
-
formatDate(date, 'medium'); // => "Mar 15, 2025"
|
|
80
|
-
formatDate(date, 'long'); // => "March 15, 2025"
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
### formatDateTime (UI)
|
|
84
|
-
```typescript
|
|
85
|
-
import { formatDateTime } from "@ram_28/kf-ai-sdk/utils";
|
|
86
|
-
|
|
87
|
-
const date = new Date(2025, 2, 15, 10, 30, 45);
|
|
88
|
-
formatDateTime(date, 'short'); // => "3/15/25, 10:30 AM"
|
|
89
|
-
formatDateTime(date, 'medium'); // => "Mar 15, 2025, 10:30:45 AM"
|
|
90
|
-
formatDateTime(date, 'long'); // => "March 15, 2025 at 10:30:45 AM"
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
## Common Patterns
|
|
94
|
-
|
|
95
|
-
### Display a date from API response
|
|
96
|
-
```typescript
|
|
97
|
-
import { decodeDate } from "@ram_28/kf-ai-sdk/api";
|
|
98
|
-
import { formatDate } from "@ram_28/kf-ai-sdk/utils";
|
|
99
|
-
|
|
100
|
-
function displayDate(encodedDate: { $__d__: string }) {
|
|
101
|
-
const date = decodeDate(encodedDate);
|
|
102
|
-
return formatDate(date, 'medium');
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
// Usage in component
|
|
106
|
-
<span>{displayDate(record.OrderDate)}</span>
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
### Display created/modified timestamps
|
|
110
|
-
```typescript
|
|
111
|
-
import { decodeDateTime } from "@ram_28/kf-ai-sdk/api";
|
|
112
|
-
import { formatDateTime } from "@ram_28/kf-ai-sdk/utils";
|
|
113
|
-
|
|
114
|
-
function displayTimestamp(encodedDateTime: { $__dt__: number }) {
|
|
115
|
-
const date = decodeDateTime(encodedDateTime);
|
|
116
|
-
return formatDateTime(date, 'medium');
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
// Usage
|
|
120
|
-
<span>Created: {displayTimestamp(record._created_at)}</span>
|
|
121
|
-
<span>Modified: {displayTimestamp(record._modified_at)}</span>
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
### Submit a date to the API
|
|
125
|
-
```typescript
|
|
126
|
-
import { formatDate } from "@ram_28/kf-ai-sdk/api";
|
|
127
|
-
|
|
128
|
-
// From a date picker value
|
|
129
|
-
const datePickerValue = "2025-03-15"; // HTML date input value
|
|
130
|
-
// Already in correct format, use directly
|
|
131
|
-
|
|
132
|
-
// From a Date object
|
|
133
|
-
const dateObj = new Date();
|
|
134
|
-
const apiValue = formatDate(dateObj); // => "2025-03-15"
|
|
135
|
-
```
|
|
136
|
-
|
|
137
|
-
## Type Definitions
|
|
138
|
-
|
|
139
|
-
```typescript
|
|
140
|
-
import type {
|
|
141
|
-
DateEncodedType, // { $__d__: string }
|
|
142
|
-
DateTimeEncodedType, // { $__dt__: number }
|
|
143
|
-
} from "@ram_28/kf-ai-sdk/api";
|
|
144
|
-
```
|