feat(tailwind): Migration vers Tailwind CSS v4

- Installation de Tailwind CSS v4 avec @tailwindcss/postcss - Configuration PostCSS avec le plugin Tailwind v4 - Mise à jour de globals.css avec syntaxe Tailwind v4 (@theme) - Migration layout.tsx vers classes Tailwind - Création du composant NavLink avec types stricts - Configuration des couleurs personnalisées (background, foreground, card, line, primary) - Support du dark mode via classes CSS - Variables CSS migrées vers format HSL - Suppression des anciens styles CSS custom Le projet utilise maintenant Tailwind CSS v4 pour tout le styling
2026-03-06 12:28:45 +01:00
parent 9134b0dac2
commit 05a18c3c77
8 changed files with 1342 additions and 2369 deletions
--- a/apps/backoffice/app/globals.css
+++ b/apps/backoffice/app/globals.css
--- a/apps/backoffice/app/layout.tsx
+++ b/apps/backoffice/app/layout.tsx
@@ -13,34 +13,64 @@ export const metadata: Metadata = {
 };

 export default function RootLayout({ children }: { children: ReactNode }) {
-  const apiBaseUrl = process.env.API_BASE_URL || "http://api:8080";
-  const apiToken = process.env.API_BOOTSTRAP_TOKEN || "";
-
  return (
    <html lang="en" suppressHydrationWarning>
-      <body>
+      <body className="min-h-screen bg-background text-foreground font-sans antialiased">
        <ThemeProvider>
-          <nav className="top-nav">
-            <Link href="/" className="brand">
-              <Image src="/logo.png" alt="Stripstream" width={36} height={36} />
-              <span className="brand-name">StripStream</span>
-              <span className="brand-subtitle">backoffice</span>
-            </Link>
-            <div className="links-wrap">
-              <div className="links">
-                <Link href="/">Dashboard</Link>
-                <Link href="/books">Books</Link>
-                <Link href="/libraries">Libraries</Link>
-                <Link href="/jobs">Jobs</Link>
-                <Link href="/tokens">Tokens</Link>
+          {/* Navigation */}
+          <nav className="sticky top-0 z-50 w-full border-b border-line bg-card/80 backdrop-blur-md">
+            <div className="container mx-auto flex h-16 items-center justify-between px-4">
+              {/* Brand */}
+              <Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
+                <Image 
+                  src="/logo.png" 
+                  alt="Stripstream" 
+                  width={36} 
+                  height={36} 
+                  className="rounded-lg"
+                />
+                <div className="flex items-baseline gap-2">
+                  <span className="text-xl font-bold tracking-tight">StripStream</span>
+                  <span className="text-sm text-muted font-medium">backoffice</span>
+                </div>
+              </Link>
+
+              {/* Navigation Links */}
+              <div className="flex items-center gap-6">
+                <div className="hidden md:flex items-center gap-1">
+                  <NavLink href="/">Dashboard</NavLink>
+                  <NavLink href="/books">Books</NavLink>
+                  <NavLink href="/libraries">Libraries</NavLink>
+                  <NavLink href="/jobs">Jobs</NavLink>
+                  <NavLink href="/tokens">Tokens</NavLink>
+                </div>
+                
+                <div className="flex items-center gap-3 pl-6 border-l border-line">
+                  <JobsIndicator />
+                  <ThemeToggle />
+                </div>
              </div>
-              <JobsIndicator />
-              <ThemeToggle />
            </div>
          </nav>
-          <main>{children}</main>
+
+          {/* Main Content */}
+          <main className="container mx-auto px-4 py-8">
+            {children}
+          </main>
        </ThemeProvider>
      </body>
    </html>
  );
 }
+
+// Navigation Link Component
+function NavLink({ href, children }: { href: "/" | "/books" | "/libraries" | "/jobs" | "/tokens"; children: React.ReactNode }) {
+  return (
+    <Link 
+      href={href} 
+      className="px-3 py-2 rounded-md text-sm font-medium text-foreground/80 hover:text-foreground hover:bg-primary-soft transition-colors"
+    >
+      {children}
+    </Link>
+  );
+}
--- a/apps/backoffice/package-lock.json
+++ b/apps/backoffice/package-lock.json
@@ -17,6 +17,9 @@
        "@types/node": "22.13.14",
        "@types/react": "19.0.12",
        "@types/react-dom": "19.0.5",
+        "autoprefixer": "^10.4.27",
+        "postcss": "^8.5.8",
+        "tailwindcss": "^4.2.1",
        "typescript": "5.8.2"
      }
    },
@@ -729,6 +732,43 @@
        "@types/react": "^19.0.0"
      }
    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.27",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.27.tgz",
+      "integrity": "sha512-NP9APE+tO+LuJGn7/9+cohklunJsXWiaWEfV3si4Gi/XHDwVNgkwr1J3RQYFIvPy76GmJ9/bW8vyoU1LcxwKHA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001774",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
    "node_modules/baseline-browser-mapping": {
      "version": "2.10.0",
      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
@@ -741,6 +781,40 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001776",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001776.tgz",
@@ -784,6 +858,37 @@
        "node": ">=8"
      }
    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.307",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.307.tgz",
+      "integrity": "sha512-5z3uFKBWjiNR44nFcYdkcXjKMbg5KXNdciu7mhTPo9tB7NbqSNP2sSnGR+fqknZSCwKkBN+oxiiajWs4dT6ORg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
    "node_modules/nanoid": {
      "version": "3.3.11",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -865,13 +970,7 @@
        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
      }
    },
-    "node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "license": "ISC"
-    },
-    "node_modules/postcss": {
+    "node_modules/next/node_modules/postcss": {
      "version": "8.4.31",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
@@ -899,6 +998,55 @@
        "node": "^10 || ^12 || >=14"
      }
    },
+    "node_modules/node-releases": {
+      "version": "2.0.36",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.36.tgz",
+      "integrity": "sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
+      "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/react": {
      "version": "19.0.0",
      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
@@ -1016,6 +1164,13 @@
        }
      }
    },
+    "node_modules/tailwindcss": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.1.tgz",
+      "integrity": "sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/tslib": {
      "version": "2.8.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -1042,6 +1197,37 @@
      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
      "dev": true,
      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
    }
  }
 }
--- a/apps/backoffice/package.json
+++ b/apps/backoffice/package.json
@@ -17,6 +17,9 @@
    "@types/node": "22.13.14",
    "@types/react": "19.0.12",
    "@types/react-dom": "19.0.5",
+    "autoprefixer": "^10.4.27",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^4.2.1",
    "typescript": "5.8.2"
  }
 }
--- a/apps/backoffice/postcss.config.js
+++ b/apps/backoffice/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
--- a/apps/backoffice/tailwind.config.js
+++ b/apps/backoffice/tailwind.config.js
@@ -0,0 +1,72 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        card: 'hsl(var(--card))',
+        line: {
+          DEFAULT: 'hsl(var(--line))',
+          strong: 'hsl(var(--line-strong))',
+        },
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          soft: 'hsl(var(--primary-soft))',
+          foreground: 'hsl(var(--foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--text-muted))',
+          foreground: 'hsl(var(--text-muted))',
+        },
+        success: {
+          DEFAULT: 'hsl(142 60% 45%)',
+          soft: 'hsl(142 60% 90%)',
+        },
+        warning: {
+          DEFAULT: 'hsl(45 93% 47%)',
+          soft: 'hsl(45 93% 90%)',
+        },
+        error: {
+          DEFAULT: 'hsl(2 72% 48%)',
+          soft: 'hsl(2 72% 90%)',
+        },
+        cyan: 'hsl(192 85% 55%)',
+        pink: 'hsl(338 82% 62%)',
+      },
+      fontFamily: {
+        sans: ['"Avenir Next"', 'Segoe UI', 'Noto Sans', 'system-ui', 'sans-serif'],
+      },
+      animation: {
+        'spin-slow': 'spin 2s linear infinite',
+        'pulse-slow': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'pulse-ring': 'pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      },
+      keyframes: {
+        'pulse-ring': {
+          '0%': { boxShadow: '0 0 0 0 hsl(var(--primary) / 0.4)' },
+          '50%': { boxShadow: '0 0 0 4px hsl(var(--primary) / 0)' },
+          '100%': { boxShadow: '0 0 0 0 hsl(var(--primary) / 0)' },
+        },
+      },
+      borderRadius: {
+        lg: '12px',
+        md: '8px',
+        sm: '6px',
+      },
+      boxShadow: {
+        'soft': '0 1px 2px 0 rgb(23 32 46 / 0.06)',
+        'card': '0 12px 30px -12px rgb(23 32 46 / 0.22)',
+        'dark-soft': '0 1px 2px 0 rgb(2 8 18 / 0.35)',
+        'dark-card': '0 12px 30px -12px rgb(2 8 18 / 0.55)',
+      },
+    },
+  },
+  plugins: [],
+}