@canmingir/link 1.2.22 → 1.2.24

package/src/lib/APITree/Arrow.jsx

@@ -0,0 +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
+
+function Arrow({ up, down, right, left }) {
+  return up ? (
+    <KeyboardArrowUpIcon />
+  ) : down ? (
+    <KeyboardArrowDownIcon />
+  ) : right ? (
+    <KeyboardArrowRightIcon />
+  ) : left ? (
+    <KeyboardArrowLeftIcon />
+  ) : null;
+}
+
+export default Arrow;

package/src/lib/APITree/DeleteMethodDialog.jsx

@@ -0,0 +1,41 @@
+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 DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+
+const DeleteMethodDialog = ({ setOpen, deleteMethod }) => {
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <Dialog
+      open={true}
+      onClose={handleClose}
+      aria-labelledby="responsive-dialog-title"
+    >
+      <DialogTitle id="responsive-dialog-title">{"Delete method"}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          The selected method will be deleted.
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button autoFocus onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button
+          onClick={deleteMethod}
+          autoFocus
+          data-cy="delete-method-confirm-button"
+        >
+          Delete
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default DeleteMethodDialog;

package/src/lib/APITree/index.js

@@ -0,0 +1 @@
+export { default, compile } from "./APITree";

package/src/lib/APITree/styles.js

@@ -0,0 +1,19 @@
+const styles = {
+  apiTree: { height: "100%" },
+  apiTreeGrid: { maxHeight: "85vh", overflow: "auto" },
+  apiTreeItem: {
+    fontSize: 12,
+    color: "#666",
+    fontWeight: "bold",
+    backgroundColor: "#fdfdfd",
+    border: `1px solid #c3c5c8`,
+    width: 44,
+    borderRadius: 8,
+    mt: 1 / 4,
+    mb: 1 / 4,
+    boxShadow: "1px 1px #b8b8b8",
+  },
+  menuItemText: { pl: 3 / 2 },
+};
+
+export default styles;

package/src/lib/APITypes/APITypes.jsx

@@ -0,0 +1,141 @@
+import Schema from "../Schema/Schema";
+import SchemaEditor from "../SchemaEditor";
+import TypeList from "./TypeList";
+import { publish } from "@nucleoidai/react-event";
+
+import { Box, Divider, Paper } from "@mui/material";
+import React, { useState } from "react";
+
+const APITypes = ({ tstypes, nuctypes, typesRef }) => {
+  const combinedData = [
+    ...tstypes.map((item) => ({ ...item, isTypeScript: true })),
+    ...nuctypes.map((item) => ({ ...item, isTypeScript: false })),
+  ];
+  const [selectedType, setSelectedType] = useState(
+    combinedData.length > 0 ? combinedData[0].name : null
+  );
+  const preloaded = {};
+  combinedData.forEach((item) => {
+    preloaded[item.name] = true;
+  });
+
+  const isTypeScriptType = (typeName) => {
+    return tstypes.some((type) => type.name === typeName);
+  };
+
+  const handleAddType = (typeName) => {
+    publish("API_TYPE_ADD", { typeName });
+  };
+
+  const handleDeleteType = (typeName) => {
+    publish("API_TYPE_DELETE", { typeName });
+  };
+
+  const handleUpdateType = (oldTypeName, newTypeName) => {
+    publish("API_TYPE_RENAME", { oldTypeName, newTypeName });
+  };
+
+  const renderRightPanel = () => {
+    if (!selectedType) return null;
+
+    const useSchemaEditor = !isTypeScriptType(selectedType);
+    const initialData = findSchemaByName(selectedType);
+
+    return (
+      <Box sx={{ width: "100%", height: "100%" }} data-cy="type-schema-editor">
+        {useSchemaEditor ? (
+          <SchemaEditor
+            key={selectedType}
+            ref={typesRef}
+            initialData={initialData}
+          />
+        ) : (
+          <Schema initialData={initialData} />
+        )}
+      </Box>
+    );
+  };
+
+  const handleTypeSelect = (name) => {
+    setSelectedType(name);
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        height: "85%",
+        p: 2,
+      }}
+      data-cy="api-types"
+    >
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <Paper
+          elevation={3}
+          sx={{
+            width: "100%",
+            p: 2,
+            bgcolor: "background.paper",
+            borderRadius: 2,
+            height: "100%",
+            boxSizing: "border-box",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <TypeList
+            combinedData={combinedData}
+            selectedType={selectedType}
+            onTypeSelect={handleTypeSelect}
+            onAddType={handleAddType}
+            onUpdateType={handleUpdateType}
+            onDeleteType={handleDeleteType}
+          />
+        </Paper>
+      </Box>
+      <Divider orientation="vertical" flexItem sx={{ width: "1rem" }} />
+
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <Paper
+          elevation={3}
+          sx={{
+            width: "100%",
+            p: 2,
+            bgcolor: "background.paper",
+            borderRadius: 2,
+            height: "100%",
+            boxSizing: "border-box",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          {renderRightPanel()}
+        </Paper>
+      </Box>
+    </Box>
+  );
+
+  function findSchemaByName(name) {
+    const schema = combinedData.find((schema) => schema.name === name);
+    return schema ? schema.schema : null;
+  }
+};
+
+export default APITypes;

package/src/lib/APITypes/TypeEditor.jsx

@@ -0,0 +1,46 @@
+import { Box, IconButton, TextField } from "@mui/material";
+import { Check, Close } from "@mui/icons-material";
+import React, { useState } from "react";
+
+const TypeEditor = ({ initialValue = "", onConfirm, onCancel }) => {
+  const [typeName, setTypeName] = useState(initialValue);
+
+  const handleConfirm = () => {
+    onConfirm(typeName);
+    setTypeName("");
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "100%",
+      }}
+    >
+      <TextField
+        value={typeName}
+        onChange={(e) => setTypeName(e.target.value)}
+        variant="outlined"
+        size="small"
+        sx={{ width: "60%", marginRight: 1 }}
+        data-cy="type-name-input"
+      />
+      <Box>
+        <IconButton
+          onClick={handleConfirm}
+          size="small"
+          data-cy="confirm-type-button"
+        >
+          <Check />
+        </IconButton>
+        <IconButton onClick={onCancel} size="small">
+          <Close />
+        </IconButton>
+      </Box>
+    </Box>
+  );
+};
+
+export default TypeEditor;

package/src/lib/APITypes/TypeList.jsx

@@ -0,0 +1,180 @@
+import ToggleableMenu from "../ToggleableMenu";
+import TypeEditor from "./TypeEditor";
+
+import { Add, Delete, Edit, MoreVert } from "@mui/icons-material";
+import { Box, Fab, IconButton, Typography } from "@mui/material";
+import React, { useState } from "react";
+
+const TypeList = ({
+  combinedData,
+  selectedType,
+  onTypeSelect,
+  onAddType,
+  onUpdateType,
+  onDeleteType,
+}) => {
+  const [isAddingType, setIsAddingType] = useState(false);
+  const [editingType, setEditingType] = useState(null);
+
+  const handleAddTypeClick = () => {
+    setIsAddingType(true);
+  };
+
+  const handleAddTypeConfirm = (typeName) => {
+    onAddType(typeName);
+    setIsAddingType(false);
+    onTypeSelect(typeName);
+  };
+
+  const handleEditType = (item) => {
+    setEditingType(item);
+  };
+
+  const handleDeleteType = (typeName) => {
+    const deletedIndex = combinedData.findIndex(
+      (type) => type.name === typeName
+    );
+
+    onDeleteType(typeName);
+
+    if (deletedIndex === -1) {
+      onTypeSelect(null);
+    } else if (deletedIndex > 0) {
+      setTimeout(() => {
+        onTypeSelect(combinedData[deletedIndex - 1].name);
+      }, 0);
+    } else if (deletedIndex < combinedData.length - 1) {
+      setTimeout(() => {
+        onTypeSelect(combinedData[deletedIndex + 1].name);
+      }, 0);
+    } else {
+      onTypeSelect(null);
+    }
+
+    setEditingType(null);
+  };
+
+  const handleUpdateType = (updatedTypeName) => {
+    onTypeSelect(null);
+    onUpdateType(editingType, updatedTypeName);
+    setEditingType(null);
+    setTimeout(() => {
+      onTypeSelect(updatedTypeName);
+    }, 0);
+  };
+
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        overflowY: "auto",
+        position: "relative",
+        height: "100%",
+      }}
+      data-cy="type-list"
+    >
+      {combinedData.map((item) => (
+        <Box
+          key={item.name}
+          onClick={() => {
+            onTypeSelect(item.name);
+          }}
+          sx={{
+            padding: "6px 16px",
+            height: "40px",
+            width: "100%",
+            borderRadius: 2,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            cursor: "pointer",
+            bgcolor: (theme) =>
+              selectedType === item.name
+                ? theme.palette.action.selected
+                : theme.palette.background.paper,
+            "&:hover": {
+              bgcolor: (theme) => theme.palette.action.hover,
+            },
+          }}
+          data-cy={`type-list-item-${item.name}`}
+        >
+          {editingType === item.name ? (
+            <TypeEditor
+              initialValue={item.name}
+              onConfirm={handleUpdateType}
+              onCancel={() => setEditingType(null)}
+              data-cy="type-editor"
+            />
+          ) : (
+            <>
+              <Typography variant="body1" style={{ textAlign: "left" }}>
+                {item.name}
+              </Typography>
+              <Box
+                sx={{ display: "flex", alignItems: "center" }}
+                data-cy={`type-item-actions-${item.name}`}
+              >
+                {item.isTypeScript && (
+                  <span
+                    style={{
+                      marginRight: "4px",
+                      color: "#808080",
+                      fontWeight: "bold",
+                    }}
+                    data-cy={`typescript-item-${item.name}`}
+                  >
+                    TS
+                  </span>
+                )}
+                {!item.isTypeScript && (
+                  <ToggleableMenu defaultIcon={<MoreVert />}>
+                    <IconButton
+                      size="small"
+                      onClick={() => handleEditType(item.name)}
+                      data-cy={`edit-type-button-${item.name}`}
+                    >
+                      <Edit />
+                    </IconButton>
+                    <IconButton
+                      size="small"
+                      onClick={() => handleDeleteType(item.name)}
+                      data-cy={`delete-type-button-${item.name}`}
+                    >
+                      <Delete />
+                    </IconButton>
+                  </ToggleableMenu>
+                )}
+              </Box>
+            </>
+          )}
+        </Box>
+      ))}
+      {isAddingType && (
+        <TypeEditor
+          onConfirm={handleAddTypeConfirm}
+          onCancel={() => setIsAddingType(false)}
+          data-cy="add-type-editor"
+        />
+      )}
+      <Box
+        sx={{
+          position: "absolute",
+          bottom: 16,
+          left: "50%",
+          transform: "translateX(-50%)",
+        }}
+      >
+        <Fab
+          color="primary"
+          onClick={handleAddTypeClick}
+          size="small"
+          data-cy="add-type-button"
+        >
+          <Add />
+        </Fab>
+      </Box>
+    </Box>
+  );
+};
+
+export default TypeList;

package/src/lib/APITypes/index.js

@@ -0,0 +1 @@
+export { default } from "./APITypes";

package/src/lib/BlankTreeMessage/BlankTreeMessage.jsx

@@ -0,0 +1,39 @@
+import { AutoAwesome } from "@mui/icons-material";
+import { Box, CardActions, Fab, Typography } from "@mui/material";
+
+function BlankTreeMessage({ item, openLogicDialog, functionsExist }) {
+  return (
+    <Box sx={{ height: "100%", display: "flex", flexDirection: "column" }}>
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Typography
+          sx={{
+            color: "text.secondary",
+            textAlign: "center",
+          }}
+        >
+          No {item} defined yet
+        </Typography>
+      </Box>
+      {functionsExist && (
+        <Box
+          sx={{ display: "flex", justifyContent: "center", marginBottom: 1 }}
+        >
+          <CardActions>
+            <Fab size="medium" onClick={openLogicDialog}>
+              <AutoAwesome />
+            </Fab>
+          </CardActions>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default BlankTreeMessage;

package/src/lib/BlankTreeMessage/index.js

@@ -0,0 +1 @@
+export { default } from "./BlankTreeMessage";

package/src/lib/DialogTootip/DialogTooltip.jsx

@@ -0,0 +1,67 @@
+import CloseIcon from "@mui/icons-material/Close";
+import IconButton from "@mui/material/IconButton";
+import { styled } from "@mui/material/styles";
+
+import { Grid, Tooltip, Typography, tooltipClasses } from "@mui/material";
+
+const DialogTooltip = styled(
+  ({
+    className,
+    open,
+    handleTooltipClose,
+    title,
+    message,
+    footer,
+    ...props
+  }) => (
+    <Tooltip
+      open={open}
+      onClose={handleTooltipClose}
+      disableFocusListener
+      disableHoverListener
+      disableTouchListener
+      title={
+        <>
+          <Grid
+            container
+            sx={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              backgroundColor: (theme) => theme.palette.background.paper,
+            }}
+          >
+            <Typography variant="subtitle1" sx={{ flexGrow: 1, marginLeft: 2 }}>
+              {title}
+            </Typography>
+            <IconButton onClick={handleTooltipClose} size="small">
+              <CloseIcon />
+            </IconButton>
+          </Grid>
+          <Grid sx={{ padding: 2 }}>
+            <Typography
+              variant="body2"
+              sx={{ color: (theme) => theme.palette.text.primary }}
+            >
+              {message}
+            </Typography>
+            {footer}
+          </Grid>
+        </>
+      }
+      {...props}
+      classes={{ popper: className }}
+    />
+  )
+)(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    width: 600,
+    fontSize: theme.typography.pxToRem(12),
+    border: `1px solid ${theme.palette.divider}`,
+    boxShadow: theme.shadows[1],
+  },
+}));
+
+export default DialogTooltip;

package/src/lib/DialogTootip/index.js

@@ -0,0 +1 @@
+export { default } from "./DialogTooltip";

package/src/lib/DialogTootip/styles.js

@@ -0,0 +1,9 @@
+const styles = {
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+};
+
+export default styles;

package/src/lib/NewApiBody/NewAPIBody.jsx

@@ -0,0 +1,97 @@
+import ParamView from "./ParamView";
+import React from "react";
+import SchemaEditor from "../SchemaEditor";
+
+import { Box, Divider, Paper, Typography } from "@mui/material";
+
+const NewAPIBody = ({ types, api, requestSchemaRef, responseSchemaRef }) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        height: "85%",
+        p: 2,
+      }}
+      data-cy="api-body"
+    >
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <Paper
+          elevation={3}
+          sx={{
+            width: "100%",
+            p: 2,
+            bgcolor: "background.paper",
+            borderRadius: 2,
+            height: "100%",
+            boxSizing: "border-box",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+          data-cy="request-schema-editor"
+        >
+          {api.method === "GET" ? (
+            <Box sx={{ width: "100%", height: "100%" }}>
+              <ParamView params={api.params} />
+            </Box>
+          ) : (
+            <SchemaEditor
+              ref={requestSchemaRef}
+              initialData={api.request ? api.request.schema : ""}
+              customTypes={types}
+            />
+          )}
+          <Typography variant="h6" gutterBottom>
+            Request
+          </Typography>
+        </Paper>
+      </Box>
+
+      <Divider orientation="vertical" flexItem sx={{ width: "1rem" }} />
+
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <Paper
+          elevation={3}
+          sx={{
+            width: "100%",
+            p: 2,
+            bgcolor: "background.paper",
+            borderRadius: 2,
+            height: "100%",
+            boxSizing: "border-box",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+          data-cy="response-schema-editor"
+        >
+          <SchemaEditor
+            ref={responseSchemaRef}
+            customTypes={types}
+            initialData={api.response ? api.response.schema : ""}
+          />
+          <Typography variant="h6" gutterBottom>
+            Response
+          </Typography>
+        </Paper>
+      </Box>
+    </Box>
+  );
+};
+
+export default NewAPIBody;