blixify-ui-web-mcp 0.1.26 → 0.1.27

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

@@ -212,6 +212,26 @@ Hide and reorder are **per user** by default, kept in `persistViewState`. Wire
 the change is written to the model and handed to the consumer to persist for everyone — which
 is what a Space-backed DTW wants.
 
+Persist the single change, not the list. `onChangeHide` passes the columns as shown plus the
+edit that was made, and `onChangeDrag` passes the two column ids:
+
+```tsx
+organise={{
+  onChangeHide: (_columns, change) => {
+    // INFO: apply the one edit to the stored columns — the on-screen list may carry a
+    // saved view, another tab's state or a copy older than the stored one
+    const next =
+      "showAll" in change
+        ? stored.map((each) => ({ ...each, hide: false }))
+        : stored.map((each) =>
+            each.id === change.columnId ? { ...each, hide: change.hide } : each,
+          );
+    handleSaveColumns(next);
+  },
+  onChangeDrag: (dragId, dropId) => handleSaveColumns(handleMove(stored, dragId, dropId)),
+}}
+```
+
 ## Step-by-Step Setup
 
 **1. Install peer dependencies**
@@ -986,8 +1006,8 @@ Which field types can be edited from the list table, and how. Types not listed u
 | `addColumnEnabled`            | `boolean`                                                                   | Shows an add-column button in the table header                                                                                                                                                                                                                                                                        |
 | `persistViewState`            | `"persistent" \| "session"`                                                 | Remembers the list's sort, filters, hidden columns, page, rows per page, search and reading position per collection, so a Back navigation lands where the user left. `"persistent"` uses `localStorage`; `"session"` writes `sessionStorage` and reads it first, falling back to `localStorage`. The reading position is restored on mount and on returning from a record, not on a tab switch; with several lists on one page, only the list a record was last opened from restores (tracked in `blixify-dtw-persist-last-drill`). Covers table, list, grid, kanban and feeds; not map. List view only                                        |
 | `persistKey`                  | `string`                                                                    | Keeps a separate saved view state for this instance: the storage key becomes `blixify-dtw-persist-<collectionId>-<persistKey>`. Saved state is read once, on mount, so give the component a React `key` that changes with `persistKey`                                                                               |
-| `savedViews`                  | `boolean`                                                                   | Shows a row of view tags under the tab bar: save the current filters, flex filters, sort, rows per page and columns under a name, reapply it, update it or delete it. Views belong to the tab they were saved on and are kept in `localStorage` under `blixify-dtw-views-<collectionId>[-<persistKey>][-<currentUser.userEmail>]`. Sort is held by the template while it is on, as with `persistViewState` |
-| `defaultSavedViews`           | `DefaultSavedView[]`                                                        | Views provided by the app (`{ id?, name, tabId?, state }`), listed before the user's own and never deleted. Without `tabId` a view is listed on every tab. A field left out of `state` is reset to its default when the view is applied |
+| `savedViews`                  | `boolean`                                                                   | Shows a row of view tags under the tab bar: save the current filters, flex filters, sort, rows per page and columns under a name, reapply it, update it or delete it. Views belong to the tab they were saved on and are kept in `localStorage` under `blixify-dtw-views-<collectionId>[-<persistKey>][-<currentUser.userEmail>]`. Sort is held by the template while it is on, as with `persistViewState`, and applying a view calls `onChangeSort`, `onChangePagination(0)` and `bareListHandleFilter` when those change. Each write re-reads storage first, so views saved in another browser tab are kept. With `onChangeHide` / `onChangeDrag`, a view's hides and column order stay on screen only: a toggle or reorder after applying one writes back the schema's columns plus that single change |
+| `defaultSavedViews`           | `DefaultSavedView[]`                                                        | Views provided by the app (`{ id?, name, tabId?, state }`), listed before the user's own and never deleted. Without `tabId` a view is listed on every tab. A field left out of `state` is reset to its default when the view is applied. `id` must be unique; without one the view gets `default-<index>`, its position in the whole array |
 | `groupBy`                     | `string`                                                                    | Column ID to group list results by                                                                                                                                                                                                                                                                                    |
 | `groupIdCollapsible`          | `{ [key: string]: boolean }`                                                | Initial collapsed/expanded state per group ID                                                                                                                                                                                                                                                                         |
 | `sortGroupByAlphabetically`   | `boolean`                                                                   | Sorts group-by values alphabetically                                                                                                                                                                                                                                                                                  |
@@ -995,7 +1015,7 @@ Which field types can be edited from the list table, and how. Types not listed u
 | `moreSettings`                | `{ text: string; onClick: () => void }[]`                                   | Extra items appended to the "more" dropdown menu                                                                                                                                                                                                                                                                      |
 | `exportSettings`              | `ExportSettings`                                                            | See Export Settings below                                                                                                                                                                                                                                                                                             |
 | `onChangeSort`                | `(value: Sort) => void`                                                     | Called when the user changes the sort                                                                                                                                                                                                                                                                                 |
-| `onChangeHide`                | `(value: DataStructure[]) => void`                                          | Called when a column is hidden from the view settings panel. Providing it switches the panel to schema mode — the hide is written to the model for everyone instead of being this user's own                                                                                                                          |
+| `onChangeHide`                | `(value: DataStructure[], change: HideChange) => void`                      | Called when a column is hidden or shown from the view settings panel. Providing it switches the panel to schema mode — the hide is written to the model for everyone instead of being this user's own. `change` is `{ columnId, hide }` for one column or `{ showAll: true }`; persist that rather than `value`                                                                                                                          |
 | `onChangeDrag`                | `(dragId: string, dropId: string, newHeader: TableHeader[]) => void`        | Called after a column is reordered in the view settings panel, so the consumer can persist the order                                                                                                                                                                                                                  |
 | `onChangeTabs`                | `(value: ExtendedTabs[]) => void`                                           | Called when tabs are added/removed/reordered                                                                                                                                                                                                                                                                          |
 | `onChangePagination`          | `(page: number) => void`                                                    | Called when the page changes                                                                                                                                                                                                                                                                                          |

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

@@ -9,6 +9,13 @@ import { Button } from "../../action/button";
 import { Loading } from "../../display/loading";
 import { DataWrapperTestSchema } from "./dataWrapper.fixtures";
 import { DataTemplateWrapper } from "./index";
+import {
+  STORY_API_ENDPOINT,
+  STORY_NAMES,
+  handleBuildStoryRecords,
+  storyWorkspace,
+  useStoryBackend,
+} from "./storyBackend.fixtures";
 import { MarkdownInput } from "../../input/markdown";
 
 const meta = {
@@ -24,21 +31,23 @@ const meta = {
 
 export default meta;
 
-// INFO: Story to test imageTagToggleMode + imageHideEnabled across 3 role views:
-// - Installer: no props, sees all photos
-// - Customer: imageHideEnabled=true, hidden photos filtered out in read view
-// - PE: imageTagToggleMode=true, eye icon to toggle hidden flag, read shows all
-
+// INFO: the e2e CRUD spec answers this story's requests with page.route, so the
+// story backend stands aside under Playwright
 export const DataWrapperTest = () => {
-  const [mount, setMount] = useState<boolean>(false);
+  const mount = useStoryBackend({
+    collections: {
+      "dtw-test-collection": handleBuildStoryRecords(12, (index) => ({
+        _id: `checklist-${index}`,
+        clientName: STORY_NAMES[index % STORY_NAMES.length],
+        clientPhone: `01${2000000 + index * 1379}`,
+        address: `${index} Jalan Contoh, 50450 Kuala Lumpur`,
+      })),
+    },
+    yieldToE2E: true,
+  });
   const dataRefreshRef: any = useRef(null);
   const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
   const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
-  const dtwBaseUrl = "http://localhost:3000";
-
-  useEffect(() => {
-    setMount(true);
-  }, []);
 
   // INFO: no second handleRefresh effect — ReadQueryHoc auto-fetches on mount.
   // A manual refresh here only causes a visible double-loading flash and pads
@@ -58,8 +67,8 @@ export const DataWrapperTest = () => {
       <div className="font-semibold mb-1 text-gray-900">DTW Test</div>
       <div className="text-sm font-light mb-4 text-gray-500">
         Minimal 3-field DataTemplateWrapper story used by the e2e CRUD spec.
-        Validates create, read, update, and delete against the configured
-        backend without optional schema fields blocking submission.
+        Create, read, update and delete run against the in-memory story backend,
+        with no required fields blocking submission.
       </div>
       <DataTemplateWrapper
         ref={dataRefreshRef}
@@ -68,15 +77,7 @@ export const DataWrapperTest = () => {
         id={selectedId}
         collectionId={"dtw-test-collection"}
         schema={DataWrapperTestSchema}
-        workspace={{
-          apiEndpointType: "mongoDB",
-          apiEndpoint: `${dtwBaseUrl}/api/data`,
-          apiEndpointToken: "",
-          apiUserToken: "",
-          assetEndpoint:
-            "https://firebasestorage.googleapis.com/v0/b/demo-bucket.firebasestorage.app/o/",
-          assetUploadEndpoint: `${dtwBaseUrl}/api/asset`,
-        }}
+        workspace={storyWorkspace()}
         edit={{
           allEditable: true,
           disabledUpdate: false,
@@ -600,9 +601,9 @@ export const DTWEmbeddedInMarkdown = () => {
         A real DataTemplateWrapper rendered inside a note through
         MarkdownInput&apos;s renderEmbed, with the flags Space sets on an embed:
         bareAddColumns, bareFlatTable, listAddable, listEditable and readDrawer.
-        Add a column from the header, add a row inline, then check the header and
-        the rows still line up and that no cell reads &quot;div&quot;. New rows
-        are stored as drafts, which is what puts a React element in a cell.
+        Add a column from the header, add a row inline, then check the header
+        and the rows still line up and that no cell reads &quot;div&quot;. New
+        rows are stored as drafts, which is what puts a React element in a cell.
       </div>
       <MarkdownInput
         id="notes"
@@ -624,7 +625,7 @@ export const DTWEmbeddedInMarkdown = () => {
 // listObjectTableView is what selects the table; leave it off and the field
 // renders as a List.
 
-const LIST_OBJECT_ENDPOINT = "http://localhost:3000/api/data";
+const LIST_OBJECT_ENDPOINT = STORY_API_ENDPOINT;
 const LIST_OBJECT_COLLECTION = "dtw-list-object-table";
 
 // INFO: tabIds on purpose — the action pill only renders its Previous/Next
@@ -701,7 +702,10 @@ export const DTWListObjectTable = () => {
       .onPost(`${LIST_OBJECT_ENDPOINT}/${LIST_OBJECT_COLLECTION}/get`)
       .reply((config) => {
         const body = handleParseBody(config);
-        return [200, { data: store.find((row) => row._id === body.id) ?? null }];
+        return [
+          200,
+          { data: store.find((row) => row._id === body.id) ?? null },
+        ];
       });
 
     mock
@@ -709,7 +713,8 @@ export const DTWListObjectTable = () => {
       .reply((config) => {
         const body = handleParseBody(config);
         const index = store.findIndex((row) => row._id === body.id);
-        if (index >= 0) store[index] = { ...store[index], ...(body.data ?? {}) };
+        if (index >= 0)
+          store[index] = { ...store[index], ...(body.data ?? {}) };
         return [200, { success: body.id ?? true }];
       });