@canmingir/link 1.1.7 → 1.2.0

package/minimal/src/components/carousel/arrow-icons.jsx

@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types';
-
-import Iconify from '../iconify';
-
-// ----------------------------------------------------------------------
-
-export function LeftIcon({ icon = 'eva:arrow-ios-forward-fill', isRTL }) {
-  return (
-    <Iconify
-      icon={icon}
-      sx={{
-        transform: ' scaleX(-1)',
-        ...(isRTL && {
-          transform: ' scaleX(1)',
-        }),
-      }}
-    />
-  );
-}
-
-LeftIcon.propTypes = {
-  icon: PropTypes.string,
-  isRTL: PropTypes.bool,
-};
-
-export function RightIcon({ icon = 'eva:arrow-ios-forward-fill', isRTL }) {
-  return (
-    <Iconify
-      icon={icon}
-      sx={{
-        ...(isRTL && {
-          transform: ' scaleX(-1)',
-        }),
-      }}
-    />
-  );
-}
-
-RightIcon.propTypes = {
-  icon: PropTypes.string,
-  isRTL: PropTypes.bool,
-};

package/minimal/src/components/carousel/carousel-arrow-index.jsx

@@ -1,69 +0,0 @@
-import PropTypes from 'prop-types';
-
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import { styled, useTheme } from '@mui/material/styles';
-
-import { bgBlur } from 'src/theme/css';
-
-import { LeftIcon, RightIcon } from './arrow-icons';
-
-// ----------------------------------------------------------------------
-
-const StyledRoot = styled(Box)(({ theme }) => ({
-  ...bgBlur({
-    opacity: 0.48,
-    color: theme.palette.grey[900],
-  }),
-  zIndex: 9,
-  display: 'inline-flex',
-  alignItems: 'center',
-  position: 'absolute',
-  bottom: theme.spacing(2),
-  right: theme.spacing(2),
-  padding: theme.spacing(0.25),
-  color: theme.palette.common.white,
-  borderRadius: theme.shape.borderRadius,
-}));
-
-const StyledIconButton = styled(IconButton)({
-  width: 28,
-  height: 28,
-  padding: 0,
-  opacity: 0.48,
-  '&:hover': { opacity: 1 },
-});
-
-// ----------------------------------------------------------------------
-
-export default function CarouselArrowIndex({ index, total, onNext, onPrev, icon, sx, ...other }) {
-  const theme = useTheme();
-
-  const isRTL = theme.direction === 'rtl';
-
-  return (
-    <StyledRoot sx={sx} {...other}>
-      <StyledIconButton color="inherit" onClick={onPrev}>
-        <LeftIcon icon={icon} isRTL={isRTL} />
-      </StyledIconButton>
-
-      <Typography variant="subtitle2" component="span" sx={{ mx: 0.25 }}>
-        {index + 1}/{total}
-      </Typography>
-
-      <StyledIconButton color="inherit" onClick={onNext}>
-        <RightIcon icon={icon} isRTL={isRTL} />
-      </StyledIconButton>
-    </StyledRoot>
-  );
-}
-
-CarouselArrowIndex.propTypes = {
-  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-  index: PropTypes.number,
-  onNext: PropTypes.func,
-  onPrev: PropTypes.func,
-  sx: PropTypes.object,
-  total: PropTypes.number,
-};

package/minimal/src/components/carousel/carousel-arrows.jsx

@@ -1,127 +0,0 @@
-import PropTypes from 'prop-types';
-
-import Stack from '@mui/material/Stack';
-import IconButton from '@mui/material/IconButton';
-import { alpha, styled, useTheme } from '@mui/material/styles';
-//
-
-import { LeftIcon, RightIcon } from './arrow-icons';
-
-// ----------------------------------------------------------------------
-
-const StyledIconButton = styled(IconButton, {
-  shouldForwardProp: (prop) => prop !== 'filled' && prop !== 'hasChild' && prop !== 'shape',
-})(({ filled, shape, hasChild, theme }) => ({
-  color: 'inherit',
-  transition: theme.transitions.create('all', {
-    duration: theme.transitions.duration.shorter,
-  }),
-  ...(shape === 'rounded' && {
-    borderRadius: theme.shape.borderRadius * 1.5,
-  }),
-  ...(!filled && {
-    opacity: 0.48,
-    '&:hover': {
-      opacity: 1,
-    },
-  }),
-  ...(filled && {
-    color: alpha(theme.palette.common.white, 0.8),
-    backgroundColor: alpha(theme.palette.grey[900], 0.48),
-    '&:hover': {
-      color: theme.palette.common.white,
-      backgroundColor: theme.palette.grey[900],
-    },
-  }),
-  ...(hasChild && {
-    zIndex: 9,
-    top: '50%',
-    position: 'absolute',
-    marginTop: theme.spacing(-2.5),
-  }),
-}));
-
-// ----------------------------------------------------------------------
-
-export default function CarouselArrows({
-  shape = 'circular',
-  filled = false,
-  icon,
-  onNext,
-  onPrev,
-  children,
-  leftButtonProps,
-  rightButtonProps,
-  sx,
-  ...other
-}) {
-  const theme = useTheme();
-
-  const isRTL = theme.direction === 'rtl';
-
-  const hasChild = !!children;
-
-  if (hasChild) {
-    return (
-      <Stack sx={sx} {...other}>
-        {onNext && (
-          <StyledIconButton
-            filled={filled}
-            shape={shape}
-            hasChild={!!children}
-            onClick={onPrev}
-            {...leftButtonProps}
-            sx={{
-              left: 16,
-              ...leftButtonProps?.sx,
-            }}
-          >
-            <LeftIcon icon={icon} isRTL={isRTL} />
-          </StyledIconButton>
-        )}
-
-        {children}
-
-        {onPrev && (
-          <StyledIconButton
-            filled={filled}
-            shape={shape}
-            hasChild={!!children}
-            onClick={onNext}
-            {...rightButtonProps}
-            sx={{
-              right: 16,
-              ...rightButtonProps?.sx,
-            }}
-          >
-            <RightIcon icon={icon} isRTL={isRTL} />
-          </StyledIconButton>
-        )}
-      </Stack>
-    );
-  }
-
-  return (
-    <Stack direction="row" alignItems="center" display="inline-flex" sx={sx} {...other}>
-      <StyledIconButton filled={filled} shape={shape} onClick={onPrev} {...leftButtonProps}>
-        <LeftIcon icon={icon} isRTL={isRTL} />
-      </StyledIconButton>
-
-      <StyledIconButton filled={filled} shape={shape} onClick={onNext} {...rightButtonProps}>
-        <RightIcon icon={icon} isRTL={isRTL} />
-      </StyledIconButton>
-    </Stack>
-  );
-}
-
-CarouselArrows.propTypes = {
-  children: PropTypes.node,
-  filled: PropTypes.bool,
-  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-  leftButtonProps: PropTypes.object,
-  onNext: PropTypes.func,
-  onPrev: PropTypes.func,
-  rightButtonProps: PropTypes.object,
-  shape: PropTypes.oneOf(['circular', 'rounded']),
-  sx: PropTypes.object,
-};

package/minimal/src/components/carousel/carousel-dots.jsx

@@ -1,85 +0,0 @@
-/* eslint-disable react/jsx-no-useless-fragment */
-import PropTypes from 'prop-types';
-
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import { styled } from '@mui/material/styles';
-
-// ----------------------------------------------------------------------
-
-const StyledRoot = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'rounded',
-})(({ rounded, theme }) => ({
-  zIndex: 9,
-  margin: 0,
-  padding: 0,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: theme.palette.primary.main,
-  '& li': {
-    width: 18,
-    height: 18,
-    opacity: 0.32,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    cursor: 'pointer',
-    '&.slick-active': {
-      opacity: 1,
-      ...(rounded && {
-        '& span': {
-          width: 16,
-          borderRadius: 6,
-        },
-      }),
-    },
-  },
-}));
-
-const StyledDot = styled('span')(({ theme }) => ({
-  width: 8,
-  height: 8,
-  borderRadius: '50%',
-  transition: theme.transitions.create(['width'], {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.short,
-  }),
-}));
-
-// ----------------------------------------------------------------------
-
-export default function CarouselDots(props) {
-  const rounded = props?.rounded || false;
-
-  const sx = props?.sx;
-
-  return {
-    appendDots: (dots) => (
-      <>
-        <StyledRoot component="ul" rounded={rounded} sx={{ ...sx }} {...props}>
-          {dots}
-        </StyledRoot>
-      </>
-    ),
-    customPaging: () => (
-      <Stack
-        component="div"
-        alignItems="center"
-        justifyContent="center"
-        sx={{ width: 1, height: 1 }}
-      >
-        <StyledDot
-          sx={{
-            bgcolor: 'currentColor',
-          }}
-        />
-      </Stack>
-    ),
-  };
-}
-
-CarouselDots.propTypes = {
-  rounded: PropTypes.bool,
-  sx: PropTypes.object,
-};

package/minimal/src/components/carousel/index.js

@@ -1,9 +0,0 @@
-import Carousel from 'react-slick';
-
-export { default as useCarousel } from './use-carousel';
-export { default as CarouselDots } from './carousel-dots';
-export { default as CarouselArrows } from './carousel-arrows';
-
-export { default as CarouselArrowIndex } from './carousel-arrow-index';
-
-export default Carousel;

package/minimal/src/components/carousel/use-carousel.js

@@ -1,65 +0,0 @@
-import { useRef, useState, useCallback } from 'react';
-
-import { useTheme } from '@mui/material/styles';
-
-// ----------------------------------------------------------------------
-
-export default function useCarousel(props) {
-  const theme = useTheme();
-
-  const carouselRef = useRef(null);
-
-  const [currentIndex, setCurrentIndex] = useState(props?.initialSlide || 0);
-
-  const [nav, setNav] = useState(undefined);
-
-  const rtl = theme.direction === 'rtl';
-
-  const carouselSettings = {
-    arrows: false,
-    dots: !!props?.customPaging,
-    rtl,
-    beforeChange: (current, next) => setCurrentIndex(next),
-    ...props,
-    fade: !!(props?.fade && !rtl),
-  };
-
-  const onSetNav = useCallback(() => {
-    if (carouselRef.current) {
-      setNav(carouselRef.current);
-    }
-  }, []);
-
-  const onPrev = useCallback(() => {
-    if (carouselRef.current) {
-      carouselRef.current.slickPrev();
-    }
-  }, []);
-
-  const onNext = useCallback(() => {
-    if (carouselRef.current) {
-      carouselRef.current.slickNext();
-    }
-  }, []);
-
-  const onTogo = useCallback((index) => {
-    if (carouselRef.current) {
-      carouselRef.current.slickGoTo(index);
-    }
-  }, []);
-
-  return {
-    nav,
-    carouselRef,
-    currentIndex,
-    carouselSettings,
-    //
-    onPrev,
-    onNext,
-    onTogo,
-    onSetNav,
-    //
-    setNav,
-    setCurrentIndex,
-  };
-}

package/minimal/src/components/chart/chart.js

@@ -1,67 +0,0 @@
-import { memo } from 'react';
-import ApexChart from 'react-apexcharts';
-
-import { alpha, styled } from '@mui/material/styles';
-
-import { bgBlur } from 'src/theme/css';
-
-// ----------------------------------------------------------------------
-
-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);

package/minimal/src/components/chart/index.js

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

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

@@ -1,216 +0,0 @@
-import merge from 'lodash/merge';
-
-import { alpha, useTheme } from '@mui/material/styles';
-
-import { useResponsive } from 'src/hooks/use-responsive';
-
-// ----------------------------------------------------------------------
-
-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);
-}