npm - material-react-table-narender - Versions diffs - 1.0.0 → 2.13.4 - Mend

material-react-table-narender 1.0.0 → 2.13.4

Files changed (1998) hide show

package/apps/material-react-table-docs/components/navigation/BreadCrumbs.tsx DELETED Viewed

@@ -1,96 +0,0 @@
-import { useMemo } from 'react';
-import Link from 'next/link';
-import {
-  Box,
-  IconButton,
-  Breadcrumbs as MuiBreadcrumbs,
-  Link as MuiLink,
-  Tooltip,
-} from '@mui/material';
-import { useRouter } from 'next/router';
-import Head from 'next/head';
-import { ArrowBack } from '@mui/icons-material';
-export const BreadCrumbs = () => {
-  const { route, back } = useRouter();
-  const breadCrumbLinks = useMemo(() => {
-    const routes = route.split('/');
-    routes.shift();
-    const links: string[] = [];
-    for (let i = 0; i < routes.length + 1; i++) {
-      if (routes[i] && routes[i] !== '/')
-        links.push(`/${routes.slice(0, i + 1).join('/')}`);
-    }
-    return links;
-  }, [route]);
-  if (breadCrumbLinks.length === 0) {
-    return null;
-  }
-  if (breadCrumbLinks.length === 1) {
-    breadCrumbLinks.unshift('/');
-  }
-  const structuredData = {
-    '@context': 'https://schema.org',
-    '@type': 'BreadcrumbList',
-    itemListElement: breadCrumbLinks.map((link, index) => ({
-      '@type': 'ListItem',
-      position: index + 1,
-      name:
-        link === '/'
-          ? 'Home'
-          : link.split('/').pop()?.replaceAll('-', ' ') || '',
-      item: `https://www.material-react-table.com${link}`,
-    })),
-  };
-  return (
-    <>
-      <Head>
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
-        />
-      </Head>
-      <Box
-        sx={{ display: 'flex', alignItems: 'center', gap: '1rem', pt: '1rem' }}
-      >
-        <Tooltip title="Go Back">
-          <IconButton
-            aria-label="Go Back"
-            color="default"
-            onClick={back}
-            size="small"
-          >
-            <ArrowBack />
-          </IconButton>
-        </Tooltip>
-        <MuiBreadcrumbs aria-label="breadcrumb" sx={{ m: 0 }}>
-          {breadCrumbLinks.map((link, index) => (
-            <Link key={index} href={link} passHref legacyBehavior>
-              <MuiLink
-                color="inherit"
-                sx={{ cursor: 'pointer', textTransform: 'capitalize' }}
-                underline="hover"
-              >
-                {link === '/'
-                  ? 'Home'
-                  : link
-                      .split('/')
-                      .pop()
-                      ?.replaceAll('-', ' ')
-                      ?.replaceAll('mrt', 'MRT')
-                      ?.replaceAll('css', 'CSS')
-                      ?.replaceAll(' ui', ' UI')
-                      ?.replaceAll('api', 'API')}
-              </MuiLink>
-            </Link>
-          ))}
-        </MuiBreadcrumbs>
-      </Box>
-    </>
-  );
-};

package/apps/material-react-table-docs/components/navigation/Footer.tsx DELETED Viewed

@@ -1,260 +0,0 @@
-import { useRouter } from 'next/router';
-import { usePlausible } from 'next-plausible';
-import {
-  Box,
-  Button,
-  Divider,
-  Link as MuiLink,
-  Paper,
-  Typography,
-} from '@mui/material';
-import { Edit, GitHub } from '@mui/icons-material';
-import TableOfContentsList from './TableOfContentsList';
-import { routes } from './routes';
-import { EthicalAd } from '../mdx/EthicalAd';
-export const Footer = () => {
-  const { pathname } = useRouter();
-  const plausible = usePlausible();
-  return (
-    <Box
-      component="footer"
-      sx={{
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        marginTop: '50px',
-      }}
-    >
-      <Button
-        color="secondary"
-        endIcon={<GitHub />}
-        startIcon={<Edit />}
-        href={`https://github.com/KevinVandy/material-react-table/edit/v3/apps/material-react-table-docs/pages${pathname}${
-          ['/'].includes(pathname)
-            ? 'index.tsx'
-            : ['/docs', '/docs/api', '/docs/examples', '/docs/guides'].includes(
-                  pathname,
-                )
-              ? '/index.mdx'
-              : '.mdx'
-        }`}
-        onClick={() => plausible('edit-on-github')}
-        rel="noopener"
-        target="_blank"
-        sx={{
-          height: '3rem',
-          m: '2rem auto',
-          cursor: 'pointer',
-          textAlign: 'center',
-        }}
-        variant="outlined"
-      >
-        Suggest an Edit for this page on GitHub
-      </Button>
-      <Typography
-        variant="subtitle1"
-        sx={{
-          mt: '2rem',
-          textAlign: 'center',
-        }}
-      >
-        Using{' '}
-        <MuiLink
-          color="secondary"
-          href="https://mantine.dev/"
-          target="_blank"
-          rel="noopener"
-        >
-          Mantine
-        </MuiLink>{' '}
-        instead of Material UI?
-        <br />
-        Check out{' '}
-        <MuiLink
-          href="https://mantine-react-table.com"
-          target="_blank"
-          sx={(theme) => ({
-            background: `-webkit-linear-gradient(left, ${theme.palette.secondary.main}, ${theme.palette.primary.dark})`,
-            display: 'inline',
-            WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent',
-            textDecoration: 'none',
-            '&:hover': {
-              textDecoration: 'underline',
-              textDecorationColor: theme.palette.secondary.main,
-            },
-          })}
-        >
-          Mantine&nbsp;React&nbsp;Table
-        </MuiLink>
-      </Typography>
-      <EthicalAd id="footer" text />
-      <Typography
-        sx={{
-          mt: '2rem',
-          textAlign: 'center',
-        }}
-        variant="subtitle2"
-      >
-        <MuiLink
-          sx={{ color: '#6366f1' }}
-          target="_blank"
-          href={`https://plausible.io/material-react-table.com?${new URLSearchParams(
-            { page: pathname },
-          ).toString()}`}
-        >
-          Plausible Analytics
-        </MuiLink>{' '}
-        for this page
-      </Typography>
-      <Paper
-        elevation={3}
-        sx={{
-          borderRadius: '8px',
-          borderBottomLeftRadius: '0',
-          borderBottomRightRadius: '0',
-          mt: '50px',
-          p: '1.5rem',
-        }}
-      >
-        <Typography color="text.secondary" textAlign="center">
-          © {new Date().getFullYear()} Kevin&nbsp;Van&nbsp;Cott
-        </Typography>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            gap: '1rem',
-            flexWrap: 'wrap',
-          }}
-        >
-          <MuiLink
-            color="text.secondary"
-            href="https://www.npmjs.com/package/material-react-table"
-            target="_blank"
-            rel="noopener"
-          >
-            NPM
-          </MuiLink>
-          <MuiLink
-            color="text.secondary"
-            href="https://github.com/KevinVandy/material-react-table"
-            target="_blank"
-            rel="noopener"
-          >
-            Source Code
-          </MuiLink>
-          <MuiLink
-            color="text.secondary"
-            href="https://github.com/KevinVandy/material-react-table/issues"
-            target="_blank"
-            rel="noopener"
-          >
-            Submit a Bug Report
-          </MuiLink>
-          <MuiLink
-            color="text.secondary"
-            href="https://discord.gg/5wqyRx6fnm"
-            target="_blank"
-            rel="noopener"
-          >
-            Join&nbsp;the&nbsp;Discord!
-          </MuiLink>
-          <MuiLink
-            color="text.secondary"
-            href="https://twitter.com/kevinvancott"
-            target="_blank"
-            rel="noopener"
-          >
-            Twitter
-          </MuiLink>
-        </Box>
-        <Divider sx={{ m: '2rem 0' }} />
-        <Box
-          sx={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            mt: '1rem',
-            gap: '0.5rem',
-            flexDirection: {
-              xs: 'column',
-              sm: 'row',
-            },
-            justifyContent: {
-              xs: 'flex-start',
-              sm: 'space-around',
-              md: 'space-between',
-            },
-          }}
-        >
-          <Box>
-            <Typography>Site Directory</Typography>
-            <TableOfContentsList items={routes} isFooter />
-          </Box>
-          <Box>
-            <Typography>API Reference</Typography>
-            <TableOfContentsList
-              items={
-                routes.find((item) => item.href === '/docs/getting-started')
-                  ?.items ?? []
-              }
-              isFooter
-            />
-            <TableOfContentsList
-              items={
-                routes
-                  .find((item) => item.href === '/docs/api')
-                  ?.items?.find((item) => item.label === 'Props and Options')
-                  ?.secondaryItems ?? []
-              }
-              isFooter
-            />
-            <TableOfContentsList
-              items={
-                routes
-                  .find((item) => item.href === '/docs/api')
-                  ?.items?.find((item) => item.label === 'Instance APIs')
-                  ?.secondaryItems ?? []
-              }
-              isFooter
-            />
-            <TableOfContentsList
-              items={
-                routes
-                  .find((item) => item.href === '/docs/api')
-                  ?.items?.find((item) => item.label === 'Components and Hooks')
-                  ?.secondaryItems ?? []
-              }
-              isFooter
-            />
-          </Box>
-          <Box>
-            <Typography>Examples</Typography>
-            <TableOfContentsList
-              items={
-                routes.find((item) => item.href === '/docs/examples')?.items ??
-                []
-              }
-              isFooter
-            />
-          </Box>
-          <Box>
-            <Typography>Guides</Typography>
-            {routes
-              .find((item) => item.href === '/docs/guides')
-              ?.items?.map((item) => (
-                <TableOfContentsList
-                  key={item.href}
-                  items={item?.items ?? []}
-                  isFooter
-                />
-              ))}
-          </Box>
-        </Box>
-      </Paper>
-    </Box>
-  );
-};

package/apps/material-react-table-docs/components/navigation/Layout.tsx DELETED Viewed

@@ -1,76 +0,0 @@
-import { useRouter } from 'next/router';
-import { useState } from 'react';
-import { Box, useMediaQuery } from '@mui/material';
-import { BreadCrumbs } from './BreadCrumbs';
-import { MiniNav } from './MiniNav';
-import { Footer } from './Footer';
-import { TopBar } from './TopBar';
-import { SideBar } from './Sidebar';
-import { useThemeContext } from '../../styles/ThemeContext';
-interface LayoutProps {
-  children: React.ReactNode;
-}
-export const Layout = ({ children }: LayoutProps) => {
-  const { pathname } = useRouter();
-  const { isSandboxOpen } = useThemeContext();
-  const showBreadCrumbs = pathname !== '/';
-  const showMiniNav =
-    pathname.includes('/docs/getting-started') ||
-    pathname.includes('/docs/api/mrt') ||
-    pathname.includes('/docs/guides/') ||
-    pathname.includes('/migrating') ||
-    pathname === '/about' ||
-    pathname === '/changelog' ||
-    pathname === '/roadmap';
-  const isMobile = useMediaQuery('(max-width: 900px)');
-  const isDesktop = useMediaQuery('(min-width: 1500px)');
-  const isXLDesktop = useMediaQuery('(min-width: 1800px)');
-  const [navOpen, setNavOpen] = useState(false);
-  return (
-    <>
-      <TopBar
-        navOpen={navOpen || (isDesktop && !isSandboxOpen)}
-        setNavOpen={setNavOpen}
-      />
-      <SideBar
-        navOpen={navOpen || (isDesktop && !isSandboxOpen)}
-        setNavOpen={setNavOpen}
-      />
-      <Box
-        component="main"
-        sx={(theme) => ({
-          backgroundColor: theme.palette.background.default,
-          color: theme.palette.text.primary,
-          minHeight: '100vh',
-          p: `64px ${showMiniNav && isXLDesktop ? '264px' : '32px'} 0 ${
-            (navOpen || (isDesktop && !isSandboxOpen)) && !isMobile
-              ? '320px'
-              : '32px'
-          }`,
-          transition: 'all 100ms ease-in-out',
-        })}
-      >
-        <Box
-          sx={{
-            maxWidth: isSandboxOpen ? '100%' : '1200px',
-            margin: 'auto',
-            transition: 'all 100ms ease-in-out',
-            width: '100%',
-          }}
-        >
-          {showBreadCrumbs && <BreadCrumbs />}
-          {showMiniNav && !isXLDesktop && <MiniNav />}
-          {pathname === '/' ? children : <article>{children}</article>}
-          <Footer />
-        </Box>
-        {showMiniNav && isXLDesktop && <MiniNav />}
-      </Box>
-    </>
-  );
-};

package/apps/material-react-table-docs/components/navigation/MiniNav.tsx DELETED Viewed

@@ -1,82 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Box, Link, Typography, useMediaQuery } from '@mui/material';
-import { useRouter } from 'next/router';
-import { EthicalAd } from '../mdx/EthicalAd';
-export const MiniNav = () => {
-  const { pathname } = useRouter();
-  const isXLDesktop = useMediaQuery('(min-width: 1800px)');
-  const [headings, setHeadings] = useState<NodeListOf<HTMLElement>>();
-  useEffect(() => {
-    setHeadings(
-      document.querySelectorAll(isXLDesktop ? 'h2, h3, h4, h5' : 'h3'),
-    );
-  }, [isXLDesktop, pathname]);
-  return (
-    <Box
-      sx={{
-        position: isXLDesktop ? 'fixed' : undefined,
-        top: '60px',
-        right: '2rem',
-        minWidth: '100px',
-        maxWidth: isXLDesktop ? '250px' : '500px',
-      }}
-    >
-      <Typography mt="1rem" component="div" variant="h6">
-        On This Page
-      </Typography>
-      <ul
-        style={{
-          padding: 0,
-          maxHeight: isXLDesktop ? 'calc(100vh - 9rem)' : undefined,
-          overflowY: isXLDesktop ? 'auto' : undefined,
-        }}
-      >
-        {Array.from(headings ?? []).map((heading, index) => {
-          if (
-            !isXLDesktop &&
-            ['demo', 'source code'].includes(
-              heading.innerText.toLowerCase().trim(),
-            )
-          ) {
-            return;
-          }
-          return (
-            <li
-              key={index}
-              style={{
-                listStyle: 'none',
-                paddingLeft:
-                  heading.localName === 'h3'
-                    ? '1rem'
-                    : heading.localName === 'h4'
-                      ? '2rem'
-                      : heading.localName === 'h5'
-                        ? '3rem'
-                        : 0,
-              }}
-            >
-              <Link
-                href={`#${heading.id}`}
-                sx={(theme) => ({
-                  color:
-                    theme.palette.grey[
-                      theme.palette.mode === 'dark' ? 400 : 700
-                    ],
-                })}
-              >
-                <Typography component="span" variant="subtitle2">
-                  {heading.innerText}
-                </Typography>
-              </Link>
-            </li>
-          );
-        })}
-      </ul>
-      {isXLDesktop && <EthicalAd id="mini-nav" vertical />}
-    </Box>
-  );
-};

package/apps/material-react-table-docs/components/navigation/Sidebar.tsx DELETED Viewed

@@ -1,169 +0,0 @@
-import { useMemo, useState } from 'react';
-import {
-  Drawer,
-  IconButton,
-  InputAdornment,
-  List,
-  TextField,
-  Typography,
-  useMediaQuery,
-} from '@mui/material';
-import SearchIcon from '@mui/icons-material/Search';
-import CloseIcon from '@mui/icons-material/Close';
-import { SideBarItems } from './SidebarItems';
-import { RouteItem, routes } from './routes';
-import { matchSorter } from 'match-sorter';
-import { usePlausible } from 'next-plausible';
-interface Props {
-  navOpen: boolean;
-  setNavOpen: (navOpen: boolean) => void;
-}
-export const SideBar = ({ navOpen, setNavOpen }: Props) => {
-  const plausible = usePlausible();
-  const isMobile = useMediaQuery('(max-width: 900px)');
-  const [search, setSearch] = useState('');
-  const filteredRoutes = useMemo(() => {
-    const filterRoutesRecursively = (routes: RouteItem[]): RouteItem[] => {
-      return routes.reduce((acc: RouteItem[], route) => {
-        const matchKeys = ['label'];
-        if (route.keywords) {
-          matchKeys.push('keywords');
-        }
-        const matchesSearch =
-          matchSorter([route], search, { keys: matchKeys }).length > 0;
-        if (matchesSearch) {
-          // If the parent route matches, include all its items and secondary items
-          acc.push({
-            ...route,
-            items: route.items,
-            secondaryItems: route.secondaryItems,
-          });
-        } else {
-          // If parent doesn't match, check children
-          const filteredItems = route.items
-            ? filterRoutesRecursively(route.items)
-            : undefined;
-          const filteredSecondaryItems = route.secondaryItems
-            ? filterRoutesRecursively(route.secondaryItems)
-            : undefined;
-          if (filteredItems?.length || filteredSecondaryItems?.length) {
-            acc.push({
-              ...route,
-              items: filteredItems,
-              secondaryItems: filteredSecondaryItems,
-            });
-          }
-        }
-        return acc;
-      }, []);
-    };
-    return filterRoutesRecursively(routes);
-  }, [routes, search]);
-  return (
-    <Drawer
-      PaperProps={{ component: 'aside' }}
-      open={navOpen}
-      onClose={() => setNavOpen(false)}
-      variant={isMobile ? 'temporary' : 'permanent'}
-      sx={{
-        zIndex: 4,
-        position: 'relative',
-      }}
-    >
-      <List
-        sx={{
-          overflow: 'visible',
-          overflowY: navOpen ? 'overlay' : 'hidden',
-          mt: '52px',
-          p: 0,
-          pb: '10rem',
-          scrollPaddingTop: '20%',
-          transition: 'all .2s',
-          width: navOpen ? '300px' : 0,
-          '@media (max-width: 900px)': {
-            mt: '50px',
-          },
-        }}
-      >
-        <TextField
-          onFocus={() => plausible('page-filter')}
-          placeholder="Find Page"
-          variant="outlined"
-          fullWidth
-          size="small"
-          slotProps={{
-            input: {
-              startAdornment: (
-                <InputAdornment
-                  sx={{
-                    opacity: search ? '1' : '0.5',
-                    transition: 'all .2s',
-                  }}
-                  position="start"
-                >
-                  <SearchIcon />
-                </InputAdornment>
-              ),
-              endAdornment: (
-                <InputAdornment
-                  sx={{
-                    opacity: search ? '1' : '0.5',
-                    transition: 'all .2s',
-                  }}
-                  position="end"
-                >
-                  <IconButton
-                    aria-label="Clear Search"
-                    disabled={!search}
-                    size="small"
-                    onClick={() => setSearch('')}
-                  >
-                    <CloseIcon />
-                  </IconButton>
-                </InputAdornment>
-              ),
-            },
-          }}
-          sx={(theme) => ({
-            backgroundColor: theme.palette.background.paper,
-            mx: '2px',
-            my: '0',
-            p: 0,
-            position: 'sticky',
-            top: '1px',
-            width: 'calc(100% - 4px)',
-            zIndex: 2,
-            '&:hover': {
-              button: {
-                opacity: '1',
-              },
-            },
-          })}
-          onChange={(e) => setSearch(e.target.value)}
-          value={search}
-        />
-        {!filteredRoutes.length ? (
-          <Typography sx={{ p: 2, textAlign: 'center' }} color="textSecondary">
-            No results found for "{search}"
-          </Typography>
-        ) : (
-          <SideBarItems
-            expandAll={!!search}
-            routes={filteredRoutes}
-            setNavOpen={setNavOpen}
-            setSearch={setSearch}
-            search={search}
-          />
-        )}
-      </List>
-    </Drawer>
-  );
-};