Merge branch 'origin/main' in pr/mazipan/39\nfixed lint errors

Kuechlin · Jul 28, 2022 · e28783d · e28783d
2 parents cab5355 + 1cc7db1
commit e28783d
Show file tree

Hide file tree

Showing 39 changed files with 1,997 additions and 2,023 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,2 +1,4 @@
 *.yml
-stats.html
+stats.html
+dist
+dist-docs
diff --git a/.prettierrc b/.prettierrc
@@ -1,7 +1,8 @@
 {
-    "trailingComma": "es5",
-    "tabWidth": 2,
-    "printWidth": 120,
-    "semi": true,
-    "singleQuote": true
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "printWidth": 120,
+  "semi": true,
+  "singleQuote": true,
+  "endOfLine": "lf"
 }
diff --git a/README.md b/README.md
@@ -23,48 +23,43 @@ With pnpm
 ## Usage
 
 ```typescript
-import {
-    DataGrid,
-    stringFilterFn,
-    numberFilterFn,
-    dateFilterFn,
-} from 'mantine-data-grid';
+import { DataGrid, stringFilterFn, numberFilterFn, dateFilterFn } from 'mantine-data-grid';
 
 function Demo() {
-    return (
-        <DataGrid
-            data={/* data source */}
-            size="md"
-            withGlobalFilter
-            columns={[
-                {
-                    accessorKey: 'text',
-                    header: 'Text that is too long for a Header',
-                    filterFn: stringFilterFn,
-                },
-                {
-                    header: 'Animal',
-                    columns: [
-                        { accessorKey: 'cat', filterFn: stringFilterFn },
-                        {
-                            accessorKey: 'fish',
-                            filterFn: stringFilterFn,
-                        },
-                    ],
-                },
-                {
-                    accessorKey: 'city',
-                    filterFn: stringFilterFn,
-                },
-                { accessorKey: 'value', filterFn: numberFilterFn },
-                {
-                    accessorKey: 'date',
-                    cell: (cell) => cell.getValue()?.toLocaleDateString(),
-                    filterFn: dateFilterFn,
-                },
-            ]}
-        />
-    );
+  return (
+    <DataGrid
+      data={/* data source */}
+      size="md"
+      withGlobalFilter
+      columns={[
+        {
+          accessorKey: 'text',
+          header: 'Text that is too long for a Header',
+          filterFn: stringFilterFn,
+        },
+        {
+          header: 'Animal',
+          columns: [
+            { accessorKey: 'cat', filterFn: stringFilterFn },
+            {
+              accessorKey: 'fish',
+              filterFn: stringFilterFn,
+            },
+          ],
+        },
+        {
+          accessorKey: 'city',
+          filterFn: stringFilterFn,
+        },
+        { accessorKey: 'value', filterFn: numberFilterFn },
+        {
+          accessorKey: 'date',
+          cell: (cell) => cell.getValue()?.toLocaleDateString(),
+          filterFn: dateFilterFn,
+        },
+      ]}
+    />
+  );
 }
 ```
 
@@ -76,23 +71,23 @@ function Demo() {
 
 ## Roadmap
 
--   [x] Simple Data Grid
--   [x] Virualized Data Grid
--   [x] Global Filter
--   [x] Column Filter
-    -   [x] string filter
-    -   [x] number filter
-    -   [x] date filter
-    -   [x] boolean filter
-    -   [x] custom fitler
--   [x] Column Sizing
--   [x] Column sorting
--   [ ] Scrolling
-    -   [ ] Fixed Header
-    -   [ ] Column pinning
--   [ ] Column Ordering
--   [x] Pagination
--   [x] Styles Api
--   [x] Docs
--   [x] Create npm package
--   [ ] Add tests
+- [x] Simple Data Grid
+- [x] Virualized Data Grid
+- [x] Global Filter
+- [x] Column Filter
+  - [x] string filter
+  - [x] number filter
+  - [x] date filter
+  - [x] boolean filter
+  - [x] custom fitler
+- [x] Column Sizing
+- [x] Column sorting
+- [ ] Scrolling
+  - [ ] Fixed Header
+  - [ ] Column pinning
+- [ ] Column Ordering
+- [x] Pagination
+- [x] Styles Api
+- [x] Docs
+- [x] Create npm package
+- [ ] Add tests
diff --git a/docs/App.tsx b/docs/App.tsx
@@ -0,0 +1,21 @@
+import { AppShell, ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core';
+import { useState } from 'react';
+import Routes from './pages/Routes';
+import Navbar from './components/Navbar';
+import Header from './components/Header';
+
+export default function App() {
+  const [colorScheme, setColorScheme] = useState<ColorScheme>('dark');
+  const toggleColorScheme = (value?: ColorScheme) =>
+    setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
+
+  return (
+    <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
+      <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
+        <AppShell navbar={<Navbar />} header={<Header />}>
+          <Routes />
+        </AppShell>
+      </MantineProvider>
+    </ColorSchemeProvider>
+  );
+}
diff --git a/docs/components/App.tsx b/docs/components/App.tsx
diff --git a/docs/components/CodeDemo.tsx b/docs/components/CodeDemo.tsx
@@ -1,32 +1,21 @@
-import { Card, Tabs } from '@mantine/core';
-import { useToggle } from '@mantine/hooks';
+import { Tabs } from '@mantine/core';
 import { Prism } from '@mantine/prism';
-import { ReactNode, useState } from 'react';
+import { ReactNode } from 'react';
 import { Code, Components } from 'tabler-icons-react';
 
-export default function CodeDemo({
-    code,
-    children,
-}: {
-    code: string;
-    children: ReactNode;
-}) {
-    return (
-        <Tabs variant="pills" defaultValue="comp" color="gray">
-            <Tabs.List position="center" grow>
-                <Tabs.Tab
-                    value="comp"
-                    icon={<Components />}
-                    children="Component"
-                />
-                <Tabs.Tab value="code" children="Code" icon={<Code />} />
-            </Tabs.List>
-            <Tabs.Panel value="comp" pt="sm">
-                {children}
-            </Tabs.Panel>
-            <Tabs.Panel value="code" pt="sm">
-                <Prism withLineNumbers language="tsx" children={code} />
-            </Tabs.Panel>
-        </Tabs>
-    );
+export default function CodeDemo({ code, children }: { code: string; children: ReactNode }) {
+  return (
+    <Tabs variant="pills" defaultValue="comp">
+      <Tabs.List position="right">
+        <Tabs.Tab value="comp" icon={<Components />} children="Component" />
+        <Tabs.Tab value="code" children="Code" icon={<Code />} />
+      </Tabs.List>
+      <Tabs.Panel value="comp" pt="sm">
+        {children}
+      </Tabs.Panel>
+      <Tabs.Panel value="code" pt="sm">
+        <Prism withLineNumbers language="tsx" children={code} />
+      </Tabs.Panel>
+    </Tabs>
+  );
 }