Updating project

.github/workflows/production.yaml

@@ -22,5 +22,5 @@ jobs:
         with:
           version: latest
 
-      - run: supabase link --project-ref $SUPABASE_PROJECT_ID --workdir ./playground
-      - run: supabase db push --workdir ./playground
+      - run: supabase link --project-ref $SUPABASE_PROJECT_ID --workdir ./apps/next
+      - run: supabase db push --workdir ./apps/next

README.md

@@ -5,22 +5,26 @@ The Supabase Modules repository is a pnpm workspace managed using [Turborepo](ht
 ## Apps
 
 - `docs`: a [Vitepress](https://vitepress.dev/) app - to learn about the project
-- `playground`: another [Next.js](https://nextjs.org/) app - to play with the project
+- `apps/next`: a [Next.js](https://nextjs.org/) app - to use the project
 
 ### Directory structure
 
-There is no package/installable/CLI for the time being. The `playground` app has the modules source code and a Supabase project configuration that contains the migrations for all modules.
+There is no package/installable/CLI for the time being. The `apps/**` directory organizes by framework the modules source code and a Supabase project configuration for them.
+
+For example, our [Next.js](https://nextjs.org/) app looks like this:
 
 ```
-📁 docs
-📁 playground
-  📁 modules
-    📁 auth
-    📁 profile
-    📁 types
-    📁 utils
-  📁 supabase
-    📁 migrations
+📂 docs
+📂 apps
+  📂 next
+    📁 modules
+      📁 user
+        📁 hooks
+        📁 ui
+      📁 types
+      📁 utils
+    📁 supabase
+      📁 migrations
 ```
 
 To learn more about this project, please visit [Supabase Modules Documentation](https://supabase-modules-docs.vercel.app/).

playground/app/auth/confirm/route.ts → apps/next/app/auth/confirm/route.ts

@@ -2,7 +2,7 @@ import { type EmailOtpType } from "@supabase/supabase-js";
 import { cookies } from "next/headers";
 import { type NextRequest, NextResponse } from "next/server";
 
-import { useSupabaseServer } from "@/modules/utils/supabase-server";
+import { useSupabaseServer } from "@/modules/utils/server";
 
 export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url);

playground/app/login/page.tsx → apps/next/app/login/page.tsx

@@ -1,6 +1,7 @@
-import { useSupabaseServer } from "@/modules/utils/supabase-server";
+import { LoginForm } from "@/modules/user/ui";
+import { useSupabaseServer } from "@/modules/utils/server";
 import { cookies } from "next/headers";
-import { LoginForm } from "./LoginForm";
+
 import { redirect } from "next/navigation";
 
 export default async function Page() {
@@ -14,5 +15,9 @@ export default async function Page() {
     redirect("/settings");
   }
 
-  return <LoginForm />;
+  return (
+    <div className="min-h-dvh grid items-center">
+      <LoginForm />
+    </div>
+  );
 }

apps/next/app/page.tsx

@@ -0,0 +1,40 @@
+import { Button } from "@/components/ui/button";
+import { useSupabaseServer } from "@/modules/utils/server";
+import { cookies } from "next/headers";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+
+export default async function Home() {
+  const supabase = useSupabaseServer({ cookies });
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (user) {
+    redirect("/settings");
+  }
+
+  return (
+    <div className="min-h-dvh grid items-center">
+      <div className="space-y-6">
+        <header className="space-y-2 text-center">
+          <h2 className="text-6xl font-bold tracking-tight">
+            Supabase Modules
+          </h2>
+          <p className="text-xl text-muted-foreground">
+            Build smarter with pre-built modules today
+          </p>
+        </header>
+        <footer className="md:flex w-full md:w-fit max-w-md mx-auto">
+          <Button asChild className="w-full">
+            <Link href="/login">Sign in</Link>
+          </Button>
+          <Button variant="link" className="w-full">
+            <Link href="/register">Create an account</Link>
+          </Button>
+        </footer>
+      </div>
+    </div>
+  );
+}

playground/app/register/page.tsx → apps/next/app/register/page.tsx

@@ -1,7 +1,7 @@
-import { useSupabaseServer } from "@/modules/utils/supabase-server";
+import { RegisterForm } from "@/modules/user/ui";
+import { useSupabaseServer } from "@/modules/utils/server";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
-import { RegisterForm } from "./RegisterForm";
 
 export default async function Page() {
   const supabase = useSupabaseServer({ cookies });
@@ -14,5 +14,9 @@ export default async function Page() {
     redirect("/settings");
   }
 
-  return <RegisterForm />;
+  return (
+    <div className="min-h-dvh grid items-center">
+      <RegisterForm />
+    </div>
+  );
 }

playground/app/settings/account/page.tsx → apps/next/app/settings/account/page.tsx

@@ -1,7 +1,7 @@
-import { useSupabaseServer } from "@/modules/utils/supabase-server";
+import { AccountForm } from "@/modules/user/ui";
+import { useSupabaseServer } from "@/modules/utils/server";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
-import { AccountForm } from "./AccountForm";
 
 export default async function Page() {
   const supabase = useSupabaseServer({ cookies });
@@ -14,5 +14,9 @@ export default async function Page() {
     redirect("/login");
   }
 
-  return <AccountForm userEmail={user.email} />;
+  return (
+    <div className="min-h-dvh grid items-center">
+      <AccountForm userEmail={user.email} />
+    </div>
+  );
 }

playground/app/settings/page.tsx → apps/next/app/settings/page.tsx

@@ -1,7 +1,7 @@
-import { useSupabaseServer } from "@/modules/utils/supabase-server";
+import { Settings } from "@/modules/user/ui";
+import { useSupabaseServer } from "@/modules/utils/server";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
-import { Settings } from "./Settings";
 
 export default async function Page() {
   const supabase = useSupabaseServer({ cookies });
@@ -14,5 +14,9 @@ export default async function Page() {
     redirect("/login");
   }
 
-  return <Settings userId={user.id} />;
+  return (
+    <div className="min-h-dvh grid items-center">
+      <Settings userId={user.id} />
+    </div>
+  );
 }

playground/app/settings/profile/page.tsx → apps/next/app/settings/profile/page.tsx

@@ -1,7 +1,7 @@
-import { useSupabaseServer } from "@/modules/utils/supabase-server";
+import { ProfileForm } from "@/modules/user/ui";
+import { useSupabaseServer } from "@/modules/utils/server";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
-import { Profile } from "./Profile";
 
 export default async function Page() {
   const supabase = useSupabaseServer({ cookies });
@@ -14,5 +14,9 @@ export default async function Page() {
     redirect("/login");
   }
 
-  return <Profile userId={user.id} />;
+  return (
+    <div className="min-h-dvh grid items-center">
+      <ProfileForm userId={user.id} />
+    </div>
+  );
 }

playground/modules/auth/index.ts → apps/next/modules/user/hooks/auth.ts

@@ -1,3 +1,5 @@
+import { revalidateCache } from "@/modules/utils/cache";
+import { useSupabaseClient } from "@/modules/utils/client";
 import type {
   AuthError,
   AuthResponse,
@@ -10,9 +12,6 @@ import type {
 import type { MutationOptions } from "@tanstack/react-query";
 import { useMutation } from "@tanstack/react-query";
 
-import { useSupabaseClient } from "../utils/supabase-client";
-import { revalidateCache } from "../utils/cache";
-
 type SignUpWithEmailPasswordCredentials = Extract<
   SignUpWithPasswordCredentials,
   { email: string }

apps/next/modules/user/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./auth";
+export * from "./profile";

playground/modules/profile/index.ts → apps/next/modules/user/hooks/profile.ts

@@ -1,3 +1,5 @@
+import { Database } from "@/modules/types";
+import { useSupabaseClient } from "@/modules/utils/client";
 import type { PostgrestError } from "@supabase/supabase-js";
 import type {
   MutationOptions,
@@ -6,9 +8,6 @@ import type {
 } from "@tanstack/react-query";
 import { useMutation, useQuery } from "@tanstack/react-query";
 
-import type { Database } from "../types";
-import { useSupabaseClient } from "../utils/supabase-client";
-
 type Profile = Database["public"]["Tables"]["profiles"]["Row"];
 
 export const useGetProfile = ({

playground/app/settings/account/AccountForm.tsx → apps/next/modules/user/ui/AccountForm.tsx

@@ -5,7 +5,6 @@ import { useForm } from "react-hook-form";
 import * as z from "zod";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import { useUpdateUser } from "@/modules/auth";
 import { CircleIcon, CrossCircledIcon, SlashIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -19,6 +18,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useUpdateUser } from "@/modules/user/hooks";
 
 export const AccountForm: React.FC<{ userEmail: string }> = ({ userEmail }) => {
   const router = useRouter();
@@ -74,23 +74,25 @@ const AccountFormComponent: React.FC<{
     <div className="space-y-6 min-h-dvh flex flex-col justify-center">
       <header className="space-y-2">
         <nav className="flex gap-x-1 items-center">
-          <Link href="/">
-            <Button className="px-1 h-fit text-muted-foreground" variant="link">
-              Home
-            </Button>
-          </Link>
+          <Button
+            asChild
+            className="px-1 h-fit text-muted-foreground"
+            variant="link"
+          >
+            <Link href="/">Home</Link>
+          </Button>
           <SlashIcon className="h-3 w-3" />
-          <Link href="/settings">
-            <Button className="px-1 h-fit text-muted-foreground" variant="link">
-              Settings
-            </Button>
-          </Link>
+          <Button
+            asChild
+            className="px-1 h-fit text-muted-foreground"
+            variant="link"
+          >
+            <Link href="/settings">Settings</Link>
+          </Button>
           <SlashIcon className="h-3 w-3" />
-          <Link href="/settings/account">
-            <Button className="px-1 h-fit" variant="link">
-              Account
-            </Button>
-          </Link>
+          <Button asChild className="px-1 h-fit" variant="link">
+            <Link href="/settings/account">Account</Link>
+          </Button>
         </nav>
         <h2 className="font-semibold text-4xl">Account Settings</h2>
         <p>Manage your account settings</p>
@@ -145,9 +147,9 @@ const AccountFormComponent: React.FC<{
               )}
               Update Settings
             </Button>
-            <Link href="/settings/profile">
-              <Button variant="link">Profile Settings</Button>
-            </Link>
+            <Button asChild variant="link">
+              <Link href="/settings/profile">Profile Settings</Link>
+            </Button>
           </footer>
         </form>
       </Form>

playground/app/login/LoginForm.tsx → apps/next/modules/user/ui/LoginForm.tsx

@@ -12,15 +12,15 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { useSignInWithEmailPassword } from "@/modules/auth";
+
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { CircleIcon, CrossCircledIcon, SlashIcon } from "@radix-ui/react-icons";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { useRouter } from "next/navigation";
+import { useSignInWithEmailPassword } from "@/modules/user/hooks";
 
-// #region auth-snippet
 export const LoginForm: React.FC = () => {
   const router = useRouter();
 
@@ -49,7 +49,6 @@ export const LoginForm: React.FC = () => {
     />
   );
 };
-// #endregion auth-snippet
 
 const FormSchema = z.object({
   email: z.string().email({ message: "Invalid email address" }),
@@ -71,20 +70,24 @@ const LoginFormComponent: React.FC<{
   });
 
   return (
-    <div className="space-y-6 min-h-dvh flex flex-col justify-center">
+    <div className="space-y-6">
       <header className="space-y-2">
         <nav className="flex gap-x-1 items-center">
-          <Link href="/">
-            <Button className="px-1 h-fit text-muted-foreground" variant="link">
-              Home
-            </Button>
-          </Link>
+          <Button
+            asChild
+            className="px-1 h-fit text-muted-foreground"
+            variant="link"
+          >
+            <Link href="/">Home</Link>
+          </Button>
           <SlashIcon className="h-3 w-3" />
-          <Link href="/login">
-            <Button className="px-1 h-fit text-muted-foreground" variant="link">
-              Sign in
-            </Button>
-          </Link>
+          <Button
+            asChild
+            className="px-1 h-fit text-muted-foreground"
+            variant="link"
+          >
+            <Link href="/login">Sign in</Link>
+          </Button>
         </nav>
         <h2 className="font-semibold text-4xl">Sign in</h2>
         <p>Welcome back!</p>
@@ -138,9 +141,9 @@ const LoginFormComponent: React.FC<{
               )}
               Sign in
             </Button>
-            <Link href="/register">
-              <Button variant="link">Create new account</Button>
-            </Link>
+            <Button asChild variant="link">
+              <Link href="/register">Create new account</Link>
+            </Button>
           </footer>
         </form>
       </Form>