argent-grid 0.2.0 → 0.3.0

package/src/stories/Advanced.stories.ts

@@ -2,6 +2,14 @@ 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';
+import {
+  departmentValueFormatter,
+  locationValueFormatter,
+  roleValueFormatter,
+  STORY_DEPARTMENTS,
+  STORY_LOCATIONS,
+  STORY_ROLES,
+} from './story-utils';
 
 interface Employee {
   id: number;
@@ -30,9 +38,9 @@ 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'];
+  const departments = STORY_DEPARTMENTS;
+  const roles = STORY_ROLES;
+  const locations = STORY_LOCATIONS;
 
   return Array.from({ length: count }, (_, i) => ({
     id: i + 1,
@@ -50,14 +58,32 @@ export const SideBar: Story = {
     columnDefs: [
       { field: 'id', headerName: 'ID', width: 80, filter: true },
       { field: 'name', headerName: 'Name', width: 200, filter: true },
-      { field: 'department', headerName: 'Department', width: 180, filter: 'set' },
-      { field: 'role', headerName: 'Role', width: 250, filter: true },
+      {
+        field: 'department',
+        headerName: 'Department',
+        width: 180,
+        filter: 'set',
+        valueFormatter: departmentValueFormatter,
+      },
+      {
+        field: 'role',
+        headerName: 'Role',
+        width: 250,
+        filter: true,
+        valueFormatter: roleValueFormatter,
+      },
       { field: 'salary', headerName: 'Salary', width: 120, filter: 'number' },
-      { field: 'location', headerName: 'Location', width: 150, filter: 'set' },
+      {
+        field: 'location',
+        headerName: 'Location',
+        width: 150,
+        filter: 'set',
+        valueFormatter: locationValueFormatter,
+      },
       { field: 'performance', headerName: 'Performance', width: 120, filter: 'number' },
     ],
     rowData: generateStaticData(50),
-    height: '500px',
+    height: 'calc(100vh - 60px)',
     width: '100%',
     theme: themeQuartz,
     gridOptions: {
@@ -96,12 +122,24 @@ export const SideBarDefault: Story = {
     columnDefs: [
       { field: 'id', headerName: 'ID', width: 80, filter: true },
       { field: 'name', headerName: 'Name', width: 200, filter: true },
-      { field: 'department', headerName: 'Department', width: 180, filter: 'set' },
-      { field: 'role', headerName: 'Role', width: 250, filter: true },
+      {
+        field: 'department',
+        headerName: 'Department',
+        width: 180,
+        filter: 'set',
+        valueFormatter: departmentValueFormatter,
+      },
+      {
+        field: 'role',
+        headerName: 'Role',
+        width: 250,
+        filter: true,
+        valueFormatter: roleValueFormatter,
+      },
       { field: 'salary', headerName: 'Salary', width: 120, filter: 'number' },
     ],
     rowData: generateStaticData(50),
-    height: '500px',
+    height: 'calc(100vh - 60px)',
     width: '100%',
     theme: themeQuartz,
     gridOptions: {
@@ -122,13 +160,23 @@ export const RangeSelection: Story = {
     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: 'department',
+        headerName: 'Department',
+        width: 180,
+        valueFormatter: departmentValueFormatter,
+      },
+      { field: 'role', headerName: 'Role', width: 250, valueFormatter: roleValueFormatter },
       { field: 'salary', headerName: 'Salary', width: 120 },
-      { field: 'location', headerName: 'Location', width: 150 },
+      {
+        field: 'location',
+        headerName: 'Location',
+        width: 150,
+        valueFormatter: locationValueFormatter,
+      },
     ],
     rowData: generateStaticData(50),
-    height: '400px',
+    height: 'calc(100vh - 60px)',
     width: '100%',
     theme: themeQuartz,
     gridOptions: {
@@ -157,13 +205,26 @@ export const FullFeatures: Story = {
         filter: 'set',
         sortable: true,
         rowGroup: true,
+        valueFormatter: departmentValueFormatter,
+      },
+      {
+        field: 'role',
+        headerName: 'Role',
+        width: 250,
+        filter: true,
+        valueFormatter: roleValueFormatter,
       },
-      { field: 'role', headerName: 'Role', width: 250, filter: true },
       { field: 'salary', headerName: 'Salary', width: 120, filter: 'number', sortable: true },
-      { field: 'location', headerName: 'Location', width: 150, filter: 'set' },
+      {
+        field: 'location',
+        headerName: 'Location',
+        width: 150,
+        filter: 'set',
+        valueFormatter: locationValueFormatter,
+      },
     ],
     rowData: generateStaticData(100),
-    height: '500px',
+    height: 'calc(100vh - 60px)',
     width: '100%',
     theme: themeQuartz,
     gridOptions: {

package/src/stories/ArgentGrid.stories.ts

@@ -1,6 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 import { moduleMetadata } from '@storybook/angular';
 import { ArgentGridComponent, ArgentGridModule, themeQuartz } from '../public-api';
+import {
+  departmentValueFormatter,
+  locationValueFormatter,
+  roleValueFormatter,
+  STORY_DEPARTMENTS,
+  STORY_LOCATIONS,
+  STORY_ROLES,
+} from './story-utils';
 
 interface Employee {
   id: number;
@@ -35,9 +43,9 @@ 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'];
+  const departments = STORY_DEPARTMENTS;
+  const roles = STORY_ROLES;
+  const locations = STORY_LOCATIONS;
 
   return Array.from({ length: count }, (_, i) => ({
     id: i + 1,
@@ -56,15 +64,25 @@ export const Default: Story = {
     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: 'department',
+        headerName: 'Department',
+        width: 180,
+        valueFormatter: departmentValueFormatter,
+      },
+      { field: 'role', headerName: 'Role', width: 250, valueFormatter: roleValueFormatter },
       { field: 'salary', headerName: 'Salary', width: 120 },
-      { field: 'location', headerName: 'Location', width: 150 },
+      {
+        field: 'location',
+        headerName: 'Location',
+        width: 180,
+        valueFormatter: locationValueFormatter,
+      },
       { field: 'startDate', headerName: 'Start Date', width: 130 },
       { field: 'performance', headerName: 'Performance', width: 120 },
     ],
     rowData: generateStaticData(100),
-    height: '500px',
+    height: 'calc(100vh - 60px)',
     width: '100%',
     theme: themeQuartz,
   },
@@ -82,12 +100,17 @@ export const LargeDataset: Story = {
     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: 'department',
+        headerName: 'Department',
+        width: 180,
+        valueFormatter: departmentValueFormatter,
+      },
+      { field: 'role', headerName: 'Role', width: 250, valueFormatter: roleValueFormatter },
       { field: 'salary', headerName: 'Salary', width: 120 },
     ],
     rowData: generateStaticData(100000),
-    height: '500px',
+    height: 'calc(100vh - 60px)',
     width: '100%',
     theme: themeQuartz,
   },
@@ -106,7 +129,7 @@ export const WithSorting: Story = {
     columnDefs: [
       {
         field: 'id',
-        headerName: 'ID ↕️',
+        headerName: 'ID',
         width: 80,
         sortable: true,
         headerComponentParams: { sortIcon: '↕️' },
@@ -134,7 +157,7 @@ export const WithSorting: Story = {
       },
     ],
     rowData: generateStaticData(50),
-    height: '400px',
+    height: 'calc(100vh - 60px)',
     width: '100%',
     theme: themeQuartz,
   },
@@ -151,20 +174,19 @@ export const WithSorting: Story = {
 export const WithSelection: Story = {
   args: {
     columnDefs: [
+      { field: 'id', headerName: 'ID', width: 80 },
+      { field: 'name', headerName: 'Name', width: 200 },
       {
-        field: 'id',
-        headerName: 'ID ☑️',
-        width: 80,
-        checkboxSelection: true,
-        headerComponentParams: { selectionIcon: '☑️' },
+        field: 'department',
+        headerName: 'Department',
+        width: 180,
+        valueFormatter: departmentValueFormatter,
       },
-      { field: 'name', headerName: 'Name', width: 200 },
-      { field: 'department', headerName: 'Department', width: 180 },
-      { field: 'role', headerName: 'Role', width: 250 },
+      { field: 'role', headerName: 'Role', width: 250, valueFormatter: roleValueFormatter },
     ],
     rowData: generateStaticData(50),
     rowSelection: 'multiple',
-    height: '400px',
+    height: 'calc(100vh - 60px)',
     width: '100%',
     theme: themeQuartz,
   },
@@ -172,7 +194,7 @@ export const WithSelection: Story = {
     docs: {
       description: {
         story:
-          '**Row selection with checkboxes**. The first column shows **☑️ checkboxes** in every row. **Click checkboxes** to select/deselect rows. **Header checkbox** selects/deselects all visible rows.',
+          '**Row selection with checkboxes**. Enabling `rowSelection` automatically adds a dedicated checkbox selection column. **Click checkboxes** to select/deselect rows. **Header checkbox** selects/deselects all visible rows.',
       },
     },
   },
@@ -183,7 +205,7 @@ export const WithFiltering: Story = {
     columnDefs: [
       {
         field: 'id',
-        headerName: 'ID 🔢',
+        headerName: 'ID',
         width: 80,
         filter: 'number',
         floatingFilter: true,
@@ -204,6 +226,7 @@ export const WithFiltering: Story = {
         filter: 'set',
         floatingFilter: true,
         headerComponentParams: { filterIcon: '☑️' },
+        valueFormatter: departmentValueFormatter,
       },
       {
         field: 'role',
@@ -212,10 +235,11 @@ export const WithFiltering: Story = {
         filter: 'text',
         floatingFilter: true,
         headerComponentParams: { filterIcon: '🔤' },
+        valueFormatter: roleValueFormatter,
       },
     ],
     rowData: generateStaticData(50),
-    height: '500px',
+    height: 'calc(100vh - 60px)',
     width: '100%',
     theme: themeQuartz,
   },
@@ -236,7 +260,7 @@ export const Empty: Story = {
       { field: 'name', headerName: 'Name', width: 200 },
     ],
     rowData: [],
-    height: '300px',
+    height: 'calc(100vh - 60px)',
     width: '100%',
     theme: themeQuartz,
   },
@@ -258,7 +282,7 @@ export const WithCustomTheme: Story = {
       { field: 'salary', headerName: 'Salary', width: 120 },
     ],
     rowData: generateStaticData(50),
-    height: '400px',
+    height: 'calc(100vh - 60px)',
     width: '100%',
     theme: themeQuartz.withParams({
       accentColor: '#ff5722', // Orange accent

package/src/stories/Benchmark.stories.ts

@@ -18,56 +18,58 @@ const meta: Meta<BenchmarkWrapperComponent> = {
 export default meta;
 type Story = StoryObj<BenchmarkWrapperComponent>;
 
-export const Benchmark10K: Story = {
-  args: {
-    // Default 10K rows
-  },
+export const Benchmark100K: Story = {
+  args: {},
   render: (args) => ({
-    props: args,
-    template: `<app-benchmark-wrapper />`,
+    props: {
+      ...args,
+      rowCount: 100000,
+    } as any,
+    template: `<app-benchmark-wrapper [rowCount]="100000" />`,
   }),
   parameters: {
     docs: {
       description: {
         story:
-          'Benchmark with ~10,000 rows. Click "Run Benchmark" to test selection, grouping, and scroll performance.',
+          'Benchmark with ~100,000 rows. Tests virtual scrolling performance with a large dataset.',
       },
     },
   },
 };
 
-export const Benchmark50K: Story = {
+export const Benchmark500K: Story = {
   args: {},
   render: (args) => ({
     props: {
       ...args,
-      rowCount: 50000,
+      rowCount: 500000,
     } as any,
-    template: `<app-benchmark-wrapper [rowCount]="50000" />`,
+    template: `<app-benchmark-wrapper [rowCount]="500000" />`,
   }),
   parameters: {
     docs: {
       description: {
-        story: 'Benchmark with ~50,000 rows. Stress tests virtual scrolling with large datasets.',
+        story:
+          'Benchmark with ~500,000 rows. Heavy stress test for virtual scrolling and canvas rendering.',
       },
     },
   },
 };
 
-export const Benchmark100K: Story = {
+export const Benchmark1M: Story = {
   args: {},
   render: (args) => ({
     props: {
       ...args,
-      rowCount: 100000,
+      rowCount: 1000000,
     } as any,
-    template: `<app-benchmark-wrapper [rowCount]="100000" />`,
+    template: `<app-benchmark-wrapper [rowCount]="1000000" />`,
   }),
   parameters: {
     docs: {
       description: {
         story:
-          'Benchmark with ~100,000 rows. High-performance stress test. Expect longer initial render but smooth scrolling.',
+          'Benchmark with ~1,000,000 rows. Extreme stress test. Validates canvas renderer at maximum scale.',
       },
     },
   },