Solves build errors (#154)

KevinVandy · Sep 30, 2023 · c1dec9e · c1dec9e
1 parent d5e4250
commit c1dec9e
Show file tree

Hide file tree

Showing 26 changed files with 133 additions and 116 deletions.
diff --git a/apps/mantine-react-table-docs/components/mdx/InstallCommand.tsx b/apps/mantine-react-table-docs/components/mdx/InstallCommand.tsx
@@ -44,9 +44,8 @@ export function InstallCommand() {
             <SampleCodeSnippet
               className="language-bash"
               style={{ overflowX: 'hidden' }}
-            >
-              {tabValue.command}
-            </SampleCodeSnippet>
+              code={tabValue.command}
+            />
           </Tabs.Panel>
         ))}
       </Tabs>

diff --git a/apps/mantine-react-table-docs/components/mdx/SampleCodeSnippet.tsx b/apps/mantine-react-table-docs/components/mdx/SampleCodeSnippet.tsx
@@ -2,28 +2,13 @@ import {
   CodeHighlight,
   type CodeHighlightProps,
 } from '@mantine/code-highlight';
-import { Code, Paper, useMantineTheme } from '@mantine/core';
-
-interface Props extends CodeHighlightProps {
-  children: string;
-}
-
-export function SampleCodeSnippet(props: Props) {
-  const { primaryColor } = useMantineTheme();
-
-  if (!props.language && !props.className) {
-    return <Code color={primaryColor} fz="0.9em" {...props} />;
-  }
-
-  if (!props.withCopyButton) {
-    return <CodeHighlight code={props.children} />;
-  }
+import { Paper } from '@mantine/core';
 
+export function SampleCodeSnippet(props: CodeHighlightProps) {
   return (
     <Paper radius="sm" shadow="sm" withBorder={props.withCopyButton}>
       <CodeHighlight
         {...props}
-        code={props.children}
         language={props.language ?? props?.className?.replace(/language-/, '')}
       />
     </Paper>

diff --git a/apps/mantine-react-table-docs/components/mdx/SourceCodeSnippet.tsx b/apps/mantine-react-table-docs/components/mdx/SourceCodeSnippet.tsx
@@ -77,6 +77,11 @@ export const SourceCodeSnippet = ({
     [defaultTS],
   );
 
+  function filterUndefined<TValue>(value: TValue | undefined): value is TValue {
+    if (value === null || value === undefined) return false;
+    return true;
+  }
+
   return (
     <Box className={classes.wrapper}>
       {Component && (
@@ -188,25 +193,31 @@ export const SourceCodeSnippet = ({
             language: 'tsx',
             icon: <IconBrandTypescript />,
           },
-          javaScriptCode && {
-            fileName: 'JS',
-            code: javaScriptCode,
-            language: 'jsx',
-            icon: <IconBrandJavascript />,
-          },
-          legacyCode && {
-            fileName: 'Legacy',
-            code: legacyCode,
-            language: 'tsx',
-            icon: <IconCode />,
-          },
-          apiCode && {
-            fileName: 'API',
-            code: apiCode,
-            language: 'typescript',
-            icon: <IconApi />,
-          },
-        ].filter(Boolean)}
+          javaScriptCode
+            ? {
+                fileName: 'JS',
+                code: javaScriptCode,
+                language: 'jsx',
+                icon: <IconBrandJavascript />,
+              }
+            : undefined,
+          legacyCode
+            ? {
+                fileName: 'Legacy',
+                code: legacyCode,
+                language: 'tsx',
+                icon: <IconCode />,
+              }
+            : undefined,
+          apiCode
+            ? {
+                fileName: 'API',
+                code: apiCode,
+                language: 'typescript',
+                icon: <IconApi />,
+              }
+            : undefined,
+        ].filter(filterUndefined)}
       />
     </Box>
   );

diff --git a/apps/mantine-react-table-docs/components/navigation/BreadCrumbs.module.css b/apps/mantine-react-table-docs/components/navigation/BreadCrumbs.module.css
@@ -0,0 +1,5 @@
+.directoryWrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
diff --git a/apps/mantine-react-table-docs/components/navigation/BreadCrumbs.tsx b/apps/mantine-react-table-docs/components/navigation/BreadCrumbs.tsx
@@ -3,6 +3,7 @@ import Head from 'next/head';
 import Link from 'next/link';
 import { Anchor, Breadcrumbs } from '@mantine/core';
 import { useRouter } from 'next/router';
+import classes from './BreadCrumbs.module.css';
 
 export const BreadCrumbs = () => {
   const { route } = useRouter();
@@ -51,15 +52,7 @@ export const BreadCrumbs = () => {
       <Breadcrumbs aria-label="breadcrumb" style={{ paddingBottom: '16px' }}>
         {breadCrumbLinks.map((link, index) => (
           <Link key={index} href={link} passHref legacyBehavior>
-            <Anchor
-              color="inherit"
-              style={{
-                cursor: 'pointer',
-                textTransform: 'capitalize',
-                textDecoration: 'none',
-                '&:hover': { textDecoration: 'hover' },
-              }}
-            >
+            <Anchor c="inherit" className={classes.wrapper}>
               {link === '/'
                 ? 'Home'
                 : link

diff --git a/apps/mantine-react-table-docs/components/navigation/MiniNav.tsx b/apps/mantine-react-table-docs/components/navigation/MiniNav.tsx
@@ -1,12 +1,13 @@
 import { useEffect, useState } from 'react';
-import { Box, Anchor, Text } from '@mantine/core';
+import { Box, Anchor, Text, useMantineColorScheme } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { useRouter } from 'next/router';
 
 export const MiniNav = () => {
   const { pathname } = useRouter();
   const isXLDesktop = useMediaQuery('(min-width: 1800px)');
   const [headings, setHeadings] = useState<NodeListOf<HTMLElement>>();
+  const { colorScheme } = useMantineColorScheme();
 
   useEffect(() => {
     setHeadings(
@@ -54,12 +55,12 @@ export const MiniNav = () => {
                 href={`#${heading.id}`}
                 style={(theme) => ({
                   color:
-                    theme.colorScheme === 'dark'
+                    colorScheme === 'dark'
                       ? theme.colors.gray[3]
                       : theme.colors.gray[7],
                 })}
               >
-                <Text underline component="span">
+                <Text td="underline" component="span">
                   {heading.innerText}
                 </Text>
               </Anchor>

diff --git a/apps/mantine-react-table-docs/components/navigation/SidebarItems.tsx b/apps/mantine-react-table-docs/components/navigation/SidebarItems.tsx
@@ -1,7 +1,12 @@
 import { Fragment, useCallback } from 'react';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
-import { UnstyledButton, Flex, rgba } from '@mantine/core';
+import {
+  UnstyledButton,
+  Flex,
+  rgba,
+  useMantineColorScheme,
+} from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { IconExternalLink } from '@tabler/icons-react';
 import { type RouteItem } from './routes';
@@ -27,6 +32,8 @@ export const SideBarItems = ({ depth = 1, routes, setNavOpen }: Props) => {
     }
   }, []);
 
+  const { colorScheme } = useMantineColorScheme();
+
   return (
     <>
       {routes.map(({ href, items, label, external, secondaryItems }) => {
@@ -53,15 +60,12 @@ export const SideBarItems = ({ depth = 1, routes, setNavOpen }: Props) => {
                         ? rgba(getPrimaryColor(theme), 0.2)
                         : 'transparent',
                     color: !items
-                      ? getPrimaryColor(
-                          theme,
-                          theme.colorScheme === 'dark' ? 3 : 8,
-                        )
+                      ? getPrimaryColor(theme, colorScheme === 'dark' ? 3 : 8)
                       : depth === 1
-                      ? theme.colorScheme === 'dark'
+                      ? colorScheme === 'dark'
                         ? theme.white
                         : theme.black
-                      : theme.colorScheme === 'dark'
+                      : colorScheme === 'dark'
                       ? theme.colors.gray[3]
                       : theme.colors.gray[7],
                     display: 'block',

diff --git a/apps/mantine-react-table-docs/components/navigation/TopBar.tsx b/apps/mantine-react-table-docs/components/navigation/TopBar.tsx
@@ -15,7 +15,6 @@ import {
 } from '@mantine/core';
 import { IconBrandGithub, IconBrandDiscord } from '@tabler/icons-react';
 import { useMediaQuery } from '@mantine/hooks';
-import { IconSun, IconMoonStars } from '@tabler/icons-react';
 import docsearch from '@docsearch/js';
 import '@docsearch/css';
 import { getPrimaryColor } from 'mantine-react-table/src/column.utils';

diff --git a/apps/mantine-react-table-docs/components/prop-tables/CellInstanceAPIsTable.tsx b/apps/mantine-react-table-docs/components/prop-tables/CellInstanceAPIsTable.tsx
@@ -34,9 +34,11 @@ const CellInstanceAPIsTable = ({ onlyOptions }: Props) => {
           header: 'Type',
           enableGlobalFilter: false,
           Cell: ({ cell }) => (
-            <SampleCodeSnippet language="typescript" noCopy>
-              {cell.getValue<string>()}
-            </SampleCodeSnippet>
+            <SampleCodeSnippet
+              language="typescript"
+              withCopyButton={false}
+              code={cell.getValue<string>()}
+            />
           ),
         },
         {

diff --git a/apps/mantine-react-table-docs/components/prop-tables/ColumnInstanceAPIsTable.tsx b/apps/mantine-react-table-docs/components/prop-tables/ColumnInstanceAPIsTable.tsx
@@ -37,9 +37,11 @@ const ColumnInstanceAPIsTable = ({ onlyOptions }: Props) => {
           header: 'Type',
           enableGlobalFilter: false,
           Cell: ({ cell }) => (
-            <SampleCodeSnippet language="typescript" noCopy>
-              {cell.getValue<string>()}
-            </SampleCodeSnippet>
+            <SampleCodeSnippet
+              language="typescript"
+              withCopyButton={false}
+              code={cell.getValue<string>()}
+            />
           ),
         },
         {

diff --git a/apps/mantine-react-table-docs/components/prop-tables/ColumnOptionsTable.tsx b/apps/mantine-react-table-docs/components/prop-tables/ColumnOptionsTable.tsx
@@ -44,9 +44,11 @@ const ColumnOptionsTable = ({ onlyOptions }: Props) => {
           header: 'Type',
           enableGlobalFilter: false,
           Cell: ({ cell }) => (
-            <SampleCodeSnippet language="typescript" noCopy>
-              {cell.getValue<string>()}
-            </SampleCodeSnippet>
+            <SampleCodeSnippet
+              language="typescript"
+              withCopyButton={false}
+              code={cell.getValue<string>()}
+            />
           ),
         },
         {
@@ -59,9 +61,11 @@ const ColumnOptionsTable = ({ onlyOptions }: Props) => {
           enableGlobalFilter: false,
           header: 'Default Value',
           Cell: ({ cell }) => (
-            <SampleCodeSnippet language="typescript" noCopy>
-              {cell.getValue<string>()}
-            </SampleCodeSnippet>
+            <SampleCodeSnippet
+              language="typescript"
+              withCopyButton={false}
+              code={cell.getValue<string>()}
+            />
           ),
         },
         {

diff --git a/apps/mantine-react-table-docs/components/prop-tables/RowInstanceAPIsTable.tsx b/apps/mantine-react-table-docs/components/prop-tables/RowInstanceAPIsTable.tsx
@@ -34,9 +34,11 @@ const RowInstanceAPIsTable = ({ onlyOptions }: Props) => {
           header: 'Type',
           enableGlobalFilter: false,
           Cell: ({ cell }) => (
-            <SampleCodeSnippet language="typescript" noCopy>
-              {cell.getValue<string>()}
-            </SampleCodeSnippet>
+            <SampleCodeSnippet
+              language="typescript"
+              withCopyButton={false}
+              code={cell.getValue<string>()}
+            />
           ),
         },
         {

diff --git a/apps/mantine-react-table-docs/components/prop-tables/StateOptionsTable.tsx b/apps/mantine-react-table-docs/components/prop-tables/StateOptionsTable.tsx
@@ -34,19 +34,23 @@ const StateOptionsTable = ({ onlyOptions }: Props) => {
           header: 'Type',
           enableGlobalFilter: false,
           Cell: ({ cell }) => (
-            <SampleCodeSnippet language="typescript" noCopy>
-              {cell.getValue<string>()}
-            </SampleCodeSnippet>
+            <SampleCodeSnippet
+              language="typescript"
+              withCopyButton={false}
+              code={cell.getValue<string>()}
+            />
           ),
         },
         {
           accessorKey: 'defaultValue',
           enableGlobalFilter: false,
           header: 'Default Value',
           Cell: ({ cell }) => (
-            <SampleCodeSnippet language="typescript" noCopy>
-              {cell.getValue<string>()}
-            </SampleCodeSnippet>
+            <SampleCodeSnippet
+              language="typescript"
+              withCopyButton={false}
+              code={cell.getValue<string>()}
+            />
           ),
         },
         {

diff --git a/apps/mantine-react-table-docs/components/prop-tables/TableInstanceAPIsTable.tsx b/apps/mantine-react-table-docs/components/prop-tables/TableInstanceAPIsTable.tsx
@@ -34,9 +34,11 @@ const TableInstanceAPIsTable = ({ onlyOptions }: Props) => {
           header: 'Type',
           enableGlobalFilter: false,
           Cell: ({ cell }) => (
-            <SampleCodeSnippet language="typescript" noCopy>
-              {cell.getValue<string>()}
-            </SampleCodeSnippet>
+            <SampleCodeSnippet
+              language="typescript"
+              withCopyButton={false}
+              code={cell.getValue<string>()}
+            />
           ),
         },
         {

diff --git a/apps/mantine-react-table-docs/components/prop-tables/TableOptionsTable.tsx b/apps/mantine-react-table-docs/components/prop-tables/TableOptionsTable.tsx
@@ -48,9 +48,11 @@ const TableOptionsTable = ({ onlyOptions }: Props) => {
           accessorKey: 'type',
           enableGlobalFilter: false,
           Cell: ({ cell }) => (
-            <SampleCodeSnippet language="typescript" noCopy>
-              {cell.getValue<string>()}
-            </SampleCodeSnippet>
+            <SampleCodeSnippet
+              language="typescript"
+              withCopyButton={false}
+              code={cell.getValue<string>()}
+            />
           ),
         },
         {
@@ -63,9 +65,11 @@ const TableOptionsTable = ({ onlyOptions }: Props) => {
           accessorKey: 'defaultValue',
           enableGlobalFilter: false,
           Cell: ({ cell }) => (
-            <SampleCodeSnippet language="typescript" noCopy>
-              {cell.getValue<string>()}
-            </SampleCodeSnippet>
+            <SampleCodeSnippet
+              language="typescript"
+              withCopyButton={false}
+              code={cell.getValue<string>()}
+            />
           ),
         },
         {

diff --git a/apps/mantine-react-table-docs/example-groups/DataExportExamples.tsx b/apps/mantine-react-table-docs/example-groups/DataExportExamples.tsx
@@ -15,7 +15,7 @@ const RemoteFetching = ({ isPage = false }) => {
       <Box style={{ width: '100%', marginTop: '1rem' }}>
         <Tabs
           value={isPage ? pathname.split('/').pop() : activeTab}
-          onTabChange={(newPath) =>
+          onChange={(newPath) =>
             isPage && newPath !== 'more'
               ? push(newPath as string)
               : setActiveTab(newPath as string)

diff --git a/apps/mantine-react-table-docs/example-groups/EditingCRUD.tsx b/apps/mantine-react-table-docs/example-groups/EditingCRUD.tsx
@@ -17,7 +17,7 @@ const EditingCRUD = ({ isPage = false }) => {
       <Box style={{ width: '100%', marginTop: '1rem' }}>
         <Tabs
           value={isPage ? pathname.split('/').pop() : activeTab}
-          onTabChange={(newPath) =>
+          onChange={(newPath) =>
             isPage && newPath !== 'more'
               ? push(newPath as string)
               : setActiveTab(newPath as string)

diff --git a/apps/mantine-react-table-docs/example-groups/LocaleExamples.tsx b/apps/mantine-react-table-docs/example-groups/LocaleExamples.tsx
@@ -74,7 +74,7 @@ const LocaleExamples = () => {
   return (
     <>
       <Box style={{ width: '100%' }}>
-        <Tabs onTabChange={setCurrentLocale} value={currentLocale}>
+        <Tabs onChange={setCurrentLocale} value={currentLocale}>
           <Tabs.List>
             {supportedLocales.map((locale) => (
               <Tabs.Tab key={locale} value={locale}>