laif-ds 1.0.2-app-data-grid.88 → 1.0.3
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/dist/CHANGELOG.md +3 -320
- package/dist/agent-docs/adoption-report.json +84 -164
- package/dist/agent-docs/components/AppCard.md +21 -25
- package/dist/agent-docs/components/AppEditor.md +13 -18
- package/dist/agent-docs/components/AppSelect.md +0 -51
- package/dist/agent-docs/components/Confirmer.md +3 -0
- package/dist/agent-docs/components/DataTable.md +3 -34
- package/dist/agent-docs/components/DatePicker.md +7 -8
- package/dist/agent-docs/components/DropdownMenu.md +0 -2
- package/dist/agent-docs/components/FileUploader.md +12 -12
- package/dist/agent-docs/components-list.md +0 -63
- package/dist/agent-docs/manifest.json +34 -270
- package/dist/components/design-tokens.js +2 -138
- package/dist/components/ui/app-select.js +222 -334
- package/dist/components/ui/button.js +1 -2
- package/dist/components/ui/confirmer.js +108 -26
- package/dist/components/ui/date-picker.js +34 -36
- package/dist/components/ui/dropdown-menu.js +3 -3
- package/dist/components/ui/tables/data-cross-table/data-cross-table.js +6 -6
- package/dist/components/ui/tables/data-table/data-table-constants.js +16 -36
- package/dist/components/ui/tables/data-table/data-table-i18n.js +1 -135
- package/dist/css-for-template.css +0 -27
- package/dist/hooks/use-mobile.js +1 -0
- package/dist/index.d.ts +61 -5880
- package/dist/index.js +402 -468
- package/dist/styles.css +1 -2
- package/dist/styles.v3.css +1 -1
- package/package.json +7 -25
- package/dist/agent-docs/components/AppDataGrid.md +0 -2603
- package/dist/agent-docs/components/GridFilterPanel.md +0 -112
- package/dist/agent-docs/components/SidebarMenuBadge.md +0 -87
- package/dist/components/ui/app-data-grid/app-data-grid.js +0 -896
- package/dist/components/ui/app-data-grid/engine/use-grid-column-resize.js +0 -110
- package/dist/components/ui/app-data-grid/engine/use-grid-engine.js +0 -618
- package/dist/components/ui/app-data-grid/engine/use-grid-infinite-loader.js +0 -50
- package/dist/components/ui/app-data-grid/engine/use-grid-virtualizer.js +0 -90
- package/dist/components/ui/app-data-grid/grid-aggregate.js +0 -5
- package/dist/components/ui/app-data-grid/grid-column-registry.js +0 -28
- package/dist/components/ui/app-data-grid/grid-columns.js +0 -204
- package/dist/components/ui/app-data-grid/grid-filter-client.js +0 -73
- package/dist/components/ui/app-data-grid/grid-filter-compile.js +0 -33
- package/dist/components/ui/app-data-grid/grid-filter-operators.js +0 -141
- package/dist/components/ui/app-data-grid/grid-grouping.js +0 -104
- package/dist/components/ui/app-data-grid/grid-header-matrix.js +0 -112
- package/dist/components/ui/app-data-grid/grid-i18n.js +0 -208
- package/dist/components/ui/app-data-grid/grid-mount-count.js +0 -8
- package/dist/components/ui/app-data-grid/grid-reducer.js +0 -200
- package/dist/components/ui/app-data-grid/grid-result-scope.js +0 -35
- package/dist/components/ui/app-data-grid/grid-tokens.js +0 -169
- package/dist/components/ui/app-data-grid/grid-view-preset.js +0 -97
- package/dist/components/ui/app-data-grid/parts/grid-actions-row.js +0 -86
- package/dist/components/ui/app-data-grid/parts/grid-cell-text.js +0 -67
- package/dist/components/ui/app-data-grid/parts/grid-column-registry-panel.js +0 -320
- package/dist/components/ui/app-data-grid/parts/grid-density-control.js +0 -88
- package/dist/components/ui/app-data-grid/parts/grid-filter-chips.js +0 -234
- package/dist/components/ui/app-data-grid/parts/grid-filter-editor.js +0 -201
- package/dist/components/ui/app-data-grid/parts/grid-filter-panel.js +0 -386
- package/dist/components/ui/app-data-grid/parts/grid-filter-row.js +0 -277
- package/dist/components/ui/app-data-grid/parts/grid-fullscreen-toggle.js +0 -28
- package/dist/components/ui/app-data-grid/parts/grid-group-row.js +0 -135
- package/dist/components/ui/app-data-grid/parts/grid-header.js +0 -338
- package/dist/components/ui/app-data-grid/parts/grid-pagination-control.js +0 -238
- package/dist/components/ui/app-data-grid/parts/grid-portal-container.js +0 -14
- package/dist/components/ui/app-data-grid/parts/grid-row.js +0 -181
- package/dist/components/ui/app-data-grid/parts/grid-scroll-area.js +0 -186
- package/dist/components/ui/app-data-grid/parts/grid-selection-bar.js +0 -195
- package/dist/components/ui/app-data-grid/parts/grid-status-surface.js +0 -66
- package/dist/components/ui/app-data-grid/parts/grid-table.js +0 -482
- package/dist/components/ui/app-data-grid/parts/grid-toolbar-slots.js +0 -224
- package/dist/components/ui/app-data-grid/use-grid-filters.js +0 -173
- /package/dist/agent-docs/components/{TruncatedCell.md → truncated-cell.md} +0 -0
|
@@ -1,78 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
|
-
"generatedAt": "2026-09-
|
|
3
|
+
"generatedAt": "2026-09-23T14:41:36.824Z",
|
|
4
4
|
"package": {
|
|
5
5
|
"name": "laif-ds",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.3"
|
|
7
7
|
},
|
|
8
8
|
"summary": {
|
|
9
|
-
"scannedFiles":
|
|
10
|
-
"deprecatedComponentsCount":
|
|
11
|
-
"deprecatedComponentsUsedCount":
|
|
9
|
+
"scannedFiles": 404,
|
|
10
|
+
"deprecatedComponentsCount": 2,
|
|
11
|
+
"deprecatedComponentsUsedCount": 0,
|
|
12
12
|
"componentsWithoutExamplesCount": 5,
|
|
13
13
|
"componentsWithoutPropsTableCount": 30,
|
|
14
14
|
"repeatedClassPatternsCount": 25,
|
|
15
|
-
"lowAiReadinessComponentsCount":
|
|
16
|
-
"componentsWithoutAccessibilityCoverageCount":
|
|
17
|
-
"componentsWithWeakStateCoverageCount":
|
|
18
|
-
"averageAiReadinessScore": 56.
|
|
15
|
+
"lowAiReadinessComponentsCount": 41,
|
|
16
|
+
"componentsWithoutAccessibilityCoverageCount": 44,
|
|
17
|
+
"componentsWithWeakStateCoverageCount": 71,
|
|
18
|
+
"averageAiReadinessScore": 56.33
|
|
19
19
|
},
|
|
20
|
-
"deprecatedUsage": [
|
|
21
|
-
{
|
|
22
|
-
"component": "DataTable",
|
|
23
|
-
"replacement": "AppDataGrid",
|
|
24
|
-
"totalOccurrences": 12,
|
|
25
|
-
"usages": [
|
|
26
|
-
{
|
|
27
|
-
"file": "src/components/design-tokens.ts",
|
|
28
|
-
"occurrences": 2
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
"file": "src/components/ui/app-data-grid/parts/grid-scroll-area.tsx",
|
|
32
|
-
"occurrences": 2
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
"file": "src/components/ui/tables/data-table/data-table.tsx",
|
|
36
|
-
"occurrences": 2
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
"file": "src/components/ui/app-data-grid/app-data-grid.tsx",
|
|
40
|
-
"occurrences": 1
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
"file": "src/components/ui/app-data-grid/app-data-grid.types.ts",
|
|
44
|
-
"occurrences": 1
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
"file": "src/components/ui/app-data-grid/grid-filter-operators.ts",
|
|
48
|
-
"occurrences": 1
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"file": "src/components/ui/app-data-grid/grid-i18n.ts",
|
|
52
|
-
"occurrences": 1
|
|
53
|
-
},
|
|
54
|
-
{
|
|
55
|
-
"file": "src/components/ui/app-select.tsx",
|
|
56
|
-
"occurrences": 1
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
"file": "src/components/ui/tables/data-table/data-table.utils.ts",
|
|
60
|
-
"occurrences": 1
|
|
61
|
-
}
|
|
62
|
-
]
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
"component": "SidebarMenuBadge",
|
|
66
|
-
"replacement": "NavItem.badge",
|
|
67
|
-
"totalOccurrences": 4,
|
|
68
|
-
"usages": [
|
|
69
|
-
{
|
|
70
|
-
"file": "src/components/ui/sidebar.tsx",
|
|
71
|
-
"occurrences": 4
|
|
72
|
-
}
|
|
73
|
-
]
|
|
74
|
-
}
|
|
75
|
-
],
|
|
20
|
+
"deprecatedUsage": [],
|
|
76
21
|
"documentationGaps": {
|
|
77
22
|
"componentsWithoutExamples": [
|
|
78
23
|
"AppMultipleSelectDropdown",
|
|
@@ -125,7 +70,6 @@
|
|
|
125
70
|
"ChatMessage",
|
|
126
71
|
"CircularProgress",
|
|
127
72
|
"CodeHighlighter",
|
|
128
|
-
"Confirmer",
|
|
129
73
|
"CopyButton",
|
|
130
74
|
"DataCrossTable",
|
|
131
75
|
"DropdownMenu",
|
|
@@ -191,7 +135,6 @@
|
|
|
191
135
|
"FilePreviewer",
|
|
192
136
|
"Form",
|
|
193
137
|
"GanttChart",
|
|
194
|
-
"GridFilterPanel",
|
|
195
138
|
"HoverCard",
|
|
196
139
|
"Icon",
|
|
197
140
|
"Input",
|
|
@@ -217,7 +160,6 @@
|
|
|
217
160
|
"Sheet",
|
|
218
161
|
"ShikiHighlighter",
|
|
219
162
|
"Sidebar",
|
|
220
|
-
"SidebarMenuBadge",
|
|
221
163
|
"Skeleton",
|
|
222
164
|
"Slider",
|
|
223
165
|
"Sonner",
|
|
@@ -358,10 +300,6 @@
|
|
|
358
300
|
"name": "Breadcrumb",
|
|
359
301
|
"score": 30
|
|
360
302
|
},
|
|
361
|
-
{
|
|
362
|
-
"name": "Confirmer",
|
|
363
|
-
"score": 30
|
|
364
|
-
},
|
|
365
303
|
{
|
|
366
304
|
"name": "Stepper",
|
|
367
305
|
"score": 30
|
|
@@ -375,12 +313,12 @@
|
|
|
375
313
|
"score": 40
|
|
376
314
|
},
|
|
377
315
|
{
|
|
378
|
-
"name": "
|
|
316
|
+
"name": "Toggle",
|
|
379
317
|
"score": 40
|
|
380
318
|
},
|
|
381
319
|
{
|
|
382
|
-
"name": "
|
|
383
|
-
"score":
|
|
320
|
+
"name": "Confirmer",
|
|
321
|
+
"score": 45
|
|
384
322
|
},
|
|
385
323
|
{
|
|
386
324
|
"name": "GanttChart",
|
|
@@ -412,16 +350,13 @@
|
|
|
412
350
|
"repeatedClassNames": [
|
|
413
351
|
{
|
|
414
352
|
"className": "flex items-center gap-2",
|
|
415
|
-
"occurrences":
|
|
353
|
+
"occurrences": 36,
|
|
416
354
|
"files": [
|
|
417
355
|
"src/components/stories/app-checkbox.stories.tsx",
|
|
418
|
-
"src/components/stories/app-data-grid-completa.stories.tsx",
|
|
419
|
-
"src/components/stories/app-data-grid-confronto.stories.tsx",
|
|
420
356
|
"src/components/stories/app-dialog.stories.tsx",
|
|
421
357
|
"src/components/stories/app-radio-group.stories.tsx",
|
|
422
358
|
"src/components/stories/app-select.stories.tsx",
|
|
423
359
|
"src/components/stories/app-tooltip.stories.tsx",
|
|
424
|
-
"src/components/stories/AppDataGrid.mockup.stories.tsx",
|
|
425
360
|
"src/components/stories/badge.stories.tsx",
|
|
426
361
|
"src/components/stories/button.stories.tsx",
|
|
427
362
|
"src/components/stories/data-table-docs.stories.tsx",
|
|
@@ -510,36 +445,6 @@
|
|
|
510
445
|
"src/components/stories/switch.stories.tsx"
|
|
511
446
|
]
|
|
512
447
|
},
|
|
513
|
-
{
|
|
514
|
-
"className": "text-sm font-semibold",
|
|
515
|
-
"occurrences": 14,
|
|
516
|
-
"files": [
|
|
517
|
-
"src/components/stories/app-bottom-nav.stories.tsx",
|
|
518
|
-
"src/components/stories/app-data-grid-confronto.stories.tsx",
|
|
519
|
-
"src/components/stories/AppDataGrid.mockup.stories.tsx",
|
|
520
|
-
"src/components/stories/collapsible.stories.tsx",
|
|
521
|
-
"src/components/stories/data-table-utils-example.stories.tsx",
|
|
522
|
-
"src/components/stories/truncated-cell.stories.tsx",
|
|
523
|
-
"src/components/ui/weekly-calendar/appointment-card.tsx"
|
|
524
|
-
]
|
|
525
|
-
},
|
|
526
|
-
{
|
|
527
|
-
"className": "text-d-muted-foreground",
|
|
528
|
-
"occurrences": 14,
|
|
529
|
-
"files": [
|
|
530
|
-
"src/components/stories/app-data-grid-completa.stories.tsx",
|
|
531
|
-
"src/components/stories/app-data-grid-preset.stories.tsx",
|
|
532
|
-
"src/components/stories/app-dialog.stories.tsx",
|
|
533
|
-
"src/components/stories/app-time-picker.stories.tsx",
|
|
534
|
-
"src/components/stories/AppDataGrid.mockup.stories.tsx",
|
|
535
|
-
"src/components/ui/app-data-grid/parts/grid-toolbar-slots.tsx",
|
|
536
|
-
"src/components/ui/app-form.tsx",
|
|
537
|
-
"src/components/ui/app-multiple-select-dropdown.tsx",
|
|
538
|
-
"src/components/ui/app-select.tsx",
|
|
539
|
-
"src/components/ui/date-picker.tsx",
|
|
540
|
-
"src/components/ui/weekly-calendar/calendar-header.tsx"
|
|
541
|
-
]
|
|
542
|
-
},
|
|
543
448
|
{
|
|
544
449
|
"className": "border-d-border bg-d-muted rounded-lg border p-4",
|
|
545
450
|
"occurrences": 14,
|
|
@@ -562,21 +467,6 @@
|
|
|
562
467
|
"src/components/stories/sidebar.stories.tsx"
|
|
563
468
|
]
|
|
564
469
|
},
|
|
565
|
-
{
|
|
566
|
-
"className": "text-d-muted-foreground text-xs",
|
|
567
|
-
"occurrences": 11,
|
|
568
|
-
"files": [
|
|
569
|
-
"src/components/editor/plugins/mention-plugin.tsx",
|
|
570
|
-
"src/components/stories/app-card.stories.tsx",
|
|
571
|
-
"src/components/stories/AppDataGrid.mockup.stories.tsx",
|
|
572
|
-
"src/components/stories/button.stories.tsx",
|
|
573
|
-
"src/components/stories/input.stories.tsx",
|
|
574
|
-
"src/components/ui/app-data-grid/parts/grid-filter-editor.tsx",
|
|
575
|
-
"src/components/ui/tables/data-cross-table/cell-editor-dialog.tsx",
|
|
576
|
-
"src/components/ui/tables/data-cross-table/data-cross-table.tsx",
|
|
577
|
-
"src/components/ui/tables/data-cross-table/editable-input.tsx"
|
|
578
|
-
]
|
|
579
|
-
},
|
|
580
470
|
{
|
|
581
471
|
"className": "flex w-[550px] flex-col gap-6",
|
|
582
472
|
"occurrences": 10,
|
|
@@ -585,14 +475,6 @@
|
|
|
585
475
|
"src/components/stories/app-radio-group.stories.tsx"
|
|
586
476
|
]
|
|
587
477
|
},
|
|
588
|
-
{
|
|
589
|
-
"className": "text-d-foreground text-xs",
|
|
590
|
-
"occurrences": 9,
|
|
591
|
-
"files": [
|
|
592
|
-
"src/components/stories/AppDataGrid.mockup.stories.tsx",
|
|
593
|
-
"src/components/ui/app-select.tsx"
|
|
594
|
-
]
|
|
595
|
-
},
|
|
596
478
|
{
|
|
597
479
|
"className": "text-d-muted-foreground max-w-prose text-sm",
|
|
598
480
|
"occurrences": 9,
|
|
@@ -602,31 +484,33 @@
|
|
|
602
484
|
]
|
|
603
485
|
},
|
|
604
486
|
{
|
|
605
|
-
"className": "
|
|
487
|
+
"className": "flex flex-col items-center gap-4",
|
|
606
488
|
"occurrences": 9,
|
|
607
489
|
"files": [
|
|
608
|
-
"src/components/stories/
|
|
490
|
+
"src/components/stories/app-card.stories.tsx",
|
|
491
|
+
"src/components/stories/confirmer.stories.tsx",
|
|
492
|
+
"src/components/stories/input-selector.stories.tsx",
|
|
493
|
+
"src/components/stories/theme-switcher.stories.tsx"
|
|
609
494
|
]
|
|
610
495
|
},
|
|
611
496
|
{
|
|
612
|
-
"className": "
|
|
613
|
-
"occurrences":
|
|
497
|
+
"className": "border-d-border mt-2 rounded-md border p-4",
|
|
498
|
+
"occurrences": 9,
|
|
614
499
|
"files": [
|
|
615
|
-
"src/components/stories/
|
|
616
|
-
"src/components/stories/app-kanban.stories.tsx",
|
|
617
|
-
"src/components/stories/AppDataGrid.mockup.stories.tsx",
|
|
618
|
-
"src/components/stories/changelog.stories.tsx",
|
|
619
|
-
"src/components/stories/playground.stories.tsx"
|
|
500
|
+
"src/components/stories/tabs.stories.tsx"
|
|
620
501
|
]
|
|
621
502
|
},
|
|
622
503
|
{
|
|
623
|
-
"className": "
|
|
504
|
+
"className": "text-d-muted-foreground text-xs",
|
|
624
505
|
"occurrences": 8,
|
|
625
506
|
"files": [
|
|
507
|
+
"src/components/editor/plugins/mention-plugin.tsx",
|
|
626
508
|
"src/components/stories/app-card.stories.tsx",
|
|
627
|
-
"src/components/stories/
|
|
628
|
-
"src/components/stories/input
|
|
629
|
-
"src/components/
|
|
509
|
+
"src/components/stories/button.stories.tsx",
|
|
510
|
+
"src/components/stories/input.stories.tsx",
|
|
511
|
+
"src/components/ui/tables/data-cross-table/cell-editor-dialog.tsx",
|
|
512
|
+
"src/components/ui/tables/data-cross-table/data-cross-table.tsx",
|
|
513
|
+
"src/components/ui/tables/data-cross-table/editable-input.tsx"
|
|
630
514
|
]
|
|
631
515
|
},
|
|
632
516
|
{
|
|
@@ -653,42 +537,78 @@
|
|
|
653
537
|
]
|
|
654
538
|
},
|
|
655
539
|
{
|
|
656
|
-
"className": "
|
|
540
|
+
"className": "text-d-muted-foreground",
|
|
657
541
|
"occurrences": 7,
|
|
658
542
|
"files": [
|
|
659
|
-
"src/components/
|
|
660
|
-
"src/components/stories/app-
|
|
661
|
-
"src/components/
|
|
662
|
-
"src/components/ui/app-
|
|
663
|
-
"src/components/ui/app-
|
|
664
|
-
"src/components/ui/
|
|
543
|
+
"src/components/stories/app-dialog.stories.tsx",
|
|
544
|
+
"src/components/stories/app-time-picker.stories.tsx",
|
|
545
|
+
"src/components/ui/app-form.tsx",
|
|
546
|
+
"src/components/ui/app-multiple-select-dropdown.tsx",
|
|
547
|
+
"src/components/ui/app-select.tsx",
|
|
548
|
+
"src/components/ui/date-picker.tsx",
|
|
549
|
+
"src/components/ui/weekly-calendar/calendar-header.tsx"
|
|
665
550
|
]
|
|
666
551
|
},
|
|
667
552
|
{
|
|
668
|
-
"className": "
|
|
553
|
+
"className": "bg-muted/50 rounded p-4 text-sm",
|
|
669
554
|
"occurrences": 7,
|
|
670
555
|
"files": [
|
|
671
|
-
"src/components/stories/
|
|
672
|
-
"src/components/ui/app-select.tsx",
|
|
673
|
-
"src/components/ui/app-sidebar.tsx"
|
|
556
|
+
"src/components/stories/app-select.stories.tsx"
|
|
674
557
|
]
|
|
675
558
|
},
|
|
676
559
|
{
|
|
677
|
-
"className": "flex
|
|
560
|
+
"className": "flex-1 space-y-3 overflow-auto p-4",
|
|
678
561
|
"occurrences": 7,
|
|
679
562
|
"files": [
|
|
680
|
-
"src/components/stories/app-
|
|
681
|
-
"src/components/stories/app-data-grid-filtri-custom.stories.tsx",
|
|
682
|
-
"src/components/stories/AppDataGrid.mockup.stories.tsx",
|
|
683
|
-
"src/components/stories/file-preview.stories.tsx",
|
|
684
|
-
"src/components/stories/toaster.stories.tsx"
|
|
563
|
+
"src/components/stories/app-sidebar.stories.tsx"
|
|
685
564
|
]
|
|
686
565
|
},
|
|
687
566
|
{
|
|
688
|
-
"className": "
|
|
567
|
+
"className": "border-d-border border px-3 py-1 text-center text-sm font-light",
|
|
689
568
|
"occurrences": 7,
|
|
690
569
|
"files": [
|
|
691
|
-
"src/components/stories/
|
|
570
|
+
"src/components/stories/badge.stories.tsx",
|
|
571
|
+
"src/components/stories/button.stories.tsx"
|
|
572
|
+
]
|
|
573
|
+
},
|
|
574
|
+
{
|
|
575
|
+
"className": "flex flex-col items-center gap-2",
|
|
576
|
+
"occurrences": 7,
|
|
577
|
+
"files": [
|
|
578
|
+
"src/components/stories/icon.stories.tsx",
|
|
579
|
+
"src/components/stories/spinner.stories.tsx"
|
|
580
|
+
]
|
|
581
|
+
},
|
|
582
|
+
{
|
|
583
|
+
"className": "flex items-center gap-1 font-normal",
|
|
584
|
+
"occurrences": 6,
|
|
585
|
+
"files": [
|
|
586
|
+
"src/components/editor/plugins/toolbar/block-format/format-bulleted-list.tsx",
|
|
587
|
+
"src/components/editor/plugins/toolbar/block-format/format-check-list.tsx",
|
|
588
|
+
"src/components/editor/plugins/toolbar/block-format/format-heading.tsx",
|
|
589
|
+
"src/components/editor/plugins/toolbar/block-format/format-numbered-list.tsx",
|
|
590
|
+
"src/components/editor/plugins/toolbar/block-format/format-paragraph.tsx",
|
|
591
|
+
"src/components/editor/plugins/toolbar/block-format/format-quote.tsx"
|
|
592
|
+
]
|
|
593
|
+
},
|
|
594
|
+
{
|
|
595
|
+
"className": "text-sm font-semibold",
|
|
596
|
+
"occurrences": 6,
|
|
597
|
+
"files": [
|
|
598
|
+
"src/components/stories/app-bottom-nav.stories.tsx",
|
|
599
|
+
"src/components/stories/collapsible.stories.tsx",
|
|
600
|
+
"src/components/stories/data-table-utils-example.stories.tsx",
|
|
601
|
+
"src/components/stories/truncated-cell.stories.tsx",
|
|
602
|
+
"src/components/ui/weekly-calendar/appointment-card.tsx"
|
|
603
|
+
]
|
|
604
|
+
},
|
|
605
|
+
{
|
|
606
|
+
"className": "text-lg font-semibold",
|
|
607
|
+
"occurrences": 6,
|
|
608
|
+
"files": [
|
|
609
|
+
"src/components/stories/app-kanban.stories.tsx",
|
|
610
|
+
"src/components/stories/changelog.stories.tsx",
|
|
611
|
+
"src/components/stories/playground.stories.tsx"
|
|
692
612
|
]
|
|
693
613
|
}
|
|
694
614
|
]
|
|
@@ -10,24 +10,24 @@ Enhanced card component built on top of the base Card component. Provides a simp
|
|
|
10
10
|
|
|
11
11
|
### AppCardProps
|
|
12
12
|
|
|
13
|
-
| Prop | Type
|
|
14
|
-
| ------------------ |
|
|
15
|
-
| `title` | `string \| React.ReactNode`
|
|
16
|
-
| `description` | `string \| React.ReactNode`
|
|
17
|
-
| `header` | `React.ReactNode`
|
|
18
|
-
| `body` | `React.ReactNode`
|
|
19
|
-
| `children` | `React.ReactNode`
|
|
20
|
-
| `actions` | `React.ReactNode`
|
|
21
|
-
| `footer` | `React.ReactNode`
|
|
22
|
-
| `variant` | `AppCardVariant`
|
|
23
|
-
| `size` | `"sm" \| "default" \| "lg" \| "none"`
|
|
24
|
-
| `isLoading` | `boolean`
|
|
25
|
-
| `showHeaderBorder` | `boolean`
|
|
26
|
-
| `showFooterBorder` | `boolean`
|
|
27
|
-
| `className` | `string`
|
|
28
|
-
| `headerClassName` | `string`
|
|
29
|
-
| `bodyClassName` | `string`
|
|
30
|
-
| `footerClassName` | `string`
|
|
13
|
+
| Prop | Type | Default | Description |
|
|
14
|
+
| ------------------ | ------------------------------------------------------------------------------------------------------ | ----------- | ------------------------------------------------------------------- |
|
|
15
|
+
| `title` | `string \| React.ReactNode` | `undefined` | Card title displayed in the header. |
|
|
16
|
+
| `description` | `string \| React.ReactNode` | `undefined` | Card description displayed below the title. |
|
|
17
|
+
| `header` | `React.ReactNode` | `undefined` | Custom header content; overrides `title` and `description`. |
|
|
18
|
+
| `body` | `React.ReactNode` | `undefined` | Main content rendered inside CardContent. |
|
|
19
|
+
| `children` | `React.ReactNode` | `undefined` | Fallback body content when `body` is not provided. |
|
|
20
|
+
| `actions` | `React.ReactNode` | `undefined` | Right-aligned action elements inside the header. |
|
|
21
|
+
| `footer` | `React.ReactNode` | `undefined` | Footer content (typically action buttons). |
|
|
22
|
+
| `variant` | `AppCardVariant` | `"default"` | Visual variant of the card (see table below). |
|
|
23
|
+
| `size` | `"sm" \| "default" \| "lg" \| "none"` | `undefined` | Controls internal padding via the base Card component. |
|
|
24
|
+
| `isLoading` | `boolean` | `false` | When true, renders skeleton placeholders instead of content. |
|
|
25
|
+
| `showHeaderBorder` | `boolean` | `false` | Displays a border between the header and body sections. |
|
|
26
|
+
| `showFooterBorder` | `boolean` | `false` | Displays a border between the body and footer sections. |
|
|
27
|
+
| `className` | `string` | `undefined` | Additional classes for the card container. |
|
|
28
|
+
| `headerClassName` | `string` | `undefined` | Additional classes for the header section. |
|
|
29
|
+
| `bodyClassName` | `string` | `undefined` | Additional classes for the body section. |
|
|
30
|
+
| `footerClassName` | `string` | `undefined` | Additional classes for the footer section. |
|
|
31
31
|
|
|
32
32
|
### Variant Reference
|
|
33
33
|
|
|
@@ -203,17 +203,13 @@ export function NestedCards() {
|
|
|
203
203
|
<div className="flex flex-col gap-3">
|
|
204
204
|
<AppCard
|
|
205
205
|
title="Nested Item A"
|
|
206
|
-
body={
|
|
207
|
-
<p className="text-sm">Flat cards have no border or shadow.</p>
|
|
208
|
-
}
|
|
206
|
+
body={<p className="text-sm">Flat cards have no border or shadow.</p>}
|
|
209
207
|
variant="flat"
|
|
210
208
|
size="sm"
|
|
211
209
|
/>
|
|
212
210
|
<AppCard
|
|
213
211
|
title="Nested Item B"
|
|
214
|
-
body={
|
|
215
|
-
<p className="text-sm">Good for secondary content regions.</p>
|
|
216
|
-
}
|
|
212
|
+
body={<p className="text-sm">Good for secondary content regions.</p>}
|
|
217
213
|
variant="flat"
|
|
218
214
|
size="sm"
|
|
219
215
|
/>
|
|
@@ -232,7 +228,7 @@ import { AppCard } from "laif-ds";
|
|
|
232
228
|
|
|
233
229
|
export function SizeVariants() {
|
|
234
230
|
return (
|
|
235
|
-
<div className="flex
|
|
231
|
+
<div className="flex flex-col gap-6 w-[400px]">
|
|
236
232
|
<AppCard
|
|
237
233
|
size="sm"
|
|
238
234
|
title="Size: Small"
|
|
@@ -8,18 +8,18 @@ Rich text editor powered by Lexical with optional Markdown sync. Supports config
|
|
|
8
8
|
|
|
9
9
|
## Props
|
|
10
10
|
|
|
11
|
-
| Prop | Type
|
|
12
|
-
| ---------------- |
|
|
13
|
-
| `defaultValue` | `string`
|
|
14
|
-
| `onValueChange` | `(markdown: string, meta: { mentions: MentionItem[] }) => void`
|
|
15
|
-
| `onMarkdownEdit` | `(markdown: string) => void`
|
|
16
|
-
| `plugins` | `("clear" \| "counter")[]`
|
|
17
|
-
| `toolbars` | `("block-format" \| "font-format" \| "history")[]`
|
|
18
|
-
| `placeholder` | `string`
|
|
19
|
-
| `onlyMarkdown` | `boolean`
|
|
20
|
-
| `className` | `string`
|
|
21
|
-
| `mentions`
|
|
22
|
-
| `mentionTrigger`
|
|
11
|
+
| Prop | Type | Default | Description |
|
|
12
|
+
| ---------------- | ---------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ---------------------- |
|
|
13
|
+
| `defaultValue` | `string` | `undefined` | Initial content. Interpreted as Markdown when `onlyMarkdown=true`, plain text otherwise. |
|
|
14
|
+
| `onValueChange` | `(markdown: string, meta: { mentions: MentionItem[] }) => void` | `undefined` | Fires on every edit with the current Markdown and a metadata object. `meta.mentions` is the deduped (by `id`) list of mentions in the text (empty when mentions are disabled). Takes precedence over `onMarkdownEdit`. |
|
|
15
|
+
| `onMarkdownEdit` | `(markdown: string) => void` | `undefined` | **Deprecated** — use `onValueChange`. Still honored as a fallback when `onValueChange` is not provided, but never receives mention metadata. |
|
|
16
|
+
| `plugins` | `("clear" \| "counter")[]` | `[]` | Enable optional plugins: clear buttons, character counter. |
|
|
17
|
+
| `toolbars` | `("block-format" \| "font-format" \| "history")[]` | `[]` | Enable toolbar groups. |
|
|
18
|
+
| `placeholder` | `string` | `"Start typing..."` | Placeholder for empty editor. |
|
|
19
|
+
| `onlyMarkdown` | `boolean` | `true` | Treat `defaultValue` as Markdown and sync editor to Markdown. If `false`, `defaultValue` is plain text. |
|
|
20
|
+
| `className` | `string` | `"overflow-hidden rounded-lg border border-d-border"` | Extra classes for the content editable. |
|
|
21
|
+
| `mentions` | `MentionItem[] \| (() => MentionItem[] \| Promise<MentionItem[]>)` | `undefined` | Enables @mention support when provided. Either a ready array (filtered client-side) or a **loader** called once on first menu open (no preload on mount). When omitted, no mention node/plugin/transformer is registered and output is identical to a mention-less editor. |
|
|
22
|
+
| `mentionTrigger` | `string` | `"@"` | Single character that opens the mention typeahead menu. |
|
|
23
23
|
|
|
24
24
|
### MentionItem
|
|
25
25
|
|
|
@@ -161,12 +161,7 @@ import { AppEditor, type MentionItem } from "laif-ds";
|
|
|
161
161
|
|
|
162
162
|
const people: MentionItem[] = [
|
|
163
163
|
{ id: 1, label: "Alice Rossi", value: "alice@laif.it", sublabel: "Product" },
|
|
164
|
-
{
|
|
165
|
-
id: 2,
|
|
166
|
-
label: "Bob Bianchi",
|
|
167
|
-
value: "bob@laif.it",
|
|
168
|
-
sublabel: "Engineering",
|
|
169
|
-
},
|
|
164
|
+
{ id: 2, label: "Bob Bianchi", value: "bob@laif.it", sublabel: "Engineering" },
|
|
170
165
|
];
|
|
171
166
|
|
|
172
167
|
export function EditorWithMentions() {
|
|
@@ -49,9 +49,6 @@ The component uses discriminated union types based on the `multiple` prop.
|
|
|
49
49
|
| `onClear` | `() => void` | `undefined` | Callback fired when clear button is clicked |
|
|
50
50
|
| `id` | `string` | `undefined` | HTML id attribute for the trigger (useful for testing) |
|
|
51
51
|
| `data-testid` | `string` | `undefined` | Test identifier attribute for E2E testing (e.g. Playwright) |
|
|
52
|
-
| `aria-label` | `string` | `undefined` | Accessible name forwarded to the trigger. Applied ONLY when `label` is absent |
|
|
53
|
-
| `aria-labelledby` | `string` | `undefined` | Id(s) of external element(s) naming the trigger. Applied ONLY when `label` is absent |
|
|
54
|
-
| `portalContainer` | `HTMLElement \| null` | `undefined` (`<body>`) | Element the options popover portals into. Use it when the select lives inside a container with its own stacking context (e.g. a fixed full-screen grid), where a `<body>` portal would open behind it |
|
|
55
52
|
|
|
56
53
|
### Single Select Props
|
|
57
54
|
|
|
@@ -501,54 +498,6 @@ export function CustomRenderSelect() {
|
|
|
501
498
|
|
|
502
499
|
---
|
|
503
500
|
|
|
504
|
-
## Accessibility and layer behaviour
|
|
505
|
-
|
|
506
|
-
### Accessible name
|
|
507
|
-
|
|
508
|
-
The trigger is a `role="combobox"`. How it is named depends on whether `label` is set:
|
|
509
|
-
|
|
510
|
-
- **with `label`**: `aria-labelledby` points at the label plus the current value (`"<labelId> <valueId>"`). A `aria-label` / `aria-labelledby` passed by the consumer is ignored in this branch on purpose — a second name next to a visible label is a WCAG 2.5.3 risk.
|
|
511
|
-
- **without `label`**: the trigger falls back to whatever the consumer passes — `aria-labelledby` first, then `aria-label` — and to NOTHING if neither is passed. It no longer falls back to the value id, which made the accessible name change every time the user picked an option (WCAG 4.1.2).
|
|
512
|
-
|
|
513
|
-
Story: `SenzaEtichettaNomeAccessibile`.
|
|
514
|
-
|
|
515
|
-
### Keyboard
|
|
516
|
-
|
|
517
|
-
On the closed trigger: `Enter`, `Space`, `ArrowDown`, `ArrowUp`, `Home`, `End` open the list. With the list open: `ArrowDown` / `ArrowUp` / `Home` / `End` move the active option (disabled options are skipped), `Enter` commits the active option, `Space` closes, `Escape` dismisses, `Tab` moves to the next element in the document AND dismisses the list. `aria-activedescendant` tracks the active option while open; `aria-controls` points at the `[cmdk-list]` node that carries `role="listbox"`.
|
|
518
|
-
|
|
519
|
-
Stories: `AccessibilitaTastiera`, `TastieraElencoAperto`, `CongedoDaTastieraEClickFuori`.
|
|
520
|
-
|
|
521
|
-
### The popover is NOT modal (behaviour change) — measured
|
|
522
|
-
|
|
523
|
-
The listbox is rendered inside a Radix `Popover` with `modal={false}`.
|
|
524
|
-
|
|
525
|
-
**Why.** With `modal`, Radix renders `PopoverContentModal`, which calls `hideOthers()` from `aria-hidden`. Measured: with the list open, the trigger ended up inside an `aria-hidden="true"` subtree while focus was still on it (`onOpenAutoFocus` is prevented for the mobile-keyboard reason documented below). So exactly while `aria-expanded="true"`, no screen reader could read the combobox, its state, or its `aria-controls`. A select-only combobox is not modal per APG.
|
|
526
|
-
|
|
527
|
-
**What else changed.** The modal branch carries four behaviours, and dropping it dropped all four: `hideOthers` (the one we wanted gone), `RemoveScroll`, `disableOutsidePointerEvents: true` and `trapFocus`. The table below is the measured delta — obtained by flipping `modal` in `app-select.tsx` and re-running the two stories in the browser test runner.
|
|
528
|
-
|
|
529
|
-
| Situation | with `modal` (before) | with `modal={false}` (now) |
|
|
530
|
-
| --- | --- | --- |
|
|
531
|
-
| Trigger inside an `aria-hidden` subtree while the list is open | yes | no |
|
|
532
|
-
| `AppSelect` nested in another `Popover`, ONE click on a target outside both | the select closes, the surrounding Popover stays open (`aria-expanded="true"`), the target's `onClick` does not fire (counter `0`) | both close (`"false"` / `"false"`) and the target's `onClick` fires (counter `1`) |
|
|
533
|
-
| What a real click at the outside target's centre hits (`document.elementFromPoint`) | the `HTML` element — the target's computed `pointer-events` is `none` | the target itself — computed `pointer-events` is `auto` |
|
|
534
|
-
| Page scroll with the list open | body carries `data-scroll-locked="1"`, computed body `overflow: hidden`, a `wheel` event is `defaultPrevented` | no lock attribute, `overflow: visible`, the `wheel` event is not prevented — the page scrolls under the open list |
|
|
535
|
-
| `Tab` from the open trigger | focus reaches the next element, but the list stays OPEN (the modal branch prevents `onFocusOutside`) | focus reaches the next element and the list dismisses |
|
|
536
|
-
|
|
537
|
-
Two notes on the measurement itself, so nobody re-derives them wrongly:
|
|
538
|
-
|
|
539
|
-
- assigning `scrollTop` from script is NOT a probe for the scroll lock: it moved the page in both branches (200 → 200). `RemoveScroll` cancels the scroll *event* and hides the scrollbar, it does not disable the API.
|
|
540
|
-
- `trapFocus` is inert in this component: `onOpenAutoFocus` is prevented, so focus never enters the portal and Radix's `FocusScope` has nothing to pull back. The `Tab` difference in the table comes from `onFocusOutside`, not from the focus trap.
|
|
541
|
-
|
|
542
|
-
Stories: `DentroUnPopoverAnnidato`, `PaginaScorreEFuocoNonIntrappolato`, `DentroUnDialogModale`.
|
|
543
|
-
|
|
544
|
-
### Residual limits
|
|
545
|
-
|
|
546
|
-
- **A click outside now also activates what is under the pointer.** The modal branch gave a free "the first outside click only closes the menu" guard; it is gone. In a nested layout — an `AppSelect` inside another `Popover`, the shape used by the DataTable sorting panel — one click outside now dismisses BOTH layers and fires the underlying handler. If a consumer needs the old guard, it has to be added explicitly at that call site (e.g. `onInteractOutside` on the surrounding layer); `AppSelect` will not restore it, because bringing `modal` back would bring `hideOthers` back with it.
|
|
547
|
-
- **The page scrolls under the open list.** The list stays anchored to the trigger (Radix repositions it), but the content behind it moves.
|
|
548
|
-
- Inside a modal `Dialog` the non-modal popover still works: it opens after the dialog, so its dismissable layer sits higher in the stack and receives `pointer-events: auto` (measured by `DentroUnDialogModale`, which picks an option with the pointer).
|
|
549
|
-
|
|
550
|
-
---
|
|
551
|
-
|
|
552
501
|
## Notes
|
|
553
502
|
|
|
554
503
|
- **React 19 Compatible**: Properly handles JSX labels without ref warnings
|
|
@@ -56,6 +56,9 @@ declare function safeConfirm(
|
|
|
56
56
|
- **Resolve/Reject**: `confirm()` resolves on action click, rejects on cancel or close.
|
|
57
57
|
- **Destructive mode**: Adds an alert icon and uses destructive button variant.
|
|
58
58
|
- **Custom buttons**: Pass `ActionProps` and `CancelProps` to customize.
|
|
59
|
+
- **Mobile (< 768px)**: the confirm opens as a bottom drawer instead of a centred dialog — no prop needed, `useIsMobile` decides when it opens and the mode is held while it stays open. Buttons are full-width, 44px tall, action on top and Cancel at the bottom; `CancelProps` is applied to that Cancel button.
|
|
60
|
+
- **Dismiss on mobile**: a drag down or Esc cancels (the promise rejects); a tap on the overlay does nothing, as on desktop.
|
|
61
|
+
- **Focus**: the initial focus lands on Cancel in both modes, and the drawer keeps `role="alertdialog"`.
|
|
59
62
|
|
|
60
63
|
---
|
|
61
64
|
|