blixify-ui-web-mcp 0.1.57 → 0.1.59

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.
@@ -801,6 +823,14 @@ The panel keeps DataTemplateWrapper for fetching and paging, and uses the shared
 
 ---
 
+### List export and import
+
+**Export** (⋮ → Export CSV / Excel / PDF / QR / Print) shows the list's flex filter rows, started from the filters the list has when the export opens. Changing them changes only that export; the list keeps its own. They are turned into the query when the export runs, so a relative date ("This month", "Last 30 days") means the moment it is downloaded or sent. Formula columns are not offered there, since the export server cannot work them out; a formula filter on the list still narrows the export by the ids of the rows it kept. `bareSettings.bareListFilterQuery` is added as before when `bareCSVExportSettings` is on.
+
+**Import** (⋮ → Import Excel) maps each column of the sheet in one compact row — the Excel column, then the field it fills (`size="xs"` dropdowns) — and the review step names each field as the list does.
+
+---
+
 ### Export PDF from read view
 
 Enable `organise.exportSettings.enableExportReadPDF` to add a PDF export button in the read view toolbar. You can also trigger it programmatically via `ref.handleExportReadPDF()`.
@@ -1084,7 +1114,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.59",
   "license": "MIT",
   "main": "lib/mcp/server.js",
   "bin": {