blixify-ui-web-mcp 0.1.57 → 0.1.58

package/lib/components/data/dataTemplate/README.md

@@ -729,6 +729,28 @@ Use `organise.additionalQuery` to add filter controls above the list. Each entry
 
 ---
 
+### Formula column
+
+A `type: "formula"` column is a monday.com-style formula. It is worked out from the row whenever the row is shown — table, kanban, grid and read view — and never stored on the record. It is a column type of its own: `math` columns and their `mathExpression` are untouched by it.
+
+```tsx
+{
+  id: "spendStatus",
+  name: "Spend Status",
+  type: "formula",
+  formulaExpression: 'IF({spent} > {budget}, "Over budget", "Under budget")',
+}
+```
+
+- **Syntax** follows [monday's formula column](https://support.monday.com/hc/en-us/articles/360001235445-The-Formula-Column): `{Column}` references a column (the builder shows names, the schema stores ids, so renaming a column never breaks a formula), text in quotes, `=` / `<>` compare, `&` joins text (below `+`/`-`, above comparisons, as in monday), `+ - * / ^ %` and `( )`.
+- **Functions** — monday's library, in `src/components/data/formula/functions.ts`: text (`CONCATENATE`, `LEFT`, `LEN`, `REPLACE`, `SEARCH`, `SUBSTITUTE`, `TEXT`, `TRIM` …), logical (`IF`, `SWITCH`, `AND`, `OR`, `XOR`, `NOT`, `EXACT`), numeric (`SUM`, `AVERAGE`, `ROUND`, `ROUNDUP`, `ROUNDDOWN`, `MOD`, `POWER` …), date (`TODAY`, `NOW`, `DAYS`, `WORKDAYS`, `ADD_DAYS`, `FORMAT_DATE`, `WEEKNUM` …) and `PI` / `TRUE` / `FALSE`. Text results are capped at 10,000 characters.
+- **Values:** an empty cell is blank text, 0 in arithmetic and equal to 0 in a comparison with a number. Reference and role columns read their label; a math column reads the number it shows. A formula can read another formula; a circular reference shows `Error`. Files, images, addresses, objects, passwords, signatures, canvas and gantt columns cannot be used.
+- **Adding:** with `bareAddColumns`, pick **Formula** as the type in the header + panel. The builder lists columns and functions with an example of each, validates as you type and previews the first row.
+- **Sort and filter** use the computed value, as monday does: header / view settings sort, and the flex filters. Either makes the list read the matching rows — at most `FORMULA_VIEW_MAX_ROWS` (5,000), in a fixed order, with a notice when there are more — and filter, order and page them locally. The cap also applies to the calendar, map, timeline and legacy grouped views, which otherwise read every row. On Firebase and union lists formula columns are not offered for sorting or filtering. CSV export sends the rows a formula filter kept, by id; "Select all pages" is off in a formula view, and the selection callbacks' query does not carry formula conditions.
+- **Earlier library versions** have no case for `formula`, so they show its cell blank. Apps that build schemas with `parseSpaceToDataStructure` need this version to receive `formulaExpression`; a consumer with its own `DataType` list (blixify-space-next `models/Data.ts`) adds `"formula"` to it.
+
+---
+
 ### With activity log (comments + audit trail)
 
 Enable `edit.activityLog` to open the activity panel from list and read views. It uses the new feeds and pagination UI, an inline comment composer, editable comments, confirmed deletion, and before/after audit values. It follows `organise.darkMode`, including when opened from a legacy table.
@@ -1084,7 +1106,7 @@ Which field types can be edited from the list table, and how. Types not listed u
 
 | Edited **in the cell**                                                                                                                                                                                                   | Edited **in a modal** (cell click opens it)                                                                                 | Read-only in list             | Never rendered as a list column |
 | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------- |
-| `string`, `contact`, `email`, `textArea`, `number`, `boolean` (checkbox and radio commit on select), `date`, `list`, `multipleList`, `person`, `listPerson`, `roles`, `reference`, `listReference`, `referenceSelection` | `image`, `multipleImage`, `address`, `object`, `listObject`, `markdown`, `signature`, `file`, `multipleFile`, `listAddress` | `math` (computed), `password` | `canvas`, `ganttchart`          |
+| `string`, `contact`, `email`, `textArea`, `number`, `boolean` (checkbox and radio commit on select), `date`, `list`, `multipleList`, `person`, `listPerson`, `roles`, `reference`, `listReference`, `referenceSelection` | `image`, `multipleImage`, `address`, `object`, `listObject`, `markdown`, `signature`, `file`, `multipleFile`, `listAddress` | `math` (computed), `formula` (computed), `password` | `canvas`, `ganttchart`          |
 
 - **Why some types edit in a modal:** their editor is bigger than one line. An
   `address` is a Places autocomplete plus a map with a draggable pin plus

package/lib/components/data/dataWrapper/dataWrapper.edit.stories.tsx

@@ -538,6 +538,97 @@ export const DTWInlineEditMatrix = () => {
   );
 };
 
+// INFO: a formula column the monday.com way — added from the header +, written
+// with {Column} references, sorted and filtered on its computed value. Formula
+// rows are read in full (stopLimit) so a sort orders every row, not one page.
+export const DTWFormulaColumn = () => {
+  // 1. State
+  const [mount, setMount] = useState<boolean>(false);
+  const [schema, setSchema] = useState<any[]>(() => [
+    ...InlineEditMatrixSchema.filter((each) =>
+      ["name", "qty", "status", "due", "owner", "site"].includes(each.id),
+    ),
+    {
+      id: "spend",
+      name: "Spend Status",
+      type: "formula" as const,
+      formulaExpression: 'IF({qty} > 20, "Over budget", "Under budget")',
+      optional: true,
+    },
+  ]);
+  const [, setTick] = useState<number>(0);
+
+  // 2. Refs
+  const storeRef = useRef<any[]>(handleBuildMatrixRecords());
+  const ownersRef = useRef<any[]>(handleBuildMatrixOwners());
+  const countersRef = useRef({ list: 0, update: 0, ownerList: 0 });
+  const mockRef = useRef<any>(null);
+
+  // 4. Effects
+  useEffect(() => {
+    mockRef.current = handleInstallMatrixMock(
+      storeRef.current,
+      ownersRef.current,
+      countersRef.current,
+      () => setTick((previous) => previous + 1),
+    );
+    setMount(true);
+    return () => {
+      mockRef.current?.restore();
+      mockRef.current = null;
+    };
+  }, []);
+
+  // 7. Return
+  if (!mount) return <Loading />;
+
+  return (
+    <div className="w-full">
+      <div className="font-semibold mb-1 text-gray-900">DTW Formula Column</div>
+      <div className="text-sm font-light mb-4 text-gray-500">
+        Spend Status is IF({"{Qty}"} &gt; 20, &quot;Over budget&quot;,
+        &quot;Under budget&quot;). Add another formula from the header +, pick
+        Formula as the type and reference columns in braces. Sort a formula from
+        its header or filter it from the flex filters — both run on the computed
+        value.
+      </div>
+      <div className="mb-3 text-xs text-gray-600 font-mono">
+        list calls:{" "}
+        <span data-testid="formula-list-count">{countersRef.current.list}</span>
+      </div>
+      <DataTemplateWrapper
+        title="Budget"
+        type="list"
+        collectionId={MATRIX_COLLECTION}
+        schema={schema}
+        workspace={{
+          apiEndpointType: "mongoDB",
+          apiEndpoint: MATRIX_ENDPOINT,
+          apiEndpointToken: "",
+          apiUserToken: "",
+          assetEndpoint: "",
+          assetUploadEndpoint: "",
+        }}
+        edit={{ allEditable: true, listEditable: true, deleteBtn: false }}
+        bareSettings={{
+          bareNewDTW: true,
+          bareCompactMode: true,
+          bareAddColumns: true,
+          bareFlexFilters: true,
+        }}
+        organise={{
+          // INFO: holds the sort the header sets, as an app's saved view would
+          persistViewState: "session",
+          breadcrumbType: "button",
+          onAddColumns: (model) => setSchema(model),
+        }}
+        handleNavigate={() => {}}
+        limit={5}
+      />
+    </div>
+  );
+};
+
 /**
  * INFO: the shape blixify-space-next actually runs — a live database embedded in
  * a document, with columns addable from the table and rows addable inline.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blixify-ui-web-mcp",
-  "version": "0.1.57",
+  "version": "0.1.58",
   "license": "MIT",
   "main": "lib/mcp/server.js",
   "bin": {