fix: mantine as peer dependency #169

Kuechlin · May 25, 2023 · 7b22298 · 7b22298
1 parent c9cad10
commit 7b22298
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 43 deletions.
diff --git a/package.json b/package.json
@@ -35,12 +35,12 @@
     "@mantine/core": "^6.0.6",
     "@mantine/dates": "^6.0.6",
     "@mantine/hooks": "^6.0.6",
+    "@tabler/icons-react": "^2.20.0",
     "@tanstack/react-table": "8.8.5",
     "@tanstack/react-virtual": "3.0.0-beta.26",
     "dayjs": "^1.11.7",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "tabler-icons-react": "^1.56.0"
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "17.5.1",
@@ -73,6 +73,10 @@
     "vite": "4.2.1"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.10.6",
+    "@mantine/core": "^6.0.6",
+    "@mantine/dates": "^6.0.6",
+    "@mantine/hooks": "^6.0.6",
     "dayjs": "^1.11.7",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/ColumnFilter.tsx b/src/ColumnFilter.tsx
@@ -1,8 +1,8 @@
 import { ActionIcon, Button, Group, Menu, Stack } from '@mantine/core';
 import { useSetState } from '@mantine/hooks';
+import { IconCheck, IconFilter, IconX } from '@tabler/icons-react';
 import { Column } from '@tanstack/react-table';
 import { createElement, useState } from 'react';
-import { Check, Filter, X } from 'tabler-icons-react';
 import { DataGridFilterFn, isDataGridFilter } from './filters/types';
 
 export interface ColumnFilterProps {
@@ -55,7 +55,7 @@ export const ColumnFilter = function ColumnFilter({ column, className, color, fi
       <Menu.Target>
         <ActionIcon
           size="xs"
-          children={<Filter size={16} />}
+          children={<IconFilter size={16} />}
           onClick={handleOpen}
           className={className}
           variant={column.getIsFiltered() ? 'light' : 'transparent'}
@@ -69,15 +69,15 @@ export const ColumnFilter = function ColumnFilter({ column, className, color, fi
 
             <Group position="apart">
               <Button
-                children={<X />}
+                children={<IconX />}
                 color="gray"
                 onClick={handleClear}
                 compact
                 type="reset"
                 aria-label="Reste Filter"
               />
               <Button
-                children={<Check />}
+                children={<IconCheck />}
                 onClick={handleSave}
                 compact
                 variant="outline"

diff --git a/src/ColumnSorter.tsx b/src/ColumnSorter.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon } from '@mantine/core';
+import { IconChevronDown, IconSelector } from '@tabler/icons-react';
 import { Column } from '@tanstack/react-table';
-import { ChevronDown, Selector } from 'tabler-icons-react';
 
 export interface ColumnSorterProps {
   column: Column<any, any>;
@@ -21,7 +21,7 @@ export const ColumnSorter = ({ column, className, color }: ColumnSorterProps) =>
       }}
       variant={sorted ? 'light' : 'transparent'}
       color={sorted ? color : 'gray'}
-      children={sorted ? <ChevronDown size={16} /> : <Selector size={16} />}
+      children={sorted ? <IconChevronDown size={16} /> : <IconSelector size={16} />}
     />
   );
 };
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
@@ -1,30 +1,29 @@
-import { LoadingOverlay, ScrollArea, Stack, Table as MantineTable, Text } from '@mantine/core';
+import { LoadingOverlay, Table as MantineTable, ScrollArea, Stack, Text } from '@mantine/core';
+import { IconBoxOff } from '@tabler/icons-react';
 import {
   ColumnFiltersState,
   ExpandedState,
-  flexRender,
-  functionalUpdate,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
   OnChangeFn,
   PaginationState,
   Row,
   RowData,
   RowSelectionState,
   SortingState,
   Table,
+  flexRender,
+  functionalUpdate,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { Fragment, RefCallback, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { BoxOff } from 'tabler-icons-react';
 import { ColumnFilter } from './ColumnFilter';
 import { ColumnSorter } from './ColumnSorter';
 import useStyles from './DataGrid.styles';
-import { isDataGridFilter } from './filters';
 import { GlobalFilter, globalFilterFn } from './GlobalFilter';
 import { DEFAULT_INITIAL_SIZE, Pagination as DefaultPagination } from './Pagination';
 import { getRowSelectionColumn } from './RowSelection';
@@ -36,6 +35,7 @@ import {
   DefaultHeaderRow,
   DefaultHeaderWrapper,
 } from './TableComponents';
+import { isDataGridFilter } from './filters';
 import { DataGridProps } from './types';
 
 export function useDataGrid<TData extends RowData>(): [Table<TData> | null, RefCallback<Table<TData>>] {
@@ -431,7 +431,7 @@ export function DataGrid<TData extends RowData>({
                 <td style={{ width: '100%' }}>
                   {empty || (
                     <Stack align="center" spacing="xs">
-                      <BoxOff size={64} />
+                      <IconBoxOff size={64} />
                       <Text weight="bold">No Data</Text>
                     </Stack>
                   )}

diff --git a/src/GlobalFilter.tsx b/src/GlobalFilter.tsx
@@ -1,7 +1,7 @@
 import { TextInput } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
 import { FilterFn, Table } from '@tanstack/react-table';
 import { isValidElement, useEffect, useState } from 'react';
-import { Search } from 'tabler-icons-react';
 import { renderToString } from 'react-dom/server';
 import { DataGridLocale } from './types';
 
@@ -32,7 +32,7 @@ export function GlobalFilter<TData>({ table, className, locale }: GlobalFilterPr
       value={value}
       onChange={(e) => setValue(e.target.value)}
       placeholder={locale?.globalSearch || 'Search...'}
-      rightSection={<Search />}
+      rightSection={<IconSearch />}
       className={className}
     />
   );

diff --git a/src/filters/dateFilter.tsx b/src/filters/dateFilter.tsx
@@ -1,8 +1,8 @@
 import { DatePickerInput } from '@mantine/dates';
+import { IconFilter } from '@tabler/icons-react';
 import dayjs, { Dayjs } from 'dayjs';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
-import { Filter } from 'tabler-icons-react';
 import { createOperatorFilter, OperatorFilterOptions } from './createOperatorFilter';
 import { DataGridFilterInput, DataGridFilterOperator } from './types';
 
@@ -46,7 +46,7 @@ export function createDateFilterInput(withTime = false): DataGridFilterInput<Dat
             {...rest}
             value={[parseDate(value[0]), parseDate(value[1])]}
             onChange={(value) => onChange([toString(value[0]), toString(value[1])])}
-            rightSection={<Filter size={20} />}
+            rightSection={<IconFilter size={20} />}
           />
           {/*withTime && (
             <TimeRangeInput
@@ -65,7 +65,7 @@ export function createDateFilterInput(withTime = false): DataGridFilterInput<Dat
             {...rest}
             value={parseDate(value)}
             onChange={(value) => onChange(toString(value))}
-            rightSection={<Filter size={20} />}
+            rightSection={<IconFilter size={20} />}
           />
           {/*withTime && (
             <TimeInput

diff --git a/src/filters/numberFilter.tsx b/src/filters/numberFilter.tsx
@@ -1,6 +1,6 @@
 import { Group, NumberInput } from '@mantine/core';
-import { Filter } from 'tabler-icons-react';
-import { createOperatorFilter, OperatorFilterOptions } from './createOperatorFilter';
+import { IconFilter } from '@tabler/icons-react';
+import { OperatorFilterOptions, createOperatorFilter } from './createOperatorFilter';
 import { DataGridFilterInput, DataGridFilterOperator } from './types';
 
 type NumberFilterValue = number | [number, number];
@@ -16,7 +16,7 @@ export const NumberFilterInput: DataGridFilterInput<NumberFilterValue> = ({ onCh
       {...rest}
       value={value}
       onChange={(val) => onChange(Number(val) ?? 0)}
-      rightSection={<Filter size={20} />}
+      rightSection={<IconFilter size={20} />}
       hideControls
     />
   );

diff --git a/src/filters/stringFilter.tsx b/src/filters/stringFilter.tsx
@@ -1,5 +1,5 @@
 import { TextInput } from '@mantine/core';
-import { Filter } from 'tabler-icons-react';
+import { IconFilter } from '@tabler/icons-react';
 import { createOperatorFilter, OperatorFilterOptions } from './createOperatorFilter';
 import { DataGridFilterInput, DataGridFilterOperator } from './types';
 
@@ -9,7 +9,7 @@ export const StringFilterInput: DataGridFilterInput<string> = ({ onChange, ...re
   <TextInput
     {...rest}
     onChange={(e) => onChange(e.target.value)}
-    rightSection={<Filter size={20} />}
+    rightSection={<IconFilter size={20} />}
     aria-label="Filter value"
   />
 );

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,7 +1,7 @@
 import { resolve } from 'path';
-import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { visualizer } from 'rollup-plugin-visualizer';
+import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -15,12 +15,20 @@ export default defineConfig({
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
-      external: ['dayjs', 'react', 'react-dom', '@mantine/core', '@mantine/dates', '@mantine/hooks'],
+      external: [
+        'dayjs',
+        'react',
+        'react/jsx-runtime',
+        'react-dom/server',
+        '@mantine/core',
+        '@mantine/dates',
+        '@mantine/hooks',
+      ],
       output: {
-        // Provide global variables to use in the UMD build
-        // for externalized deps
         globals: {
           react: 'React',
+          'react-dom/server': 'ReactDom',
+          dayjs: 'dayjs',
         },
       },
     },