blixify-ui-web-mcp 0.1.19 → 0.1.20

package/lib/components/data/dataTemplate/dataTemplate.stories.tsx

@@ -1,323 +1,335 @@
 import { Menu, Transition } from "@headlessui/react";
-import { TagIcon } from "@heroicons/react/24/outline";
 import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
 import Papa from "papaparse";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useState } from "react";
+import { ButtonGroup } from "../../action/buttonGroup";
 import { DataTemplate as DataTemplateImpl } from ".";
-import { Button } from "../../action/button";
-import { Loading } from "../../display/loading";
-import { StorySection } from "../../storyUtils";
-import { Sort } from "../readQuery";
-import {
-  dbAPIToken,
-  defaultDBEndpoint,
-  defaultImageEndpoint,
-  defaultUploadEndpoint,
-  getAllSpacesList,
-  getSpaceData,
-  getWorkspaceData,
-  schemaUrl,
-  storyRenderReferenceLabelOptions,
-  storyRenderReferenceSpaceOptions,
-} from "../stories";
-import { blixifyDevCollection, blixifyDevWorkspace } from "../testData";
-import { parseSpaceToDataStructure, parseWorkspaceSettings } from "../utils";
 import { DataStructure } from "./model";
-import { AdditionalQuery, ExtendedTabs, Space } from "./spaceModel";
-import { Workspace } from "./workspaceModel";
+import { ExtendedTabs } from "./spaceModel";
 
 const meta = { title: "Data/Data Template" };
 export default meta;
 
-export const DataTemplate = () => {
-  const [selectedSpace, setSelectedSpace] = useState<Space | null>(null);
-  const [allWorkspaceSpace, setAllWorkspaceSpace] = useState<Space[]>([]);
-  const [selectedWorkspace, setSelectedWorkspace] = useState<Workspace | null>(
-    null,
-  );
-  const [mount, setMount] = useState<boolean>(false);
-  const [sort, setSort] = useState<Sort | undefined>({
-    sortId: "baseUpdatedAt",
-    type: "desc",
-  });
-  const [tabs, setTabs] = useState<ExtendedTabs[]>([]);
-  const [queries, setQueries] = useState<AdditionalQuery[]>([]);
-  const [collectionParam, setCollectionParams] = useState(blixifyDevCollection);
-  const workspaceParam = blixifyDevWorkspace;
+const DEMO_ENDPOINT = "https://dt-demo.local/api";
 
-  const dataTemplateRef = useRef<any>(null);
+const LAYOUT_TOGGLE = [
+  { id: "desktop", name: "Desktop" },
+  { id: "mobile", name: "Mobile" },
+];
+const DEMO_COLLECTION = "demo-documents";
 
-  const [viewParam, setViewParam] = useState("general");
-  const [typeParam, setTypeParam] = useState("list");
-  const [dataParam, setDataParam] = useState("");
+// INFO: two file columns on purpose. A view unwinds ONE of them, chosen when
+// the tab is made — which is why the column cannot be inferred and the Add Tab
+// picker has to ask.
+// INFO: a single image column holds the download TOKEN, not a url — the
+// file's name lives on the column (imageFileName) and its folder on
+// imageCollectionName + the row id. That is what a real datasheet stores, and
+// it is the shape the file view had to learn to render.
+const DEMO_SCHEMA: DataStructure[] = [
+  { id: "name", name: "Document", type: "string" },
+  { id: "owner", name: "Owner", type: "string" },
+  { id: "files", name: "Attachments", type: "multipleFile" },
+  { id: "scans", name: "Scans", type: "multipleFile" },
+  // INFO: a SINGLE file field stores only the token — its name comes from the
+  // schema (imageFileName), which is fixed config rather than the user's file.
+  // That is why the read view shows the field's LABEL here and the entry's own
+  // name for a multiple field.
+  {
+    id: "contract",
+    name: "Signed Contract",
+    type: "file",
+    imageFileName: "contract.pdf",
+    imageCollectionName: DEMO_COLLECTION,
+  },
+  {
+    id: "photo",
+    name: "Cover Photo",
+    type: "image",
+    imageFileName: "photo.png",
+    imageCollectionName: DEMO_COLLECTION,
+  },
+];
 
-  const getLocalUrl = "/dashboard/spaceD";
-  const title = selectedSpace?.name ?? "";
-  const description = selectedSpace?.description ?? "List of sample data";
+const renderDemoRecords = () => [
+  {
+    _id: "r1",
+    name: "Handbook",
+    owner: "alice",
+    files: [
+      {
+        fileName: "https://cdn.local/1757238400000_Onboarding.pdf",
+        token: "a",
+      },
+      { fileName: "https://cdn.local/1757238400001_Policies.pdf", token: "b" },
+      {
+        fileName:
+          "https://images.pexels.com/photos/2338407/pexels-photo-2338407.jpeg?auto=compress&cs=tinysrgb&w=600",
+        token: "c",
+      },
+    ],
+    scans: [
+      { fileName: "https://cdn.local/scan_front.png", token: "s1" },
+      // INFO: a multiple entry as storage names it — <uuid>-<name> so entries
+      // never collide. The tile must show "Site Plan.pdf", not the uuid.
+      {
+        fileName: "3f2b1c6a-1111-4222-8333-444455556666-Site Plan.pdf",
+        token: "s2",
+      },
+    ],
+    photo: "token-r1",
+    contract: "token-c1",
+  },
+  {
+    _id: "r2",
+    name: "Proposals",
+    owner: "bob",
+    files: [
+      {
+        fileName: "https://cdn.local/1757238400002_Q3%20Budget.xlsx",
+        token: "d",
+      },
+      {
+        fileName: "https://cdn.local/1757238400003_Walkthrough.mp4",
+        token: "e",
+      },
+    ],
+    scans: [],
+    photo: "token-r2",
+    contract: "token-c2",
+  },
+  // INFO: no attachments — contributes NO tiles. A blank tile per empty record
+  // would bury the ones that matter, which is why the unwind does not preserve
+  // empty arrays.
+  { _id: "r3", name: "Archive", owner: "carol", files: [], scans: [] },
+];
 
-  useEffect(() => {
-    setMount(false);
-    handleRetrieveData();
-  }, [collectionParam]);
-
-  const handleRetrieveData = async () => {
-    if (collectionParam) {
-      const space: Space = await getSpaceData(collectionParam);
-      if (space) {
-        if (space.structure) {
-          space.structure.forEach((field) => {
-            if (field.type === "markdown") {
-              field.enableImageUpload = true;
-              field.enableVideoUpload = true;
-            }
-          });
-        }
-        setSelectedSpace(space);
-        setTabs(space.extendedTabs ?? []);
-        setQueries(space?.additionalQuery ?? []);
-        if (space?.sortBy?.sortId !== "") {
-          setSort(space.sortBy ?? undefined);
-        }
-      }
-    }
-    if (workspaceParam) {
-      const workspace: any = await getWorkspaceData(workspaceParam);
-      if (workspace) {
-        setSelectedWorkspace(workspace);
-        const allSpaces = await getAllSpacesList(workspaceParam);
-        if (allSpaces) setAllWorkspaceSpace(allSpaces);
-      }
+/**
+ * INFO: the mock implements the SERVER's unwind rather than working around it —
+ * one row per element, and a count taken after the unwind and before paging. A
+ * mock that returned whole records would make the story look right while
+ * proving nothing about the thing on screen.
+ */
+const handleInstallDemoMock = (store: any[]) => {
+  const mock = new MockAdapter(axios, {
+    onNoMatch: "passthrough",
+    delayResponse: 120,
+  });
+  const renderUrl = (type: string) =>
+    `${DEMO_ENDPOINT}/${DEMO_COLLECTION}/${type}`;
+  const handleParseBody = (config: any) => {
+    try {
+      return JSON.parse(config?.data ?? "{}");
+    } catch (err) {
+      return {};
     }
-    setMount(true);
-  };
-
-  const handleSortData = (sortValue: Sort) => {
-    setSort(sortValue.sortId !== "" ? sortValue : undefined);
   };
 
-  const handleAddColumn = (structure: DataStructure[]) => {
-    const clonedSpace = JSON.parse(JSON.stringify(selectedSpace));
-    if (clonedSpace) {
-      clonedSpace["structure"] = JSON.parse(
-        JSON.stringify(
-          structure.filter((eachStructure) => eachStructure.id !== "id"),
-        ),
-      );
+  mock.onPost(renderUrl("list")).reply((config) => {
+    const body = handleParseBody(config);
+    let rows: any[] = store;
+    if (body.unwind) {
+      // INFO: like the server's $unwind — an array becomes one row per
+      // element, a single value passes through as one row, and a record
+      // without the field contributes nothing
+      rows = store.flatMap((eachRecord: any) => {
+        const value = eachRecord[body.unwind];
+        const entries = Array.isArray(value) ? value : value ? [value] : [];
+        return entries.map((eachFile: any) => ({
+          ...eachRecord,
+          [body.unwind]: eachFile,
+        }));
+      });
     }
-    setSelectedSpace(clonedSpace);
-    dataTemplateRef.current?.handleRefresh?.();
-  };
+    const cursor = typeof body.cursor === "number" ? body.cursor : 0;
+    const limit = typeof body.limit === "number" ? body.limit : 10;
+    return [
+      200,
+      { data: rows.slice(cursor, cursor + limit), count: rows.length },
+    ];
+  });
 
-  const handleDrag = (dragId: string, dropId: string) => {
-    const selectedDS: DataStructure[] = JSON.parse(
-      JSON.stringify(selectedSpace?.structure ?? []),
-    );
-    const selectedIndex = selectedDS.findIndex((item) => item.id === dragId);
-    const [selectedItem] = selectedDS.splice(selectedIndex, 1);
-    const placingIndex = selectedDS.findIndex((item) => item.id === dropId);
-    selectedDS.splice(placingIndex, 0, selectedItem);
-    const clonedSpace = JSON.parse(JSON.stringify(selectedSpace));
-    if (clonedSpace) clonedSpace["structure"] = selectedDS;
-    setSelectedSpace(clonedSpace);
-  };
+  mock.onPost(renderUrl("get")).reply((config) => {
+    const body = handleParseBody(config);
+    return [200, { data: store.find((each) => each._id === body.id) ?? null }];
+  });
 
-  const handleHide = (valueList: DataStructure[]) => {
-    const clonedSpace: Space = JSON.parse(JSON.stringify(selectedSpace));
-    clonedSpace.structure?.map((eachStructure) => {
-      const selectedList = valueList.filter(
-        (eachValue) => eachValue.id === eachStructure.id,
-      );
-      if (selectedList.length > 0) {
-        eachStructure.hide = selectedList[0].hide ? true : false;
-      }
-      return null;
-    });
-    setSelectedSpace(clonedSpace);
-  };
+  // INFO: the store is mutated in place so a create or an edit persists for the
+  // life of the story. Replying from a static array would make every write look
+  // like it silently did nothing.
+  // INFO: with a schemaEndpoint set, DataTemplate looks up sibling datasheets
+  // to offer as reference targets. Nothing in this demo references another
+  // space, so an empty list is the honest answer — but the call has to succeed
+  // or the tab bar never finishes rendering.
+  mock
+    .onPost(`${DEMO_ENDPOINT}/spaces/list`)
+    .reply(200, { data: [], count: 0 });
 
-  const handleTab = (tabValue: ExtendedTabs[]) => {
-    setTabs(tabValue);
-  };
+  mock.onPost(renderUrl("create")).reply((config) => {
+    const body = handleParseBody(config);
+    const record = {
+      _id: `demo-${Date.now()}`,
+      files: [],
+      scans: [],
+      ...body.data,
+    };
+    store.push(record);
+    return [200, { data: record }];
+  });
+
+  mock.onPost(renderUrl("update")).reply((config) => {
+    const body = handleParseBody(config);
+    const index = store.findIndex((each) => each._id === body.id);
+    if (index >= 0) store[index] = { ...store[index], ...body.data };
+    return [200, { data: store[index] ?? null }];
+  });
+
+  mock.onPost(renderUrl("delete")).reply((config) => {
+    const body = handleParseBody(config);
+    const index = store.findIndex((each) => each._id === body.id);
+    if (index >= 0) store.splice(index, 1);
+    return [200, { data: true }];
+  });
+
+  return mock;
+};
+
+const demoDevSettings: any = {
+  server: "mongoServer",
+  dbEndpoint: DEMO_ENDPOINT,
+  dbAPIToken: "",
+  dbUserToken: "",
+  // INFO: schemaPresent is `devSettings.schemaEndpoint ? true : false`, and it
+  // gates the ENTIRE tab bar — an empty string here hides tabs and + New Tab
+  // with no other symptom. It points at the demo endpoint, which answers the
+  // spaces lookup below.
+  schemaEndpoint: DEMO_ENDPOINT,
+  schemaEndpointToken: "",
+  // INFO: a stored token is turned into <imageEndpoint><folder>%2F<row>%2F<name>
+  // ?alt=media&token=… — the same shape as our storage. A placeholder host
+  // that draws whatever path it is given stands in for the bucket, so the
+  // tile shows a real image rather than a broken one.
+  imageEndpoint: "https://placehold.co/600x400/e2e8f0/475569.png?text=",
+  uploadEndpoint: "",
+};
 
-  if (!mount) {
-    return <Loading />;
-  }
+const DataTemplateDemo = () => {
+  const store = React.useMemo(() => renderDemoRecords(), []);
+  React.useMemo(() => handleInstallDemoMock(store), [store]);
 
-  const devSettings = parseWorkspaceSettings(
+  // INFO: a real consumer keeps type and id in its own state and hands them
+  // back — that is what makes create and read views open at all. The story does
+  // the same rather than intercepting the navigation, which is why an alert
+  // stood in for a create form before.
+  const [typeParam, setTypeParam] = useState<"list" | "read" | "update">(
+    "list",
+  );
+  const [dataId, setDataId] = useState<string>("");
+  const [layout, setLayout] = useState<"desktop" | "mobile">("desktop");
+  const isMobile = layout === "mobile";
+  const [viewId, setViewId] = useState<string | undefined>(undefined);
+  const [tabs, setTabs] = useState<ExtendedTabs[]>([
     {
-      dbEndpoint: defaultDBEndpoint,
-      imageEndpoint: defaultImageEndpoint,
-      uploadEndpoint: defaultUploadEndpoint,
+      name: "Documents",
+      type: "list",
+      viewType: "file",
+      defaultTab: true,
+      fileSettings: { columnId: "files" },
     },
-    selectedWorkspace,
-  );
+    {
+      name: "Scans",
+      type: "list",
+      viewType: "file",
+      fileSettings: { columnId: "scans" },
+    },
+    {
+      name: "Photos",
+      type: "list",
+      viewType: "file",
+      fileSettings: { columnId: "photo" },
+    },
+  ]);
 
   return (
-    <>
-      {/*
-       * STORY CONTROLS
-       * These buttons demonstrate imperative ref methods and collection switching.
-       * In a real app these would be driven by routing / state management.
-       */}
-      <StorySection
-        title="Data Template"
-        description="Use DataTemplateImpl when you have a Space object from the Blixify backend — it drives the schema, sort, tabs, and queries from the database. Pass the Space via the space prop and derive the model using parseSpaceToDataStructure. For custom integrations without a Space object, use DataTemplateWrapper instead."
-      >
-        <div className="flex flex-wrap gap-3 mb-4">
-          <Button
-            text={typeParam === "list" ? "Switch → Update" : "Switch → List"}
-            type="light"
-            onClick={() =>
-              setTypeParam((t) =>
-                t === "update" || t === "read" ? "list" : "update",
-              )
-            }
-          />
-          <Button
-            text="Prefill Form"
-            type="light"
-            onClick={() => {
-              dataTemplateRef.current?.handleUpdateSelectedData([
-                { key: "title", value: "Prefilled Value" },
-              ]);
-            }}
-          />
-          <Button
-            text="Swap Collection"
-            type="light"
-            onClick={() => {
-              setCollectionParams((c) =>
-                c === "e40bcbbf-191f-4bac-83d0-322cb4cbabde"
-                  ? "602c90dd-ee39-4bf0-b44d-3d2c57f887cd"
-                  : "e40bcbbf-191f-4bac-83d0-322cb4cbabde",
-              );
-            }}
-          />
-        </div>
-
-        {selectedSpace && selectedWorkspace && (
-          <div className="w-full">
-            <DataTemplateImpl
-              ref={dataTemplateRef}
-              title={title}
-              description={description}
-              type={typeParam}
-              id={dataParam}
-              collectionId={collectionParam}
-              model={parseSpaceToDataStructure(selectedSpace)}
-              localURLEndpoint={getLocalUrl}
-              space={selectedSpace}
-              limit={30}
-              edit={{
-                allEditable: true,
-                listEditable: true,
-                listAddable: true,
-                deleteBtn: true,
-                disabledUpdate: false,
-                disableBatchUpdate: false,
-                activityLog: {
-                  enableComments: true,
-                  commentCollectionId: collectionParam + "-comments",
-                  enableLogs: true,
-                  logsCollectionId: collectionParam + "-logs",
-                  userAPIEndpoint: "http://localhost:3000/api/data/users",
-                  currentUserId: "3P3il3L8uScSkASU2MdAoqGs1M82",
-                },
-              }}
-              organise={{
-                sort: sort ?? undefined,
-                viewId: viewParam,
-                extendedTabs: tabs,
-                additionalQuery: queries,
-                splitView: false,
-                showGroupByFeature: true,
-                showReadFloatingNav: true,
-                disableMulti: false,
-                exportSettings: {
-                  enableExportReadPDF: true,
-                  exportReadPDFDimensions: {
-                    forceDesktopView: true,
-                    captureWidth: 1440,
-                    captureHeight: 900,
-                    pageSize: "a4",
-                    scale: 2,
-                  },
-                },
-                filterComponentNewRow: true,
-                addColumnEnabled: true,
-                onChangeSort: handleSortData,
-                onChangeTabs: handleTab,
-                onChangeDrag: handleDrag,
-                onAddColumns: handleAddColumn,
-                onChangeHide: handleHide,
-                handleNavigate: (type, selectedId, viewId) => {
-                  setTypeParam(type);
-                  if (selectedId) setDataParam(selectedId);
-                  if (viewId) setViewParam(viewId);
-                },
-                renderReferenceLabelOptions: storyRenderReferenceLabelOptions(
-                  allWorkspaceSpace,
-                  selectedSpace,
-                ),
-                renderReferenceSpaceOptions: storyRenderReferenceSpaceOptions(
-                  allWorkspaceSpace,
-                  dataParam,
-                ),
-              }}
-              lib={{
-                axios,
-                Menu,
-                Transition,
-                navigate: null,
-                papaParser: Papa,
-              }}
-              bareSettings={{
-                // Custom action buttons shown on each list row
-                bareListActionBtns: () => [
-                  <div
-                    key="tag"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      e.preventDefault();
-                      window.alert("Custom row action clicked!");
-                    }}
-                  >
-                    <TagIcon className="w-5 h-5 text-primary-500" />
-                  </div>,
-                ],
-                // Extra bulk-action buttons shown when rows are selected
-                bareListMultipleSelectAddtionalActions: [
-                  {
-                    text: "Custom Bulk Action",
-                    onClick: (ids: string[]) =>
-                      window.alert(
-                        `Bulk action on ${ids.length} selected item(s)`,
-                      ),
-                  },
-                ],
-              }}
-              devSettings={{
-                ...devSettings,
-                uploadEndpoint: defaultUploadEndpoint,
-                imageEndpoint: defaultImageEndpoint,
-                schemaEndpoint: schemaUrl,
-                dbAPIToken: dbAPIToken,
-                organisationMembers: [
-                  { key: "3P3il3L8uScSkASU2MdAoqGs1M82", label: "Crystal" },
-                  { key: "a2vG49kXjFg7hzzEYS5ZfJJJ43C3", label: "Chan Yi" },
-                  { key: "qFZVckKT3tMIkxvohlVS27IWuhn1", label: "Chris" },
-                ],
-                currentUser: {
-                  userEmail: "chanyi@blixify.co",
-                  userName: "Chan Yi",
-                },
-                functionEndpoint:
-                  "http://127.0.0.1:5001/blixify-space/asia-southeast1",
-              }}
-            />
-          </div>
-        )}
-      </StorySection>
-    </>
+    <div className="w-full">
+      <div className="mb-4">
+        <ButtonGroup
+          selection={LAYOUT_TOGGLE}
+          selectedId={layout}
+          variant="tag"
+          size="small"
+          onClick={(id) => setLayout(id as "desktop" | "mobile")}
+        />
+      </div>
+      {/* INFO: the PROPS force the mobile layout — NewTable's mobileView renders
+          cards regardless of viewport. The width only makes it read as a
+          phone; without the props, narrowing alone would show a squashed
+          desktop table, since Tailwind breakpoints key off the viewport. */}
+      <div className={isMobile ? "mx-auto max-w-sm" : "w-full"}>
+      <DataTemplateImpl
+        title="Documents"
+        description="Three records hold five attachments between them"
+        type={typeParam}
+        id={dataId}
+        collectionId={DEMO_COLLECTION}
+        model={DEMO_SCHEMA}
+        localURLEndpoint=""
+        devSettings={demoDevSettings}
+        lib={{ axios, Menu, Transition, papaParser: Papa }}
+        limit={4}
+        // INFO: allEditable is what gates isEditor, and isEditor is what puts
+        // "+ New Tab" and the create button on screen. A read-only demo hides
+        // the very controls it is meant to demonstrate.
+        edit={{ allEditable: true, deleteBtn: true, createBtn: true }}
+        organise={{
+          extendedTabs: tabs,
+          viewId,
+          onChangeTabs: (value: any) => setTabs(value),
+          handleNavigate: (type: string, id?: string, view?: string) => {
+            setTypeParam(type as any);
+            setDataId(id ?? "");
+            if (view) setViewId(view);
+          },
+        }}
+        // INFO: mirrors a typical work-order list — mobile gets the card list and
+        // the mobile form; desktop pins the first column so the record name
+        // stays visible while scrolling wide tables. A pinned column on a
+        // phone-width card list would pin nothing useful.
+        bareSettings={{
+          // INFO: mobileView only reaches NewTable, and NewTable only renders
+          // under bareNewDTW — on the legacy table bareListMobileView does
+          // nothing and "Mobile" would just squash the desktop table.
+          // Apps that use the mobile cards set this unconditionally for the same reason.
+          bareNewDTW: true,
+          bareListMobileView: isMobile,
+          bareUpdateMobileView: isMobile,
+          bareListTablePinColumns: isMobile
+            ? undefined
+            : { left: [DEMO_SCHEMA[0].id] },
+        }}
+      />
+      </div>
+    </div>
   );
 };
+
+export const DataTemplate = () => (
+  // INFO: not wrapped in StorySection — that is w-[90vw], and a data table
+  // wants the width it is given.
+  <div className="w-full">
+    <div className="font-semibold mb-1 text-gray-900">
+      Data Template — self-contained demo
+    </div>
+    <div className="text-sm mb-4 text-gray-600">
+      Carries its own schema and data, so everything works with no backend:
+      create a record, edit inline, delete one, and add a tab through + New Tab.
+      Three records hold five attachments and the File view lists FIVE tiles —
+      the server unwinds the chosen column, so a row is a file rather than a
+      record, and the count and paging follow. The record with no attachments
+      contributes nothing. Switch to Scans for the same records unwound on a
+      different column, which is why + New Tab asks which column a File view
+      should list. Any tab can be set to open by default from that same modal.
+    </div>
+    <DataTemplateDemo />
+  </div>
+);