@ebubekirylmaz/link-test 1.0.0

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;

package/src/lib/RHFTextfield/RHFTextfield.jsx

@@ -0,0 +1,39 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import PropTypes from "prop-types";
+import TextField from "@mui/material/TextField";
+
+export default function RHFTextField({ name, helperText, type, ...other }) {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <TextField
+          {...field}
+          fullWidth
+          type={type}
+          value={type === "number" && field.value === 0 ? "" : field.value}
+          onChange={(event) => {
+            if (type === "number") {
+              field.onChange(Number(event.target.value));
+            } else {
+              field.onChange(event.target.value);
+            }
+          }}
+          error={!!error}
+          helperText={error ? error?.message : helperText}
+          {...other}
+        />
+      )}
+    />
+  );
+}
+
+RHFTextField.propTypes = {
+  helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  name: PropTypes.string,
+  type: PropTypes.string,
+};

package/src/lib/RHFTextfield/index.js

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

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 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,28 @@
+import Box from "@mui/material/Box";
+import PropTypes from "prop-types";
+import { 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 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 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/index.js

@@ -0,0 +1,36 @@
+"use client";
+export { default as AddItemWizard } from "./AddItemWizard/AddItemWizard";
+export { default as Iconify } from "./Iconify";
+export { default as IconSelector } from "./IconSelector/IconSelector";
+export { default as ItemsSummary } from "./ItemSummary/ItemsSummary";
+export { default as ItemSummary } from "./ItemSummary/ItemSummary";
+export { default as SparkleInput } from "./SparkleInput/SparkleInput";
+export { default as StepComponent } from "./StepComponent/StepComponent";
+export { default as SvgColor } from "./SvgColor";
+export { default as ProjectWizard } from "./ProjectWizard";
+export { default as CustomPopover } from "./CustomPopover/CustomPopover";
+export { default as usePopover } from "./CustomPopover/usePopover";
+export { default as Image } from "./Image/Image";
+export { default as Label } from "./Label/Label";
+export { default as Scrollbar } from "./Scrollbar/Scrollbar";
+export { default as SearchNotFound } from "./SearchNotFound/SearchNotFound";
+export { default as CustomBreadcrumbs } from "./CustomBreadcrumbs/CustomBreadcrumbs";
+export { default as FormProvider } from "./FormProvider/FormProvider";
+export { default as RHFTextField } from "./RHFTextfield/RHFTextfield";
+export { default as TableHeadCustom } from "./TableHeadCustom/TableHeadCustom";
+export { default as TableSelectedAction } from "./TableSelectedAction/TableSelectedAction";
+export { default as useTable } from "./useTable/useTable";
+export { default as useChart } from "./useChart/useChart";
+
+export { default as Flow } from "./Flow/core/Flow";
+
+export {
+  HeaderCard,
+  MediaAvatarCard,
+  SideStripeCard,
+  AvatarRoleCard,
+} from "./Flow/layouts/CardLayout";
+
+export { default as ActionNode } from "./Flow/layouts/ActionNode";
+
+export { default as InfoNode } from "./Flow/layouts/InfoNode";