blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,831 @@
+import { StarIcon } from "@heroicons/react/24/outline";
+import {
+  CheckCircleIcon,
+  InformationCircleIcon,
+} from "@heroicons/react/24/solid";
+import { storiesOf } from "@storybook/react";
+import moment from "moment";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "../../action/button";
+import { IconButton } from "../../action/iconButton";
+import { Alert } from "../../display/alert";
+import { Loading } from "../../display/loading";
+import { Tag } from "../../display/tag";
+import { Tabs } from "../../navigation/tabs";
+import { StorySection } from "../../storyUtils";
+import { Container } from "../../structure/container";
+import { DataStructure } from "../dataTemplate/model";
+import {
+  CalendarSettings,
+  FeedsSettings,
+  KanbanSettings,
+} from "../dataTemplate/spaceModel";
+import { ProjectSchema } from "../testSchema";
+import { DataTemplateWrapper } from "./index";
+import README from "./README.md";
+const stories = storiesOf("Data", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+  argTypes: {
+    status: {
+      control: { type: "select" },
+      options: ["Pending Submission", "Pending Review", "Approved", "Rejected"],
+      description: "Filter by checklist status",
+    },
+  },
+  args: {
+    status: "Pending Submission",
+  },
+});
+
+stories.add("Data Wrapper", () => {
+  const [mount, setMount] = useState<boolean>(false);
+  const dataRefreshRef: any = useRef(null);
+  const [statusFilter] = useState<string>("all");
+  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
+  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
+  const [listLayout, setListLayout] = useState("table");
+  const dtwBaseUrl = "http://localhost:3000";
+
+  useEffect(() => {
+    setMount(true);
+  }, []);
+
+  useEffect(() => {
+    if (mount && dataRefreshRef.current) {
+      dataRefreshRef.current.handleRefresh();
+    }
+  }, [statusFilter, mount]);
+
+  const handleNavigate = (type: any, id: any, viewId: any) => {
+    setViewType(type);
+    setSelectedId(id);
+  };
+
+  if (!mount) {
+    return <Loading />;
+  }
+
+  const renderViewSettings = () => {
+    const viewSettings: {
+      gridImage?: string;
+      gridScroll?: boolean;
+      gridContain?: boolean;
+      listImage?: string;
+      calendarSettings?: CalendarSettings;
+      feedsSettings?: FeedsSettings;
+      kanbanSettings?: KanbanSettings;
+    } = {};
+
+    if (listLayout === "grid") {
+      viewSettings.gridImage = "flowDiagramAppendix";
+    }
+    if (listLayout === "list" || listLayout === "customList") {
+      viewSettings.listImage = "flowDiagramAppendix";
+    }
+    if (listLayout === "calendar") {
+      viewSettings.calendarSettings = {
+        title: "researchTitle",
+        startDate: "createdAt",
+      };
+    }
+    return viewSettings;
+  };
+
+  const renderCustomListComponent = (data: any) => {
+    return (
+      <div className="grid grid-cols-2 gap-4">
+        {data.map((eachItem: any, index: number) => {
+          return (
+            <div className="p-4 rounded-lg bg-gray-50 truncate text-sm text-gray-600">
+              {eachItem?.researchTitle || `Item ${index}`}
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return (
+    <StorySection
+      title="Data Wrapper"
+      description="The recommended starting point for custom integrations. Use this when you don't have a Space object — for most custom builds, DataTemplateWrapper is the right choice over DataTemplate."
+    >
+      <div className="w-full">
+        <Tabs
+          tabs={[
+            { id: "table", name: "Table View", href: "#" },
+            { id: "list", name: "List View", href: "#" },
+            { id: "grid", name: "Grid View", href: "#" },
+            { id: "calendar", name: "Calendar View", href: "#" },
+            { id: "customList", name: "Custom List View", href: "#" },
+          ]}
+          onClick={(id) => {
+            setListLayout(id);
+            setViewType("list");
+          }}
+          selectedId={listLayout}
+        />
+        <div className="mb-6" />
+        <DataTemplateWrapper
+          ref={dataRefreshRef}
+          title={"KPJ Projects"}
+          description="Manage all your projects here"
+          type={viewType}
+          id={selectedId}
+          collectionId={"kpj-projects"}
+          schema={ProjectSchema}
+          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={{
+            bareOffline: false, //INFO: If set to true, form data will be saved into device's indexedDB and users have to submit manually once internet connection resumes
+            bareListComponent:
+              // INFO: Render custom component when type is list (table view, list view, grid view etc)
+              listLayout === "customList"
+                ? (data) => renderCustomListComponent(data)
+                : undefined,
+            bareListDescription: (key, value) => {
+              if (key === "status" && value) {
+                return (
+                  <Tag
+                    tagText={value}
+                    color={value === "Approved" ? "green" : "blue"}
+                    size="small"
+                  />
+                );
+              } // override default UI with custom component where columnId matches key when type is list (table, list, grid etc)
+            },
+            bareListActionBtns: (data) => [
+              <IconButton
+                key={"actionBtn"}
+                bgColor="bg-white border"
+                icon={<StarIcon className="w-5 h-5 text-yellow-500" />}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  console.log(data);
+                }}
+              />, // render additional custom button in each table row
+            ],
+            bareListFilterQuery: [
+              // INFO: Add query to filter data when type is list (table view, grid view, grid view etc)
+              // { type: "=", queryId: "status", value: "Approved" },
+            ],
+            bareListGridComponent: (data: any) => {
+              if (data?.status === "Approved") {
+                return (
+                  <div className="text-sm p-2 rounded-lg bg-primary-50 text-primary-500">
+                    Custom Component Below Main Content
+                  </div>
+                );
+              } // add custom content below the grid item (will not overide the default UI)
+            },
+            bareListGridColClassName: "grid-cols-2 md:grid-cols-4 gap-4", // override the default grid column, row and gap classnames
+            bareListGridTags: (data) => {
+              const tags: string[] = [];
+              if (data?.status) tags.push(data.status);
+              if (data?.researchTitleAbbreviation)
+                tags.push(data.researchTitleAbbreviation);
+
+              return tags; // add small tags above grid item's title
+            },
+            bareListGridFallbackImg: (data) => {
+              if (data?.status === "Approved") {
+                return "https://images.unsplash.com/photo-1553877522-43269d4ea984?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3zD";
+              } else
+                return "https://images.unsplash.com/photo-1584644769698-4762ca337c17?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
+            }, // fallback image in case value for image column is not present
+            bareListGridRibbonText: (data) => {
+              if (data?.status?.includes("Review")) {
+                return "Review";
+              }
+              return ""; // add a ribbon on the top left corner of the grid item
+            },
+            bareListHandleData: (data) => {
+              console.log("Available data in current date: ", data); // returns all the data when type (view type) is list
+            },
+            bareReadComponent: () => (
+              <Alert title="Custom Alert in Read View" />
+            ), // Custom additional component in read view
+            bareReadComponentPos: "top", // position custom addition read view component to the top
+            bareReadComponentHide: false, // only set to true if want to override default read view with bareReadComponent
+            bareReadDescription: (key, value) => {
+              // INFO: override default UI with custom component where columnId matches key in read view
+              if (key === "status" && value) {
+                return <Tag tagText={value} />;
+              }
+            },
+            bareReadHandleData: (data) => {
+              console.log("Data from read view: ", data); // returns data when enter read view
+            },
+            bareReferenceDel: [
+              {
+                collectionId: "",
+                collectionName: "",
+                columnId: "",
+                schema: [],
+              },
+            ], // INFO: This is to prevent deletion of data if there is a reference input in schema and the reference column points to existing collection in database
+            bareUpdateMobileView: true, //INFO: This will render form input in compact mobile view
+            bareUpdateActionComponent:
+              // INFO: Add custom component on top right corner, normally used to add buttons
+              // NOTE: This will overide the default action buttons (except for Delete button). Add those buttons back manually
+              viewType === "read"
+                ? (data) => {
+                    return (
+                      <div className="flex gap-x-3">
+                        <Button type="normal" text="Print" />
+                        <Button
+                          type="normal"
+                          text="Update"
+                          onClick={() => {
+                            setSelectedId(data._id);
+                            setViewType("update");
+                          }}
+                        />
+                      </div>
+                    );
+                  }
+                : undefined,
+            bareUpdatePrefill: () => {
+              // INFO: prefill column values. These columns will no longer be visible on the form. Good for values that cannot be edited by users
+              return [
+                {
+                  key: "updatedAt",
+                  value: moment().toDate(),
+                },
+              ];
+            },
+            bareUpdateComponent: () => {
+              // INFO: add additional component to below form in update view
+              return (
+                <Alert
+                  title="Hi there!"
+                  desc="Custom component that shows below or above (based on bareUpdateComponentAbove) the form"
+                />
+              );
+            },
+            bareUpdateComponentAbove: true, // INFO: render bareUpdateComponent above the form. Set to false to render it below form
+            bareUpdateIndividualComponent: (
+              _columnId: string,
+              _ref: any,
+              _selectedData: any,
+              _setSelectedData: (data: any) => void,
+            ) => {
+              // INFO: Override default input with custom input, value state will be pass back to the form
+              // Example:
+              // if (columnId === "column X") {
+              //   return (
+              //     <TextInput
+              //       ref={ref}
+              //       label=""
+              //       placeholder=""
+              //       type="text"
+              //       value={selectedData.columnId}
+              //       onChange={(e) => setSelectedData(e.target.value)}
+              //     />
+              //   );
+              // }
+              return <div></div>;
+            },
+            bareUpdateHandleData: (data) => {
+              // INFO: returns data when enter update view
+              console.log("Update view data: ", data);
+            },
+            bareUpdateTabId: (tabId) => {
+              // INFO: Returns the current tab in update view
+              console.log("Updating data from tab ", tabId);
+            },
+            bareUpdateTabComponent: (tabIds) => {
+              // INFO: Add icon to tab or skip tab in update view
+              return tabIds.map((eachTabId, index: number) => {
+                const icon =
+                  Math.floor(index / 2) % 2 === 0 ? (
+                    <CheckCircleIcon className="w-5 h-5 text-primary-500" />
+                  ) : (
+                    <InformationCircleIcon className="w-5 h-5 text-yellow-500" />
+                  );
+
+                return {
+                  tabId: eachTabId,
+                  icon,
+                  skipped: false,
+                };
+              });
+            },
+            bareUpdateColumnType: "two", // control how many inputs to be dispalyed per row in update view (default is 2, small browser width default to 1)
+            bareUpdateHandlePreComplete: (data) => {
+              /**
+               * Example use cases:
+               * 1. Validate data before submission. Return true if validation pass, otherwise return false to prevent submission
+               * 2. Override column value in the data
+               */
+
+              // Example 1: Validate data
+              // if(validation passes){
+              //   return true
+              // }else return false
+
+              // Example 2: Overrite column value
+              // if(condtion X){
+              //   data.columnId = formatted value
+              // }
+
+              return data;
+            },
+            bareUpdateHandleComplete: async (data) => {
+              console.log("Form data to be submitted: ", data);
+              // INFO: Use this to override the default form submission (write request to databse)
+              // await handleCustomFormSubmit()
+            },
+            bareUpdateHandlePostComplete: async (data) => {
+              console.log("Form data after submission: ", data);
+              // INFO: Use this to perform other actions once form data is submitted (wrote to database)
+              // await handleCustomPostFormSubmit()
+            },
+          }}
+          organise={{
+            sort: { sortId: "createdAt", type: "desc" as const }, // sort list view data
+            hideSearch: false, // set to false to enable default search input in list view
+            filterComponentNewRow: true, // avoid crowding for filter inputs in list view
+            breadcrumbType: "button", // shows a "Back" button in read view and update view
+            tabAlign: "left", // shows form input categories (based on groupId from models in schema) in update view
+            showExport: true, // enable export CSV, Import CSV, Print etc. Only when type is list (table view, grid view, list view etc)
+            exportSettings: {
+              enableExportReadPDF: true, // enable export read view page UI, blob will be generated
+              exportReadPDFDimensions: {
+                forceDesktopView: true,
+                captureWidth: 1440,
+                pageSize: "a4",
+                scale: 2,
+              },
+              exportReadPDFHeader: {
+                image: {
+                  src: "https://images.unsplash.com/photo-1773609108583-4f0040c75e7f?q=80&w=1332&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+                  alignment: "center",
+                  height: 20,
+                  width: 50,
+                },
+                text: {
+                  value: "PDF",
+                  alignment: "center",
+                },
+              },
+              onExportReadPDFBlob: async (blob) => {
+                const fileName = `Export-${moment().format(
+                  "YYYY-MM-DD-HH-mm-ss",
+                )}.pdf`;
+                const file = new File([blob], fileName, {
+                  type: "application/pdf",
+                });
+                console.log("Read View Export: ", file);
+                // Process blob to generate PDF
+              },
+            },
+          }}
+          handleNavigate={handleNavigate}
+          additionalQuery={[
+            {
+              type: "list",
+              value: "sustainableDevelopmentGoals",
+              options: [
+                "No poverty",
+                "Zero Hunger",
+                "Good Health and Well Being",
+              ],
+              filterLabel: "Development Goals",
+            },
+            {
+              type: "reference",
+              value: "grantId",
+              spaceId: "kpj-grants",
+              label: "title",
+              filterLabel: "Grant ID",
+            },
+            {
+              type: "range",
+              value: "createdAt",
+            },
+          ]}
+          limit={10}
+          viewSettings={renderViewSettings()}
+        />
+      </div>
+    </StorySection>
+  );
+});
+
+stories.add("Data Wrapper Union", () => {
+  const [mount, setMount] = useState<boolean>(false);
+  const dataRefreshRef: any = useRef(null);
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [startDate, setStartDate] = useState<string>("");
+  const [endDate, setEndDate] = useState<string>("");
+  const [installerFilter, setInstallerFilter] = useState<string>("Wai Seng");
+  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
+  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    setMount(true);
+  }, []);
+
+  useEffect(() => {
+    if (mount && dataRefreshRef.current) {
+      dataRefreshRef.current.handleRefresh();
+    }
+  }, [installerFilter, statusFilter, startDate, endDate, mount]);
+
+  const handleNavigate = (type: any, id: any, viewId: any) => {
+    setViewType(type);
+    setSelectedId(id);
+  };
+
+  const handleBackToList = () => {
+    setViewType("list");
+    setSelectedId(undefined);
+  };
+
+  const getUnionCollectionsConfig = () => {
+    const basePersonQuery: any[] = [];
+
+    if (installerFilter.length > 0) {
+      basePersonQuery.push({
+        type: "search",
+        searchIds: ["installer", "inspector"],
+        value: installerFilter,
+      });
+    }
+
+    if (statusFilter !== "all") {
+      basePersonQuery.push({
+        queryId: "status",
+        type: "=",
+        value: statusFilter,
+      });
+    }
+
+    const getDateQuery = (dateField: string) => {
+      if (startDate || endDate) {
+        return {
+          queryId: dateField,
+          value:
+            startDate && endDate
+              ? [
+                  new Date(startDate).toISOString(),
+                  new Date(endDate).toISOString(),
+                ]
+              : new Date(startDate).toISOString(),
+          type: startDate && endDate ? "><" : ">",
+        };
+      }
+      return null;
+    };
+
+    return {
+      unionCollections: [
+        {
+          collection: "verdant-deliveries",
+          source: "dynamic",
+          sourceLogic: {
+            $cond: {
+              if: { $eq: ["$type", "om"] },
+              then: "O&M Maintenance",
+              else: "PV Delivery",
+            },
+          },
+          query: [
+            {
+              queryId: "type",
+              type: "in",
+              value: ["om", "pv"],
+            },
+            ...(getDateQuery("proposed_date")
+              ? [
+                  {
+                    queryId: "proposed_date",
+                    type: getDateQuery("proposed_date")!.type,
+                    value: getDateQuery("proposed_date")!.value,
+                    orQuery: true,
+                    orQueryGroupId: "deliveryDate",
+                  },
+                ]
+              : []),
+            ...(getDateQuery("tent_installation_date")
+              ? [
+                  {
+                    queryId: "tent_installation_date",
+                    type: getDateQuery("tent_installation_date")!.type,
+                    value: getDateQuery("tent_installation_date")!.value,
+                    orQuery: true,
+                    orQueryGroupId: "deliveryDate",
+                  },
+                ]
+              : []),
+            ...basePersonQuery,
+          ].filter(Boolean),
+          projection: {
+            _id: 1,
+            mondayItemId: 1,
+            clientName: 1,
+            date: 1,
+            createdAt: 1,
+            type: 1,
+            status: 1,
+            installer: 1,
+            name: 1,
+            phone: 1,
+            location: 1,
+            proposed_date: 1,
+            tent_installation_date: 1,
+            tent_service_date: 1,
+            checklist_status: 1,
+          },
+          addFields: {
+            sortDate: {
+              $ifNull: [
+                {
+                  $cond: {
+                    if: { $eq: ["$type", "om"] },
+                    then: "$proposed_date",
+                    else: "$tent_installation_date",
+                  },
+                },
+                "$createdAt",
+              ],
+            },
+          },
+        },
+        {
+          collection: "verdant-service-tickets",
+          source: "dynamic",
+          sourceLogic: {
+            $cond: {
+              if: { $eq: ["$category", "Installation Defect"] },
+              then: "Installation Defect",
+              else: "Critical Load",
+            },
+          },
+          query: [
+            {
+              queryId: "category",
+              type: "in",
+              value: ["Installation Defect", "Critical Load"],
+            },
+            ...(getDateQuery("tent_service_date")
+              ? [
+                  {
+                    queryId: "tent_service_date",
+                    type: getDateQuery("tent_service_date")!.type,
+                    value: getDateQuery("tent_service_date")!.value,
+                  },
+                ]
+              : []),
+            ...basePersonQuery,
+          ].filter(Boolean),
+          projection: {
+            _id: 1,
+            mondayItemId: 1,
+            clientName: 1,
+            date: 1,
+            createdAt: 1,
+            category: 1,
+            status: 1,
+            installer: 1,
+            name: 1,
+            phone: 1,
+            location: 1,
+            tent_service_date: 1,
+            checklist_status: 1,
+          },
+          addFields: {
+            sortDate: {
+              $ifNull: ["$tent_service_date", "$createdAt"],
+            },
+          },
+        },
+      ],
+      sort: { sortId: "sortDate", type: "desc" as const },
+    };
+  };
+
+  if (!mount) {
+    return <Loading />;
+  }
+
+  return (
+    <Container bgColor="bg-white">
+      <div className="mb-4 flex flex-wrap items-end gap-4">
+        {viewType !== "list" && (
+          <button
+            onClick={handleBackToList}
+            className="px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300 rounded-md"
+          >
+            ← Back to List
+          </button>
+        )}
+        {viewType === "list" && (
+          <>
+            <div className="flex flex-col">
+              <label className="text-sm text-gray-700 mb-1">
+                Filter by Installer
+              </label>
+              <select
+                className="border border-gray-300 rounded-md px-2 py-1 text-sm"
+                value={installerFilter}
+                onChange={(e) => setInstallerFilter(e.target.value)}
+              >
+                <option value="Wai Seng">Wai Seng</option>
+                <option value="John Doe">John Doe</option>
+                <option value="Jane Smith">Jane Smith</option>
+              </select>
+            </div>
+            <div className="flex flex-col">
+              <label className="text-sm text-gray-700 mb-1">
+                Filter by Status
+              </label>
+              <select
+                className="border border-gray-300 rounded-md px-2 py-1 text-sm"
+                value={statusFilter}
+                onChange={(e) => setStatusFilter(e.target.value)}
+              >
+                <option value="all">All</option>
+                <option value="Pending to set">Pending to set</option>
+                <option value="Confirmed">Confirmed</option>
+              </select>
+            </div>
+            <div className="flex flex-col">
+              <label className="text-sm text-gray-700 mb-1">Start Date</label>
+              <input
+                type="date"
+                className="border border-gray-300 rounded-md px-2 py-1 text-sm"
+                value={startDate}
+                onChange={(e) => setStartDate(e.target.value)}
+              />
+            </div>
+            <div className="flex flex-col">
+              <label className="text-sm text-gray-700 mb-1">End Date</label>
+              <input
+                type="date"
+                className="border border-gray-300 rounded-md px-2 py-1 text-sm"
+                value={endDate}
+                onChange={(e) => setEndDate(e.target.value)}
+              />
+            </div>
+          </>
+        )}
+        {viewType !== "list" && (
+          <div className="flex flex-col">
+            <label className="text-sm text-gray-700 mb-1">Current View:</label>
+            <div className="text-xs text-gray-600">
+              {viewType} - ID: {selectedId}
+            </div>
+          </div>
+        )}
+      </div>
+      <DataTemplateWrapper
+        ref={dataRefreshRef}
+        title={"Union Collections Demo"}
+        description="Dynamic unionCollections combining deliveries & service tickets with installer filtering"
+        type={viewType}
+        id={selectedId}
+        collectionId="verdant-deliveries"
+        schema={
+          [
+            {
+              id: "source",
+              name: "Source",
+              type: "string",
+              hideForm: true,
+            },
+            {
+              id: "type",
+              name: "Type",
+              type: "string",
+              optional: true,
+              hideForm: true,
+            },
+            {
+              id: "name",
+              name: "Client Name",
+              type: "string",
+              optional: true,
+              hideForm: true,
+            },
+            {
+              id: "status",
+              name: "Status",
+              type: "string",
+              optional: true,
+              hideForm: true,
+            },
+            {
+              id: "category",
+              name: "Category",
+              type: "string",
+              optional: true,
+              hideForm: true,
+            },
+            {
+              id: "proposed_date",
+              name: "Proposed Date",
+              type: "date",
+              optional: true,
+              hideForm: true,
+            },
+            {
+              id: "tent_service_date",
+              name: "Service Date",
+              type: "date",
+              optional: true,
+              hideForm: true,
+            },
+            {
+              id: "date",
+              name: "Date",
+              type: "date",
+              optional: true,
+              hideForm: true,
+            },
+            {
+              id: "location",
+              name: "Location",
+              type: "string",
+              optional: true,
+              hideForm: true,
+            },
+            {
+              id: "installer",
+              name: "Installer",
+              type: "string",
+              optional: true,
+              hideForm: true,
+            },
+            {
+              id: "checklist_status",
+              name: "Checklist Status",
+              type: "string",
+              optional: true,
+              hideForm: true,
+            },
+            {
+              id: "phone",
+              name: "Phone",
+              type: "string",
+              optional: true,
+              hideForm: true,
+            },
+            {
+              id: "mondayItemId",
+              name: "Monday Item ID",
+              type: "string",
+              optional: true,
+              hideForm: true,
+            },
+            {
+              id: "clientName",
+              name: "Client",
+              type: "string",
+              optional: true,
+              hideForm: true,
+            },
+          ] as DataStructure[]
+        }
+        workspace={{
+          apiEndpointType: "mongoDB",
+          apiEndpoint: "http://localhost:3000/api/mongoData",
+          apiEndpointToken: "",
+          assetUploadEndpoint: "http://localhost:3000/api/asset",
+          apiUserToken: "",
+        }}
+        bareSettings={{
+          bareUpdateMobileView: true,
+        }}
+        organise={getUnionCollectionsConfig()}
+        handleNavigate={handleNavigate}
+        lib={{
+          storage: null,
+          ref: null,
+          getDownloadURL: null,
+          uploadBytes: null,
+        }}
+        limit={50}
+      />
+    </Container>
+  );
+});