fix: nextjs is slow dev server (#364)

* fix: nextjs slow compile time

* fix: change optimized package imports and transpile packages

* fix: format issue

apps/nextjs/src/components/active-tab-accordion.tsx

@@ -3,11 +3,10 @@
 import type { PropsWithChildren } from "react";
 import { useCallback } from "react";
 import { usePathname } from "next/navigation";
+import type { AccordionProps } from "@mantine/core";
+import { Accordion } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 
-import type { AccordionProps } from "@homarr/ui";
-import { Accordion } from "@homarr/ui";
-
 type ActiveTabAccordionProps = PropsWithChildren<
   Omit<AccordionProps<false>, "onChange">
 >;

apps/nextjs/src/components/board/items/item-select-modal.tsx

@@ -1,7 +1,8 @@
+import { Button, Card, Center, Grid, Stack, Text } from "@mantine/core";
+
 import type { WidgetKind } from "@homarr/definitions";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import { Button, Card, Center, Grid, Stack, Text } from "@homarr/ui";
 
 import { objectEntries } from "../../../../../../packages/common/src";
 import { widgetImports } from "../../../../../../packages/widgets/src";

apps/nextjs/src/components/board/modals/board-rename-modal.tsx

@@ -1,10 +1,11 @@
 "use client";
 
+import { Button, Group, Stack, TextInput } from "@mantine/core";
+
 import { clientApi } from "@homarr/api/client";
 import { useForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import { Button, Group, Stack, TextInput } from "@homarr/ui";
 import type { validation, z } from "@homarr/validation";
 
 interface InnerProps {

apps/nextjs/src/components/board/sections/category-section.tsx

@@ -1,16 +1,14 @@
 import type { RefObject } from "react";
-import { useDisclosure } from "@mantine/hooks";
-
 import {
   Card,
   Collapse,
   Group,
-  IconChevronDown,
-  IconChevronUp,
   Stack,
   Title,
   UnstyledButton,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
 
 import type { CategorySection } from "~/app/[locale]/boards/_types";
 import { CategoryMenu } from "./category/category-menu";

apps/nextjs/src/components/board/sections/category/category-edit-modal.tsx

@@ -1,7 +1,8 @@
+import { Button, Group, Stack, TextInput } from "@mantine/core";
+
 import { useForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import { Button, Group, Stack, TextInput } from "@homarr/ui";
 
 interface Category {
   id: string;

apps/nextjs/src/components/board/sections/category/category-menu.tsx

@@ -1,12 +1,8 @@
 "use client";
 
 import React, { useMemo } from "react";
-import { useAtomValue } from "jotai";
-
-import { useScopedI18n } from "@homarr/translation/client";
-import type { TablerIcon } from "@homarr/ui";
+import { ActionIcon, Menu } from "@mantine/core";
 import {
-  ActionIcon,
   IconDotsVertical,
   IconEdit,
   IconRowInsertBottom,
@@ -14,8 +10,11 @@ import {
   IconTransitionBottom,
   IconTransitionTop,
   IconTrash,
-  Menu,
-} from "@homarr/ui";
+} from "@tabler/icons-react";
+import { useAtomValue } from "jotai";
+
+import { useScopedI18n } from "@homarr/translation/client";
+import type { TablerIcon } from "@homarr/ui";
 
 import type { CategorySection } from "~/app/[locale]/boards/_types";
 import { editModeAtom } from "../../editMode";

apps/nextjs/src/components/board/sections/content.tsx

@@ -2,21 +2,19 @@
 // Ignored because of gridstack attributes
 
 import type { RefObject } from "react";
+import { ActionIcon, Card, Menu } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
+import {
+  IconDotsVertical,
+  IconLayoutKanban,
+  IconPencil,
+  IconTrash,
+} from "@tabler/icons-react";
 import combineClasses from "clsx";
 import { useAtomValue } from "jotai";
 
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
-import {
-  ActionIcon,
-  Card,
-  IconDotsVertical,
-  IconLayoutKanban,
-  IconPencil,
-  IconTrash,
-  Menu,
-} from "@homarr/ui";
 import {
   loadWidgetDynamic,
   reduceWidgetOptionsWithDefaultValues,

apps/nextjs/src/components/layout/background.tsx

@@ -1,6 +1,5 @@
 import { usePathname } from "next/navigation";
-
-import type { AppShellProps } from "@homarr/ui";
+import type { AppShellProps } from "@mantine/core";
 
 import { useOptionalBoard } from "~/app/[locale]/boards/_context";
 

apps/nextjs/src/components/layout/header.tsx

@@ -1,8 +1,8 @@
 import type { ReactNode } from "react";
 import Link from "next/link";
+import { AppShellHeader, Group, UnstyledButton } from "@mantine/core";
 
 import { Spotlight } from "@homarr/spotlight";
-import { AppShellHeader, Group, UnstyledButton } from "@homarr/ui";
 
 import { ClientBurger } from "./header/burger";
 import { DesktopSearchInput, MobileSearchButton } from "./header/search";

apps/nextjs/src/components/layout/header/burger.tsx

@@ -1,10 +1,9 @@
 "use client";
 
 import { useCallback } from "react";
+import { Burger } from "@mantine/core";
 import { atom, useAtom } from "jotai";
 
-import { Burger } from "@homarr/ui";
-
 export const navigationCollapsedAtom = atom(true);
 
 export const ClientBurger = () => {

apps/nextjs/src/components/layout/header/button.tsx

@@ -1,9 +1,8 @@
 import type { ForwardedRef, ReactNode } from "react";
 import { forwardRef } from "react";
 import Link from "next/link";
-
-import type { ActionIconProps } from "@homarr/ui";
-import { ActionIcon } from "@homarr/ui";
+import type { ActionIconProps } from "@mantine/core";
+import { ActionIcon } from "@mantine/core";
 
 type HeaderButtonProps = (
   | {

apps/nextjs/src/components/layout/header/search.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { TextInput, UnstyledButton } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+
 import { openSpotlight } from "@homarr/spotlight";
 import { useScopedI18n } from "@homarr/translation/client";
-import { IconSearch, TextInput, UnstyledButton } from "@homarr/ui";
 
 import { HeaderButton } from "./button";
 import classes from "./search.module.css";

apps/nextjs/src/components/layout/header/user.tsx

@@ -1,4 +1,4 @@
-import { UnstyledButton } from "@homarr/ui";
+import { UnstyledButton } from "@mantine/core";
 
 import { UserAvatar } from "~/components/user-avatar";
 import { UserAvatarMenu } from "~/components/user-avatar-menu";

apps/nextjs/src/components/layout/logo/logo.tsx

@@ -1,7 +1,6 @@
 import Image from "next/image";
-
-import type { TitleOrder } from "@homarr/ui";
-import { Group, Title } from "@homarr/ui";
+import type { TitleOrder } from "@mantine/core";
+import { Group, Title } from "@mantine/core";
 
 interface LogoProps {
   size: number;

apps/nextjs/src/components/layout/navigation-link.tsx

@@ -3,8 +3,7 @@
 import type { ReactNode } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-
-import { NavLink } from "@homarr/ui";
+import { NavLink } from "@mantine/core";
 
 export const CommonNavLink = (props: ClientNavigationLink) =>
   "href" in props ? (

apps/nextjs/src/components/layout/navigation.tsx

@@ -1,5 +1,6 @@
+import { AppShellNavbar, AppShellSection, ScrollArea } from "@mantine/core";
+
 import type { TablerIcon } from "@homarr/ui";
-import { AppShellNavbar, AppShellSection, ScrollArea } from "@homarr/ui";
 
 import type { ClientNavigationLink } from "./navigation-link";
 import { CommonNavLink } from "./navigation-link";

apps/nextjs/src/components/layout/shell.tsx

@@ -1,10 +1,9 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
+import { AppShell } from "@mantine/core";
 import { useAtomValue } from "jotai";
 
-import { AppShell } from "@homarr/ui";
-
 import { useOptionalBackgroundProps } from "./background";
 import { navigationCollapsedAtom } from "./header/burger";
 

apps/nextjs/src/components/manage/boards/add-board-modal.tsx

@@ -1,9 +1,9 @@
+import { Button, Group, Stack, TextInput } from "@mantine/core";
 import { boardSchemas } from "node_modules/@homarr/validation/src/board";
 
 import { useForm, zodResolver } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import { Button, Group, Stack, TextInput } from "@homarr/ui";
 import { z } from "@homarr/validation";
 
 interface InnerProps {

apps/nextjs/src/components/user-avatar-menu.tsx

@@ -2,17 +2,16 @@
 
 import type { ReactNode } from "react";
 import Link from "next/link";
-
-import { useScopedI18n } from "@homarr/translation/client";
+import { Menu, useMantineColorScheme } from "@mantine/core";
 import {
   IconDashboard,
   IconLogout,
   IconMoon,
   IconSun,
   IconTool,
-  Menu,
-  useMantineColorScheme,
-} from "@homarr/ui";
+} from "@tabler/icons-react";
+
+import { useScopedI18n } from "@homarr/translation/client";
 
 interface UserAvatarMenuProps {
   children: ReactNode;

apps/nextjs/src/components/user-avatar.tsx

@@ -1,6 +1,7 @@
+import type { AvatarProps, MantineSize } from "@mantine/core";
+import { Avatar } from "@mantine/core";
+
 import { auth } from "@homarr/auth";
-import type { AvatarProps, MantineSize } from "@homarr/ui";
-import { Avatar } from "@homarr/ui";
 
 interface UserAvatarProps {
   size: MantineSize;