argent-grid 0.1.0 → 0.2.0

package/src/stories/Grouping.stories.ts

@@ -0,0 +1,217 @@
+import { BrowserModule } from '@angular/platform-browser';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { ArgentGridComponent, ArgentGridModule, themeQuartz } from '../public-api';
+
+interface Employee {
+  id: number;
+  name: string;
+  department: string;
+  role: string;
+  salary: number;
+  location: string;
+}
+
+const meta: Meta<ArgentGridComponent<Employee>> = {
+  title: 'Features/Grouping',
+  component: ArgentGridComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ArgentGridModule, BrowserModule],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<ArgentGridComponent<Employee>>;
+
+function generateStaticData(count: number): Employee[] {
+  const departments = ['Engineering', 'Sales', 'Marketing', 'HR', 'Finance'];
+  const roles = ['Engineer', 'Manager', 'Director', 'VP', 'Intern'];
+  const locations = ['New York', 'San Francisco', 'London', 'Singapore', 'Remote'];
+
+  return Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    name: `Employee ${i + 1}`,
+    department: departments[i % departments.length],
+    role: roles[i % roles.length],
+    salary: 50000 + i * 1000,
+    location: locations[i % locations.length],
+  }));
+}
+
+export const RowGrouping: Story = {
+  args: {
+    columnDefs: [
+      { field: 'id', headerName: 'ID', width: 80 },
+      { field: 'name', headerName: 'Name', width: 200 },
+      {
+        field: 'department',
+        headerName: 'Department 📁',
+        width: 180,
+        rowGroup: true,
+        headerComponentParams: { groupIcon: '📁' },
+      },
+      { field: 'role', headerName: 'Role', width: 250 },
+      { field: 'salary', headerName: 'Salary', width: 120 },
+      { field: 'location', headerName: 'Location', width: 150 },
+    ],
+    rowData: generateStaticData(100),
+    height: '500px',
+    width: '100%',
+    theme: themeQuartz,
+    gridOptions: {
+      autoGroupColumnDef: {
+        headerName: 'Organization 📁',
+        width: 250,
+        pinned: 'left',
+      },
+      groupDefaultExpanded: 1, // Expand first level by default
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '**Row grouping by Department** column. Grouped columns show a 📁 icon. Click the **▶ expand/collapse arrows** in the group rows to show/hide items. **Drag column headers** to the left panel to group by multiple columns.',
+      },
+    },
+  },
+};
+
+export const MultiLevelGrouping: Story = {
+  args: {
+    columnDefs: [
+      { field: 'id', headerName: 'ID', width: 80 },
+      { field: 'name', headerName: 'Name', width: 200 },
+      {
+        field: 'department',
+        headerName: 'Department 📁',
+        width: 150,
+        rowGroup: true,
+        headerComponentParams: { groupIcon: '📁' },
+      },
+      {
+        field: 'location',
+        headerName: 'Location 📁',
+        width: 150,
+        rowGroup: true,
+        headerComponentParams: { groupIcon: '📁' },
+      },
+      { field: 'role', headerName: 'Role', width: 250 },
+      { field: 'salary', headerName: 'Salary', width: 120 },
+    ],
+    rowData: generateStaticData(100),
+    height: '500px',
+    width: '100%',
+    theme: themeQuartz,
+    gridOptions: {
+      autoGroupColumnDef: {
+        headerName: 'Organization 📁📁',
+        width: 300,
+        pinned: 'left',
+      },
+      groupDefaultExpanded: 2, // Expand first 2 levels by default
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '**Multi-level grouping** by Department AND Location. Each grouped column shows a 📁 icon. Groups are **expanded by default** to show the hierarchy. Click **▶ arrows** to collapse/expand. Notice the nested structure: Department → Location → Employees.',
+      },
+    },
+  },
+};
+
+export const GroupingWithAggregation: Story = {
+  args: {
+    columnDefs: [
+      { field: 'id', headerName: 'ID', width: 80 },
+      { field: 'name', headerName: 'Name', width: 200 },
+      {
+        field: 'department',
+        headerName: 'Department 📁',
+        width: 180,
+        rowGroup: true,
+        headerComponentParams: { groupIcon: '📁' },
+      },
+      { field: 'role', headerName: 'Role', width: 250 },
+      {
+        field: 'salary',
+        headerName: 'Salary 💰',
+        width: 120,
+        aggFunc: 'sum', // Show sum in group rows
+      },
+      { field: 'location', headerName: 'Location', width: 150 },
+    ],
+    rowData: generateStaticData(100),
+    height: '500px',
+    width: '100%',
+    theme: themeQuartz,
+    gridOptions: {
+      autoGroupColumnDef: {
+        headerName: 'Organization 📁',
+        width: 250,
+        pinned: 'left',
+      },
+      groupDefaultExpanded: 1,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '**Grouping with aggregation**. Salary column shows **sum (💰)** for each department group. Look at the group rows to see aggregated values. Supported aggregations: sum, avg, min, max, count.',
+      },
+    },
+  },
+};
+
+export const DragAndDropGrouping: Story = {
+  args: {
+    columnDefs: [
+      { field: 'id', headerName: 'ID', width: 80 },
+      { field: 'name', headerName: 'Name', width: 200 },
+      {
+        field: 'department',
+        headerName: 'Department 📁 (drag me!)',
+        width: 180,
+        rowGroup: false, // Not pre-grouped - user can drag
+        headerComponentParams: { draggable: true },
+      },
+      {
+        field: 'location',
+        headerName: 'Location 📁 (drag me!)',
+        width: 150,
+        rowGroup: false,
+        headerComponentParams: { draggable: true },
+      },
+      { field: 'role', headerName: 'Role', width: 250 },
+      { field: 'salary', headerName: 'Salary', width: 120 },
+    ],
+    rowData: generateStaticData(100),
+    height: '500px',
+    width: '100%',
+    theme: themeQuartz,
+    gridOptions: {
+      rowGroupPanelShow: 'always', // Always show group panel
+      autoGroupColumnDef: {
+        headerName: 'Groups 📁',
+        width: 250,
+        pinned: 'left',
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '**Drag-and-drop grouping**. See the **"Drag me!"** labels? **Drag column headers** (Department, Location) to the **"Groups" panel on the left** to create groups dynamically. Drop columns back to ungroup. Multiple columns can be grouped at once.',
+      },
+    },
+  },
+};

package/src/stories/Theming.stories.ts

@@ -0,0 +1,124 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { ArgentGridComponent, ArgentGridModule, colorSchemeDark, themeQuartz } from '../public-api';
+
+interface Employee {
+  id: number;
+  name: string;
+  department: string;
+  role: string;
+  salary: number;
+  location: string;
+}
+
+const meta: Meta<ArgentGridComponent<Employee>> = {
+  title: 'Features/Theming',
+  component: ArgentGridComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ArgentGridModule, BrowserModule, BrowserAnimationsModule],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<ArgentGridComponent<Employee>>;
+
+function generateStaticData(count: number): Employee[] {
+  const departments = ['Engineering', 'Sales', 'Marketing', 'HR', 'Finance'];
+  const roles = ['Engineer', 'Manager', 'Director', 'VP', 'Intern'];
+  const locations = ['New York', 'San Francisco', 'London', 'Singapore', 'Remote'];
+
+  return Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    name: `Employee ${i + 1}`,
+    department: departments[i % departments.length],
+    role: roles[i % roles.length],
+    salary: 50000 + i * 1000,
+    location: locations[i % locations.length],
+  }));
+}
+
+const columnDefs = [
+  { field: 'id', headerName: 'ID', width: 80 },
+  { field: 'name', headerName: 'Name', width: 200 },
+  { field: 'department', headerName: 'Department', width: 180 },
+  { field: 'role', headerName: 'Role', width: 250 },
+  { field: 'salary', headerName: 'Salary', width: 120 },
+  { field: 'location', headerName: 'Location', width: 150 },
+];
+
+export const LightMode: Story = {
+  args: {
+    columnDefs,
+    rowData: generateStaticData(50),
+    height: '400px',
+    width: '100%',
+    theme: themeQuartz,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default light theme using Quartz theme.',
+      },
+    },
+  },
+};
+
+export const DarkMode: Story = {
+  args: {
+    columnDefs,
+    rowData: generateStaticData(50),
+    height: '400px',
+    width: '100%',
+    theme: themeQuartz.withPart(colorSchemeDark),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dark mode using Quartz theme with dark color scheme.',
+      },
+    },
+  },
+};
+
+export const CompactMode: Story = {
+  args: {
+    columnDefs,
+    rowData: generateStaticData(50),
+    height: '400px',
+    width: '100%',
+    theme: themeQuartz.withParams({ rowHeight: 32, fontSize: 12, spacing: 4 }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact mode with smaller row height and font size.',
+      },
+    },
+  },
+};
+
+export const CompactDarkMode: Story = {
+  args: {
+    columnDefs,
+    rowData: generateStaticData(50),
+    height: '400px',
+    width: '100%',
+    theme: themeQuartz
+      .withParams({ rowHeight: 32, fontSize: 12, spacing: 4 })
+      .withPart(colorSchemeDark),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Combined compact and dark mode for dense data display.',
+      },
+    },
+  },
+};

package/src/stories/benchmark-wrapper.component.ts

@@ -0,0 +1,315 @@
+import { CommonModule } from '@angular/common';
+import { AfterViewInit, Component, Input, OnDestroy, ViewChild } from '@angular/core';
+import { ArgentGridComponent, ArgentGridModule, ColDef, GridApi, themeQuartz } from '../public-api';
+
+interface Employee {
+  id: number;
+  name: string;
+  department: string;
+  role: string;
+  salary: number;
+  location: string;
+}
+
+@Component({
+  selector: 'app-benchmark-wrapper',
+  standalone: true,
+  imports: [CommonModule, ArgentGridModule],
+  template: `
+    <div class="benchmark-container">
+      <div class="controls">
+        <button (click)="runBenchmark()" [disabled]="isRunning">
+          {{ isRunning ? 'Running...' : 'Run Benchmark' }}
+        </button>
+        <button (click)="reloadData()">Reload Data</button>
+        <span class="row-count">{{ rowCount | number }} rows</span>
+      </div>
+
+      <div class="results" *ngIf="results">
+        <div class="result-item">
+          <span class="label">Initial Render:</span>
+          <span class="value">{{ results.initialRender }}ms</span>
+        </div>
+        <div class="result-item">
+          <span class="label">Selection Update:</span>
+          <span class="value">{{ results.selectionUpdateTime }}ms</span>
+        </div>
+        <div class="result-item">
+          <span class="label">Grouping Toggle:</span>
+          <span class="value">{{ results.groupingUpdateTime }}ms</span>
+        </div>
+        <div class="result-item">
+          <span class="label">Avg Scroll Frame:</span>
+          <span class="value">{{ results.scrollFrameAverage }}ms</span>
+        </div>
+        <div class="result-item total">
+          <span class="label">Total:</span>
+          <span class="value">{{ results.totalTime }}ms</span>
+        </div>
+      </div>
+
+      <argent-grid
+        #grid
+        [columnDefs]="columnDefs"
+        [rowData]="rowData"
+        [height]="height"
+        [width]="width"
+        [theme]="theme"
+        [gridOptions]="gridOptions"
+        (gridReady)="onGridReady($event)"
+      />
+    </div>
+  `,
+  styles: [
+    `
+    .benchmark-container {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .controls {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+    .controls button {
+      padding: 8px 16px;
+      background: #3b82f6;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    .controls button:disabled {
+      background: #9ca3af;
+      cursor: not-allowed;
+    }
+    .controls button:hover:not(:disabled) {
+      background: #2563eb;
+    }
+    .row-count {
+      margin-left: auto;
+      font-size: 14px;
+      color: #6b7280;
+    }
+    .results {
+      display: flex;
+      gap: 16px;
+      padding: 12px;
+      background: #f9fafb;
+      border-radius: 4px;
+      flex-wrap: wrap;
+    }
+    .result-item {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .result-item .label {
+      font-size: 12px;
+      color: #6b7280;
+    }
+    .result-item .value {
+      font-size: 18px;
+      font-weight: 600;
+      color: #111827;
+    }
+    .result-item.total .value {
+      color: #059669;
+    }
+  `,
+  ],
+})
+export class BenchmarkWrapperComponent implements AfterViewInit, OnDestroy {
+  @ViewChild('grid') gridComponent!: ArgentGridComponent;
+
+  @Input() rowCount = 10000;
+
+  columnDefs: ColDef<Employee>[] = [
+    { field: 'id', headerName: 'ID', width: 80, sortable: true },
+    { field: 'name', headerName: 'Name', width: 200, sortable: true },
+    { field: 'department', headerName: 'Department', width: 180, sortable: true },
+    { field: 'role', headerName: 'Role', width: 250, filter: true },
+    { field: 'salary', headerName: 'Salary', width: 120, sortable: true, filter: 'number' },
+    { field: 'location', headerName: 'Location', width: 150, filter: true },
+  ];
+
+  rowData: Employee[] = [];
+  height = '500px';
+  width = '100%';
+  theme = themeQuartz;
+
+  gridOptions = {
+    floatingFilter: true,
+    enableRangeSelection: true,
+    defaultColDef: {
+      filter: true,
+      sortable: true,
+      resizable: true,
+    },
+  };
+
+  private gridApi?: GridApi<Employee>;
+  private fpsInterval?: number;
+
+  isRunning = false;
+  results: {
+    initialRender: number;
+    selectionUpdateTime: number;
+    groupingUpdateTime: number;
+    scrollFrameAverage: number;
+    totalTime: number;
+  } | null = null;
+
+  ngAfterViewInit(): void {
+    this.reloadData();
+  }
+
+  generateData(count: number): Employee[] {
+    const departments = [
+      'Engineering',
+      'Sales',
+      'Marketing',
+      'HR',
+      'Finance',
+      'Operations',
+      'Support',
+    ];
+    const roles = ['Software Engineer', 'Manager', 'Director', 'VP', 'Intern', 'Analyst', 'Lead'];
+    const locations = [
+      'New York',
+      'San Francisco',
+      'London',
+      'Singapore',
+      'Remote',
+      'Berlin',
+      'Tokyo',
+    ];
+
+    return Array.from({ length: count }, (_, i) => ({
+      id: i + 1,
+      name: `Employee ${i + 1}`,
+      department: departments[Math.floor(Math.random() * departments.length)],
+      role: roles[Math.floor(Math.random() * roles.length)],
+      salary: Math.floor(Math.random() * 150000) + 50000,
+      location: locations[Math.floor(Math.random() * locations.length)],
+    }));
+  }
+
+  reloadData(): void {
+    this.rowData = this.generateData(this.rowCount);
+    this.results = null;
+  }
+
+  onGridReady(api: GridApi<Employee>): void {
+    this.gridApi = api;
+  }
+
+  runBenchmark(): void {
+    if (!this.gridApi || !this.gridComponent || this.isRunning) return;
+
+    this.isRunning = true;
+    this.results = null;
+
+    const results = {
+      initialRender: 0,
+      selectionUpdateTime: 0,
+      groupingUpdateTime: 0,
+      scrollFrameAverage: 0,
+      totalTime: 0,
+    };
+
+    const startTime = performance.now();
+
+    // 1. Initial render time
+    results.initialRender = this.gridComponent.getLastFrameTime();
+
+    // 2. Selection Update Time
+    const selStart = performance.now();
+    this.gridApi.selectAll();
+    setTimeout(() => {
+      results.selectionUpdateTime = Number((performance.now() - selStart).toFixed(2));
+      this.gridApi?.deselectAll();
+
+      // 3. Grouping Toggle Time
+      const groupStart = performance.now();
+      const colDefs = this.gridApi.getColumnDefs() as ColDef<Employee>[];
+      const deptCol = colDefs.find((c) => c.field === 'department');
+      const wasGrouped = (deptCol as ColDef<Employee>)?.rowGroup;
+
+      const newColDefs = colDefs.map((col: ColDef<Employee>) => {
+        if (col.field === 'department') {
+          return { ...col, rowGroup: !wasGrouped };
+        }
+        return col;
+      });
+
+      this.gridApi.setColumnDefs(newColDefs);
+
+      setTimeout(() => {
+        // Toggle back
+        const revertColDefs = newColDefs.map((col: ColDef<Employee>) => {
+          if (col.field === 'department') {
+            return { ...col, rowGroup: wasGrouped ?? false };
+          }
+          return col;
+        });
+        this.gridApi.setColumnDefs(revertColDefs);
+
+        results.groupingUpdateTime = Number((performance.now() - groupStart).toFixed(2));
+
+        // 4. Scroll Test
+        this.runScrollTest(results, startTime);
+      }, 100);
+    }, 100);
+  }
+
+  private runScrollTest(results: typeof this.results, startTime: number): void {
+    const frameTimes: number[] = [];
+    let scrollCount = 0;
+    const totalScrollFrames = 30;
+    const viewport = this.gridComponent.viewportRef?.nativeElement;
+
+    if (!viewport) {
+      this.finishBenchmark(results, startTime);
+      return;
+    }
+
+    const runScroll = () => {
+      if (scrollCount < totalScrollFrames) {
+        viewport.scrollTop += 100;
+        frameTimes.push(this.gridComponent.getLastFrameTime());
+        scrollCount++;
+        requestAnimationFrame(runScroll);
+      } else {
+        results.scrollFrameAverage = Number(
+          (frameTimes.reduce((a, b) => a + b, 0) / frameTimes.length).toFixed(2)
+        );
+        this.finishBenchmark(results, startTime);
+      }
+    };
+
+    // Reset scroll position first
+    viewport.scrollTop = 0;
+    setTimeout(() => requestAnimationFrame(runScroll), 100);
+  }
+
+  private finishBenchmark(results: typeof this.results, startTime: number): void {
+    results.totalTime = Number((performance.now() - startTime).toFixed(2));
+    this.results = results;
+    this.isRunning = false;
+
+    // Reset scroll
+    const viewport = this.gridComponent.viewportRef?.nativeElement;
+    if (viewport) {
+      viewport.scrollTop = 0;
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.fpsInterval) {
+      cancelAnimationFrame(this.fpsInterval);
+    }
+  }
+}

package/tsconfig.storybook.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist-storybook",
+    "baseUrl": ".",
+    "paths": {}
+  },
+  "include": ["src/**/*.ts", "src/storybook-app/**/*.ts"],
+  "exclude": ["node_modules", "dist", "dist-storybook"]
+}

package/vitest.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from 'vitest/config';
 import fs from 'node:fs';
 import path from 'node:path';
+import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
   plugins: [
@@ -20,7 +20,7 @@ export default defineConfig({
             }
             return match;
           });
-          
+
           newCode = newCode.replace(/styleUrls:\s*\[\s*['"]([^'"]+)['"]\s*\]/g, (match, p1) => {
             const stylePath = path.resolve(path.dirname(id), p1);
             if (fs.existsSync(stylePath)) {
@@ -33,11 +33,11 @@ export default defineConfig({
             }
             return match;
           });
-          
+
           return { code: newCode, map: null };
         }
-      }
-    }
+      },
+    },
   ],
   test: {
     globals: true,
@@ -48,8 +48,8 @@ export default defineConfig({
       provider: 'v8',
       reporter: ['text', 'json', 'html'],
       include: ['src/**/*.ts'],
-      exclude: ['src/**/*.spec.ts', 'src/**/types/**']
+      exclude: ['src/**/*.spec.ts', 'src/**/types/**'],
     },
-    testTimeout: 10000
-  }
-});
+    testTimeout: 10000,
+  },
+});