@ebubekirylmaz/link-test 1.0.0

package/src/components/animate/variants/bounce.js

@@ -0,0 +1,107 @@
+import { varTranEnter, varTranExit } from "./transition";
+
+export const varBounce = (props) => {
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    in: {
+      initial: {},
+      animate: {
+        scale: [0.3, 1.1, 0.9, 1.03, 0.97, 1],
+        opacity: [0, 1, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        scale: [0.9, 1.1, 0.3],
+        opacity: [1, 1, 0],
+      },
+    },
+    inUp: {
+      initial: {},
+      animate: {
+        y: [720, -24, 12, -4, 0],
+        scaleY: [4, 0.9, 0.95, 0.985, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: { ...varTranEnter({ durationIn, easeIn }) },
+      },
+      exit: {
+        y: [12, -24, 720],
+        scaleY: [0.985, 0.9, 3],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inDown: {
+      initial: {},
+      animate: {
+        y: [-720, 24, -12, 4, 0],
+        scaleY: [4, 0.9, 0.95, 0.985, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        y: [-12, 24, -720],
+        scaleY: [0.985, 0.9, 3],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inLeft: {
+      initial: {},
+      animate: {
+        x: [-720, 24, -12, 4, 0],
+        scaleX: [3, 1, 0.98, 0.995, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        x: [0, 24, -720],
+        scaleX: [1, 0.9, 2],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inRight: {
+      initial: {},
+      animate: {
+        x: [720, -24, 12, -4, 0],
+        scaleX: [3, 1, 0.98, 0.995, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        x: [0, -24, 720],
+        scaleX: [1, 0.9, 2],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+
+    out: {
+      animate: { scale: [0.9, 1.1, 0.3], opacity: [1, 1, 0] },
+    },
+    outUp: {
+      animate: {
+        y: [-12, 24, -720],
+        scaleY: [0.985, 0.9, 3],
+        opacity: [1, 1, 0],
+      },
+    },
+    outDown: {
+      animate: {
+        y: [12, -24, 720],
+        scaleY: [0.985, 0.9, 3],
+        opacity: [1, 1, 0],
+      },
+    },
+    outLeft: {
+      animate: { x: [0, 24, -720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] },
+    },
+    outRight: {
+      animate: { x: [0, -24, 720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] },
+    },
+  };
+};

package/src/components/animate/variants/container.js

@@ -0,0 +1,20 @@
+export const varContainer = (props) => {
+  const staggerIn = props?.staggerIn || 0.05;
+  const delayIn = props?.staggerIn || 0.05;
+  const staggerOut = props?.staggerIn || 0.05;
+
+  return {
+    animate: {
+      transition: {
+        staggerChildren: staggerIn,
+        delayChildren: delayIn,
+      },
+    },
+    exit: {
+      transition: {
+        staggerChildren: staggerOut,
+        staggerDirection: -1,
+      },
+    },
+  };
+};

package/src/components/animate/variants/fade.js

@@ -0,0 +1,127 @@
+import { varTranEnter, varTranExit } from "./transition";
+
+export const varFade = (props) => {
+  const distance = props?.distance || 120;
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    in: {
+      initial: { opacity: 0 },
+      animate: { opacity: 1, transition: varTranEnter },
+      exit: { opacity: 0, transition: varTranExit },
+    },
+    inUp: {
+      initial: { y: distance, opacity: 0 },
+      animate: {
+        y: 0,
+        opacity: 1,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        y: distance,
+        opacity: 0,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inDown: {
+      initial: { y: -distance, opacity: 0 },
+      animate: {
+        y: 0,
+        opacity: 1,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        y: -distance,
+        opacity: 0,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inLeft: {
+      initial: { x: -distance, opacity: 0 },
+      animate: {
+        x: 0,
+        opacity: 1,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        x: -distance,
+        opacity: 0,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inRight: {
+      initial: { x: distance, opacity: 0 },
+      animate: {
+        x: 0,
+        opacity: 1,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        x: distance,
+        opacity: 0,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+
+    out: {
+      initial: { opacity: 1 },
+      animate: { opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outUp: {
+      initial: { y: 0, opacity: 1 },
+      animate: {
+        y: -distance,
+        opacity: 0,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        y: 0,
+        opacity: 1,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    outDown: {
+      initial: { y: 0, opacity: 1 },
+      animate: {
+        y: distance,
+        opacity: 0,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        y: 0,
+        opacity: 1,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    outLeft: {
+      initial: { x: 0, opacity: 1 },
+      animate: {
+        x: -distance,
+        opacity: 0,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        x: 0,
+        opacity: 1,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    outRight: {
+      initial: { x: 0, opacity: 1 },
+      animate: {
+        x: distance,
+        opacity: 0,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        x: 0,
+        opacity: 1,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+  };
+};

package/src/components/animate/variants/flip.js

@@ -0,0 +1,54 @@
+import { varTranEnter, varTranExit } from "./transition";
+
+export const varFlip = (props) => {
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    inX: {
+      initial: { rotateX: -180, opacity: 0 },
+      animate: {
+        rotateX: 0,
+        opacity: 1,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        rotateX: -180,
+        opacity: 0,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inY: {
+      initial: { rotateY: -180, opacity: 0 },
+      animate: {
+        rotateY: 0,
+        opacity: 1,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        rotateY: -180,
+        opacity: 0,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+
+    outX: {
+      initial: { rotateX: 0, opacity: 1 },
+      animate: {
+        rotateX: 70,
+        opacity: 0,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    outY: {
+      initial: { rotateY: 0, opacity: 1 },
+      animate: {
+        rotateY: 70,
+        opacity: 0,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+  };
+};

package/src/components/animate/variants/index.js

@@ -0,0 +1,12 @@
+export * from "./path";
+export * from "./fade";
+export * from "./zoom";
+export * from "./flip";
+export * from "./slide";
+export * from "./scale";
+export * from "./bounce";
+export * from "./rotate";
+export * from "./actions";
+export * from "./container";
+export * from "./transition";
+export * from "./background";

package/src/components/animate/variants/path.js

@@ -0,0 +1,12 @@
+export const TRANSITION = {
+  duration: 2,
+  ease: [0.43, 0.13, 0.23, 0.96],
+};
+
+export const varPath = {
+  animate: {
+    fillOpacity: [0, 0, 1],
+    pathLength: [1, 0.4, 0],
+    transition: TRANSITION,
+  },
+};

package/src/components/animate/variants/rotate.js

@@ -0,0 +1,33 @@
+import { varTranEnter, varTranExit } from "./transition";
+
+export const varRotate = (props) => {
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    in: {
+      initial: { opacity: 0, rotate: -360 },
+      animate: {
+        opacity: 1,
+        rotate: 0,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        opacity: 0,
+        rotate: -360,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+
+    out: {
+      initial: { opacity: 1, rotate: 0 },
+      animate: {
+        opacity: 0,
+        rotate: -360,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+  };
+};

package/src/components/animate/variants/scale.js

@@ -0,0 +1,54 @@
+import { varTranEnter, varTranExit } from "./transition";
+
+export const varScale = (props) => {
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    inX: {
+      initial: { scaleX: 0, opacity: 0 },
+      animate: {
+        scaleX: 1,
+        opacity: 1,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        scaleX: 0,
+        opacity: 0,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inY: {
+      initial: { scaleY: 0, opacity: 0 },
+      animate: {
+        scaleY: 1,
+        opacity: 1,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        scaleY: 0,
+        opacity: 0,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+
+    outX: {
+      initial: { scaleX: 1, opacity: 1 },
+      animate: {
+        scaleX: 0,
+        opacity: 0,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+    },
+    outY: {
+      initial: { scaleY: 1, opacity: 1 },
+      animate: {
+        scaleY: 0,
+        opacity: 0,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+    },
+  };
+};

package/src/components/animate/variants/slide.js

@@ -0,0 +1,65 @@
+import { varTranEnter, varTranExit } from "./transition";
+
+export const varSlide = (props) => {
+  const distance = props?.distance || 160;
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    inUp: {
+      initial: { y: distance },
+      animate: { y: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: distance, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    inDown: {
+      initial: { y: -distance },
+      animate: { y: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: -distance, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    inLeft: {
+      initial: { x: -distance },
+      animate: { x: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: -distance, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    inRight: {
+      initial: { x: distance },
+      animate: { x: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: distance, transition: varTranExit({ durationOut, easeOut }) },
+    },
+
+    outUp: {
+      initial: { y: 0 },
+      animate: {
+        y: -distance,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: { y: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outDown: {
+      initial: { y: 0 },
+      animate: {
+        y: distance,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: { y: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outLeft: {
+      initial: { x: 0 },
+      animate: {
+        x: -distance,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: { x: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outRight: {
+      initial: { x: 0 },
+      animate: {
+        x: distance,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: { x: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+  };
+};

package/src/components/animate/variants/transition.js

@@ -0,0 +1,20 @@
+export const varTranHover = (props) => {
+  const duration = props?.duration || 0.32;
+  const ease = props?.ease || [0.43, 0.13, 0.23, 0.96];
+
+  return { duration, ease };
+};
+
+export const varTranEnter = (props) => {
+  const duration = props?.durationIn || 0.64;
+  const ease = props?.easeIn || [0.43, 0.13, 0.23, 0.96];
+
+  return { duration, ease };
+};
+
+export const varTranExit = (props) => {
+  const duration = props?.durationOut || 0.48;
+  const ease = props?.easeOut || [0.43, 0.13, 0.23, 0.96];
+
+  return { duration, ease };
+};

package/src/components/animate/variants/zoom.js

@@ -0,0 +1,130 @@
+import { varTranEnter, varTranExit } from "./transition";
+
+export const varZoom = (props) => {
+  const distance = props?.distance || 720;
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    in: {
+      initial: { scale: 0, opacity: 0 },
+      animate: {
+        scale: 1,
+        opacity: 1,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        scale: 0,
+        opacity: 0,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inUp: {
+      initial: { scale: 0, opacity: 0, translateY: distance },
+      animate: {
+        scale: 1,
+        opacity: 1,
+        translateY: 0,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        scale: 0,
+        opacity: 0,
+        translateY: distance,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inDown: {
+      initial: { scale: 0, opacity: 0, translateY: -distance },
+      animate: {
+        scale: 1,
+        opacity: 1,
+        translateY: 0,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        scale: 0,
+        opacity: 0,
+        translateY: -distance,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inLeft: {
+      initial: { scale: 0, opacity: 0, translateX: -distance },
+      animate: {
+        scale: 1,
+        opacity: 1,
+        translateX: 0,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        scale: 0,
+        opacity: 0,
+        translateX: -distance,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inRight: {
+      initial: { scale: 0, opacity: 0, translateX: distance },
+      animate: {
+        scale: 1,
+        opacity: 1,
+        translateX: 0,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        scale: 0,
+        opacity: 0,
+        translateX: distance,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+
+    out: {
+      initial: { scale: 1, opacity: 1 },
+      animate: {
+        scale: 0,
+        opacity: 0,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+    },
+    outUp: {
+      initial: { scale: 1, opacity: 1 },
+      animate: {
+        scale: 0,
+        opacity: 0,
+        translateY: -distance,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+    },
+    outDown: {
+      initial: { scale: 1, opacity: 1 },
+      animate: {
+        scale: 0,
+        opacity: 0,
+        translateY: distance,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+    },
+    outLeft: {
+      initial: { scale: 1, opacity: 1 },
+      animate: {
+        scale: 0,
+        opacity: 0,
+        translateX: -distance,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+    },
+    outRight: {
+      initial: { scale: 1, opacity: 1 },
+      animate: {
+        scale: 0,
+        opacity: 0,
+        translateX: distance,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+    },
+  };
+};

package/src/components/chart/chart.js

@@ -0,0 +1,69 @@
+import ApexChart from "react-apexcharts";
+import { bgBlur } from "../../theme/css";
+import { memo } from "react";
+
+import { alpha, styled } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+const Chart = styled(ApexChart)(({ theme }) => ({
+  "& .apexcharts-canvas": {
+    // Tooltip
+    "& .apexcharts-tooltip": {
+      ...bgBlur({
+        color: theme.palette.background.default,
+      }),
+      color: theme.palette.text.primary,
+      boxShadow: theme.customShadows.dropdown,
+      borderRadius: theme.shape.borderRadius * 1.25,
+      "&.apexcharts-theme-light": {
+        borderColor: "transparent",
+        ...bgBlur({
+          color: theme.palette.background.default,
+        }),
+      },
+    },
+    "& .apexcharts-xaxistooltip": {
+      ...bgBlur({
+        color: theme.palette.background.default,
+      }),
+      borderColor: "transparent",
+      color: theme.palette.text.primary,
+      boxShadow: theme.customShadows.dropdown,
+      borderRadius: theme.shape.borderRadius * 1.25,
+      "&:before": {
+        borderBottomColor: alpha(theme.palette.grey[500], 0.24),
+      },
+      "&:after": {
+        borderBottomColor: alpha(theme.palette.background.default, 0.8),
+      },
+    },
+    "& .apexcharts-tooltip-title": {
+      textAlign: "center",
+      fontWeight: theme.typography.fontWeightBold,
+      backgroundColor: alpha(theme.palette.grey[500], 0.08),
+      color:
+        theme.palette.text[
+          theme.palette.mode === "light" ? "secondary" : "primary"
+        ],
+    },
+
+    // LEGEND
+    "& .apexcharts-legend": {
+      padding: 0,
+    },
+    "& .apexcharts-legend-series": {
+      display: "inline-flex !important",
+      alignItems: "center",
+    },
+    "& .apexcharts-legend-marker": {
+      marginRight: 8,
+    },
+    "& .apexcharts-legend-text": {
+      lineHeight: "18px",
+      textTransform: "capitalize",
+    },
+  },
+}));
+
+export default memo(Chart);