chore: restructure packages of the project (#7)

* chore: restructure validation package

* chore: move zod only to validation package

* chore: rename packages from alparr to homarr

* chore: move mantine core, dates and icons library to ui package, move most other mantine packages to seperate packages for further customization and centralization

* chore: fix formatting

* fix: wrong typecheck command in turbo generator

* chore: fix formatting

* chore: address pull request feedback

* chore: fix ci check issues

apps/nextjs/src/app/[locale]/_client-providers/next-international.tsx

@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from "react";
 
-import { defaultLocale } from "@alparr/translation";
-import { I18nProviderClient } from "@alparr/translation/client";
+import { defaultLocale } from "@homarr/translation";
+import { I18nProviderClient } from "@homarr/translation/client";
 
 export const NextInternationalProvider = ({
   children,

apps/nextjs/src/app/[locale]/auth/login/_components/login-form.tsx

@@ -2,21 +2,21 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+
+import { signIn } from "@homarr/auth/client";
+import { useForm, zodResolver } from "@homarr/form";
+import { useScopedI18n } from "@homarr/translation/client";
 import {
   Alert,
   Button,
+  IconAlertTriangle,
   PasswordInput,
   rem,
   Stack,
   TextInput,
-} from "@mantine/core";
-import { useForm, zodResolver } from "@mantine/form";
-import { IconAlertTriangle } from "@tabler/icons-react";
-import type { z } from "zod";
-
-import { signIn } from "@alparr/auth/client";
-import { useScopedI18n } from "@alparr/translation/client";
-import { signInSchema } from "@alparr/validation";
+} from "@homarr/ui";
+import type { z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
 
 export const LoginForm = () => {
   const t = useScopedI18n("user");
@@ -24,7 +24,7 @@ export const LoginForm = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string>();
   const form = useForm<FormType>({
-    validate: zodResolver(signInSchema),
+    validate: zodResolver(validation.user.signIn),
     initialValues: {
       name: "",
       password: "",
@@ -79,4 +79,4 @@ export const LoginForm = () => {
   );
 };
 
-type FormType = z.infer<typeof signInSchema>;
+type FormType = z.infer<typeof validation.user.signIn>;

apps/nextjs/src/app/[locale]/auth/login/page.tsx

@@ -1,6 +1,5 @@
-import { Card, Center, Stack, Text, Title } from "@mantine/core";
-
-import { getScopedI18n } from "@alparr/translation/server";
+import { getScopedI18n } from "@homarr/translation/server";
+import { Card, Center, Stack, Text, Title } from "@homarr/ui";
 
 import { LogoWithTitle } from "~/components/layout/logo";
 import { LoginForm } from "./_components/login-form";

apps/nextjs/src/app/[locale]/init/user/_components/init-user-form.tsx

@@ -1,14 +1,17 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
-import { useForm, zodResolver } from "@mantine/form";
-import type { z } from "zod";
 
-import { useScopedI18n } from "@alparr/translation/client";
-import { initUserSchema } from "@alparr/validation";
+import { useForm, zodResolver } from "@homarr/form";
+import {
+  showErrorNotification,
+  showSuccessNotification,
+} from "@homarr/notifications";
+import { useScopedI18n } from "@homarr/translation/client";
+import { Button, PasswordInput, Stack, TextInput } from "@homarr/ui";
+import type { z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
 
-import { showErrorNotification, showSuccessNotification } from "~/notification";
 import { api } from "~/utils/api";
 
 export const InitUserForm = () => {
@@ -16,7 +19,7 @@ export const InitUserForm = () => {
   const t = useScopedI18n("user");
   const { mutateAsync, error, isPending } = api.user.initUser.useMutation();
   const form = useForm<FormType>({
-    validate: zodResolver(initUserSchema),
+    validate: zodResolver(validation.user.init),
     validateInputOnBlur: true,
     validateInputOnChange: true,
     initialValues: {
@@ -75,4 +78,4 @@ export const InitUserForm = () => {
   );
 };
 
-type FormType = z.infer<typeof initUserSchema>;
+type FormType = z.infer<typeof validation.user.init>;

apps/nextjs/src/app/[locale]/init/user/page.tsx

@@ -1,8 +1,8 @@
 import { notFound } from "next/navigation";
-import { Card, Center, Stack, Text, Title } from "@mantine/core";
 
-import { db } from "@alparr/db";
-import { getScopedI18n } from "@alparr/translation/server";
+import { db } from "@homarr/db";
+import { getScopedI18n } from "@homarr/translation/server";
+import { Card, Center, Stack, Text, Title } from "@homarr/ui";
 
 import { LogoWithTitle } from "~/components/layout/logo";
 import { InitUserForm } from "./_components/init-user-form";

apps/nextjs/src/app/[locale]/layout.tsx

@@ -1,15 +1,17 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 
-import "@mantine/core/styles.css";
-import "@mantine/dates/styles.css";
-import "@mantine/notifications/styles.css";
+import "@homarr/ui/styles.css";
+import "@homarr/notifications/styles.css";
 
 import { headers } from "next/headers";
-import { ColorSchemeScript, MantineProvider } from "@mantine/core";
-import { Notifications } from "@mantine/notifications";
 
-import { uiConfiguration } from "@alparr/ui";
+import { Notifications } from "@homarr/notifications";
+import {
+  ColorSchemeScript,
+  MantineProvider,
+  uiConfiguration,
+} from "@homarr/ui";
 
 import { NextInternationalProvider } from "./_client-providers/next-international";
 import { TRPCReactProvider } from "./_client-providers/trpc";

apps/nextjs/src/app/[locale]/loading.tsx

@@ -1,4 +1,4 @@
-import { Center, Loader } from "@mantine/core";
+import { Center, Loader } from "@homarr/ui";
 
 export default function CommonLoading() {
   return (

apps/nextjs/src/app/[locale]/not-found.tsx

@@ -1,4 +1,4 @@
-import { Center } from "@mantine/core";
+import { Center } from "@homarr/ui";
 
 export default function CommonNotFound() {
   return <Center h="100vh">404</Center>;

apps/nextjs/src/app/[locale]/page.tsx

@@ -1,7 +1,6 @@
-import { Button, Stack, Title } from "@mantine/core";
-
-import { auth } from "@alparr/auth";
-import { db } from "@alparr/db";
+import { auth } from "@homarr/auth";
+import { db } from "@homarr/db";
+import { Button, Stack, Title } from "@homarr/ui";
 
 export default async function HomePage() {
   const currentSession = await auth();

apps/nextjs/src/app/api/auth/[...nextauth]/route.ts

@@ -1,6 +1,6 @@
 import type { NextRequest } from "next/server";
 
-import { createHandlers } from "@alparr/auth";
+import { createHandlers } from "@homarr/auth";
 
 export const GET = async (req: NextRequest) => {
   return await createHandlers(isCredentialsRequest(req)).handlers.GET(req);

apps/nextjs/src/app/api/trpc/[trpc]/route.ts

@@ -1,7 +1,7 @@
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 
-import { appRouter, createTRPCContext } from "@alparr/api";
-import { auth } from "@alparr/auth";
+import { appRouter, createTRPCContext } from "@homarr/api";
+import { auth } from "@homarr/auth";
 
 /**
  * Configure basic CORS headers

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

@@ -1,12 +1,13 @@
 import Image from "next/image";
-import { Group, Title } from "@mantine/core";
+
+import { Group, Title } from "@homarr/ui";
 
 interface LogoProps {
   size: number;
 }
 
 export const Logo = ({ size = 60 }: LogoProps) => (
-  <Image src="/logo/alparr.png" alt="Alparr logo" width={size} height={size} />
+  <Image src="/logo/homarr.png" alt="homarr logo" width={size} height={size} />
 );
 
 export const LogoWithTitle = () => (

apps/nextjs/src/middleware.ts

@@ -1,6 +1,6 @@
 import type { NextRequest } from "next/server";
 
-import { I18nMiddleware } from "@alparr/translation/middleware";
+import { I18nMiddleware } from "@homarr/translation/middleware";
 
 export function middleware(request: NextRequest) {
   return I18nMiddleware(request);

apps/nextjs/src/notification.tsx

@@ -1,20 +0,0 @@
-import { rem } from "@mantine/core";
-import type { NotificationData } from "@mantine/notifications";
-import { notifications } from "@mantine/notifications";
-import { IconCheck, IconX } from "@tabler/icons-react";
-
-type CommonNotificationProps = Pick<NotificationData, "title" | "message">;
-
-export const showSuccessNotification = (props: CommonNotificationProps) =>
-  notifications.show({
-    ...props,
-    color: "teal",
-    icon: <IconCheck size={rem(20)} />,
-  });
-
-export const showErrorNotification = (props: CommonNotificationProps) =>
-  notifications.show({
-    ...props,
-    color: "red",
-    icon: <IconX size={rem(20)} />,
-  });

apps/nextjs/src/utils/api.ts

@@ -1,7 +1,7 @@
 import { createTRPCReact } from "@trpc/react-query";
 
-import type { AppRouter } from "@alparr/api";
+import type { AppRouter } from "@homarr/api";
 
 export const api = createTRPCReact<AppRouter>();
 
-export { type RouterInputs, type RouterOutputs } from "@alparr/api";
+export { type RouterInputs, type RouterOutputs } from "@homarr/api";