From eb038c69ed181b2a653e9567333a96d50116ba69 Mon Sep 17 00:00:00 2001 From: Collin Barrett <6483057+collinbarrett@users.noreply.github.com> Date: Thu, 12 Jun 2025 19:46:21 -0500 Subject: [PATCH] feat(web): npx shadcn@latest init --- web/components.json | 21 +++++++ web/package-lock.json | Bin 215605 -> 217777 bytes web/package.json | 7 ++- web/src/app/globals.css | 124 +++++++++++++++++++++++++++++++++++----- web/src/lib/utils.ts | 6 ++ 5 files changed, 143 insertions(+), 15 deletions(-) create mode 100644 web/components.json create mode 100644 web/src/lib/utils.ts diff --git a/web/components.json b/web/components.json new file mode 100644 index 000000000..234cfeb27 --- /dev/null +++ b/web/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "", + "css": "src/app/globals.css", + "baseColor": "slate", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} diff --git a/web/package-lock.json b/web/package-lock.json index 99f65049826e079e71b19fbe82843465c0130815..ddb8a1f26373bd0f89f48a3a54fd6ae825584c67 100644 GIT binary patch delta 1134 zcmZ`(OKcNY6xF)kb>BPh>Ya1%x$ngz z*Yn4&2fs?PA=)<97cE_E$touH9Ib8X&dBqr+jED+132Z`{=j{_JhEXA=Ln5crxBwk z>xzn5swg|hxqixrlb-E|ugmb;`(SC+5p`prw-n4&t%f?k#NZ4JCy*?*|z66g)_KsviJMO7f-?TDL^teF8wcE_Q8_uBNqcoE>I`aEc-+>72&HDaCvgTd(U^;hG^lo zM#y~;z9JCs^zWO97XgM1^M8PKc+dlj@H-cvU59yd4fYVDA+?WemDQR_=7oq;wjx4Z z;7ElDvRN)XpxAmS0z{K3^*#z3873+lvtmlHM0!L_mxo$?G(#uwiFR7 z;hdJ2jC8VQnpIz66sbwdSRgAxE7fVH%%Q+p>|kD4=zangC!haz4&GQ@_z3>=5-eS1 zaX(JE@7;6Xp#nIGlSg6jzi{$k`pNWB1N`{p%-oNYhnLo&`z^x4uP!XSzjox&nV8e2 zh26Kv^-3dB?KH|J!B`#2;OljZCkBC7kV|)MO}|Ty!y_}SNzqZ#38r}!CHtXRJ|HW# zor3RnB0hXqa%)=`y3Xjk|UdJ+jC*`@l2#W$Wg9iY(fW4w27*cgkE?_-pz6 z$?1S^yvPQ^z^)Hrt~nlb%Kiv%>*x0hg|e0S$v;1GixV0Zu!& keLw*t0f*s20k`2o0(L03<7@(_rne#$1LqL8o+kqnE63p-c>n+a diff --git a/web/package.json b/web/package.json index 4d3749bdf..363779d79 100644 --- a/web/package.json +++ b/web/package.json @@ -9,9 +9,13 @@ "lint": "next lint" }, "dependencies": { + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "lucide-react": "^0.514.0", "next": "15.3.3", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "tailwind-merge": "^3.3.1" }, "devDependencies": { "@eslint/eslintrc": "^3", @@ -24,6 +28,7 @@ "eslint-config-prettier": "^10.1.5", "prettier": "3.5.3", "tailwindcss": "^4", + "tw-animate-css": "^1.3.4", "typescript": "^5" } } diff --git a/web/src/app/globals.css b/web/src/app/globals.css index a2dc41ece..9711dafc2 100644 --- a/web/src/app/globals.css +++ b/web/src/app/globals.css @@ -1,26 +1,122 @@ @import "tailwindcss"; +@import "tw-animate-css"; -:root { - --background: #ffffff; - --foreground: #171717; -} +@custom-variant dark (&:is(.dark *)); @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.129 0.042 264.695); + --card: oklch(1 0 0); + --card-foreground: oklch(0.129 0.042 264.695); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.129 0.042 264.695); + --primary: oklch(0.208 0.042 265.755); + --primary-foreground: oklch(0.984 0.003 247.858); + --secondary: oklch(0.968 0.007 247.896); + --secondary-foreground: oklch(0.208 0.042 265.755); + --muted: oklch(0.968 0.007 247.896); + --muted-foreground: oklch(0.554 0.046 257.417); + --accent: oklch(0.968 0.007 247.896); + --accent-foreground: oklch(0.208 0.042 265.755); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.929 0.013 255.508); + --input: oklch(0.929 0.013 255.508); + --ring: oklch(0.704 0.04 256.788); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.984 0.003 247.858); + --sidebar-foreground: oklch(0.129 0.042 264.695); + --sidebar-primary: oklch(0.208 0.042 265.755); + --sidebar-primary-foreground: oklch(0.984 0.003 247.858); + --sidebar-accent: oklch(0.968 0.007 247.896); + --sidebar-accent-foreground: oklch(0.208 0.042 265.755); + --sidebar-border: oklch(0.929 0.013 255.508); + --sidebar-ring: oklch(0.704 0.04 256.788); +} + +.dark { + --background: oklch(0.129 0.042 264.695); + --foreground: oklch(0.984 0.003 247.858); + --card: oklch(0.208 0.042 265.755); + --card-foreground: oklch(0.984 0.003 247.858); + --popover: oklch(0.208 0.042 265.755); + --popover-foreground: oklch(0.984 0.003 247.858); + --primary: oklch(0.929 0.013 255.508); + --primary-foreground: oklch(0.208 0.042 265.755); + --secondary: oklch(0.279 0.041 260.031); + --secondary-foreground: oklch(0.984 0.003 247.858); + --muted: oklch(0.279 0.041 260.031); + --muted-foreground: oklch(0.704 0.04 256.788); + --accent: oklch(0.279 0.041 260.031); + --accent-foreground: oklch(0.984 0.003 247.858); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.551 0.027 264.364); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.208 0.042 265.755); + --sidebar-foreground: oklch(0.984 0.003 247.858); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.984 0.003 247.858); + --sidebar-accent: oklch(0.279 0.041 260.031); + --sidebar-accent-foreground: oklch(0.984 0.003 247.858); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.551 0.027 264.364); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; } } - -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; -} diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts new file mode 100644 index 000000000..a5ef19350 --- /dev/null +++ b/web/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)); +}