@papernote/ui 1.10.20 → 1.10.21

package/dist/styles.css

@@ -4423,6 +4423,11 @@ input:checked + .slider:before{
   font-style: italic;
 }
 
+.tabular-nums{
+  --tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
+
 .leading-5{
   line-height: 1.25rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.10.20",
+  "version": "1.10.21",
   "type": "module",
   "description": "A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive",
   "main": "dist/index.js",

package/src/components/PivotTable.stories.tsx

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PivotTable } from './PivotTable';
+
+const meta: Meta<typeof PivotTable> = {
+  title: 'Data Display/PivotTable',
+  component: PivotTable,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'PivotTable transforms flat data into a cross-tabulation table with row labels, column headers, and aggregated values. Ideal for financial reports, sales summaries, and time-based data analysis.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof PivotTable>;
+
+// Sample commission data by principal and month
+const commissionData = [
+  { PrincipalName: 'Allwire', CommissionFiscalMonth: 1, MonthlyCommission: 1250.5 },
+  { PrincipalName: 'Allwire', CommissionFiscalMonth: 2, MonthlyCommission: 1875.25 },
+  { PrincipalName: 'Allwire', CommissionFiscalMonth: 3, MonthlyCommission: 2100.0 },
+  { PrincipalName: 'Allwire', CommissionFiscalMonth: 4, MonthlyCommission: 1950.75 },
+  { PrincipalName: 'AMSC', CommissionFiscalMonth: 1, MonthlyCommission: 3200.0 },
+  { PrincipalName: 'AMSC', CommissionFiscalMonth: 2, MonthlyCommission: 2850.5 },
+  { PrincipalName: 'AMSC', CommissionFiscalMonth: 3, MonthlyCommission: 3100.25 },
+  { PrincipalName: 'AMSC', CommissionFiscalMonth: 4, MonthlyCommission: 3450.0 },
+  { PrincipalName: 'Buckingham', CommissionFiscalMonth: 1, MonthlyCommission: 850.0 },
+  { PrincipalName: 'Buckingham', CommissionFiscalMonth: 2, MonthlyCommission: 925.75 },
+  { PrincipalName: 'Buckingham', CommissionFiscalMonth: 3, MonthlyCommission: 1100.5 },
+  { PrincipalName: 'Buckingham', CommissionFiscalMonth: 4, MonthlyCommission: 975.25 },
+  { PrincipalName: 'Delta Corp', CommissionFiscalMonth: 1, MonthlyCommission: 5500.0 },
+  { PrincipalName: 'Delta Corp', CommissionFiscalMonth: 2, MonthlyCommission: 4800.25 },
+  { PrincipalName: 'Delta Corp', CommissionFiscalMonth: 3, MonthlyCommission: 5200.5 },
+  { PrincipalName: 'Delta Corp', CommissionFiscalMonth: 4, MonthlyCommission: 5750.75 },
+];
+
+const monthLabels: Record<number, string> = {
+  1: 'January',
+  2: 'February',
+  3: 'March',
+  4: 'April',
+  5: 'May',
+  6: 'June',
+  7: 'July',
+  8: 'August',
+  9: 'September',
+  10: 'October',
+  11: 'November',
+  12: 'December',
+};
+
+/**
+ * Default pivot table showing commission by principal and month
+ */
+export const Default: Story = {
+  args: {
+    data: commissionData,
+    rowField: 'PrincipalName',
+    columnField: 'CommissionFiscalMonth',
+    valueField: 'MonthlyCommission',
+    columnLabels: monthLabels,
+    rowLabel: 'Principal',
+    showRowTotals: true,
+    showRowAverages: true,
+    showColumnTotals: true,
+  },
+};
+
+/**
+ * Without averages column
+ */
+export const WithoutAverages: Story = {
+  args: {
+    ...Default.args,
+    showRowAverages: false,
+  },
+};
+
+/**
+ * Without totals row
+ */
+export const WithoutColumnTotals: Story = {
+  args: {
+    ...Default.args,
+    showColumnTotals: false,
+  },
+};
+
+/**
+ * Minimal - just the pivot data
+ */
+export const Minimal: Story = {
+  args: {
+    ...Default.args,
+    showRowTotals: false,
+    showRowAverages: false,
+    showColumnTotals: false,
+  },
+};
+
+// Sales data by region and quarter
+const salesData = [
+  { Region: 'North', Quarter: 'Q1', Sales: 125000 },
+  { Region: 'North', Quarter: 'Q2', Sales: 145000 },
+  { Region: 'North', Quarter: 'Q3', Sales: 132000 },
+  { Region: 'North', Quarter: 'Q4', Sales: 178000 },
+  { Region: 'South', Quarter: 'Q1', Sales: 98000 },
+  { Region: 'South', Quarter: 'Q2', Sales: 112000 },
+  { Region: 'South', Quarter: 'Q3', Sales: 105000 },
+  { Region: 'South', Quarter: 'Q4', Sales: 142000 },
+  { Region: 'East', Quarter: 'Q1', Sales: 210000 },
+  { Region: 'East', Quarter: 'Q2', Sales: 195000 },
+  { Region: 'East', Quarter: 'Q3', Sales: 225000 },
+  { Region: 'East', Quarter: 'Q4', Sales: 248000 },
+  { Region: 'West', Quarter: 'Q1', Sales: 175000 },
+  { Region: 'West', Quarter: 'Q2', Sales: 168000 },
+  { Region: 'West', Quarter: 'Q3', Sales: 192000 },
+  { Region: 'West', Quarter: 'Q4', Sales: 215000 },
+];
+
+/**
+ * Sales by region and quarter
+ */
+export const SalesByRegion: Story = {
+  args: {
+    data: salesData,
+    rowField: 'Region',
+    columnField: 'Quarter',
+    valueField: 'Sales',
+    rowLabel: 'Region',
+    showRowTotals: true,
+    showRowAverages: true,
+    showColumnTotals: true,
+  },
+};
+
+/**
+ * Custom number formatter (no currency symbol)
+ */
+export const CustomFormatter: Story = {
+  args: {
+    ...Default.args,
+    formatValue: (value: number | null) => {
+      if (value === null) return '-';
+      return new Intl.NumberFormat('en-US', {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+      }).format(value);
+    },
+  },
+};
+
+// Sparse data with missing values
+const sparseData = [
+  { Product: 'Widget A', Month: 1, Units: 150 },
+  { Product: 'Widget A', Month: 3, Units: 200 },
+  { Product: 'Widget A', Month: 4, Units: 175 },
+  { Product: 'Widget B', Month: 1, Units: 300 },
+  { Product: 'Widget B', Month: 2, Units: 280 },
+  { Product: 'Widget B', Month: 4, Units: 320 },
+  { Product: 'Widget C', Month: 2, Units: 90 },
+  { Product: 'Widget C', Month: 3, Units: 110 },
+];
+
+/**
+ * Sparse data with empty cells
+ */
+export const SparseData: Story = {
+  args: {
+    data: sparseData,
+    rowField: 'Product',
+    columnField: 'Month',
+    valueField: 'Units',
+    columnLabels: monthLabels,
+    rowLabel: 'Product',
+    showRowTotals: true,
+    showColumnTotals: true,
+    formatValue: (value: number | null) => {
+      if (value === null) return '-';
+      return value.toLocaleString();
+    },
+  },
+};

package/src/components/PivotTable.tsx

@@ -0,0 +1,422 @@
+import { useMemo } from 'react';
+
+/**
+ * PivotTable - Transforms flat data into a cross-tabulation table
+ *
+ * Takes data like:
+ *   [{ principal: 'A', month: 1, amount: 100 }, { principal: 'A', month: 2, amount: 200 }, ...]
+ *
+ * And displays it as:
+ *   | Principal | January | February | ... | Total | Average |
+ *   |-----------|---------|----------|-----|-------|---------|
+ *   | A         | $100    | $200     | ... | $300  | $150    |
+ */
+
+export interface PivotTableProps<T = Record<string, unknown>> {
+  /** Array of data rows to pivot */
+  data: T[];
+  /** Field name to use for row labels */
+  rowField: string;
+  /** Field name to use for column headers */
+  columnField: string;
+  /** Field name containing the values to display */
+  valueField: string;
+  /** Optional map of column field values to display labels */
+  columnLabels?: Record<string | number, string>;
+  /** Optional row label header text */
+  rowLabel?: string;
+  /** Format function for values */
+  formatValue?: (value: number | null) => string;
+  /** Show row totals column */
+  showRowTotals?: boolean;
+  /** Show row averages column */
+  showRowAverages?: boolean;
+  /** Show column totals row */
+  showColumnTotals?: boolean;
+  /** Custom className */
+  className?: string;
+  /** Sort columns by label or value */
+  sortColumns?: 'label' | 'value' | 'none';
+  /** Sort rows alphabetically */
+  sortRows?: boolean;
+  /** Empty cell placeholder */
+  emptyValue?: string;
+}
+
+interface PivotedData {
+  rowLabels: string[];
+  columnLabels: string[];
+  columnKeys: (string | number)[];
+  matrix: (number | null)[][];
+  rowTotals: number[];
+  rowAverages: number[];
+  columnTotals: number[];
+  grandTotal: number;
+}
+
+/**
+ * Default currency formatter
+ */
+const defaultFormatValue = (value: number | null): string => {
+  if (value === null || value === undefined) return '-';
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(value);
+};
+
+/**
+ * Transform flat data into pivoted structure
+ */
+function pivotData<T>(
+  data: T[],
+  rowField: string,
+  columnField: string,
+  valueField: string,
+  columnLabels?: Record<string | number, string>,
+  sortColumns?: 'label' | 'value' | 'none',
+  sortRows?: boolean
+): PivotedData {
+  // Extract unique row and column values
+  const rowSet = new Set<string>();
+  const columnSet = new Set<string | number>();
+  const valueMap = new Map<string, number>();
+
+  for (const row of data) {
+    const rowValue = String((row as Record<string, unknown>)[rowField] ?? '');
+    const colValue = (row as Record<string, unknown>)[columnField];
+    const val = (row as Record<string, unknown>)[valueField];
+
+    if (rowValue) rowSet.add(rowValue);
+    if (colValue !== undefined && colValue !== null) columnSet.add(colValue as string | number);
+
+    // Create composite key for the cell
+    const key = `${rowValue}|||${colValue}`;
+    const numVal = typeof val === 'number' ? val : parseFloat(String(val)) || 0;
+    valueMap.set(key, (valueMap.get(key) || 0) + numVal);
+  }
+
+  // Sort row labels
+  let rowLabels = Array.from(rowSet);
+  if (sortRows !== false) {
+    rowLabels.sort((a, b) => a.localeCompare(b));
+  }
+
+  // Sort column keys
+  let columnKeys = Array.from(columnSet);
+  if (sortColumns === 'label') {
+    columnKeys.sort((a, b) => {
+      const labelA = columnLabels?.[a] ?? String(a);
+      const labelB = columnLabels?.[b] ?? String(b);
+      return labelA.localeCompare(labelB);
+    });
+  } else if (sortColumns !== 'none') {
+    // Default: sort by value (numeric if possible)
+    columnKeys.sort((a, b) => {
+      const numA = typeof a === 'number' ? a : parseFloat(String(a));
+      const numB = typeof b === 'number' ? b : parseFloat(String(b));
+      if (!isNaN(numA) && !isNaN(numB)) return numA - numB;
+      return String(a).localeCompare(String(b));
+    });
+  }
+
+  // Build column labels array
+  const colLabels = columnKeys.map((k) => columnLabels?.[k] ?? String(k));
+
+  // Build the matrix
+  const matrix: (number | null)[][] = [];
+  const rowTotals: number[] = [];
+  const rowAverages: number[] = [];
+  const columnTotals: number[] = new Array(columnKeys.length).fill(0);
+  let grandTotal = 0;
+
+  for (const rowLabel of rowLabels) {
+    const rowData: (number | null)[] = [];
+    let rowSum = 0;
+    let rowCount = 0;
+
+    for (let colIdx = 0; colIdx < columnKeys.length; colIdx++) {
+      const colKey = columnKeys[colIdx];
+      const key = `${rowLabel}|||${colKey}`;
+      const value = valueMap.get(key) ?? null;
+      rowData.push(value);
+
+      if (value !== null) {
+        rowSum += value;
+        rowCount++;
+        columnTotals[colIdx] += value;
+        grandTotal += value;
+      }
+    }
+
+    matrix.push(rowData);
+    rowTotals.push(rowSum);
+    rowAverages.push(rowCount > 0 ? rowSum / rowCount : 0);
+  }
+
+  return {
+    rowLabels,
+    columnLabels: colLabels,
+    columnKeys,
+    matrix,
+    rowTotals,
+    rowAverages,
+    columnTotals,
+    grandTotal,
+  };
+}
+
+/**
+ * PivotTable Component
+ */
+export function PivotTable<T = Record<string, unknown>>({
+  data,
+  rowField,
+  columnField,
+  valueField,
+  columnLabels,
+  rowLabel = '',
+  formatValue = defaultFormatValue,
+  showRowTotals = true,
+  showRowAverages = false,
+  showColumnTotals = true,
+  className = '',
+  sortColumns = 'value',
+  sortRows = true,
+  emptyValue = '-',
+}: PivotTableProps<T>) {
+  const pivoted = useMemo(
+    () => pivotData(data, rowField, columnField, valueField, columnLabels, sortColumns, sortRows),
+    [data, rowField, columnField, valueField, columnLabels, sortColumns, sortRows]
+  );
+
+  const formatCell = (value: number | null): string => {
+    if (value === null || value === undefined) return emptyValue;
+    return formatValue(value);
+  };
+
+  // Calculate column totals row average
+  const columnTotalsAverage =
+    pivoted.columnTotals.length > 0
+      ? pivoted.columnTotals.reduce((a, b) => a + b, 0) / pivoted.columnTotals.length
+      : 0;
+
+  return (
+    <div className={`pivot-table-container ${className}`} style={{ overflowX: 'auto' }}>
+      <table
+        style={{
+          width: '100%',
+          borderCollapse: 'collapse',
+          fontSize: '14px',
+          fontFamily: 'inherit',
+        }}
+      >
+        <thead>
+          <tr style={{ backgroundColor: '#f8fafc', borderBottom: '2px solid #e2e8f0' }}>
+            {/* Row label header */}
+            <th
+              style={{
+                padding: '12px 16px',
+                textAlign: 'left',
+                fontWeight: 600,
+                color: '#334155',
+                position: 'sticky',
+                left: 0,
+                backgroundColor: '#f8fafc',
+                zIndex: 1,
+                minWidth: '150px',
+              }}
+            >
+              {rowLabel}
+            </th>
+            {/* Column headers */}
+            {pivoted.columnLabels.map((label, idx) => (
+              <th
+                key={idx}
+                style={{
+                  padding: '12px 16px',
+                  textAlign: 'right',
+                  fontWeight: 600,
+                  color: '#334155',
+                  minWidth: '100px',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {label}
+              </th>
+            ))}
+            {/* Total header */}
+            {showRowTotals && (
+              <th
+                style={{
+                  padding: '12px 16px',
+                  textAlign: 'right',
+                  fontWeight: 700,
+                  color: '#1e40af',
+                  backgroundColor: '#eff6ff',
+                  minWidth: '100px',
+                }}
+              >
+                Total
+              </th>
+            )}
+            {/* Average header */}
+            {showRowAverages && (
+              <th
+                style={{
+                  padding: '12px 16px',
+                  textAlign: 'right',
+                  fontWeight: 700,
+                  color: '#166534',
+                  backgroundColor: '#f0fdf4',
+                  minWidth: '100px',
+                }}
+              >
+                Average
+              </th>
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          {pivoted.rowLabels.map((rowLabel, rowIdx) => (
+            <tr
+              key={rowIdx}
+              style={{
+                borderBottom: '1px solid #e2e8f0',
+                backgroundColor: rowIdx % 2 === 0 ? '#ffffff' : '#f8fafc',
+              }}
+            >
+              {/* Row label */}
+              <td
+                style={{
+                  padding: '10px 16px',
+                  fontWeight: 500,
+                  color: '#1e293b',
+                  position: 'sticky',
+                  left: 0,
+                  backgroundColor: rowIdx % 2 === 0 ? '#ffffff' : '#f8fafc',
+                  zIndex: 1,
+                }}
+              >
+                {rowLabel}
+              </td>
+              {/* Data cells */}
+              {pivoted.matrix[rowIdx].map((value, colIdx) => (
+                <td
+                  key={colIdx}
+                  style={{
+                    padding: '10px 16px',
+                    textAlign: 'right',
+                    color: value === null ? '#94a3b8' : '#334155',
+                    fontVariantNumeric: 'tabular-nums',
+                  }}
+                >
+                  {formatCell(value)}
+                </td>
+              ))}
+              {/* Row total */}
+              {showRowTotals && (
+                <td
+                  style={{
+                    padding: '10px 16px',
+                    textAlign: 'right',
+                    fontWeight: 600,
+                    color: '#1e40af',
+                    backgroundColor: '#eff6ff',
+                    fontVariantNumeric: 'tabular-nums',
+                  }}
+                >
+                  {formatCell(pivoted.rowTotals[rowIdx])}
+                </td>
+              )}
+              {/* Row average */}
+              {showRowAverages && (
+                <td
+                  style={{
+                    padding: '10px 16px',
+                    textAlign: 'right',
+                    fontWeight: 600,
+                    color: '#166534',
+                    backgroundColor: '#f0fdf4',
+                    fontVariantNumeric: 'tabular-nums',
+                  }}
+                >
+                  {formatCell(pivoted.rowAverages[rowIdx])}
+                </td>
+              )}
+            </tr>
+          ))}
+          {/* Column totals row */}
+          {showColumnTotals && (
+            <tr
+              style={{
+                borderTop: '2px solid #e2e8f0',
+                backgroundColor: '#f1f5f9',
+                fontWeight: 600,
+              }}
+            >
+              <td
+                style={{
+                  padding: '12px 16px',
+                  fontWeight: 700,
+                  color: '#1e293b',
+                  position: 'sticky',
+                  left: 0,
+                  backgroundColor: '#f1f5f9',
+                  zIndex: 1,
+                }}
+              >
+                Total
+              </td>
+              {pivoted.columnTotals.map((total, idx) => (
+                <td
+                  key={idx}
+                  style={{
+                    padding: '12px 16px',
+                    textAlign: 'right',
+                    color: '#1e293b',
+                    fontVariantNumeric: 'tabular-nums',
+                  }}
+                >
+                  {formatCell(total)}
+                </td>
+              ))}
+              {showRowTotals && (
+                <td
+                  style={{
+                    padding: '12px 16px',
+                    textAlign: 'right',
+                    fontWeight: 700,
+                    color: '#1e40af',
+                    backgroundColor: '#dbeafe',
+                    fontVariantNumeric: 'tabular-nums',
+                  }}
+                >
+                  {formatCell(pivoted.grandTotal)}
+                </td>
+              )}
+              {showRowAverages && (
+                <td
+                  style={{
+                    padding: '12px 16px',
+                    textAlign: 'right',
+                    fontWeight: 700,
+                    color: '#166534',
+                    backgroundColor: '#dcfce7',
+                    fontVariantNumeric: 'tabular-nums',
+                  }}
+                >
+                  {formatCell(columnTotalsAverage)}
+                </td>
+              )}
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default PivotTable;

package/src/components/index.ts

@@ -404,6 +404,10 @@ export type {
   FrozenRowMode,
 } from './DataGrid';
 
+// PivotTable (cross-tabulation display)
+export { default as PivotTable } from './PivotTable';
+export type { PivotTableProps } from './PivotTable';
+
 export { default as SwipeActions } from './SwipeActions';
 export type { SwipeActionsProps, SwipeAction } from './SwipeActions';