diff --git a/apps/nextjs/src/app/[locale]/(main)/integrations/_integration-secret-icons.ts b/apps/nextjs/src/app/[locale]/(main)/integrations/_integration-secret-icons.ts index f0d35442f..32b528f9a 100644 --- a/apps/nextjs/src/app/[locale]/(main)/integrations/_integration-secret-icons.ts +++ b/apps/nextjs/src/app/[locale]/(main)/integrations/_integration-secret-icons.ts @@ -1,12 +1,9 @@ import type { IntegrationSecretKind } from "@homarr/definitions"; -import type { TablerIconsProps } from "@homarr/ui"; +import type { TablerIcon } from "@homarr/ui"; import { IconKey, IconPassword, IconUser } from "@homarr/ui"; export const integrationSecretIcons = { username: IconUser, apiKey: IconKey, password: IconPassword, -} satisfies Record< - IntegrationSecretKind, - (props: TablerIconsProps) => JSX.Element ->; +} satisfies Record; diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx index 0112343e1..9019214d0 100644 --- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx +++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx @@ -4,7 +4,7 @@ import { api } from "@homarr/api/server"; import { capitalize } from "@homarr/common"; import type { TranslationObject } from "@homarr/translation"; import { getScopedI18n } from "@homarr/translation/server"; -import type { TablerIconsProps } from "@homarr/ui"; +import type { TablerIcon } from "@homarr/ui"; import { AccordionControl, AccordionItem, @@ -84,7 +84,7 @@ export default async function BoardSettingsPage({ type AccordionItemForProps = PropsWithChildren<{ value: keyof TranslationObject["board"]["setting"]["section"]; - icon: (props: TablerIconsProps) => JSX.Element; + icon: TablerIcon; danger?: boolean; noPadding?: boolean; }>; diff --git a/apps/nextjs/src/components/board/sections/category/category-menu.tsx b/apps/nextjs/src/components/board/sections/category/category-menu.tsx index 182ecbce8..a14189224 100644 --- a/apps/nextjs/src/components/board/sections/category/category-menu.tsx +++ b/apps/nextjs/src/components/board/sections/category/category-menu.tsx @@ -4,7 +4,7 @@ import React, { useMemo } from "react"; import { useAtomValue } from "jotai"; import { useScopedI18n } from "@homarr/translation/client"; -import type { TablerIconsProps } from "@homarr/ui"; +import type { TablerIcon } from "@homarr/ui"; import { ActionIcon, IconDotsVertical, @@ -120,7 +120,7 @@ const useNonEditModeActions = (_category: CategorySection) => { }; interface ActionDefinition { - icon: (props: TablerIconsProps) => JSX.Element; + icon: TablerIcon; label: string; onClick: () => void; color?: string; diff --git a/apps/nextjs/src/components/layout/navigation.tsx b/apps/nextjs/src/components/layout/navigation.tsx index e33830837..dab33742d 100644 --- a/apps/nextjs/src/components/layout/navigation.tsx +++ b/apps/nextjs/src/components/layout/navigation.tsx @@ -1,4 +1,4 @@ -import type { TablerIconsProps } from "@homarr/ui"; +import type { TablerIcon } from "@homarr/ui"; import { AppShellNavbar, AppShellSection, ScrollArea } from "@homarr/ui"; import type { ClientNavigationLink } from "./navigation-link"; @@ -51,7 +51,7 @@ export const MainNavigation = ({ interface CommonNavigationLinkProps { label: string; - icon: (props: TablerIconsProps) => JSX.Element; + icon: TablerIcon; } interface NavigationLinkHref extends CommonNavigationLinkProps { diff --git a/packages/spotlight/ReadMe.md b/packages/spotlight/ReadMe.md index 5f6501798..7705d3373 100644 --- a/packages/spotlight/ReadMe.md +++ b/packages/spotlight/ReadMe.md @@ -10,15 +10,15 @@ The [SpotlightActionData](./src/type.ts) is the data structure that is used to d #### Common properties -| Name | Type | Description | -| ------------------------------ | ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | -| id | `string` | The id of the action. | -| title | `string \| (t: TranslationFunction) => string` | The title of the action. Either static or generated with translation function | -| description | `string \| (t: TranslationFunction) => string` | The description of the action. Either static or generated with translation function | -| icon | `string \| (props: TablerIconProps) => JSX.Element` | The icon of the action. Either a url to an image or a TablerIcon | -| group | `string` | The group of the action. By default the groups all, web and action exist. | -| ignoreSearchAndOnlyShowInGroup | `boolean` | If true, the action will only be shown in the group and not in the search results. | -| type | `'link' \| 'button'` | The type of the action. Either link or button | +| Name | Type | Description | +| ------------------------------ | ------------------------------------------------------------- | ----------------------------------------------------------------------------------- | +| id | `string` | The id of the action. | +| title | `string \| (t: TranslationFunction) => string` | The title of the action. Either static or generated with translation function | +| description | `string \| (t: TranslationFunction) => string` | The description of the action. Either static or generated with translation function | +| icon | `string \| TablerIcon` | The icon of the action. Either a url to an image or a TablerIcon | +| group | `string` | The group of the action. By default the groups all, web and action exist. | +| ignoreSearchAndOnlyShowInGroup | `boolean` | If true, the action will only be shown in the group and not in the search results. | +| type | `'link' \| 'button'` | The type of the action. Either link or button | #### Properties for links diff --git a/packages/spotlight/src/type.ts b/packages/spotlight/src/type.ts index b8d72da87..3f769f71b 100644 --- a/packages/spotlight/src/type.ts +++ b/packages/spotlight/src/type.ts @@ -2,7 +2,7 @@ import type { TranslationFunction, TranslationObject, } from "@homarr/translation"; -import type { TablerIconsProps } from "@homarr/ui"; +import type { TablerIcon } from "@homarr/ui"; export type SpotlightActionGroup = keyof TranslationObject["common"]["search"]["group"]; @@ -12,7 +12,7 @@ interface BaseSpotlightAction { title: string | ((t: TranslationFunction) => string); description: string | ((t: TranslationFunction) => string); group: Exclude; // actions can not be assigned to the "all" group - icon: ((props: TablerIconsProps) => JSX.Element) | string; + icon: TablerIcon | string; ignoreSearchAndOnlyShowInGroup?: boolean; } diff --git a/packages/ui/index.ts b/packages/ui/index.ts index bb61c9a4e..e1b845631 100644 --- a/packages/ui/index.ts +++ b/packages/ui/index.ts @@ -1,4 +1,8 @@ -export * from "./src"; +import type { Icon123 } from "@tabler/icons-react"; + export * from "@mantine/core"; export * from "@mantine/dates"; export * from "@tabler/icons-react"; +export * from "./src"; + +export type TablerIcon = typeof Icon123; diff --git a/packages/ui/package.json b/packages/ui/package.json index cf295d3f0..94e901dee 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -37,7 +37,7 @@ "dependencies": { "@mantine/core": "^7.6.1", "@mantine/dates": "^7.6.1", - "@tabler/icons-react": "^2.47.0", + "@tabler/icons-react": "^3.0.1", "mantine-react-table": "2.0.0-beta.0" } } diff --git a/packages/widgets/src/definition.ts b/packages/widgets/src/definition.ts index 68f9a4445..a8a42d698 100644 --- a/packages/widgets/src/definition.ts +++ b/packages/widgets/src/definition.ts @@ -1,7 +1,7 @@ import type { LoaderComponent } from "next/dynamic"; import type { IntegrationKind, WidgetKind } from "@homarr/definitions"; -import type { TablerIconsProps } from "@homarr/ui"; +import type { TablerIcon } from "@homarr/ui"; import type { WidgetImports } from "."; import type { @@ -78,7 +78,7 @@ export const createWidgetDefinition = < }); export interface WidgetDefinition { - icon: (props: TablerIconsProps) => JSX.Element; + icon: TablerIcon; supportedIntegrations?: IntegrationKind[]; options: WidgetOptionsRecord; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 38d934a79..58949a291 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -611,11 +611,11 @@ importers: specifier: ^7.6.1 version: 7.6.1(@mantine/core@7.6.1)(@mantine/hooks@7.6.1)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0) '@tabler/icons-react': - specifier: ^2.47.0 - version: 2.47.0(react@18.2.0) + specifier: ^3.0.1 + version: 3.0.1(react@18.2.0) mantine-react-table: specifier: 2.0.0-beta.0 - version: 2.0.0-beta.0(@mantine/core@7.6.1)(@mantine/dates@7.6.1)(@mantine/hooks@7.6.1)(@tabler/icons-react@2.47.0)(clsx@2.1.0)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0) + version: 2.0.0-beta.0(@mantine/core@7.6.1)(@mantine/dates@7.6.1)(@mantine/hooks@7.6.1)(@tabler/icons-react@3.0.1)(clsx@2.1.0)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0) devDependencies: '@homarr/eslint-config': specifier: workspace:^0.2.0 @@ -2495,18 +2495,17 @@ packages: zod: 3.22.4 dev: false - /@tabler/icons-react@2.47.0(react@18.2.0): - resolution: {integrity: sha512-iqly2FvCF/qUbgmvS8E40rVeYY7laltc5GUjRxQj59DuX0x/6CpKHTXt86YlI2whg4czvd/c8Ce8YR08uEku0g==} + /@tabler/icons-react@3.0.1(react@18.2.0): + resolution: {integrity: sha512-CaB72mZo3t+DCYfwelPHBp3dCfghocSKESau0AZZGKLozNnh7nOtVk4riH0+UBN2Gu0hKq9DZzIU4dUW8uq+mw==} peerDependencies: - react: ^16.5.1 || ^17.0.0 || ^18.0.0 + react: '>= 16' dependencies: - '@tabler/icons': 2.47.0 - prop-types: 15.8.1 + '@tabler/icons': 3.0.1 react: 18.2.0 dev: false - /@tabler/icons@2.47.0: - resolution: {integrity: sha512-4w5evLh+7FUUiA1GucvGj2ReX2TvOjEr4ejXdwL/bsjoSkof6r1gQmzqI+VHrE2CpJpB3al7bCTulOkFa/RcyA==} + /@tabler/icons@3.0.1: + resolution: {integrity: sha512-K/ZgJkxWcrMWdkgvS7VmgZ4F6SXM5UPolh2Y/dPTJnRpjMSySzfi93+XvfP2YfAzH7bd4ilqmTp7TADPLHrn0A==} dev: false /@tanstack/match-sorter-utils@8.11.8: @@ -6948,7 +6947,7 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /mantine-react-table@2.0.0-beta.0(@mantine/core@7.6.1)(@mantine/dates@7.6.1)(@mantine/hooks@7.6.1)(@tabler/icons-react@2.47.0)(clsx@2.1.0)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0): + /mantine-react-table@2.0.0-beta.0(@mantine/core@7.6.1)(@mantine/dates@7.6.1)(@mantine/hooks@7.6.1)(@tabler/icons-react@3.0.1)(clsx@2.1.0)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-KZOr7nzoSt4aF0hyWKJJBK9/dxVWB3tdg2fFSNnqns9cbPFlLTGXDKguLSoNE8WkzjWE0ThpYJknIAoraL/7ug==} engines: {node: '>=16'} peerDependencies: @@ -6964,7 +6963,7 @@ packages: '@mantine/core': 7.6.1(@mantine/hooks@7.6.1)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0) '@mantine/dates': 7.6.1(@mantine/core@7.6.1)(@mantine/hooks@7.6.1)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0) '@mantine/hooks': 7.6.1(react@18.2.0) - '@tabler/icons-react': 2.47.0(react@18.2.0) + '@tabler/icons-react': 3.0.1(react@18.2.0) '@tanstack/match-sorter-utils': 8.11.8 '@tanstack/react-table': 8.12.0(react-dom@18.2.0)(react@18.2.0) '@tanstack/react-virtual': 3.1.2(react-dom@18.2.0)(react@18.2.0)