@canmingir/link 1.2.30 → 1.2.32

package/src/lib/APITree/APITree.jsx

@@ -1,411 +1,173 @@
-import AddIcon from "@mui/icons-material/Add";
 import ArrowIcon from "./Arrow";
-import BlankTreeMessage from "../BlankTreeMessage/BlankTreeMessage";
-import DeleteIcon from "@mui/icons-material/Delete";
-import DeleteMethodDialog from "./DeleteMethodDialog";
-import EditIcon from "@mui/icons-material/Edit";
-import Error from "@mui/icons-material/Error";
-import Fade from "@mui/material/Fade";
-import ResourceMenu from "../ResourceMenu";
+import { Error } from "@mui/icons-material";
 import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
 import { TreeItem } from "@mui/x-tree-view/TreeItem";
-import styles from "./styles";
-import { publish, useEvent } from "@nucleoidai/react-event";
-import { useTheme } from "@mui/material/styles";
 
-import {
-  Box,
-  Card,
-  CardActions,
-  Fab,
-  Grid,
-  Menu,
-  MenuItem,
-  Tooltip,
-  Typography,
-} from "@mui/material";
-import React, { useEffect, useRef, useState } from "react";
-
-function APITree() {
-  const map = useRef({});
-  const [selected, setSelected] = React.useState(null);
-  const [contextMenu, setContextMenu] = React.useState(null);
-  const [rightClickMethod, setRightClickMethod] = React.useState();
-  const [methodDisabled, setMethodDisabled] = useState();
-  const [open, setOpen] = useState(false);
-  const [resourceMenu, setResourceMenu] = React.useState(false);
-  const [anchor, setAnchor] = React.useState();
-  const [expanded, setExpanded] = useState([]);
-  const [errors] = useEvent("DIAGNOSTICS_COMPLETED", []);
-  const theme = useTheme();
-
-  const [selectedAPI] = useEvent("SELECTED_API_CHANGED", {
-    path: "/",
-    method: "GET",
-  });
-
-  const [api] = useEvent("API_DATA_CHANGED", []);
-  const apiExists = api.length > 0;
-
-  const expandList = React.useMemo(() => [], []);
-
-  const handleToggle = (event, ids) => {
-    setExpanded(ids);
-  };
-
-  const handleExpandClick = () => {
-    setExpanded([...expandList]);
-  };
-
-  const select = (id, callDispatch = true) => {
-    if (map.current[id]) {
-      setSelected(id);
-      if (callDispatch) {
-        publish("SELECTED_API_CHANGED", map.current[id]);
-      }
-    }
-  };
-
-  useEffect(() => {
-    const selectedId = Object.keys(map.current).find(
-      (key) =>
-        map.current[key].path === selectedAPI.path &&
-        map.current[key].method === selectedAPI.method
-    );
-    if (selectedId) {
-      select(selectedId, false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedAPI]);
-
-  const handleContextMenu = (event, hash) => {
-    event.preventDefault();
-
-    if (hash) select(hash);
-
-    setRightClickMethod(hash);
-
-    setContextMenu(
-      !contextMenu
-        ? {
-            mouseX: event.clientX,
-            mouseY: event.clientY,
-          }
-        : null
-    );
-  };
-
-  const handleResourceMenu = (event) => {
-    event.preventDefault();
-
-    setResourceMenu(true);
-    setAnchor(event);
-  };
-
-  const handleCloseResourceMenu = () => {
-    setResourceMenu(false);
-  };
-
-  const handleClose = () => {
-    setRightClickMethod(null);
-    setContextMenu(null);
-  };
-
-  const editMethod = () => {
-    publish("API_DIALOG_OPEN", { type: "method", action: "edit" });
-    handleClose();
-  };
-
-  const deleteMethod = () => {
-    publish("API_METHOD_DELETE", {});
-    setOpen(false);
-  };
-
-  const handleDeleteMethod = () => {
-    setOpen(true);
-    handleClose();
-  };
-
-  const checkMethodDeletable = () => {
-    const countMethodsForPath = (path) => {
-      return api.filter((endpoint) => endpoint.path === path).length;
-    };
-    if (selectedAPI) {
-      const apiSelectedPath = selectedAPI.path;
-
-      return countMethodsForPath(apiSelectedPath) <= 1;
-    }
-    return false;
-  };
-
-  useEffect(() => {
-    if (!selected) {
-      select(Object.keys(map.current)[0]);
-    }
-    setMethodDisabled(checkMethodDeletable());
-    handleExpandClick();
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selected, api, selectedAPI]);
+import { Box, Tooltip } from "@mui/material";
+import React, { useMemo } from "react";
+
+function APITree({
+  api = [],
+  errors = [],
+  theme = {},
+  expanded = [],
+  selected = null,
+  onExpand = () => {},
+  onSelect = () => {},
+  rightClickMethod = null,
+}) {
+  const map = useMemo(() => ({}), []);
+
+  const treeNodes = useMemo(() => {
+    return compile(api, errors, theme, map, rightClickMethod);
+  }, [api, errors, theme, map, rightClickMethod]);
 
   return (
-    <Card sx={{ height: "100%" }}>
-      {apiExists ? (
-        <>
-          <Grid sx={styles.apiTreeGrid}>
-            {open && (
-              <DeleteMethodDialog
-                setOpen={setOpen}
-                deleteMethod={deleteMethod}
-              />
-            )}
-            <SimpleTreeView
-              slots={{
-                collapseIcon: () => <ArrowIcon down />,
-                expandIcon: () => <ArrowIcon right />,
-              }}
-              expandedItems={expanded}
-              onExpandedItemsChange={(event, itemIds) => setExpanded(itemIds)}
-              selectedItems={selected}
-              onSelectedItemsChange={(event, itemId) => select(itemId)}
-              sx={{
-                marginTop: "10px",
-              }}
-            >
-              {compile(
-                api,
-                handleContextMenu,
-                expandList,
-                rightClickMethod,
-                errors,
-                theme,
-                select,
-                handleResourceMenu,
-                map.current
-              )}
-            </SimpleTreeView>
-
-            <Menu
-              open={contextMenu !== null}
-              onClose={handleClose}
-              anchorReference="anchorPosition"
-              anchorPosition={
-                contextMenu !== null
-                  ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
-                  : undefined
-              }
-              slots={{
-                transition: Fade
-              }}
-            >
-              <MenuItem
-                onClick={() => {
-                  editMethod();
-                }}
-                data-cy="edit-method-menu-item"
-              >
-                <EditIcon />
-                <Typography sx={styles.menuItemText}>Edit</Typography>
-              </MenuItem>
-              <MenuItem
-                onClick={handleDeleteMethod}
-                disabled={methodDisabled}
-                data-cy="delete-method-button"
-              >
-                <DeleteIcon />
-                <Typography sx={styles.menuItemText}>Delete</Typography>
-              </MenuItem>
-            </Menu>
-            <ResourceMenu
-              anchor={anchor}
-              openMenu={resourceMenu}
-              handleClose={handleCloseResourceMenu}
-            />
-          </Grid>
-
-          <CardActions>
-            <Fab
-              variant="button"
-              size={"small"}
-              onClick={handleResourceMenu}
-              data-cy="resource-menu"
-            >
-              <AddIcon />
-            </Fab>
-          </CardActions>
-        </>
-      ) : (
-        <BlankTreeMessage item={"API"} />
-      )}
-    </Card>
+    <SimpleTreeView
+      slots={{
+        collapseIcon: () => <ArrowIcon down />,
+        expandIcon: () => <ArrowIcon right />,
+      }}
+      expandedItems={expanded}
+      onExpandedItemsChange={onExpand}
+      selectedItems={selected}
+      onSelectedItemsChange={onSelect}
+      sx={{ marginTop: "10px" }}
+    >
+      {treeNodes}
+    </SimpleTreeView>
   );
 }
 
 export const compile = (
   apiData,
-  handleContextMenu,
-  expandList,
-  rightClickMethod,
   errors,
   theme,
-  select,
-  handleResourceMenu,
-  map
+  map,
+  rightClickMethod = null
 ) => {
-  if (apiData.length !== 0) {
-    const groupedByPath = apiData.reduce((acc, endpoint) => {
-      const parts = endpoint.path.split("/");
-      let currentLevel = acc;
-
-      if (endpoint.path === "/") {
-        if (!currentLevel["/"]) {
-          currentLevel["/"] = {
-            methods: [],
-            children: {},
-          };
-        }
-        currentLevel["/"].methods.push(endpoint);
-      } else {
-        currentLevel = currentLevel["/"].children;
-
-        parts.forEach((part, idx, arr) => {
-          if (idx !== 0) {
-            const currentPart = "/" + part;
+  if (!apiData || apiData.length === 0) return null;
 
-            if (!currentLevel[currentPart]) {
-              currentLevel[currentPart] = {
-                methods: [],
-                children: {},
-              };
-            }
+  const groupedByPath = apiData.reduce((acc, endpoint) => {
+    const parts = endpoint.path.split("/");
+    let currentLevel = acc;
 
-            if (idx === arr.length - 1) {
-              currentLevel[currentPart].methods.push(endpoint);
-            } else {
-              currentLevel = currentLevel[currentPart].children;
-            }
-          }
-        });
-      }
+    if (!acc["/"]) {
+      acc["/"] = { methods: [], children: {} };
+    }
 
+    if (endpoint.path === "/") {
+      acc["/"].methods.push(endpoint);
       return acc;
-    }, {});
+    }
 
-    const renderTree = (data) => {
-      // eslint-disable-next-line
-      let resourceHash;
-      // eslint-disable-next-line
+    currentLevel = acc["/"].children;
 
-      return Object.keys(data).map((path) => {
-        const { methods, children } = data[path];
+    parts.forEach((part, idx) => {
+      if (idx === 0) return;
 
-        const methodItems = methods.map((method) => {
-          const payload = { path: method.path, method: method.method };
-          const hash = (resourceHash = window.btoa(JSON.stringify(payload)));
-          map[hash] = payload;
+      const currentPart = "/" + part;
 
-          const error = errors.find((item) => {
-            const [errPath, errMethod] = item.file.fileName.split(".", 2);
-            if (errPath === method.path && errMethod === method.method) {
-              return item;
-            } else {
-              return null;
-            }
-          });
+      if (!currentLevel[currentPart]) {
+        currentLevel[currentPart] = {
+          methods: [],
+          children: {},
+        };
+      }
 
-          return (
-            <TreeItem
-              key={hash}
-              itemId={hash}
-              onContextMenu={(event) => handleContextMenu(event, hash)}
-              sx={{
-                bgcolor:
-                  hash === rightClickMethod &&
-                  (theme.palette.custom?.apiTreeRightClick ||
-                    theme.palette.action.selected),
-              }}
-              label={
-                <Box
-                  sx={{
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                  }}
-                  data-cy={`method-${method.path}${method.method}`}
-                >
-                  <Box sx={theme.custom?.apiTreeItem}>
-                    <span
-                      style={{
-                        display: "flex",
-                        flexDirection: "row",
-                        alignItems: "center",
-                        justifyContent: "center",
-                      }}
-                    >
-                      {method.method.toUpperCase()}
-                    </span>
-                  </Box>
-                  {error && (
-                    <Tooltip title={error.messageText} placement={"right"}>
-                      <Error sx={{ color: "#8f8f91" }} />
-                    </Tooltip>
-                  )}
-                </Box>
-              }
-            />
-          );
-        });
+      if (idx === parts.length - 1) {
+        currentLevel[currentPart].methods.push(endpoint);
+      } else {
+        currentLevel = currentLevel[currentPart].children;
+      }
+    });
 
-        const childItems = children ? renderTree(children) : [];
-        expandList.push(path);
+    return acc;
+  }, {});
 
-        const handleResourceClick = (event) => {
-          event.stopPropagation();
+  const renderTree = (data) => {
+    return Object.keys(data).map((path) => {
+      const { methods, children } = data[path];
 
-          if (methods.length > 0) {
-            const firstMethod = methods[0];
-            const payload = {
-              path: firstMethod.path,
-              method: firstMethod.method,
-            };
-            const hash = window.btoa(JSON.stringify(payload));
-            select(hash);
-          }
-        };
+      const methodItems = methods.map((method) => {
+        const payload = { path: method.path, method: method.method };
+        const hash = window.btoa(JSON.stringify(payload));
+        map[hash] = payload;
 
-        const handleResourceContextMenu = (event) => {
-          event.preventDefault();
-          handleResourceClick(event);
-          handleResourceMenu(event);
-        };
+        const error = errors.find((item) => {
+          const [errPath, errMethod] =
+            item?.file?.fileName?.split(".", 2) || [];
+          return errPath === method.path && errMethod === method.method;
+        });
+
+        const highlightStyle =
+          rightClickMethod === hash
+            ? {
+                bgcolor: theme?.palette?.custom?.apiTreeRightClick || "#e0e0e0",
+              }
+            : {};
 
         return (
           <TreeItem
-            key={path}
-            itemId={path}
+            key={hash}
+            itemId={hash}
+            sx={highlightStyle}
             label={
-              <div
-                className="path"
-                onClick={(e) => e.stopPropagation()}
-                onContextMenu={handleResourceContextMenu}
-                style={{ cursor: "default" }}
-                data-cy={`path-${path}`}
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                }}
+                data-cy={`method-${method.path}${method.method}`}
               >
-                {path}
-              </div>
+                <Box>
+                  <span
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                  >
+                    {method.method.toUpperCase()}
+                  </span>
+                </Box>
+
+                {error && (
+                  <Tooltip title={error.messageText} placement="right">
+                    <Error sx={{ color: "#8f8f91" }} />
+                  </Tooltip>
+                )}
+              </Box>
             }
-          >
-            {[...methodItems, ...childItems]}
-          </TreeItem>
+          />
         );
       });
-    };
 
-    return renderTree(groupedByPath);
-  } else {
-    return null;
-  }
+      const childItems = children ? renderTree(children) : [];
+
+      return (
+        <TreeItem
+          key={path}
+          itemId={path}
+          label={
+            <div
+              className="path"
+              style={{ cursor: "default" }}
+              data-cy={`path-${path}`}
+            >
+              {path}
+            </div>
+          }
+        >
+          {[...methodItems, ...childItems]}
+        </TreeItem>
+      );
+    });
+  };
+
+  return renderTree(groupedByPath);
 };
 
 export default APITree;

package/src/lib/APITree/Arrow.jsx

@@ -1,20 +1,21 @@
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import React from "react";
 
-// fill: "#212121", old fill color
+import {
+  KeyboardArrowDown,
+  KeyboardArrowLeft,
+  KeyboardArrowRight,
+  KeyboardArrowUp,
+} from "@mui/icons-material";
 
 function Arrow({ up, down, right, left }) {
   return up ? (
-    <KeyboardArrowUpIcon />
+    <KeyboardArrowUp />
   ) : down ? (
-    <KeyboardArrowDownIcon />
+    <KeyboardArrowDown />
   ) : right ? (
-    <KeyboardArrowRightIcon />
+    <KeyboardArrowRight />
   ) : left ? (
-    <KeyboardArrowLeftIcon />
+    <KeyboardArrowLeft />
   ) : null;
 }
 

package/src/lib/Flow/core/Flow.jsx

@@ -1,6 +1,7 @@
 import FlowNode from "./FlowNode";
 import { useGraphOperations } from "../hooks/useGraphOperations";
 
+import { Box, alpha } from "@mui/material";
 import React, { useMemo, useState } from "react";
 import { assertLinkedGraph, buildTreeFromLinked } from "../utils/flowUtils";
 
@@ -62,19 +63,31 @@ export const Flow = ({
   }, [nodesById, roots]);
 
   return (
-    <FlowNode
-      node={treeData}
-      variant={variant}
-      style={style}
-      plugin={plugin}
-      isRoot={true}
-      nodesById={allNodesById}
-      onPaste={editable ? handlePaste : undefined}
-      onCut={editable ? handleCut : undefined}
-      onConnect={editable ? handleConnect : undefined}
-      floatingNodes={floatingNodes}
-      height={height}
-    />
+    <Box
+      sx={{
+        backgroundImage: (theme) => `
+                          radial-gradient(
+                            ${alpha(theme.palette.divider, 0.08)} 1px,
+                            transparent 1px
+                          )
+                        `,
+        backgroundSize: "16px 16px",
+      }}
+    >
+      <FlowNode
+        node={treeData}
+        variant={variant}
+        style={style}
+        plugin={plugin}
+        isRoot={true}
+        nodesById={allNodesById}
+        onPaste={editable ? handlePaste : undefined}
+        onCut={editable ? handleCut : undefined}
+        onConnect={editable ? handleConnect : undefined}
+        floatingNodes={floatingNodes}
+        height={height}
+      />
+    </Box>
   );
 };
 

package/src/lib/NucDialog/NucDialog.jsx

@@ -1,8 +1,6 @@
-import { Close } from "@mui/icons-material";
-import Fullscreen from "@mui/icons-material/Fullscreen";
-import FullscreenExit from "@mui/icons-material/FullscreenExit";
 import React from "react";
 
+import { Close, Fullscreen, FullscreenExit } from "@mui/icons-material";
 import {
   Dialog,
   DialogActions,
@@ -12,7 +10,7 @@ import {
 } from "@mui/material";
 import { storage, useStorage } from "@nucleoidjs/webstorage";
 
-export default function NucDialog({
+function NucDialog({
   title,
   minWidth = 600,
   children,
@@ -106,3 +104,5 @@ export default function NucDialog({
     </Dialog>
   );
 }
+
+export default NucDialog;

package/src/lib/ParamTable/ParamTable.jsx

@@ -1,5 +1,5 @@
 import { DataGrid } from "@mui/x-data-grid";
-import HighlightOffIcon from "@mui/icons-material/HighlightOff";
+import { HighlightOff } from "@mui/icons-material";
 import React from "react";
 import TypeMenu from "./TypeMenu";
 import styles from "./styles";
@@ -100,7 +100,7 @@ const ParamTable = ({ types, params, setParams }) => {
             onClick={() => removeParam(id)}
             size="large"
           >
-            <HighlightOffIcon />
+            <HighlightOff />
           </IconButton>
         );
       },

package/src/lib/ResourceMenu/AlertMassage.jsx

@@ -1,6 +1,6 @@
-import { Alert } from "@mui/material";
 import React from "react";
-import Snackbar from "@mui/material/Snackbar";
+
+import { Alert, Snackbar } from "@mui/material";
 
 export default function AlertMassage({ message }) {
   const [open, setOpen] = React.useState(true);