chore: upgrade to @tabler/icons-react@3 from @tabler/icons@1 (ref…

…inedev#5761) * feat(packages): move to tabler/icons-react from outdated tabler/icons * chore(examples): move to tabler/icons-react from outdated tabler/icons * docs(tabler-icons-react): replace tabler/icons usage with tabler/icons-react * chore: add changesets * test(inferencer): update snapshots * chore(devtools-server): update install scripts * docs(blog): update tabler/icons reference * docs(ui): update tabler/icons version in install commands
gaokevin1 · Mar 20, 2024 · 3999116 · 3999116
1 parent 613a1a4
commit 3999116
Show file tree

Hide file tree

Showing 246 changed files with 600 additions and 803 deletions.
diff --git a/.changeset/curvy-actors-itch.md b/.changeset/curvy-actors-itch.md
@@ -0,0 +1,7 @@
+---
+"@refinedev/mantine": minor
+---
+
+Migrated from outdated `@tabler/icons@1` to `@tabler/icons-react@3` to make sure we're using the latest available version of the library without requiring users to pin to a deprecated version.
+
+If your project doesn't include `@tabler/icons` you won't be affected by this change. If you're using `@tabler/icons@1` in your project, you may need to update your dependency to latest version of `@tabler/icons-react` to avoid conflicting dependencies. Practically, this should not introduce any breaking changes to your project and all the icons in `@tabler/icons@1` should also be available in the latest version of `@tabler/icons-react`.
diff --git a/.changeset/three-rivers-invite.md b/.changeset/three-rivers-invite.md
@@ -0,0 +1,7 @@
+---
+"@refinedev/inferencer": minor
+---
+
+Migrated from outdated `@tabler/icons@1` to `@tabler/icons-react@3` to make sure we're using the latest available version of the library without requiring users to pin to a deprecated version.
+
+If your project doesn't include `@tabler/icons` you won't be affected by this change. If you're using `@tabler/icons@1` in your project, you may need to update your dependency to latest version of `@tabler/icons-react` to avoid conflicting dependencies. Practically, this should not introduce any breaking changes to your project and all the icons in `@tabler/icons@1` should also be available in the latest version of `@tabler/icons-react`.
diff --git a/.changeset/tidy-dolphins-care.md b/.changeset/tidy-dolphins-care.md
@@ -0,0 +1,7 @@
+---
+"@refinedev/chakra-ui": minor
+---
+
+Migrated from outdated `@tabler/icons@1` to `@tabler/icons-react@3` to make sure we're using the latest available version of the library without requiring users to pin to a deprecated version.
+
+If your project doesn't include `@tabler/icons` you won't be affected by this change. If you're using `@tabler/icons@1` in your project, you may need to update your dependency to latest version of `@tabler/icons-react` to avoid conflicting dependencies. Practically, this should not introduce any breaking changes to your project and all the icons in `@tabler/icons@1` should also be available in the latest version of `@tabler/icons-react`.
diff --git a/documentation/blog/2023-03-03-ra-chakra-tutorial.md b/documentation/blog/2023-03-03-ra-chakra-tutorial.md
@@ -559,7 +559,7 @@ Create a new file called `pagination.tsx` under the `components` folder. This fi
 ```tsx title="src/components/pagination/index.tsx"
 import { FC } from "react";
 import { HStack, Button, Box } from "@chakra-ui/react";
-import { IconChevronRight, IconChevronLeft } from "@tabler/icons";
+import { IconChevronRight, IconChevronLeft } from "@tabler/icons-react";
 import { usePagination } from "@refinedev/chakra-ui";
 
 import { IconButton } from "@chakra-ui/react";
@@ -1254,7 +1254,11 @@ we create a new folder named `components` under the `src` folder. Under that fol
 
 ```tsx title="src/components/ColumnSorter.tsx"
 import { IconButton } from "@chakra-ui/react";
-import { IconChevronDown, IconSelector, IconChevronUp } from "@tabler/icons";
+import {
+  IconChevronDown,
+  IconSelector,
+  IconChevronUp,
+} from "@tabler/icons-react";
 import { Column } from "@tanstack/react-table";
 
 export const ColumnSorter: React.FC<{ column: Column<any, any> }> = ({
@@ -1371,7 +1375,7 @@ import {
   VStack,
   HStack,
 } from "@chakra-ui/react";
-import { IconFilter, IconX, IconCheck } from "@tabler/icons";
+import { IconFilter, IconX, IconCheck } from "@tabler/icons-react";
 import { Column } from "@tanstack/react-table";
 
 export const ColumnFilter: React.FC<{ column: Column<any, any> }> = ({

diff --git a/documentation/docs/guides-concepts/authentication/auth-pages/chakra.tsx b/documentation/docs/guides-concepts/authentication/auth-pages/chakra.tsx
@@ -14,7 +14,7 @@ export function ChakraUIAuth() {
         "@refinedev/react-table": "latest",
         "react-router-dom": "latest",
         "react-router": "latest",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
         "@chakra-ui/react": "^2.5.1",
       }}
       startRoute="/login"

diff --git a/documentation/docs/guides-concepts/authentication/auth-pages/mantine.tsx b/documentation/docs/guides-concepts/authentication/auth-pages/mantine.tsx
@@ -14,7 +14,7 @@ export function MantineAuth() {
         "@refinedev/react-table": "latest",
         "react-router-dom": "latest",
         "react-router": "latest",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
         "@emotion/react": "^11.8.2",
         "@mantine/core": "^5.10.4",
         "@mantine/hooks": "^5.10.4",

diff --git a/documentation/docs/guides-concepts/forms/server-side-validation-chakra-ui.tsx b/documentation/docs/guides-concepts/forms/server-side-validation-chakra-ui.tsx
@@ -8,7 +8,7 @@ export default function ServerSideValidationChakraUi() {
       showOpenInCodeSandbox={false}
       dependencies={{
         "@refinedev/chakra-ui": "^2.26.17",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
         "@refinedev/core": "^4.45.1",
         "@refinedev/react-router-v6": "^4.5.4",
         "@refinedev/simple-rest": "^4.5.4",

diff --git a/documentation/docs/guides-concepts/forms/server-side-validation-mantine.tsx b/documentation/docs/guides-concepts/forms/server-side-validation-mantine.tsx
@@ -13,7 +13,7 @@ export default function ServerSideValidationMantine() {
         "@refinedev/simple-rest": "^4.5.4",
         "@refinedev/react-table": "^5.6.4",
         "@tanstack/react-table": "^8.2.6",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
         "@emotion/react": "^11.8.2",
         "@mantine/core": "^5.10.4",
         "@mantine/hooks": "^5.10.4",

diff --git a/documentation/docs/guides-concepts/forms/server-side-validation-react-hook-form.tsx b/documentation/docs/guides-concepts/forms/server-side-validation-react-hook-form.tsx
@@ -7,7 +7,7 @@ export default function ServerSideValidationReactHookForm() {
       height={460}
       showOpenInCodeSandbox={false}
       dependencies={{
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
         "@refinedev/core": "^4.45.1",
         "@refinedev/react-router-v6": "^4.5.4",
         "@refinedev/simple-rest": "^4.5.4",

diff --git a/documentation/docs/guides-concepts/general-concepts/auth-pages/chakra.tsx b/documentation/docs/guides-concepts/general-concepts/auth-pages/chakra.tsx
@@ -14,7 +14,7 @@ export function ChakraUIAuth() {
         "@refinedev/react-table": "latest",
         "react-router-dom": "latest",
         "react-router": "latest",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
         "@chakra-ui/react": "^2.5.1",
       }}
       startRoute="/login"

diff --git a/documentation/docs/guides-concepts/general-concepts/layout/chakra.tsx b/documentation/docs/guides-concepts/general-concepts/layout/chakra.tsx
@@ -15,7 +15,7 @@ export function ChakraUILayout() {
         "@refinedev/react-table": "latest",
         "react-router-dom": "latest",
         "react-router": "latest",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
         "@chakra-ui/react": "^2.5.1",
       }}
       startRoute="/my-products"
@@ -115,7 +115,7 @@ import {
 } from "@chakra-ui/react";
 import { List, ShowButton, usePagination } from "@refinedev/chakra-ui";
 import { useTable } from "@refinedev/react-table";
-import { IconChevronLeft, IconChevronRight } from "@tabler/icons";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import { ColumnDef, flexRender } from "@tanstack/react-table";
 
 export const ProductList = () => {

diff --git a/documentation/docs/guides-concepts/general-concepts/layout/mantine.tsx b/documentation/docs/guides-concepts/general-concepts/layout/mantine.tsx
@@ -15,7 +15,7 @@ export function MantineLayout() {
         "@refinedev/react-table": "latest",
         "react-router-dom": "latest",
         "react-router": "latest",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
         "@emotion/react": "^11.8.2",
         "@mantine/core": "^5.10.4",
         "@mantine/hooks": "^5.10.4",

diff --git a/documentation/docs/guides-concepts/tables/example/chakra-ui.tsx b/documentation/docs/guides-concepts/tables/example/chakra-ui.tsx
@@ -11,7 +11,7 @@ export default function BaseCoreTable() {
         "@tanstack/react-table": "latest",
         "@refinedev/chakra-ui": "latest",
         "@chakra-ui/react": "^2.5.1",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
       }}
       startRoute="/"
       files={{
@@ -257,7 +257,7 @@ type PaginationProps = {
 export const ColumnSorterTsxCode = `
 import React, { useState } from "react";
 import { IconButton } from "@chakra-ui/react";
-import { IconChevronDown, IconChevronUp, IconSelector } from "@tabler/icons";
+import { IconChevronDown, IconChevronUp, IconSelector } from "@tabler/icons-react";
 
 import type { SortDirection } from "@tanstack/react-table";
 
@@ -304,7 +304,7 @@ import {
     VStack,
     HStack,
 } from "@chakra-ui/react";
-import { IconFilter, IconX, IconCheck } from "@tabler/icons";
+import { IconFilter, IconX, IconCheck } from "@tabler/icons-react";
 
 
 interface ColumnButtonProps {

diff --git a/documentation/docs/guides-concepts/tables/example/mantine.tsx b/documentation/docs/guides-concepts/tables/example/mantine.tsx
@@ -11,7 +11,7 @@ export default function BaseCoreTable() {
         "@refinedev/react-table": "latest",
         "@tanstack/react-table": "latest",
         "@mantine/core": "^5.10.4",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
       }}
       startRoute="/"
       files={{
@@ -188,7 +188,7 @@ interface IProduct {
 
 export const ColumnSorterTsxCode = `
 import { ActionIcon } from "@mantine/core";
-import { IconChevronDown, IconSelector, IconChevronUp } from "@tabler/icons";
+import { IconChevronDown, IconSelector, IconChevronUp } from "@tabler/icons-react";
 
 export interface ColumnButtonProps {
     column: Column<any, any>; // eslint-disable-line
@@ -224,7 +224,7 @@ export const ColumnFilterTsxCode = `
 import React, { useState } from "react";
 import { Column } from "@tanstack/react-table";
 import { TextInput, Menu, ActionIcon, Stack, Group } from "@mantine/core";
-import { IconFilter, IconX, IconCheck } from "@tabler/icons";
+import { IconFilter, IconX, IconCheck } from "@tabler/icons-react";
 
 interface ColumnButtonProps {
     column: Column<any, any>; // eslint-disable-line

diff --git a/documentation/docs/packages/tanstack-table/examples/chakra-ui.tsx b/documentation/docs/packages/tanstack-table/examples/chakra-ui.tsx
@@ -11,7 +11,7 @@ export default function BaseCoreTable() {
         "@tanstack/react-table": "latest",
         "@refinedev/chakra-ui": "latest",
         "@chakra-ui/react": "^2.5.1",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
       }}
       startRoute="/"
       files={{
@@ -257,7 +257,7 @@ type PaginationProps = {
 export const ColumnSorterTsxCode = `
 import React, { useState } from "react";
 import { IconButton } from "@chakra-ui/react";
-import { IconChevronDown, IconChevronUp, IconSelector } from "@tabler/icons";
+import { IconChevronDown, IconChevronUp, IconSelector } from "@tabler/icons-react";
 
 import type { SortDirection } from "@tanstack/react-table";
 
@@ -304,7 +304,7 @@ import {
     VStack,
     HStack,
 } from "@chakra-ui/react";
-import { IconFilter, IconX, IconCheck } from "@tabler/icons";
+import { IconFilter, IconX, IconCheck } from "@tabler/icons-react";
 
 
 interface ColumnButtonProps {

diff --git a/documentation/docs/packages/tanstack-table/examples/mantine.tsx b/documentation/docs/packages/tanstack-table/examples/mantine.tsx
@@ -11,7 +11,7 @@ export default function BaseCoreTable() {
         "@refinedev/react-table": "latest",
         "@tanstack/react-table": "latest",
         "@mantine/core": "^5.10.4",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
       }}
       startRoute="/"
       files={{
@@ -188,7 +188,7 @@ interface IProduct {
 
 export const ColumnSorterTsxCode = `
 import { ActionIcon } from "@mantine/core";
-import { IconChevronDown, IconSelector, IconChevronUp } from "@tabler/icons";
+import { IconChevronDown, IconSelector, IconChevronUp } from "@tabler/icons-react";
 
 export interface ColumnButtonProps {
     column: Column<any, any>; // eslint-disable-line
@@ -224,7 +224,7 @@ export const ColumnFilterTsxCode = `
 import React, { useState } from "react";
 import { Column } from "@tanstack/react-table";
 import { TextInput, Menu, ActionIcon, Stack, Group } from "@mantine/core";
-import { IconFilter, IconX, IconCheck } from "@tabler/icons";
+import { IconFilter, IconX, IconCheck } from "@tabler/icons-react";
 
 interface ColumnButtonProps {
     column: Column<any, any>; // eslint-disable-line

diff --git a/...mentation/docs/ui-integrations/chakra-ui/components/basic-views/create/index.md b/...mentation/docs/ui-integrations/chakra-ui/components/basic-views/create/index.md
@@ -304,7 +304,7 @@ import { CreateButton } from "@refinedev/chakra-ui";
 // visible-block-start
 import { Create } from "@refinedev/chakra-ui";
 /* highlight-next-line */
-import { IconMoodSmile } from "@tabler/icons";
+import { IconMoodSmile } from "@tabler/icons-react";
 
 const PostCreate: React.FC = () => {
   return (

diff --git a/documentation/docs/ui-integrations/chakra-ui/components/basic-views/edit/index.md b/documentation/docs/ui-integrations/chakra-ui/components/basic-views/edit/index.md
@@ -618,7 +618,7 @@ import dataProvider from "@refinedev/simple-rest";
 // visible-block-start
 import { Edit } from "@refinedev/chakra-ui";
 /* highlight-next-line */
-import { IconMoodSmile } from "@tabler/icons";
+import { IconMoodSmile } from "@tabler/icons-react";
 
 const PostEdit: React.FC = () => {
   return (

diff --git a/documentation/docs/ui-integrations/chakra-ui/components/basic-views/show/index.md b/documentation/docs/ui-integrations/chakra-ui/components/basic-views/show/index.md
@@ -470,7 +470,7 @@ import dataProvider from "@refinedev/simple-rest";
 // visible-block-start
 import { Show } from "@refinedev/chakra-ui";
 /* highlight-next-line */
-import { IconMoodSmile } from "@tabler/icons";
+import { IconMoodSmile } from "@tabler/icons-react";
 
 const PostShow: React.FC = () => {
   return (

diff --git a/...ntation/docs/ui-integrations/chakra-ui/components/fields/boolean-field/index.md b/...ntation/docs/ui-integrations/chakra-ui/components/fields/boolean-field/index.md
@@ -57,7 +57,7 @@ import {
 } from "@chakra-ui/react";
 import { useTable } from "@refinedev/react-table";
 import { ColumnDef, flexRender } from "@tanstack/react-table";
-import { IconX, IconCheck } from "@tabler/icons";
+import { IconX, IconCheck } from "@tabler/icons-react";
 
 const PostList: React.FC = () => {
   const columns = React.useMemo<ColumnDef<IPost>[]>(

diff --git a/documentation/docs/ui-integrations/chakra-ui/introduction/index.md b/documentation/docs/ui-integrations/chakra-ui/introduction/index.md
@@ -12,7 +12,7 @@ import Example from "./previews/example.tsx";
 
 Installing the package is as simple as just by running the following command without any additional configuration:
 
-<InstallPackagesCommand args="@refinedev/chakra-ui @chakra-ui/react @refinedev/react-table @refinedev/react-hook-form @tanstack/react-table react-hook-form @tabler/icons@1"/>
+<InstallPackagesCommand args="@refinedev/chakra-ui @chakra-ui/react @refinedev/react-table @refinedev/react-hook-form @tanstack/react-table react-hook-form @tabler/icons-react"/>
 
 ## Usage
 
@@ -185,7 +185,7 @@ interface IProduct {
 ```tsx title="components/pagination.tsx"
 import React from "react";
 import { HStack, Button, Box } from "@chakra-ui/react";
-import { IconChevronRight, IconChevronLeft } from "@tabler/icons";
+import { IconChevronRight, IconChevronLeft } from "@tabler/icons-react";
 import { usePagination } from "@refinedev/chakra-ui";
 
 import { IconButton } from "@chakra-ui/react";

diff --git a/documentation/docs/ui-integrations/chakra-ui/introduction/previews/auth-page.tsx b/documentation/docs/ui-integrations/chakra-ui/introduction/previews/auth-page.tsx
@@ -9,7 +9,7 @@ export default function AuthPage() {
       initialPercentage={40}
       dependencies={{
         "@refinedev/chakra-ui": "^2.26.17",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
         "@refinedev/core": "^4.45.1",
         "@refinedev/react-router-v6": "^4.5.4",
         "@refinedev/simple-rest": "^4.5.4",

diff --git a/documentation/docs/ui-integrations/chakra-ui/introduction/previews/basic-views.tsx b/documentation/docs/ui-integrations/chakra-ui/introduction/previews/basic-views.tsx
@@ -8,7 +8,7 @@ export default function BasicViews() {
       initialPercentage={40}
       dependencies={{
         "@refinedev/chakra-ui": "^2.26.17",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
         "@refinedev/core": "^4.45.1",
         "@refinedev/react-router-v6": "^4.5.4",
         "@refinedev/simple-rest": "^4.5.4",
@@ -62,7 +62,7 @@ export * from "./create";
 const PaginationTsxCode = /* jsx */ `
 import React from "react";
 import { HStack, Button, Box } from "@chakra-ui/react";
-import { IconChevronRight, IconChevronLeft } from "@tabler/icons";
+import { IconChevronRight, IconChevronLeft } from "@tabler/icons-react";
 import { usePagination } from "@refinedev/chakra-ui";
 
 import { IconButton } from "@chakra-ui/react";

diff --git a/documentation/docs/ui-integrations/chakra-ui/introduction/previews/example.tsx b/documentation/docs/ui-integrations/chakra-ui/introduction/previews/example.tsx
@@ -8,7 +8,7 @@ export default function Example() {
       previewOnly
       dependencies={{
         "@refinedev/chakra-ui": "^2.26.17",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
         "@refinedev/core": "^4.45.1",
         "@refinedev/react-router-v6": "^4.5.4",
         "@refinedev/simple-rest": "^4.5.4",
@@ -189,7 +189,7 @@ export default App;
 const PaginationTsxCode = /* jsx */ `
 import React from "react";
 import { HStack, Button, Box } from "@chakra-ui/react";
-import { IconChevronRight, IconChevronLeft } from "@tabler/icons";
+import { IconChevronRight, IconChevronLeft } from "@tabler/icons-react";
 import { usePagination } from "@refinedev/chakra-ui";
 
 import { IconButton } from "@chakra-ui/react";

diff --git a/documentation/docs/ui-integrations/chakra-ui/introduction/previews/layout-next-js.tsx b/documentation/docs/ui-integrations/chakra-ui/introduction/previews/layout-next-js.tsx
@@ -8,7 +8,7 @@ export default function LayoutNextjs() {
       hidePreview
       dependencies={{
         "@refinedev/chakra-ui": "^2.26.17",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
         "@refinedev/core": "^4.45.1",
         "@refinedev/react-router-v6": "^4.5.4",
         "@refinedev/simple-rest": "^4.5.4",

diff --git a/...entation/docs/ui-integrations/chakra-ui/introduction/previews/layout-react-router-dom.tsx b/...entation/docs/ui-integrations/chakra-ui/introduction/previews/layout-react-router-dom.tsx
@@ -10,7 +10,7 @@ export default function LayoutReactRouterDom() {
       initialPercentage={35}
       dependencies={{
         "@refinedev/chakra-ui": "^2.26.17",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
         "@refinedev/core": "^4.45.1",
         "@refinedev/react-router-v6": "^4.5.4",
         "@refinedev/simple-rest": "^4.5.4",
@@ -44,7 +44,7 @@ export default function LayoutReactRouterDom() {
 const PaginationTsxCode = /* jsx */ `
 import React from "react";
 import { HStack, Button, Box } from "@chakra-ui/react";
-import { IconChevronRight, IconChevronLeft } from "@tabler/icons";
+import { IconChevronRight, IconChevronLeft } from "@tabler/icons-react";
 import { usePagination } from "@refinedev/chakra-ui";
 
 import { IconButton } from "@chakra-ui/react";

diff --git a/documentation/docs/ui-integrations/chakra-ui/introduction/previews/layout-remix.tsx b/documentation/docs/ui-integrations/chakra-ui/introduction/previews/layout-remix.tsx
@@ -8,7 +8,7 @@ export default function LayoutRemix() {
       hidePreview
       dependencies={{
         "@refinedev/chakra-ui": "^2.26.17",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
         "@refinedev/core": "^4.45.1",
         "@refinedev/react-router-v6": "^4.5.4",
         "@refinedev/simple-rest": "^4.5.4",

diff --git a/documentation/docs/ui-integrations/chakra-ui/introduction/previews/theming.tsx b/documentation/docs/ui-integrations/chakra-ui/introduction/previews/theming.tsx
@@ -10,7 +10,7 @@ export default function Usage() {
       showOpenInCodeSandbox={false}
       dependencies={{
         "@refinedev/chakra-ui": "^2.26.17",
-        "@tabler/icons": "^1.119.0",
+        "@tabler/icons-react": "^3.1.0",
         "@refinedev/core": "^4.45.1",
         "@refinedev/react-router-v6": "^4.5.4",
         "@refinedev/simple-rest": "^4.5.4",
@@ -101,7 +101,7 @@ export default authProvider;
 const PaginationTsxCode = /* jsx */ `
 import React from "react";
 import { HStack, Button, Box } from "@chakra-ui/react";
-import { IconChevronRight, IconChevronLeft } from "@tabler/icons";
+import { IconChevronRight, IconChevronLeft } from "@tabler/icons-react";
 import { usePagination } from "@refinedev/chakra-ui";
 
 import { IconButton } from "@chakra-ui/react";