fix(packaging)!: make the component library consumable outside the monorepo

.nvmrc

@@ -0,0 +1 @@
+24

package.json

@@ -2,6 +2,9 @@
   "name": "diracx-web-root",
   "version": "0.1.0-a11",
   "private": true,
+  "engines": {
+    "node": ">=22"
+  },
   "workspaces": [
     "packages/diracx-web-components",
     "packages/diracx-web",

packages/diracx-web-components/package.json

@@ -7,9 +7,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsup --minify",
+    "build": "tsup --minify && node scripts/verify-dist.mjs",
     "dev": "tsup --watch",
     "test": "jest --ci",
+    "test:coverage": "jest --ci --coverage",
     "lint": "eslint ./src",
     "lint-staged": "lint-staged",
     "ts-lint": "tsc -noEmit -incremental",
@@ -19,38 +20,49 @@
   },
   "license": "GPL-3.0",
   "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/SearchBar/DatePicker.*"
+  ],
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.0.0",
-    "@axa-fr/react-oidc": ">=7.24.0 <7.27.0",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^7.0.0",
-    "@mui/material": "^7.0.0",
     "@mui/utils": "^7.0.0",
     "@mui/x-charts": "^8.0.0",
     "@mui/x-date-pickers": "^8.0.0",
     "@tanstack/react-table": "^8.20.5",
-    "@types/node": "^24.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
     "dayjs": "^1.11.13",
+    "react-virtuoso": "^4.12.3"
+  },
+  "peerDependencies": {
+    "@axa-fr/react-oidc": ">=7.24.0 <7.27.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-virtuoso": "^4.12.3",
     "swr": "^2.2.5"
   },
   "devDependencies": {
+    "@axa-fr/react-oidc": ">=7.24.0 <7.27.0",
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@chromatic-com/storybook": "^5.0.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@eslint/compat": "^2.0.0",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.14.0",
     "@microsoft/api-extractor": "^7.43.7",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
     "@storybook/addon-docs": "^10.2.10",
     "@storybook/addon-links": "^10.2.10",
     "@storybook/nextjs": "^10.2.10",
@@ -59,13 +71,19 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^30.0.0",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/ungap__structured-clone": "^1.2.0",
     "@typescript-eslint/eslint-plugin": "^8.39.1",
     "@typescript-eslint/parser": "^8.39.1",
+    "@ungap/structured-clone": "^1.3.3",
     "babel-jest": "^30.0.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "eslint": "^9.14.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-storybook": "^10.2.10",
@@ -74,31 +92,42 @@
     "jest-environment-jsdom": "^30.0.0",
     "lint-staged": "^16.0.0",
     "prettier": "^3.2.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "storybook": "^10.2.10",
+    "swr": "^2.2.5",
     "ts-jest": "^29.1.2",
     "tsup": "^8.0.2",
     "typescript": "^5.6.3"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./package.json": "./package.json",
     "./components": {
-      "import": "./dist/components/index.js",
-      "types": "./dist/components/index.d.ts"
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
     },
     "./contexts": {
-      "import": "./dist/contexts/index.js",
-      "types": "./dist/contexts/index.d.ts"
+      "types": "./dist/contexts/index.d.ts",
+      "import": "./dist/contexts/index.js"
     },
     "./hooks": {
-      "import": "./dist/hooks/index.js",
-      "types": "./dist/hooks/index.d.ts"
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js"
     },
     "./types": {
-      "import": "./dist/types/index.js",
-      "types": "./dist/types/index.d.ts"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.js"
+    },
+    "./services": {
+      "types": "./dist/services/index.d.ts",
+      "import": "./dist/services/index.js"
     }
   },
   "files": [

packages/diracx-web-components/scripts/verify-dist.mjs

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+// Verify that `npm run build` produced every entrypoint declared in
+// package.json#exports. Guards against tsup `bundle: false` + glob-entry
+// misconfiguration silently shipping a broken package.
+
+import { existsSync, readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join, resolve } from "node:path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const pkgRoot = resolve(__dirname, "..");
+const pkg = JSON.parse(readFileSync(join(pkgRoot, "package.json"), "utf8"));
+
+const required = new Set();
+for (const [key, entry] of Object.entries(pkg.exports ?? {})) {
+  if (key === "./package.json") continue;
+  if (typeof entry === "string") {
+    required.add(entry);
+  } else if (entry && typeof entry === "object") {
+    for (const value of Object.values(entry)) {
+      if (typeof value === "string") required.add(value);
+    }
+  }
+}
+
+// Also validate top-level main/module/types.
+for (const field of ["main", "module", "types"]) {
+  if (typeof pkg[field] === "string") required.add(pkg[field]);
+}
+
+const missing = [];
+for (const rel of required) {
+  const abs = join(pkgRoot, rel);
+  if (!existsSync(abs)) missing.push(rel);
+}
+
+if (missing.length > 0) {
+  console.error("verify-dist: missing expected build outputs:");
+  for (const m of missing) console.error(`  - ${m}`);
+  console.error(
+    "\nIf tsup's entry glob or `bundle: false` option was changed, confirm the generated layout still matches package.json#exports.",
+  );
+  process.exit(1);
+}
+
+console.log(`verify-dist: OK (${required.size} paths checked).`);

packages/diracx-web-components/src/components/DashboardLayout/DashboardDrawer.tsx

@@ -18,7 +18,6 @@ import {
 } from "@mui/material";
 import { MenuBook, Add } from "@mui/icons-material";
 import React, { use, useEffect, useState } from "react";
-import Image from "next/image";
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
@@ -413,11 +412,17 @@ export default function DashboardDrawer({
               backgroundColor: theme.palette.background.default,
             }}
           >
-            <Image
+            <img
               src={logoURL}
               alt="DIRAC logo"
-              fill
-              style={{ objectFit: "contain" }}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                objectFit: "contain",
+              }}
             />
           </Toolbar>
           {/* Map over user app instances and render them as list items in the drawer. */}

packages/diracx-web-components/src/components/Login/LoginForm.tsx

@@ -16,8 +16,6 @@ import {
   SelectChangeEvent,
 } from "@mui/material";
 
-import Image from "next/image";
-
 import { useOidc } from "@axa-fr/react-oidc";
 import { useMetadata, Metadata } from "../../hooks/metadata";
 import { useOIDCContext } from "../../hooks/oidcConfiguration";
@@ -153,7 +151,7 @@ export function LoginForm({
             paddingBottom: "10%",
           }}
         >
-          <Image src={logoURL} alt="DIRAC logo" width={150} height={150} />
+          <img src={logoURL} alt="DIRAC logo" width={150} height={150} />
         </Box>
         {singleVO ? (
           <Typography