Add shadcn/ui

packages/frontend/components.json

@@ -0,0 +1,21 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "default",
+	"rsc": false,
+	"tsx": true,
+	"tailwind": {
+		"config": "tailwind.config.js",
+		"css": "src/style.css",
+		"baseColor": "stone",
+		"cssVariables": false,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/hooks"
+	},
+	"iconLibrary": "lucide"
+}

packages/frontend/package.json

@@ -9,6 +9,7 @@
 		"@vitejs/plugin-react": "catalog:",
 		"autoprefixer": "catalog:",
 		"backend": "workspace:^",
+		"class-variance-authority": "catalog:",
 		"elysia": "catalog:",
 		"postcss": "catalog:",
 		"tailwindcss": "catalog:",
@@ -17,10 +18,14 @@
 	},
 	"dependencies": {
 		"@elysiajs/eden": "catalog:",
+		"clsx": "catalog:",
 		"common": "workspace:^",
+		"lucide-react": "catalog:",
 		"opensheetmusicdisplay": "catalog:",
 		"react": "catalog:",
 		"react-dom": "catalog:",
-		"react-router-dom": "catalog:"
+		"react-router-dom": "catalog:",
+		"tailwind-merge": "catalog:",
+		"tailwindcss-animate": "catalog:"
 	}
 }

packages/frontend/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/frontend/src/style.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+	:root {
+		--radius: 0.5rem;
+	}
+}

packages/frontend/tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import("tailwindcss").Config} */
 export default {
+	darkMode: ["class"],
 	content: [
 		"./index.html",
 		"./src/**/*.{js,ts,jsx,tsx}",
@@ -9,5 +10,14 @@ export default {
 			sans: ["Lato", "sans-serif"],
 			mono: ["JetBrains Mono", "monospace"],
 		},
+		extend: {
+			borderRadius: {
+				lg: "var(--radius)",
+				md: "calc(var(--radius) - 2px)",
+				sm: "calc(var(--radius) - 4px)",
 			},
+			colors: {},
+		},
+	},
+	plugins: [require("tailwindcss-animate")],
 };

packages/frontend/tsconfig.json

@@ -2,6 +2,11 @@
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"types": ["react", "react-dom"],
+
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["./src/*"],
+		},
 	},
 	"references": [
 		{ "path": "../common" },

packages/frontend/vite.config.ts

@@ -6,6 +6,7 @@ export default defineConfig({
 	plugins: [react()],
 	resolve: {
 		alias: {
+			"@": path.resolve(__dirname, "./src"),
 			"common": path.resolve(__dirname, "../common/src"),
 		},
 	},

pnpm-lock.yaml

@@ -27,6 +27,12 @@ catalogs:
     autoprefixer:
       specifier: ^10.4.20
       version: 10.4.20
+    class-variance-authority:
+      specifier: ^0.7.1
+      version: 0.7.1
+    clsx:
+      specifier: ^2.1.1
+      version: 2.1.1
     elysia:
       specifier: ^1.1.25
       version: 1.1.25
@@ -36,6 +42,9 @@ catalogs:
     kysely-bun-sqlite:
       specifier: ^0.3.2
       version: 0.3.2
+    lucide-react:
+      specifier: ^0.462.0
+      version: 0.462.0
     opensheetmusicdisplay:
       specifier: ^1.8.9
       version: 1.8.9
@@ -51,9 +60,15 @@ catalogs:
     react-router-dom:
       specifier: ^6.28.0
       version: 6.28.0
+    tailwind-merge:
+      specifier: ^2.5.5
+      version: 2.5.5
     tailwindcss:
       specifier: ^3.4.15
       version: 3.4.15
+    tailwindcss-animate:
+      specifier: ^1.0.7
+      version: 1.0.7
     typescript:
       specifier: ^5.6.3
       version: 5.6.3
@@ -105,9 +120,15 @@ importers:
       '@elysiajs/eden':
         specifier: 'catalog:'
         version: 1.1.3(elysia@1.1.25(@sinclair/typebox@0.33.7)(typescript@5.6.3))
+      clsx:
+        specifier: 'catalog:'
+        version: 2.1.1
       common:
         specifier: workspace:^
         version: link:../common
+      lucide-react:
+        specifier: 'catalog:'
+        version: 0.462.0(react@18.3.1)
       opensheetmusicdisplay:
         specifier: 'catalog:'
         version: 1.8.9
@@ -120,6 +141,12 @@ importers:
       react-router-dom:
         specifier: 'catalog:'
         version: 6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tailwind-merge:
+        specifier: 'catalog:'
+        version: 2.5.5
+      tailwindcss-animate:
+        specifier: 'catalog:'
+        version: 1.0.7(tailwindcss@3.4.15)
     devDependencies:
       '@types/react':
         specifier: 'catalog:'
@@ -136,6 +163,9 @@ importers:
       backend:
         specifier: workspace:^
         version: link:../backend
+      class-variance-authority:
+        specifier: 'catalog:'
+        version: 0.7.1
       elysia:
         specifier: 'catalog:'
         version: 1.1.25(@sinclair/typebox@0.33.7)(typescript@5.6.3)
@@ -708,10 +738,17 @@ packages:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   clean-stack@2.2.0:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
     engines: {node: '>=6'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -1094,6 +1131,11 @@ packages:
     resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
     engines: {node: '>=12'}
 
+  lucide-react@0.462.0:
+    resolution: {integrity: sha512-NTL7EbAao9IFtuSivSZgrAh4fZd09Lr+6MTkqIxuHaH2nnYiYIzXPo06cOxHg9wKLdj6LL8TByG4qpePqwgx/g==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
+
   make-fetch-happen@10.2.1:
     resolution: {integrity: sha512-NgOPbRiaQM10DYXvN3/hhGVI2M5MtITFryzBGxHM5p4wnFxsVCbxkrBrDsk+EZ5OB4jEOT7AjDxtdF+KVEFT7w==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
@@ -1524,6 +1566,14 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  tailwind-merge@2.5.5:
+    resolution: {integrity: sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==}
+
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
   tailwindcss@3.4.15:
     resolution: {integrity: sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==}
     engines: {node: '>=14.0.0'}
@@ -2202,9 +2252,15 @@ snapshots:
   chownr@2.0.0:
     optional: true
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   clean-stack@2.2.0:
     optional: true
 
+  clsx@2.1.1: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -2603,6 +2659,10 @@ snapshots:
   lru-cache@7.18.3:
     optional: true
 
+  lucide-react@0.462.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   make-fetch-happen@10.2.1:
     dependencies:
       agentkeepalive: 4.5.0
@@ -3117,6 +3177,12 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  tailwind-merge@2.5.5: {}
+
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.15):
+    dependencies:
+      tailwindcss: 3.4.15
+
   tailwindcss@3.4.15:
     dependencies:
       '@alloc/quick-lru': 5.2.0

pnpm-workspace.yaml

@@ -9,14 +9,19 @@ catalog:
   '@types/react-dom': '^18.3.1'
   '@vitejs/plugin-react': '^4.3.3'
   autoprefixer: '^10.4.20'
+  class-variance-authority: '^0.7.1'
+  clsx: '^2.1.1'
   elysia: '^1.1.25'
   kysely: '^0.27.4'
   kysely-bun-sqlite: '^0.3.2'
+  lucide-react: '^0.462.0'
   opensheetmusicdisplay: '^1.8.9'
   postcss: '^8.4.49'
   react: '^18.3.1'
   react-dom: '^18.3.1'
   react-router-dom: '^6.28.0'
+  tailwind-merge: '^2.5.5'
   tailwindcss: '^3.4.15'
+  tailwindcss-animate: '^1.0.7'
   typescript: '^5.6.3'
   vite: '^5.4.11'