blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,196 @@
+import { Menu, Transition } from "@headlessui/react";
+import { storiesOf } from "@storybook/react";
+import axios from "axios";
+import Papa from "papaparse";
+import React, { useEffect, useState } from "react";
+import { Loading } from "../../display/loading";
+import { Container } from "../../structure/container";
+import { Query, Sort } from "../readQuery";
+import { getSpaceData, getWorkspaceData } from "../stories";
+import { blixifyDevCollection, blixifyDevWorkspace } from "../testData";
+import { parseSpaceToDataStructure, parseWorkspaceSettings } from "../utils";
+import { DataTemplateProps } from "./dataStateModel";
+import { DataStructure } from "./model";
+import README from "./README.md";
+import SampleModule from "./SampleModule";
+import { AdditionalQuery, ExtendedTabs, Space } from "./spaceModel";
+import { Workspace } from "./workspaceModel";
+
+const stories = storiesOf("Data", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Data Module", () => {
+  const [selectedSpace, setSelectedSpace] = useState<Space | null>(null);
+  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[]>([]);
+
+  //INFO : Change this to test for Blixify Space Sample
+  const [collectionParam] = useState(blixifyDevCollection);
+  const workspaceParam = blixifyDevWorkspace;
+
+  const [viewParam, setViewParam] = useState("general");
+  const [typeParam, setTypeParam] = useState("list");
+  const [dataParam, setDataParam] = useState(
+    "0f95e0b6-fcf7-4046-8395-06f2f271f56a"
+  );
+
+  const getLocalUrl = "/dashboard/spaceD";
+  const isProd = true;
+  const queryAPI = isProd
+    ? "https://space.blixify.co"
+    : "https://space-dev.blixify.co";
+  const storageUrl = "https://firebasestorage.googleapis.com/v0/b/";
+
+  const defaultAPIUrl = `${queryAPI}/api/spaceD`;
+  const defaultAssetAPI = `${storageUrl}${
+    isProd ? "blixify-space" : "blixify-space-dev"
+  }.appspot.com/o/`;
+  const defaultUploadAPI = `${queryAPI}/api/asset`;
+
+  useEffect(() => {
+    setMount(false);
+    handleRetrieveData();
+  }, [collectionParam]);
+
+  useEffect(() => {
+    try {
+      const mapAPIKey = "";
+      const mapScript = document.createElement("script");
+      mapScript.id = "googleMaps";
+      mapScript.type = "text/javascript";
+      mapScript.src = `https://maps.googleapis.com/maps/api/js?key=${mapAPIKey}&libraries=places,drawing,geometry`;
+      mapScript.async = true;
+      mapScript.defer = true;
+      const head = document.getElementsByTagName("head")[0];
+      if (head) {
+        head.appendChild(mapScript);
+      }
+    } catch (err) {}
+  }, []);
+
+  const handleNavigate = (
+    type: string,
+    selectedId?: string,
+    viewId?: string
+  ) => {
+    setTypeParam(type);
+    if (selectedId) setDataParam(selectedId);
+    if (viewId) setViewParam(viewId);
+  };
+
+  const handleRetrieveData = async () => {
+    if (collectionParam) {
+      const space: Space = await getSpaceData(collectionParam);
+      if (space) {
+        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);
+      }
+    }
+    setMount(true);
+  };
+
+  if (!mount) {
+    return <Loading />;
+  }
+
+  const renderDataTemplateProps = (selectedSpace: Space) => {
+    const title = selectedSpace?.name;
+    const description = selectedSpace?.description ?? "";
+    const schema: DataStructure[] = parseSpaceToDataStructure(selectedSpace);
+
+    let spaceAdditionalQuery: Query[] = [];
+    let defaultPrefillSettings: { key: string; value: string }[] = [];
+
+    const workspaceDeveloperSettings = parseWorkspaceSettings({
+      dbEndpoint: defaultAPIUrl,
+      imageEndpoint: defaultAssetAPI,
+      uploadEndpoint: defaultUploadAPI,
+    });
+
+    const dataTemplateProps: DataTemplateProps = {
+      title: title,
+      description: description,
+      type: typeParam,
+      id: dataParam,
+      collectionId: collectionParam,
+      model: schema,
+      localURLEndpoint: getLocalUrl,
+      space: selectedSpace,
+      limit: 10,
+      edit: {
+        allEditable: true,
+        deleteBtn: false,
+        listEditable: true,
+      },
+      organise: {
+        sort: sort?.sortId ? sort : undefined,
+        additionalQuery: queries,
+        extendedTabs: tabs,
+        viewId: viewParam,
+        filterComponentNewRow: queries.length >= 4,
+        handleNavigate: handleNavigate,
+      },
+      lib: {
+        axios,
+        Transition,
+        Menu,
+        papaParser: Papa,
+      },
+      devSettings: {
+        ...workspaceDeveloperSettings,
+        schemaEndpoint: "/api/data",
+        schemaEndpointToken: "",
+        maxFileSize: 1024,
+        organisationMembers: [],
+        currentUser: {
+          userEmail: "",
+          userName: "",
+        },
+        functionEndpoint: `https://asia-southeast1-blixify-space${
+          !isProd ? "-dev" : ""
+        }.cloudfunctions.net`,
+      },
+      bareSettings: {
+        bareListFilterQuery: spaceAdditionalQuery,
+        bareUpdatePrefill: () => {
+          return defaultPrefillSettings;
+        },
+        bareCSVExportSettings: true,
+        bareCSVImportSettings: true,
+      },
+      linkType: "next",
+    };
+
+    return dataTemplateProps;
+  };
+
+  return (
+    <Container bgColor="bg-white">
+      {selectedSpace && selectedWorkspace && (
+        <SampleModule dataProps={renderDataTemplateProps(selectedSpace)} />
+      )}
+    </Container>
+  );
+});

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

@@ -0,0 +1,337 @@
+import { Menu, Transition } from "@headlessui/react";
+import { TagIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import axios from "axios";
+import Papa from "papaparse";
+import React, { useEffect, useRef, useState } from "react";
+import { DataTemplate } 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 README from "./README.md";
+import { AdditionalQuery, ExtendedTabs, Space } from "./spaceModel";
+import { Workspace } from "./workspaceModel";
+
+const stories = storiesOf("Data", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Data Template", () => {
+  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 dataTemplateRef = useRef<any>(null);
+
+  const [viewParam, setViewParam] = useState("general");
+  const [typeParam, setTypeParam] = useState("list");
+  const [dataParam, setDataParam] = useState("");
+
+  const getLocalUrl = "/dashboard/spaceD";
+  const title = selectedSpace?.name ?? "";
+  const description = selectedSpace?.description ?? "List of sample data";
+
+  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);
+      }
+    }
+    setMount(true);
+  };
+
+  const handleSortData = (sortValue: Sort) => {
+    setSort(sortValue.sortId !== "" ? sortValue : undefined);
+  };
+
+  const handleQueries = (queries: AdditionalQuery[]) => {
+    setQueries(queries);
+  };
+
+  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")
+        )
+      );
+    }
+    setSelectedSpace(clonedSpace);
+    dataTemplateRef.current?.handleRefresh?.();
+  };
+
+  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);
+  };
+
+  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);
+  };
+
+  const handleTab = (tabValue: ExtendedTabs[]) => {
+    setTabs(tabValue);
+  };
+
+  if (!mount) {
+    return <Loading />;
+  }
+
+  const devSettings = parseWorkspaceSettings(
+    {
+      dbEndpoint: defaultDBEndpoint,
+      imageEndpoint: defaultImageEndpoint,
+      uploadEndpoint: defaultUploadEndpoint,
+    },
+    selectedWorkspace
+  );
+
+  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 DataTemplate 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">
+            <DataTemplate
+              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,
+                advSortEnabled: true,
+                advFilterEnabled: true,
+                advDragEnabled: true,
+                onChangeSort: handleSortData,
+                onChangeFilter: handleQueries,
+                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>
+    </>
+  );
+});