Fix/docs (#175)

* fix: css modules runtime error * fix: docs type error * fix: code snippet import order * fix: text color for feature table * fix: codehighlight passing wrong prop * fix: removed warning about mantine v7 * fix: weird hack
KevinVandy · Oct 19, 2023 · cf9f538 · cf9f538
1 parent 3e36a47
commit cf9f538
Show file tree

Hide file tree

Showing 15 changed files with 209 additions and 148 deletions.
diff --git a/apps/mantine-react-table-docs/components/mdx/FeatureTable.module.css b/apps/mantine-react-table-docs/components/mdx/FeatureTable.module.css
@@ -2,7 +2,12 @@
   width: 100%;
   border-collapse: collapse;
   caption-side: top;
-  color: #c1c2c5;
+  @mixin dark {
+    color: var(--mantine-color-white);
+  }
+  @mixin light {
+    color: var(--mantine-color-black);
+  }
   line-height: 1.55;
   display: table;
 }
diff --git a/apps/mantine-react-table-docs/components/mdx/PopularDocs.module.css b/apps/mantine-react-table-docs/components/mdx/PopularDocs.module.css
@@ -0,0 +1,8 @@
+.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 0.9rem;
+    @media (max-width: 1024px) {
+        grid-template-columns: 1fr 1fr;
+    }
+}
diff --git a/apps/mantine-react-table-docs/components/mdx/PopularDocs.tsx b/apps/mantine-react-table-docs/components/mdx/PopularDocs.tsx
@@ -0,0 +1,51 @@
+import { Box, Button } from '@mantine/core';
+import Link from 'next/link';
+
+import classes from './PopularDocs.module.css';
+
+export const PopularDocs = () => {
+  return (
+    <Box className={classes.container}>
+      <Link href="/docs/getting-started/usage">
+        <Button size="xl" fullWidth variant="gradient">
+          Usage
+        </Button>
+      </Link>
+      <Link href="/docs/api/table-options">
+        <Button size="xl" fullWidth variant="gradient">
+          Table Options
+        </Button>
+      </Link>
+      <Link href="/docs/examples/editing-crud">
+        <Button size="xl" fullWidth variant="gradient">
+          CRUD Examples
+        </Button>
+      </Link>
+      <Link href="/docs/examples/react-query">
+        <Button size="xl" fullWidth variant="gradient">
+          Fetching Examples
+        </Button>
+      </Link>
+      <Link href="/docs/guides/localization">
+        <Button size="xl" fullWidth variant="gradient">
+          Localization
+        </Button>
+      </Link>
+      <Link href="/docs/guides/data-columns">
+        <Button size="xl" fullWidth variant="gradient">
+          Create Columns
+        </Button>
+      </Link>
+      <Link href="/docs/guides/column-filtering">
+        <Button size="xl" fullWidth variant="gradient">
+          Column Filtering
+        </Button>
+      </Link>
+      <Link href="/docs/guides/row-selection">
+        <Button size="xl" fullWidth variant="gradient">
+          Row Selection
+        </Button>
+      </Link>
+    </Box>
+  );
+};
diff --git a/apps/mantine-react-table-docs/components/mdx/SourceCodeSnippet.tsx b/apps/mantine-react-table-docs/components/mdx/SourceCodeSnippet.tsx
@@ -146,7 +146,8 @@ export const SourceCodeSnippet = ({
                     <Select
                       aria-label="Select theme shade"
                       data={['1', '2', '3', '4', '5', '6', '7', '8', '9']}
-                      value={primaryShade.toString()}
+                      /*Hack for a weird SSG error in which primaryShade is not available (it is undefined) so hydration/compiling breaks*/
+                      value={(primaryShade ?? 7).toString()}
                       onChange={(value) => {
                         setPrimaryShade(+(value as string) as MantineShade);
                         plausible('change-shade');

diff --git a/apps/mantine-react-table-docs/components/mdx/mdxComponents.tsx b/apps/mantine-react-table-docs/components/mdx/mdxComponents.tsx
@@ -8,7 +8,9 @@ import { Paragraph } from './Paragraph';
 export const mdxComponents = {
   a: (props: any) => <AnchorLink {...props} />,
   blockquote: (props: any) => <Blockquote {...props} />,
-  code: (props: any) => <SampleCodeSnippet {...props} />,
+  code: ({ children, ...props }: any) => (
+    <SampleCodeSnippet {...props} code={children} />
+  ),
   h1: (props: any) => <Title order={1} my="lg" {...props} />,
   h2: (props: any) => <LinkHeading order={2} my="lg" {...props} />,
   h3: (props: any) => (

diff --git a/apps/mantine-react-table-docs/components/navigation/TopBar.tsx b/apps/mantine-react-table-docs/components/navigation/TopBar.tsx
@@ -13,7 +13,12 @@ import {
   AppShell,
   useMantineColorScheme,
 } from '@mantine/core';
-import { IconBrandGithub, IconBrandDiscord } from '@tabler/icons-react';
+import {
+  IconBrandGithub,
+  IconBrandDiscord,
+  IconSun,
+  IconMoonStars,
+} from '@tabler/icons-react';
 import { useMediaQuery } from '@mantine/hooks';
 import docsearch from '@docsearch/js';
 import '@docsearch/css';
@@ -171,7 +176,7 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
               onClick={toggleColorScheme}
               size={isMobile ? 'sm' : 'lg'}
             >
-              {/* {true ? <IconSun /> : <IconMoonStars />} */}
+              {colorScheme == 'dark' ? <IconSun /> : <IconMoonStars />}
             </ActionIcon>
           </Tooltip>
         </Box>

diff --git a/apps/mantine-react-table-docs/examples/localization-i18n-ar/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/localization-i18n-ar/sandbox/src/TS.tsx
@@ -6,7 +6,11 @@ import { MRT_Localization_AR } from 'mantine-react-table/locales/ar';
 
 //mock data
 import { data, type Person } from './makeData';
-import { MantineProvider, useMantineTheme } from '@mantine/core';
+import {
+  DirectionProvider,
+  MantineProvider,
+  useMantineTheme,
+} from '@mantine/core';
 
 const columns: MRT_ColumnDef<Person>[] = [
   {
@@ -27,28 +31,25 @@ const columns: MRT_ColumnDef<Person>[] = [
 const Example = () => {
   const theme = useMantineTheme();
   return (
-    <MantineProvider
-      theme={{
-        ...theme,
-        dir: 'rtl',
-      }}
-    >
-      <div style={{ direction: 'rtl' }}>
-        <MantineReactTable
-          columns={columns}
-          data={data}
-          enableColumnFilterModes
-          enableColumnOrdering
-          enableEditing
-          enablePinning
-          enableRowActions
-          enableRowSelection
-          enableSelectAll={false}
-          initialState={{ showColumnFilters: true, showGlobalFilter: true }}
-          localization={MRT_Localization_AR}
-        />
-      </div>
-    </MantineProvider>
+    <DirectionProvider detectDirection={false} initialDirection={'rtl'}>
+      <MantineProvider theme={theme}>
+        <div style={{ direction: 'rtl' }}>
+          <MantineReactTable
+            columns={columns}
+            data={data}
+            enableColumnFilterModes
+            enableColumnOrdering
+            enableEditing
+            enablePinning
+            enableRowActions
+            enableRowSelection
+            enableSelectAll={false}
+            initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+            localization={MRT_Localization_AR}
+          />
+        </div>
+      </MantineProvider>
+    </DirectionProvider>
   );
 };
 

diff --git a/apps/mantine-react-table-docs/examples/localization-i18n-fa/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/localization-i18n-fa/sandbox/src/TS.tsx
@@ -6,7 +6,11 @@ import { MRT_Localization_FA } from 'mantine-react-table/locales/fa';
 
 //mock data
 import { data, type Person } from './makeData';
-import { MantineProvider, useMantineTheme } from '@mantine/core';
+import {
+  DirectionProvider,
+  MantineProvider,
+  useMantineTheme,
+} from '@mantine/core';
 
 const columns: MRT_ColumnDef<Person>[] = [
   {
@@ -27,28 +31,25 @@ const columns: MRT_ColumnDef<Person>[] = [
 const Example = () => {
   const theme = useMantineTheme();
   return (
-    <MantineProvider
-      theme={{
-        ...theme,
-        dir: 'rtl',
-      }}
-    >
-      <div style={{ direction: 'rtl' }}>
-        <MantineReactTable
-          columns={columns}
-          data={data}
-          enableColumnFilterModes
-          enableColumnOrdering
-          enableEditing
-          enablePinning
-          enableRowActions
-          enableRowSelection
-          enableSelectAll={false}
-          initialState={{ showColumnFilters: true, showGlobalFilter: true }}
-          localization={MRT_Localization_FA}
-        />
-      </div>
-    </MantineProvider>
+    <DirectionProvider detectDirection={false} initialDirection={'rtl'}>
+      <MantineProvider theme={theme}>
+        <div style={{ direction: 'rtl' }}>
+          <MantineReactTable
+            columns={columns}
+            data={data}
+            enableColumnFilterModes
+            enableColumnOrdering
+            enableEditing
+            enablePinning
+            enableRowActions
+            enableRowSelection
+            enableSelectAll={false}
+            initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+            localization={MRT_Localization_FA}
+          />
+        </div>
+      </MantineProvider>
+    </DirectionProvider>
   );
 };
 

diff --git a/apps/mantine-react-table-docs/examples/minimal/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/minimal/sandbox/src/TS.tsx
@@ -1,14 +1,14 @@
 import { useMemo } from 'react';
 import {
-  MRT_Table, //import alternative sub-component if we do not want toolbars
   type MRT_ColumnDef,
+  MRT_Table,
   useMantineReactTable,
 } from 'mantine-react-table';
-import { useMantineTheme } from '@mantine/core';
+import { useMantineColorScheme } from '@mantine/core';
 import { data, type Person } from './makeData';
 
 export const Example = () => {
-  const { colorScheme } = useMantineTheme();
+  const { colorScheme } = useMantineColorScheme();
 
   const columns = useMemo<MRT_ColumnDef<Person>[]>(
     () => [
@@ -46,7 +46,8 @@ export const Example = () => {
     mantineTableProps: {
       highlightOnHover: false,
       withColumnBorders: true,
-      withBorder: colorScheme === 'light',
+      withTableBorder: colorScheme === 'light',
+      withRowBorders: colorScheme === 'light',
       style: {
         'thead > tr': {
           backgroundColor: 'inherit',

diff --git a/apps/mantine-react-table-docs/pages/_app.tsx b/apps/mantine-react-table-docs/pages/_app.tsx
@@ -1,7 +1,7 @@
 import '../styles/globals.css';
-import '@mantine/code-highlight/styles.css';
 import '@mantine/core/styles.css';
 import '@mantine/dates/styles.css';
+import '@mantine/code-highlight/styles.css';
 import 'mantine-react-table/styles.css';
 import { useState } from 'react';
 import { type AppProps } from 'next/app';

diff --git a/apps/mantine-react-table-docs/pages/docs/getting-started/install.mdx b/apps/mantine-react-table-docs/pages/docs/getting-started/install.mdx
@@ -43,7 +43,7 @@ If you don't see any styles applied to the mantine table components, you may hav
 
 If you get an error like this:
 
-```bsh
+```bash
 "Error: Element type is invalid: expected a string (for built-in components)
 or a class/function (for composite components) but got: undefined.
 You likely forgot to export your component from the file it's defined in,
@@ -58,22 +58,14 @@ Make sure that the `@tabler/icons-react` package is at least v2.23.0.
 
 If you are using an older version of `webpack` or `create-react-app` and get an error like this:
 
-```bsh
+```bash
 ./node_modules/@tanstack/virtual-core/build/lib/index.esm.js 147:92
 Module parse failed: Unexpected token (147:92)
 File was processed with these loaders:
 ```
 
 Then try upgrading either `webpack` or `react-scripts` to the latest versions.
 
-If you are using the Next.js App Directory and get an error like this:
-
-```bsh
-Attempted import error: 'useState' is not exported from 'react'
-```
-
-Mantine itself does not work with React Server components and will require `"use-client"` on all components from both Mantine and MRT. The creator of Mantine recommends not using Mantine in the Next.js App Directory at all. Mantine V7 and MRT V2 should address this issue by the end of 2023.
-
 ### FAQs
 
 <FAQs