argent-grid 0.1.0 → 0.3.0

package/src/public-api.ts

@@ -3,20 +3,50 @@
  * A free, high-performance alternative to AG Grid Enterprise
  */
 
-// Core types - AG Grid compatible
-export * from './lib/types/ag-grid-types';
+// Modules
+export { ArgentGridModule } from './lib/argent-grid.module';
 
 // Main grid component
 export { ArgentGridComponent } from './lib/components/argent-grid.component';
-
-// Canvas renderer
-export { CanvasRenderer } from './lib/rendering/canvas-renderer';
+// Components
+export { SetFilterComponent } from './lib/components/set-filter/set-filter.component';
 
 // Directives
 export { AgGridCompatibilityDirective } from './lib/directives/ag-grid-compatibility.directive';
-
+export { ClickOutsideDirective } from './lib/directives/click-outside.directive';
+// Canvas renderer
+export { CanvasRenderer } from './lib/rendering/canvas-renderer';
+// Live Data Optimizations
+export { LiveDataOptimizations } from './lib/rendering/live-data-optimizations';
 // Services
 export { GridService } from './lib/services/grid.service';
-
-// Modules
-export { ArgentGridModule } from './lib/argent-grid.module';
+export {
+  COLOR_SCHEMES,
+  colorSchemeAuto,
+  colorSchemeDark,
+  colorSchemeLight,
+  getColorScheme,
+} from './lib/themes/parts/color-schemes';
+export {
+  getIconSet,
+  getIconSvg,
+  ICON_SETS,
+  iconSetMaterial,
+  iconSetMinimal,
+  iconSetQuartz,
+} from './lib/themes/parts/icon-sets';
+export {
+  applyTheme,
+  applyThemeCSSVariables,
+  convertThemeToGridTheme,
+  createTheme,
+  extendTheme,
+  getThemeCSSVariables,
+  mergeThemes,
+  removeTheme,
+} from './lib/themes/theme-builder';
+export { themeQuartz } from './lib/themes/theme-quartz';
+// Theme System - New Theming API (AG Grid v32.2+ compatible)
+export * from './lib/themes/types';
+// Core types - AG Grid compatible
+export * from './lib/types/ag-grid-types';

package/src/stories/Advanced.stories.ts

@@ -0,0 +1,249 @@
+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;
+  name: string;
+  department: string;
+  role: string;
+  salary: number;
+  location: string;
+  performance: number;
+}
+
+const meta: Meta<ArgentGridComponent<Employee>> = {
+  title: 'Features/Advanced',
+  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 = STORY_DEPARTMENTS;
+  const roles = STORY_ROLES;
+  const locations = STORY_LOCATIONS;
+
+  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],
+    performance: 80,
+  }));
+}
+
+export const SideBar: Story = {
+  args: {
+    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',
+        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',
+        valueFormatter: locationValueFormatter,
+      },
+      { field: 'performance', headerName: 'Performance', width: 120, filter: 'number' },
+    ],
+    rowData: generateStaticData(50),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz,
+    gridOptions: {
+      sideBar: {
+        toolPanels: [
+          {
+            id: 'columns',
+            labelDefault: 'Columns',
+            labelKey: 'columns',
+            iconKey: 'columns',
+            toolPanel: 'agColumnsToolPanel',
+          },
+          {
+            id: 'filters',
+            labelDefault: 'Filters',
+            labelKey: 'filters',
+            iconKey: 'filter',
+            toolPanel: 'agFiltersToolPanel',
+          },
+        ],
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Side bar with Columns and Filters panels. Click the sidebar toggle button in the grid toolbar to show/hide.',
+      },
+    },
+  },
+};
+
+export const SideBarDefault: Story = {
+  args: {
+    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',
+        valueFormatter: departmentValueFormatter,
+      },
+      {
+        field: 'role',
+        headerName: 'Role',
+        width: 250,
+        filter: true,
+        valueFormatter: roleValueFormatter,
+      },
+      { field: 'salary', headerName: 'Salary', width: 120, filter: 'number' },
+    ],
+    rowData: generateStaticData(50),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz,
+    gridOptions: {
+      sideBar: true,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Side bar with default configuration (Columns and Filters tool panels).',
+      },
+    },
+  },
+};
+
+export const RangeSelection: Story = {
+  args: {
+    columnDefs: [
+      { field: 'id', headerName: 'ID', width: 80 },
+      { field: 'name', headerName: 'Name', width: 200 },
+      {
+        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,
+        valueFormatter: locationValueFormatter,
+      },
+    ],
+    rowData: generateStaticData(50),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz,
+    gridOptions: {
+      enableRangeSelection: true,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Enable range selection to select multiple cells by clicking and dragging. Use Ctrl+C to copy selected range.',
+      },
+    },
+  },
+};
+
+export const FullFeatures: Story = {
+  args: {
+    columnDefs: [
+      { field: 'id', headerName: 'ID', width: 80, filter: true, sortable: true },
+      { field: 'name', headerName: 'Name', width: 200, filter: true, sortable: true },
+      {
+        field: 'department',
+        headerName: 'Department',
+        width: 180,
+        filter: 'set',
+        sortable: true,
+        rowGroup: true,
+        valueFormatter: departmentValueFormatter,
+      },
+      {
+        field: 'role',
+        headerName: 'Role',
+        width: 250,
+        filter: true,
+        valueFormatter: roleValueFormatter,
+      },
+      { field: 'salary', headerName: 'Salary', width: 120, filter: 'number', sortable: true },
+      {
+        field: 'location',
+        headerName: 'Location',
+        width: 150,
+        filter: 'set',
+        valueFormatter: locationValueFormatter,
+      },
+    ],
+    rowData: generateStaticData(100),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz,
+    gridOptions: {
+      floatingFilter: true,
+      enableRangeSelection: true,
+      sideBar: true,
+      autoGroupColumnDef: {
+        headerName: 'Organization',
+        width: 250,
+        pinned: 'left',
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Full-featured grid with sorting, filtering, floating filters, range selection, side bar, and row grouping.',
+      },
+    },
+  },
+};

package/src/stories/ArgentGrid.stories.ts

@@ -0,0 +1,301 @@
+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;
+  name: string;
+  department: string;
+  role: string;
+  salary: number;
+  location: string;
+  startDate: string;
+  performance: number;
+}
+
+const meta: Meta<ArgentGridComponent<Employee>> = {
+  title: 'Components/ArgentGrid',
+  component: ArgentGridComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ArgentGridModule],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    height: { control: 'text' },
+    width: { control: 'text' },
+    rowHeight: { control: 'number' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ArgentGridComponent<Employee>>;
+
+function generateStaticData(count: number): Employee[] {
+  const departments = STORY_DEPARTMENTS;
+  const roles = STORY_ROLES;
+  const locations = STORY_LOCATIONS;
+
+  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],
+    startDate: '2020-01-01',
+    performance: 80,
+  }));
+}
+
+export const Default: Story = {
+  args: {
+    columnDefs: [
+      { field: 'id', headerName: 'ID', width: 80 },
+      { field: 'name', headerName: 'Name', width: 200 },
+      {
+        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: 180,
+        valueFormatter: locationValueFormatter,
+      },
+      { field: 'startDate', headerName: 'Start Date', width: 130 },
+      { field: 'performance', headerName: 'Performance', width: 120 },
+    ],
+    rowData: generateStaticData(100),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '**Basic grid** with 100 rows. Default theme (Quartz). No special features enabled.',
+      },
+    },
+  },
+};
+
+export const LargeDataset: Story = {
+  args: {
+    columnDefs: [
+      { field: 'id', headerName: 'ID', width: 80 },
+      { field: 'name', headerName: 'Name', width: 200 },
+      {
+        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: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '**Performance demo with 100K rows**. Scroll smoothly at 60fps thanks to canvas rendering and virtual scrolling. Try scrolling to the bottom!',
+      },
+    },
+  },
+};
+
+export const WithSorting: Story = {
+  args: {
+    columnDefs: [
+      {
+        field: 'id',
+        headerName: 'ID',
+        width: 80,
+        sortable: true,
+        headerComponentParams: { sortIcon: '↕️' },
+      },
+      {
+        field: 'name',
+        headerName: 'Name ↕️',
+        width: 200,
+        sortable: true,
+        headerComponentParams: { sortIcon: '↕️' },
+      },
+      {
+        field: 'department',
+        headerName: 'Department ↕️',
+        width: 180,
+        sortable: true,
+        headerComponentParams: { sortIcon: '↕️' },
+      },
+      {
+        field: 'salary',
+        headerName: 'Salary ↕️',
+        width: 120,
+        sortable: true,
+        headerComponentParams: { sortIcon: '↕️' },
+      },
+    ],
+    rowData: generateStaticData(50),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '**Sortable columns** with ↕️ indicators. **Click column headers** to sort ascending/descending. Look for the **▲/▼ arrows** that appear when sorted.',
+      },
+    },
+  },
+};
+
+export const WithSelection: Story = {
+  args: {
+    columnDefs: [
+      { field: 'id', headerName: 'ID', width: 80 },
+      { field: 'name', headerName: 'Name', width: 200 },
+      {
+        field: 'department',
+        headerName: 'Department',
+        width: 180,
+        valueFormatter: departmentValueFormatter,
+      },
+      { field: 'role', headerName: 'Role', width: 250, valueFormatter: roleValueFormatter },
+    ],
+    rowData: generateStaticData(50),
+    rowSelection: 'multiple',
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '**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.',
+      },
+    },
+  },
+};
+
+export const WithFiltering: Story = {
+  args: {
+    columnDefs: [
+      {
+        field: 'id',
+        headerName: 'ID',
+        width: 80,
+        filter: 'number',
+        floatingFilter: true,
+        headerComponentParams: { filterIcon: '🔢' },
+      },
+      {
+        field: 'name',
+        headerName: 'Name 🔤',
+        width: 200,
+        filter: 'text',
+        floatingFilter: true,
+        headerComponentParams: { filterIcon: '🔤' },
+      },
+      {
+        field: 'department',
+        headerName: 'Department ☑️',
+        width: 180,
+        filter: 'set',
+        floatingFilter: true,
+        headerComponentParams: { filterIcon: '☑️' },
+        valueFormatter: departmentValueFormatter,
+      },
+      {
+        field: 'role',
+        headerName: 'Role 🔤',
+        width: 250,
+        filter: 'text',
+        floatingFilter: true,
+        headerComponentParams: { filterIcon: '🔤' },
+        valueFormatter: roleValueFormatter,
+      },
+    ],
+    rowData: generateStaticData(50),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '**Filtering with visible filter inputs**. Each filterable column shows an icon (🔢 Number, 🔤 Text, ☑️ Set). **Filter inputs are visible in the header row** - type to filter. Department uses a set filter (dropdown with checkboxes).',
+      },
+    },
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    columnDefs: [
+      { field: 'id', headerName: 'ID', width: 80 },
+      { field: 'name', headerName: 'Name', width: 200 },
+    ],
+    rowData: [],
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '**Empty grid** with no rows. Shows overlay message "No rows to show".',
+      },
+    },
+  },
+};
+
+export const WithCustomTheme: Story = {
+  args: {
+    columnDefs: [
+      { field: 'id', headerName: 'ID', width: 80 },
+      { field: 'name', headerName: 'Name', width: 200 },
+      { field: 'department', headerName: 'Department', width: 180 },
+      { field: 'salary', headerName: 'Salary', width: 120 },
+    ],
+    rowData: generateStaticData(50),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz.withParams({
+      accentColor: '#ff5722', // Orange accent
+      rowHeight: 48,
+      fontSize: 14,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '**Custom theme** with orange accent color, larger row height (48px), and larger font (14px). See Theming stories for more theme options.',
+      },
+    },
+  },
+};

package/src/stories/Benchmark.stories.ts

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { BenchmarkWrapperComponent } from './benchmark-wrapper.component';
+
+const meta: Meta<BenchmarkWrapperComponent> = {
+  title: 'Features/Benchmark',
+  component: BenchmarkWrapperComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [BenchmarkWrapperComponent],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<BenchmarkWrapperComponent>;
+
+export const Benchmark100K: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+      rowCount: 100000,
+    } as any,
+    template: `<app-benchmark-wrapper [rowCount]="100000" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Benchmark with ~100,000 rows. Tests virtual scrolling performance with a large dataset.',
+      },
+    },
+  },
+};
+
+export const Benchmark500K: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+      rowCount: 500000,
+    } as any,
+    template: `<app-benchmark-wrapper [rowCount]="500000" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Benchmark with ~500,000 rows. Heavy stress test for virtual scrolling and canvas rendering.',
+      },
+    },
+  },
+};
+
+export const Benchmark1M: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+      rowCount: 1000000,
+    } as any,
+    template: `<app-benchmark-wrapper [rowCount]="1000000" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Benchmark with ~1,000,000 rows. Extreme stress test. Validates canvas renderer at maximum scale.',
+      },
+    },
+  },
+};