argent-grid 0.1.0 → 0.2.0

package/src/lib/types/ag-grid-types.ts

@@ -1,7 +1,7 @@
 /**
  * ArgentGrid - AG Grid Compatible Type Definitions
  * A free, high-performance alternative to AG Grid Enterprise
- * 
+ *
  * This file provides 1:1 TypeScript definitions compatible with AG Grid API
  * to ensure users can switch to ArgentGrid by simply changing their import.
  */
@@ -147,7 +147,9 @@ export interface GridOptions<TData = any> {
   // === CALLBACKS ===
   processCellForClipboard?: (params: ProcessCellForClipboardParams<TData>) => any;
   processCellFromClipboard?: (params: ProcessCellFromClipboardParams<TData>) => any;
-  getContextMenuItems?: (params: GetContextMenuItemsParams<TData>) => (DefaultMenuItem | MenuItemDef)[];
+  getContextMenuItems?: (
+    params: GetContextMenuItemsParams<TData>
+  ) => (DefaultMenuItem | MenuItemDef)[];
   getMainMenuItems?: (params: GetMainMenuItemsParams<TData>) => (DefaultMenuItem | MenuItemDef)[];
 }
 
@@ -174,7 +176,9 @@ export interface ColDef<TData = any, TValue = any> {
   suppressKeyboardEvent?: (params: SuppressKeyboardEventParams<TData>) => boolean;
   suppressPaste?: boolean | ((params: SuppressPasteParams<TData>) => boolean);
   suppressFillHandle?: boolean;
-  contextMenuItems?: (DefaultMenuItem | MenuItemDef)[] | ((params: any) => (DefaultMenuItem | MenuItemDef)[]);
+  contextMenuItems?:
+    | (DefaultMenuItem | MenuItemDef)[]
+    | ((params: any) => (DefaultMenuItem | MenuItemDef)[]);
   context?: any;
 
   // === SELECTION ===
@@ -255,7 +259,9 @@ export interface ColDef<TData = any, TValue = any> {
   enablePivot?: boolean;
 
   // === RENDERING AND STYLING ===
-  cellStyle?: { [key: string]: any } | ((params: CellStyleParams<TData, TValue>) => { [key: string]: any });
+  cellStyle?:
+    | { [key: string]: any }
+    | ((params: CellStyleParams<TData, TValue>) => { [key: string]: any });
   cellClass?: string | string[] | ((params: CellClassParams<TData, TValue>) => string | string[]);
   cellClassRules?: { [key: string]: (params: CellClassParams<TData, TValue>) => boolean };
   cellRenderer?: any;
@@ -349,6 +355,7 @@ export interface GridApi<TData = any> {
   setRowData(rowData: TData[]): void;
   applyTransaction(transaction: RowDataTransaction<TData>): RowDataTransactionResult | null;
   getDisplayedRowCount(): number;
+  getRowY(index: number): number;
   getAggregations(): { [field: string]: any };
   getRowNode(id: string): IRowNode<TData> | null;
 
@@ -386,6 +393,15 @@ export interface GridApi<TData = any> {
   // === CLIPBOARD API ===
   copyToClipboard(): void;
   cutToClipboard(): void;
+
+  // === STATE PERSISTENCE API ===
+  getState(): GridState;
+  setState(state: GridState): void;
+  saveState(key?: string): void;
+  restoreState(key?: string): boolean;
+  clearState(key?: string): void;
+  hasState(key?: string): boolean;
+  getUniqueValues(field: string): any[];
   pasteFromClipboard(): void;
 
   // === GRID STATE API ===
@@ -447,6 +463,9 @@ export interface Column {
   sort?: SortDirection;
   sortIndex?: number;
   aggFunc?: string | null;
+  checkboxSelection?: boolean;
+  headerCheckboxSelection?: boolean;
+  filter?: any;
 }
 
 export interface IRowNode<TData = any> {
@@ -471,6 +490,7 @@ export interface IRowNode<TData = any> {
   lastChild: boolean;
   rowIndex: number | null;
   displayedRowIndex: number;
+  setSelected(selected: boolean, clearSelection?: boolean): void;
 }
 
 export interface GroupRowNode<TData = any> {
@@ -573,7 +593,7 @@ export interface CellRange {
   startRow: number;
   endRow: number;
   startColumn: string; // colId
-  endColumn: string;   // colId
+  endColumn: string; // colId
   columns: Column[];
 }
 
@@ -650,9 +670,7 @@ export interface RowSelectionOptions {
   enableSelectionWithoutKeys?: boolean;
 }
 
-export interface CellSelectionOptions {
-  // Cell selection configuration
-}
+export type CellSelectionOptions = {};
 
 export interface SelectionColumnDef {
   headerCheckbox?: boolean;
@@ -869,7 +887,34 @@ export type DomLayoutType = 'normal' | 'autoHeight' | 'print';
 export type SortDirection = 'asc' | 'desc' | null;
 export type RowGroupingDisplayType = 'singleColumn' | 'multipleColumns' | 'groupRows' | 'custom';
 export type ColumnMenuTab = 'filterMenu' | 'mainMenu' | 'columnsMenu' | 'chartMenu';
-export type DefaultMenuItem = 'pinMenu' | 'valueMenu' | 'columnMenu' | 'expandable' | 'separator' | 'copy' | 'copyWithHeaders' | 'copyWithGroupHeaders' | 'cut' | 'paste' | 'export' | 'chartRange' | 'pivot' | 'resetColumns' | 'deselectAll' | 'selectAll' | 'selectAllOtherColumns' | 'autoSizeAll' | 'autoSizeThisColumn' | 'resetColumns' | 'expandAll' | 'collapseAll' | 'rowGroupingGroup' | 'rowGroupingUnGroup' | 'pivotMenu' | 'aggFuncMenu' | 'sideBar';
+export type DefaultMenuItem =
+  | 'pinMenu'
+  | 'valueMenu'
+  | 'columnMenu'
+  | 'expandable'
+  | 'separator'
+  | 'copy'
+  | 'copyWithHeaders'
+  | 'copyWithGroupHeaders'
+  | 'cut'
+  | 'paste'
+  | 'export'
+  | 'chartRange'
+  | 'pivot'
+  | 'resetColumns'
+  | 'deselectAll'
+  | 'selectAll'
+  | 'selectAllOtherColumns'
+  | 'autoSizeAll'
+  | 'autoSizeThisColumn'
+  | 'resetColumns'
+  | 'expandAll'
+  | 'collapseAll'
+  | 'rowGroupingGroup'
+  | 'rowGroupingUnGroup'
+  | 'pivotMenu'
+  | 'aggFuncMenu'
+  | 'sideBar';
 
 export interface MenuItemDef {
   name: string;
@@ -885,14 +930,28 @@ export interface MenuItemDef {
 // FUNCTION TYPE DEFINITIONS
 // ============================================================================
 
-export type ValueGetterFunc<TData = any, TValue = any> = (params: ValueGetterParams<TData>) => TValue;
-export type ValueFormatterFunc<TData = any, TValue = any> = (params: ValueFormatterParams<TData, TValue>) => string;
-export type ValueSetterFunc<TData = any, TValue = any> = (params: ValueSetterParams<TData, TValue>) => boolean;
-export type ValueParserFunc<TData = any, TValue = any> = (params: ValueParserParams<TData, TValue>) => TValue;
+export type ValueGetterFunc<TData = any, TValue = any> = (
+  params: ValueGetterParams<TData>
+) => TValue;
+export type ValueFormatterFunc<TData = any, TValue = any> = (
+  params: ValueFormatterParams<TData, TValue>
+) => string;
+export type ValueSetterFunc<TData = any, TValue = any> = (
+  params: ValueSetterParams<TData, TValue>
+) => boolean;
+export type ValueParserFunc<TData = any, TValue = any> = (
+  params: ValueParserParams<TData, TValue>
+) => TValue;
 export type KeyCreatorFunc<TValue = any> = (params: KeyCreatorParams<TValue>) => string;
 export type EqualsFunc<TValue = any> = (params: EqualsParams<TValue>) => boolean;
 export type HeaderValueGetterFunc<TData = any> = (params: HeaderValueGetterParams<TData>) => string;
-export type SortComparatorFn<TValue = any> = (valueA: TValue, valueB: TValue, nodeA: IRowNode, nodeB: IRowNode, isDescending: boolean) => number;
+export type SortComparatorFn<TValue = any> = (
+  valueA: TValue,
+  valueB: TValue,
+  nodeA: IRowNode,
+  nodeB: IRowNode,
+  isDescending: boolean
+) => number;
 export type GetRowIdFunc<TData = any> = (params: GetRowIdParams<TData>) => string;
 export type IAggFunc<TData = any> = (params: IAggFuncParams<TData>) => any;
 

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,188 @@
+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;
+  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 = ['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],
+    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' },
+      { field: 'role', headerName: 'Role', width: 250, filter: true },
+      { field: 'salary', headerName: 'Salary', width: 120, filter: 'number' },
+      { field: 'location', headerName: 'Location', width: 150, filter: 'set' },
+      { field: 'performance', headerName: 'Performance', width: 120, filter: 'number' },
+    ],
+    rowData: generateStaticData(50),
+    height: '500px',
+    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' },
+      { field: 'role', headerName: 'Role', width: 250, filter: true },
+      { field: 'salary', headerName: 'Salary', width: 120, filter: 'number' },
+    ],
+    rowData: generateStaticData(50),
+    height: '500px',
+    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 },
+      { field: 'role', headerName: 'Role', width: 250 },
+      { field: 'salary', headerName: 'Salary', width: 120 },
+      { field: 'location', headerName: 'Location', width: 150 },
+    ],
+    rowData: generateStaticData(50),
+    height: '400px',
+    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,
+      },
+      { 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' },
+    ],
+    rowData: generateStaticData(100),
+    height: '500px',
+    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,277 @@
+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;
+  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 = ['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],
+    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 },
+      { field: 'role', headerName: 'Role', width: 250 },
+      { field: 'salary', headerName: 'Salary', width: 120 },
+      { field: 'location', headerName: 'Location', width: 150 },
+      { field: 'startDate', headerName: 'Start Date', width: 130 },
+      { field: 'performance', headerName: 'Performance', width: 120 },
+    ],
+    rowData: generateStaticData(100),
+    height: '500px',
+    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 },
+      { field: 'role', headerName: 'Role', width: 250 },
+      { field: 'salary', headerName: 'Salary', width: 120 },
+    ],
+    rowData: generateStaticData(100000),
+    height: '500px',
+    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: '400px',
+    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,
+        checkboxSelection: true,
+        headerComponentParams: { selectionIcon: '☑️' },
+      },
+      { field: 'name', headerName: 'Name', width: 200 },
+      { field: 'department', headerName: 'Department', width: 180 },
+      { field: 'role', headerName: 'Role', width: 250 },
+    ],
+    rowData: generateStaticData(50),
+    rowSelection: 'multiple',
+    height: '400px',
+    width: '100%',
+    theme: themeQuartz,
+  },
+  parameters: {
+    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.',
+      },
+    },
+  },
+};
+
+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: '☑️' },
+      },
+      {
+        field: 'role',
+        headerName: 'Role 🔤',
+        width: 250,
+        filter: 'text',
+        floatingFilter: true,
+        headerComponentParams: { filterIcon: '🔤' },
+      },
+    ],
+    rowData: generateStaticData(50),
+    height: '500px',
+    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: '300px',
+    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: '400px',
+    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.',
+      },
+    },
+  },
+};