From 8c13f5037878ddf3f9797031321c4a9a4a79d275 Mon Sep 17 00:00:00 2001 From: Szymon Nowakowski Date: Sun, 1 Dec 2024 10:25:07 +0100 Subject: [PATCH] Add shadcn/ui --- packages/frontend/components.json | 21 +++++++++ packages/frontend/package.json | 7 ++- packages/frontend/src/lib/utils.ts | 6 +++ packages/frontend/src/style.css | 6 +++ packages/frontend/tailwind.config.js | 10 +++++ packages/frontend/tsconfig.json | 5 +++ packages/frontend/vite.config.ts | 1 + pnpm-lock.yaml | 66 ++++++++++++++++++++++++++++ pnpm-workspace.yaml | 5 +++ 9 files changed, 126 insertions(+), 1 deletion(-) create mode 100644 packages/frontend/components.json create mode 100644 packages/frontend/src/lib/utils.ts diff --git a/packages/frontend/components.json b/packages/frontend/components.json new file mode 100644 index 0000000..39eb7a4 --- /dev/null +++ b/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" +} diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 16561fe..5936bca 100644 --- a/packages/frontend/package.json +++ b/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:" } } diff --git a/packages/frontend/src/lib/utils.ts b/packages/frontend/src/lib/utils.ts new file mode 100644 index 0000000..3200be2 --- /dev/null +++ b/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)); +} diff --git a/packages/frontend/src/style.css b/packages/frontend/src/style.css index b5c61c9..f0c1044 100644 --- a/packages/frontend/src/style.css +++ b/packages/frontend/src/style.css @@ -1,3 +1,9 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer base { + :root { + --radius: 0.5rem; + } +} diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js index 8d79c54..22c119f 100644 --- a/packages/frontend/tailwind.config.js +++ b/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")], }; diff --git a/packages/frontend/tsconfig.json b/packages/frontend/tsconfig.json index a476017..386772e 100644 --- a/packages/frontend/tsconfig.json +++ b/packages/frontend/tsconfig.json @@ -2,6 +2,11 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "types": ["react", "react-dom"], + + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"], + }, }, "references": [ { "path": "../common" }, diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts index e25138c..007addc 100644 --- a/packages/frontend/vite.config.ts +++ b/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"), }, }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 241e44f..75893ef 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 2f27753..ead3a55 100644 --- a/pnpm-workspace.yaml +++ b/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'