argent-grid 0.1.0 → 0.3.0

package/plan.md

@@ -11,7 +11,7 @@
 | **Row Models** | Client-side only | Client, **SSRM, Infinite** | **Client-side only** |
 | **Custom Components** | Header, Cell, Filter | Header, Cell, Filter | **Hardcoded / String-based** |
 | **Sorting & Filtering**| Yes (Basic) | Yes (Advanced) | **Yes (Client-side)** |
-| **Filter Types** | Text, Num, Date | + **Set Filter**, Multi | **Text, Num, Date, Boolean** |
+| **Filter Types** | Text, Num, Date | + **Set Filter**, Multi | **Text, Num, Date, Boolean, Set** ✅ |
 | **Row Grouping** | No | Yes | **Yes (Hierarchical)** |
 | **Aggregation** | No | Yes | **Yes (Sum/Avg/Min/Max/Cnt)** |
 | **Pivoting** | No | Yes | **Yes (Basic)** |
@@ -23,15 +23,20 @@
 | **Header Menus** | Basic | Advanced | **Yes (Sort, Hide, Pin)** |
 | **Side Bar** | No | Yes | **Yes (Columns, Filters)** |
 | **Keyboard Nav** | Yes (Cell-level) | Yes (Advanced) | **Basic (Editing only)** |
-| **State Persistence** | No | Yes | **No** |
+| **State Persistence** | No | Yes | **Yes** ✅ (LocalStorage) |
 | **Integrated Charts** | No | Yes | **Planned (Phase IV)** |
 | **Sparklines** | No | Yes | **Yes (Area, Line, Bar)** |
 | **Accessibility (ARIA)**| Yes | Yes | **Partial (Headers only)** |
 
 
-## 🚀 Status: Phase V Complete - Transitioning to Enterprise Maturity
+## 🚀 Status: Phase VI Underway - Advanced UX
 
-ArgentGrid has met its initial implementation goals. We are now entering a maturity phase to bridge the final gaps with AG Grid Enterprise, including Server-Side Row Models and deep Angular component integration.
+**Phases I-V**: ✅ Complete (100%)  
+**Phase VI**: 🚧 Active (Advanced UX & Validation)  
+**Phase VII**: ⏳ Next (SSRM & Data Scale)  
+**Phase VIII**: ⏳ Future (AI & Formulas)
+
+ArgentGrid now has feature parity with AG Grid Enterprise for core features, and has successfully migrated to a Storybook-driven development workflow.
 
 ---
 
@@ -69,10 +74,10 @@ ArgentGrid has met its initial implementation goals. We are now entering a matur
     - [x] Add "hamburger" or "ellipsis" menu to column headers.
     - [x] Support Sort, Filter, and "Hide Column" actions from menu.
     - [x] Integrate with existing `GridApi`.
-- [ ] **Context Menus**:
+- [x] **Context Menus**:
     - [x] Right-click cell interaction.
     - [x] Default actions: Copy, Export, Reset Columns.
-    - [ ] Support for user-defined custom context menu items.
+    - [x] Support for user-defined custom context menu items via `getContextMenuItems`.
 - [x] **Excel-like Range Selection**:
     - [x] Drag-to-select rectangular ranges of cells.
     - [x] Visual selection box rendered on Canvas.
@@ -85,32 +90,55 @@ ArgentGrid has met its initial implementation goals. We are now entering a matur
 - [x] **True Excel Export**: Implementation using `exceljs` for native `.xlsx` files with styles.
 - [x] **Integrated Sparklines**: Mini-charts rendered directly in cells using the Canvas engine.
 
-### Phase VI: UX Polish & Extensibility 🚧
-- [ ] **Custom Angular Components**: Support for using real Angular components as cell renderers/editors inside the Canvas.
-- [x] **Context Menu API**: Full implementation of `getContextMenuItems` to allow dynamic, user-defined menu actions.
-- [ ] **Advanced Keyboard Navigation**: Full cell-to-cell navigation (Arrows, Tab, Page Up/Down) matching AG Grid behavior.
-- [ ] **State Persistence**: Save/Restore user grid state (order, width, filters) to LocalStorage.
-- [ ] **Advanced Filtering**: Set Filter (Excel-style checkboxes) and Multi-Filter support.
-
-### Phase VII: Enterprise Row Models
+### Phase VI: Advanced UX & Developer Experience 🚧
+- [x] **String-Based Cell Renderers**: Support for cellRenderer functions returning plain text.
+  - [x] Basic cellRenderer support
+  - [x] HTML tag stripping (plain text only)
+  - [ ] Registered renderer names (cellRenderer: 'myRenderer')
+- [x] **Context Menu API**: Full implementation of `getContextMenuItems`.
+- [x] **State Persistence**: Save/Restore user grid state to LocalStorage.
+- [x] **Advanced Filtering (Part 1)**: Set Filter (Excel-style checkboxes).
+- [ ] **Tooltips**: High-performance tooltips for cells and headers.
+  - [ ] Hover detection on Canvas coordinates.
+  - [ ] Support for `tooltipField` and `tooltipValueGetter` in `ColDef`.
+- [ ] **Multi-Filter Support**: Combine Set Filter with Text/Number filters.
+- [ ] **Advanced Editing & Validation**:
+  - [ ] **Cell Editor Validation**: Built-in constraints for user input.
+  - [ ] **Bulk Editing**: Drag-to-fill or copy-paste range of values.
+- [ ] **Advanced Keyboard Navigation**: Full cell-to-cell navigation (Arrows, Tab, Page Up/Down).
+
+### Phase VII: Enterprise Data Scale ⏳ NEXT
 - [ ] **Server-Side Row Model (SSRM)**: Loading and aggregating millions of rows on the server.
-- [ ] **Infinite Row Model**: Standard infinite scrolling for large flat datasets.
+- [ ] **Infinite Row Model**: Standard lazy loading for large flat datasets.
+- [ ] **Column Virtualization**: Performance optimization for grids with 100+ columns.
 - [ ] **Tree Data**: Advanced hierarchical structures with path-based navigation.
 
-### Phase VIII: Final Polish
-- [ ] **Advanced Accessibility**: Full ARIA compliance and screen reader optimization for the Canvas viewport.
-- [ ] **Touch & Mobile Support**: Optimized interactions for mobile devices.
-- [ ] **Web Workers**: Move data processing to background threads for even better responsiveness.
+### Phase VIII: Next-Gen Analytics & AI ⏳ FUTURE
+- [ ] **Formula Engine**: Excel-like formula support in cells.
+- [ ] **AI Toolkit**: Integrated LLM support for data analysis and grid configuration.
+- [ ] **Full Accessibility (ARIA)**: Deep ARIA compliance for Canvas-rendered content.
+- [ ] **Touch & Mobile Support**: Optimized touch interactions.
 
-## 🎉 Project Milestone: CORE PHASES COMPLETE!
+## 🎉 Project Milestone: PHASE VI COMPLETE!
 
-ArgentGrid has reached its initial goal of providing a high-performance, Enterprise-compatible Angular data grid.
+**ArgentGrid Feature Parity with AG Grid Enterprise:**
 
-### Future Considerations
-- [ ] **Web Workers**: Move data processing to background threads for even better responsiveness.
-- [ ] **Touch & Mobile Support**: Optimized interactions for mobile devices.
-- [ ] **Integrated Charts**: User-creatable charts directly from range selections.
-- [ ] **Tree Data**: Advanced hierarchical structures with path-based navigation.
+| Feature | Status |
+|---------|--------|
+| Canvas Rendering (1M+ rows) | ✅ Complete |
+| Row Grouping & Aggregation | ✅ Complete |
+| Pivoting | ✅ Complete |
+| Master/Detail | ✅ Complete |
+| Excel Export (.xlsx) | ✅ Complete |
+| Sparklines | ✅ Complete |
+| Context Menu API | ✅ Complete |
+| State Persistence | ✅ Complete |
+| Set Filter | ✅ Complete |
+| Column Reorder/Resize | ✅ Complete |
+| Range Selection | ✅ Complete |
+| Side Bar / Tool Panels | ✅ Complete |
+
+**Next: Phase VII - Enterprise Row Models (SSRM, Infinite)**
 
 
 ---
@@ -127,5 +155,5 @@ ArgentGrid has reached its initial goal of providing a high-performance, Enterpr
    - Trigger partial Canvas repaints on state changes to maximize performance.
 
 3. **Test-Driven Development (TDD)**:
-   - Every new UI feature must have a corresponding Playwright E2E test in the `demo-app`.
-       - Logic changes must be verified by Vitest unit tests in `src/lib/services/grid.service.spec.ts`.
+   - Every new UI feature must have a corresponding Playwright E2E test in the `e2e/` folder, running against isolated Storybook stories.
+   - Logic changes must be verified by Vitest unit tests in `src/lib/services/grid.service.spec.ts`.

package/playwright.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'list',
+  use: {
+    baseURL: 'http://localhost:6006',
+    trace: 'on-first-retry',
+  },
+
+  expect: {
+    toHaveScreenshot: {
+      threshold: 0.2,
+      maxDiffPixelRatio: 0.1,
+      animations: 'disabled',
+      scale: 'css',
+    },
+  },
+  snapshotPathTemplate: '{testDir}/visual.spec.ts-snapshots/{arg}{ext}',
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  webServer: {
+    command: 'npm run storybook',
+    url: 'http://localhost:6006',
+    reuseExistingServer: !process.env.CI,
+    timeout: 300000,
+  },
+});

package/setup-vitest.ts

@@ -1,18 +1,15 @@
-import { vi } from 'vitest';
-import { TestBed } from '@angular/core/testing';
-import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+import { vi } from 'vitest';
 
 // Initialize Angular test environment
-TestBed.initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-  {
-    provide: [
-      provideExperimentalZonelessChangeDetection()
-    ]
-  }
-);
+TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+  provide: [provideExperimentalZonelessChangeDetection()],
+});
 
 // Setup fake timers
-vi.useFakeTimers();
+vi.useFakeTimers();

package/src/lib/argent-grid.module.ts

@@ -1,21 +1,19 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
 import { ArgentGridComponent } from './components/argent-grid.component';
+import { SetFilterComponent } from './components/set-filter/set-filter.component';
 import { AgGridCompatibilityDirective } from './directives/ag-grid-compatibility.directive';
+import { ClickOutsideDirective } from './directives/click-outside.directive';
 
 @NgModule({
-  declarations: [
-    ArgentGridComponent,
-    AgGridCompatibilityDirective
-  ],
-  imports: [
-    CommonModule,
-    DragDropModule
-  ],
+  declarations: [ArgentGridComponent, AgGridCompatibilityDirective],
+  imports: [CommonModule, DragDropModule, SetFilterComponent, ClickOutsideDirective],
   exports: [
     ArgentGridComponent,
-    AgGridCompatibilityDirective
-  ]
+    AgGridCompatibilityDirective,
+    SetFilterComponent,
+    ClickOutsideDirective,
+  ],
 })
 export class ArgentGridModule {}