@canmingir/link 1.2.31 → 1.2.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.31",
+  "version": "1.2.33",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/src/lib/APIDialogAction/APIDialogAction.jsx

@@ -1,8 +1,7 @@
-import DeleteIcon from "@mui/icons-material/Delete";
 import DialogTooltip from "../DialogTootip/DialogTooltip";
-import SaveIcon from "@mui/icons-material/Save";
 
 import { Box, Button, ToggleButton, ToggleButtonGroup } from "@mui/material";
+import { Delete, Save } from "@mui/icons-material";
 import { useEffect, useState } from "react";
 
 function APIDialogAction({
@@ -72,7 +71,7 @@ function APIDialogAction({
               variant="contained"
               color="error"
               onClick={deleteMethod}
-              startIcon={<DeleteIcon />}
+              startIcon={<Delete />}
               data-cy="delete-api-button-yes"
             >
               Delete
@@ -85,7 +84,7 @@ function APIDialogAction({
             color="error"
             onClick={handleTooltipOpen}
             disabled={deleteDisable}
-            startIcon={<DeleteIcon />}
+            startIcon={<Delete />}
             data-cy="delete-api-button"
           >
             Delete
@@ -96,7 +95,7 @@ function APIDialogAction({
           color="primary"
           onClick={saveApiDialog}
           disabled={saveDisable}
-          startIcon={<SaveIcon />}
+          startIcon={<Save />}
           data-cy="save-api-button"
         >
           Save

package/src/lib/APIParams/APIParams.jsx

@@ -1,4 +1,4 @@
-import AddIcon from "@mui/icons-material/Add";
+import { Add } from "@mui/icons-material";
 import ParamTable from "../ParamTable";
 
 import { Box, Fab } from "@mui/material";
@@ -47,7 +47,7 @@ const APIParams = ({ types, paramsRef, addParams }) => {
           onClick={handleAddParams}
           data-cy="add-param-button"
         >
-          <AddIcon />
+          <Add />
         </Fab>
       </Box>
     </Box>

package/src/lib/APIPath/APIPath.jsx

@@ -1,4 +1,4 @@
-import LanguageIcon from "@mui/icons-material/Language";
+import { Language } from "@mui/icons-material";
 import styles from "./styles";
 
 import {
@@ -72,7 +72,7 @@ const APIPath = ({
         </Grid>
       </Grid>
       <Button onClick={onTypesButtonClick} data-cy="types-button">
-        <LanguageIcon sx={styles.icon} />
+        <Language sx={styles.icon} />
         Types
       </Button>
     </Grid>

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);

package/src/lib/ResourceMenu/DeleteResourceDialog.jsx

@@ -1,11 +1,14 @@
-import Button from "@mui/material/Button";
-import Dialog from "@mui/material/Dialog";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
-import { Typography } from "@mui/material";
 import { forwardRef } from "react";
 
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Typography,
+} from "@mui/material";
+
 const DeleteResourceDialog = forwardRef(({ setOpen, deleteResource }, ref) => {
   const resource = ref.current;
 

package/src/lib/ResourceMenu/ResourceMenu.jsx

@@ -1,14 +1,11 @@
 import AlertMassage from "./AlertMassage";
-import DeleteIcon from "@mui/icons-material/Delete";
 import DeleteResourceDialog from "./DeleteResourceDialog";
-import Fade from "@mui/material/Fade";
-import HttpIcon from "@mui/icons-material/Http";
 import React from "react";
-import SourceIcon from "@mui/icons-material/Source";
 import styles from "./styles";
 import { useRef } from "react";
 
-import { Divider, Menu, MenuItem, Typography } from "@mui/material";
+import { Delete, Http, Source } from "@mui/icons-material";
+import { Divider, Fade, Menu, MenuItem, Typography } from "@mui/material";
 import { publish, useEvent } from "@nucleoidai/react-event";
 
 const ResourceMenu = (props) => {
@@ -130,7 +127,7 @@ const ResourceMenu = (props) => {
         }}
       >
         <MenuItem onClick={addResource} data-cy="add-resource">
-          <SourceIcon />
+          <Source />
           <Typography sx={styles.menuItemText}>Resource</Typography>
         </MenuItem>
         <MenuItem
@@ -138,7 +135,7 @@ const ResourceMenu = (props) => {
           disabled={methodDisabled}
           data-cy="add-method"
         >
-          <HttpIcon />
+          <Http />
           <Typography sx={styles.menuItemText}>Method</Typography>
         </MenuItem>
         <Divider />
@@ -147,7 +144,7 @@ const ResourceMenu = (props) => {
           disabled={selectedAPI?.path === "/"}
           data-cy="delete-resource"
         >
-          <DeleteIcon />
+          <Delete />
           <Typography sx={styles.menuItemText}>Delete</Typography>
         </MenuItem>
       </Menu>

package/src/lib/Schema/Schema.jsx

@@ -1,11 +1,10 @@
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
+import { TreeItem } from "@mui/x-tree-view/TreeItem";
 import { v4 as uuidv4 } from "uuid";
 
 import { Box, Typography } from "@mui/material";
+import { ChevronRight, ExpandMore } from "@mui/icons-material";
 import React, { useEffect, useState } from "react";
-import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
-import { TreeItem } from "@mui/x-tree-view/TreeItem";
 
 const Schema = ({ initialData = {}, customTypes = [] }) => {
   const [schemaData, setSchemaData] = useState({});
@@ -159,8 +158,8 @@ const Schema = ({ initialData = {}, customTypes = [] }) => {
   return (
     <SimpleTreeView
       slots={{
-        collapseIcon: () => <ExpandMoreIcon />,
-        expandIcon: () => <ChevronRightIcon />,
+        collapseIcon: () => <ExpandMore />,
+        expandIcon: () => <ChevronRight />,
       }}
       defaultExpandedItems={["1"]}
       sx={{

package/src/lib/SchemaEditor/SchemaEditor.jsx

@@ -1,15 +1,17 @@
-import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import IconButton from "@mui/material/IconButton";
-import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
 import SchemaPropertyEditor from "./SchemaPropertyEditor";
+import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
+import { TreeItem } from "@mui/x-tree-view/TreeItem";
 import { v4 as uuidv4 } from "uuid";
 
+import {
+  AddCircleOutline,
+  ChevronRight,
+  ExpandMore,
+  RemoveCircleOutline,
+} from "@mui/icons-material";
 import { Box, Typography } from "@mui/material";
 import React, { forwardRef, useEffect, useState } from "react";
-import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
-import { TreeItem } from "@mui/x-tree-view/TreeItem";
 import { addProperty, changeProperty, removeProperty } from "./SchemaUtils";
 
 const SchemaEditor = forwardRef(
@@ -109,7 +111,7 @@ const SchemaEditor = forwardRef(
                   }}
                   data-cy={`add-property-button-${node.id}`}
                 >
-                  <AddCircleOutlineIcon fontSize="small" />
+                  <AddCircleOutline fontSize="small" />
                 </IconButton>
               )}
             </Box>
@@ -128,7 +130,7 @@ const SchemaEditor = forwardRef(
                   color: (theme) => theme.palette.grey[600],
                 }}
               >
-                <RemoveCircleOutlineIcon fontSize="small" />
+                <RemoveCircleOutline fontSize="small" />
               </IconButton>
             )}
           </Box>
@@ -212,8 +214,8 @@ const SchemaEditor = forwardRef(
     return (
       <SimpleTreeView
         slots={{
-          collapseIcon: () => <ExpandMoreIcon data-cy="collapse-icon" />,
-          expandIcon: () => <ChevronRightIcon data-cy="expand-icon" />,
+          collapseIcon: () => <ExpandMore data-cy="collapse-icon" />,
+          expandIcon: () => <ChevronRight data-cy="expand-icon" />,
         }}
         defaultExpandedItems={["1"]}
         sx={{

package/src/lib/index.js

@@ -48,3 +48,4 @@ export { default as ResourceMenu } from "./ResourceMenu";
 export { default as Schema } from "./Schema";
 export { default as SchemaEditor } from "./SchemaEditor";
 export { default as ToggleableMenu } from "./ToggleableMenu";
+export { default as APIBody } from "./NewApiBody/NewAPIBody";

package/vite/vite.js

@@ -36,7 +36,14 @@ async function vite() {
       esbuildOptions: {
         jsx: "automatic",
       },
-      include: ["@mui/material", "@nucleoidai/platform", "axios-auth-refresh"],
+      include: [
+        "@mui/material",
+        "@nucleoidai/platform",
+        "axios-auth-refresh",
+        "@emotion/react",
+        "@emotion/styled",
+        "@emotion/css",
+      ],
     },
     resolve: {
       alias: [
@@ -70,11 +77,15 @@ async function vite() {
             }
 
             if (id.includes("node_modules")) {
-              return id
+              const packageName = id
                 .toString()
                 .split("node_modules/")[1]
                 .split("/")[0]
                 .toString();
+
+              if (packageName === "@emotion") return undefined;
+
+              return packageName;
             }
           },
         },