Skip to content

Commit 951eef2

Browse files
iamhectorsosaiamhectorsosa
committed
Updating project
1 parent a77d0e4 commit 951eef2

21 files changed

+2669
-243
lines changed

‎CONTRIBUTING.md

+1-33
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,4 @@
22

33
Excited to hear that you are interested in contributing to this project! Thank you!
44

5-
> Warning: This contributing guide is still work in progress.
6-
7-
## Requisites
8-
9-
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.
10-
11-
## 1. Supabase local-first development
12-
13-
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.
14-
15-
Please make sure to read [Your Supabase Instance](https://supabase-modules-docs.vercel.app/getting-started/supabase.html) before getting started.
16-
17-
## 2. Creating Database Migrations
18-
19-
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).
20-
21-
## 3. Pushing Database Migrations
22-
23-
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.
24-
25-
Once your changes are merged to main, the workflow will push any new migrations to the remote Supabase Instance.
26-
27-
## 4. Create a backup for Database Migrations
28-
29-
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.
30-
31-
## 5. Creating Hooks and Components
32-
33-
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.
34-
35-
We strongly recommend creating routes and components to demo your module. React Components are created and grouped by Module in the `/components` directory.
36-
37-
Make sure to see the existing pattern before getting started.
5+
> Warning: This contributing guide is still work in progress.

‎README.md

+5-3
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@ pnpm install
4141

4242
## Environment variables
4343

44-
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.
44+
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.
45+
46+
If you want to connect to a remote Supabase instance you can set all of your variables in `.env` located in the root repository.
4547

4648
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).
4749

@@ -59,10 +61,10 @@ pnpm db:start & pnpm dev
5961

6062
> Remember to run `pnpm db:stop` to save resources once you are done working with your local Supabase Instance.
6163
62-
If you intended to develop with a cloud hosted Supabase Instance you only need:
64+
If you intended to develop with a cloud hosted Supabase Instance you only need to run:
6365

6466
```bash
65-
pnpm dev
67+
pnpm dev-remote
6668
```
6769

6870
## Build

‎apps/next/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,6 @@ yarn-error.log*
3434
# typescript
3535
*.tsbuildinfo
3636
next-env.d.ts
37+
38+
# react-email
39+
.react-email

‎apps/next/app/page.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,17 @@ export default async function Home() {
1616
}
1717

1818
return (
19-
<div className="mx-auto w-full max-w-2xl py-52">
20-
<div className="space-y-6">
21-
<header className="space-y-2 text-center">
22-
<h2 className="text-6xl font-bold tracking-tight">
19+
<div className="mx-auto grid min-h-[60vh] max-w-2xl items-center space-y-6 lg:max-w-4xl">
20+
<div className="space-y-4">
21+
<header className="space-y-2">
22+
<h2 className="text-5xl font-bold tracking-tight lg:text-7xl">
2323
Supabase Modules
2424
</h2>
2525
<p className="text-muted-foreground text-xl">
2626
Build smarter with pre-built modules today
2727
</p>
2828
</header>
29-
<footer className="flex flex-col justify-center gap-2 sm:flex-row">
29+
<footer className="flex flex-col gap-2 sm:flex-row">
3030
<Button asChild>
3131
<Link href="/login">Sign in</Link>
3232
</Button>

‎apps/next/components/user/accounts.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ const AccountsComponent: React.FC<{
174174
<Link href="/settings/profile">Profile settings</Link>
175175
</DropdownMenuItem>
176176
<DropdownMenuItem>
177-
<Link href="/settings/account">Account settings</Link>
177+
<Link href="/settings/credentials">Credentials settings</Link>
178178
</DropdownMenuItem>
179179
<DropdownMenuSeparator />
180180
<DropdownMenuItem disabled={true}>

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

+9-5
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,7 @@ export const CredentialsForm: React.FC<{ userEmail: string }> = ({
5757

5858
const FormSchema = z.object({
5959
email: z.string().email({ message: "Invalid email address" }).optional(),
60-
password: z
61-
.string()
62-
.min(5, { message: "Must be 5 or more characters long" })
63-
.optional(),
60+
password: z.string().optional(),
6461
});
6562

6663
const CredentialsFormComponent: React.FC<{
@@ -95,7 +92,14 @@ const CredentialsFormComponent: React.FC<{
9592
<Form {...form}>
9693
<form
9794
onSubmit={form.handleSubmit(({ email, password }) => {
98-
updateUser({ email, password });
95+
const updates: { email?: string; password?: string } = {};
96+
97+
if (email) updates.email = email;
98+
if (password) updates.password = password;
99+
100+
if (Object.keys(updates).length > 0) {
101+
updateUser(updates);
102+
}
99103
form.reset();
100104
})}
101105
className="space-y-6"

‎apps/next/emails/_components/styles.ts

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import * as React from "react";
2+
3+
export const main: React.CSSProperties = {
4+
backgroundColor: "#ffffff",
5+
fontFamily:
6+
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
7+
};
8+
9+
export const container: React.CSSProperties = {
10+
margin: "0 auto",
11+
padding: "20px 12px 48px",
12+
maxWidth: "600px",
13+
};
14+
15+
export const h1: React.CSSProperties = {
16+
color: "#09090B",
17+
fontSize: "24px",
18+
fontWeight: "bold",
19+
margin: "40px 0 16px",
20+
padding: "0",
21+
};
22+
23+
export const buttonContainer: React.CSSProperties = {
24+
textAlign: "center",
25+
};
26+
27+
export const button: React.CSSProperties = {
28+
backgroundColor: "#18181B",
29+
color: "#FAFAFA",
30+
fontWeight: 500,
31+
fontSize: "14px",
32+
padding: "10.5px 18px",
33+
borderRadius: "8px",
34+
width: "fit-content",
35+
textDecoration: "none",
36+
textAlign: "center",
37+
display: "block",
38+
};
39+
40+
export const code: React.CSSProperties = {
41+
display: "inline-block",
42+
padding: "16px 4.5%",
43+
width: "90.5%",
44+
backgroundColor: "#F4F4F5",
45+
borderRadius: "5px",
46+
border: "1px solid #eee",
47+
color: "#09090B",
48+
};
49+
50+
export const link: React.CSSProperties = {
51+
color: "#2754C5",
52+
fontSize: "14px",
53+
textDecoration: "underline",
54+
};
55+
56+
export const text: React.CSSProperties = {
57+
color: "#09090B",
58+
fontSize: "14px",
59+
margin: "16px 0",
60+
};
61+
62+
export const hr: React.CSSProperties = {
63+
borderColor: "#dfe1e4",
64+
margin: "24px 0",
65+
};
66+
67+
export const footer: React.CSSProperties = {
68+
color: "#898989",
69+
fontSize: "12px",
70+
lineHeight: "22px",
71+
marginTop: "12px",
72+
marginBottom: "24px",
73+
};

‎apps/next/emails/confirmation.tsx

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import {
2+
Body,
3+
Button,
4+
Container,
5+
Head,
6+
Heading,
7+
Hr,
8+
Html,
9+
Link,
10+
Preview,
11+
Section,
12+
Text,
13+
} from "@react-email/components";
14+
import * as React from "react";
15+
import * as styles from "./_components/styles";
16+
import { EmailOtpType } from "@supabase/supabase-js";
17+
18+
const redirectTo = `/login`;
19+
const type: EmailOtpType = "signup";
20+
const confirmationURL = `{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=${type}&next=${redirectTo}`;
21+
22+
export default function Email() {
23+
return (
24+
<Html>
25+
<Head />
26+
<Preview>Configm your signup</Preview>
27+
<Body style={styles.main}>
28+
<Container style={styles.container}>
29+
<Heading style={styles.h1}>Confirm your signup</Heading>
30+
<Text style={styles.text}>
31+
Almost there! Click below to confirm your signup:
32+
</Text>
33+
<Section style={styles.buttonContainer}>
34+
<Button style={styles.button} href={confirmationURL}>
35+
Click here to confirm
36+
</Button>
37+
</Section>
38+
<Text
39+
style={{
40+
...styles.text,
41+
color: "#71717A",
42+
}}
43+
>
44+
If you didn&apos;t try to create an account, you can safely ignore
45+
this email.
46+
</Text>
47+
<Hr style={styles.hr} />
48+
<Text style={styles.footer}>
49+
<Link
50+
href="https://supabase-modules-docs.vercel.app"
51+
target="_blank"
52+
style={{ ...styles.link, color: "#71717A" }}
53+
>
54+
Supabase Modules
55+
</Link>
56+
<br />
57+
Build smarter with pre-built modules today
58+
</Text>
59+
</Container>
60+
</Body>
61+
</Html>
62+
);
63+
}

‎apps/next/emails/email_change.tsx

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import {
2+
Body,
3+
Button,
4+
Container,
5+
Head,
6+
Heading,
7+
Hr,
8+
Html,
9+
Link,
10+
Preview,
11+
Section,
12+
Text,
13+
} from "@react-email/components";
14+
import * as React from "react";
15+
import * as styles from "./_components/styles";
16+
import { EmailOtpType } from "@supabase/supabase-js";
17+
18+
const redirectTo = `/login`;
19+
const type: EmailOtpType = "email_change";
20+
21+
const confirmationURL = `{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=${type}&next=${redirectTo}`;
22+
23+
export default function Email() {
24+
return (
25+
<Html>
26+
<Head />
27+
<Preview>Configm email change</Preview>
28+
<Body style={styles.main}>
29+
<Container style={styles.container}>
30+
<Heading style={styles.h1}>Confirm email change</Heading>
31+
<Text
32+
style={styles.text}
33+
>{`Click below to confirm the update of your email from {{ .Email }} to {{ .NewEmail }}:`}</Text>
34+
<Section style={styles.buttonContainer}>
35+
<Button style={styles.button} href={confirmationURL}>
36+
Click here to confirm
37+
</Button>
38+
</Section>
39+
<Text
40+
style={{
41+
...styles.text,
42+
color: "#71717A",
43+
}}
44+
>
45+
If you didn&apos;t request an email change, you can safely ignore
46+
this email.
47+
</Text>
48+
<Hr style={styles.hr} />
49+
<Text style={styles.footer}>
50+
<Link
51+
href="https://supabase-modules-docs.vercel.app"
52+
target="_blank"
53+
style={{ ...styles.link, color: "#71717A" }}
54+
>
55+
Supabase Modules
56+
</Link>
57+
<br />
58+
Build smarter with pre-built modules today
59+
</Text>
60+
</Container>
61+
</Body>
62+
</Html>
63+
);
64+
}

‎apps/next/emails/magic_link.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import {
2+
Body,
3+
Container,
4+
Head,
5+
Heading,
6+
Hr,
7+
Html,
8+
Link,
9+
Preview,
10+
Text,
11+
} from "@react-email/components";
12+
import * as React from "react";
13+
import * as styles from "./_components/styles";
14+
15+
export default function Email() {
16+
return (
17+
<Html>
18+
<Head />
19+
<Preview>Your One-Time password</Preview>
20+
<Body style={styles.main}>
21+
<Container style={styles.container}>
22+
<Heading style={styles.h1}>Your One-Time password</Heading>
23+
<Text style={styles.text}>Copy and paste this temporary code:</Text>
24+
<code style={styles.code}>{`{{ .Token }}`}</code>
25+
<Text
26+
style={{
27+
...styles.text,
28+
color: "#71717A",
29+
}}
30+
>
31+
If you didn&apos;t try to log in, you can safely ignore this email.
32+
</Text>
33+
<Hr style={styles.hr} />
34+
<Text style={styles.footer}>
35+
<Link
36+
href="https://supabase-modules-docs.vercel.app"
37+
target="_blank"
38+
style={{ ...styles.link, color: "#71717A" }}
39+
>
40+
Supabase Modules
41+
</Link>
42+
<br />
43+
Build smarter with pre-built modules today
44+
</Text>
45+
</Container>
46+
</Body>
47+
</Html>
48+
);
49+
}

0 commit comments

Comments
 (0)