initial setup for vite

apps/studio/app/entry.client.tsx

@@ -0,0 +1,12 @@
+import { RemixBrowser } from '@remix-run/react'
+import { startTransition, StrictMode } from 'react'
+import { hydrateRoot } from 'react-dom/client'
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>
+  )
+})

apps/studio/app/root.tsx

@@ -0,0 +1,225 @@
+import 'styles/code.scss'
+import 'styles/contextMenu.scss'
+import 'styles/date-picker.scss'
+import 'styles/editor.scss'
+import 'styles/graphiql-base.scss'
+import 'styles/grid.scss'
+import 'styles/main.scss'
+import 'styles/markdown-preview.scss'
+import 'styles/monaco.scss'
+import 'styles/react-data-grid-logs.scss'
+import 'styles/reactflow.scss'
+import 'styles/storage.scss'
+import 'styles/stripe.scss'
+import 'styles/toast.scss'
+import 'styles/ui.scss'
+import 'ui/build/css/themes/dark.css'
+import 'ui/build/css/themes/light.css'
+
+import { loader } from '@monaco-editor/react'
+import { TooltipProvider } from '@radix-ui/react-tooltip'
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
+import { SessionContextProvider } from '@supabase/auth-helpers-react'
+import { createClient } from '@supabase/supabase-js'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { ThemeProvider, useThemeSandbox } from 'common'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import timezone from 'dayjs/plugin/timezone'
+import utc from 'dayjs/plugin/utc'
+import Head from 'next/head'
+import React, { ErrorInfo, useEffect, useMemo, useRef, useState } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+import toast from 'react-hot-toast'
+
+import MetaFaviconsPagesRouter from 'common/MetaFavicons/pages-router'
+import {
+  AppBannerWrapper,
+  CommandMenuWrapper,
+  RouteValidationWrapper,
+} from 'components/interfaces/App'
+import { AppBannerContextProvider } from 'components/interfaces/App/AppBannerWrapperContext'
+import { FeaturePreviewContextProvider } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
+import FeaturePreviewModal from 'components/interfaces/App/FeaturePreview/FeaturePreviewModal'
+import { ErrorBoundaryState } from 'components/ui/ErrorBoundaryState'
+import FlagProvider from 'components/ui/Flag/FlagProvider'
+import { Loading } from 'components/ui/Loading'
+import PageTelemetry from 'components/ui/PageTelemetry'
+import { useRootQueryClient } from 'data/query-client'
+import { AuthProvider } from 'lib/auth'
+import { BASE_PATH, IS_PLATFORM, LOCAL_STORAGE_KEYS } from 'lib/constants'
+import { ProfileProvider } from 'lib/profile'
+import { useAppStateSnapshot } from 'state/app-state'
+import HCaptchaLoadedStore from 'stores/hcaptcha-loaded-store'
+import { PortalToast, Toaster } from 'ui'
+import { ConsentToast } from 'ui-patterns/ConsentToast'
+
+dayjs.extend(customParseFormat)
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.extend(relativeTime)
+
+loader.config({
+  // [Joshen] Attempt for offline support/bypass ISP issues is to store the assets required for monaco
+  // locally. We're however, only storing the assets which we need (based on what the network tab loads
+  // while using monaco). If we end up facing more effort trying to maintain this, probably to either
+  // use cloudflare or find some way to pull all the files from a CDN via a CLI, rather than tracking individual files
+  // The alternative was to import * as monaco from 'monaco-editor' but i couldn't get it working
+  paths: {
+    vs: IS_PLATFORM
+      ? 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.0/min/vs'
+      : `${BASE_PATH}/monaco-editor`,
+  },
+})
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link
+          rel="stylesheet"
+          type="text/css"
+          data-name="vs/editor/editor.main"
+          href={
+            IS_PLATFORM
+              ? 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.0/min/vs/editor/editor.main.css'
+              : `${BASE_PATH}/monaco-editor/editor/editor.main.css`
+          }
+        />
+        <link rel="stylesheet" type="text/css" href={`${BASE_PATH}/css/fonts.css`} />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+
+export default function App() {
+  const snap = useAppStateSnapshot()
+  const queryClient = useRootQueryClient()
+  const consentToastId = useRef<string>()
+
+  // [Joshen] Some issues with using createBrowserSupabaseClient
+  const [supabase] = useState(() =>
+    IS_PLATFORM
+      ? createClient(
+          process.env.NEXT_PUBLIC_SUPABASE_URL as string,
+          process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string
+        )
+      : undefined
+  )
+
+  const AuthContainer = useMemo(
+    // eslint-disable-next-line react/display-name
+    () => (props: any) => {
+      return IS_PLATFORM ? (
+        <SessionContextProvider supabaseClient={supabase as any}>
+          <AuthProvider>{props.children}</AuthProvider>
+        </SessionContextProvider>
+      ) : (
+        <AuthProvider>{props.children}</AuthProvider>
+      )
+    },
+    [supabase]
+  )
+
+  const errorBoundaryHandler = (error: Error, info: ErrorInfo) => {
+    // Sentry.withScope(function (scope) {
+    //   scope.setTag('globalErrorBoundary', true)
+    //   Sentry.captureException(error)
+    // })
+
+    console.error(error.stack)
+  }
+
+  useEffect(() => {
+    // Check for telemetry consent
+    if (typeof window !== 'undefined') {
+      const onAcceptConsent = () => {
+        snap.setIsOptedInTelemetry(true)
+        if (consentToastId.current) toast.dismiss(consentToastId.current)
+      }
+
+      const onOptOut = () => {
+        snap.setIsOptedInTelemetry(false)
+        if (consentToastId.current) toast.dismiss(consentToastId.current)
+      }
+
+      const hasAcknowledgedConsent = localStorage.getItem(LOCAL_STORAGE_KEYS.TELEMETRY_CONSENT)
+      if (IS_PLATFORM && hasAcknowledgedConsent === null) {
+        consentToastId.current = toast(
+          <ConsentToast onAccept={onAcceptConsent} onOptOut={onOptOut} />,
+          {
+            id: 'consent-toast',
+            position: 'bottom-right',
+            duration: Infinity,
+          }
+        )
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useThemeSandbox()
+
+  const isTestEnv = process.env.NEXT_PUBLIC_NODE_ENV === 'test'
+
+  return (
+    <ErrorBoundary FallbackComponent={ErrorBoundaryState} onError={errorBoundaryHandler}>
+      <QueryClientProvider client={queryClient}>
+        <AuthContainer>
+          <ProfileProvider>
+            <FlagProvider>
+              <Head>
+                <title>Supabase</title>
+                <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+              </Head>
+              <MetaFaviconsPagesRouter applicationName="Supabase Studio" />
+              <PageTelemetry>
+                <TooltipProvider>
+                  <RouteValidationWrapper>
+                    <ThemeProvider defaultTheme="system" enableSystem disableTransitionOnChange>
+                      <AppBannerContextProvider>
+                        <CommandMenuWrapper>
+                          <AppBannerWrapper>
+                            <FeaturePreviewContextProvider>
+                              <Outlet />
+
+                              <FeaturePreviewModal />
+                            </FeaturePreviewContextProvider>
+                          </AppBannerWrapper>
+                        </CommandMenuWrapper>
+                      </AppBannerContextProvider>
+                    </ThemeProvider>
+                  </RouteValidationWrapper>
+                </TooltipProvider>
+              </PageTelemetry>
+
+              {!isTestEnv && <HCaptchaLoadedStore />}
+              {!isTestEnv && <Toaster />}
+              <PortalToast />
+              {!isTestEnv && <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />}
+            </FlagProvider>
+          </ProfileProvider>
+        </AuthContainer>
+      </QueryClientProvider>
+    </ErrorBoundary>
+  )
+}
+
+export function HydrateFallback() {
+  return (
+    <div className="flex flex-col flex-1 bg-alternative h-full items-center justify-center">
+      <Loading />
+    </div>
+  )
+}

apps/studio/app/routes/new.$slug.tsx

@@ -0,0 +1,8 @@
+import { MetaFunction } from '@remix-run/react'
+import NewProjectPage from 'pages/new/[slug]'
+
+export const meta: MetaFunction = () => {
+  return [{ title: 'New Project | Supabase' }]
+}
+
+export default NewProjectPage

apps/studio/app/routes/new._index.tsx

@@ -0,0 +1,8 @@
+import { MetaFunction } from '@remix-run/react'
+import NewPage from 'pages/new'
+
+export const meta: MetaFunction = () => {
+  return [{ title: 'New Organization | Supabase' }]
+}
+
+export default NewPage

apps/studio/app/routes/new.tsx

@@ -0,0 +1,10 @@
+import { Outlet } from '@remix-run/react'
+import WizardLayout from 'components/layouts/WizardLayout'
+
+export default function New() {
+  return (
+    <WizardLayout>
+      <Outlet />
+    </WizardLayout>
+  )
+}

apps/studio/app/routes/project.$ref._index.tsx

@@ -0,0 +1,8 @@
+import { MetaFunction } from '@remix-run/react'
+import ProjectPage from 'pages/project/[ref]'
+
+export const meta: MetaFunction = () => {
+  return [{ title: 'Project | Supabase' }]
+}
+
+export default ProjectPage

apps/studio/app/routes/project.$ref.tsx

@@ -0,0 +1,12 @@
+import { Outlet } from '@remix-run/react'
+import { ProjectLayoutWithAuth } from 'components/layouts/ProjectLayout/ProjectLayout'
+
+export default function Project() {
+  return (
+    <ProjectLayoutWithAuth>
+      <main style={{ maxHeight: '100vh' }} className="flex-1 overflow-y-auto">
+        <Outlet />
+      </main>
+    </ProjectLayoutWithAuth>
+  )
+}

apps/studio/app/routes/projects._index.tsx

@@ -0,0 +1,8 @@
+import { MetaFunction } from '@remix-run/react'
+import ProjectsPage from 'pages/projects'
+
+export const meta: MetaFunction = () => {
+  return [{ title: 'Projects | Supabase' }]
+}
+
+export default ProjectsPage

apps/studio/app/routes/projects.tsx

@@ -0,0 +1,18 @@
+import { Outlet } from '@remix-run/react'
+import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
+
+export default function Projects() {
+  return (
+    <AccountLayout
+      title="Dashboard"
+      breadcrumbs={[
+        {
+          key: `supabase-projects`,
+          label: 'Projects',
+        },
+      ]}
+    >
+      <Outlet />
+    </AccountLayout>
+  )
+}

apps/studio/app/routes/sign-in-mfa.tsx

@@ -0,0 +1,8 @@
+import { MetaFunction } from '@remix-run/react'
+import SignInMfaPage from 'pages/sign-in-mfa'
+
+export const meta: MetaFunction = () => {
+  return [{ title: 'Sign In MFA | Supabase' }]
+}
+
+export default SignInMfaPage

apps/studio/app/routes/sign-in._index.tsx

@@ -0,0 +1,8 @@
+import { MetaFunction } from '@remix-run/react'
+import SignInPage from 'pages/sign-in'
+
+export const meta: MetaFunction = () => {
+  return [{ title: 'Sign In | Supabase' }]
+}
+
+export default SignInPage

apps/studio/app/routes/sign-in.tsx

@@ -0,0 +1,14 @@
+import { Outlet } from '@remix-run/react'
+import SignInLayout from 'components/layouts/SignInLayout/SignInLayout'
+
+export default function SignIn() {
+  return (
+    <SignInLayout
+      heading="Welcome back"
+      subheading="Sign in to your account"
+      logoLinkToMarketingSite={true}
+    >
+      <Outlet />
+    </SignInLayout>
+  )
+}

apps/studio/components/layouts/WizardLayout.tsx

@@ -1,26 +1,24 @@
+import { useParams } from '@remix-run/react'
 import Link from 'next/link'
 import { PropsWithChildren } from 'react'
 
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { withAuth } from 'hooks'
 import { BASE_PATH } from 'lib/constants'
-import type { Organization, Project } from 'types'
+import { Organization } from 'types'
 import { IconChevronRight } from 'ui'
 import { FeedbackDropdown } from './ProjectLayout/LayoutHeader/FeedbackDropdown'
 import HelpPopover from './ProjectLayout/LayoutHeader/HelpPopover'
 
-interface WizardLayoutProps {
-  organization: Organization | null | undefined
-  project: Project | null
-}
+const WizardLayout = ({ children }: PropsWithChildren<{}>) => {
+  const { slug } = useParams()
+
+  const { data: organizations } = useOrganizationsQuery()
+  const organization = organizations?.find((o) => o.slug === slug)
 
-const WizardLayout = ({
-  organization,
-  project,
-  children,
-}: PropsWithChildren<WizardLayoutProps>) => {
   return (
     <div className="flex w-full flex-col">
-      <Header organization={organization} project={project} />
+      <Header organization={organization} />
       <div className="overflow-auto">
         <section className="has-slide-in slide-in relative mx-auto my-10 max-w-2xl">
           {children}
@@ -34,8 +32,12 @@ export default withAuth(WizardLayout)
 
 export const WizardLayoutWithoutAuth = WizardLayout
 
-const Header = ({ organization, project }: WizardLayoutProps) => {
-  let stepNumber = organization ? 1 : project ? 2 : 0
+interface HeaderProps {
+  organization?: Organization
+}
+
+const Header = ({ organization }: HeaderProps) => {
+  let stepNumber = organization ? 1 : 0
   return (
     <div className="border-b p-3 border-default">
       <div className="PageHeader">
@@ -56,11 +58,11 @@ const Header = ({ organization, project }: WizardLayoutProps) => {
               </p>
               <IconChevronRight size="small" className="text-foreground-light" />
               <p className={`text-sm ${stepNumber < 1 ? 'text-foreground-light' : ''}`}>
-                {project ? project.name : 'Create a new project'}
+                Create a new project
               </p>
               <IconChevronRight size="small" className="text-foreground-light" />
               <p className={`text-sm ${stepNumber < 2 ? 'text-foreground-light' : ''}`}>
-                {project ? project.name : 'Extend your database'}
+                Extend your database
               </p>
             </div>
           </div>

apps/studio/lib/next-compat/head.ts

@@ -0,0 +1 @@
+export default function Head() {}

apps/studio/lib/next-compat/image.ts

@@ -0,0 +1 @@
+export default function Image() {}

apps/studio/lib/next-compat/link.tsx

@@ -0,0 +1,16 @@
+import { Link as RemixLink } from '@remix-run/react'
+
+export default function Link({
+  children,
+  href,
+  ...props
+}: {
+  children: React.ReactNode
+  href: string
+}) {
+  return (
+    <RemixLink to={href} {...props}>
+      {children}
+    </RemixLink>
+  )
+}

apps/studio/lib/next-compat/navigation.ts

@@ -0,0 +1 @@
+export function useRouter() {}

apps/studio/lib/next-compat/next-router.d.ts

@@ -0,0 +1,64 @@
+declare module 'next/router' {
+  import type { ParsedUrlQuery } from 'querystring'
+
+  interface UrlObject {
+    auth?: string | null | undefined
+    hash?: string | null | undefined
+    host?: string | null | undefined
+    hostname?: string | null | undefined
+    href?: string | null | undefined
+    pathname?: string | null | undefined
+    protocol?: string | null | undefined
+    search?: string | null | undefined
+    slashes?: boolean | null | undefined
+    port?: string | number | null | undefined
+    query?: string | null | ParsedUrlQueryInput | undefined
+  }
+
+  declare type Url = UrlObject | string
+
+  interface TransitionOptions {
+    shallow?: boolean
+    locale?: string | false
+    scroll?: boolean
+  }
+
+  type Handler = (...evts: any[]) => void
+  type MittEmitter<T> = {
+    on(type: T, handler: Handler): void
+    off(type: T, handler: Handler): void
+    emit(type: T, ...evts: any[]): void
+  }
+
+  declare const routerEvents: readonly [
+    'routeChangeStart',
+    'beforeHistoryChange',
+    'routeChangeComplete',
+    'routeChangeError',
+    'hashChangeStart',
+    'hashChangeComplete',
+  ]
+  export type RouterEvent = (typeof routerEvents)[number]
+
+  export type NextRouter = {
+    isReady: boolean
+    get asPath(): string
+    route: string
+    pathname: string
+    basePath: string
+
+    query: ParsedUrlQuery
+
+    /**
+     * Performs a `pushState` with arguments
+     * @param url of the route
+     * @param as masks `url` for the browser
+     * @param options object you can define `shallow` and other options
+     */
+    push(url: Url, as?: Url, options?: TransitionOptions): Promise<boolean>
+
+    events: MittEmitter<RouterEvent>
+  }
+
+  export function useRouter(): NextRouter
+}

apps/studio/lib/next-compat/router.ts

@@ -0,0 +1,38 @@
+import { useParams } from '@remix-run/react'
+import { BASE_PATH } from 'lib/constants'
+import { NextRouter } from 'next/router'
+import { parse } from 'querystring'
+
+export function useRouter(): NextRouter {
+  const params = useParams()
+  // const [searchParams] = useSearchParams()
+  // const navigate = useNavigate()
+
+  return {
+    query: params,
+    isReady: true,
+    route: '',
+    pathname: '',
+    basePath: BASE_PATH,
+    get asPath() {
+      return ''
+    },
+    push(url, _as, options) {
+      const to =
+        typeof url === 'string'
+          ? url
+          : {
+              hash: url.hash ?? undefined,
+              pathname: url.pathname ?? undefined,
+              search: url.search ?? undefined,
+            }
+
+      // TODO: handle url.query
+
+      // navigate(to)
+
+      return Promise.resolve(true)
+    },
+    events: { emit(type, ...evts) {}, off(type, handler) {}, on(type, handler) {} },
+  }
+}

apps/studio/lib/next-compat/sentry.ts

@@ -0,0 +1 @@
+export function setUser() {}

apps/studio/package.json

@@ -2,6 +2,7 @@
   "name": "studio",
   "version": "0.0.9",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev -p 8082",
     "dev:secrets:pull": "AWS_PROFILE=supabase-dev node ../../scripts/getSecrets.js -n local/studio",
@@ -18,7 +19,10 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "prettier:check": "prettier --check .",
-    "prettier:write": "prettier --write ."
+    "prettier:write": "prettier --write .",
+    "dev-remix": "remix vite:dev",
+    "build-remix": "remix vite:build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@aws-crypto/sha256-browser": "^3.0.0",
@@ -32,6 +36,8 @@
     "@next/bundle-analyzer": "^14.2.3",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@remix-run/node": "^2.10.0",
+    "@remix-run/react": "^2.10.0",
     "@scaleleap/pg-format": "^1.0.0",
     "@sentry/nextjs": "^7.108.0",
     "@stripe/react-stripe-js": "^2.5.0",
@@ -44,7 +50,6 @@
     "@tanstack/react-query": "4.35.7",
     "@tanstack/react-query-devtools": "4.35.7",
     "@uidotdev/usehooks": "^2.4.1",
-    "@vitejs/plugin-react": "^4.2.1",
     "@zip.js/zip.js": "^2.7.29",
     "ai": "^2.2.31",
     "ai-commands": "*",
@@ -101,6 +106,7 @@
     "react-window-infinite-loader": "^1.0.7",
     "reactflow": "^11.10.1",
     "recharts": "^2.8.0",
+    "rollup-plugin-node-polyfills": "^0.2.1",
     "semver": "^6.3.1",
     "shared-data": "*",
     "sql-formatter": "^13.1.0",
@@ -117,6 +123,7 @@
   },
   "devDependencies": {
     "@aws-sdk/client-secrets-manager": "^3.410.0",
+    "@remix-run/dev": "^2.10.0",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-interactions": "^7.5.3",
     "@storybook/addon-links": "^7.5.3",
@@ -147,6 +154,7 @@
     "@types/sqlstring": "^2.3.0",
     "@types/uuid": "^8.3.4",
     "@types/zxcvbn": "^4.4.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "@vitest/ui": "^1.6.0",
     "api-types": "*",
     "autoprefixer": "^10.4.14",
@@ -157,8 +165,11 @@
     "next-router-mock": "^0.9.13",
     "postcss": "^8.4.31",
     "prettier": "^4.0.0-alpha.8",
+    "sass": "^1.77.6",
     "storybook-dark-mode": "^3.0.1",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.4.3"
+    "typescript": "^5.4.3",
+    "vite": "^5.3.2",
+    "vite-plugin-cjs-interop": "^2.1.1"
   }
 }

apps/studio/pages/new/index.tsx

@@ -5,7 +5,6 @@ import { useTheme } from 'next-themes'
 import { useCallback, useEffect, useState } from 'react'
 
 import { NewOrgForm } from 'components/interfaces/Organization'
-import { WizardLayout } from 'components/layouts'
 import { useSetupIntent } from 'data/stripe/setup-intent-mutation'
 import { STRIPE_PUBLIC_KEY } from 'lib/constants'
 import { useIsHCaptchaLoaded } from 'stores/hcaptcha-loaded-store'
@@ -103,10 +102,4 @@ const Wizard: NextPageWithLayout = () => {
   )
 }
 
-Wizard.getLayout = (page) => (
-  <WizardLayout organization={null} project={null}>
-    {page}
-  </WizardLayout>
-)
-
 export default Wizard

apps/studio/pages/project/[ref]/index.tsx

@@ -6,7 +6,6 @@ import Connect from 'components/interfaces/Home/Connect/Connect'
 import { CLIENT_LIBRARIES, EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
 import ProjectUsageSection from 'components/interfaces/Home/ProjectUsageSection'
 import ServiceStatus from 'components/interfaces/Home/ServiceStatus'
-import { ProjectLayoutWithAuth } from 'components/layouts/ProjectLayout/ProjectLayout'
 import ProjectPausedState from 'components/layouts/ProjectLayout/ProjectPausedState'
 import ProjectUpgradeFailedBanner from 'components/ui/ProjectUpgradeFailedBanner'
 import { useSelectedProject } from 'hooks'
@@ -82,12 +81,4 @@ const Home: NextPageWithLayout = () => {
   )
 }
 
-Home.getLayout = (page) => (
-  <ProjectLayoutWithAuth>
-    <main style={{ maxHeight: '100vh' }} className="flex-1 overflow-y-auto">
-      {page}
-    </main>
-  </ProjectLayoutWithAuth>
-)
-
 export default Home

apps/studio/pages/projects.tsx

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react'
 
 import { ProjectList } from 'components/interfaces/Home/ProjectList'
 import HomePageActions from 'components/interfaces/HomePageActions'
-import { AccountLayout } from 'components/layouts'
 import AlertError from 'components/ui/AlertError'
 import { Loading } from 'components/ui/Loading'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
@@ -65,18 +64,4 @@ const ProjectsPage: NextPageWithLayout = () => {
   )
 }
 
-ProjectsPage.getLayout = (page) => (
-  <AccountLayout
-    title="Dashboard"
-    breadcrumbs={[
-      {
-        key: `supabase-projects`,
-        label: 'Projects',
-      },
-    ]}
-  >
-    {page}
-  </AccountLayout>
-)
-
 export default ProjectsPage

apps/studio/pages/sign-in-mfa.tsx

@@ -5,7 +5,7 @@ import toast from 'react-hot-toast'
 
 import { useTelemetryProps } from 'common'
 import SignInMfaForm from 'components/interfaces/SignIn/SignInMfaForm'
-import { SignInLayout } from 'components/layouts'
+import SignInLayout from 'components/layouts/SignInLayout/SignInLayout'
 import { Loading } from 'components/ui/Loading'
 import { auth, buildPathWithParams, getAccessToken, getReturnToPath } from 'lib/gotrue'
 import Telemetry from 'lib/telemetry'

apps/studio/pages/sign-in.tsx

@@ -5,7 +5,6 @@ import { useEffect } from 'react'
 
 import SignInForm from 'components/interfaces/SignIn/SignInForm'
 import SignInWithGitHub from 'components/interfaces/SignIn/SignInWithGitHub'
-import { SignInLayout } from 'components/layouts'
 import { IS_PLATFORM } from 'lib/constants'
 import type { NextPageWithLayout } from 'types'
 import { Button } from 'ui'
@@ -63,14 +62,4 @@ const SignInPage: NextPageWithLayout = () => {
   )
 }
 
-SignInPage.getLayout = (page) => (
-  <SignInLayout
-    heading="Welcome back"
-    subheading="Sign in to your account"
-    logoLinkToMarketingSite={true}
-  >
-    {page}
-  </SignInLayout>
-)
-
 export default SignInPage

apps/studio/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

apps/studio/styles/toast.scss

@@ -560,5 +560,3 @@
     word-break: break-word;
   }
 }
-
-/*# sourceMappingURL=ReactToastify.css.map */

apps/studio/tsconfig.json

@@ -8,8 +8,8 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",

apps/studio/vite.config.ts

@@ -0,0 +1,56 @@
+import { vitePlugin as remix } from '@remix-run/dev'
+import path from 'path'
+import { defineConfig, loadEnv } from 'vite'
+import { cjsInterop } from 'vite-plugin-cjs-interop'
+
+const ENV_PREFIX = 'NEXT_PUBLIC_'
+
+export default defineConfig(({ mode }) => {
+  return {
+    define: {
+      'process.env': loadEnv(mode, process.cwd(), ENV_PREFIX),
+    },
+    resolve: {
+      alias: {
+        os: 'rollup-plugin-node-polyfills/polyfills/os',
+
+        components: path.resolve(__dirname, 'components'),
+        data: path.resolve(__dirname, 'data'),
+        hooks: path.resolve(__dirname, 'hooks'),
+        lib: path.resolve(__dirname, 'lib'),
+        localStores: path.resolve(__dirname, 'localStores'),
+        pages: path.resolve(__dirname, 'pages'),
+        state: path.resolve(__dirname, 'state'),
+        stores: path.resolve(__dirname, 'stores'),
+        styles: path.resolve(__dirname, 'styles'),
+        types: path.resolve(__dirname, 'types'),
+        '@ui': path.resolve(__dirname, './../../packages/ui/src'),
+        '~ui': 'ui',
+
+        'next/link': path.resolve(__dirname, 'lib', 'next-compat', 'link.tsx'),
+        'next/router': path.resolve(__dirname, 'lib', 'next-compat', 'router.ts'),
+        'next/compat/router': path.resolve(__dirname, 'lib', 'next-compat', 'router.ts'),
+        'next/navigation': path.resolve(__dirname, 'lib', 'next-compat', 'navigation.ts'),
+        'next/head': path.resolve(__dirname, 'lib', 'next-compat', 'head.ts'),
+        'next/legacy/image': path.resolve(__dirname, 'lib', 'next-compat', 'image.ts'),
+        '@sentry/nextjs': path.resolve(__dirname, 'lib', 'next-compat', 'sentry.ts'),
+      },
+    },
+    envPrefix: ENV_PREFIX,
+    server: { port: 8082 },
+    preview: { port: 8082 },
+    plugins: [
+      cjsInterop({
+        dependencies: ['react-use', 'lodash'],
+      }),
+      remix({
+        ssr: false,
+        future: {
+          v3_fetcherPersist: true,
+          v3_relativeSplatPath: true,
+          v3_throwAbortReason: true,
+        },
+      }),
+    ],
+  }
+})

packages/api-types/index.ts

@@ -1 +1 @@
-export * from './types/api'
+export type * from './types/api'