fix(portal:auth): fixed styling from @tria-plc/iamui-common just rendering

apps/edr-freight-web/portal/src/App.tsx

@@ -31,6 +31,15 @@ const App = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
+  if (location.pathname === "/auth") {
+    return (
+      <Routes>
+        <Route path="/auth" element={<IamLoginPage />} />
+        <Route path="*" element={<Navigate to="/auth" replace />} />
+      </Routes>
+    );
+  }
+
   return (
     <DashboardLayout
       title="EDR Freight"
@@ -39,7 +48,6 @@ const App = () => {
       onNavigate={navigate}
     >
       <Routes>
-        <Route path="/auth" element={<IamLoginPage />} />
         <Route path="/" element={<DashboardPage />} />
         <Route path="/bookings" element={<BookingsPage />} />
         <Route path="/bookings/new" element={<CreateBookingPage />} />

apps/edr-freight-web/portal/src/main.tsx

@@ -2,12 +2,14 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import "@tria-plc/iamui-common/styles.css";
 
 import App from "./App";
 import {
   AuthProvider,
   BrandingProvider,
   configureIam,
+  UserProvider,
 } from "@tria-plc/iamui-common";
 
 const queryClient = new QueryClient();
@@ -36,13 +38,15 @@ if (!rootElement) {
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
+            <BrowserRouter>
       <BrandingProvider>
         <AuthProvider>
-          <BrowserRouter>
+          <UserProvider>
-            <App />
+              <App />
-          </BrowserRouter>
+          </UserProvider>
         </AuthProvider>
       </BrandingProvider>
+            </BrowserRouter>
     </QueryClientProvider>
   </StrictMode>,
 );

apps/edr-freight-web/portal/src/vite-env.d.ts

@@ -1,5 +1,19 @@
 /// <reference types="vite/client" />
 
+interface Window {
+  __IAM_CONFIG__?: {
+    apiUrl: string;
+    postLoginPath?: string;
+  };
+  __USER_MANAGEMENT_BRANDING__?: {
+    organizationName: string;
+    appName: string;
+    moduleBasePath: string;
+    backToAppPath?: string;
+    backToAppLabel?: string;
+  };
+}
+
 interface ImportMetaEnv {
   readonly VITE_API_URL: string;
 }

packages/ui-common/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "#components",
+    "ui": "#components",
+    "lib": "#lib",
+    "utils": "#lib/utils",
+    "hooks": "#hooks"
+  }
+}

packages/ui-common/package.json

@@ -18,7 +18,13 @@
   },
   "dependencies": {
     "@edr/types": "workspace:*",
-    "clsx": "^2.1.1"
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.14.0",
+    "radix-ui": "^1.4.3",
+    "shadcn": "^4.7.0",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@edr/eslint-config": "workspace:*",
@@ -28,5 +34,13 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.5.4"
+  },
+  "imports": {
+    "#components": "./src/components",
+    "#components/*": "./src/components/*",
+    "#lib": "./src/lib",
+    "#lib/*": "./src/lib/*",
+    "#hooks": "./src/hooks",
+    "#hooks/*": "./src/hooks/*"
   }
 }

packages/ui-common/src/components/button.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

packages/ui-common/src/index.ts

@@ -1,4 +1,3 @@
-export { default as Button } from "./components/Button";
 export type {
   ButtonProps,
   ButtonVariant,
@@ -18,10 +17,13 @@ export { default as Badge } from "./components/Badge";
 export type { BadgeProps, BadgeTone } from "./components/Badge";
 
 export { Sidebar, DashboardLayout } from "./components/Layout";
+
 export type {
   SidebarProps,
   SidebarItem,
   DashboardLayoutProps,
 } from "./components/Layout";
 
+export { Button } from "./components/button";
+
 export * from "./theme";

packages/ui-common/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

packages/ui-common/src/styles/globals.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "tw-animate-css";

packages/ui-common/tsconfig.json

@@ -1,6 +1,15 @@
 {
   "extends": "@edr/tsconfig/react.json",
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "#components": ["src/components"],
+      "#components/*": ["src/components/*"],
+      "#lib": ["src/lib"],
+      "#lib/*": ["src/lib/*"],
+      "#hooks": ["src/hooks"],
+      "#hooks/*": ["src/hooks/*"]
+    },
     "outDir": "dist",
     "rootDir": "src"
   },