@proteinjs/db-ui 1.12.1 → 1.13.0

package/dist/test/recordTableDefaultRenderers.test.js

@@ -0,0 +1,309 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @jest-environment jsdom
+ *
+ * RecordTable's polished defaults (the admin-surface polish rev). Contracts as OUTCOMES:
+ *  1. Column pick is tiered meaningful-data, not schema order: identity strings → status-like →
+ *     booleans → references → rest, hidden columns never picked, long-text demoted; capped at
+ *     five + created/updated.
+ *  2. Booleans render the check/dash grammar (no ✅/❌ emoji).
+ *  3. DateTime values render humanized with the precise absolute on the title.
+ *  4. Status-like short strings render as the quiet chip.
+ *  5. References render as a LINK to the referenced record's form — short id immediately,
+ *     enriched to the record's name once resolution lands.
+ *  6. Numeric columns right-align.
+ */
+var react_1 = __importDefault(require("react"));
+var moment_1 = __importDefault(require("moment"));
+var client_1 = require("react-dom/client");
+var test_utils_1 = require("react-dom/test-utils");
+var react_router_dom_1 = require("react-router-dom");
+var react_query_1 = require("react-query");
+var ui_1 = require("@proteinjs/ui");
+var db_1 = require("@proteinjs/db");
+var RecordTable_1 = require("../src/table/RecordTable");
+var ReferenceCellValue_1 = require("../src/table/ReferenceCellValue");
+// ReferenceCellValue resolves through Reference.get(); the fake resolves user-9 to a named
+// record so the enrichment path is observable without a db.
+jest.mock('@proteinjs/db', function () {
+    var actual = jest.requireActual('@proteinjs/db');
+    var FakeReference = /** @class */ (function () {
+        function FakeReference(_table, _id) {
+            this._table = _table;
+            this._id = _id;
+        }
+        FakeReference.prototype.get = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    if (this._id === 'user-9') {
+                        return [2 /*return*/, { id: 'user-9', name: 'Brent Test' }];
+                    }
+                    throw new Error('not visible');
+                });
+            });
+        };
+        return FakeReference;
+    }());
+    return __assign(__assign({}, actual), { Reference: FakeReference });
+});
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+var StubIntersectionObserver = /** @class */ (function () {
+    function StubIntersectionObserver() {
+    }
+    StubIntersectionObserver.prototype.observe = function () { };
+    StubIntersectionObserver.prototype.unobserve = function () { };
+    StubIntersectionObserver.prototype.disconnect = function () { };
+    return StubIntersectionObserver;
+}());
+globalThis.IntersectionObserver = StubIntersectionObserver;
+var MemberTable = /** @class */ (function (_super) {
+    __extends(MemberTable, _super);
+    function MemberTable() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.name = 'admin_test_member';
+        _this.columns = (0, db_1.withRecordColumns)({
+            // schema order is deliberately adversarial: the tiers must reorder it
+            secret: new db_1.StringColumn('secret', { ui: { hidden: true } }),
+            notes: new db_1.StringColumn('notes', {}, 4000),
+            verified: new db_1.BooleanColumn('verified'),
+            invitedBy: new db_1.ReferenceColumn('invited_by', 'user', false),
+            email: new db_1.StringColumn('email'),
+            status: new db_1.StringColumn('status'),
+            loginCount: new db_1.IntegerColumn('login_count'),
+            lastSeen: new db_1.DateTimeColumn('last_seen'),
+        });
+        return _this;
+    }
+    return MemberTable;
+}(db_1.Table));
+var lastSeen = (0, moment_1.default)('2026-05-04 14:30:00', 'YYYY-MM-DD HH:mm:ss');
+var row = {
+    id: 'member-1',
+    secret: 'never-shown',
+    notes: 'a long note',
+    verified: true,
+    invitedBy: { _table: 'user', _id: 'user-9' },
+    email: 'brent+test@n3xa.io',
+    status: 'active',
+    loginCount: 12,
+    lastSeen: lastSeen,
+    created: (0, moment_1.default)('2026-01-02T03:04:05.000Z'),
+    updated: (0, moment_1.default)('2026-02-03T04:05:06.000Z'),
+};
+describe('defaultRecordTableColumns (meaningful-data tiers)', function () {
+    it('picks identity → status → booleans → references, skips hidden, demotes long text, caps at five + created/updated', function () {
+        var columns = (0, RecordTable_1.defaultRecordTableColumns)(new MemberTable());
+        expect(columns).toEqual(['email', 'status', 'verified', 'invitedBy', 'loginCount', 'created', 'updated']);
+    });
+    it('compound identity names promote too (userEmail leads a session-shaped table)', function () {
+        var SessionishTable = /** @class */ (function (_super) {
+            __extends(SessionishTable, _super);
+            function SessionishTable() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this.name = 'admin_test_sessionish';
+                _this.columns = (0, db_1.withRecordColumns)({
+                    sessionId: new db_1.StringColumn('session_id'),
+                    session: new db_1.StringColumn('serialized_session', {}, 4000),
+                    userEmail: new db_1.StringColumn('user_email'),
+                });
+                return _this;
+            }
+            return SessionishTable;
+        }(db_1.Table));
+        var columns = (0, RecordTable_1.defaultRecordTableColumns)(new SessionishTable());
+        expect(columns[0]).toBe('userEmail');
+        // the long-text blob demotes behind the short columns
+        expect(columns.indexOf('session')).toBeGreaterThan(columns.indexOf('sessionId'));
+    });
+    it('name leads when the table has one', function () {
+        var NamedTable = /** @class */ (function (_super) {
+            __extends(NamedTable, _super);
+            function NamedTable() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this.name = 'admin_test_named';
+                _this.columns = (0, db_1.withRecordColumns)({
+                    email: new db_1.StringColumn('email'),
+                    name: new db_1.StringColumn('name'),
+                });
+                return _this;
+            }
+            return NamedTable;
+        }(db_1.Table));
+        var columns = (0, RecordTable_1.defaultRecordTableColumns)(new NamedTable());
+        expect(columns[0]).toBe('name');
+        expect(columns).toContain('email');
+    });
+});
+describe('RecordTable default renderers', function () {
+    var container;
+    var root;
+    var client;
+    beforeEach(function () {
+        (0, ReferenceCellValue_1.clearReferenceNameCache)();
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = (0, client_1.createRoot)(container);
+        client = new react_query_1.QueryClient({ defaultOptions: { queries: { retry: false, cacheTime: 0 } } });
+    });
+    afterEach(function () {
+        (0, test_utils_1.act)(function () { return root.unmount(); });
+        container.remove();
+    });
+    var mount = function (columns) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            root.render(react_1.default.createElement(react_query_1.QueryClientProvider, { client: client },
+                                react_1.default.createElement(react_router_dom_1.MemoryRouter, null,
+                                    react_1.default.createElement(RecordTable_1.RecordTable, __assign({ table: new MemberTable(), tableLoader: new ui_1.StaticTableLoader([row], { dataKey: "default-renderers-".concat(Math.random()), dataQueryKey: 'all' }), hideButtons: true }, (columns ? { columns: columns } : {}))))));
+                            return [2 /*return*/];
+                        });
+                    }); })];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 0); })];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                case 2:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var cellFor = function (index) { return container.querySelectorAll('tbody td')[index]; };
+    it('booleans render check/dash, datetimes humanized with absolute title, status as the chip', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var titled, chip;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, mount(['verified', 'lastSeen', 'status'])];
+                case 1:
+                    _a.sent();
+                    expect(cellFor(0).querySelector('svg')).not.toBeNull();
+                    expect(cellFor(0).textContent).not.toContain('✅');
+                    expect(cellFor(1).textContent).toBe('May 4, 2026');
+                    titled = cellFor(1).querySelector('[title]');
+                    expect(titled.getAttribute('title')).toBe(lastSeen.format('ddd, MMM D YYYY, h:mm:ss A'));
+                    chip = cellFor(2);
+                    expect(chip.textContent).toBe('active');
+                    // the chip carries its tone dot (an inner span before the text)
+                    expect(chip.querySelectorAll('span span').length).toBeGreaterThan(0);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('references render as a link to the record form — short id first, the name once resolved', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var link;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, mount(['invitedBy'])];
+                case 1:
+                    _a.sent();
+                    link = cellFor(0).querySelector('a');
+                    expect(link).not.toBeNull();
+                    expect(link.getAttribute('href')).toBe('/record/form?table=user&record=user-9');
+                    // resolution lands: the short id enriches to the referenced record's name
+                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 0); })];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                case 2:
+                    // resolution lands: the short id enriches to the referenced record's name
+                    _a.sent();
+                    expect(cellFor(0).textContent).toBe('Brent Test');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('numeric columns right-align', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, mount(['loginCount'])];
+                case 1:
+                    _a.sent();
+                    expect(cellFor(0).className).toContain('MuiTableCell-alignRight');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});
+//# sourceMappingURL=recordTableDefaultRenderers.test.js.map

package/dist/test/recordTableDefaultRenderers.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recordTableDefaultRenderers.test.js","sourceRoot":"","sources":["../../test/recordTableDefaultRenderers.test.tsx"],"names":[],"mappings":"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"}

package/index.ts

@@ -1,4 +1,5 @@
 export * from './src/table/RecordTable';
+export * from './src/table/ReferenceCellValue';
 export * from './src/table/QueryTableLoader';
 export * from './src/table/QueryCursorLoader';
 export * from './src/form/RecordForm';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteinjs/db-ui",
-  "version": "1.12.1",
+  "version": "1.13.0",
   "description": "Db ui components",
   "publishConfig": {
     "access": "public"
@@ -26,12 +26,13 @@
     "@emotion/styled": "11.11.0",
     "@mui/icons-material": "5.14.11",
     "@mui/material": "5.14.11",
-    "@proteinjs/db": "^1.35.1",
+    "@proteinjs/db": "^1.36.0",
     "@proteinjs/reflection": "^1.2.0",
-    "@proteinjs/ui": "^4.10.0",
+    "@proteinjs/ui": "^4.11.0",
     "@proteinjs/util": "^1.6.1",
     "moment": "2.29.4",
     "react": "18.2.0",
+    "react-router-dom": "6.16.0",
     "string": "3.3.3",
     "uuid": "8.3.0"
   },
@@ -55,5 +56,5 @@
   },
   "main": "./dist/generated/index.js",
   "types": "./dist/generated/index.d.ts",
-  "gitHead": "ab6c2ca7ce824c1c1f22fdc7853eb93cb5334172"
+  "gitHead": "2f13a452ede8635dbb130f70b5e5a9342c67f2f7"
 }

package/src/form/RecordForm.tsx

@@ -15,6 +15,9 @@ import {
   ReferenceArray,
   ReferenceColumn,
   ReferenceArrayColumn,
+  StringColumn,
+  ObjectColumn,
+  ArrayColumn,
 } from '@proteinjs/db';
 import { recordTableLink } from '../pages/RecordTablePage';
 import { recordFormLink } from '../pages/RecordFormPage';
@@ -206,6 +209,20 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
     return recordFormCustomization.getFieldRenderer(columnPropertyName, record);
   }
 
+  /**
+   * A long-text column (maxLength past the 255 default) gets a multiline input — a
+   * single-line input truncates exactly the values (descriptions, failure messages,
+   * serialized payloads) an admin opens the form to read.
+   */
+  function isLongTextColumn(column: Column<T, any>) {
+    if (!isInstanceOf(column, StringColumn)) {
+      return false;
+    }
+
+    const { maxLength } = column as unknown as StringColumn;
+    return maxLength === 'MAX' || maxLength > 255;
+  }
+
   /** Pick the field control that tells the truth about the column's type. */
   function createField(columnPropertyName: string, column: Column<T, any>) {
     const name = columnPropertyName;
@@ -235,6 +252,8 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
       return dateField({ name, label, includeTime: true });
     }
 
+    // Reference columns keep their id controls — they must sit BEFORE the structured/long-text
+    // branches (ReferenceArrayColumn descends from ObjectColumn, whose storage is a MAX string).
     if (isInstanceOf(column, ReferenceColumn)) {
       const { referenceTable } = column as unknown as ReferenceColumn<any>;
       return textField({
@@ -258,6 +277,16 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
       });
     }
 
+    // Structured values edit as pretty-printed JSON in a mono multiline (loaded/saved through
+    // onLoad/getFieldValue).
+    if (isInstanceOf(column, ObjectColumn) || isInstanceOf(column, ArrayColumn)) {
+      return textField({ name, label, description: 'JSON', multiline: true, monospace: true });
+    }
+
+    if (isLongTextColumn(column)) {
+      return textField({ name, label, multiline: true });
+    }
+
     return textField({ name, label });
   }
 
@@ -298,9 +327,26 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
     const layoutColumns = Object.entries(columns).length > 6 ? 2 : 1;
     if (layoutColumns > 1) {
       const layout: (keyof T)[][] = [];
+      let lastRowIsSolo = false;
       for (const columnPropertyName in columns) {
-        if (layout.length == 0 || layout[layout.length - 1].length >= layoutColumns) {
+        const column = columns[columnPropertyName];
+        // Multiline fields (long text / JSON) take a full-width row of their own — half a
+        // two-column row squeezes exactly the fields that hold the most text.
+        const isMultiline =
+          !isReadonlyField(columnPropertyName, column) &&
+          !getFieldRenderer(columnPropertyName) &&
+          (isLongTextColumn(column) ||
+            ((isInstanceOf(column, ObjectColumn) || isInstanceOf(column, ArrayColumn)) &&
+              !isInstanceOf(column, ReferenceArrayColumn)));
+        if (isMultiline) {
+          layout.push([columnPropertyName as keyof T]);
+          lastRowIsSolo = true;
+          continue;
+        }
+
+        if (layout.length == 0 || lastRowIsSolo || layout[layout.length - 1].length >= layoutColumns) {
           layout.push([]);
+          lastRowIsSolo = false;
         }
 
         layout[layout.length - 1].push(columnPropertyName as keyof T);
@@ -346,6 +392,23 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
       return parseDateInputValue(fieldValue);
     }
 
+    // Structured columns round-trip through the JSON the multiline field presents; a paste
+    // that isn't JSON fails the save with a message naming the field, not a driver error.
+    if (
+      (isInstanceOf(column, ObjectColumn) || isInstanceOf(column, ArrayColumn)) &&
+      !isInstanceOf(column, ReferenceArrayColumn)
+    ) {
+      if (typeof fieldValue !== 'string' || !fieldValue.trim()) {
+        return null;
+      }
+
+      try {
+        return JSON.parse(fieldValue);
+      } catch {
+        throw new Error(`${StringUtil.humanizeCamel(columnPropertyName)} must be valid JSON`);
+      }
+    }
+
     return fieldValue;
   }
 
@@ -490,8 +553,18 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
         // The native date input takes its own value format
         fieldValue = moment(fieldValue).format('YYYY-MM-DD');
       } else if (moment.isMoment(fieldValue)) {
-        // Readonly timestamps (created/updated/DateTimeColumn) display human-formatted, copyable
-        fieldValue = fieldValue.format('ddd, MMM Do YY, h:mm:ss a');
+        // Readonly timestamps (created/updated/DateTimeColumn) display compact and copyable,
+        // with the relative read ('2 hours ago') as the field's helper line.
+        field.description = fieldValue.fromNow();
+        fieldValue = fieldValue.format('MMM D, YYYY, h:mm A');
+      } else if (
+        (isInstanceOf(column, ObjectColumn) || isInstanceOf(column, ArrayColumn)) &&
+        !isInstanceOf(column, ReferenceArrayColumn) &&
+        fieldValue != null &&
+        typeof fieldValue !== 'string'
+      ) {
+        // Structured values present as pretty-printed JSON in their multiline field
+        fieldValue = JSON.stringify(fieldValue, null, 2);
       }
 
       field.value = fieldValue;