blixify-ui-web-mcp 0.1.19 → 0.1.21

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

@@ -1,576 +0,0 @@
-// INFO: DTW plumbing — flex filters, hidden columns, persisted view state and
-// SSE live updates.
-
-import React, { useEffect, useRef, useState } from "react";
-import { Button } from "../../action/button";
-import { Loading } from "../../display/loading";
-import { MeraqueWorkOrderSchema, meraqueDevSettings } from "../testSchema";
-import { DataTemplateWrapper } from "./index";
-
-const meta = {
-  title: "Data/Data Wrapper/Utils",
-  decorators: [
-    (Story: () => React.ReactElement) => (
-      <div className="bg-white min-h-screen p-4">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-
-// INFO: SSE live-update smoke test.
-// Requires a local SocketWrapper SSE endpoint at http://localhost:3000/api/live.
-// bareSocketName="dtw-test-collection" → list room.
-// bareSocketName="dtw-test-collection-{id}" → document room (wired automatically
-// when the consumer passes the room in bareSettings on the read/update DTW).
-//
-// Expected behaviour:
-//   List view  — insert prepends a row; update patches in-place; delete removes.
-//   Read view  — update pushes new data into the form; delete navigates back to list.
-//   isLive indicator (green dot) appears when EventSource connects.
-//   isLiveOffline indicator (yellow dot) appears when navigator goes offline.
-const DTW_SSE_BASE_URL = "http://localhost:3000";
-
-const DTW_SSE_COLLECTION = "dtw-test-collection";
-
-const DTWSseLiveSchema = [
-  { id: "clientName", name: "Client Name", type: "string" as const },
-  {
-    id: "status",
-    name: "Status",
-    type: "list" as const,
-    listSelection: ["Draft", "Active", "Closed"],
-    optional: true,
-  },
-  {
-    id: "createdAt",
-    name: "Created At",
-    type: "date" as const,
-    optional: true,
-  },
-];
-
-// ═══════════════════════════════════════════════════════════════════════════════
-// INFO: Standalone story — renders NewTable, NewList, NewKanban directly with
-// inline mock data. No backend required. Uses a simple "Tasks" schema that
-// exercises list/date/number types to show off the new components.
-// ═══════════════════════════════════════════════════════════════════════════════
-
-export const DTWSseLive = () => {
-  const [mount, setMount] = useState(false);
-  const dataRefreshRef: any = useRef(null);
-  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
-  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
-
-  useEffect(() => {
-    setMount(true);
-  }, []);
-
-  const handleNavigate = (type: any, id: any) => {
-    setViewType(type);
-    setSelectedId(id);
-  };
-
-  if (!mount) return <Loading />;
-
-  // INFO: room name follows SocketWrapper convention —
-  //   list view  → "{collection}"
-  //   read/update view → "{collection}-{id}"
-  const bareSocketName =
-    viewType === "list"
-      ? DTW_SSE_COLLECTION
-      : `${DTW_SSE_COLLECTION}-${selectedId}`;
-
-  return (
-    <div className="w-full">
-      <div className="font-semibold mb-1 text-gray-900">
-        DTW — SSE Live Updates
-      </div>
-      <div className="text-sm font-light mb-4 text-gray-500">
-        Smoke test for <code>bareSocketName</code> +{" "}
-        <code>workspace.sseEndpoint</code>. Requires a local SocketWrapper SSE
-        endpoint at <code>{DTW_SSE_BASE_URL}/api/live</code>. The green dot in
-        the table header appears when the EventSource connects. Open a second
-        tab and mutate a record — the change should arrive in real-time without
-        a refresh.
-      </div>
-      <DataTemplateWrapper
-        ref={dataRefreshRef}
-        title="Live Collection"
-        type={viewType}
-        id={selectedId}
-        collectionId={DTW_SSE_COLLECTION}
-        schema={DTWSseLiveSchema}
-        workspace={{
-          apiEndpointType: "mongoDB",
-          apiEndpoint: `${DTW_SSE_BASE_URL}/api/data`,
-          apiEndpointToken: "",
-          apiUserToken: "",
-          assetEndpoint: "",
-          assetUploadEndpoint: `${DTW_SSE_BASE_URL}/api/asset`,
-          // INFO: sseEndpoint flows through parseWorkspaceSettings →
-          // devSettings.sseEndpoint → buildSSEUrl → EventSource
-          sseEndpoint: `${DTW_SSE_BASE_URL}/api/live`,
-        }}
-        edit={{
-          allEditable: true,
-          disabledUpdate: false,
-          disableBatchUpdate: false,
-          deleteBtn: true,
-        }}
-        bareSettings={{
-          bareCompactMode: true,
-          bareNewDTW: true,
-          // INFO: room switches between list room and document room depending on view type
-          bareSocketName,
-          bareUpdateActionComponent:
-            viewType === "read"
-              ? (data) => (
-                  <Button
-                    type="normal"
-                    text="Update"
-                    onClick={() => {
-                      setSelectedId(data._id);
-                      setViewType("update");
-                    }}
-                  />
-                )
-              : undefined,
-        }}
-        organise={{
-          sort: { sortId: "createdAt", type: "desc" as const },
-          breadcrumbType: "button",
-        }}
-        handleNavigate={handleNavigate}
-        limit={10}
-      />
-    </div>
-  );
-};
-DTWSseLive.storyName = "DTW SSE Live";
-
-export const DTWFlexFilters = () => {
-  const [mount, setMount] = useState(false);
-  const dataRef = useRef<any>(null);
-  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
-  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
-  const [listMobileView, setListMobileView] = useState(false);
-
-  useEffect(() => {
-    setMount(true);
-  }, []);
-
-  // INFO: set mobile view when browser width is smaller than 640px
-  useEffect(() => {
-    const handleResize = () => {
-      setListMobileView(window.innerWidth < 640);
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  const handleNavigate = (type: any, id: any) => {
-    setViewType(type);
-    setSelectedId(id);
-  };
-
-  if (!mount) return <Loading />;
-
-  return (
-    <div className="w-full min-h-screen">
-      <div className="font-semibold mb-1 text-gray-900">
-        DTW - With Flex Filters & Floating Action
-      </div>
-      <DataTemplateWrapper
-        ref={dataRef}
-        title="Flex Filters"
-        description=""
-        type={viewType}
-        id={selectedId}
-        collectionId={"meraque-order"}
-        schema={MeraqueWorkOrderSchema}
-        workspace={meraqueDevSettings}
-        edit={{
-          allEditable: true,
-          disabledUpdate: false,
-          disableBatchUpdate: false,
-          deleteBtn: true,
-        }}
-        organise={{
-          breadcrumbType: "button",
-        }}
-        bareSettings={{
-          bareCompactMode: true,
-          bareNewDTW: true,
-          bareListMobileView: listMobileView,
-          bareFlexFilters: true,
-          bareListMobileFloatingSearch: true,
-          bareListTablePinColumns: { left: ["title"] },
-        }}
-        handleNavigate={handleNavigate}
-        limit={10}
-      />
-    </div>
-  );
-};
-DTWFlexFilters.storyName = "DTW Flex Filters";
-
-// INFO: Story used exclusively by the hide-columns e2e block. Shares the
-// dtw-test-collection alias so the spec's existing API mocks apply, and adds
-// one developer-hidden column to prove users can never toggle it back on.
-const DataWrapperHideColumnSchema = [
-  {
-    id: "clientName",
-    name: "Client Name",
-    type: "string" as const,
-    optional: true,
-  },
-  {
-    id: "clientPhone",
-    name: "Client Phone",
-    type: "string" as const,
-    optional: true,
-  },
-  { id: "address", name: "Address", type: "string" as const, optional: true },
-  {
-    id: "internalRef",
-    name: "Internal Ref",
-    type: "string" as const,
-    optional: true,
-    hide: true,
-  },
-];
-
-// INFO: a deliberately wide schema — the view settings panel has to stay usable
-// on a collection with dozens of fields (Space runs to 24+), so the column list
-// scrolls and the search box earns its place
-const DataWrapperWideSchema = [
-  ...DataWrapperHideColumnSchema,
-  { id: "email", name: "Email", type: "email" as const, optional: true },
-  { id: "city", name: "City", type: "string" as const, optional: true },
-  { id: "state", name: "State", type: "string" as const, optional: true },
-  { id: "postcode", name: "Postcode", type: "string" as const, optional: true },
-  { id: "country", name: "Country", type: "string" as const, optional: true },
-  {
-    id: "status",
-    name: "Status",
-    type: "list" as const,
-    listSelection: ["New", "Active", "On Hold", "Closed"],
-    listSelectionColour: ["blue", "green", "yellow", "red"],
-    optional: true,
-  },
-  {
-    id: "priority",
-    name: "Priority",
-    type: "list" as const,
-    listSelection: ["Low", "Medium", "High"],
-    listSelectionColour: ["green", "yellow", "red"],
-    optional: true,
-  },
-  { id: "owner", name: "Owner", type: "string" as const, optional: true },
-  { id: "team", name: "Team", type: "string" as const, optional: true },
-  { id: "source", name: "Source", type: "string" as const, optional: true },
-  {
-    id: "contractValue",
-    name: "Contract Value",
-    type: "number" as const,
-    optional: true,
-  },
-  {
-    id: "outstanding",
-    name: "Outstanding Amount",
-    type: "number" as const,
-    optional: true,
-  },
-  {
-    id: "startDate",
-    name: "Start Date",
-    type: "date" as const,
-    optional: true,
-  },
-  { id: "endDate", name: "End Date", type: "date" as const, optional: true },
-  {
-    id: "lastContact",
-    name: "Last Contact",
-    type: "date" as const,
-    optional: true,
-  },
-  {
-    id: "followUpDate",
-    name: "Follow Up Date",
-    type: "date" as const,
-    optional: true,
-  },
-  {
-    id: "verified",
-    name: "Verified",
-    type: "boolean" as const,
-    optional: true,
-  },
-  {
-    id: "subscribed",
-    name: "Subscribed",
-    type: "boolean" as const,
-    optional: true,
-  },
-  { id: "remarks", name: "Remarks", type: "textArea" as const, optional: true },
-  {
-    id: "internalNotes",
-    name: "Internal Notes",
-    type: "textArea" as const,
-    optional: true,
-  },
-];
-
-export const DataWrapperHideColumnTest = () => {
-  const [mount, setMount] = useState<boolean>(false);
-  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);
-  }, []);
-
-  const handleNavigate = (type: any, id: any) => {
-    setViewType(type);
-    setSelectedId(id);
-  };
-
-  if (!mount) {
-    return <Loading />;
-  }
-
-  return (
-    <div className="w-full">
-      <div className="font-semibold mb-1 text-gray-900">
-        DTW Hide Column Test
-      </div>
-      <div className="text-sm font-light mb-4 text-gray-500">
-        Exercises bareSettings.bareViewSettings — the client-only column hiding
-        control for bare DTWs. Internal Ref is hidden by the schema and must
-        never appear in the toggle list.
-      </div>
-      <DataTemplateWrapper
-        ref={dataRefreshRef}
-        title="Checklist"
-        type={viewType}
-        id={selectedId}
-        collectionId={"dtw-test-collection"}
-        schema={DataWrapperHideColumnSchema}
-        workspace={{
-          apiEndpointType: "mongoDB",
-          apiEndpoint: `${dtwBaseUrl}/api/data`,
-          apiEndpointToken: "",
-          apiUserToken: "",
-          assetEndpoint:
-            "https://firebasestorage.googleapis.com/v0/b/verdant-dev.firebasestorage.app/o/",
-          assetUploadEndpoint: `${dtwBaseUrl}/api/asset`,
-        }}
-        edit={{
-          allEditable: true,
-          disabledUpdate: false,
-          disableBatchUpdate: false,
-          deleteBtn: true,
-        }}
-        bareSettings={{
-          bareCompactMode: true,
-          bareNewDTW: true,
-          bareOffline: false,
-          bareViewSettings: true,
-          bareFlexFilters: true,
-        }}
-        organise={{
-          breadcrumbType: "button",
-          persistViewState: "session",
-        }}
-        handleNavigate={handleNavigate}
-        limit={10}
-      />
-    </div>
-  );
-};
-DataWrapperHideColumnTest.storyName = "DTW Hide Column Test";
-
-// INFO: Real-data smoke test for scroll pagination. Points the storybook DTW
-// at an external dev API (defaults to localhost:3000) and pulls real rows so
-// we can manually verify scroll pagination across all view types. Configure
-// SCROLL_TEST_API + SCROLL_TEST_COLLECTION below for whichever live backend
-// is running locally.
-
-export const DTWPersistView = () => {
-  const [mount, setMount] = useState(false);
-  const dataRef = useRef<any>(null);
-  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
-  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
-
-  useEffect(() => {
-    setMount(true);
-  }, []);
-
-  const handleNavigate = (type: any, id: any) => {
-    setViewType(type);
-    setSelectedId(id);
-  };
-
-  if (!mount) return <Loading />;
-
-  return (
-    <div className="w-full min-h-screen">
-      <div className="font-semibold mb-1 text-gray-900">
-        DTW - Persisted View
-      </div>
-      <p className="text-sm text-gray-500">
-        Persist filters, sort, page index, searched value and user hidden
-        columns in session storage / local storage
-      </p>
-      <DataTemplateWrapper
-        ref={dataRef}
-        title="Persisted View"
-        description=""
-        type={viewType}
-        id={selectedId}
-        collectionId={"meraque-order"}
-        schema={MeraqueWorkOrderSchema}
-        workspace={meraqueDevSettings}
-        edit={{
-          allEditable: true,
-          disabledUpdate: false,
-          disableBatchUpdate: false,
-          deleteBtn: true,
-        }}
-        organise={{
-          breadcrumbType: "button",
-          persistViewState: "session",
-          paginationType: "scroll",
-        }}
-        bareSettings={{
-          bareCompactMode: true,
-          bareNewDTW: true,
-          bareViewSettings: true,
-          bareFlexFilters: true,
-          bareListMobileFloatingSearch: true,
-        }}
-        handleNavigate={handleNavigate}
-        limit={10}
-      />
-    </div>
-  );
-};
-DTWPersistView.storyName = "DTW Persisted View";
-
-export const DataWrapperViewSettingsWide = () => {
-  const [mount, setMount] = useState<boolean>(false);
-  const dataRefreshRef: any = useRef(null);
-  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
-  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
-  // INFO: the same panel behaves two ways — per user by default, or schema level
-  // once onChangeHide / onChangeDrag are wired (Space, Sun Luan)
-  const [schemaMode, setSchemaMode] = useState<boolean>(false);
-  const [model, setModel] = useState<any[]>(DataWrapperWideSchema);
-  const [lastChange, setLastChange] = useState<string>("none");
-  const dtwBaseUrl = "http://localhost:3000";
-
-  useEffect(() => {
-    setMount(true);
-  }, []);
-
-  const handleNavigate = (type: any, id: any) => {
-    setViewType(type);
-    setSelectedId(id);
-  };
-
-  const handleChangeHide = (updatedModel: any[]) => {
-    setModel(updatedModel);
-    setLastChange(
-      `hide → ${
-        updatedModel
-          .filter((eachColumn) => eachColumn.hide)
-          .map((eachColumn) => eachColumn.id)
-          .join(", ") || "(none)"
-      }`,
-    );
-  };
-
-  const handleChangeDrag = (dragId: string, dropId: string) => {
-    setLastChange(`order → ${dragId} before ${dropId}`);
-  };
-
-  const handleToggleMode = () => {
-    setModel(DataWrapperWideSchema);
-    setLastChange("none");
-    setSchemaMode((previous) => !previous);
-  };
-
-  if (!mount) return <Loading />;
-
-  return (
-    <div className="w-full">
-      <div className="font-semibold mb-1 text-gray-900">
-        DTW View Settings — 23 columns
-      </div>
-      <div className="text-sm font-light mb-3 text-gray-500">
-        The shape a Space collection actually has. Open the sliders icon: the
-        column list scrolls with a shade on the cut edge, the search box narrows
-        it, the handle reorders, and Sort and Rows per page stay pinned below.
-        On a phone the same panel opens as a modal.
-      </div>
-      <div className="mb-4 flex flex-row items-center gap-x-3">
-        <Button
-          type={schemaMode ? "normal" : "light"}
-          size="small"
-          text={schemaMode ? "Schema mode" : "Per user mode"}
-          onClick={handleToggleMode}
-        />
-        <span className="text-xs text-gray-500">
-          {schemaMode
-            ? "onChangeHide / onChangeDrag are wired — the change is handed back to write to the schema for everyone"
-            : "no callbacks — the hide and the order stay in this user's persisted view state"}
-        </span>
-      </div>
-      {schemaMode && (
-        <div className="mb-4 text-xs text-primary-600">
-          last change: {lastChange}
-        </div>
-      )}
-      <DataTemplateWrapper
-        // INFO: a fresh instance per mode so the panel re-reads the model
-        key={schemaMode ? "schema" : "user"}
-        ref={dataRefreshRef}
-        title="Wide Collection"
-        type={viewType}
-        id={selectedId}
-        collectionId={"dtw-test-collection"}
-        schema={schemaMode ? model : DataWrapperWideSchema}
-        workspace={{
-          apiEndpointType: "mongoDB",
-          apiEndpoint: `${dtwBaseUrl}/api/data`,
-          apiEndpointToken: "",
-          apiUserToken: "",
-          assetEndpoint: "",
-          assetUploadEndpoint: `${dtwBaseUrl}/api/asset`,
-        }}
-        edit={{ allEditable: true, deleteBtn: true }}
-        bareSettings={{
-          bareCompactMode: true,
-          bareNewDTW: true,
-          bareFlexFilters: true,
-        }}
-        organise={{
-          breadcrumbType: "button",
-          persistViewState: "session",
-          ...(schemaMode
-            ? { onChangeHide: handleChangeHide, onChangeDrag: handleChangeDrag }
-            : {}),
-        }}
-        handleNavigate={handleNavigate}
-        limit={10}
-      />
-    </div>
-  );
-};
-DataWrapperViewSettingsWide.storyName = "DTW View Settings";