@ebubekirylmaz/link-test 1.0.0

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

@@ -0,0 +1,148 @@
+// ----------------------------------------------------------------------
+
+// Define more types here
+const FORMAT_PDF = ["pdf"];
+const FORMAT_TEXT = ["txt"];
+const FORMAT_PHOTOSHOP = ["psd"];
+const FORMAT_WORD = ["doc", "docx"];
+const FORMAT_EXCEL = ["xls", "xlsx"];
+const FORMAT_ZIP = ["zip", "rar", "iso"];
+const FORMAT_ILLUSTRATOR = ["ai", "esp"];
+const FORMAT_POWERPOINT = ["ppt", "pptx"];
+const FORMAT_AUDIO = ["wav", "aif", "mp3", "aac"];
+const FORMAT_IMG = ["jpg", "jpeg", "gif", "bmp", "png", "svg"];
+const FORMAT_VIDEO = ["m4v", "avi", "mpg", "mp4", "webm"];
+
+const iconUrl = (icon) => `/assets/icons/files/${icon}.svg`;
+
+// ----------------------------------------------------------------------
+
+export function fileFormat(fileUrl) {
+  let format;
+
+  switch (fileUrl?.includes(fileTypeByUrl(fileUrl))) {
+    case FORMAT_TEXT.includes(fileTypeByUrl(fileUrl)):
+      format = "txt";
+      break;
+    case FORMAT_ZIP.includes(fileTypeByUrl(fileUrl)):
+      format = "zip";
+      break;
+    case FORMAT_AUDIO.includes(fileTypeByUrl(fileUrl)):
+      format = "audio";
+      break;
+    case FORMAT_IMG.includes(fileTypeByUrl(fileUrl)):
+      format = "image";
+      break;
+    case FORMAT_VIDEO.includes(fileTypeByUrl(fileUrl)):
+      format = "video";
+      break;
+    case FORMAT_WORD.includes(fileTypeByUrl(fileUrl)):
+      format = "word";
+      break;
+    case FORMAT_EXCEL.includes(fileTypeByUrl(fileUrl)):
+      format = "excel";
+      break;
+    case FORMAT_POWERPOINT.includes(fileTypeByUrl(fileUrl)):
+      format = "powerpoint";
+      break;
+    case FORMAT_PDF.includes(fileTypeByUrl(fileUrl)):
+      format = "pdf";
+      break;
+    case FORMAT_PHOTOSHOP.includes(fileTypeByUrl(fileUrl)):
+      format = "photoshop";
+      break;
+    case FORMAT_ILLUSTRATOR.includes(fileTypeByUrl(fileUrl)):
+      format = "illustrator";
+      break;
+    default:
+      format = fileTypeByUrl(fileUrl);
+  }
+
+  return format;
+}
+
+// ----------------------------------------------------------------------
+
+export function fileThumb(fileUrl) {
+  let thumb;
+
+  switch (fileFormat(fileUrl)) {
+    case "folder":
+      thumb = iconUrl("ic_folder");
+      break;
+    case "txt":
+      thumb = iconUrl("ic_txt");
+      break;
+    case "zip":
+      thumb = iconUrl("ic_zip");
+      break;
+    case "audio":
+      thumb = iconUrl("ic_audio");
+      break;
+    case "video":
+      thumb = iconUrl("ic_video");
+      break;
+    case "word":
+      thumb = iconUrl("ic_word");
+      break;
+    case "excel":
+      thumb = iconUrl("ic_excel");
+      break;
+    case "powerpoint":
+      thumb = iconUrl("ic_power_point");
+      break;
+    case "pdf":
+      thumb = iconUrl("ic_pdf");
+      break;
+    case "photoshop":
+      thumb = iconUrl("ic_pts");
+      break;
+    case "illustrator":
+      thumb = iconUrl("ic_ai");
+      break;
+    case "image":
+      thumb = iconUrl("ic_img");
+      break;
+    default:
+      thumb = iconUrl("ic_file");
+  }
+  return thumb;
+}
+
+// ----------------------------------------------------------------------
+
+export function fileTypeByUrl(fileUrl = "") {
+  return (fileUrl && fileUrl.split(".").pop()) || "";
+}
+
+// ----------------------------------------------------------------------
+
+export function fileNameByUrl(fileUrl) {
+  return fileUrl.split("/").pop();
+}
+
+// ----------------------------------------------------------------------
+
+export function fileData(file) {
+  // Url
+  if (typeof file === "string") {
+    return {
+      key: file,
+      preview: file,
+      name: fileNameByUrl(file),
+      type: fileTypeByUrl(file),
+    };
+  }
+
+  // File
+  return {
+    key: file.preview,
+    name: file.name,
+    size: file.size,
+    path: file.path,
+    type: file.type,
+    preview: file.preview,
+    lastModified: file.lastModified,
+    lastModifiedDate: file.lastModifiedDate,
+  };
+}

package/src/components/image/image.jsx

@@ -0,0 +1,119 @@
+import Box from "@mui/material/Box";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import React from "react";
+import { forwardRef } from "react";
+import { getRatio } from "./utils";
+
+import { alpha, useTheme } from "@mui/material/styles";
+
+const Image = forwardRef(
+  (
+    {
+      ratio,
+      overlay,
+      disabledEffect = false,
+      //
+      alt,
+      src,
+      afterLoad,
+      delayTime,
+      threshold,
+      beforeLoad,
+      delayMethod,
+      placeholder,
+      wrapperProps,
+      scrollPosition,
+      effect = "blur",
+      visibleByDefault,
+      wrapperClassName,
+      useIntersectionObserver,
+      sx,
+      ...other
+    },
+    ref
+  ) => {
+    const theme = useTheme();
+
+    const overlayStyles = !!overlay && {
+      "&:before": {
+        content: "''",
+        top: 0,
+        left: 0,
+        width: 1,
+        height: 1,
+        zIndex: 1,
+        position: "absolute",
+        background: overlay || alpha(theme.palette.grey[900], 0.48),
+      },
+    };
+
+    const content = (
+      <Box
+        component={LazyLoadImage}
+        //
+        alt={alt}
+        src={src}
+        afterLoad={afterLoad}
+        delayTime={delayTime}
+        threshold={threshold}
+        beforeLoad={beforeLoad}
+        delayMethod={delayMethod}
+        placeholder={placeholder}
+        wrapperProps={wrapperProps}
+        scrollPosition={scrollPosition}
+        visibleByDefault={visibleByDefault}
+        effect={disabledEffect ? undefined : effect}
+        useIntersectionObserver={useIntersectionObserver}
+        wrapperClassName={wrapperClassName || "component-image-wrapper"}
+        placeholderSrc={
+          disabledEffect ? "/assets/transparent.png" : "/assets/placeholder.svg"
+        }
+        //
+        sx={{
+          width: 1,
+          height: 1,
+          objectFit: "cover",
+          verticalAlign: "bottom",
+          ...(!!ratio && {
+            top: 0,
+            left: 0,
+            position: "absolute",
+          }),
+        }}
+      />
+    );
+
+    return (
+      <Box
+        ref={ref}
+        component="span"
+        className="component-image"
+        sx={{
+          overflow: "hidden",
+          position: "relative",
+          verticalAlign: "bottom",
+          display: "inline-block",
+          ...(!!ratio && {
+            width: 1,
+          }),
+          "& span.component-image-wrapper": {
+            width: 1,
+            height: 1,
+            verticalAlign: "bottom",
+            backgroundSize: "cover !important",
+            ...(!!ratio && {
+              pt: getRatio(ratio),
+            }),
+          },
+          ...overlayStyles,
+          ...sx,
+        }}
+        {...other}
+      >
+        {content}
+      </Box>
+    );
+  }
+);
+
+export default Image;

package/src/components/image/index.js

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

package/src/components/image/utils.js

@@ -0,0 +1,15 @@
+// ----------------------------------------------------------------------
+
+export function getRatio(ratio = "1/1") {
+  return {
+    "4/3": "calc(100% / 4 * 3)",
+    "3/4": "calc(100% / 3 * 4)",
+    "6/4": "calc(100% / 6 * 4)",
+    "4/6": "calc(100% / 4 * 6)",
+    "16/9": "calc(100% / 16 * 9)",
+    "9/16": "calc(100% / 9 * 16)",
+    "21/9": "calc(100% / 21 * 9)",
+    "9/21": "calc(100% / 9 * 21)",
+    "1/1": "100%",
+  }[ratio];
+}

package/src/components/label/index.js

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

package/src/components/label/label.jsx

@@ -0,0 +1,51 @@
+import Box from "@mui/material/Box";
+import React from "react";
+import { StyledLabel } from "./styles";
+import { forwardRef } from "react";
+import { useTheme } from "@mui/material/styles";
+
+const Label = forwardRef(
+  (
+    {
+      children,
+      color = "default",
+      variant = "soft",
+      startIcon,
+      endIcon,
+      sx,
+      ...other
+    },
+    ref
+  ) => {
+    const theme = useTheme();
+
+    const iconStyles = {
+      width: 16,
+      height: 16,
+      "& svg, img": { width: 1, height: 1, objectFit: "cover" },
+    };
+
+    return (
+      <StyledLabel
+        ref={ref}
+        component="span"
+        ownerState={{ color, variant }}
+        sx={{
+          ...(startIcon && { pl: 0.75 }),
+          ...(endIcon && { pr: 0.75 }),
+          ...sx,
+        }}
+        theme={theme}
+        {...other}
+      >
+        {startIcon && <Box sx={{ mr: 0.75, ...iconStyles }}> {startIcon} </Box>}
+
+        {children}
+
+        {endIcon && <Box sx={{ ml: 0.75, ...iconStyles }}> {endIcon} </Box>}
+      </StyledLabel>
+    );
+  }
+);
+
+export default Label;

package/src/components/label/styles.js

@@ -0,0 +1,78 @@
+import Box from "@mui/material/Box";
+
+import { alpha, styled } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+export const StyledLabel = styled(Box)(({ theme, ownerState }) => {
+  const lightMode = theme.palette.mode === "light";
+
+  const filledVariant = ownerState.variant === "filled";
+
+  const outlinedVariant = ownerState.variant === "outlined";
+
+  const softVariant = ownerState.variant === "soft";
+
+  const defaultStyle = {
+    ...(ownerState.color === "default" && {
+      // FILLED
+      ...(filledVariant && {
+        color: lightMode ? theme.palette.common.white : theme.palette.grey[800],
+        backgroundColor: theme.palette.text.primary,
+      }),
+      // OUTLINED
+      ...(outlinedVariant && {
+        backgroundColor: "transparent",
+        color: theme.palette.text.primary,
+        border: `2px solid ${theme.palette.text.primary}`,
+      }),
+      // SOFT
+      ...(softVariant && {
+        color: theme.palette.text.secondary,
+        backgroundColor: alpha(theme.palette.grey[500], 0.16),
+      }),
+    }),
+  };
+
+  const colorStyle = {
+    ...(ownerState.color !== "default" && {
+      // FILLED
+      ...(filledVariant && {
+        color: theme.palette[ownerState.color].contrastText,
+        backgroundColor: theme.palette[ownerState.color].main,
+      }),
+      // OUTLINED
+      ...(outlinedVariant && {
+        backgroundColor: "transparent",
+        color: theme.palette[ownerState.color].main,
+        border: `2px solid ${theme.palette[ownerState.color].main}`,
+      }),
+      // SOFT
+      ...(softVariant && {
+        color: theme.palette[ownerState.color][lightMode ? "dark" : "light"],
+        backgroundColor: alpha(theme.palette[ownerState.color].main, 0.16),
+      }),
+    }),
+  };
+
+  return {
+    height: 24,
+    minWidth: 24,
+    lineHeight: 0,
+    borderRadius: 6,
+    cursor: "default",
+    alignItems: "center",
+    whiteSpace: "nowrap",
+    display: "inline-flex",
+    justifyContent: "center",
+    textTransform: "capitalize",
+    padding: theme.spacing(0, 0.75),
+    fontSize: theme.typography.pxToRem(12),
+    fontWeight: theme.typography.fontWeightBold,
+    transition: theme.transitions.create("all", {
+      duration: theme.transitions.duration.shorter,
+    }),
+    ...defaultStyle,
+    ...colorStyle,
+  };
+});

package/src/components/loading-screen/index.js

@@ -0,0 +1,2 @@
+export { default as SplashScreen } from "./splash-screen";
+export { default as LoadingScreen } from "./loading-screen";

package/src/components/loading-screen/loading-screen.jsx

@@ -0,0 +1,23 @@
+import Box from "@mui/material/Box";
+import LinearProgress from "@mui/material/LinearProgress";
+import React from "react";
+
+export default function LoadingScreen({ sx, ...other }) {
+  return (
+    <Box
+      sx={{
+        px: 5,
+        width: 1,
+        flexGrow: 1,
+        minHeight: 1,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        ...sx,
+      }}
+      {...other}
+    >
+      <LinearProgress color="inherit" sx={{ width: 1, maxWidth: 360 }} />
+    </Box>
+  );
+}

package/src/components/loading-screen/splash-screen.jsx

@@ -0,0 +1,95 @@
+import Box from "@mui/material/Box";
+import Logo from "../logo";
+import React from "react";
+import { alpha } from "@mui/material/styles";
+import { m } from "framer-motion";
+
+import { useEffect, useState } from "react";
+
+export default function SplashScreen({ sx, ...other }) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        right: 0,
+        width: 1,
+        bottom: 0,
+        height: 1,
+        zIndex: 9998,
+        display: "flex",
+        position: "absolute",
+        alignItems: "center",
+        justifyContent: "center",
+        bgcolor: "background.default",
+        ...sx,
+      }}
+      {...other}
+    >
+      <>
+        <m.div
+          animate={{
+            scale: [1, 0.9, 0.9, 1, 1],
+            opacity: [1, 0.48, 0.48, 1, 1],
+          }}
+          transition={{
+            duration: 2,
+            ease: "easeInOut",
+            repeatDelay: 1,
+            repeat: Infinity,
+          }}
+        >
+          <Logo disabledLink sx={{ width: 64, height: 64 }} />
+        </m.div>
+
+        <Box
+          component={m.div}
+          animate={{
+            scale: [1.6, 1, 1, 1.6, 1.6],
+            rotate: [270, 0, 0, 270, 270],
+            opacity: [0.25, 1, 1, 1, 0.25],
+            borderRadius: ["25%", "25%", "50%", "50%", "25%"],
+          }}
+          transition={{ ease: "linear", duration: 3.2, repeat: Infinity }}
+          sx={{
+            width: 100,
+            height: 100,
+            position: "absolute",
+            border: (theme) =>
+              `solid 3px ${alpha(theme.palette.primary.dark, 0.24)}`,
+          }}
+        />
+
+        <Box
+          component={m.div}
+          animate={{
+            scale: [1, 1.2, 1.2, 1, 1],
+            rotate: [0, 270, 270, 0, 0],
+            opacity: [1, 0.25, 0.25, 0.25, 1],
+            borderRadius: ["25%", "25%", "50%", "50%", "25%"],
+          }}
+          transition={{
+            ease: "linear",
+            duration: 3.2,
+            repeat: Infinity,
+          }}
+          sx={{
+            width: 120,
+            height: 120,
+            position: "absolute",
+            border: (theme) =>
+              `solid 8px ${alpha(theme.palette.primary.dark, 0.24)}`,
+          }}
+        />
+      </>
+    </Box>
+  );
+}

package/src/components/logo/index.js

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

package/src/components/logo/logo.jsx

@@ -0,0 +1,61 @@
+import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import { RouterLink } from "../../routes/components";
+import config from "../../config/config";
+
+import React, { useEffect, useState } from "react";
+
+const Logo = ({ disabledLink = false, sx, maxSize = 99 }) => {
+  const { icon } = config().template.login;
+  const [dimensions, setDimensions] = useState({
+    width: maxSize,
+    height: maxSize,
+  });
+
+  useEffect(() => {
+    if (icon) {
+      const img = new Image();
+      img.onload = () => {
+        const { naturalWidth, naturalHeight } = img;
+
+        if (naturalWidth > maxSize || naturalHeight > maxSize) {
+          setDimensions({
+            width: 40,
+            height: 40,
+          });
+        } else {
+          setDimensions({
+            width: naturalWidth,
+            height: naturalHeight,
+          });
+        }
+      };
+      img.src = icon;
+    }
+  }, [icon, maxSize]);
+
+  const logo = (
+    <Box
+      component="img"
+      src={icon}
+      sx={{
+        width: dimensions.width,
+        height: dimensions.height,
+        cursor: "pointer",
+        ...sx,
+      }}
+    />
+  );
+
+  if (disabledLink) {
+    return logo;
+  }
+
+  return (
+    <Link component={RouterLink} href="/" sx={{ display: "contents" }}>
+      {logo}
+    </Link>
+  );
+};
+
+export default Logo;

package/src/components/logo/styles.js

@@ -0,0 +1,17 @@
+const styles = {
+  neon: {
+    color: "#dfdfdf",
+    textShadow: `
+        0 0 5px #209958,
+        0 0 10px #209958,
+        0 0 20px #209958,
+        0 0 40px #209958,
+        0 0 80px #209958,
+        0 0 90px #209958,
+        0 0 100px #209958,
+        0 0 150px #209958
+      `,
+  },
+};
+
+export default styles;

package/src/components/nav-section/horizontal/index.js

@@ -0,0 +1 @@
+export { default } from "./nav-section-horizontal";