Added shadcn/ui

pmp-frontend-app/components.json

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

pmp-frontend-app/package.json

@@ -11,22 +11,29 @@
   },
   "dependencies": {
     "@jonkoops/matomo-tracker-react": "^0.7.0",
+    "@radix-ui/react-icons": "^1.3.0",
     "axios": "^1.7.4",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "daisyui": "^4.7.3",
     "dompurify": "^3.1.6",
     "js-cookie": "^3.0.5",
     "lato-font": "^3.0.0",
+    "lucide-react": "^0.441.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-google-recaptcha": "^3.1.0",
     "react-iframe": "^1.8.5",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.22.3",
-    "remark-gfm": "^4.0.0"
+    "remark-gfm": "^4.0.0",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
     "@types/js-cookie": "^3.0.6",
+    "@types/node": "^22.5.5",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",
     "@types/react-google-recaptcha": "^2.1.9",

pmp-frontend-app/src/index.css

@@ -6,4 +6,66 @@
     html {
         font-family: Lato, sans-serif
     }
+  :root {
+        --background: 0 0% 100%;
+        --foreground: 0 0% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 0 0% 3.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 0 0% 3.9%;
+        --primary: 0 0% 9%;
+        --primary-foreground: 0 0% 98%;
+        --secondary: 0 0% 96.1%;
+        --secondary-foreground: 0 0% 9%;
+        --muted: 0 0% 96.1%;
+        --muted-foreground: 0 0% 45.1%;
+        --accent: 0 0% 96.1%;
+        --accent-foreground: 0 0% 9%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 89.8%;
+        --input: 0 0% 89.8%;
+        --ring: 0 0% 3.9%;
+        --chart-1: 12 76% 61%;
+        --chart-2: 173 58% 39%;
+        --chart-3: 197 37% 24%;
+        --chart-4: 43 74% 66%;
+        --chart-5: 27 87% 67%;
+        --radius: 0.5rem
+    }
+  .dark {
+        --background: 0 0% 3.9%;
+        --foreground: 0 0% 98%;
+        --card: 0 0% 3.9%;
+        --card-foreground: 0 0% 98%;
+        --popover: 0 0% 3.9%;
+        --popover-foreground: 0 0% 98%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 0 0% 9%;
+        --secondary: 0 0% 14.9%;
+        --secondary-foreground: 0 0% 98%;
+        --muted: 0 0% 14.9%;
+        --muted-foreground: 0 0% 63.9%;
+        --accent: 0 0% 14.9%;
+        --accent-foreground: 0 0% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 14.9%;
+        --input: 0 0% 14.9%;
+        --ring: 0 0% 83.1%;
+        --chart-1: 220 70% 50%;
+        --chart-2: 160 60% 45%;
+        --chart-3: 30 80% 55%;
+        --chart-4: 280 65% 60%;
+        --chart-5: 340 75% 55%
+    }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+    }
+  body {
+    @apply bg-background text-foreground;
+    }
 }

pmp-frontend-app/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))
+}

pmp-frontend-app/tailwind.config.js

@@ -1,35 +1,81 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
+    darkMode: ["class"],
+    content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {
-      colors: {
-          "primary": "#045c64", // Teal, primary color
-          "primary-content": "#ffffff", // White, text color on primary
-          "secondary": "#777373", // Gray, secondary color
-          "secondary-content": "#ffffff", // White, text color on secondary
-          "accent": "#a7c947", // SciLifeLab Lime, accent color
-          "accent-content": "#ffffff", // White, text color on accent
-          "neutral": "#e5e5e5",  // SciLifeLab Light Gray, neutral color
-          "neutral-content": "#000000", // Black, text color on neutral
-          "base-100": "#f8fafc", // Light slate gray, base color
-          "base-100-content": "#000000", // Black, text color on base-100
-          "info": "#491f53", // SciLifeLab Grape, Info color
-          "info-content": "#ffffff", // White, text color on info
-          "success": "#a7c947", // SciLifeLab Green, Success color
-          "success-content": "#ffffff", // White, text color on success
-          "warning": "#ff9900", // Orange, Warning color
-          "warning-content": "#ffffff", // White, text color on warning
-          "error": "#ff5724", // Red, Error color
-          "error-content": "#ffffff", // White, text color on error
-          "50aqua": "#A6CBCF", // 50% Aqua
-          "75aqua": "#79B1B7", //75% Aqua
-        },
-      },
-    },
+  	extend: {
+  		colors: {
+  			'primary': '#045c64',
+  			'primary-content': '#ffffff',
+  			'secondary': '#777373',
+  			'secondary-content': '#ffffff',
+  			'accent': '#a7c947',
+  			'accent-content': '#ffffff',
+  			'neutral': '#e5e5e5',
+  			'neutral-content': '#000000',
+  			'base-100': '#f8fafc',
+  			'base-100-content': '#000000',
+  			'info': '#491f53',
+  			'info-content': '#ffffff',
+  			'success': '#a7c947',
+  			'success-content': '#ffffff',
+  			'warning': '#ff9900',
+  			'warning-content': '#ffffff',
+  			'error': '#ff5724',
+  			'error-content': '#ffffff',
+  			'50aqua': '#A6CBCF',
+  			'75aqua': '#79B1B7',
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		}
+  	}
+  },
     plugins: [
       require("daisyui"),
       function ({ addBase, theme }) {
@@ -39,5 +85,6 @@ export default {
           },
         });
       },
+        require("tailwindcss-animate")
     ],
   }

pmp-frontend-app/tsconfig.json

@@ -18,7 +18,13 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    /* shadcn/ui */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

pmp-frontend-app/tsconfig.node.json

@@ -5,7 +5,13 @@
     "module": "ESNext",
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
-    "strict": true
+    "strict": true,
+
+    /* shadcn/ui */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["vite.config.ts"]
 }

pmp-frontend-app/vite.config.ts

@@ -1,12 +1,15 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import path from "path"; // for shadcn/ui
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  assetsInclude: [
-    "**/*.JPG", 
-    "**/*.PNG"
-  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  assetsInclude: ["**/*.JPG", "**/*.PNG"],
   base: "./",
-});
+});