@xeplr/ui-table 1.0.0

package/src/actions/RecordDetail.jsx

@@ -0,0 +1,213 @@
+import React, { useState } from 'react';
+import ChildTable from './ChildTable.jsx';
+
+/**
+ * Detail popup — shows parent record fields at top, child tables below.
+ * Opened on double-click (or view icon) when childDisplay === 'popup'.
+ *
+ * @param {object} props
+ * @param {object}   props.record        - The parent row (with child arrays)
+ * @param {string}   props.rootId        - Row id (or _tempId)
+ * @param {object}   props.schema        - Full schema
+ * @param {Array}    props.schemaColumns - Level 0 columns for display hints
+ * @param {boolean}  props.hasSave       - Whether save is available
+ * @param {object}   props.actions       - Actions controller
+ * @param {Function} props.onClose       - Close handler
+ */
+export default function RecordDetail(props) {
+  var record = props.record;
+  var rootId = props.rootId;
+  var schema = props.schema;
+  var schemaColumns = props.schemaColumns || [];
+  var hasSave = props.hasSave;
+  var actions = props.actions;
+  var onClose = props.onClose;
+
+  var [editing, setEditing] = useState(false);
+  var [editRecord, setEditRecord] = useState(null);
+
+  // Build column lookup for display hints
+  var columnMap = {};
+  for (var i = 0; i < schemaColumns.length; i++) {
+    columnMap[schemaColumns[i].accessor] = schemaColumns[i];
+  }
+
+  // Collect child keys from schema
+  var childKeys = [];
+  var level = 1;
+  while (schema[level]) {
+    if (level === 1) childKeys.push(schema[level].key);
+    level++;
+  }
+
+  // Derive display fields from record (exclude arrays and internal fields)
+  var fields = [];
+  if (record) {
+    var keys = Object.keys(record);
+    for (var i = 0; i < keys.length; i++) {
+      var k = keys[i];
+      if (k === '_tempId') continue;
+      if (Array.isArray(record[k])) continue;
+      var col = columnMap[k];
+      fields.push({
+        accessor: k,
+        header: col ? (col.header || k) : k,
+        dataType: col ? (col.dataType || 'string') : guessType(record[k])
+      });
+    }
+  }
+
+  function guessType(value) {
+    if (typeof value === 'number') return 'number';
+    if (typeof value === 'boolean') return 'boolean';
+    return 'string';
+  }
+
+  function getInputType(dataType) {
+    switch (dataType) {
+      case 'number':  return 'number';
+      case 'date':    return 'date';
+      case 'boolean': return 'checkbox';
+      default:        return 'text';
+    }
+  }
+
+  function handleStartEdit() {
+    setEditing(true);
+    setEditRecord(Object.assign({}, record));
+  }
+
+  function handleFieldChange(field, value) {
+    setEditRecord(function(prev) {
+      var updated = Object.assign({}, prev);
+      updated[field] = value;
+      return updated;
+    });
+  }
+
+  function handleSaveParent() {
+    if (!editRecord) return;
+    // Queue the parent edit
+    var clean = Object.assign({}, editRecord);
+    // Remove child arrays — parent save is own fields only
+    for (var i = 0; i < childKeys.length; i++) {
+      delete clean[childKeys[i]];
+    }
+
+    actions.modal = { mode: 'edit', record: clean, context: { level: 'parent' } };
+    // Directly queue via handleSave logic
+    if (!clean.id && !clean._tempId) {
+      clean._tempId = '__inline_';
+    }
+    // Push to queue manually
+    actions.handleSave.__queueDirect
+      ? actions.handleSave.__queueDirect(clean)
+      : null;
+
+    // Simpler: open the edit modal which handles queueing
+    setEditing(false);
+    setEditRecord(null);
+  }
+
+  // Actually, simpler approach: use the existing modal flow for parent edits
+  function handleEditViaModal() {
+    actions.openEdit(record);
+  }
+
+  function handleCancelEdit() {
+    setEditing(false);
+    setEditRecord(null);
+  }
+
+  var displayRecord = editing ? editRecord : record;
+
+  return (
+    <div className="xeplr-table-modal-overlay" onClick={onClose}>
+      <div className="xeplr-table-detail" onClick={function(e) { e.stopPropagation(); }}>
+        <div className="xeplr-table-modal-header">
+          <span className="xeplr-table-modal-title">Record Detail</span>
+          <button type="button" className="xeplr-table-modal-close" onClick={onClose}>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+
+        <div className="xeplr-table-detail-body">
+          {/* ── Parent fields ── */}
+          <div className="xeplr-table-detail-fields">
+            {fields.map(function(field) {
+              var value = displayRecord[field.accessor];
+              var inputType = getInputType(field.dataType);
+              var isId = field.accessor === 'id';
+              var disabled = !editing || isId;
+
+              if (inputType === 'checkbox') {
+                return (
+                  <div key={field.accessor} className="xeplr-table-detail-field">
+                    <span className="xeplr-table-detail-label">{field.header}</span>
+                    <input
+                      type="checkbox"
+                      className="xeplr-table-modal-checkbox"
+                      checked={!!value}
+                      disabled={disabled}
+                      onChange={function(e) { handleFieldChange(field.accessor, e.target.checked); }}
+                    />
+                  </div>
+                );
+              }
+
+              return (
+                <div key={field.accessor} className="xeplr-table-detail-field">
+                  <span className="xeplr-table-detail-label">
+                    {field.header}
+                    {isId && <span className="xeplr-table-modal-id-badge">ID</span>}
+                  </span>
+                  {editing ? (
+                    <input
+                      type={inputType}
+                      className="xeplr-table-modal-input"
+                      value={value != null ? value : ''}
+                      disabled={disabled}
+                      onChange={function(e) { handleFieldChange(field.accessor, e.target.value); }}
+                    />
+                  ) : (
+                    <span className="xeplr-table-detail-value">{value != null ? String(value) : '—'}</span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+
+          {/* ── Parent actions ── */}
+          <div className="xeplr-table-detail-actions">
+            {!editing && hasSave && (
+              <button type="button" className="xeplr-table-modal-btn xeplr-table-modal-btn-primary" onClick={handleEditViaModal}>
+                Edit
+              </button>
+            )}
+          </div>
+
+          {/* ── Child tables ── */}
+          {childKeys.map(function(ck) {
+            var nextLevel = schema[1];
+            if (!nextLevel || nextLevel.key !== ck) return null;
+
+            return (
+              <div key={ck} className="xeplr-table-detail-children">
+                <ChildTable
+                  rootId={rootId}
+                  path={[ck]}
+                  schemaLevel={1}
+                  schema={schema}
+                  rows={record[ck] || []}
+                  actions={actions}
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/actions/RecordModal.jsx

@@ -0,0 +1,159 @@
+import React from 'react';
+
+/**
+ * Modal overlay for viewing, editing, or adding a record.
+ *
+ * Form fields are auto-generated from ALL keys in the record.
+ * Schema columns provide display hints (header, dataType) where available.
+ * Fields not in schema columns still appear — with the key name as header.
+ *
+ * @param {object} props
+ * @param {string}   props.mode           - 'view' | 'edit' | 'add'
+ * @param {object}   props.record         - Current form data
+ * @param {Array}    [props.schemaColumns] - Schema column configs for display hints
+ * @param {boolean}  props.hasSave        - Whether save action is available
+ * @param {Function} props.onFieldChange  - (accessor, value) => void
+ * @param {Function} props.onSave         - Save handler
+ * @param {Function} props.onEdit         - Switch to edit mode
+ * @param {Function} props.onClose        - Close modal
+ */
+export default function RecordModal(props) {
+  var mode = props.mode;
+  var record = props.record;
+  var schemaColumns = props.schemaColumns || [];
+  var hasSave = props.hasSave;
+  var onFieldChange = props.onFieldChange;
+  var onSave = props.onSave;
+  var onEdit = props.onEdit;
+  var onClose = props.onClose;
+
+  var isReadOnly = mode === 'view';
+  var title = mode === 'view' ? 'View Record' : mode === 'edit' ? 'Edit Record' : 'Add Record';
+
+  // Build column lookup for display hints
+  var columnMap = {};
+  for (var i = 0; i < schemaColumns.length; i++) {
+    columnMap[schemaColumns[i].accessor] = schemaColumns[i];
+  }
+
+  // Derive form fields from ALL keys in the record
+  var fields = [];
+  if (record) {
+    var keys = Object.keys(record);
+    for (var i = 0; i < keys.length; i++) {
+      var k = keys[i];
+      if (k === '_tempId') continue;
+      // Skip array fields (those are child tables, not form fields)
+      if (Array.isArray(record[k])) continue;
+
+      var col = columnMap[k];
+      fields.push({
+        accessor: k,
+        header: col ? (col.header || k) : k,
+        dataType: col ? (col.dataType || 'string') : guessType(record[k])
+      });
+    }
+  }
+
+  function guessType(value) {
+    if (typeof value === 'number') return 'number';
+    if (typeof value === 'boolean') return 'boolean';
+    return 'string';
+  }
+
+  function getInputType(dataType) {
+    switch (dataType) {
+      case 'number':  return 'number';
+      case 'date':    return 'date';
+      case 'boolean': return 'checkbox';
+      default:        return 'text';
+    }
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    onSave();
+  }
+
+  return (
+    <div className="xeplr-table-modal-overlay" onClick={onClose}>
+      <div className="xeplr-table-modal" onClick={function(e) { e.stopPropagation(); }}>
+        <div className="xeplr-table-modal-header">
+          <span className="xeplr-table-modal-title">{title}</span>
+          <button type="button" className="xeplr-table-modal-close" onClick={onClose}>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+
+        <form className="xeplr-table-modal-body" onSubmit={handleSubmit}>
+          {fields.map(function(field) {
+            var value = record[field.accessor];
+            var inputType = getInputType(field.dataType);
+            var isId = field.accessor === 'id';
+            var disabled = isReadOnly || isId;
+
+            if (inputType === 'checkbox') {
+              return (
+                <div key={field.accessor} className="xeplr-table-modal-field">
+                  <label className="xeplr-table-modal-label">{field.header}</label>
+                  <input
+                    type="checkbox"
+                    className="xeplr-table-modal-checkbox"
+                    checked={!!value}
+                    disabled={disabled}
+                    onChange={function(e) { onFieldChange(field.accessor, e.target.checked); }}
+                  />
+                </div>
+              );
+            }
+
+            return (
+              <div key={field.accessor} className="xeplr-table-modal-field">
+                <label className="xeplr-table-modal-label">
+                  {field.header}
+                  {isId && <span className="xeplr-table-modal-id-badge">ID</span>}
+                </label>
+                <input
+                  type={inputType}
+                  className="xeplr-table-modal-input"
+                  value={value != null ? value : ''}
+                  disabled={disabled}
+                  onChange={function(e) { onFieldChange(field.accessor, e.target.value); }}
+                />
+              </div>
+            );
+          })}
+
+          <div className="xeplr-table-modal-footer">
+            {isReadOnly && hasSave && (
+              <button
+                type="button"
+                className="xeplr-table-modal-btn xeplr-table-modal-btn-primary"
+                onClick={function() { onEdit(record); }}
+              >
+                Edit
+              </button>
+            )}
+            {!isReadOnly && (
+              <button
+                type="submit"
+                className="xeplr-table-modal-btn xeplr-table-modal-btn-primary"
+              >
+                Save
+              </button>
+            )}
+            <button
+              type="button"
+              className="xeplr-table-modal-btn"
+              onClick={onClose}
+            >
+              {isReadOnly ? 'Close' : 'Cancel'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/buildChangeSet.js

@@ -0,0 +1,126 @@
+/**
+ * Build a sparse deep diff between original and staged data.
+ * Recursive — supports N levels of nesting via schema.
+ *
+ * Rules:
+ *   - No id           → new record (include all fields)
+ *   - Has id, changed → include id + only changed fields
+ *   - Has id, deleted → { id, deleted: true }
+ *   - Unchanged       → omitted entirely
+ *
+ * @param {Array}  originalData - Original data
+ * @param {Array}  stagedData   - Staged data after queue applied
+ * @param {object} schema       - { 0: { key, columns }, 1: { key, columns }, ... }
+ * @param {number} [level]      - Current nesting level (default: 0)
+ * @returns {Array} Sparse changeset
+ */
+export function buildChangeSet(originalData, stagedData, schema, level) {
+  level = level || 0;
+
+  // Determine child key from next level in schema
+  var nextLevel = schema[level + 1];
+  var childKey = nextLevel ? nextLevel.key : null;
+
+  // Collect all child keys at deeper levels rooted under this level
+  var childKeys = [];
+  var l = level + 1;
+  while (schema[l]) {
+    if (l === level + 1) childKeys.push(schema[l].key);
+    l++;
+  }
+
+  var originalMap = new Map();
+  for (var i = 0; i < originalData.length; i++) {
+    originalMap.set(originalData[i].id, originalData[i]);
+  }
+
+  var stagedMap = new Map();
+  for (var i = 0; i < stagedData.length; i++) {
+    var row = stagedData[i];
+    var key = row._tempId || row.id;
+    stagedMap.set(key, row);
+  }
+
+  var changes = [];
+
+  // ── New and modified records ──
+  stagedMap.forEach(function(staged) {
+    var isNew = !!staged._tempId || !staged.id;
+
+    if (isNew) {
+      changes.push(buildNewRecord(staged, childKey));
+    } else {
+      var original = originalMap.get(staged.id);
+      if (!original) return;
+
+      var fieldDiff = diffFields(original, staged, childKeys);
+      var childDiffResult = null;
+
+      if (childKey) {
+        var origChildren = original[childKey] || [];
+        var stagedChildren = staged[childKey] || [];
+        var childChanges = buildChangeSet(origChildren, stagedChildren, schema, level + 1);
+        if (childChanges.length > 0) {
+          childDiffResult = childChanges;
+        }
+      }
+
+      if (fieldDiff || childDiffResult) {
+        var entry = fieldDiff ? Object.assign({ id: staged.id }, fieldDiff) : { id: staged.id };
+        if (childDiffResult) {
+          entry[childKey] = childDiffResult;
+        }
+        changes.push(entry);
+      }
+    }
+  });
+
+  // ── Deleted records ──
+  originalMap.forEach(function(original, id) {
+    if (!stagedMap.has(id)) {
+      changes.push({ id: id, deleted: true });
+    }
+  });
+
+  return changes;
+}
+
+/**
+ * Build a new record for the changeset (strip internal fields).
+ * Recursively cleans child arrays.
+ */
+function buildNewRecord(staged, childKey) {
+  var rec = {};
+  var keys = Object.keys(staged);
+  for (var i = 0; i < keys.length; i++) {
+    var k = keys[i];
+    if (k === '_tempId') continue;
+
+    if (k === childKey && Array.isArray(staged[k])) {
+      rec[k] = staged[k].map(function(child) {
+        return buildNewRecord(child, null);
+      });
+    } else {
+      rec[k] = staged[k];
+    }
+  }
+  return rec;
+}
+
+/**
+ * Diff own fields (excluding id, _tempId, and child array keys).
+ */
+function diffFields(original, staged, childKeys) {
+  var diff = null;
+  var keys = Object.keys(staged);
+  for (var i = 0; i < keys.length; i++) {
+    var k = keys[i];
+    if (k === 'id' || k === '_tempId') continue;
+    if (childKeys.indexOf(k) !== -1) continue;
+    if (staged[k] !== original[k]) {
+      if (!diff) diff = {};
+      diff[k] = staged[k];
+    }
+  }
+  return diff;
+}

package/src/detectTypes.js

@@ -0,0 +1,102 @@
+const TYPES = {
+  STRING: 'string',
+  NUMBER: 'number',
+  DATE: 'date',
+  BOOLEAN: 'boolean'
+};
+
+const BOOLEAN_VALUES = new Set([true, false, 0, 1, '0', '1', 'true', 'false', 'True', 'False', 'TRUE', 'FALSE']);
+
+const MAX_SAMPLE_ROWS = 100;
+
+/**
+ * Detect column data types from row data.
+ *
+ * @param {Array<object>} data       - Row array
+ * @param {Array<object>} columns    - Column defs: [{ accessor, dataType? }]
+ * @param {number}        [minRows]  - Minimum non-null samples needed for a confident detection
+ * @returns {{ types: Map<string, string>, confident: boolean }}
+ *   - types: Map of accessor → 'string' | 'number' | 'date' | 'boolean'
+ *   - confident: true if every column had enough samples (≥ minRows)
+ */
+export function detectTypes(data, columns, minRows = 10) {
+  var types = new Map();
+  var confident = true;
+  var sampleRows = data.slice(0, MAX_SAMPLE_ROWS);
+
+  for (var i = 0; i < columns.length; i++) {
+    var col = columns[i];
+    var accessor = col.accessor;
+
+    // Explicit dataType — always trust it
+    if (col.dataType) {
+      types.set(accessor, col.dataType);
+      continue;
+    }
+
+    // Collect non-null, non-undefined, non-empty-string values
+    var values = [];
+    for (var r = 0; r < sampleRows.length; r++) {
+      var val = sampleRows[r][accessor];
+      if (val !== null && val !== undefined && val !== '') {
+        values.push(val);
+      }
+    }
+
+    // Not enough data — mark as inconclusive, fallback to string
+    if (values.length < minRows) {
+      confident = false;
+      types.set(accessor, values.length === 0 ? TYPES.STRING : detectSingle(values));
+      continue;
+    }
+
+    types.set(accessor, detectSingle(values));
+  }
+
+  return { types, confident };
+}
+
+/**
+ * Detect the type of a single column from its sampled values.
+ * Order matters: boolean → number → date → string
+ */
+function detectSingle(values) {
+  // Boolean check — all values must be boolean-ish
+  var allBoolean = true;
+  for (var i = 0; i < values.length; i++) {
+    if (!BOOLEAN_VALUES.has(values[i])) {
+      allBoolean = false;
+      break;
+    }
+  }
+  if (allBoolean) return TYPES.BOOLEAN;
+
+  // Number check — all values must be numeric
+  var allNumber = true;
+  for (var i = 0; i < values.length; i++) {
+    if (typeof values[i] === 'boolean') { allNumber = false; break; }
+    var num = Number(values[i]);
+    if (isNaN(num)) { allNumber = false; break; }
+  }
+  if (allNumber) return TYPES.NUMBER;
+
+  // Date check — all values must parse as dates AND not be plain numbers
+  var allDate = true;
+  for (var i = 0; i < values.length; i++) {
+    var v = values[i];
+    // Skip plain numbers — they parse as dates but aren't
+    if (typeof v === 'number' || (typeof v === 'string' && v.trim() !== '' && !isNaN(Number(v)))) {
+      allDate = false;
+      break;
+    }
+    if (isNaN(Date.parse(v))) {
+      allDate = false;
+      break;
+    }
+  }
+  if (allDate) return TYPES.DATE;
+
+  return TYPES.STRING;
+}
+
+export { TYPES };

package/src/filters/BooleanFilter.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import FilterWrapper from './FilterWrapper.jsx';
+
+/**
+ * Boolean filter: True / False / All toggle.
+ *
+ * Filter value shape: { value: true | false | null }
+ */
+export default function BooleanFilter({ column }) {
+  var currentFilter = column.getFilterValue() || { value: null };
+  var isActive = currentFilter.value !== null;
+
+  function setValue(val) {
+    column.setFilterValue(currentFilter.value === val ? { value: null } : { value: val });
+  }
+
+  function handleClear() {
+    column.setFilterValue(undefined);
+  }
+
+  return (
+    <FilterWrapper isActive={isActive} onClear={handleClear}>
+      <div className="xeplr-table-boolean-filter">
+        <button
+          type="button"
+          className={'xeplr-table-bool-btn' + (currentFilter.value === null ? ' active' : '')}
+          onClick={function() { column.setFilterValue(undefined); }}
+        >
+          All
+        </button>
+        <button
+          type="button"
+          className={'xeplr-table-bool-btn' + (currentFilter.value === true ? ' active' : '')}
+          onClick={function() { setValue(true); }}
+        >
+          True
+        </button>
+        <button
+          type="button"
+          className={'xeplr-table-bool-btn' + (currentFilter.value === false ? ' active' : '')}
+          onClick={function() { setValue(false); }}
+        >
+          False
+        </button>
+      </div>
+    </FilterWrapper>
+  );
+}
+
+function toBool(val) {
+  if (val === true || val === 1 || val === '1' || val === 'true' || val === 'True' || val === 'TRUE') return true;
+  if (val === false || val === 0 || val === '0' || val === 'false' || val === 'False' || val === 'FALSE') return false;
+  return null;
+}
+
+/**
+ * Custom filter function for boolean columns.
+ */
+export function booleanFilterFn(row, columnId, filterValue) {
+  if (!filterValue || filterValue.value === null || filterValue.value === undefined) return true;
+
+  var raw = row.getValue(columnId);
+  var bool = toBool(raw);
+
+  return bool === filterValue.value;
+}