test-nucleoid 1.0.0

package/src/lib/SchemaEditor/SchemaUtils.js

@@ -0,0 +1,152 @@
+import { v4 as uuidv4 } from "uuid";
+
+export const getTypeStyle = (type) => {
+  return {
+    fontWeight: "normal",
+    color: getTypeColor(type),
+    marginLeft: "auto",
+  };
+};
+
+const getTypeColor = (type) => {
+  switch (type) {
+    case "object":
+      return "red";
+    case "string":
+      return "green";
+    case "integer":
+      return "blue";
+
+    default:
+      return "black";
+  }
+};
+
+export const addProperty = (parentId = null, setSchemaData) => {
+  const addPropertyToNode = (node, parentId) => {
+    if (node.id === parentId) {
+      const propertyCount = node.properties ? node.properties.length : 0;
+      const newName = propertyCount === 0 ? "id" : `prop${propertyCount + 1}`;
+      const newType = "string";
+
+      const newProperty = {
+        name: newName,
+        type: newType,
+        id: uuidv4(),
+      };
+
+      const updatedProperties = node.properties
+        ? [...node.properties, newProperty]
+        : [newProperty];
+
+      return { ...node, properties: updatedProperties };
+    } else if (node.properties) {
+      const updatedProperties = node.properties.map((childNode) =>
+        addPropertyToNode(childNode, parentId)
+      );
+      return { ...node, properties: updatedProperties };
+    }
+    return node;
+  };
+
+  setSchemaData((currentData) => {
+    if (!parentId) {
+      const propertyCount = currentData.properties
+        ? currentData.properties.length
+        : 0;
+      const newName = propertyCount === 0 ? "id" : `prop${propertyCount + 1}`;
+      const newType = "string";
+
+      const newProperty = {
+        name: newName,
+        type: newType,
+        id: uuidv4(),
+      };
+
+      const updatedProperties = currentData.properties
+        ? [...currentData.properties, newProperty]
+        : [newProperty];
+
+      return {
+        ...currentData,
+        properties: updatedProperties,
+      };
+    } else {
+      return addPropertyToNode(currentData, parentId);
+    }
+  });
+};
+
+export const removeProperty = (propertyId, setSchemaData) => {
+  const removePropertyFromNode = (node, propertyId) => {
+    if (node.id === propertyId) {
+      return null;
+    }
+    if (node.properties) {
+      const updatedProperties = node.properties
+        .map((childNode) => removePropertyFromNode(childNode, propertyId))
+        .filter((childNode) => childNode !== null);
+
+      return { ...node, properties: updatedProperties };
+    }
+    return node;
+  };
+  setSchemaData((currentData) => {
+    const updatedProperties = currentData.properties
+      .map((node) => removePropertyFromNode(node, propertyId))
+      .filter((node) => node !== null);
+    const updatedData = { ...currentData, properties: updatedProperties };
+
+    return updatedData;
+  });
+};
+export const changeProperty = (propertyId, changes, setSchemaData) => {
+  const updateProperty = (node, propertyId, changes) => {
+    if (node.id === propertyId || propertyId === "1") {
+      const updatedNode = {
+        ...node,
+        name: changes.name,
+        type: changes.type,
+      };
+
+      if (changes.type === "object") {
+        if (!updatedNode.properties || updatedNode.properties.length === 0) {
+          updatedNode.properties = [
+            {
+              name: "id",
+              type: "string",
+              id: uuidv4(),
+            },
+          ];
+        }
+      } else if (changes.type === "array") {
+        if (!updatedNode.properties || updatedNode.properties.length === 0) {
+          updatedNode.properties = [
+            {
+              name: "item",
+              type: "string",
+              id: uuidv4(),
+            },
+          ];
+        } else {
+          updatedNode.properties = updatedNode.properties.slice(0, 1);
+        }
+      } else if (changes.type !== "object" && changes.type !== "array") {
+        delete updatedNode.properties;
+      }
+      return updatedNode;
+    }
+
+    if (node.properties) {
+      const updatedProperties = node.properties.map((childNode) =>
+        updateProperty(childNode, propertyId, changes)
+      );
+      return { ...node, properties: updatedProperties };
+    }
+    return node;
+  };
+
+  setSchemaData((currentData) => {
+    return updateProperty(currentData, propertyId, changes);
+  });
+};

package/src/lib/SchemaEditor/index.js

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

package/src/lib/Scrollbar/Scrollbar.jsx

@@ -0,0 +1,39 @@
+import Box from "@mui/material/Box";
+import React from "react";
+import { forwardRef } from "react";
+
+import { StyledRootScrollbar, StyledScrollbar } from "./styles";
+
+const Scrollbar = forwardRef(({ children, sx, ...other }, ref) => {
+  const userAgent =
+    typeof navigator === "undefined" ? "SSR" : navigator.userAgent;
+  const mobile =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      userAgent
+    );
+
+  if (mobile) {
+    return (
+      <Box ref={ref} sx={{ overflow: "auto", ...sx }} {...other}>
+        {children}
+      </Box>
+    );
+  }
+
+  return (
+    <StyledRootScrollbar>
+      <StyledScrollbar
+        scrollableNodeProps={{
+          ref,
+        }}
+        clickOnTrack={false}
+        sx={sx}
+        {...other}
+      >
+        {children}
+      </StyledScrollbar>
+    </StyledRootScrollbar>
+  );
+});
+
+export default Scrollbar;

package/src/lib/Scrollbar/index.js

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

package/src/lib/Scrollbar/styles.js

@@ -0,0 +1,27 @@
+import SimpleBar from "simplebar-react";
+
+import { alpha, styled } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+export const StyledRootScrollbar = styled("div")(() => ({
+  flexGrow: 1,
+  height: "100%",
+  overflow: "hidden",
+}));
+
+export const StyledScrollbar = styled(SimpleBar)(({ theme }) => ({
+  maxHeight: "100%",
+
+  "& .simplebar-scrollbar": {
+    "&:before": {
+      backgroundColor: alpha(theme.palette.grey[600], 0.48),
+    },
+    "&.simplebar-visible:before": {
+      opacity: 1,
+    },
+  },
+  "& .simplebar-mask": {
+    zIndex: "inherit",
+  },
+}));

package/src/lib/SearchNotFound/SearchNotFound.jsx

@@ -0,0 +1,29 @@
+import Paper from "@mui/material/Paper";
+import React from "react";
+import Typography from "@mui/material/Typography";
+export default function SearchNotFound({ query, sx, ...other }) {
+  return query ? (
+    <Paper
+      sx={{
+        bgcolor: "unset",
+        textAlign: "center",
+        ...sx,
+      }}
+      {...other}
+    >
+      <Typography variant="h6" gutterBottom>
+        Not Found
+      </Typography>
+
+      <Typography variant="body2">
+        No results found for &nbsp;
+        <strong>&quot;{query}&quot;</strong>.
+        <br /> Try checking for typos or using complete words.
+      </Typography>
+    </Paper>
+  ) : (
+    <Typography variant="body2" sx={sx}>
+      Please enter keywords
+    </Typography>
+  );
+}

package/src/lib/SearchNotFound/index.js

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

package/src/lib/SparkleInput/SparkleInput.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+import { IconButton, InputAdornment, SvgIcon, TextField } from "@mui/material";
+
+export default function SparkleInput({
+  prop,
+  onChange,
+  value,
+  sparkle = true,
+  ...others
+}) {
+  return (
+    <TextField
+      inputProps={{
+        "data-cy": prop,
+      }}
+      autoFocus
+      margin="dense"
+      label={prop}
+      fullWidth={true}
+      value={value || ""}
+      onChange={onChange}
+      InputLabelProps={{
+        sx: { color: (theme) => theme.palette.text.primary },
+      }}
+      InputProps={{
+        endAdornment: sparkle && (
+          <InputAdornment position="end">
+            <IconButton>
+              <SvgIcon>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fill="white"
+                    d="M7.398 12.809a1.042 1.042 0 0 0 1.204-.003c.178-.13.313-.31.387-.518l.447-1.373a2.336 2.336 0 0 1 1.477-1.479l1.391-.45a1.045 1.045 0 0 0-.044-1.98l-1.375-.448a2.335 2.335 0 0 1-1.48-1.477l-.452-1.388a1.044 1.044 0 0 0-1.973.017l-.457 1.4a2.336 2.336 0 0 1-1.44 1.45l-1.39.447a1.045 1.045 0 0 0 .016 1.974l1.374.445a2.333 2.333 0 0 1 1.481 1.488l.452 1.391c.072.204.206.38.382.504m.085-7.415l.527-1.377l.44 1.377a3.331 3.331 0 0 0 2.117 2.114l1.406.53l-1.382.447a3.344 3.344 0 0 0-2.115 2.117l-.523 1.378l-.449-1.379a3.336 3.336 0 0 0-.8-1.31a3.373 3.373 0 0 0-1.312-.812l-1.378-.522l1.386-.45a3.358 3.358 0 0 0 1.29-.813a3.4 3.4 0 0 0 .793-1.3m6.052 11.457a.806.806 0 0 0 1.226-.398l.248-.762a1.09 1.09 0 0 1 .26-.42c.118-.12.262-.208.42-.26l.772-.252a.8.8 0 0 0-.023-1.52l-.764-.25a1.075 1.075 0 0 1-.68-.678l-.252-.773a.8.8 0 0 0-1.518.01l-.247.762a1.068 1.068 0 0 1-.665.679l-.773.252a.8.8 0 0 0 .008 1.518l.763.247c.16.054.304.143.422.261c.119.119.207.263.258.422l.253.774a.8.8 0 0 0 .292.388m-.913-2.793L12.443 14l.184-.064a2.11 2.11 0 0 0 1.3-1.317l.058-.178l.06.181a2.078 2.078 0 0 0 1.316 1.316l.195.063l-.18.06a2.076 2.076 0 0 0-1.317 1.32l-.059.181l-.058-.18a2.075 2.075 0 0 0-1.32-1.323"
+                  />
+                </svg>
+              </SvgIcon>
+            </IconButton>
+          </InputAdornment>
+        ),
+      }}
+      sx={{ textTransform: "capitalize" }}
+      {...others}
+    />
+  );
+}

package/src/lib/StepComponent/StepComponent.jsx

@@ -0,0 +1,98 @@
+import DialogActions from "@mui/material/DialogActions";
+import DialogContentText from "@mui/material/DialogContentText";
+import React from "react";
+import Step from "@mui/material/Step";
+import StepLabel from "@mui/material/StepLabel";
+import Stepper from "@mui/material/Stepper";
+
+import { Box, Button, Stack } from "@mui/material";
+
+export default function StepComponent({
+  activeStep,
+  steps,
+  stepExp,
+  handleNext,
+  handleBack,
+  handleSave,
+  children,
+}) {
+  return (
+    <>
+      <Stepper
+        activeStep={activeStep}
+        sx={{ backgroundColor: (theme) => theme.palette.background.default }}
+      >
+        {steps.map((label) => {
+          const stepProps = {};
+          const labelProps = {};
+          return (
+            <Step
+              key={label}
+              {...stepProps}
+              sx={{
+                backgroundColor: (theme) => theme.palette.background.default,
+              }}
+            >
+              <StepLabel
+                sx={{
+                  backgroundColor: (theme) => theme.palette.background.default,
+                }}
+                {...labelProps}
+              >
+                {label}
+              </StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>
+
+      <Stack
+        sx={{ backgroundColor: (theme) => theme.palette.background.default }}
+      >
+        <DialogContentText
+          sx={{
+            textAlign: "center",
+            my: 2,
+            mx: 5,
+            backgroundColor: (theme) => theme.palette.background.default,
+          }}
+        >
+          {stepExp[activeStep]}
+        </DialogContentText>
+      </Stack>
+      {children}
+      <DialogActions
+        sx={{ backgroundColor: (theme) => theme.palette.background.default }}
+      >
+        <Button
+          data-cy="colleague-back-button"
+          variant="outlined"
+          color="inherit"
+          disabled={activeStep === 0}
+          onClick={handleBack}
+          sx={{ mr: 1 }}
+        >
+          Back
+        </Button>
+        <Box sx={{ flex: "1 1 auto" }} />
+        {activeStep === steps.length ? (
+          <Button
+            variant="contained"
+            data-cy="colleague-finish-button"
+            onClick={handleSave}
+          >
+            Finish
+          </Button>
+        ) : (
+          <Button
+            variant="outlined"
+            data-cy="colleague-next-button"
+            onClick={handleNext}
+          >
+            Next
+          </Button>
+        )}
+      </DialogActions>
+    </>
+  );
+}

package/src/lib/SvgColor/SvgColor.jsx

@@ -0,0 +1,29 @@
+import Box from "@mui/material/Box";
+import PropTypes from "prop-types";
+
+import React, { forwardRef } from "react";
+
+const SvgColor = forwardRef(({ src, sx, ...other }, ref) => (
+  <Box
+    component="span"
+    className="svg-color"
+    ref={ref}
+    sx={{
+      width: 24,
+      height: 24,
+      display: "inline-block",
+      bgcolor: "currentColor",
+      mask: `url(${src}) no-repeat center / contain`,
+      WebkitMask: `url(${src}) no-repeat center / contain`,
+      ...sx,
+    }}
+    {...other}
+  />
+));
+
+SvgColor.propTypes = {
+  src: PropTypes.string,
+  sx: PropTypes.object,
+};
+
+export default SvgColor;

package/src/lib/SvgColor/index.js

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

package/src/lib/TableHeadCustom/TableHeadCustom.jsx

@@ -0,0 +1,87 @@
+import Box from "@mui/material/Box";
+import Checkbox from "@mui/material/Checkbox";
+import PropTypes from "prop-types";
+import React from "react";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableSortLabel from "@mui/material/TableSortLabel";
+const visuallyHidden = {
+  border: 0,
+  margin: -1,
+  padding: 0,
+  width: "1px",
+  height: "1px",
+  overflow: "hidden",
+  position: "absolute",
+  whiteSpace: "nowrap",
+  clip: "rect(0 0 0 0)",
+};
+
+export default function TableHeadCustom({
+  order,
+  orderBy,
+  rowCount = 0,
+  headLabel,
+  numSelected = 0,
+  onSort,
+  onSelectAllRows,
+  sx,
+}) {
+  return (
+    <TableHead sx={sx}>
+      <TableRow>
+        {onSelectAllRows && (
+          <TableCell padding="checkbox">
+            <Checkbox
+              indeterminate={!!numSelected && numSelected < rowCount}
+              checked={!!rowCount && numSelected === rowCount}
+              onChange={(event) => onSelectAllRows(event.target.checked)}
+            />
+          </TableCell>
+        )}
+
+        {headLabel.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            align={headCell.align || "left"}
+            sortDirection={orderBy === headCell.id ? order : false}
+            sx={{ width: headCell.width, minWidth: headCell.minWidth }}
+          >
+            {onSort ? (
+              <TableSortLabel
+                hideSortIcon
+                active={orderBy === headCell.id}
+                direction={orderBy === headCell.id ? order : "asc"}
+                onClick={() => onSort(headCell.id)}
+              >
+                {headCell.label}
+
+                {orderBy === headCell.id ? (
+                  <Box sx={{ ...visuallyHidden }}>
+                    {order === "desc"
+                      ? "sorted descending"
+                      : "sorted ascending"}
+                  </Box>
+                ) : null}
+              </TableSortLabel>
+            ) : (
+              headCell.label
+            )}
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+TableHeadCustom.propTypes = {
+  sx: PropTypes.object,
+  onSort: PropTypes.func,
+  orderBy: PropTypes.string,
+  headLabel: PropTypes.array,
+  rowCount: PropTypes.number,
+  numSelected: PropTypes.number,
+  onSelectAllRows: PropTypes.func,
+  order: PropTypes.oneOf(["asc", "desc"]),
+};

package/src/lib/TableHeadCustom/index.js

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

package/src/lib/TableSelectedAction/TableSelectedAction.jsx

@@ -0,0 +1,72 @@
+import Checkbox from "@mui/material/Checkbox";
+import PropTypes from "prop-types";
+import React from "react";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+export default function TableSelectedAction({
+  dense,
+  action,
+  rowCount,
+  numSelected,
+  onSelectAllRows,
+  sx,
+  ...other
+}) {
+  if (!numSelected) {
+    return null;
+  }
+
+  return (
+    <Stack
+      direction="row"
+      alignItems="center"
+      sx={{
+        pl: 1,
+        pr: 2,
+        top: 0,
+        left: 0,
+        width: 1,
+        zIndex: 9,
+        height: 58,
+        position: "absolute",
+        bgcolor: "primary.lighter",
+        ...(dense && {
+          height: 38,
+        }),
+        ...sx,
+      }}
+      {...other}
+    >
+      <Checkbox
+        indeterminate={!!numSelected && numSelected < rowCount}
+        checked={!!rowCount && numSelected === rowCount}
+        onChange={(event) => onSelectAllRows(event.target.checked)}
+      />
+
+      <Typography
+        variant="subtitle2"
+        sx={{
+          ml: 2,
+          flexGrow: 1,
+          color: "primary.main",
+          ...(dense && {
+            ml: 3,
+          }),
+        }}
+      >
+        {numSelected} selected
+      </Typography>
+
+      {action && action}
+    </Stack>
+  );
+}
+
+TableSelectedAction.propTypes = {
+  action: PropTypes.node,
+  dense: PropTypes.bool,
+  numSelected: PropTypes.number,
+  onSelectAllRows: PropTypes.func,
+  rowCount: PropTypes.number,
+  sx: PropTypes.object,
+};

package/src/lib/TableSelectedAction/index.js

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

package/src/lib/ToggleableMenu/ToggleableMenu.jsx

@@ -0,0 +1,35 @@
+import { Box, ClickAwayListener, IconButton } from "@mui/material";
+import React, { useState } from "react";
+
+function ToggleableMenu({ defaultIcon, children }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleDefaultIconClick = (event) => {
+    event.stopPropagation();
+    setIsOpen(!isOpen);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const handleMenuItemClick = (event) => {
+    event.stopPropagation();
+  };
+
+  return (
+    <ClickAwayListener onClickAway={handleClose}>
+      <Box>
+        {isOpen ? (
+          <Box onClick={handleMenuItemClick}>{children}</Box>
+        ) : (
+          <IconButton size="small" onClick={handleDefaultIconClick}>
+            {defaultIcon}
+          </IconButton>
+        )}
+      </Box>
+    </ClickAwayListener>
+  );
+}
+
+export default ToggleableMenu;

package/src/lib/ToggleableMenu/index.js

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