feat: migrate components to tailwind v4 class

tiesen243 · Jan 25, 2025 · 60e6345 · 60e6345
1 parent 55adc4d
commit 60e6345
Show file tree

Hide file tree

Showing 13 changed files with 35 additions and 96 deletions.
diff --git a/apps/web/app/api/auth/[...auth]/route.ts b/apps/web/app/api/auth/[...auth]/route.ts
@@ -7,8 +7,6 @@ import { OAuth } from '@yuki/auth/oauth'
 
 import { signIn } from '@/lib/auth/server'
 
-// export const runtime = 'edge'
-
 export const GET = async (
   req: NextRequest,
   { params }: { params: Promise<{ auth: [string, string] }> },

diff --git a/apps/web/app/api/trpc/[trpc]/route.ts b/apps/web/app/api/trpc/[trpc]/route.ts
@@ -4,8 +4,6 @@ import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
 
 import { appRouter, createTRPCContext } from '@yuki/api'
 
-// export const runtime = 'edge'
-
 /**
  * Configure basic CORS headers
  * You should extend this to match your needs

diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -22,7 +22,11 @@ export default async function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={cn('font-sans antialiased', geistSans.variable, geistMono.variable)}
+        className={cn(
+          'min-h-dvh font-sans antialiased',
+          geistSans.variable,
+          geistMono.variable,
+        )}
       >
         <ThemeProvider attribute="class" defaultTheme="dark" disableTransitionOnChange>
           <SessionProvider session={session}>

diff --git a/apps/web/next.config.ts b/apps/web/next.config.ts
@@ -1,13 +1,16 @@
+/**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
+ * for Docker builds.
+ */
 import '@/env'
 
 import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
   reactStrictMode: true,
-  images: { unoptimized: true },
 
   /** Enables hot reloading for local packages without a build step */
-  transpilePackages: ['@yuki/db', '@yuki/ui'],
+  transpilePackages: ['@yuki/api', '@yuki/auth', '@yuki/db', '@yuki/ui'],
 
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -17,9 +17,9 @@
   "dependencies": {
     "@t3-oss/env-nextjs": "^0.11.1",
     "@tanstack/react-query": "^5.64.2",
-    "@trpc/client": "^11.0.0-rc.694",
-    "@trpc/react-query": "^11.0.0-rc.694",
-    "@trpc/server": "^11.0.0-rc.694",
+    "@trpc/client": "^11.0.0-rc.724",
+    "@trpc/react-query": "^11.0.0-rc.724",
+    "@trpc/server": "^11.0.0-rc.724",
     "@yuki/api": "workspace:*",
     "@yuki/auth": "workspace:*",
     "@yuki/db": "workspace:*",
@@ -32,11 +32,12 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.0",
-    "@types/node": "^20",
+    "@types/node": "^20.17.16",
     "@types/react": "^19.0.8",
-    "@types/react-dom": "^19",
+    "@types/react-dom": "^19.0.3",
     "@yuki/eslint-config": "workspace:*",
     "@yuki/prettier-config": "workspace:*",
+    "@yuki/tsconfig": "workspace:*",
     "dotenv-cli": "^8.0.0",
     "eslint": "latest",
     "postcss": "^8.5.1",

diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -10,9 +10,8 @@
     "tooling/*"
   ],
   "scripts": {
-    "build": "turbo run gnr && turbo run build",
+    "build": "turbo run build",
     "bump-deps": "bunx --bun npm-check-updates --deep -u -x react-day-picker && bun install",
-    "check": "bun lint && bun format && bun typecheck",
     "clean": "git clean -xdf node_modules",
     "clean:workspaces": "turbo run clean",
     "db:generate": "turbo -F @yuki/db gnr",

diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
@@ -6,17 +6,17 @@ import { cva } from 'class-variance-authority'
 import { cn } from '@yuki/ui/utils'
 
 const buttonVariants = cva(
-  'focus-visible:ring-ring inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'focus-visible:ring-ring inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-1 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm',
         destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-xs',
         outline:
-          'border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm',
+          'border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-xs',
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
       },

diff --git a/packages/ui/src/components/card.tsx b/packages/ui/src/components/card.tsx
@@ -6,7 +6,10 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('bg-card text-card-foreground rounded-xl border shadow', className)}
+      className={cn(
+        'bg-card text-card-foreground rounded-xl border shadow-sm',
+        className,
+      )}
       {...props}
     />
   ),

diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
       <input
         type={type}
         className={cn(
-          'border-input file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'border-input file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className,
         )}
         ref={ref}

diff --git a/packages/ui/src/components/toast.tsx b/packages/ui/src/components/toast.tsx
@@ -17,7 +17,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]',
+      'fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]',
       className,
     )}
     {...props}
@@ -26,7 +26,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  'group data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative mt-2 flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none',
+  'group data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none',
   {
     variants: {
       variant: {
@@ -68,7 +68,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      'hover:bg-secondary focus:ring-ring inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:ring-1 focus:outline-none disabled:pointer-events-none disabled:opacity-50',
+      'hover:bg-secondary focus:ring-ring inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:ring-1 focus:outline-hidden disabled:pointer-events-none disabled:opacity-50',
       className,
     )}
     {...props}
@@ -83,7 +83,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'text-foreground/50 hover:text-foreground absolute top-1 right-1 rounded-md p-1 opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100 focus:ring-1 focus:outline-none',
+      'text-foreground/50 hover:text-foreground absolute top-1 right-1 rounded-md p-1 opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100 focus:ring-1 focus:outline-hidden',
       className,
     )}
     toast-close=""

diff --git a/packages/ui/src/components/toaster.tsx b/packages/ui/src/components/toaster.tsx
@@ -23,7 +23,7 @@ export function Toaster() {
   return (
     <ToastProvider>
       {toasts.map(({ id, title, description, action, ...props }) => (
-        <Toast key={id} {...props}>
+        <Toast key={id} {...props} className="mt-1">
           {props.variant === 'success' && <CircleCheckIcon size={20} />}
           {props.variant === 'warning' && <CircleAlertIcon size={20} />}
           {props.variant === 'info' && <InfoIcon size={20} />}

diff --git a/turbo.json b/turbo.json
@@ -4,7 +4,7 @@
   "tasks": {
     "topo": { "dependsOn": ["^topo"] },
     "build": {
-      "dependsOn": ["^build"],
+      "dependsOn": ["^gnr", "^build"],
       "outputs": [".cache/tsbuildinfo.json", "dist/**"]
     },
     "clean": { "cache": false },