Updating project

CONTRIBUTING.md

@@ -2,36 +2,4 @@
 
 Excited to hear that you are interested in contributing to this project! Thank you!
 
-> Warning: This contributing guide is still work in progress.
-
-## Requisites
-
-The Supabase Modules repository is a pnpm workspace managed using [Turborepo](https://turbo.build/repo). Once you have read and configured your workspace, you can continue with this guide.
-
-## 1. Supabase local-first development
-
-All development takes place locally, which also includes your very own Supabase instance. There is no sharing of environment variables. You will find an `.env.example` file as a guide of the environment variables needed for development.
-
-Please make sure to read [Your Supabase Instance](https://supabase-modules-docs.vercel.app/getting-started/supabase.html) before getting started.
-
-## 2. Creating Database Migrations
-
-Each module directory contains a copy of the migrations needed to support it. However, all database migrations need to be generated locally using `supabase db diff`, read more about [Supabase CLI - Diffs Schema Changes](https://supabase.com/docs/reference/cli/supabase-db-diff).
-
-## 3. Pushing Database Migrations
-
-Database Migrations are not pushed manually to the project's remote Supabase Instance. A GitHub actions workflow using [Supabase Setup-CLI](https://github.com/supabase/setup-cli) has been set for this purpose. 
-
-Once your changes are merged to main, the workflow will push any new migrations to the remote Supabase Instance.
-
-## 4. Create a backup for Database Migrations
-
-In order to simplify our internal process please make sure to copy the migration file's content into a `migrations.sql` file corresponding to your module.
-
-## 5. Creating Hooks and Components
-
-React Hooks are the bread and butter of Supabase Modules. Once the Database logic is working, we need to create the hooks and UI to use it. Supabase Modules internally uses [TanStack Query](https://tanstack.com/query/latest). All of the hooks are created and grouped by Module in the `/modules` directory. 
-
-We strongly recommend creating routes and components to demo your module. React Components are created and grouped by Module in the `/components` directory.
-
-Make sure to see the existing pattern before getting started.
+> Warning: This contributing guide is still work in progress.

README.md

@@ -41,7 +41,9 @@ pnpm install
 
 ## Environment variables
 
-Please refer to `.env.example` when working environment variables from the root repository. You should set all variables in `.env` located in the root repository.
+Please refer to `.env.example` when working with environment variables. This repository is local-first development, so you should set all of your development variables in `.env.local` located in the root repository. 
+
+If you want to connect to a remote Supabase instance you can set all of your variables in `.env` located in the root repository.
 
 If you do not have these, you may have to run Supabase locally first before development. Read more on [Your Supabase Instance](https://supabase-modules-docs.vercel.app/getting-started/supabase).
 
@@ -59,10 +61,10 @@ pnpm db:start & pnpm dev
 
 > Remember to run `pnpm db:stop` to save resources once you are done working with your local Supabase Instance.
 
-If you intended to develop with a cloud hosted Supabase Instance you only need:
+If you intended to develop with a cloud hosted Supabase Instance you only need to run:
 
 ```bash
-pnpm dev
+pnpm dev-remote
 ```
 
 ## Build

apps/next/.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# react-email
+.react-email

apps/next/app/page.tsx

@@ -16,17 +16,17 @@ export default async function Home() {
   }
 
   return (
-    <div className="mx-auto w-full max-w-2xl py-52">
-      <div className="space-y-6">
-        <header className="space-y-2 text-center">
-          <h2 className="text-6xl font-bold tracking-tight">
+    <div className="mx-auto grid min-h-[60vh] max-w-2xl items-center space-y-6 lg:max-w-4xl">
+      <div className="space-y-4">
+        <header className="space-y-2">
+          <h2 className="text-5xl font-bold tracking-tight lg:text-7xl">
             Supabase Modules
           </h2>
           <p className="text-muted-foreground text-xl">
             Build smarter with pre-built modules today
           </p>
         </header>
-        <footer className="flex flex-col justify-center gap-2 sm:flex-row">
+        <footer className="flex flex-col gap-2 sm:flex-row">
           <Button asChild>
             <Link href="/login">Sign in</Link>
           </Button>

apps/next/components/user/accounts.tsx

@@ -174,7 +174,7 @@ const AccountsComponent: React.FC<{
                 <Link href="/settings/profile">Profile settings</Link>
               </DropdownMenuItem>
               <DropdownMenuItem>
-                <Link href="/settings/account">Account settings</Link>
+                <Link href="/settings/credentials">Credentials settings</Link>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
               <DropdownMenuItem disabled={true}>

apps/next/components/user/credentials-form.tsx

@@ -57,10 +57,7 @@ export const CredentialsForm: React.FC<{ userEmail: string }> = ({
 
 const FormSchema = z.object({
   email: z.string().email({ message: "Invalid email address" }).optional(),
-  password: z
-    .string()
-    .min(5, { message: "Must be 5 or more characters long" })
-    .optional(),
+  password: z.string().optional(),
 });
 
 const CredentialsFormComponent: React.FC<{
@@ -95,7 +92,14 @@ const CredentialsFormComponent: React.FC<{
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(({ email, password }) => {
-            updateUser({ email, password });
+            const updates: { email?: string; password?: string } = {};
+
+            if (email) updates.email = email;
+            if (password) updates.password = password;
+
+            if (Object.keys(updates).length > 0) {
+              updateUser(updates);
+            }
             form.reset();
           })}
           className="space-y-6"

apps/next/emails/_components/styles.ts

@@ -0,0 +1,73 @@
+import * as React from "react";
+
+export const main: React.CSSProperties = {
+  backgroundColor: "#ffffff",
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+};
+
+export const container: React.CSSProperties = {
+  margin: "0 auto",
+  padding: "20px 12px 48px",
+  maxWidth: "600px",
+};
+
+export const h1: React.CSSProperties = {
+  color: "#09090B",
+  fontSize: "24px",
+  fontWeight: "bold",
+  margin: "40px 0 16px",
+  padding: "0",
+};
+
+export const buttonContainer: React.CSSProperties = {
+  textAlign: "center",
+};
+
+export const button: React.CSSProperties = {
+  backgroundColor: "#18181B",
+  color: "#FAFAFA",
+  fontWeight: 500,
+  fontSize: "14px",
+  padding: "10.5px 18px",
+  borderRadius: "8px",
+  width: "fit-content",
+  textDecoration: "none",
+  textAlign: "center",
+  display: "block",
+};
+
+export const code: React.CSSProperties = {
+  display: "inline-block",
+  padding: "16px 4.5%",
+  width: "90.5%",
+  backgroundColor: "#F4F4F5",
+  borderRadius: "5px",
+  border: "1px solid #eee",
+  color: "#09090B",
+};
+
+export const link: React.CSSProperties = {
+  color: "#2754C5",
+  fontSize: "14px",
+  textDecoration: "underline",
+};
+
+export const text: React.CSSProperties = {
+  color: "#09090B",
+  fontSize: "14px",
+  margin: "16px 0",
+};
+
+export const hr: React.CSSProperties = {
+  borderColor: "#dfe1e4",
+  margin: "24px 0",
+};
+
+export const footer: React.CSSProperties = {
+  color: "#898989",
+  fontSize: "12px",
+  lineHeight: "22px",
+  marginTop: "12px",
+  marginBottom: "24px",
+};

apps/next/emails/confirmation.tsx

@@ -0,0 +1,63 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Link,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+import * as React from "react";
+import * as styles from "./_components/styles";
+import { EmailOtpType } from "@supabase/supabase-js";
+
+const redirectTo = `/login`;
+const type: EmailOtpType = "signup";
+const confirmationURL = `{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=${type}&next=${redirectTo}`;
+
+export default function Email() {
+  return (
+    <Html>
+      <Head />
+      <Preview>Configm your signup</Preview>
+      <Body style={styles.main}>
+        <Container style={styles.container}>
+          <Heading style={styles.h1}>Confirm your signup</Heading>
+          <Text style={styles.text}>
+            Almost there! Click below to confirm your signup:
+          </Text>
+          <Section style={styles.buttonContainer}>
+            <Button style={styles.button} href={confirmationURL}>
+              Click here to confirm
+            </Button>
+          </Section>
+          <Text
+            style={{
+              ...styles.text,
+              color: "#71717A",
+            }}
+          >
+            If you didn&apos;t try to create an account, you can safely ignore
+            this email.
+          </Text>
+          <Hr style={styles.hr} />
+          <Text style={styles.footer}>
+            <Link
+              href="https://supabase-modules-docs.vercel.app"
+              target="_blank"
+              style={{ ...styles.link, color: "#71717A" }}
+            >
+              Supabase Modules
+            </Link>
+            <br />
+            Build smarter with pre-built modules today
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}

apps/next/emails/email_change.tsx

@@ -0,0 +1,64 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Link,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+import * as React from "react";
+import * as styles from "./_components/styles";
+import { EmailOtpType } from "@supabase/supabase-js";
+
+const redirectTo = `/login`;
+const type: EmailOtpType = "email_change";
+
+const confirmationURL = `{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=${type}&next=${redirectTo}`;
+
+export default function Email() {
+  return (
+    <Html>
+      <Head />
+      <Preview>Configm email change</Preview>
+      <Body style={styles.main}>
+        <Container style={styles.container}>
+          <Heading style={styles.h1}>Confirm email change</Heading>
+          <Text
+            style={styles.text}
+          >{`Click below to confirm the update of your email from {{ .Email }} to {{ .NewEmail }}:`}</Text>
+          <Section style={styles.buttonContainer}>
+            <Button style={styles.button} href={confirmationURL}>
+              Click here to confirm
+            </Button>
+          </Section>
+          <Text
+            style={{
+              ...styles.text,
+              color: "#71717A",
+            }}
+          >
+            If you didn&apos;t request an email change, you can safely ignore
+            this email.
+          </Text>
+          <Hr style={styles.hr} />
+          <Text style={styles.footer}>
+            <Link
+              href="https://supabase-modules-docs.vercel.app"
+              target="_blank"
+              style={{ ...styles.link, color: "#71717A" }}
+            >
+              Supabase Modules
+            </Link>
+            <br />
+            Build smarter with pre-built modules today
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}

apps/next/emails/magic_link.tsx

@@ -0,0 +1,49 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Link,
+  Preview,
+  Text,
+} from "@react-email/components";
+import * as React from "react";
+import * as styles from "./_components/styles";
+
+export default function Email() {
+  return (
+    <Html>
+      <Head />
+      <Preview>Your One-Time password</Preview>
+      <Body style={styles.main}>
+        <Container style={styles.container}>
+          <Heading style={styles.h1}>Your One-Time password</Heading>
+          <Text style={styles.text}>Copy and paste this temporary code:</Text>
+          <code style={styles.code}>{`{{ .Token }}`}</code>
+          <Text
+            style={{
+              ...styles.text,
+              color: "#71717A",
+            }}
+          >
+            If you didn&apos;t try to log in, you can safely ignore this email.
+          </Text>
+          <Hr style={styles.hr} />
+          <Text style={styles.footer}>
+            <Link
+              href="https://supabase-modules-docs.vercel.app"
+              target="_blank"
+              style={{ ...styles.link, color: "#71717A" }}
+            >
+              Supabase Modules
+            </Link>
+            <br />
+            Build smarter with pre-built modules today
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}