@ebubekirylmaz/link-test 1.2.44 → 1.2.46

package/src/lib/Flow/styles.js

@@ -25,6 +25,7 @@ export const getBaseStyleForVariant = (v) => {
         animationSpeed: 1,
         gradient: null,
         curvature: 0.5,
+        connectorType: "curved",
       };
     case "pill":
       return {
@@ -44,6 +45,7 @@ export const getBaseStyleForVariant = (v) => {
         animationSpeed: 1,
         gradient: null,
         curvature: 0.4,
+        connectorType: "curved",
       };
     case "n8n":
       return {
@@ -63,6 +65,7 @@ export const getBaseStyleForVariant = (v) => {
         animationSpeed: 1,
         gradient: null,
         curvature: 0.5,
+        connectorType: "curved",
       };
     case "simple":
     default:
@@ -83,6 +86,7 @@ export const getBaseStyleForVariant = (v) => {
         animationSpeed: 1,
         gradient: null,
         curvature: 0.5,
+        connectorType: "curved",
       };
   }
 };

package/src/lib/IconSelector/IconSelector.jsx

@@ -18,7 +18,11 @@ export default function IconSelector({
     setEmojiDialogOpen(true);
   };
   return (
-    <Stack alignContent={"center"} justifyContent={"center"}>
+    <Stack
+      sx={{
+        alignContent: "center",
+        justifyContent: "center"
+      }}>
       <Stack>
         <IconButton
           data-cy="avatar-select-button"

package/src/lib/ItemSummary/ItemSummary.jsx

@@ -17,15 +17,15 @@ export default function ItemSummary({ newItem }) {
       <DialogContentText sx={{ textAlign: "center", mb: 2 }}>
         Summary
       </DialogContentText>
-      <Grid container spacing={1} mb={4}>
+      <Grid container spacing={1} sx={{
+        mb: 4
+      }}>
         <Grid
-          item
-          xs={newItem.description ? 4 : 12}
           sx={{
             justifyContent: "center",
             display: "flex",
           }}
-        >
+          size={newItem.description ? 4 : 12}>
           <Card
             sx={{
               bgcolor: (theme) => theme.palette.background.paper,
@@ -37,7 +37,12 @@ export default function ItemSummary({ newItem }) {
             <CardContent
               children={
                 <>
-                  <Typography variant="h6" textAlign={"center"} mb={2}>
+                  <Typography
+                    variant="h6"
+                    sx={{
+                      textAlign: "center",
+                      mb: 2
+                    }}>
                     {newItem.name}
                   </Typography>
                   <Stack
@@ -63,7 +68,7 @@ export default function ItemSummary({ newItem }) {
           </Card>
         </Grid>
         {newItem.description && (
-          <Grid item xs={8}>
+          <Grid size={8}>
             <Card sx={{ minHeight: "100%" }}>
               <CardHeader title="Description" />
               <CardContent>

package/src/lib/ItemSummary/ItemsSummary.jsx

@@ -19,15 +19,15 @@ export default function ItemsSummary({ newItems }) {
       <DialogContentText sx={{ textAlign: "center", mb: 2 }}>
         Summary
       </DialogContentText>
-      <Grid container mb={4}>
+      <Grid container sx={{
+        mb: 4
+      }}>
         <Grid
-          item
-          xs={5}
           sx={{
             justifyContent: "center",
             display: "flex",
           }}
-        >
+          size={5}>
           <Stack
             sx={{
               height: "100%",
@@ -45,27 +45,34 @@ export default function ItemsSummary({ newItems }) {
             >
               <CardHeader
                 title={"Project Summary"}
-                titleTypographyProps={{
-                  variant: "subtitle1",
-                  textAlign: "center",
-                  color: "text.secondary",
+                slotProps={{
+                  title: {
+                    variant: "subtitle1",
+                    textAlign: "center",
+                    color: "text.secondary",
+                  }
                 }}
               />
               <CardContent
                 children={
                   <>
-                    <Typography variant="h6" textAlign={"center"} mb={2}>
+                    <Typography
+                      variant="h6"
+                      sx={{
+                        textAlign: "center",
+                        mb: 2
+                      }}>
                       {newItems[0].details.name}
                     </Typography>
                     <Stack
-                      padding={1}
                       sx={{
+                        padding: 1,
+
                         "& .svg-color": {
                           background: (theme) =>
                             `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,
-                        },
-                      }}
-                    >
+                        }
+                      }}>
                       <SvgColor
                         src={`https://api.iconify.design/${newItems[0].details.icon?.slice(
                           1,
@@ -87,17 +94,15 @@ export default function ItemsSummary({ newItems }) {
           </Stack>
         </Grid>
         <Grid
-          item
-          xs={2}
           sx={{
             display: "flex",
             alignContent: "center",
             justifyContent: "center",
           }}
-        >
+          size={2}>
           <Divider orientation="vertical" sx={{ borderStyle: "dashed" }} />
         </Grid>
-        <Grid item xs={5}>
+        <Grid size={5}>
           <Stack
             sx={{
               height: "100%",
@@ -108,27 +113,34 @@ export default function ItemsSummary({ newItems }) {
             <Card>
               <CardHeader
                 title={"Service Summary"}
-                titleTypographyProps={{
-                  variant: "subtitle1",
-                  textAlign: "center",
-                  color: "text.secondary",
+                slotProps={{
+                  title: {
+                    variant: "subtitle1",
+                    textAlign: "center",
+                    color: "text.secondary",
+                  }
                 }}
               />
               <CardContent
                 children={
                   <>
-                    <Typography variant="h6" textAlign={"center"} mb={2}>
+                    <Typography
+                      variant="h6"
+                      sx={{
+                        textAlign: "center",
+                        mb: 2
+                      }}>
                       {newItems[1].details.name}
                     </Typography>
                     <Stack
-                      padding={1}
                       sx={{
+                        padding: 1,
+
                         "& .svg-color": {
                           background: (theme) =>
                             `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,
-                        },
-                      }}
-                    >
+                        }
+                      }}>
                       <SvgColor
                         src={`https://api.iconify.design/${newItems[1].details.icon?.slice(
                           1,

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;

package/src/lib/NewApiBody/ParamView.jsx

@@ -0,0 +1,38 @@
+import { v4 as uuid } from "uuid";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+
+function ParamView({ params }) {
+  params = params || [];
+
+  return (
+    <Table size={"small"} data-cy="param-view">
+      <colgroup>
+        <col style={{ width: "50%" }} />
+        <col style={{ width: "50%" }} />
+      </colgroup>
+      <TableHead>
+        <TableRow>
+          <TableCell>Parameter</TableCell>
+          <TableCell>Data Type</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {params.map((param) => (
+          <TableRow key={uuid()}>
+            <TableCell>{param.name}</TableCell>
+            <TableCell>{param.type}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+export default ParamView;

package/src/lib/NucDialog/NucDialog.jsx

@@ -0,0 +1,108 @@
+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 {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+} from "@mui/material";
+import { storage, useStorage } from "@nucleoidjs/webstorage";
+
+export default function NucDialog({
+  title,
+  minWidth = 600,
+  children,
+  action,
+  open,
+  handleClose,
+  maximizedDimensions = { width: "65rem", height: "50rem" },
+  minimizedDimensions = { width: "55rem", height: "40rem" },
+}) {
+  const [maximized] = useStorage("platform", title, "maximized", false);
+  const currentDimensions = maximized
+    ? maximizedDimensions
+    : minimizedDimensions;
+
+  return (
+    <Dialog
+      open={open}
+      maxWidth={false}
+      onClose={handleClose}
+      sx={{
+        "& .MuiDialog-paper": {
+          width: currentDimensions.width,
+          height: currentDimensions.height,
+          transition: "width 0.3s ease-in-out, height 0.3s ease-in-out",
+        },
+      }}
+    >
+      <DialogTitle
+        sx={{
+          m: 0,
+          p: 2,
+          backgroundColor: (theme) => theme.palette.background.default,
+        }}
+      >
+        {title}
+      </DialogTitle>
+      <IconButton
+        aria-label="close"
+        onClick={handleClose}
+        sx={{
+          position: "absolute",
+          right: 8,
+          top: 8,
+          color: (theme) => theme.palette.grey[500],
+        }}
+        data-cy="close-dialog-button"
+      >
+        <Close />
+      </IconButton>
+      {maximized ? (
+        <IconButton
+          aria-label="collapse"
+          onClick={() => storage.set("platform", title, "maximized", false)}
+          sx={{
+            position: "absolute",
+            right: 48,
+            top: 8,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <FullscreenExit />
+        </IconButton>
+      ) : (
+        <IconButton
+          aria-label="expand"
+          onClick={() => storage.set("platform", title, "maximized", true)}
+          sx={{
+            position: "absolute",
+            right: 48,
+            top: 8,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <Fullscreen />
+        </IconButton>
+      )}
+
+      <DialogContent
+        sx={{
+          minWidth,
+          backgroundColor: (theme) => theme.palette.background.default,
+        }}
+      >
+        {children}
+      </DialogContent>
+      <DialogActions
+        sx={{ backgroundColor: (theme) => theme.palette.background.default }}
+      >
+        {action}
+      </DialogActions>
+    </Dialog>
+  );
+}

package/src/lib/NucDialog/index.js

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

package/src/lib/ParamTable/ParamTable.jsx

@@ -0,0 +1,133 @@
+import { DataGrid } from "@mui/x-data-grid";
+import HighlightOffIcon from "@mui/icons-material/HighlightOff";
+import React from "react";
+import TypeMenu from "./TypeMenu";
+import styles from "./styles";
+
+import { Checkbox, IconButton, InputBase } from "@mui/material";
+
+const ParamTable = ({ types, params, setParams }) => {
+  const columns = [
+    {
+      field: "name",
+      headerName: "Name",
+      renderCell: (param) => {
+        const { id } = param.row;
+        return (
+          <InputBase
+            disabled={param.row.in === "path"}
+            value={param.value || ""}
+            onChange={(event) => updateParam(id, "name", event.target.value)}
+            fullWidth
+            placeholder="Enter name"
+            data-cy={`param-name-field-${id}`}
+          />
+        );
+      },
+      flex: 1,
+    },
+    {
+      field: "type",
+      headerName: "Type",
+      renderCell: (param) => {
+        const { id } = param.row;
+        return (
+          <TypeMenu
+            disabled={param.row.in === "path"}
+            primitive
+            types={types}
+            id={id}
+            type={param.value}
+            onChange={(type) => updateParam(id, "type", type)}
+          />
+        );
+      },
+      flex: 1,
+    },
+    {
+      field: "in",
+      headerName: "Param",
+      flex: 1,
+      valueGetter: (param) => param.value || "query",
+    },
+    {
+      field: "required",
+      headerName: "Required",
+      renderCell: (param) => {
+        const { id } = param.row;
+        return (
+          <Checkbox
+            disabled={param.row.in === "path"}
+            checked={param.value}
+            onChange={(event) =>
+              updateParam(id, "required", event.target.checked)
+            }
+            data-cy={`param-required-checkbox-${id}`}
+          />
+        );
+      },
+      flex: 1,
+    },
+    {
+      field: "description",
+      headerName: "Description",
+      renderCell: (param) => {
+        const { id } = param.row;
+        return (
+          <InputBase
+            disabled={param.row.in === "path"}
+            value={param.value || ""}
+            onChange={(event) =>
+              updateParam(id, "description", event.target.value)
+            }
+            fullWidth
+            placeholder="Enter description"
+            data-cy={`param-description-field-${id}`}
+          />
+        );
+      },
+      flex: 2,
+    },
+    {
+      field: "action",
+      headerName: " ",
+      sortable: false,
+      renderCell: (param) => {
+        const { id } = param.row;
+        return (
+          <IconButton
+            disabled={param.row.in === "path"}
+            onClick={() => removeParam(id)}
+            size="large"
+          >
+            <HighlightOffIcon />
+          </IconButton>
+        );
+      },
+    },
+  ];
+
+  const removeParam = (id) => {
+    setParams((prevParams) => prevParams.filter((param) => param.id !== id));
+  };
+
+  const updateParam = (id, field, value) => {
+    setParams((prevParams) =>
+      prevParams.map((param) =>
+        param.id === id ? { ...param, [field]: value } : param
+      )
+    );
+  };
+
+  return (
+    <DataGrid
+      sx={styles.dataGrid}
+      columns={columns}
+      rows={params}
+      hideFooter
+      disableSelectionOnClick
+    />
+  );
+};
+
+export default ParamTable;

package/src/lib/ParamTable/TypeMenu.jsx

@@ -0,0 +1,102 @@
+import Defaults from "./defaults";
+import { v4 as uuid } from "uuid";
+
+import { Divider, MenuItem, Select } from "@mui/material";
+import { forwardRef, useState } from "react";
+
+const TypeMenu = forwardRef(
+  (
+    {
+      id,
+      type,
+      types,
+      map,
+      edit,
+      setKey,
+      primitive,
+      objAndArr,
+      globalTypes,
+      disabled,
+    },
+    ref
+  ) => {
+    const [selectedType, setSelectedType] = useState(type);
+
+    function updateType(id, value) {
+      if (ref) {
+        ref[id].type = value;
+      } else {
+        switch (value) {
+          case "array":
+            if (map.type === "object") delete map["properties"];
+            map.type = "array";
+            map["items"] = Defaults.compiledObject(uuid(), uuid());
+
+            break;
+          case "object":
+            if (map.type === "array") delete map["items"];
+            map.type = "object";
+            map["properties"] = Defaults.compiledProperty(uuid());
+
+            break;
+          default:
+            if (map["properties"]) delete map["properties"];
+            if (map["items"]) delete map["items"];
+            map.type = value;
+
+            break;
+        }
+      }
+      setKey && setKey(uuid());
+      setSelectedType(value);
+    }
+
+    return (
+      <>
+        {edit && (
+          <Select
+            disabled={disabled}
+            value={selectedType}
+            onChange={(event) => {
+              updateType(id, event.target.value);
+            }}
+          >
+            {primitive && [
+              <MenuItem key={uuid()} value={"integer"}>
+                integer
+              </MenuItem>,
+              <MenuItem key={uuid()} value={"string"}>
+                string
+              </MenuItem>,
+              <MenuItem key={uuid()} value={"boolean"}>
+                boolean
+              </MenuItem>,
+              <Divider key={uuid()} id={uuid()} />,
+            ]}
+
+            {objAndArr && [
+              <MenuItem key={uuid()} id={uuid()} value={"object"}>
+                object
+              </MenuItem>,
+              <MenuItem key={uuid()} id={uuid()} value={"array"}>
+                array
+              </MenuItem>,
+            ]}
+            {globalTypes && <Divider />}
+            {globalTypes &&
+              types.map((item) => {
+                return (
+                  <MenuItem key={uuid()} id={uuid()} value={item.name}>
+                    {item.name}
+                  </MenuItem>
+                );
+              })}
+          </Select>
+        )}
+        {!edit && <>{type}</>}
+      </>
+    );
+  }
+);
+
+export default TypeMenu;