Skip to content

Commit

Permalink
Updating project
Browse files Browse the repository at this point in the history
  • Loading branch information
iamhectorsosa committed Mar 16, 2024
1 parent a77d0e4 commit 951eef2
Show file tree
Hide file tree
Showing 21 changed files with 2,669 additions and 243 deletions.
34 changes: 1 addition & 33 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
8 changes: 5 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand All @@ -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
Expand Down
3 changes: 3 additions & 0 deletions apps/next/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,6 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts

# react-email
.react-email
10 changes: 5 additions & 5 deletions apps/next/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion apps/next/components/user/accounts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
14 changes: 9 additions & 5 deletions apps/next/components/user/credentials-form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<{
Expand Down Expand Up @@ -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"
Expand Down
73 changes: 73 additions & 0 deletions apps/next/emails/_components/styles.ts
Original file line number Diff line number Diff line change
@@ -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",
};
63 changes: 63 additions & 0 deletions apps/next/emails/confirmation.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
64 changes: 64 additions & 0 deletions apps/next/emails/email_change.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
49 changes: 49 additions & 0 deletions apps/next/emails/magic_link.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
Loading

0 comments on commit 951eef2

Please sign in to comment.