test-nucleoid 1.0.0

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;

package/src/lib/ParamTable/defaults.js

@@ -0,0 +1,47 @@
+const Defaults = {
+  compiledObject: (objID, objPropID) => {
+    return {
+      [objID]: {
+        type: "object",
+        id: objID,
+        properties: {
+          [objPropID]: {
+            id: objPropID,
+            name: "id",
+            type: "string",
+          },
+        },
+      },
+    };
+  },
+  compiledProperty: (id) => {
+    return {
+      [id]: {
+        id: id,
+        name: "id",
+        type: "string",
+      },
+    };
+  },
+  object: {
+    type: "object",
+    properties: {
+      id: {
+        type: "string",
+      },
+    },
+  },
+  array: {
+    type: "array",
+    items: {
+      id: {
+        type: "string",
+      },
+    },
+  },
+  action: `function action(req) {\n\treturn req.body.name;\n}\n`,
+  summary: "Summary",
+  description: "Description",
+};
+
+export default Defaults;

package/src/lib/ParamTable/index.js

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

package/src/lib/ParamTable/styles.js

@@ -0,0 +1,12 @@
+const styles = {
+  dataGrid: {
+    border: "none",
+    width: "100%",
+    "& .MuiDataGrid-cell": {
+      cursor: "pointer",
+      borderBottom: "none",
+    },
+  },
+};
+
+export default styles;

package/src/lib/ProjectWizard.jsx

@@ -0,0 +1,137 @@
+import { useEffect, useState } from "react";
+
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import ItemSummary from "./ItemSummary/ItemSummary";
+import React from "react";
+import SelectAvatar from "./IconSelector/IconSelector";
+import SparkleInput from "./SparkleInput/SparkleInput";
+import StepComponent from "./StepComponent/StepComponent";
+
+function ProjectWizard({
+  itemProperties,
+  onSubmit,
+  open,
+  onClose,
+  itemToEdit,
+  steps,
+  stepExp,
+}) {
+  const [activeStep, setActiveStep] = React.useState(0);
+
+  const handleNext = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  const [newItem, setNewItem] = useState(
+    itemProperties.reduce((obj, property) => ({ ...obj, [property]: "" }), {})
+  );
+
+  useEffect(() => {
+    if (itemToEdit) {
+      setNewItem(itemToEdit);
+    } else if (!open) {
+      setNewItem(
+        itemProperties.reduce(
+          (obj, property) => ({ ...obj, [property]: "" }),
+          {}
+        )
+      );
+    }
+  }, [open, itemProperties, itemToEdit]);
+
+  const handleSave = () => {
+    if (newItem.id) {
+      const { id, ...rest } = newItem;
+      onSubmit(id, rest);
+    } else {
+      onSubmit(newItem);
+    }
+    onClose();
+    setActiveStep(0);
+  };
+
+  const handleEmojiSelect = (emoji) => {
+    setNewItem((prevItem) => {
+      return {
+        ...prevItem,
+        icon: emoji.shortcodes,
+      };
+    });
+  };
+  const handleInputChange = (property) => (event) => {
+    setNewItem({ ...newItem, [property]: event.target.value });
+  };
+
+  const Name = () => {
+    return (
+      <SparkleInput
+        prop="name"
+        value={newItem["name"]}
+        onChange={handleInputChange("name")}
+      />
+    );
+  };
+
+  const StepPages = () => {
+    switch (activeStep) {
+      case 0:
+        return Name();
+      case 1:
+        return (
+          <SelectAvatar
+            handleEmojiSelect={handleEmojiSelect}
+            iconCategories={"project_icons"}
+            avatar={newItem?.icon?.replace(/:/g, "").replace("/", ":")}
+          />
+        );
+      case 2:
+        return <ItemSummary newItem={newItem} />;
+    }
+  };
+  return (
+    <Dialog
+      fullWidth={true}
+      maxWidth="sm"
+      open={open}
+      onClose={() => {
+        onClose();
+        setActiveStep(0);
+      }}
+    >
+      <>
+        <DialogTitle
+          sx={{
+            backgroundColor: (theme) => theme.palette.background.default,
+          }}
+        ></DialogTitle>
+        <StepComponent
+          activeStep={activeStep}
+          steps={steps}
+          stepExp={stepExp}
+          handleNext={handleNext}
+          handleBack={handleBack}
+          handleSave={handleSave}
+        >
+          <DialogContent
+            sx={{
+              height: "100%",
+              alignContent: "center",
+              justifyContent: "center",
+              backgroundColor: (theme) => theme.palette.background.default,
+            }}
+          >
+            {StepPages()}
+          </DialogContent>
+        </StepComponent>
+      </>
+    </Dialog>
+  );
+}
+
+export default ProjectWizard;