@ebubekirylmaz/link-test 1.0.0

package/src/lib/AddItemWizard/AddItemWizard.jsx

@@ -0,0 +1,211 @@
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import ItemsSummary from "../ItemSummary/ItemsSummary";
+import React from "react";
+import SelectAvatar from "../IconSelector/IconSelector";
+import SparkleInput from "../SparkleInput/SparkleInput";
+import StepComponent from "../StepComponent/StepComponent";
+
+import { Grid, Stack, Switch, Typography } from "@mui/material";
+import { publish, useEvent } from "@nucleoidai/react-event";
+
+function AddItemWizard({ onSubmit, items, steps, stepExp }) {
+  const [activeStep, setActiveStep] = React.useState(0);
+  const [newItems, setNewItems] = React.useState(items);
+  const [platformDialog] = useEvent("PLATFORM_DIALOG", { open: false });
+
+  const handleNext = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  const handleEmojiSelect = (index) => (emoji) => {
+    setNewItems((prevItems) =>
+      prevItems.map((item, i) =>
+        i === index
+          ? {
+              ...item,
+              details: { ...item.details, icon: emoji.shortcodes },
+            }
+          : item
+      )
+    );
+  };
+  const handleSave = () => {
+    onSubmit(newItems);
+    publish("PLATFORM_DIALOG", { open: false });
+    setActiveStep(0);
+  };
+
+  const handleSwitchChange = (index) => (event) => {
+    // eslint-disable-next-line no-unused-vars
+    const serviceType = !event.target.checked ? "multiple" : "single";
+    setNewItems((prevItems) =>
+      prevItems.map((item, i) =>
+        i === index
+          ? {
+              ...item,
+              details: { ...item.details },
+            }
+          : item
+      )
+    );
+  };
+
+  const handleInputChange = (index, prop) => (event) => {
+    setNewItems((prevItems) =>
+      prevItems.map((item, i) =>
+        i === index
+          ? {
+              ...item,
+              details: { ...item.details, [prop]: event.target.value },
+            }
+          : item
+      )
+    );
+  };
+  const Project = () => {
+    return (
+      <Stack
+        container
+        direction="column"
+        alignItems="center"
+        justifyContent="center"
+        spacing={2}
+      >
+        <SparkleInput
+          prop="name"
+          value={newItems[0].details.name}
+          onChange={handleInputChange(0, "name")}
+          sparkle={false}
+        />
+        <Typography variant="subtitle1" color={"gray"}>
+          Select an Icon
+        </Typography>
+        <SelectAvatar
+          handleEmojiSelect={handleEmojiSelect(0)}
+          iconCategories={"project_icons"}
+          avatar={newItems[0].details.icon?.replace(/:/g, "").replace("/", ":")}
+        />
+        <Typography variant="subtitle1" color={"gray"} sx={{ mb: -2 }}>
+          Service Type
+        </Typography>
+        <Stack direction="row" alignItems="center">
+          <Typography>Single</Typography>
+          <Switch
+            data-cy="type-switch"
+            defaultChecked
+            onChange={handleSwitchChange(0)}
+          />
+          <Typography>Multiple</Typography>
+        </Stack>
+      </Stack>
+    );
+  };
+
+  const Service = () => {
+    return (
+      <Grid container justifyContent="center" mt={1} spacing={2}>
+        <Grid item xs={5}>
+          <Stack
+            sx={{
+              borderStyle: "none dotted none none",
+              borderWidth: 2,
+              padding: 2,
+              borderColor: (theme) => theme.palette.divider,
+            }}
+          >
+            <SparkleInput
+              prop="name"
+              value={newItems[1].details.name}
+              onChange={handleInputChange(1, "name")}
+              sparkle={false}
+            />
+            <Typography
+              variant="subtitle1"
+              color={"gray"}
+              textAlign={"center"}
+              sx={{ marginTop: 2, marginBottom: 1 }}
+            >
+              Select an Icon
+            </Typography>
+            <SelectAvatar
+              handleEmojiSelect={handleEmojiSelect(1)}
+              iconCategories={"service_icons"}
+              avatar={newItems[1]?.details.icon
+                ?.replace(/:/g, "")
+                .replace("/", ":")}
+            />
+          </Stack>
+        </Grid>
+        <Grid item xs={7}>
+          <SparkleInput
+            prop="description"
+            value={newItems[1].details.description}
+            onChange={handleInputChange(1, "description")}
+            multiline
+            rows={11}
+          />
+        </Grid>
+      </Grid>
+    );
+  };
+  const Summary = () => {
+    return <ItemsSummary newItems={newItems} />;
+  };
+
+  const StepPages = () => {
+    switch (activeStep) {
+      case 0:
+        return Project();
+      case 1:
+        return Service();
+      case 2:
+        return <Summary />;
+    }
+  };
+  return (
+    <Dialog
+      fullWidth={true}
+      maxWidth="sm"
+      open={platformDialog.open}
+      onClose={() => {
+        publish("ADD_NEW_DIALOG_OPENED", { open: false });
+        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 AddItemWizard;

package/src/lib/AddItemWizard/index.js

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

package/src/lib/CustomBreadcrumbs/CustomBreadcrumbs.jsx

@@ -0,0 +1,88 @@
+import Box from "@mui/material/Box";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "@mui/material/Link";
+import LinkItem from "./link-item";
+import PropTypes from "prop-types";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+
+export default function CustomBreadcrumbs({
+  links,
+  action,
+  heading,
+  moreLink,
+  activeLast,
+  sx,
+  ...other
+}) {
+  const lastLink = links[links.length - 1].name;
+
+  return (
+    <Box sx={{ ...sx }}>
+      <Stack direction="row" alignItems="center">
+        <Box sx={{ flexGrow: 1 }}>
+          {heading && (
+            <Typography variant="h4" gutterBottom>
+              {heading}
+            </Typography>
+          )}
+
+          {!!links.length && (
+            <Breadcrumbs separator={<Separator />} {...other}>
+              {links.map((link) => (
+                <LinkItem
+                  key={link.name || ""}
+                  link={link}
+                  activeLast={activeLast}
+                  disabled={link.name === lastLink}
+                />
+              ))}
+            </Breadcrumbs>
+          )}
+        </Box>
+
+        {action && <Box sx={{ flexShrink: 0 }}> {action} </Box>}
+      </Stack>
+
+      {!!moreLink && (
+        <Box sx={{ mt: 2 }}>
+          {moreLink.map((href) => (
+            <Link
+              key={href}
+              href={href}
+              variant="body2"
+              target="_blank"
+              rel="noopener"
+              sx={{ display: "table" }}
+            >
+              {href}
+            </Link>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+CustomBreadcrumbs.propTypes = {
+  sx: PropTypes.object,
+  action: PropTypes.node,
+  links: PropTypes.array,
+  heading: PropTypes.string,
+  moreLink: PropTypes.array,
+  activeLast: PropTypes.bool,
+};
+
+function Separator() {
+  return (
+    <Box
+      component="span"
+      sx={{
+        width: 4,
+        height: 4,
+        borderRadius: "50%",
+        bgcolor: "text.disabled",
+      }}
+    />
+  );
+}

package/src/lib/CustomBreadcrumbs/index.js

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

package/src/lib/CustomBreadcrumbs/link-item.jsx

@@ -0,0 +1,58 @@
+import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import PropTypes from "prop-types";
+import RouterLink from "../../routes/components/router-link";
+
+export default function BreadcrumbsLink({ link, activeLast, disabled }) {
+  const styles = {
+    typography: "body2",
+    alignItems: "center",
+    color: "text.primary",
+    display: "inline-flex",
+    ...(disabled &&
+      !activeLast && {
+        cursor: "default",
+        pointerEvents: "none",
+        color: "text.disabled",
+      }),
+  };
+
+  const renderContent = (
+    <>
+      {link.icon && (
+        <Box
+          component="span"
+          sx={{
+            mr: 1,
+            display: "inherit",
+            "& svg": { width: 20, height: 20 },
+          }}
+        >
+          {link.icon}
+        </Box>
+      )}
+
+      {link.name}
+    </>
+  );
+
+  if (link.href) {
+    return (
+      <Link component={RouterLink} href={link.href} sx={styles}>
+        {renderContent}
+      </Link>
+    );
+  }
+
+  return <Box sx={styles}> {renderContent} </Box>;
+}
+
+BreadcrumbsLink.propTypes = {
+  activeLast: PropTypes.bool,
+  disabled: PropTypes.bool,
+  link: PropTypes.shape({
+    href: PropTypes.string,
+    icon: PropTypes.node,
+    name: PropTypes.string,
+  }),
+};

package/src/lib/CustomPopover/CustomPopover.jsx

@@ -0,0 +1,46 @@
+import Popover from "@mui/material/Popover";
+import React from "react";
+import { StyledArrow } from "./styles";
+import { getPosition } from "./utils";
+import { menuItemClasses } from "@mui/material/MenuItem";
+
+export default function CustomPopover({
+  open,
+  children,
+  arrow = "top-right",
+  hiddenArrow,
+  sx,
+  ...other
+}) {
+  const { style, anchorOrigin, transformOrigin } = getPosition(arrow);
+
+  return (
+    <Popover
+      open={Boolean(open)}
+      anchorEl={open}
+      anchorOrigin={anchorOrigin}
+      transformOrigin={transformOrigin}
+      slotProps={{
+        paper: {
+          sx: {
+            width: "auto",
+            overflow: "inherit",
+            ...style,
+            [`& .${menuItemClasses.root}`]: {
+              "& svg": {
+                mr: 2,
+                flexShrink: 0,
+              },
+            },
+            ...sx,
+          },
+        },
+      }}
+      {...other}
+    >
+      {!hiddenArrow && <StyledArrow arrow={arrow} />}
+
+      {children}
+    </Popover>
+  );
+}

package/src/lib/CustomPopover/index.js

@@ -0,0 +1,3 @@
+export { default } from "./CustomPopover";
+
+export { default as usePopover } from "./usePopover";

package/src/lib/CustomPopover/styles.js

@@ -0,0 +1,82 @@
+import { alpha, styled } from "@mui/material/styles";
+
+import { bgBlur } from "../../theme/css";
+
+export const StyledArrow = styled("span")(({ arrow, theme }) => {
+  const SIZE = 14;
+
+  const POSITION = -(SIZE / 2) + 0.5;
+
+  const topStyle = {
+    top: POSITION,
+    transform: "rotate(135deg)",
+  };
+
+  const bottomStyle = {
+    bottom: POSITION,
+    transform: "rotate(-45deg)",
+  };
+
+  const leftStyle = {
+    left: POSITION,
+    transform: "rotate(45deg)",
+  };
+
+  const rightStyle = {
+    right: POSITION,
+    transform: "rotate(-135deg)",
+  };
+
+  return {
+    width: SIZE,
+    height: SIZE,
+    position: "absolute",
+    borderBottomLeftRadius: SIZE / 4,
+    clipPath: "polygon(0% 0%, 100% 100%, 0% 100%)",
+    border: `solid 1px ${alpha(
+      theme.palette.mode === "light"
+        ? theme.palette.grey[500]
+        : theme.palette.common.black,
+      0.12
+    )}`,
+    ...bgBlur({
+      color: theme.palette.background.paper,
+    }),
+    // Top
+    ...(arrow === "top-left" && { ...topStyle, left: 20 }),
+    ...(arrow === "top-center" && {
+      ...topStyle,
+      left: 0,
+      right: 0,
+      margin: "auto",
+    }),
+    ...(arrow === "top-right" && { ...topStyle, right: 20 }),
+    // Bottom
+    ...(arrow === "bottom-left" && { ...bottomStyle, left: 20 }),
+    ...(arrow === "bottom-center" && {
+      ...bottomStyle,
+      left: 0,
+      right: 0,
+      margin: "auto",
+    }),
+    ...(arrow === "bottom-right" && { ...bottomStyle, right: 20 }),
+    // Left
+    ...(arrow === "left-top" && { ...leftStyle, top: 20 }),
+    ...(arrow === "left-center" && {
+      ...leftStyle,
+      top: 0,
+      bottom: 0,
+      margin: "auto",
+    }),
+    ...(arrow === "left-bottom" && { ...leftStyle, bottom: 20 }),
+    // Right
+    ...(arrow === "right-top" && { ...rightStyle, top: 20 }),
+    ...(arrow === "right-center" && {
+      ...rightStyle,
+      top: 0,
+      bottom: 0,
+      margin: "auto",
+    }),
+    ...(arrow === "right-bottom" && { ...rightStyle, bottom: 20 }),
+  };
+});

package/src/lib/CustomPopover/usePopover.js

@@ -0,0 +1,20 @@
+import { useCallback, useState } from "react";
+
+export default function usePopover() {
+  const [open, setOpen] = useState(null);
+
+  const onOpen = useCallback((event) => {
+    setOpen(event.currentTarget);
+  }, []);
+
+  const onClose = useCallback(() => {
+    setOpen(null);
+  }, []);
+
+  return {
+    open,
+    onOpen,
+    onClose,
+    setOpen,
+  };
+}

package/src/lib/CustomPopover/utils.js

@@ -0,0 +1,100 @@
+export function getPosition(arrow) {
+  let props;
+
+  switch (arrow) {
+    case "top-left":
+      props = {
+        style: { ml: -0.75 },
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        transformOrigin: { vertical: "top", horizontal: "left" },
+      };
+      break;
+    case "top-center":
+      props = {
+        style: {},
+        anchorOrigin: { vertical: "bottom", horizontal: "center" },
+        transformOrigin: { vertical: "top", horizontal: "center" },
+      };
+      break;
+    case "top-right":
+      props = {
+        style: { ml: 0.75 },
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+      };
+      break;
+    case "bottom-left":
+      props = {
+        style: { ml: -0.75 },
+        anchorOrigin: { vertical: "top", horizontal: "left" },
+        transformOrigin: { vertical: "bottom", horizontal: "left" },
+      };
+      break;
+    case "bottom-center":
+      props = {
+        style: {},
+        anchorOrigin: { vertical: "top", horizontal: "center" },
+        transformOrigin: { vertical: "bottom", horizontal: "center" },
+      };
+      break;
+    case "bottom-right":
+      props = {
+        style: { ml: 0.75 },
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        transformOrigin: { vertical: "bottom", horizontal: "right" },
+      };
+      break;
+    case "left-top":
+      props = {
+        style: { mt: -0.75 },
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "left" },
+      };
+      break;
+    case "left-center":
+      props = {
+        style: {},
+        anchorOrigin: { vertical: "center", horizontal: "right" },
+        transformOrigin: { vertical: "center", horizontal: "left" },
+      };
+      break;
+    case "left-bottom":
+      props = {
+        style: { mt: 0.75 },
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "bottom", horizontal: "left" },
+      };
+      break;
+    case "right-top":
+      props = {
+        style: { mt: -0.75 },
+        anchorOrigin: { vertical: "top", horizontal: "left" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+      };
+      break;
+    case "right-center":
+      props = {
+        style: {},
+        anchorOrigin: { vertical: "center", horizontal: "left" },
+        transformOrigin: { vertical: "center", horizontal: "right" },
+      };
+      break;
+    case "right-bottom":
+      props = {
+        style: { mt: 0.75 },
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        transformOrigin: { vertical: "bottom", horizontal: "right" },
+      };
+      break;
+
+    // top-right
+    default:
+      props = {
+        style: { ml: 0.75 },
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+      };
+  }
+
+  return props;
+}