chore(next15): upgrade to next 15 and move away from vite

apps/engine/package.json

@@ -26,21 +26,21 @@
     "@hookform/resolvers": "^3.9.0",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@next/mdx": "^15.0.2",
+    "@next/mdx": "15.0.2",
     "@octokit/app": "^15.1.0",
     "@octokit/auth-oauth-app": "^8.1.1",
     "@octokit/core": "^6.1.2",
-    "@sentry/nextjs": "^8.30.0",
-    "@supabase/ssr": "^0.4.0",
-    "@supabase/supabase-js": "^2.45.0",
+    "@sentry/nextjs": "^8.36.0",
+    "@supabase/ssr": "^0.5.1",
+    "@supabase/supabase-js": "^2.46.1",
     "@t3-oss/env-core": "^0.11.1",
     "@t3-oss/env-nextjs": "^0.11.1",
-    "@tanstack/react-query": "^5.51.24",
+    "@tanstack/react-query": "^5.59.19",
     "@trpc/react-query": "catalog:",
     "@trpc/server": "catalog:",
-    "@vercel/flags": "^2.6.0",
+    "@vercel/flags": "^2.6.2",
     "@vercel/kv": "^2.0.0",
-    "@vercel/og": "^0.6.2",
+    "@vercel/og": "^0.6.3",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "design-tokens-format-module": "catalog:",
@@ -50,21 +50,21 @@
     "human-id": "^4.1.1",
     "memoize": "^10.0.0",
     "next": "catalog:",
-    "next-safe-action": "^7.8.1",
-    "postgres": "^3.4.4",
-    "posthog-js": "^1.176.0",
-    "rambda": "^9.2.1",
+    "next-safe-action": "^7.9.9",
+    "postgres": "^3.4.5",
+    "posthog-js": "^1.181.0",
+    "rambda": "^9.4.0",
     "react": "catalog:",
     "react-diff-viewer": "^3.1.1",
     "react-dom": "catalog:",
-    "react-hook-form": "^7.52.2",
+    "react-hook-form": "catalog:",
     "react-json-view": "^1.21.3",
-    "react-json-view-lite": "^1.4.0",
+    "react-json-view-lite": "^1.5.0",
     "server-only": "^0.0.1",
     "sharp": "^0.33.5",
     "standardwebhooks": "^1.0.0",
     "superjson": "^2.2.1",
-    "tailwind-merge": "^2.4.0",
+    "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
     "zod-form-data": "^2.0.2"
   },
@@ -73,7 +73,7 @@
     "@ds-project/prettier": "workspace:*",
     "@ds-project/services": "workspace:*",
     "@ds-project/typescript": "workspace:*",
-    "@next/env": "^14.2.13",
+    "@next/env": "15.0.2",
     "@octokit/types": "^13.5.0",
     "@tailwindcss/typography": "^0.5.15",
     "@types/fs-extra": "^11.0.4",
@@ -84,7 +84,7 @@
     "@types/react-dom": "catalog:",
     "drizzle-kit": "^0.24.2",
     "eslint": "catalog:",
-    "eslint-config-next": "14.2.5",
+    "eslint-config-next": "15.0.2",
     "fs-extra": "^11.2.0",
     "jiti": "^1.21.6",
     "postcss": "catalog:",

apps/engine/src/app/(home)/layout.tsx

@@ -13,7 +13,7 @@ export default function Layout({
   return (
     <>
       <div className="landing-bg" />
-      <header className="sticky top-0 w-full flex justify-center z-10">
+      <header className="sticky top-0 z-10 flex w-full justify-center">
         <HomeNavigation />
       </header>
       <main className="flex min-h-screen w-full flex-col items-center py-2">

apps/engine/src/app/(home)/page.tsx

@@ -10,7 +10,7 @@ export default function Home() {
       <div className="mx-4">
         <Hero />
       </div>
-      <div className="flex-col gap-4 max-w-screen-lg m-4">
+      <div className="m-4 max-w-screen-lg flex-col gap-4">
         <VisionBanner />
 
         <SyncFigmaBanner />

apps/engine/src/app/_components/analytics-tracker.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const AnalyticsPageView = dynamic(
+  () =>
+    import('./analytics-page-view').then((module) => module.AnalyticsPageView),
+  {
+    ssr: false,
+  }
+);
+
+export const AnalyticsTracker = () => {
+  return <AnalyticsPageView />;
+};

apps/engine/src/app/app/@connections/destinations/github/_components/github-card.tsx

@@ -1,14 +1,15 @@
 'use client';
 
 import { IntegrationCard } from '@/components';
-import { Icons, Text, useToast } from '@ds-project/components';
+import { Icons, Text } from '@ds-project/components/server';
 import { useCallback, useState } from 'react';
 import { SettingsForm } from './settings-form';
 import { disableIntegration } from '../_actions/disable-integration.action';
 import { useRouter } from 'next/navigation';
 import { IntegrationLogo } from '@/components/integration-logo/integration-logo';
 import { IntegrationSettings } from '@/components/integration-settings/integration-settings';
 import type { api } from '@ds-project/api/rsc';
+import { useToast } from '@ds-project/components/client';
 
 interface GithubCardProps {
   isEnabled: boolean;

apps/engine/src/app/app/@connections/destinations/github/_components/settings-form.tsx

@@ -1,21 +1,20 @@
 'use client';
+import { Button, Input } from '@ds-project/components/server';
 import {
-  Button,
   Form,
   FormControl,
   FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-  Input,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
   useToast,
-} from '@ds-project/components';
+} from '@ds-project/components/client';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useCallback, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -94,18 +93,17 @@ export function SettingsForm({
   return (
     <Form {...form}>
       <form
-        className="flex flex-col grow"
+        className="flex grow flex-col"
         onSubmit={form.handleSubmit(onSubmit)}
       >
-        <div className="flex flex-col grow gap-4">
+        <div className="flex grow flex-col gap-4">
           <FormField
             control={form.control}
             name="repositoryId"
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Repository</FormLabel>
                 <Select
-                  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                   defaultValue={field.value?.toString()}
                   onValueChange={field.onChange}
                 >
@@ -193,7 +191,7 @@ export function SettingsForm({
             )}
           />
         </div>
-        <div className="flex gap-2 justify-between items-center place-self-end">
+        <div className="flex items-center justify-between gap-2 place-self-end">
           <SupportButton />
           <Button type="button" variant="outline" onClick={onCancel}>
             Cancel

apps/engine/src/app/app/@connections/destinations/github/page.tsx

@@ -5,7 +5,7 @@ import {
   CardHeader,
   CardTitle,
   Text,
-} from '@ds-project/components';
+} from '@ds-project/components/server';
 import { JsonBlock } from '@/components';
 import { api } from '@ds-project/api/rsc';
 

apps/engine/src/app/app/@connections/destinations/gitlab/_components/gitlab-card.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { IntegrationCard } from '@/components';
-import { Button, LucideIcons } from '@ds-project/components';
+import { Button, LucideIcons } from '@ds-project/components/server';
 import { IntegrationLogo } from '@/components/integration-logo/integration-logo';
 
 export function GitlabCard() {

apps/engine/src/app/app/@connections/notifications/discord/_components/discord-card.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { IntegrationCard } from '@/components';
-import { Button, Icons } from '@ds-project/components';
+import { Button, Icons } from '@ds-project/components/server';
 import { IntegrationLogo } from '@/components/integration-logo/integration-logo';
 
 export function DiscordCard() {

apps/engine/src/app/app/@connections/notifications/slack/_components/slack-card.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { IntegrationCard } from '@/components';
-import { Button, Icons, LucideIcons } from '@ds-project/components';
+import { Button, LucideIcons } from '@ds-project/components/server';
 import { IntegrationLogo } from '@/components/integration-logo/integration-logo';
 
 export function SlackCard() {

apps/engine/src/app/app/@connections/sources/figma/_components/figma-card.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { IntegrationCard } from '@/components';
-import { Button, Icons } from '@ds-project/components';
+import { Button, Icons } from '@ds-project/components/server';
 import { IntegrationLogo } from '@/components/integration-logo/integration-logo';
 import Link from 'next/link';
 import { config } from '@/config';

apps/engine/src/app/app/@connections/sources/figma/_components/provider.tsx

@@ -1,4 +1,4 @@
-import { Button, Icons, Text } from '@ds-project/components';
+import { Button, Icons, Text } from '@ds-project/components/server';
 import Link from 'next/link';
 import { getFigma } from '@/lib/figma';
 import { api } from '@ds-project/api/rsc';

apps/engine/src/app/app/@connections/sources/figma/resources/[resourceId]/page.tsx

@@ -4,15 +4,14 @@ import {
   CardHeader,
   CardTitle,
   Text,
-} from '@ds-project/components';
+} from '@ds-project/components/server';
 import { JsonBlock } from '@/components';
 import { getResource } from './_actions/resource.action';
 
-export default async function Page({
-  params,
-}: {
-  params: { resourceId: string };
+export default async function Page(props: {
+  params: Promise<{ resourceId: string }>;
 }) {
+  const params = await props.params;
   const resource = await getResource(params.resourceId);
 
   return (

apps/engine/src/app/app/@connections/sources/figma/resources/_components/figma-file.tsx

@@ -1,11 +1,11 @@
 import {
-  AspectRatio,
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@ds-project/components';
+} from '@ds-project/components/server';
+import { AspectRatio } from '@ds-project/components/client';
 import { formatDistance, subDays } from 'date-fns';
 import Image from 'next/image';
 import { cn } from '@/lib/css';

apps/engine/src/app/app/@connections/sources/figma/resources/_components/figma-form.tsx

@@ -1,16 +1,15 @@
 'use client';
 
 import {
-  Button,
   Form,
   FormControl,
   FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-  Input,
-} from '@ds-project/components';
+} from '@ds-project/components/client';
+import { Button, Input } from '@ds-project/components/server';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect } from 'react';
@@ -41,7 +40,6 @@ export function FigmaForm() {
         form.setValue('thumbnailUrl', file.thumbnailUrl);
       })
       .catch((error) => {
-        // eslint-disable-next-line no-console -- TODO: replace with monitoring
         console.error('Failed to get file preview', error);
       });
   }, [form, url]);

apps/engine/src/app/app/@connections/sources/figma/resources/_components/resources-list.tsx

@@ -1,5 +1,5 @@
 import type { InferSelectModel } from 'drizzle-orm';
-import { Text } from '@ds-project/components';
+import { Text } from '@ds-project/components/server';
 import Link from 'next/link';
 import { FigmaFile } from './figma-file';
 import type { Resources } from '@ds-project/database/schema';

apps/engine/src/app/app/@connections/sources/figma/resources/page.tsx

@@ -4,7 +4,7 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@ds-project/components';
+} from '@ds-project/components/server';
 import { ResourcesList } from './_components/resources-list';
 import { getResources } from './_actions/resources.action';
 

apps/engine/src/app/app/@connections/sources/penpot/_components/penpot-card.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { IntegrationCard } from '@/components';
-import { Button, PenpotLogo } from '@ds-project/components';
+import { Button, PenpotLogo } from '@ds-project/components/server';
 import { IntegrationLogo } from '@/components/integration-logo/integration-logo';
 
 export function PenpotCard() {

apps/engine/src/app/app/_actions/account-details.action.ts

@@ -1,7 +1,7 @@
 import { createServerClient } from '@ds-project/auth/server';
 
 export async function getEmail() {
-  const supabase = createServerClient();
+  const supabase = await createServerClient();
   const {
     data: { session },
   } = await supabase.auth.getSession();

apps/engine/src/app/app/keys/_components/create-api-key-dialog.tsx

@@ -5,17 +5,19 @@ import {
   AlertDescription,
   AlertTitle,
   Button,
+  Icons,
+  Input,
+  Text,
+} from '@ds-project/components/server';
+import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-  Icons,
-  Input,
-  Text,
-} from '@ds-project/components';
+} from '@ds-project/components/client';
 import { createApiKeyAction } from '../_actions/create-api-key';
 import type { FormEvent } from 'react';
 import { useState } from 'react';

apps/engine/src/app/app/keys/_components/key-item.tsx

@@ -1,4 +1,4 @@
-import { Text } from '@ds-project/components';
+import { Text } from '@ds-project/components/server';
 import { RevokeApiKeyDialog } from './revoke-api-key-dialog';
 
 export function KeyItem({
@@ -12,7 +12,7 @@ export function KeyItem({
   const userDescription = description.replace(/^([\da-f-]+-)+/, '');
 
   return (
-    <div className="border border-gray-200 bg-white p-4 rounded-md flex justify-between items-center">
+    <div className="flex items-center justify-between rounded-md border border-gray-200 bg-white p-4">
       <Text>
         <span>{userDescription}</span>
       </Text>

apps/engine/src/app/app/keys/_components/revoke-api-key-dialog.tsx

@@ -1,18 +1,15 @@
 'use client';
 
+import { Button, Icons, Input, Text } from '@ds-project/components/server';
 import {
-  Button,
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-  Icons,
-  Input,
-  Text,
-} from '@ds-project/components';
+} from '@ds-project/components/client';
 import type { FormEvent } from 'react';
 import { useState } from 'react';
 import { revokeApiKeyAction } from '../_actions/revoke-api-key';

apps/engine/src/app/app/releases/_components/select-releases.tsx

@@ -5,7 +5,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@ds-project/components';
+} from '@ds-project/components/client';
 import { useCallback, useEffect, useState } from 'react';
 import type { JSONTokenTree } from 'design-tokens-format-module';
 import { InstallRelease, JsonBlock } from '@/components';