@ebubekirylmaz/link-test 1.0.0

package/src/components/chart/index.js

@@ -0,0 +1,5 @@
+// ----------------------------------------------------------------------
+
+export { default } from "./chart";
+
+export { default as useChart } from "./use-chart";

package/src/components/chart/use-chart.js

@@ -0,0 +1,215 @@
+import merge from "lodash/merge";
+import { useResponsive } from "../../hooks/use-responsive";
+
+import { alpha, useTheme } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+export default function useChart(options) {
+  const theme = useTheme();
+
+  const smUp = useResponsive("up", "sm");
+
+  const LABEL_TOTAL = {
+    show: true,
+    label: "Total",
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.subtitle2.fontSize,
+    fontWeight: theme.typography.subtitle2.fontWeight,
+    lineHeight: theme.typography.subtitle2.lineHeight,
+  };
+
+  const LABEL_VALUE = {
+    offsetY: 8,
+    color: theme.palette.text.primary,
+    fontSize: theme.typography.h3.fontSize,
+    fontWeight: theme.typography.h3.fontWeight,
+    lineHeight: theme.typography.h3.lineHeight,
+  };
+
+  const baseOptions = {
+    // Colors
+    colors: [
+      theme.palette.primary.main,
+      theme.palette.warning.main,
+      theme.palette.info.main,
+      theme.palette.error.main,
+      theme.palette.success.main,
+      theme.palette.warning.dark,
+      theme.palette.success.darker,
+      theme.palette.info.dark,
+      theme.palette.info.darker,
+    ],
+
+    // Chart
+    chart: {
+      toolbar: { show: false },
+      zoom: { enabled: false },
+      // animations: { enabled: false },
+      foreColor: theme.palette.text.disabled,
+      fontFamily: theme.typography.fontFamily,
+    },
+
+    // States
+    states: {
+      hover: {
+        filter: {
+          type: "lighten",
+          value: 0.04,
+        },
+      },
+      active: {
+        filter: {
+          type: "darken",
+          value: 0.88,
+        },
+      },
+    },
+
+    // Fill
+    fill: {
+      opacity: 1,
+      gradient: {
+        type: "vertical",
+        shadeIntensity: 0,
+        opacityFrom: 0.4,
+        opacityTo: 0,
+        stops: [0, 100],
+      },
+    },
+
+    // Datalabels
+    dataLabels: {
+      enabled: false,
+    },
+
+    // Stroke
+    stroke: {
+      width: 3,
+      curve: "smooth",
+      lineCap: "round",
+    },
+
+    // Grid
+    grid: {
+      strokeDashArray: 3,
+      borderColor: theme.palette.divider,
+      xaxis: {
+        lines: {
+          show: false,
+        },
+      },
+    },
+
+    // Xaxis
+    xaxis: {
+      axisBorder: { show: false },
+      axisTicks: { show: false },
+    },
+
+    // Markers
+    markers: {
+      size: 0,
+      strokeColors: theme.palette.background.paper,
+    },
+
+    // Tooltip
+    tooltip: {
+      theme: false,
+      x: {
+        show: true,
+      },
+    },
+
+    // Legend
+    legend: {
+      show: true,
+      fontSize: 13,
+      position: "top",
+      horizontalAlign: "right",
+      markers: {
+        radius: 12,
+      },
+      fontWeight: 500,
+      itemMargin: {
+        horizontal: 8,
+      },
+      labels: {
+        colors: theme.palette.text.primary,
+      },
+    },
+
+    // plotOptions
+    plotOptions: {
+      // Bar
+      bar: {
+        borderRadius: smUp ? 3 : 1,
+        columnWidth: "28%",
+        borderRadiusApplication: "end",
+        borderRadiusWhenStacked: "last",
+      },
+
+      // Pie + Donut
+      pie: {
+        donut: {
+          labels: {
+            show: true,
+            value: LABEL_VALUE,
+            total: LABEL_TOTAL,
+          },
+        },
+      },
+
+      // Radialbar
+      radialBar: {
+        track: {
+          strokeWidth: "100%",
+          background: alpha(theme.palette.grey[500], 0.16),
+        },
+        dataLabels: {
+          value: LABEL_VALUE,
+          total: LABEL_TOTAL,
+        },
+      },
+
+      // Radar
+      radar: {
+        polygons: {
+          fill: { colors: ["transparent"] },
+          strokeColors: theme.palette.divider,
+          connectorColors: theme.palette.divider,
+        },
+      },
+
+      // polarArea
+      polarArea: {
+        rings: {
+          strokeColor: theme.palette.divider,
+        },
+        spokes: {
+          connectorColors: theme.palette.divider,
+        },
+      },
+    },
+
+    // Responsive
+    responsive: [
+      {
+        // sm
+        breakpoint: theme.breakpoints.values.sm,
+        options: {
+          plotOptions: { bar: { columnWidth: "40%" } },
+        },
+      },
+      {
+        // md
+        breakpoint: theme.breakpoints.values.md,
+        options: {
+          plotOptions: { bar: { columnWidth: "32%" } },
+        },
+      },
+    ],
+  };
+
+  return merge(baseOptions, options);
+}

package/src/components/custom-popover/custom-popover.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/components/custom-popover/index.js

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

package/src/components/custom-popover/styles.js

@@ -0,0 +1,84 @@
+import { bgBlur } from "../../theme/css";
+
+import { alpha, styled } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+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/components/custom-popover/use-popover.js

@@ -0,0 +1,22 @@
+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/components/custom-popover/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 = {
+        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 = {
+        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;
+}

package/src/components/file-thumbnail/download-button.jsx

@@ -0,0 +1,39 @@
+import IconButton from "@mui/material/IconButton";
+import Iconify from "../Iconify";
+import { bgBlur } from "../../theme/css";
+import { useTheme } from "@mui/material/styles";
+
+export default function DownloadButton({ onDownload }) {
+  const theme = useTheme();
+
+  return (
+    <IconButton
+      onClick={onDownload}
+      sx={{
+        p: 0,
+        top: 0,
+        right: 0,
+        width: 1,
+        height: 1,
+        zIndex: 9,
+        opacity: 0,
+        position: "absolute",
+        borderRadius: "unset",
+        justifyContent: "center",
+        bgcolor: "grey.800",
+        color: "common.white",
+        transition: theme.transitions.create(["opacity"]),
+
+        "&:hover": {
+          opacity: 1,
+          ...bgBlur({
+            opacity: 0.64,
+            color: theme.palette.grey[900],
+          }),
+        },
+      }}
+    >
+      <Iconify icon="eva:arrow-circle-down-fill" width={24} />
+    </IconButton>
+  );
+}

package/src/components/file-thumbnail/file-thumbnail.jsx

@@ -0,0 +1,72 @@
+import Box from "@mui/material/Box";
+import DownloadButton from "./download-button";
+import Stack from "@mui/material/Stack";
+import Tooltip from "@mui/material/Tooltip";
+
+import { fileData, fileFormat, fileThumb } from "./utils";
+
+export default function FileThumbnail({
+  file,
+  tooltip,
+  imageView,
+  onDownload,
+  sx,
+  imgSx,
+}) {
+  const { name = "", path = "", preview = "" } = fileData(file);
+
+  const format = fileFormat(path || preview);
+
+  const renderContent =
+    format === "image" && imageView ? (
+      <Box
+        component="img"
+        src={preview}
+        sx={{
+          width: 1,
+          height: 1,
+          flexShrink: 0,
+          objectFit: "cover",
+          ...imgSx,
+        }}
+      />
+    ) : (
+      <Box
+        component="img"
+        src={fileThumb(format)}
+        sx={{
+          width: 32,
+          height: 32,
+          flexShrink: 0,
+          ...sx,
+        }}
+      />
+    );
+
+  if (tooltip) {
+    return (
+      <Tooltip title={name}>
+        <Stack
+          flexShrink={0}
+          component="span"
+          alignItems="center"
+          justifyContent="center"
+          sx={{
+            width: "fit-content",
+            height: "inherit",
+          }}
+        >
+          {renderContent}
+          {onDownload && <DownloadButton onDownload={onDownload} />}
+        </Stack>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <>
+      {renderContent}
+      {onDownload && <DownloadButton onDownload={onDownload} />}
+    </>
+  );
+}

package/src/components/file-thumbnail/index.js

@@ -0,0 +1,5 @@
+export * from "./utils";
+
+export { default } from "./file-thumbnail";
+
+export { default as DownloadButton } from "./download-button";