@object-ui/plugin-grid 0.5.0 → 3.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/.turbo/turbo-build.log +51 -6
- package/CHANGELOG.md +37 -0
- package/README.md +97 -0
- package/dist/index.js +994 -584
- package/dist/index.umd.cjs +3 -3
- package/dist/packages/plugin-grid/src/InlineEditing.d.ts +28 -0
- package/dist/packages/plugin-grid/src/ListColumnExtensions.test.d.ts +0 -0
- package/dist/packages/plugin-grid/src/ListColumnSchema.test.d.ts +1 -0
- package/dist/packages/plugin-grid/src/ObjectGrid.EdgeCases.stories.d.ts +25 -0
- package/dist/packages/plugin-grid/src/ObjectGrid.d.ts +7 -1
- package/dist/packages/plugin-grid/src/ObjectGrid.stories.d.ts +33 -0
- package/dist/packages/plugin-grid/src/__tests__/InlineEditing.test.d.ts +0 -0
- package/dist/packages/plugin-grid/src/__tests__/VirtualGrid.test.d.ts +0 -0
- package/dist/packages/plugin-grid/src/__tests__/accessibility.test.d.ts +0 -0
- package/dist/packages/plugin-grid/src/__tests__/performance-benchmark.test.d.ts +0 -0
- package/dist/packages/plugin-grid/src/__tests__/view-states.test.d.ts +0 -0
- package/dist/packages/plugin-grid/src/index.d.ts +5 -0
- package/dist/packages/plugin-grid/src/useGroupedData.d.ts +30 -0
- package/dist/packages/plugin-grid/src/useRowColor.d.ts +8 -0
- package/package.json +11 -10
- package/src/InlineEditing.tsx +235 -0
- package/src/ListColumnExtensions.test.tsx +374 -0
- package/src/ListColumnSchema.test.ts +88 -0
- package/src/ObjectGrid.EdgeCases.stories.tsx +147 -0
- package/src/ObjectGrid.msw.test.tsx +24 -1
- package/src/ObjectGrid.stories.tsx +139 -0
- package/src/ObjectGrid.tsx +409 -113
- package/src/__tests__/InlineEditing.test.tsx +360 -0
- package/src/__tests__/VirtualGrid.test.tsx +438 -0
- package/src/__tests__/accessibility.test.tsx +254 -0
- package/src/__tests__/performance-benchmark.test.tsx +182 -0
- package/src/__tests__/view-states.test.tsx +203 -0
- package/src/index.tsx +17 -2
- package/src/useGroupedData.ts +122 -0
- package/src/useRowColor.ts +74 -0
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,21 +1,66 @@
|
|
|
1
1
|
|
|
2
|
-
> @object-ui/plugin-grid@0.
|
|
2
|
+
> @object-ui/plugin-grid@3.0.0 build /home/runner/work/objectui/objectui/packages/plugin-grid
|
|
3
3
|
> vite build
|
|
4
4
|
|
|
5
5
|
[36mvite v7.3.1 [32mbuilding client environment for production...[36m[39m
|
|
6
6
|
transforming...
|
|
7
|
-
[32m✓[39m
|
|
7
|
+
[32m✓[39m 31 modules transformed.
|
|
8
8
|
rendering chunks...
|
|
9
9
|
[32m
|
|
10
10
|
[36m[vite:dts][32m Start generate declaration files...[39m
|
|
11
|
+
[96m../../examples/crm/src/objects/contact.object.ts[0m:[93m3[0m:[93m14[0m - [91merror[0m[90m TS2742: [0mThe inferred type of 'ContactObject' cannot be named without a reference to 'examples/crm/node_modules/@objectstack/spec/dist/state-machine.zod-DoC0JvQb'. This is likely not portable. A type annotation is necessary.
|
|
12
|
+
|
|
13
|
+
[7m3[0m export const ContactObject = ObjectSchema.create({
|
|
14
|
+
[7m [0m [91m ~~~~~~~~~~~~~[0m
|
|
15
|
+
[96msrc/ObjectGrid.EdgeCases.stories.tsx[0m:[93m4[0m:[93m43[0m - [91merror[0m[90m TS2307: [0mCannot find module '@storybook-config/datasource' or its corresponding type declarations.
|
|
16
|
+
|
|
17
|
+
[7m4[0m import { createStorybookDataSource } from '@storybook-config/datasource';
|
|
18
|
+
[7m [0m [91m ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~[0m
|
|
19
|
+
[96msrc/ObjectGrid.stories.tsx[0m:[93m4[0m:[93m43[0m - [91merror[0m[90m TS2307: [0mCannot find module '@storybook-config/datasource' or its corresponding type declarations.
|
|
20
|
+
|
|
21
|
+
[7m4[0m import { createStorybookDataSource } from '@storybook-config/datasource';
|
|
22
|
+
[7m [0m [91m ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~[0m
|
|
23
|
+
[96msrc/__tests__/VirtualGrid.test.tsx[0m:[93m23[0m:[93m11[0m - [91merror[0m[90m TS7034: [0mVariable 'items' implicitly has type 'any[]' in some locations where its type cannot be determined.
|
|
24
|
+
|
|
25
|
+
[7m23[0m const items = [];
|
|
26
|
+
[7m [0m [91m ~~~~~[0m
|
|
27
|
+
[96msrc/__tests__/VirtualGrid.test.tsx[0m:[93m28[0m:[93m30[0m - [91merror[0m[90m TS7005: [0mVariable 'items' implicitly has an 'any[]' type.
|
|
28
|
+
|
|
29
|
+
[7m28[0m getVirtualItems: () => items,
|
|
30
|
+
[7m [0m [91m ~~~~~[0m
|
|
31
|
+
[96msrc/__tests__/accessibility.test.tsx[0m:[93m28[0m:[93m11[0m - [91merror[0m[90m TS7034: [0mVariable 'items' implicitly has type 'any[]' in some locations where its type cannot be determined.
|
|
32
|
+
|
|
33
|
+
[7m28[0m const items = [];
|
|
34
|
+
[7m [0m [91m ~~~~~[0m
|
|
35
|
+
[96msrc/__tests__/accessibility.test.tsx[0m:[93m33[0m:[93m30[0m - [91merror[0m[90m TS7005: [0mVariable 'items' implicitly has an 'any[]' type.
|
|
36
|
+
|
|
37
|
+
[7m33[0m getVirtualItems: () => items,
|
|
38
|
+
[7m [0m [91m ~~~~~[0m
|
|
39
|
+
[96msrc/__tests__/performance-benchmark.test.tsx[0m:[93m27[0m:[93m11[0m - [91merror[0m[90m TS7034: [0mVariable 'items' implicitly has type 'any[]' in some locations where its type cannot be determined.
|
|
40
|
+
|
|
41
|
+
[7m27[0m const items = [];
|
|
42
|
+
[7m [0m [91m ~~~~~[0m
|
|
43
|
+
[96msrc/__tests__/performance-benchmark.test.tsx[0m:[93m32[0m:[93m30[0m - [91merror[0m[90m TS7005: [0mVariable 'items' implicitly has an 'any[]' type.
|
|
44
|
+
|
|
45
|
+
[7m32[0m getVirtualItems: () => items,
|
|
46
|
+
[7m [0m [91m ~~~~~[0m
|
|
47
|
+
[96msrc/__tests__/view-states.test.tsx[0m:[93m27[0m:[93m11[0m - [91merror[0m[90m TS7034: [0mVariable 'items' implicitly has type 'any[]' in some locations where its type cannot be determined.
|
|
48
|
+
|
|
49
|
+
[7m27[0m const items = [];
|
|
50
|
+
[7m [0m [91m ~~~~~[0m
|
|
51
|
+
[96msrc/__tests__/view-states.test.tsx[0m:[93m32[0m:[93m30[0m - [91merror[0m[90m TS7005: [0mVariable 'items' implicitly has an 'any[]' type.
|
|
52
|
+
|
|
53
|
+
[7m32[0m getVirtualItems: () => items,
|
|
54
|
+
[7m [0m [91m ~~~~~[0m
|
|
55
|
+
|
|
11
56
|
computing gzip size...
|
|
12
|
-
[2mdist/[22m[36mindex.js [39m[1m[
|
|
13
|
-
[32m[36m[vite:dts][32m Declaration files built in
|
|
57
|
+
[2mdist/[22m[36mindex.js [39m[1m[2m58.40 kB[22m[1m[22m[2m │ gzip: 15.71 kB[22m
|
|
58
|
+
[32m[36m[vite:dts][32m Declaration files built in 21545ms.
|
|
14
59
|
[39m
|
|
15
60
|
[33mNo name was provided for external module "@object-ui/core" in "output.globals" – guessing "core".[39m
|
|
16
61
|
[33mNo name was provided for external module "@object-ui/react" in "output.globals" – guessing "react".[39m
|
|
17
62
|
[33mNo name was provided for external module "@object-ui/fields" in "output.globals" – guessing "fields".[39m
|
|
18
63
|
[33mNo name was provided for external module "@object-ui/components" in "output.globals" – guessing "components".[39m
|
|
19
64
|
[33mNo name was provided for external module "lucide-react" in "output.globals" – guessing "lucideReact".[39m
|
|
20
|
-
[2mdist/[22m[36mindex.umd.cjs [39m[1m[
|
|
21
|
-
[32m✓ built in
|
|
65
|
+
[2mdist/[22m[36mindex.umd.cjs [39m[1m[2m40.64 kB[22m[1m[22m[2m │ gzip: 13.64 kB[22m
|
|
66
|
+
[32m✓ built in 22.79s[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,42 @@
|
|
|
1
1
|
# @object-ui/plugin-grid
|
|
2
2
|
|
|
3
|
+
## 3.0.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 87979c3: Upgrade to @objectstack v3.0.0 and console bundle optimization
|
|
8
|
+
- Upgraded all @objectstack/\* packages from ^2.0.7 to ^3.0.0
|
|
9
|
+
- Breaking change migrations: Hub → Cloud namespace, definePlugin removed, PaginatedResult.value → .records, PaginatedResult.count → .total, client.meta.getObject() → client.meta.getItem()
|
|
10
|
+
- Console bundle optimization: split monolithic 3.7 MB chunk into 17 granular cacheable chunks (95% main entry reduction)
|
|
11
|
+
- Added gzip + brotli pre-compression via vite-plugin-compression2
|
|
12
|
+
- Lazy MSW loading for build:server (~150 KB gzip saved)
|
|
13
|
+
- Added bundle analysis with rollup-plugin-visualizer
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies [87979c3]
|
|
18
|
+
- @object-ui/types@3.0.0
|
|
19
|
+
- @object-ui/core@3.0.0
|
|
20
|
+
- @object-ui/react@3.0.0
|
|
21
|
+
- @object-ui/components@3.0.0
|
|
22
|
+
- @object-ui/fields@3.0.0
|
|
23
|
+
- @object-ui/mobile@3.0.0
|
|
24
|
+
|
|
25
|
+
## 2.0.0
|
|
26
|
+
|
|
27
|
+
### Major Changes
|
|
28
|
+
|
|
29
|
+
- b859617: Release v1.0.0 — unify all package versions to 1.0.0
|
|
30
|
+
|
|
31
|
+
### Patch Changes
|
|
32
|
+
|
|
33
|
+
- Updated dependencies [b859617]
|
|
34
|
+
- @object-ui/types@2.0.0
|
|
35
|
+
- @object-ui/core@2.0.0
|
|
36
|
+
- @object-ui/react@2.0.0
|
|
37
|
+
- @object-ui/components@2.0.0
|
|
38
|
+
- @object-ui/fields@2.0.0
|
|
39
|
+
|
|
3
40
|
## 0.3.1
|
|
4
41
|
|
|
5
42
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -244,6 +244,103 @@ const schema = {
|
|
|
244
244
|
};
|
|
245
245
|
```
|
|
246
246
|
|
|
247
|
+
### Inline Editing
|
|
248
|
+
|
|
249
|
+
Enable inline cell editing for quick updates:
|
|
250
|
+
|
|
251
|
+
```typescript
|
|
252
|
+
const schema = {
|
|
253
|
+
type: 'object-grid',
|
|
254
|
+
objectName: 'users',
|
|
255
|
+
columns: [
|
|
256
|
+
{ header: 'ID', accessorKey: 'id', editable: false }, // Read-only column
|
|
257
|
+
{ header: 'Name', accessorKey: 'name' }, // Editable
|
|
258
|
+
{ header: 'Email', accessorKey: 'email' }, // Editable
|
|
259
|
+
{ header: 'Status', accessorKey: 'status' } // Editable
|
|
260
|
+
],
|
|
261
|
+
editable: true, // Enable editing globally
|
|
262
|
+
onCellChange: (rowIndex, columnKey, newValue, row) => {
|
|
263
|
+
console.log(`Cell at row ${rowIndex}, column ${columnKey} changed to:`, newValue);
|
|
264
|
+
console.log('Full row data:', row);
|
|
265
|
+
// Update your data source here
|
|
266
|
+
// Example: await dataSource.update(row.id, { [columnKey]: newValue });
|
|
267
|
+
}
|
|
268
|
+
};
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
**Inline Editing Features:**
|
|
272
|
+
- **Double-click to edit**: Double-click any editable cell to enter edit mode
|
|
273
|
+
- **Keyboard shortcuts**:
|
|
274
|
+
- Press `Enter` on a focused cell to start editing
|
|
275
|
+
- Press `Enter` while editing to save changes
|
|
276
|
+
- Press `Escape` to cancel editing
|
|
277
|
+
- **Column-level control**: Set `editable: false` on specific columns to prevent editing
|
|
278
|
+
- **Visual feedback**: Editable cells show hover state to indicate they can be edited
|
|
279
|
+
- **Automatic focus**: Input field is automatically focused and selected when entering edit mode
|
|
280
|
+
|
|
281
|
+
**Use Cases:**
|
|
282
|
+
- Quick data corrections
|
|
283
|
+
- Batch data entry
|
|
284
|
+
- Spreadsheet-like editing experience
|
|
285
|
+
- Real-time updates with backend synchronization
|
|
286
|
+
|
|
287
|
+
### Batch Editing & Multi-Row Save
|
|
288
|
+
|
|
289
|
+
Edit multiple cells across multiple rows and save them individually or all at once:
|
|
290
|
+
|
|
291
|
+
```typescript
|
|
292
|
+
const schema = {
|
|
293
|
+
type: 'object-grid',
|
|
294
|
+
objectName: 'products',
|
|
295
|
+
columns: [
|
|
296
|
+
{ header: 'SKU', accessorKey: 'sku', editable: false },
|
|
297
|
+
{ header: 'Name', accessorKey: 'name' },
|
|
298
|
+
{ header: 'Price', accessorKey: 'price' },
|
|
299
|
+
{ header: 'Stock', accessorKey: 'stock' }
|
|
300
|
+
],
|
|
301
|
+
editable: true,
|
|
302
|
+
rowActions: true, // Show row-level save/cancel buttons
|
|
303
|
+
onRowSave: async (rowIndex, changes, row) => {
|
|
304
|
+
// Save a single row
|
|
305
|
+
console.log('Saving row:', rowIndex, changes);
|
|
306
|
+
await dataSource.update(row.id, changes);
|
|
307
|
+
},
|
|
308
|
+
onBatchSave: async (allChanges) => {
|
|
309
|
+
// Save all modified rows at once
|
|
310
|
+
console.log('Batch saving:', allChanges);
|
|
311
|
+
await Promise.all(
|
|
312
|
+
allChanges.map(({ row, changes }) =>
|
|
313
|
+
dataSource.update(row.id, changes)
|
|
314
|
+
)
|
|
315
|
+
);
|
|
316
|
+
}
|
|
317
|
+
};
|
|
318
|
+
```
|
|
319
|
+
|
|
320
|
+
**Batch Editing Features:**
|
|
321
|
+
- **Pending changes tracking**: Edit multiple cells across multiple rows before saving
|
|
322
|
+
- **Visual indicators**:
|
|
323
|
+
- Modified rows are highlighted with amber background
|
|
324
|
+
- Modified cells are shown in bold with amber text
|
|
325
|
+
- Toolbar shows count of modified rows
|
|
326
|
+
- **Row-level actions**: Save or cancel changes for individual rows
|
|
327
|
+
- **Batch operations**:
|
|
328
|
+
- "Save All" button to save all modified rows at once
|
|
329
|
+
- "Cancel All" button to discard all pending changes
|
|
330
|
+
- **Flexible callbacks**:
|
|
331
|
+
- `onRowSave`: Called when saving a single row
|
|
332
|
+
- `onBatchSave`: Called when saving multiple rows at once
|
|
333
|
+
- `onCellChange`: Still called for immediate cell updates (legacy support)
|
|
334
|
+
|
|
335
|
+
**Example Workflow:**
|
|
336
|
+
1. User edits multiple cells across different rows
|
|
337
|
+
2. Modified rows are visually highlighted
|
|
338
|
+
3. Toolbar shows "X rows modified" with Save All/Cancel All buttons
|
|
339
|
+
4. User can:
|
|
340
|
+
- Save individual rows using row-level save button
|
|
341
|
+
- Save all changes at once using "Save All" button
|
|
342
|
+
- Cancel individual row changes or all changes
|
|
343
|
+
|
|
247
344
|
## TypeScript Support
|
|
248
345
|
|
|
249
346
|
```typescript
|