@canmingir/link 1.1.7 → 1.2.0

package/minimal/src/sections/_examples/mui/menu-view.jsx

@@ -1,193 +0,0 @@
-import { useState, useCallback } from 'react';
-
-import Box from '@mui/material/Box';
-import Menu from '@mui/material/Menu';
-import List from '@mui/material/List';
-import Button from '@mui/material/Button';
-import MenuItem from '@mui/material/MenuItem';
-import Container from '@mui/material/Container';
-import IconButton from '@mui/material/IconButton';
-import ListItemText from '@mui/material/ListItemText';
-import ListItemButton from '@mui/material/ListItemButton';
-
-import { paths } from 'src/routes/paths';
-
-import Iconify from 'src/components/iconify';
-import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
-
-import ComponentBlock from '../component-block';
-
-// ----------------------------------------------------------------------
-
-const OPTIONS = [
-  'Show some love to Material-UI',
-  'Show all notification content',
-  'Hide sensitive notification content',
-  'Hide all notification content',
-];
-
-const OPTIONS_MAXHEIGHT = [
-  'None',
-  'Atria',
-  'Callisto',
-  'Dione',
-  'Ganymede',
-  'Hangouts Call',
-  'Luna',
-  'Oberon',
-  'Phobos',
-  'Pyxis',
-  'Sedna',
-  'Titania',
-  'Triton',
-  'Umbriel',
-];
-
-// ----------------------------------------------------------------------
-
-export default function MenuView() {
-  const [selectedIndex, setSelectedIndex] = useState(1);
-
-  const [isOpen, setOpen] = useState(null);
-
-  const [isOpenList, setOpenList] = useState(null);
-
-  const [isOpenMaxHeight, setOpenMaxHeight] = useState(null);
-
-  const handleClick = useCallback((event) => {
-    setOpenMaxHeight(event.currentTarget);
-  }, []);
-
-  const handleClickListItem = useCallback((event) => {
-    setOpenList(event.currentTarget);
-  }, []);
-
-  const handleMenuItemClick = useCallback((event, index) => {
-    setSelectedIndex(index);
-    setOpenList(null);
-  }, []);
-
-  const handleOpen = useCallback((event) => {
-    setOpen(event.currentTarget);
-  }, []);
-
-  const handleClose = useCallback(() => {
-    setOpen(null);
-  }, []);
-
-  const handleMaxHeightClose = useCallback(() => {
-    setOpenMaxHeight(null);
-  }, []);
-
-  return (
-    <>
-      <Box
-        sx={{
-          py: 5,
-          bgcolor: (theme) => (theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'),
-        }}
-      >
-        <Container>
-          <CustomBreadcrumbs
-            heading="Menu"
-            links={[
-              {
-                name: 'Components',
-                href: paths.components,
-              },
-              { name: 'Menu' },
-            ]}
-            moreLink={['https://mui.com/components/menus']}
-          />
-        </Container>
-      </Box>
-
-      <Container sx={{ my: 10 }}>
-        <Box
-          gap={3}
-          display="grid"
-          gridTemplateColumns={{
-            xs: 'repeat(1, 1fr)',
-            md: 'repeat(3, 1fr)',
-          }}
-        >
-          <ComponentBlock title="Simple">
-            <Button variant="outlined" onClick={handleOpen}>
-              Open Menu
-            </Button>
-            <Menu id="simple-menu" anchorEl={isOpen} onClose={handleClose} open={Boolean(isOpen)}>
-              {['Profile', 'My account', 'Logout'].map((option) => (
-                <MenuItem key={option} selected={option === 'Profile'} onClick={handleClose}>
-                  {option}
-                </MenuItem>
-              ))}
-            </Menu>
-          </ComponentBlock>
-
-          <ComponentBlock title="Selected">
-            <List component="nav" aria-label="Device settings">
-              <ListItemButton
-                aria-haspopup="true"
-                aria-controls="lock-menu"
-                aria-label="when device is locked"
-                onClick={handleClickListItem}
-              >
-                <ListItemText primary="When device is locked" secondary={OPTIONS[selectedIndex]} />
-              </ListItemButton>
-            </List>
-
-            <Menu
-              id="lock-menu"
-              anchorEl={isOpenList}
-              onClose={handleClose}
-              open={Boolean(isOpenList)}
-            >
-              {OPTIONS.map((option, index) => (
-                <MenuItem
-                  key={option}
-                  disabled={index === 0}
-                  selected={index === selectedIndex}
-                  onClick={(event) => handleMenuItemClick(event, index)}
-                >
-                  {option}
-                </MenuItem>
-              ))}
-            </Menu>
-          </ComponentBlock>
-
-          <ComponentBlock title="Max height">
-            <IconButton
-              aria-label="more"
-              aria-controls="long-menu"
-              aria-haspopup="true"
-              onClick={handleClick}
-            >
-              <Iconify icon="eva:more-vertical-fill" />
-            </IconButton>
-
-            <Menu
-              id="long-menu"
-              anchorEl={isOpenMaxHeight}
-              onClose={handleMaxHeightClose}
-              open={Boolean(isOpenMaxHeight)}
-              slotProps={{
-                paper: {
-                  sx: {
-                    width: '20ch',
-                    maxHeight: 48 * 4.5,
-                  },
-                },
-              }}
-            >
-              {OPTIONS_MAXHEIGHT.map((option) => (
-                <MenuItem key={option} selected={option === 'Pyxis'} onClick={handleMaxHeightClose}>
-                  {option}
-                </MenuItem>
-              ))}
-            </Menu>
-          </ComponentBlock>
-        </Box>
-      </Container>
-    </>
-  );
-}

package/minimal/src/sections/_examples/mui/pagination-view.jsx

@@ -1,126 +0,0 @@
-import { useState, useCallback } from 'react';
-
-import Box from '@mui/material/Box';
-import Masonry from '@mui/lab/Masonry';
-import Container from '@mui/material/Container';
-import Pagination from '@mui/material/Pagination';
-import TablePagination from '@mui/material/TablePagination';
-
-import { paths } from 'src/routes/paths';
-
-import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
-
-import ComponentBlock from '../component-block';
-
-// ----------------------------------------------------------------------
-
-const COLORS = ['standard', 'primary', 'secondary', 'info', 'success', 'warning', 'error'];
-
-const SIZES = ['small', 'medium', 'large'];
-
-// ----------------------------------------------------------------------
-
-export default function PaginationView() {
-  const [page, setPage] = useState(2);
-
-  const [rowsPerPage, setRowsPerPage] = useState(10);
-
-  const handleChangePage = useCallback((event, newPage) => {
-    setPage(newPage);
-  }, []);
-
-  const handleChangeRowsPerPage = useCallback((event) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0);
-  }, []);
-
-  return (
-    <>
-      <Box
-        sx={{
-          py: 5,
-          bgcolor: (theme) => (theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'),
-        }}
-      >
-        <Container>
-          <CustomBreadcrumbs
-            heading="Pagination"
-            links={[
-              {
-                name: 'Components',
-                href: paths.components,
-              },
-              { name: 'Pagination' },
-            ]}
-            moreLink={['https://mui.com/components/pagination']}
-          />
-        </Container>
-      </Box>
-
-      <Container sx={{ my: 10 }}>
-        <Masonry columns={{ xs: 1, md: 2 }} spacing={3}>
-          <ComponentBlock title="Circular">
-            <Pagination shape="circular" count={10} variant="text" />
-            <Pagination shape="circular" count={10} variant="text" disabled />
-            <Pagination shape="circular" count={10} variant="outlined" />
-            <Pagination shape="circular" count={10} variant="outlined" disabled />
-            <Pagination shape="circular" count={10} variant="soft" />
-            <Pagination shape="circular" count={10} variant="soft" disabled />
-          </ComponentBlock>
-
-          <ComponentBlock title="Rounded">
-            <Pagination shape="rounded" count={10} variant="text" />
-            <Pagination shape="rounded" count={10} variant="text" disabled />
-            <Pagination shape="rounded" count={10} variant="outlined" />
-            <Pagination shape="rounded" count={10} variant="outlined" disabled />
-            <Pagination shape="rounded" count={10} variant="soft" />
-            <Pagination shape="rounded" count={10} variant="soft" disabled />
-          </ComponentBlock>
-
-          <ComponentBlock title="Colors">
-            {COLORS.map((color) => (
-              <Pagination key={color} color={color} count={10} variant="text" />
-            ))}
-
-            {COLORS.map((color) => (
-              <Pagination key={color} color={color} count={10} variant="outlined" />
-            ))}
-
-            {COLORS.map((color) => (
-              <Pagination key={color} color={color} count={10} variant="soft" />
-            ))}
-          </ComponentBlock>
-
-          <ComponentBlock title="Sizes">
-            {SIZES.map((size) => (
-              <Pagination count={10} key={size} size={size} />
-            ))}
-          </ComponentBlock>
-
-          <ComponentBlock title="Buttons">
-            <Pagination count={10} showFirstButton showLastButton />
-            <Pagination count={10} hidePrevButton hideNextButton />
-          </ComponentBlock>
-
-          <ComponentBlock title="Ranges">
-            <Pagination count={11} defaultPage={6} siblingCount={0} />
-            <Pagination count={11} defaultPage={6} />
-            <Pagination count={11} defaultPage={6} siblingCount={0} boundaryCount={2} />
-            <Pagination count={11} defaultPage={6} boundaryCount={2} />
-          </ComponentBlock>
-
-          <ComponentBlock title="Table">
-            <TablePagination
-              component="div"
-              count={100}
-              page={page}
-              onPageChange={handleChangePage}
-              rowsPerPage={rowsPerPage}
-              onRowsPerPageChange={handleChangeRowsPerPage}
-            />
-          </ComponentBlock>
-        </Masonry>
-      </Container>
-    </>
-  );
-}

package/minimal/src/sections/_examples/mui/picker-view/index.jsx

@@ -1,76 +0,0 @@
-import { useState, useCallback } from 'react';
-
-import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
-import Tabs from '@mui/material/Tabs';
-import Container from '@mui/material/Container';
-
-import { paths } from 'src/routes/paths';
-
-import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
-
-import PickerDate from './picker-date';
-import PickerTime from './picker-time';
-import PickerDateTime from './picker-date-time';
-import PickerDateRange from './picker-date-range';
-
-// ----------------------------------------------------------------------
-
-const TABS = [
-  { value: 'date', label: 'Date', component: <PickerDate /> },
-  { value: 'datetime', label: 'DateTime', component: <PickerDateTime /> },
-  { value: 'time', label: 'Time', component: <PickerTime /> },
-  { value: 'range', label: 'Range', component: <PickerDateRange /> },
-];
-
-// ----------------------------------------------------------------------
-
-export default function PickerView() {
-  const [currentTab, setCurrentTab] = useState('date');
-
-  const handleChangeTab = useCallback((event, newValue) => {
-    setCurrentTab(newValue);
-  }, []);
-
-  return (
-    <>
-      <Box
-        sx={{
-          py: 5,
-          bgcolor: (theme) => (theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'),
-        }}
-      >
-        <Container>
-          <CustomBreadcrumbs
-            heading="Date / Time pickers"
-            links={[
-              { name: 'Components', href: paths.components },
-              { name: 'Date / Time pickers' },
-            ]}
-            moreLink={[
-              'https://mui.com/components/pickers',
-              'https://mui.com/x/react-date-pickers/getting-started/',
-            ]}
-          />
-        </Container>
-      </Box>
-
-      <Container sx={{ my: 10 }}>
-        <Tabs value={currentTab} onChange={handleChangeTab}>
-          {TABS.map((tab) => (
-            <Tab key={tab.value} value={tab.value} label={tab.label} />
-          ))}
-        </Tabs>
-
-        {TABS.map(
-          (tab) =>
-            tab.value === currentTab && (
-              <Box key={tab.value} sx={{ mt: 5 }}>
-                {tab.component}
-              </Box>
-            )
-        )}
-      </Container>
-    </>
-  );
-}

package/minimal/src/sections/_examples/mui/picker-view/picker-date-range.jsx

@@ -1,91 +0,0 @@
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
-
-import { fDate } from 'src/utils/format-time';
-
-import CustomDateRangePicker, { useDateRangePicker } from 'src/components/custom-date-range-picker';
-
-import ComponentBlock from '../../component-block';
-
-// ----------------------------------------------------------------------
-
-export default function PickerDateRange() {
-  const rangeInputPicker = useDateRangePicker(new Date(), new Date());
-
-  const rangeCalendarPicker = useDateRangePicker(new Date(), null);
-
-  return (
-    <>
-      <Stack sx={{ typography: 'body2', mb: 3, color: 'text.secondary' }}>
-        <div>This is the custom component from minimal.</div>
-        <div>You can use more advanced components by MUI.</div>
-
-        <Link href="https://mui.com/x/react-date-pickers/date-range-picker/">
-          https://mui.com/x/react-date-pickers/date-range-picker/{' '}
-        </Link>
-      </Stack>
-
-      <Box
-        gap={3}
-        display="grid"
-        gridTemplateColumns={{
-          xs: 'repeat(1, 1fr)',
-          md: 'repeat(2, 1fr)',
-        }}
-      >
-        <ComponentBlock title="Input">
-          <Button variant="contained" onClick={rangeInputPicker.onOpen}>
-            Click me!
-          </Button>
-
-          <Stack sx={{ typography: 'body2', mt: 3 }}>
-            <div>
-              <strong>Start:</strong> {fDate(rangeInputPicker.startDate)}
-            </div>
-            <div>
-              <strong>End:</strong> {fDate(rangeInputPicker.endDate)}
-            </div>
-          </Stack>
-
-          <CustomDateRangePicker
-            open={rangeInputPicker.open}
-            startDate={rangeInputPicker.startDate}
-            endDate={rangeInputPicker.endDate}
-            onChangeStartDate={rangeInputPicker.onChangeStartDate}
-            onChangeEndDate={rangeInputPicker.onChangeEndDate}
-            onClose={rangeInputPicker.onClose}
-            error={rangeInputPicker.error}
-          />
-        </ComponentBlock>
-
-        <ComponentBlock title="Calendar">
-          <Button variant="contained" onClick={rangeCalendarPicker.onOpen}>
-            Click me!
-          </Button>
-
-          <Stack sx={{ typography: 'body2', mt: 3 }}>
-            <div>
-              <strong>Start:</strong> {fDate(rangeCalendarPicker.startDate)}
-            </div>
-            <div>
-              <strong>End:</strong> {fDate(rangeCalendarPicker.endDate)}
-            </div>
-          </Stack>
-
-          <CustomDateRangePicker
-            variant="calendar"
-            open={rangeCalendarPicker.open}
-            startDate={rangeCalendarPicker.startDate}
-            endDate={rangeCalendarPicker.endDate}
-            onChangeStartDate={rangeCalendarPicker.onChangeStartDate}
-            onChangeEndDate={rangeCalendarPicker.onChangeEndDate}
-            onClose={rangeCalendarPicker.onClose}
-            error={rangeCalendarPicker.error}
-          />
-        </ComponentBlock>
-      </Box>
-    </>
-  );
-}

package/minimal/src/sections/_examples/mui/picker-view/picker-date-time.jsx

@@ -1,74 +0,0 @@
-import { useState } from 'react';
-
-import Stack from '@mui/material/Stack';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
-import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker';
-
-import ComponentBlock from '../../component-block';
-
-// ----------------------------------------------------------------------
-
-export default function PickerDateTime() {
-  const [value, setValue] = useState(new Date());
-
-  const [valueResponsive, setValueResponsive] = useState(new Date('2018-01-01T00:00:00.000Z'));
-
-  return (
-    <Stack spacing={3} direction={{ xs: 'column', md: 'row' }}>
-      <ComponentBlock title="Basic">
-        <DateTimePicker
-          label="DateTimePicker"
-          value={value}
-          onChange={setValue}
-          slotProps={{
-            textField: {
-              fullWidth: true,
-            },
-          }}
-        />
-      </ComponentBlock>
-
-      <ComponentBlock title="Responsiveness">
-        <MobileDateTimePicker
-          value={valueResponsive}
-          onChange={(newValue) => {
-            setValueResponsive(newValue);
-          }}
-          slotProps={{
-            textField: {
-              fullWidth: true,
-              margin: 'normal',
-            },
-          }}
-        />
-
-        <DesktopDateTimePicker
-          value={valueResponsive}
-          onChange={(newValue) => {
-            setValueResponsive(newValue);
-          }}
-          slotProps={{
-            textField: {
-              fullWidth: true,
-              margin: 'normal',
-            },
-          }}
-        />
-
-        <DateTimePicker
-          value={valueResponsive}
-          onChange={(newValue) => {
-            setValueResponsive(newValue);
-          }}
-          slotProps={{
-            textField: {
-              fullWidth: true,
-              margin: 'normal',
-            },
-          }}
-        />
-      </ComponentBlock>
-    </Stack>
-  );
-}

package/minimal/src/sections/_examples/mui/picker-view/picker-date.jsx

@@ -1,140 +0,0 @@
-import { useState } from 'react';
-import isWeekend from 'date-fns/isWeekend';
-
-import Masonry from '@mui/lab/Masonry';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
-import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
-import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
-
-import ComponentBlock from '../../component-block';
-
-// ----------------------------------------------------------------------
-
-export default function PickerDate() {
-  const [value, setValue] = useState(new Date());
-
-  return (
-    <Masonry columns={{ xs: 1, md: 2 }} spacing={3}>
-      <ComponentBlock title="Basic">
-        <DesktopDatePicker
-          label="For desktop"
-          value={value}
-          minDate={new Date('2017-01-01')}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          slotProps={{
-            textField: {
-              fullWidth: true,
-              margin: 'normal',
-            },
-          }}
-        />
-
-        <MobileDatePicker
-          orientation="portrait"
-          label="For mobile"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          slotProps={{
-            textField: {
-              fullWidth: true,
-              margin: 'normal',
-            },
-          }}
-        />
-      </ComponentBlock>
-
-      <ComponentBlock title="Static mode">
-        <StaticDatePicker
-          orientation="landscape"
-          openTo="day"
-          value={value}
-          shouldDisableDate={isWeekend}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-        />
-      </ComponentBlock>
-
-      <ComponentBlock title="Views playground">
-        <DatePicker
-          views={['year']}
-          label="Year only"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          slotProps={{
-            textField: {
-              fullWidth: true,
-              margin: 'normal',
-            },
-          }}
-        />
-        <DatePicker
-          views={['year', 'month']}
-          label="Year and Month"
-          minDate={new Date('2012-03-01')}
-          maxDate={new Date('2023-06-01')}
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          slotProps={{
-            textField: {
-              fullWidth: true,
-              margin: 'normal',
-            },
-          }}
-        />
-        <DatePicker
-          openTo="year"
-          views={['year', 'month', 'day']}
-          label="Year, month and date"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          slotProps={{
-            textField: {
-              fullWidth: true,
-              margin: 'normal',
-            },
-          }}
-        />
-        <DatePicker
-          views={['day', 'month', 'year']}
-          label="Invert the order of views"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          slotProps={{
-            textField: {
-              fullWidth: true,
-              margin: 'normal',
-            },
-          }}
-        />
-        <DatePicker
-          views={['day']}
-          label="Just date"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          slotProps={{
-            textField: {
-              fullWidth: true,
-              margin: 'normal',
-            },
-          }}
-        />
-      </ComponentBlock>
-    </Masonry>
-  );
-}