Aliase für absolute Paths in @northware/ui und northware-cockpit

apps/northware-cockpit/tsconfig.json

@@ -1,7 +1,12 @@
 {
   "extends": "@northware/tsconfig/nextjs.json",
   "compilerOptions": {
-    "plugins": [{ "name": "next" }]
+    "plugins": [{ "name": "next" }],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@northware/ui/*": ["../../packages/ui/src/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]

packages/ui/package.json

@@ -10,7 +10,8 @@
   "exports": {
     "./components": "./src/components/index.ts",
     "./css": "./src/css/output.css",
-    "./fonts": "./src/fonts.ts"
+    "./fonts": "./src/fonts.ts",
+    "./utils": "./src/utils.ts"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",

packages/ui/src/components/base/Button.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../../utils";
+import { cn } from "@northware/ui/utils";
 
 const buttonVariants = cva(
   "flex items-center justify-center gap-2 rounded-md text-center font-semibold transition-all disabled:pointer-events-none disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-opacity-50 border-2 border-transparent shadow-md",

packages/ui/src/components/base/Headline.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, HTMLAttributes } from "react";
-import { cn } from "../../utils";
+import { cn } from "@northware/ui/utils";
 
 interface HeadlineProps extends HTMLAttributes<HTMLHeadingElement> {
   children: ReactNode;

packages/ui/src/components/form-parts/Form.tsx

@@ -11,9 +11,8 @@ import {
   FormProvider,
   useFormContext,
 } from "react-hook-form";
-
-import { cn } from "../../utils";
-import { Label } from "./Label";
+import { cn } from "@northware/ui/utils";
+import { Label } from "@northware/ui/components/form-parts/Label";
 
 const Form = FormProvider;
 

packages/ui/src/components/form-parts/Input.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
-
-import { cn } from "../../utils";
 import { cva, VariantProps } from "class-variance-authority";
+import { cn } from "@northware/ui/utils";
 
 const inputVariants = cva(
   "flex h-10 w-full rounded-md border border-input bg-background text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",

packages/ui/src/components/form-parts/Label.tsx

@@ -3,8 +3,7 @@
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../utils";
+import { cn } from "@northware/ui/utils";
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",

packages/ui/src/components/form-parts/Select.tsx

@@ -3,8 +3,7 @@
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
-
-import { cn } from "../../utils";
+import { cn } from "@northware/ui/utils";
 
 const Select = SelectPrimitive.Root;
 

packages/ui/src/components/index.ts

@@ -1,25 +1,25 @@
 // Base Components (Basics to use instead of HTML Elements or Components that are used often)
-export * from "./base/Button";
-export * from "./base/Headline";
+export * from "@northware/ui/components/base/Button";
+export * from "@northware/ui/components/base/Headline";
 
 // Form Parts (Components that are typically part of a Form)
-export * from "./form-parts/Form";
-export * from "./form-parts/Input";
-export * from "./form-parts/Label";
-export * from "./form-parts/Select";
+export * from "@northware/ui/components/form-parts/Form";
+export * from "@northware/ui/components/form-parts/Input";
+export * from "@northware/ui/components/form-parts/Label";
+export * from "@northware/ui/components/form-parts/Select";
 
 // Layouts (Components to define Page Layouts)
-export * from "./layouts/Container";
+export * from "@northware/ui/components/layouts/Container";
 
 // Menu (Components that define Menus or Parts of it or Components that are used for Navigation)
-export * from "./menu/DropdownMenu";
+export * from "@northware/ui/components/menu/DropdownMenu";
 
 // NextThemes (Components that are used to perform the NextThemes integration)
-export * from "./next-themes/DarkModeToggle";
-export * from "./next-themes/ThemeProvider";
+export * from "@northware/ui/components/next-themes/DarkModeToggle";
+export * from "@northware/ui/components/next-themes/ThemeProvider";
 
 // Panels (Components to Display Content in a special way)
-export * from "./panels/Card";
+export * from "@northware/ui/components/panels/Card";
 
 // Specific (Components that are used for a specific feature)
-export * from "./specific/Login";
+export * from "@northware/ui/components/specific/Login";

packages/ui/src/components/layouts/Container.tsx

@@ -1,5 +1,5 @@
+import { cn } from "@northware/ui/utils";
 import { ReactNode } from "react";
-import { cn } from "../../utils";
 
 export function Container({
   children,

packages/ui/src/components/menu/DropdownMenu.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "../../utils";
+import { cn } from "@northware/ui/utils";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

packages/ui/src/components/next-themes/DarkModeToggle.tsx

@@ -1,15 +1,13 @@
 "use client";
-
-import { Button } from "../base/Button";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
-
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "../menu/DropdownMenu";
+} from "@northware/ui/components/menu/DropdownMenu";
+import { Button } from "@northware/ui/components/base/Button";
 
 export function DarkModeToggle() {
   const { setTheme } = useTheme();

packages/ui/src/components/panels/Card.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "../../utils";
+import { cn } from "@northware/ui/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,

packages/ui/src/components/specific/Login.tsx

@@ -8,14 +8,19 @@ import {
   FormLabel,
   FormControl,
   FormMessage,
-} from "../form-parts/Form";
-import { Input } from "../form-parts/Input";
+} from "@northware/ui/components/form-parts/Form";
+import { Input } from "@northware/ui/components/form-parts/Input";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import Image from "next/image";
-import { Card, CardContent, CardHeader, CardTitle } from "../panels/Card";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@northware/ui/components/panels/Card";
 import { useTheme } from "next-themes";
-import { Button } from "../base/Button";
+import { Button } from "@northware/ui/components/base/Button";
 
 const formSchema = z.object({
   email: z.string(),
@@ -32,10 +37,11 @@ export function LoginForm({ onSubmit }: { onSubmit: (values: any) => void }) {
   return (
     <>
       <Image
+        suppressHydrationWarning
         src={
           theme.resolvedTheme === "dark"
-            ? "/img/logo-dark.svg"
-            : "/img/logo-light.svg"
+            ? "/img/logo-light.svg"
+            : "/img/logo-dark.svg"
         }
         height={150}
         width={380}

packages/ui/tsconfig.json

@@ -1,5 +1,11 @@
 {
   "extends": "@northware/tsconfig/react-library.json",
   "include": ["."],
-  "exclude": ["dist", "build", "node_modules"]
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@northware/ui/*": ["src/*"]
+    }
+  }
 }