Merge pull request #446 from icflorescu/next

Improve docs website
icflorescu · Nov 1, 2023 · a1fe74d · a1fe74d
2 parents 7a172ba + fb1df68
commit a1fe74d
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 65 deletions.
diff --git a/...ted-tables-with-async-data-loading-and-sorting/NestedTablesAsyncSortingExample.module.css b/...ted-tables-with-async-data-loading-and-sorting/NestedTablesAsyncSortingExample.module.css
@@ -1,7 +1,8 @@
 .icon {
-  margin-top: rem(-2px);
-  width: rem(14px);
+  width: rem(13px);
   height: auto;
+  vertical-align: rem(-1px);
+  margin-right: rem(8px);
 }
 
 .expandIcon {
@@ -11,7 +12,3 @@
 .expandIconRotated {
   transform: rotate(90deg);
 }
-
-.employeeName {
-  margin-left: calc(var(--mantine-spacing-xl) * 2);
-}
diff --git a/...les/nested-tables-with-async-data-loading-and-sorting/NestedTablesAsyncSortingExample.tsx b/...les/nested-tables-with-async-data-loading-and-sorting/NestedTablesAsyncSortingExample.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Group } from '@mantine/core';
+import { Box } from '@mantine/core';
 import { IconBuilding, IconChevronRight, IconUser, IconUsers } from '@tabler/icons-react';
 import { DataTable, DataTableSortStatus } from '__PACKAGE__';
 import clsx from 'clsx';
@@ -25,13 +25,14 @@ function EmployeesTable({ departmentId, sortStatus }: { departmentId: string; so
       columns={[
         {
           accessor: 'name',
+          noWrap: true,
           render: ({ firstName, lastName }) => (
-            <Group gap="xs" wrap="nowrap" className={classes.employeeName}>
+            <Box component="span" ml={40}>
               <IconUser className={classes.icon} />
-              <div>
+              <span>
                 {firstName} {lastName}
-              </div>
-            </Group>
+              </span>
+            </Box>
           ),
         },
         {
@@ -59,16 +60,17 @@ function DepartmentsTable({ companyId, sortStatus }: { companyId: string; sortSt
       columns={[
         {
           accessor: 'name',
+          noWrap: true,
           render: ({ id, name }) => (
-            <Group ml="lg" gap="xs" wrap="nowrap">
+            <Box component="span" ml={20}>
               <IconChevronRight
                 className={clsx(classes.icon, classes.expandIcon, {
                   [classes.expandIconRotated]: expandedRecordIds.includes(id),
                 })}
               />
               <IconUsers className={classes.icon} />
-              <div>{name}</div>
-            </Group>
+              <span>{name}</span>
+            </Box>
           ),
         },
         { accessor: 'employees', textAlign: 'right', width: 200 },
@@ -104,16 +106,17 @@ export function NestedTablesAsyncSortingExample() {
           accessor: 'name',
           sortable: true,
           title: 'Company / Department / Employee',
+          noWrap: true,
           render: ({ id, name }) => (
-            <Group gap="xs">
+            <>
               <IconChevronRight
                 className={clsx(classes.icon, classes.expandIcon, {
                   [classes.expandIconRotated]: expandedRecordIds.includes(id),
                 })}
               />
               <IconBuilding className={classes.icon} />
-              <div>{name}</div>
-            </Group>
+              <span>{name}</span>
+            </>
           ),
         },
         {

diff --git a/app/examples/nested-tables-with-async-data-loading/NestedTablesAsyncExample.module.css b/app/examples/nested-tables-with-async-data-loading/NestedTablesAsyncExample.module.css
@@ -1,7 +1,8 @@
 .icon {
-  margin-top: rem(-2px);
-  width: rem(14px);
+  width: rem(13px);
   height: auto;
+  vertical-align: rem(-1px);
+  margin-right: rem(8px);
 }
 
 .expandIcon {
@@ -11,7 +12,3 @@
 .expandIconRotated {
   transform: rotate(90deg);
 }
-
-.employeeName {
-  margin-left: calc(var(--mantine-spacing-xl) * 2);
-}
diff --git a/app/examples/nested-tables-with-async-data-loading/NestedTablesAsyncExample.tsx b/app/examples/nested-tables-with-async-data-loading/NestedTablesAsyncExample.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Group } from '@mantine/core';
+import { Box } from '@mantine/core';
 import { IconBuilding, IconChevronRight, IconUser, IconUsers } from '@tabler/icons-react';
 import { DataTable } from '__PACKAGE__';
 import clsx from 'clsx';
@@ -21,13 +21,14 @@ function EmployeesTable({ departmentId }: { departmentId: string }) {
       columns={[
         {
           accessor: 'name',
+          noWrap: true,
           render: ({ firstName, lastName }) => (
-            <Group gap="xs" wrap="nowrap" className={classes.employeeName}>
+            <Box component="span" ml={40}>
               <IconUser className={classes.icon} />
-              <div>
+              <span>
                 {firstName} {lastName}
-              </div>
-            </Group>
+              </span>
+            </Box>
           ),
         },
         {
@@ -55,16 +56,17 @@ function DepartmentsTable({ companyId }: { companyId: string }) {
       columns={[
         {
           accessor: 'name',
+          noWrap: true,
           render: ({ id, name }) => (
-            <Group ml="lg" gap="xs" wrap="nowrap">
+            <Box component="span" ml={20}>
               <IconChevronRight
                 className={clsx(classes.icon, classes.expandIcon, {
                   [classes.expandIconRotated]: expandedRecordIds.includes(id),
                 })}
               />
               <IconUsers className={classes.icon} />
-              <div>{name}</div>
-            </Group>
+              <span>{name}</span>
+            </Box>
           ),
         },
         { accessor: 'employees', textAlign: 'right', width: 200 },
@@ -92,16 +94,17 @@ export function NestedTablesAsyncExample() {
         {
           accessor: 'name',
           title: 'Company / Department / Employee',
+          noWrap: true,
           render: ({ id, name }) => (
-            <Group gap="xs">
+            <>
               <IconChevronRight
                 className={clsx(classes.icon, classes.expandIcon, {
                   [classes.expandIconRotated]: expandedRecordIds.includes(id),
                 })}
               />
               <IconBuilding className={classes.icon} />
-              <div>{name}</div>
-            </Group>
+              <span>{name}</span>
+            </>
           ),
         },
         { accessor: 'employees', title: 'Employees / Birth date', textAlign: 'right', width: 200 },

diff --git a/app/examples/nested-tables/NestedTablesExample.module.css b/app/examples/nested-tables/NestedTablesExample.module.css
@@ -1,7 +1,8 @@
 .icon {
-  margin-top: rem(-2px);
-  width: rem(14px);
+  width: rem(13px);
   height: auto;
+  vertical-align: rem(-1px);
+  margin-right: rem(8px);
 }
 
 .expandIcon {
@@ -11,7 +12,3 @@
 .expandIconRotated {
   transform: rotate(90deg);
 }
-
-.employeeName {
-  margin-left: calc(var(--mantine-spacing-xl) * 2);
-}
diff --git a/app/examples/nested-tables/NestedTablesExample.tsx b/app/examples/nested-tables/NestedTablesExample.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Group } from '@mantine/core';
+import { Box } from '@mantine/core';
 import { IconBuilding, IconChevronRight, IconUser, IconUsers } from '@tabler/icons-react';
 import { DataTable } from '__PACKAGE__';
 import clsx from 'clsx';
@@ -23,16 +23,17 @@ export function NestedTablesExample() {
         {
           accessor: 'name',
           title: 'Company / Department / Employee',
+          noWrap: true,
           render: ({ id, name }) => (
-            <Group gap="xs">
+            <>
               <IconChevronRight
                 className={clsx(classes.icon, classes.expandIcon, {
                   [classes.expandIconRotated]: expandedCompanyIds.includes(id),
                 })}
               />
               <IconBuilding className={classes.icon} />
-              <div>{name}</div>
-            </Group>
+              <span>{name}</span>
+            </>
           ),
         },
         { accessor: 'employees', title: 'Employees / Birth date', textAlign: 'right', width: 200 },
@@ -48,16 +49,17 @@ export function NestedTablesExample() {
             columns={[
               {
                 accessor: 'name',
+                noWrap: true,
                 render: ({ id, name }) => (
-                  <Group ml="lg" gap="xs" wrap="nowrap">
+                  <Box component="span" ml={20}>
                     <IconChevronRight
                       className={clsx(classes.icon, classes.expandIcon, {
                         [classes.expandIconRotated]: expandedDepartmentIds.includes(id),
                       })}
                     />
-                    <IconUsers size="0.9em" />
-                    <div>{name}</div>
-                  </Group>
+                    <IconUsers className={classes.icon} />
+                    <span>{name}</span>
+                  </Box>
                 ),
               },
               { accessor: 'employees', textAlign: 'right', width: 200 },
@@ -74,12 +76,12 @@ export function NestedTablesExample() {
                     {
                       accessor: 'name',
                       render: ({ firstName, lastName }) => (
-                        <Group gap="xs" wrap="nowrap" className={classes.employeeName}>
+                        <Box component="span" ml={40}>
                           <IconUser className={classes.icon} />
-                          <div>
+                          <span>
                             {firstName} {lastName}
-                          </div>
-                        </Group>
+                          </span>
+                        </Box>
                       ),
                     },
                     {

diff --git a/app/manifest.webmanifest/route.ts b/app/manifest.webmanifest/route.ts
@@ -25,32 +25,26 @@ const data: MetadataRoute.Manifest = {
       sizes: 'any',
       purpose: 'any',
     },
-    {
-      src: `${urlPrefix}/icon.svg`,
-      type: 'image/svg+xml',
-      sizes: 'any',
-      purpose: 'maskable',
-    },
     {
       src: `${urlPrefix}/icon-192.png`,
       type: 'image/png',
       sizes: '192x192',
       purpose: 'any',
     },
-    {
-      src: `${urlPrefix}/icon-192.png`,
-      type: 'image/png',
-      sizes: '192x192',
-      purpose: 'maskable',
-    },
     {
       src: `${urlPrefix}/icon-512.png`,
       type: 'image/png',
       sizes: '512x512',
       purpose: 'any',
     },
     {
-      src: `${urlPrefix}/icon-512.png`,
+      src: `${urlPrefix}/icon-maskable-192.png`,
+      type: 'image/png',
+      sizes: '192x192',
+      purpose: 'maskable',
+    },
+    {
+      src: `${urlPrefix}/icon-maskable-512.png`,
       type: 'image/png',
       sizes: '512x512',
       purpose: 'maskable',

diff --git a/public/icon-maskable-192.png b/public/icon-maskable-192.png
diff --git a/public/icon-maskable-512.png b/public/icon-maskable-512.png