fix: nextjs is slow dev server (#364)

* fix: nextjs slow compile time

* fix: change optimized package imports and transpile packages

* fix: format issue

packages/widgets/src/_inputs/widget-app-input.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { memo, useMemo } from "react";
+import type { SelectProps } from "@mantine/core";
+import { Group, Loader, Select } from "@mantine/core";
+import { IconCheck } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import type { SelectProps } from "@homarr/ui";
-import { Group, IconCheck, Loader, Select } from "@homarr/ui";
 
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";

packages/widgets/src/_inputs/widget-location-input.tsx

@@ -2,19 +2,12 @@
 
 import type { ChangeEvent } from "react";
 import { useCallback } from "react";
-
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import { createModal, useModalAction } from "@homarr/modals";
-import { useScopedI18n } from "@homarr/translation/client";
 import {
   ActionIcon,
   Anchor,
   Button,
   Fieldset,
   Group,
-  IconClick,
-  IconListSearch,
   Loader,
   NumberInput,
   Stack,
@@ -22,7 +15,13 @@ import {
   Text,
   TextInput,
   Tooltip,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { IconClick, IconListSearch } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { createModal, useModalAction } from "@homarr/modals";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import type { OptionLocation } from "../options";
 import type { CommonWidgetInputProps } from "./common";

packages/widgets/src/_inputs/widget-multiselect-input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { MultiSelect } from "@homarr/ui";
+import { MultiSelect } from "@mantine/core";
 
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";

packages/widgets/src/_inputs/widget-number-input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { NumberInput } from "@homarr/ui";
+import { NumberInput } from "@mantine/core";
 
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";

packages/widgets/src/_inputs/widget-select-input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Select } from "@homarr/ui";
+import { Select } from "@mantine/core";
 
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";

packages/widgets/src/_inputs/widget-slider-input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { InputWrapper, Slider } from "@homarr/ui";
+import { InputWrapper, Slider } from "@mantine/core";
 
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";

packages/widgets/src/_inputs/widget-switch-input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Switch } from "@homarr/ui";
+import { Switch } from "@mantine/core";
 
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";

packages/widgets/src/_inputs/widget-text-input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { TextInput } from "@homarr/ui";
+import { TextInput } from "@mantine/core";
 
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";

packages/widgets/src/app/component.tsx

@@ -1,20 +1,20 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-
-import { clientApi } from "@homarr/api/client";
-import { useRegisterSpotlightActions } from "@homarr/spotlight";
-import { useScopedI18n } from "@homarr/translation/client";
 import {
   Center,
   Flex,
-  IconDeviceDesktopX,
   Loader,
   Stack,
   Text,
   Tooltip,
   UnstyledButton,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { IconDeviceDesktopX } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import { useRegisterSpotlightActions } from "@homarr/spotlight";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import classes from "./app.module.css";

packages/widgets/src/app/index.ts

@@ -1,4 +1,4 @@
-import { IconApps } from "@homarr/ui";
+import { IconApps } from "@tabler/icons-react";
 
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";

packages/widgets/src/clock/component.tsx

@@ -1,13 +1,12 @@
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Flex, Stack, Text } from "@mantine/core";
 import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
 import timezones from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 
-import { Flex, Stack, Text } from "@homarr/ui";
-
 import type { WidgetComponentProps } from "../definition";
 
 dayjs.extend(advancedFormat);

packages/widgets/src/clock/index.ts

@@ -1,7 +1,6 @@
+import { IconClock } from "@tabler/icons-react";
 import dayjs from "dayjs";
 
-import { IconClock } from "@homarr/ui";
-
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 

packages/widgets/src/iframe/component.tsx

@@ -1,6 +1,8 @@
+import { Box, Stack, Text, Title } from "@mantine/core";
+import { IconBrowserOff } from "@tabler/icons-react";
+
 import { objectEntries } from "@homarr/common";
 import { useI18n } from "@homarr/translation/client";
-import { Box, IconBrowserOff, Stack, Text, Title } from "@homarr/ui";
 
 import type { WidgetComponentProps } from "../definition";
 import classes from "./component.module.css";

packages/widgets/src/iframe/index.ts

@@ -1,4 +1,4 @@
-import { IconBrowser } from "@homarr/ui";
+import { IconBrowser } from "@tabler/icons-react";
 
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";

packages/widgets/src/index.tsx

@@ -1,9 +1,9 @@
 import type { ComponentType } from "react";
 import type { Loader } from "next/dynamic";
 import dynamic from "next/dynamic";
+import { Loader as UiLoader } from "@mantine/core";
 
 import type { WidgetKind } from "@homarr/definitions";
-import { Loader as UiLoader } from "@homarr/ui";
 
 import * as app from "./app";
 import * as clock from "./clock";

packages/widgets/src/modals/widget-edit-modal.tsx

@@ -1,9 +1,10 @@
 "use client";
 
+import { Button, Group, Stack } from "@mantine/core";
+
 import type { WidgetKind } from "@homarr/definitions";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import { Button, Group, Stack } from "@homarr/ui";
 
 import { widgetImports } from "..";
 import { getInputForType } from "../_inputs";

packages/widgets/src/notebook/index.ts

@@ -1,4 +1,4 @@
-import { IconNotes } from "@homarr/ui";
+import { IconNotes } from "@tabler/icons-react";
 
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";

packages/widgets/src/video/component.tsx

@@ -1,19 +1,12 @@
 "use client";
 
 import { useEffect, useRef } from "react";
+import { Anchor, Center, Group, Stack, Title } from "@mantine/core";
+import { IconBrandYoutube, IconDeviceCctvOff } from "@tabler/icons-react";
 import combineClasses from "clsx";
 import videojs from "video.js";
 
 import { useI18n } from "@homarr/translation/client";
-import {
-  Anchor,
-  Center,
-  Group,
-  IconBrandYoutube,
-  IconDeviceCctvOff,
-  Stack,
-  Title,
-} from "@homarr/ui";
 
 import type { WidgetComponentProps } from "../definition";
 import classes from "./component.module.css";

packages/widgets/src/video/index.ts

@@ -1,4 +1,4 @@
-import { IconDeviceCctv } from "@homarr/ui";
+import { IconDeviceCctv } from "@tabler/icons-react";
 
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";

packages/widgets/src/weather/component.tsx

@@ -1,16 +1,12 @@
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
+import { Card, Flex, Group, Stack, Text, Title } from "@mantine/core";
 import {
-  Card,
-  Flex,
-  Group,
   IconArrowDownRight,
   IconArrowUpRight,
   IconMapPin,
-  Stack,
-  Text,
-  Title,
-} from "@homarr/ui";
+} from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { WeatherIcon } from "./icon";

packages/widgets/src/weather/icon.tsx

@@ -1,8 +1,5 @@
-import type { TranslationObject } from "@homarr/translation";
-import { useScopedI18n } from "@homarr/translation/client";
-import type { TablerIcon } from "@homarr/ui";
+import { Box, Tooltip } from "@mantine/core";
 import {
-  Box,
   IconCloud,
   IconCloudFog,
   IconCloudRain,
@@ -11,8 +8,11 @@ import {
   IconQuestionMark,
   IconSnowflake,
   IconSun,
-  Tooltip,
-} from "@homarr/ui";
+} from "@tabler/icons-react";
+
+import type { TranslationObject } from "@homarr/translation";
+import { useScopedI18n } from "@homarr/translation/client";
+import type { TablerIcon } from "@homarr/ui";
 
 interface WeatherIconProps {
   code: number;

packages/widgets/src/weather/index.ts

@@ -1,4 +1,5 @@
-import { IconCloud } from "@homarr/ui";
+import { IconCloud } from "@tabler/icons-react";
+
 import { z } from "@homarr/validation";
 
 import { createWidgetDefinition } from "../definition";

packages/widgets/src/widget-integration-select.tsx

@@ -1,10 +1,6 @@
 "use client";
 
 import type { FocusEventHandler } from "react";
-
-import type { IntegrationKind } from "@homarr/definitions";
-import { getIconUrl } from "@homarr/definitions";
-import { useI18n } from "@homarr/translation/client";
 import {
   Avatar,
   CheckIcon,
@@ -17,7 +13,11 @@ import {
   Stack,
   Text,
   useCombobox,
-} from "@homarr/ui";
+} from "@mantine/core";
+
+import type { IntegrationKind } from "@homarr/definitions";
+import { getIconUrl } from "@homarr/definitions";
+import { useI18n } from "@homarr/translation/client";
 
 import classes from "./widget-integration-select.module.css";