@object-ui/plugin-grid 3.0.2 → 3.1.0

package/src/useGradientColor.ts

@@ -0,0 +1,103 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useMemo, useCallback } from 'react';
+
+/** A single stop in a colour gradient. */
+export interface GradientStop {
+  /** Position between 0 and 1. */
+  position: number;
+  /** Tailwind background class applied at this stop (e.g. "bg-green-100"). */
+  className: string;
+}
+
+export interface UseGradientColorOptions {
+  /** The numeric field to evaluate on each row. */
+  field: string;
+  /** Flat data array used to derive min/max when not provided. */
+  data: Record<string, any>[];
+  /** Optional explicit minimum value. */
+  min?: number;
+  /** Optional explicit maximum value. */
+  max?: number;
+  /**
+   * Ordered gradient stops (position 0 → 1).
+   * When omitted a default green→yellow→red palette is used.
+   */
+  stops?: GradientStop[];
+}
+
+/** Default three-stop gradient: green → yellow → red. */
+const DEFAULT_STOPS: GradientStop[] = [
+  { position: 0, className: 'bg-green-100' },
+  { position: 0.5, className: 'bg-yellow-100' },
+  { position: 1, className: 'bg-red-100' },
+];
+
+/**
+ * Derive min and max numeric values for `field` across `data`.
+ */
+function deriveRange(data: Record<string, any>[], field: string): [number, number] {
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (const row of data) {
+    const v = Number(row[field]);
+    if (!Number.isFinite(v)) continue;
+    if (v < lo) lo = v;
+    if (v > hi) hi = v;
+  }
+  if (!Number.isFinite(lo)) return [0, 0];
+  return [lo, hi];
+}
+
+/**
+ * Pick the closest gradient stop class for a normalised position (0‑1).
+ */
+function pickStopClass(t: number, stops: GradientStop[]): string {
+  if (stops.length === 0) return '';
+  if (stops.length === 1) return stops[0].className;
+
+  let best = stops[0];
+  let bestDist = Math.abs(t - best.position);
+
+  for (let i = 1; i < stops.length; i++) {
+    const dist = Math.abs(t - stops[i].position);
+    if (dist < bestDist) {
+      best = stops[i];
+      bestDist = dist;
+    }
+  }
+  return best.className;
+}
+
+/**
+ * Hook that returns a row → Tailwind class resolver based on a numeric
+ * field's value mapped onto a configurable colour gradient.
+ *
+ * @param options - gradient configuration
+ * @returns `(row) => className | undefined`
+ */
+export function useGradientColor(options: UseGradientColorOptions) {
+  const { field, data, min: minProp, max: maxProp, stops = DEFAULT_STOPS } = options;
+
+  const [derivedMin, derivedMax] = useMemo(() => deriveRange(data, field), [data, field]);
+  const min = minProp ?? derivedMin;
+  const max = maxProp ?? derivedMax;
+
+  return useCallback(
+    (row: Record<string, any>): string | undefined => {
+      const v = Number(row[field]);
+      if (!Number.isFinite(v)) return undefined;
+      if (max === min) return stops.length > 0 ? stops[0].className : undefined;
+
+      const t = Math.max(0, Math.min(1, (v - min) / (max - min)));
+      return pickStopClass(t, stops);
+    },
+    [field, min, max, stops],
+  );
+}

package/src/useGroupReorder.ts

@@ -0,0 +1,123 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+
+export interface UseGroupReorderOptions {
+  /** Initial ordered list of group keys. */
+  groupKeys: string[];
+}
+
+export interface UseGroupReorderResult {
+  /** Current ordered list of group keys. */
+  groupOrder: string[];
+  /** Move a group from one index to another. */
+  moveGroup: (fromIndex: number, toIndex: number) => void;
+  /** Drag-start handler – stores the dragged group key. */
+  onDragStart: (e: React.DragEvent, key: string) => void;
+  /** Drag-over handler – must be attached to allow drop. */
+  onDragOver: (e: React.DragEvent) => void;
+  /** Drop handler – reorders the group under the cursor. */
+  onDrop: (e: React.DragEvent, targetKey: string) => void;
+  /** Drag-end handler – cleans up drag state. */
+  onDragEnd: () => void;
+  /** The key currently being dragged (null when idle). */
+  draggingKey: string | null;
+}
+
+const DRAG_DATA_TYPE = 'text/x-group-key';
+
+/**
+ * Hook for drag-and-drop reordering of grouped sections.
+ *
+ * Attach the returned handlers to the group header elements to enable
+ * reordering via native HTML drag-and-drop.
+ */
+export function useGroupReorder({ groupKeys }: UseGroupReorderOptions): UseGroupReorderResult {
+  const [order, setOrder] = useState<string[]>(groupKeys);
+  const [draggingKey, setDraggingKey] = useState<string | null>(null);
+
+  // Keep internal order in sync when the source list changes (new groups added/removed).
+  useEffect(() => {
+    setOrder((prev) => {
+      const prevSet = new Set(prev);
+      const nextSet = new Set(groupKeys);
+
+      // Fast-path: identical sets in same order.
+      if (
+        prev.length === groupKeys.length &&
+        prev.every((k, i) => k === groupKeys[i])
+      ) {
+        return prev;
+      }
+
+      // Preserve existing order for keys that still exist, append new keys.
+      const kept = prev.filter((k) => nextSet.has(k));
+      const added = groupKeys.filter((k) => !prevSet.has(k));
+      return [...kept, ...added];
+    });
+  }, [groupKeys]);
+
+  const moveGroup = useCallback((fromIndex: number, toIndex: number) => {
+    setOrder((prev) => {
+      if (fromIndex < 0 || fromIndex >= prev.length) return prev;
+      if (toIndex < 0 || toIndex >= prev.length) return prev;
+      if (fromIndex === toIndex) return prev;
+
+      const next = [...prev];
+      const [moved] = next.splice(fromIndex, 1);
+      next.splice(toIndex, 0, moved);
+      return next;
+    });
+  }, []);
+
+  const onDragStart = useCallback((e: React.DragEvent, key: string) => {
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData(DRAG_DATA_TYPE, key);
+    setDraggingKey(key);
+  }, []);
+
+  const onDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const onDrop = useCallback(
+    (e: React.DragEvent, targetKey: string) => {
+      e.preventDefault();
+      const sourceKey = e.dataTransfer.getData(DRAG_DATA_TYPE);
+      if (!sourceKey || sourceKey === targetKey) return;
+
+      setOrder((prev) => {
+        const fromIndex = prev.indexOf(sourceKey);
+        const toIndex = prev.indexOf(targetKey);
+        if (fromIndex === -1 || toIndex === -1) return prev;
+
+        const next = [...prev];
+        const [moved] = next.splice(fromIndex, 1);
+        next.splice(toIndex, 0, moved);
+        return next;
+      });
+    },
+    [],
+  );
+
+  const onDragEnd = useCallback(() => {
+    setDraggingKey(null);
+  }, []);
+
+  return {
+    groupOrder: order,
+    moveGroup,
+    onDragStart,
+    onDragOver,
+    onDrop,
+    onDragEnd,
+    draggingKey,
+  };
+}

package/src/useGroupedData.ts

@@ -9,6 +9,27 @@
 import { useState, useMemo, useCallback } from 'react';
 import type { GroupingConfig } from '@object-ui/types';
 
+/** Supported aggregation function types. */
+export type AggregationType = 'sum' | 'count' | 'avg' | 'min' | 'max';
+
+/** Describes a single aggregation to compute per group. */
+export interface AggregationConfig {
+  /** The field to aggregate. */
+  field: string;
+  /** The aggregation function. */
+  type: AggregationType;
+}
+
+/** Result of a computed aggregation for a group. */
+export interface AggregationResult {
+  /** The field that was aggregated. */
+  field: string;
+  /** The aggregation function used. */
+  type: AggregationType;
+  /** The computed value. */
+  value: number;
+}
+
 export interface GroupEntry {
   /** Composite key identifying this group (field values joined by ' / ') */
   key: string;
@@ -18,6 +39,8 @@ export interface GroupEntry {
   rows: any[];
   /** Whether the group section is collapsed */
   collapsed: boolean;
+  /** Computed aggregations for this group (empty when no aggregations configured). */
+  aggregations: AggregationResult[];
 }
 
 export interface UseGroupedDataResult {
@@ -48,6 +71,43 @@ function buildGroupLabel(row: Record<string, any>, fields: GroupingConfig['field
     .join(' / ');
 }
 
+/**
+ * Compute aggregation results for a set of rows.
+ */
+function computeAggregations(
+  rows: any[],
+  configs: AggregationConfig[],
+): AggregationResult[] {
+  return configs.map(({ field, type }) => {
+    const nums = rows
+      .map((r) => Number(r[field]))
+      .filter((n) => Number.isFinite(n));
+
+    let value: number;
+    switch (type) {
+      case 'count':
+        value = nums.length;
+        break;
+      case 'sum':
+        value = nums.reduce((a, b) => a + b, 0);
+        break;
+      case 'avg':
+        value = nums.length > 0 ? nums.reduce((a, b) => a + b, 0) / nums.length : 0;
+        break;
+      case 'min':
+        value = nums.length > 0 ? Math.min(...nums) : 0;
+        break;
+      case 'max':
+        value = nums.length > 0 ? Math.max(...nums) : 0;
+        break;
+      default:
+        value = 0;
+    }
+
+    return { field, type, value };
+  });
+}
+
 /**
  * Compare function that respects per-field sort order.
  */
@@ -63,12 +123,14 @@ function compareGroups(a: string, b: string, order: 'asc' | 'desc'): number {
  * collapsed state.  Collapse state is managed internally so the consumer only
  * needs to wire `toggleGroup` to the UI.
  *
- * @param config  - GroupingConfig from the grid schema (optional)
- * @param data    - flat data rows
+ * @param config        - GroupingConfig from the grid schema (optional)
+ * @param data          - flat data rows
+ * @param aggregations  - optional aggregation definitions to compute per group
  */
 export function useGroupedData(
   config: GroupingConfig | undefined,
   data: any[],
+  aggregations?: AggregationConfig[],
 ): UseGroupedDataResult {
   const fields = config?.fields;
   const isGrouped = !!(fields && fields.length > 0);
@@ -107,9 +169,12 @@ export function useGroupedData(
       const entry = map.get(key)!;
       const collapsed =
         key in toggledKeys ? toggledKeys[key] : fieldsDefaultCollapsed;
-      return { key, label: entry.label, rows: entry.rows, collapsed };
+      const agg = aggregations && aggregations.length > 0
+        ? computeAggregations(entry.rows, aggregations)
+        : [];
+      return { key, label: entry.label, rows: entry.rows, collapsed, aggregations: agg };
     });
-  }, [data, fields, isGrouped, toggledKeys, fieldsDefaultCollapsed]);
+  }, [data, fields, isGrouped, toggledKeys, fieldsDefaultCollapsed, aggregations]);
 
   const toggleGroup = useCallback((key: string) => {
     setToggledKeys((prev) => ({

package/tsconfig.json

@@ -4,5 +4,6 @@
     "outDir": "dist",
     "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx", "**/*.stories.tsx"]
 }

package/dist/packages/plugin-grid/src/ListColumnSchema.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/plugin-grid/src/ObjectGrid.EdgeCases.stories.d.ts

@@ -1,25 +0,0 @@
-import { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: import('react').ForwardRefExoticComponent<Omit<{
-        schema: import('../../core/src').SchemaNode;
-    } & Record<string, any>, "ref"> & import('react').RefAttributes<any>>;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {
-        schema: {
-            table: {
-                disable: true;
-            };
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const EmptyData: Story;
-export declare const SingleRow: Story;
-export declare const ManyColumns: Story;
-export declare const LongCellValues: Story;
-export declare const NullAndUndefinedValues: Story;

package/dist/packages/plugin-grid/src/ObjectGrid.stories.d.ts

@@ -1,33 +0,0 @@
-import { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: import('react').ForwardRefExoticComponent<Omit<{
-        schema: import('../../core/src').SchemaNode;
-    } & Record<string, any>, "ref"> & import('react').RefAttributes<any>>;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {
-        schema: {
-            table: {
-                disable: true;
-            };
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const WithRowActions: Story;
-/**
- * CRM Deals Pipeline — demonstrates professional data formatting:
- * - Currency with thousand separators (Amount column, right-aligned)
- * - Percentage with progress bar (Probability column, right-aligned)
- * - Formatted dates (Close Date column)
- * - Colored badges for stage/status (Stage column)
- * - Bold clickable name as primary link (Name column)
- * - Empty value placeholder (Account column)
- */
-export declare const CRMDeals: Story;
-export declare const EditableGrid: Story;

package/dist/packages/plugin-grid/src/VirtualGrid.test.d.ts

@@ -1,8 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-export {};

package/dist/packages/plugin-grid/src/index.d.ts

@@ -1,15 +0,0 @@
-import { default as React } from 'react';
-import { ObjectGrid } from './ObjectGrid';
-import { VirtualGrid } from './VirtualGrid';
-export { ObjectGrid, VirtualGrid };
-export { InlineEditing } from './InlineEditing';
-export { useRowColor } from './useRowColor';
-export { useGroupedData } from './useGroupedData';
-export type { ObjectGridProps } from './ObjectGrid';
-export type { VirtualGridProps, VirtualGridColumn } from './VirtualGrid';
-export type { InlineEditingProps } from './InlineEditing';
-export type { GroupEntry, UseGroupedDataResult } from './useGroupedData';
-export declare const ObjectGridRenderer: React.FC<{
-    schema: any;
-    [key: string]: any;
-}>;

package/dist/packages/plugin-grid/src/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/src/VirtualGrid.test.tsx

@@ -1,23 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { describe, it, expect } from 'vitest';
-import { VirtualGrid } from './VirtualGrid';
-
-describe('VirtualGrid', () => {
-  it('should be exported', () => {
-    expect(VirtualGrid).toBeDefined();
-    expect(typeof VirtualGrid).toBe('function');
-  });
-  
-  it('should have the correct display name', () => {
-    // Verify it's a React component
-    expect(VirtualGrid.name).toBe('VirtualGrid');
-  });
-});
-