@canmingir/link 1.1.7 → 1.2.0

package/minimal/src/sections/_examples/extra/copy-to-clipboard-view.jsx

@@ -1,115 +0,0 @@
-import { useState, useCallback } from 'react';
-
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
-import Container from '@mui/material/Container';
-import TextField from '@mui/material/TextField';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import InputAdornment from '@mui/material/InputAdornment';
-
-import { paths } from 'src/routes/paths';
-
-import { useDoubleClick } from 'src/hooks/use-double-click';
-import { useCopyToClipboard } from 'src/hooks/use-copy-to-clipboard';
-
-import Iconify from 'src/components/iconify';
-import { useSnackbar } from 'src/components/snackbar';
-import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
-
-// ----------------------------------------------------------------------
-
-export default function CopyToClipboardView() {
-  const { enqueueSnackbar } = useSnackbar();
-
-  const { copy } = useCopyToClipboard();
-
-  const [value, setValue] = useState('https://www.npmjs.com/package/');
-
-  const textOnClick = `Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
-  Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat
-  dolor lectus quis orci. Cras non dolor. Praesent egestas neque eu enim. Ut varius
-  tincidunt libero. Fusce fermentum odio nec arcu. Etiam rhoncus. Nulla sit amet est.
-  Donec posuere vulputate arcu. Vestibulum ullamcorper mauris at ligula. Praesent ut
-  ligula non mi varius sagittis. Pellentesque posuere. Praesent adipiscing. Sed
-  libero. Duis leo. Nulla porta dolor.`;
-
-  const onCopy = useCallback(
-    (text) => {
-      if (text) {
-        enqueueSnackbar('Copied!');
-        copy(text);
-      }
-    },
-    [copy, enqueueSnackbar]
-  );
-
-  const handleClick = useDoubleClick({
-    doubleClick: () => onCopy(textOnClick),
-  });
-
-  const handleChange = useCallback((event) => {
-    setValue(event.target.value);
-  }, []);
-
-  return (
-    <>
-      <Box
-        sx={{
-          py: 5,
-          bgcolor: (theme) => (theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'),
-        }}
-      >
-        <Container>
-          <CustomBreadcrumbs
-            heading="Copy To Clipboard"
-            links={[{ name: 'Components', href: paths.components }, { name: 'Copy To Clipboard' }]}
-          />
-        </Container>
-      </Box>
-
-      <Container sx={{ my: 10 }}>
-        <Card sx={{ p: 5 }}>
-          <Box
-            display="grid"
-            gridTemplateColumns={{ xs: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
-            gap={5}
-          >
-            <Stack spacing={2}>
-              <Typography variant="overline" sx={{ color: 'text.secondary' }}>
-                on Change
-              </Typography>
-
-              <TextField
-                fullWidth
-                value={value}
-                onChange={handleChange}
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <Tooltip title="Copy">
-                        <IconButton onClick={() => onCopy(value)}>
-                          <Iconify icon="eva:copy-fill" width={24} />
-                        </IconButton>
-                      </Tooltip>
-                    </InputAdornment>
-                  ),
-                }}
-              />
-            </Stack>
-
-            <Stack spacing={2}>
-              <Typography variant="overline" sx={{ color: 'text.secondary' }}>
-                on Double Click
-              </Typography>
-
-              <Typography onClick={handleClick}>{textOnClick}</Typography>
-            </Stack>
-          </Box>
-        </Card>
-      </Container>
-    </>
-  );
-}

package/minimal/src/sections/_examples/extra/editor-view.jsx

@@ -1,95 +0,0 @@
-import { useState } from 'react';
-
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import Stack from '@mui/material/Stack';
-import Divider from '@mui/material/Divider';
-import Container from '@mui/material/Container';
-import Grid from '@mui/material/Unstable_Grid2';
-import CardHeader from '@mui/material/CardHeader';
-import Typography from '@mui/material/Typography';
-import CardContent from '@mui/material/CardContent';
-
-import { paths } from 'src/routes/paths';
-
-import Editor from 'src/components/editor';
-import Markdown from 'src/components/markdown';
-import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
-
-// ----------------------------------------------------------------------
-
-export default function EditorView() {
-  const [quillSimple, setQuillSimple] = useState('');
-
-  const [quillFull, setQuillFull] = useState('');
-
-  return (
-    <>
-      <Box
-        sx={{
-          py: 5,
-          bgcolor: (theme) => (theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'),
-        }}
-      >
-        <Container>
-          <CustomBreadcrumbs
-            heading="Editor"
-            links={[
-              {
-                name: 'Components',
-                href: paths.components,
-              },
-              { name: 'Editor' },
-            ]}
-            moreLink={['https://github.com/zenoamaro/react-quill']}
-          />
-        </Container>
-      </Box>
-
-      <Container sx={{ my: 10 }}>
-        <Grid container spacing={3}>
-          <Grid xs={12} md={8}>
-            <Card sx={{ mb: 3 }}>
-              <CardHeader title="Editor Simple" />
-              <CardContent>
-                <Editor
-                  simple
-                  id="simple-editor"
-                  value={quillSimple}
-                  onChange={(value) => setQuillSimple(value)}
-                />
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader title="Editor Full" />
-              <CardContent>
-                <Editor
-                  id="full-editor"
-                  value={quillFull}
-                  onChange={(value) => setQuillFull(value)}
-                />
-              </CardContent>
-            </Card>
-          </Grid>
-
-          <Grid xs={12} md={4}>
-            <Stack sx={{ p: 3, borderRadius: 2, bgcolor: 'background.neutral' }}>
-              <Typography variant="h6" sx={{ mb: 2 }}>
-                Preview Plain Text
-              </Typography>
-              <Markdown children={quillFull} />
-
-              <Divider sx={{ my: 5 }} />
-
-              <Typography variant="h6" sx={{ mb: 2 }}>
-                Preview Html
-              </Typography>
-              <Typography>{quillFull}</Typography>
-            </Stack>
-          </Grid>
-        </Grid>
-      </Container>
-    </>
-  );
-}

package/minimal/src/sections/_examples/extra/form-validation-view/index.jsx

@@ -1,59 +0,0 @@
-import { useState } from 'react';
-
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Switch from '@mui/material/Switch';
-import Divider from '@mui/material/Divider';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-import { paths } from 'src/routes/paths';
-
-import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
-
-import ReactHookForm from './react-hook-form';
-
-// ----------------------------------------------------------------------
-
-export default function FormValidationView() {
-  const [debug, setDebug] = useState(true);
-
-  const handleChangeDebug = (event) => {
-    setDebug(event.target.checked);
-  };
-
-  return (
-    <>
-      <Box
-        sx={{
-          py: 5,
-          bgcolor: (theme) => (theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'),
-        }}
-      >
-        <Container>
-          <CustomBreadcrumbs
-            heading="Form Validation"
-            links={[{ name: 'Components', href: paths.components }, { name: 'Form Validation' }]}
-            moreLink={['https://react-hook-form.com/', 'https://github.com/jquense/yup']}
-          />
-        </Container>
-      </Box>
-
-      <Container sx={{ my: 10 }}>
-        <Stack direction="row" alignItems="center" justifyContent="space-between">
-          <Typography variant="h4"> React Hook Form + Yup </Typography>
-          <FormControlLabel
-            control={<Switch checked={debug} onChange={handleChangeDebug} />}
-            label="Show Debug"
-            labelPlacement="start"
-          />
-        </Stack>
-
-        <Divider sx={{ my: 5 }} />
-
-        <ReactHookForm debug={debug} />
-      </Container>
-    </>
-  );
-}

package/minimal/src/sections/_examples/extra/form-validation-view/react-hook-form.jsx

@@ -1,405 +0,0 @@
-import PropTypes from 'prop-types';
-import { useCallback } from 'react';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { useForm, Controller } from 'react-hook-form';
-
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Divider from '@mui/material/Divider';
-import MenuItem from '@mui/material/MenuItem';
-import Backdrop from '@mui/material/Backdrop';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import LoadingButton from '@mui/lab/LoadingButton';
-import InputAdornment from '@mui/material/InputAdornment';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import CircularProgress from '@mui/material/CircularProgress';
-
-import { useBoolean } from 'src/hooks/use-boolean';
-
-import Iconify from 'src/components/iconify';
-import FormProvider, {
-  RHFEditor,
-  RHFSelect,
-  RHFUpload,
-  RHFSwitch,
-  RHFSlider,
-  RHFCheckbox,
-  RHFTextField,
-  RHFRadioGroup,
-  RHFMultiSelect,
-  RHFAutocomplete,
-  RHFMultiCheckbox,
-} from 'src/components/hook-form';
-
-import { FormSchema } from './schema';
-import ValuesPreview from './values-preview';
-
-// ----------------------------------------------------------------------
-
-const OPTIONS = [
-  { value: 'option 1', label: 'Option 1' },
-  { value: 'option 2', label: 'Option 2' },
-  { value: 'option 3', label: 'Option 3' },
-  { value: 'option 4', label: 'Option 4' },
-  { value: 'option 5', label: 'Option 5' },
-  { value: 'option 6', label: 'Option 6' },
-  { value: 'option 7', label: 'Option 7' },
-  { value: 'option 8', label: 'Option 8' },
-];
-
-export const defaultValues = {
-  age: 0,
-  email: '',
-  fullName: '',
-  //
-  editor: '',
-  switch: false,
-  radioGroup: '',
-  autocomplete: null,
-  //
-  password: '',
-  confirmPassword: '',
-  //
-  startDate: null,
-  endDate: null,
-  //
-  singleUpload: null,
-  multiUpload: [],
-  //
-  singleSelect: '',
-  multiSelect: [],
-  //
-  checkbox: false,
-  multiCheckbox: [],
-  //
-  slider: 8,
-  sliderRange: [15, 80],
-};
-
-export default function ReactHookForm({ debug }) {
-  const password = useBoolean();
-
-  const methods = useForm({
-    resolver: yupResolver(FormSchema),
-    defaultValues,
-  });
-
-  const {
-    watch,
-    reset,
-    control,
-    setValue,
-    handleSubmit,
-    formState: { isSubmitting },
-  } = methods;
-
-  const values = watch();
-
-  const onSubmit = handleSubmit(async (data) => {
-    try {
-      await new Promise((resolve) => setTimeout(resolve, 3000));
-      reset();
-      console.info('DATA', data);
-    } catch (error) {
-      console.error(error);
-    }
-  });
-
-  const handleDropSingleFile = useCallback(
-    (acceptedFiles) => {
-      const file = acceptedFiles[0];
-
-      const newFile = Object.assign(file, {
-        preview: URL.createObjectURL(file),
-      });
-
-      if (newFile) {
-        setValue('singleUpload', newFile, { shouldValidate: true });
-      }
-    },
-    [setValue]
-  );
-
-  const handleDropMultiFile = useCallback(
-    (acceptedFiles) => {
-      const files = values.multiUpload || [];
-
-      const newFiles = acceptedFiles.map((file) =>
-        Object.assign(file, {
-          preview: URL.createObjectURL(file),
-        })
-      );
-
-      setValue('multiUpload', [...files, ...newFiles], {
-        shouldValidate: true,
-      });
-    },
-    [setValue, values.multiUpload]
-  );
-
-  return (
-    <>
-      {isSubmitting && (
-        <Backdrop open sx={{ zIndex: (theme) => theme.zIndex.modal + 1 }}>
-          <CircularProgress color="primary" />
-        </Backdrop>
-      )}
-
-      <FormProvider methods={methods} onSubmit={onSubmit}>
-        <Box
-          gap={5}
-          display="grid"
-          gridTemplateColumns={{
-            xs: 'repeat(1, 1fr)',
-            sm: 'repeat(2, 1fr)',
-          }}
-        >
-          <Stack spacing={2}>
-            <Block>
-              <RHFTextField name="fullName" label="Full Name" />
-            </Block>
-
-            <Block>
-              <RHFTextField name="email" label="Email address" />
-            </Block>
-
-            <Block>
-              <RHFTextField name="age" label="Age" type="number" />
-            </Block>
-
-            <Stack spacing={2} direction={{ xs: 'column', sm: 'row' }}>
-              <Controller
-                name="startDate"
-                control={control}
-                render={({ field, fieldState: { error } }) => (
-                  <DatePicker
-                    {...field}
-                    label="Start date"
-                    format="dd/MM/yyyy"
-                    slotProps={{
-                      textField: {
-                        fullWidth: true,
-                        error: !!error,
-                        helperText: error?.message,
-                      },
-                    }}
-                  />
-                )}
-              />
-
-              <Controller
-                name="endDate"
-                control={control}
-                render={({ field, fieldState: { error } }) => (
-                  <DatePicker
-                    {...field}
-                    label="End date"
-                    format="dd/MM/yyyy"
-                    slotProps={{
-                      textField: {
-                        fullWidth: true,
-                        error: !!error,
-                        helperText: error?.message,
-                      },
-                    }}
-                  />
-                )}
-              />
-            </Stack>
-
-            <Stack spacing={2} direction={{ xs: 'column', sm: 'row' }}>
-              <Block>
-                <RHFTextField
-                  name="password"
-                  label="Password"
-                  type={password.value ? 'text' : 'password'}
-                  InputProps={{
-                    endAdornment: (
-                      <InputAdornment position="end">
-                        <IconButton onClick={password.onToggle} edge="end">
-                          <Iconify
-                            icon={password.value ? 'solar:eye-bold' : 'solar:eye-closed-bold'}
-                          />
-                        </IconButton>
-                      </InputAdornment>
-                    ),
-                  }}
-                />
-              </Block>
-
-              <Block>
-                <RHFTextField
-                  name="confirmPassword"
-                  label="Confirm Password"
-                  type={password.value ? 'text' : 'password'}
-                  InputProps={{
-                    endAdornment: (
-                      <InputAdornment position="end">
-                        <IconButton onClick={password.onToggle} edge="end">
-                          <Iconify
-                            icon={password.value ? 'solar:eye-bold' : 'solar:eye-closed-bold'}
-                          />
-                        </IconButton>
-                      </InputAdornment>
-                    ),
-                  }}
-                />
-              </Block>
-            </Stack>
-
-            <Block label="RHFAutocomplete">
-              <RHFAutocomplete
-                name="autocomplete"
-                label="Autocomplete"
-                options={OPTIONS}
-                getOptionLabel={(option) => option.label}
-                isOptionEqualToValue={(option, value) => option.value === value.value}
-                renderOption={(props, option) => (
-                  <li {...props} key={option.value}>
-                    {option.label}
-                  </li>
-                )}
-              />
-            </Block>
-
-            <Block label="RHFSelect">
-              <RHFSelect name="singleSelect" label="Single select">
-                <MenuItem value="">None</MenuItem>
-                <Divider sx={{ borderStyle: 'dashed' }} />
-                {OPTIONS.map((option) => (
-                  <MenuItem key={option.value} value={option.label}>
-                    {option.label}
-                  </MenuItem>
-                ))}
-              </RHFSelect>
-            </Block>
-
-            <Block label="RHFMultiSelect">
-              <RHFMultiSelect
-                chip
-                checkbox
-                name="multiSelect"
-                label="Multi select"
-                options={OPTIONS}
-              />
-            </Block>
-
-            <Block label="RHFEditor">
-              <RHFEditor simple name="editor" sx={{ height: 200 }} />
-            </Block>
-          </Stack>
-
-          <Stack spacing={2}>
-            <Block label="RHFUpload">
-              <RHFUpload
-                name="singleUpload"
-                maxSize={3145728}
-                onDrop={handleDropSingleFile}
-                onDelete={() => setValue('singleUpload', null, { shouldValidate: true })}
-              />
-            </Block>
-
-            <Block label="RHFUpload">
-              <RHFUpload
-                multiple
-                thumbnail
-                name="multiUpload"
-                maxSize={3145728}
-                onDrop={handleDropMultiFile}
-                onRemove={(inputFile) =>
-                  setValue(
-                    'multiUpload',
-                    values.multiUpload && values.multiUpload?.filter((file) => file !== inputFile),
-                    { shouldValidate: true }
-                  )
-                }
-                onRemoveAll={() => setValue('multiUpload', [], { shouldValidate: true })}
-                onUpload={() => console.info('ON UPLOAD')}
-              />
-            </Block>
-
-            <RHFCheckbox name="checkbox" label="RHFCheckbox" />
-
-            <RHFSwitch name="switch" label="RHFSwitch" />
-
-            <RHFRadioGroup
-              row
-              name="radioGroup"
-              label="RHFRadioGroup"
-              spacing={4}
-              options={[
-                { value: 'option 1', label: 'Radio 1' },
-                { value: 'option 2', label: 'Radio 2' },
-                { value: 'option 3', label: 'Radio 3' },
-              ]}
-            />
-
-            <RHFMultiCheckbox
-              row
-              name="multiCheckbox"
-              label="RHFMultiCheckbox"
-              spacing={4}
-              options={[
-                { value: 'option 1', label: 'Checkbox 1' },
-                { value: 'option 2', label: 'Checkbox 2' },
-                { value: 'option 3', label: 'Checkbox 3' },
-              ]}
-            />
-
-            <Block label="RHFSlider">
-              <RHFSlider name="slider" />
-            </Block>
-
-            <Block label="RHFSlider">
-              <RHFSlider name="sliderRange" />
-            </Block>
-
-            <LoadingButton
-              fullWidth
-              color="info"
-              size="large"
-              type="submit"
-              variant="soft"
-              loading={isSubmitting}
-            >
-              Submit to Check
-            </LoadingButton>
-          </Stack>
-        </Box>
-
-        {debug && <ValuesPreview />}
-      </FormProvider>
-    </>
-  );
-}
-
-ReactHookForm.propTypes = {
-  debug: PropTypes.bool,
-};
-
-// ----------------------------------------------------------------------
-
-function Block({ label = 'RHFTextField', sx, children }) {
-  return (
-    <Stack spacing={1} sx={{ width: 1, ...sx }}>
-      <Typography
-        variant="caption"
-        sx={{
-          textAlign: 'right',
-          fontStyle: 'italic',
-          color: 'text.disabled',
-        }}
-      >
-        {label}
-      </Typography>
-      {children}
-    </Stack>
-  );
-}
-
-Block.propTypes = {
-  children: PropTypes.node,
-  label: PropTypes.string,
-  sx: PropTypes.object,
-};