test-nucleoid 1.0.0

package/src/layouts/common/notifications-popover/notification-item.jsx

@@ -0,0 +1,252 @@
+import Avatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import FileThumbnail from "../../../components/file-thumbnail";
+import Label from "../../../components/label";
+import ListItemAvatar from "@mui/material/ListItemAvatar";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
+import React from "react";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { fToNow } from "../../../utils/format-time";
+
+// ----------------------------------------------------------------------
+
+export default function NotificationItem({ notification }) {
+  const renderAvatar = (
+    <ListItemAvatar>
+      {notification.avatarUrl ? (
+        <Avatar
+          src={notification.avatarUrl}
+          sx={{ bgcolor: "background.neutral" }}
+        />
+      ) : (
+        <Stack
+          alignItems="center"
+          justifyContent="center"
+          sx={{
+            width: 40,
+            height: 40,
+            borderRadius: "50%",
+            bgcolor: "background.neutral",
+          }}
+        >
+          <Box
+            component="img"
+            src={`/assets/icons/notification/${
+              (notification.type === "order" && "ic_order") ||
+              (notification.type === "chat" && "ic_chat") ||
+              (notification.type === "mail" && "ic_mail") ||
+              (notification.type === "delivery" && "ic_delivery")
+            }.svg`}
+            sx={{ width: 24, height: 24 }}
+          />
+        </Stack>
+      )}
+    </ListItemAvatar>
+  );
+
+  const renderText = (
+    <ListItemText
+      disableTypography
+      primary={reader(notification.title)}
+      secondary={
+        <Stack
+          direction="row"
+          alignItems="center"
+          sx={{ typography: "caption", color: "text.disabled" }}
+          divider={
+            <Box
+              sx={{
+                width: 2,
+                height: 2,
+                bgcolor: "currentColor",
+                mx: 0.5,
+                borderRadius: "50%",
+              }}
+            />
+          }
+        >
+          {fToNow(notification.createdAt)}
+          {notification.category}
+        </Stack>
+      }
+    />
+  );
+
+  const renderUnReadBadge = notification.isUnRead && (
+    <Box
+      sx={{
+        top: 26,
+        width: 8,
+        height: 8,
+        right: 20,
+        borderRadius: "50%",
+        bgcolor: "info.main",
+        position: "absolute",
+      }}
+    />
+  );
+
+  const friendAction = (
+    <Stack spacing={1} direction="row" sx={{ mt: 1.5 }}>
+      <Button size="small" variant="contained">
+        Accept
+      </Button>
+      <Button size="small" variant="outlined">
+        Decline
+      </Button>
+    </Stack>
+  );
+
+  const projectAction = (
+    <Stack alignItems="flex-start">
+      <Box
+        sx={{
+          p: 1.5,
+          my: 1.5,
+          borderRadius: 1.5,
+          color: "text.secondary",
+          bgcolor: "background.neutral",
+        }}
+      >
+        {reader(
+          `<p><strong>@Jaydon Frankie</strong> feedback by asking questions or just leave a note of appreciation.</p>`
+        )}
+      </Box>
+
+      <Button size="small" variant="contained">
+        Reply
+      </Button>
+    </Stack>
+  );
+
+  const fileAction = (
+    <Stack
+      spacing={1}
+      direction="row"
+      sx={{
+        pl: 1,
+        p: 1.5,
+        mt: 1.5,
+        borderRadius: 1.5,
+        bgcolor: "background.neutral",
+      }}
+    >
+      <FileThumbnail
+        file="http://localhost:8080/httpsdesign-suriname-2015.mp3"
+        sx={{ width: 40, height: 40 }}
+      />
+
+      <Stack
+        spacing={1}
+        direction={{ xs: "column", sm: "row" }}
+        flexGrow={1}
+        sx={{ minWidth: 0 }}
+      >
+        <ListItemText
+          disableTypography
+          primary={
+            <Typography
+              variant="subtitle2"
+              component="div"
+              sx={{ color: "text.secondary" }}
+              noWrap
+            >
+              design-suriname-2015.mp3
+            </Typography>
+          }
+          secondary={
+            <Stack
+              direction="row"
+              alignItems="center"
+              sx={{ typography: "caption", color: "text.disabled" }}
+              divider={
+                <Box
+                  sx={{
+                    mx: 0.5,
+                    width: 2,
+                    height: 2,
+                    borderRadius: "50%",
+                    bgcolor: "currentColor",
+                  }}
+                />
+              }
+            >
+              <span>2.3 GB</span>
+              <span>30 min ago</span>
+            </Stack>
+          }
+        />
+
+        <Button size="small" variant="outlined">
+          Download
+        </Button>
+      </Stack>
+    </Stack>
+  );
+
+  const tagsAction = (
+    <Stack direction="row" spacing={0.75} flexWrap="wrap" sx={{ mt: 1.5 }}>
+      <Label variant="outlined" color="info">
+        Design
+      </Label>
+      <Label variant="outlined" color="warning">
+        Dashboard
+      </Label>
+      <Label variant="outlined">Design system</Label>
+    </Stack>
+  );
+
+  const paymentAction = (
+    <Stack direction="row" spacing={1} sx={{ mt: 1.5 }}>
+      <Button size="small" variant="contained">
+        Pay
+      </Button>
+      <Button size="small" variant="outlined">
+        Decline
+      </Button>
+    </Stack>
+  );
+
+  return (
+    <ListItemButton
+      disableRipple
+      sx={{
+        p: 2.5,
+        alignItems: "flex-start",
+        borderBottom: (theme) => `dashed 1px ${theme.palette.divider}`,
+      }}
+    >
+      {renderUnReadBadge}
+
+      {renderAvatar}
+
+      <Stack sx={{ flexGrow: 1 }}>
+        {renderText}
+        {notification.type === "friend" && friendAction}
+        {notification.type === "project" && projectAction}
+        {notification.type === "file" && fileAction}
+        {notification.type === "tags" && tagsAction}
+        {notification.type === "payment" && paymentAction}
+      </Stack>
+    </ListItemButton>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+function reader(data) {
+  return (
+    <Box
+      dangerouslySetInnerHTML={{ __html: data }}
+      sx={{
+        mb: 0.5,
+        "& p": { typography: "body2", m: 0 },
+        "& a": { color: "inherit", textDecoration: "none" },
+        "& strong": { typography: "subtitle2" },
+      }}
+    />
+  );
+}

package/src/layouts/common/settings-button.jsx

@@ -0,0 +1,48 @@
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import Iconify from "../../components/Iconify";
+import React from "react";
+import SettingsDialog from "../../widgets/SettingsDialog";
+import { motion } from "framer-motion";
+import { varHover } from "../../components/animate";
+
+// ----------------------------------------------------------------------
+
+export default function SettingsButton({ sx }) {
+  const [settingsOpen, setSettingsOpen] = React.useState(false);
+
+  return (
+    <>
+      <Box
+        component={motion.div}
+        animate={{
+          rotate: [0, settingsOpen ? 0 : 360],
+        }}
+        transition={{
+          duration: 12,
+          ease: "linear",
+          repeat: Infinity,
+        }}
+      >
+        <IconButton
+          component={motion.button}
+          whileTap="tap"
+          whileHover="hover"
+          variants={varHover(1.05)}
+          aria-label="settings"
+          onClick={() => setSettingsOpen(true)}
+          sx={{
+            width: 40,
+            height: 40,
+          }}
+        >
+          <Iconify icon="solar:settings-bold-duotone" width={24} />
+        </IconButton>
+      </Box>
+      <SettingsDialog
+        open={settingsOpen}
+        handleClose={() => setSettingsOpen(false)}
+      />
+    </>
+  );
+}

package/src/layouts/config-layout.js

@@ -0,0 +1,12 @@
+// ----------------------------------------------------------------------
+
+export const HEADER = {
+  H_MOBILE: 64,
+  H_DESKTOP: 80,
+  H_DESKTOP_OFFSET: 80 - 16,
+};
+
+export const NAV = {
+  W_VERTICAL: 280,
+  W_MINI: 88,
+};

package/src/layouts/index.js

@@ -0,0 +1,7 @@
+"use client";
+export { default as CompactLayout } from "./CompactLayout";
+export { default as DashboardLayout } from "./DashboardLayout";
+export { default as MainLayout } from "./MainLayout";
+export { default as SimpleLayout } from "./SimpleLayout";
+export { default as TwoSideLayout } from "./TwoSideLayout";
+export { default as FullScreenLayout } from "./FullScreenLayout";

package/src/lib/APIDialogAction/APIDialogAction.jsx

@@ -0,0 +1,109 @@
+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 { useEffect, useState } from "react";
+
+function APIDialogAction({
+  view,
+  setApiDialogView,
+  saveApiDialog,
+  saveDisable,
+  deleteDisable,
+  deleteMethod,
+}) {
+  const [alignment, setAlignment] = useState();
+  const [openToolTip, setOpenToolTip] = useState(false);
+
+  const handleTooltipClose = () => {
+    setOpenToolTip(false);
+  };
+
+  const handleTooltipOpen = () => {
+    setOpenToolTip(true);
+  };
+
+  useEffect(() => {
+    setAlignment(view);
+  }, [view]);
+
+  return (
+    <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+      <Box>
+        <ToggleButtonGroup
+          value={alignment}
+          exclusive
+          size={"small"}
+          onChange={(event, newAlignment) => {
+            if (!newAlignment) return;
+            setAlignment(newAlignment);
+            setApiDialogView(newAlignment);
+          }}
+          sx={{
+            "& .MuiToggleButton-root": {
+              borderRadius: 1,
+              textTransform: "none",
+              fontWeight: "normal",
+            },
+          }}
+        >
+          <ToggleButton value={"PARAMS"} data-cy="params-toggle">
+            PARAMS
+          </ToggleButton>
+          <ToggleButton value={"BODY"} data-cy="body-toggle">
+            BODY
+          </ToggleButton>
+        </ToggleButtonGroup>
+      </Box>
+      <Box sx={{ display: "flex", gap: 1 }}>
+        <DialogTooltip
+          placement="top"
+          open={openToolTip}
+          title={<b>Delete method</b>}
+          message={
+            <>
+              This method will be <b>deleted.</b>
+              <br /> Do you want to continue?
+            </>
+          }
+          footer={
+            <Button
+              variant="contained"
+              color="error"
+              onClick={deleteMethod}
+              startIcon={<DeleteIcon />}
+              data-cy="delete-api-button-yes"
+            >
+              Delete
+            </Button>
+          }
+          handleTooltipClose={handleTooltipClose}
+        >
+          <Button
+            variant="outlined"
+            color="error"
+            onClick={handleTooltipOpen}
+            disabled={deleteDisable}
+            startIcon={<DeleteIcon />}
+            data-cy="delete-api-button"
+          >
+            Delete
+          </Button>
+        </DialogTooltip>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={saveApiDialog}
+          disabled={saveDisable}
+          startIcon={<SaveIcon />}
+          data-cy="save-api-button"
+        >
+          Save
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+
+export default APIDialogAction;

package/src/lib/APIDialogAction/index.js

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

package/src/lib/APIDialogAction/styles.js

@@ -0,0 +1,6 @@
+const styles = {
+  root: { justifyContent: "space-between" },
+  firstElement: { width: 200 },
+};
+
+export default styles;

package/src/lib/APIParams/APIParams.jsx

@@ -0,0 +1,57 @@
+import AddIcon from "@mui/icons-material/Add";
+import ParamTable from "../ParamTable";
+
+import { Box, Fab } from "@mui/material";
+import { useEffect, useState } from "react";
+
+const APIParams = ({ types, paramsRef, addParams }) => {
+  const [params, setParams] = useState(paramsRef.current);
+
+  useEffect(() => {
+    setParams(paramsRef.current);
+  }, [paramsRef]);
+
+  useEffect(() => {
+    paramsRef.current = params;
+  }, [params, paramsRef]);
+
+  const handleAddParams = () => {
+    const id = Date.now().toString();
+    const newParam = {
+      id,
+      in: "query",
+      type: "string",
+      required: true,
+    };
+    setParams((prevParams) => [...prevParams, newParam]);
+  };
+
+  if (addParams) {
+    addParams.current = handleAddParams;
+  }
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        height: "85%",
+        p: 2,
+      }}
+      data-cy="api-params"
+    >
+      <ParamTable types={types} params={params} setParams={setParams} />
+      <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
+        <Fab
+          size={"small"}
+          onClick={handleAddParams}
+          data-cy="add-param-button"
+        >
+          <AddIcon />
+        </Fab>
+      </Box>
+    </Box>
+  );
+};
+
+export default APIParams;

package/src/lib/APIParams/index.js

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

package/src/lib/APIPath/APIPath.jsx

@@ -0,0 +1,82 @@
+import LanguageIcon from "@mui/icons-material/Language";
+import styles from "./styles";
+
+import {
+  Box,
+  Button,
+  Grid,
+  MenuItem,
+  Select,
+  TextField,
+  Typography,
+} from "@mui/material";
+import React, { useEffect, useState } from "react";
+
+const APIPath = ({
+  method,
+  path,
+  methodRef,
+  pathRef,
+  onTypesButtonClick,
+  allowedMethods,
+  isMethodDisabled,
+  isPathDisabled,
+  validatePath,
+}) => {
+  const [selectedMethod, setSelectedMethod] = useState(
+    allowedMethods.includes(method) ? method : allowedMethods[0] || ""
+  );
+  const [selectedPath, setSelectedPath] = useState("");
+
+  useEffect(() => {
+    methodRef.current = selectedMethod;
+    pathRef.current = path + (path !== "/" ? "/" : "") + selectedPath;
+    validatePath(selectedPath);
+  }, [selectedMethod, selectedPath, methodRef, pathRef, path, validatePath]);
+
+  return (
+    <Grid container sx={styles.root} data-cy="api-path">
+      <Grid sx={styles.firstElement} />
+      <Grid item>
+        <Grid container item sx={styles.content}>
+          {isMethodDisabled ? (
+            <Typography data-cy="method-text">{method}</Typography>
+          ) : (
+            <Select
+              value={selectedMethod}
+              onChange={(e) => setSelectedMethod(e.target.value)}
+              data-cy="method-select"
+            >
+              {allowedMethods.map((method) => (
+                <MenuItem
+                  key={method}
+                  value={method}
+                  data-cy={`method-menuitem-${method}`}
+                >
+                  {method}
+                </MenuItem>
+              ))}
+            </Select>
+          )}
+          <Box component="span" sx={styles.text}></Box>
+          <Typography data-cy="path-text">
+            {path} {path !== "/" ? "/" : ""}
+          </Typography>
+          {!isPathDisabled && (
+            <TextField
+              value={selectedPath}
+              onChange={(e) => setSelectedPath(e.target.value)}
+              data-cy="path-input"
+            />
+          )}
+        </Grid>
+      </Grid>
+      <Button onClick={onTypesButtonClick} data-cy="types-button">
+        <LanguageIcon sx={styles.icon} />
+        Types
+      </Button>
+    </Grid>
+  );
+};
+
+export default APIPath;

package/src/lib/APIPath/index.js

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

package/src/lib/APIPath/styles.js

@@ -0,0 +1,19 @@
+const styles = {
+  root: {
+    justifyContent: "space-between",
+  },
+  firstElement: { width: 50 },
+  content: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  text: {
+    fontSize: 16,
+    ml: 2,
+    mr: 1,
+  },
+  textField: { width: 75 },
+  icon: { fill: "#5d5d5d", mr: 1 },
+};
+
+export default styles;