From 543b1189160bced2abcd1d8a985ad4af12690b98 Mon Sep 17 00:00:00 2001 From: iamhectorsosa Date: Wed, 8 May 2024 15:22:16 +0200 Subject: [PATCH] chore: Updating project no PR --- .github/workflows/production.yaml | 2 +- CONTRIBUTING.md | 38 +++++++++++++----------- README.md | 9 +++++- apps/next/.eslintrc.json | 1 + apps/next/.prettierignore | 3 +- apps/next/components/user/login-form.tsx | 18 +++++++++-- apps/next/modules/user/auth.ts | 2 -- docs/modules/user.md | 27 ++++++++++------- package.json | 5 ++-- turbo.json | 22 +++++--------- 10 files changed, 75 insertions(+), 52 deletions(-) diff --git a/.github/workflows/production.yaml b/.github/workflows/production.yaml index d4095ac..955f70d 100644 --- a/.github/workflows/production.yaml +++ b/.github/workflows/production.yaml @@ -23,5 +23,5 @@ jobs: version: latest - run: supabase link --project-ref $SUPABASE_PROJECT_ID --workdir ./apps/next - # - run: supabase db reset --linked --workdir ./apps/next + - run: supabase db reset --linked --workdir ./apps/next - run: supabase db push --workdir ./apps/next diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 98e7692..32187b6 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,31 +2,33 @@ Excited to hear that you are interested in contributing to this project! Thank you! -> Warning: This contributing guide is still work in progress. +> Warning: This contributing guide is **still** work in progress and subject to change. ## Modules structure -Modules are organzied in the `apps/` folder by framework. Each framework folder contains also runnable project along wit the modules source code. +### What is a module? -The modules contain async functions that abstract Supabase database interaction for the general use cases. They are located in `modules/` folder and are divided into subfolders by features (e.g. `user/` subfolder for authentication or profile management). +Modules are a contained group of logic to support a specific feature or domain (i.e., User Module contains authentication, profile, avatars, etc.). They could be as broad or specific as you would like, so long as they contain everything they need to operate independently. -The UI elements / parts are located in `components/` folder. The `components/ui` subfolder contains general purpose reusable UI elements. Other folders in the `components/` directory contain components per feature (e.g. user management components are in `components/user` subfolder). +High level modules should only be dependant on low level modules like User. If you create a module that is cross-depandant on multiple modules, you should consider combining these into a single module. -The `lib/` folder is for helpers used across the app. +Modules are organzied in the `apps/` folder by framework. Each framework folder contains also runnable project along wit the modules source code. -_Please perserve the described file structure when developing in the project._ +### Module structure -## Code convention +Modules contain async functions (Server Actions) that abstract Supabase database interaction. They are located in `modules` directory and are divided into subdirectories by feature or domain (i.e., `user` module for authentication, profile, avatar, etc.). -Functions are declared with the `function` keyword. +- Each module contains supporting UI components to demo its functionality. These are located in the `components` directory. +- Module component structure should mimic the same structure as their supporting modules (i.e., `modules/user` module component should be located in `components/user` directory). +- The `components/ui` directory only contains general purpose UI elements. ### Components -We use [`shadcn/ui`](https://ui.shadcn.com/docs) for components in the project. - -Names of UI component files are written in lowercase. If the name consists of two or more words use hyphen (e.g. `dynamic-navigation-links.tsx`). - -Also note the usage of `cn()` utility. We use the own implementation from the `lib/utils` that wraps `clsx` utility with `twMerge`. +- We use [`shadcn/ui`](https://ui.shadcn.com/docs) for components in the project +- Names of UI component files are written in kebab case +- All components should be typed using `React.FC` +- All component-supporting functions should be declared using the keyword `function` +- To compose or combine CSS classes please make use of the `cn` utility from `lib/utils` #### Zod @@ -34,13 +36,13 @@ We use [`zod`](https://zod.dev/) for input validation and parsing values. It pro ### Data queries and manipulation -The UI parts implement some sort of functionality, many times related to the database. To fetch or manipulate data in the UI part component we use [`@tanstack/*-query`](https://tanstack.com/query/latest) library. There is a support for multiple javascript frameworks including React and Vue. +The UI parts implement some sort of functionality, many times related to the database. To fetch or manipulate data in the UI part component we use [`@tanstack/react-query`](https://tanstack.com/query/latest) library. There is a support for multiple javascript frameworks including React and Vue. ## Database ### Database development -Database can be developed locally using the Supabase Studio or Supabase CLI. After making changes to the DB it is necessary to save perserve them using migrations files. A migration file is a set of SQL commands that will be executed at database reset or init. It usually incorporates creation of the tables, setting security, creating custom functions and triggers, etc. Migration files are stored in the given framework project in the directory `supabase/migrations/` are prefixed with the timestamp, for example: `20240214100236_user.sql`. +Database development should take place locally using the Supabase Studio or Supabase CLI. After making changes to the DB it is necessary to save perserve them using migrations files. A migration file is a set of SQL commands that will be executed at database reset or init. It usually incorporates creation of the tables, setting security, creating custom functions and triggers, etc. Migration files are stored in the given framework project in the directory `supabase/migrations` are prefixed with the timestamp, for example: `20240214100236_user.sql`. #### Save changes made to the database @@ -52,11 +54,11 @@ supabase db diff --schema auth,public --use-migra user -f user The above code will create a new migration file containing the new changes (that are not included in the previous migration files) with the "user" postfix in the `migrations` folder. -Due to modularity goals of this project, we also want to keep migrations file in the squashed format for given module. For example, in the `modules/user/` there is an `migrations.sql` that contains all the SQL code that should be applied to the DB when extracting only the user module to the target project. Currently there is not known Supabase CLI command that can create squashed migration file on table level, so this needs to be maintained manually every time new migrations for the given module are added to the `supabase/migrations/` folder. +Due to modularity goals of this project, we also want to keep migrations file in the squashed format for given module. For example, in the `modules/user` there is an `migrations.sql` that contains all the SQL code that should be applied to the DB when extracting only the user module to the target project. Currently there is not known Supabase CLI command that can create squashed migration file on table level, so this needs to be maintained manually every time new migrations for the given module are added to the `supabase/migrations` folder. -#### Applying changes from migrations to the database +#### Testing migration changes -To apply the changes from the migrations we can use the `reset` command. It will apply all SQL commands contained in the files in `supabase/migrations/` folder: +Test migration changes using the `reset` command. It will apply all SQL commands contained in the files in `supabase/migrations` folder: ```shell supabase db reset diff --git a/README.md b/README.md index d116cb3..2892ee0 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,13 @@ For example, our [Next.js](https://nextjs.org/) app looks like this: - The logic lives in the `/modules` directory categorized by module name i.e. _user_. - The database configuration lives in the `/supabase` directory where migrations can be identified by module name i.e. _20240214100236_user.sql_. +## Requirements + +Requirements: + +- Node: `>=20`, +- Package manager: `pnpm@8.15.1` + ## Install To install dependencies, run the following command from the root repository: @@ -41,7 +48,7 @@ pnpm install ## Environment variables -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. +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. diff --git a/apps/next/.eslintrc.json b/apps/next/.eslintrc.json index e52af50..e3d9ade 100644 --- a/apps/next/.eslintrc.json +++ b/apps/next/.eslintrc.json @@ -29,6 +29,7 @@ } } ], + "no-console": ["error", { "allow": ["error"] }], "react/prop-types": "off", "react/react-in-jsx-scope": "off", "tailwindcss/no-custom-classname": "off", diff --git a/apps/next/.prettierignore b/apps/next/.prettierignore index 767a86c..e2585b5 100644 --- a/apps/next/.prettierignore +++ b/apps/next/.prettierignore @@ -2,4 +2,5 @@ node_modules .next .vscode **/*.html -supabase \ No newline at end of file +supabase +modules/types \ No newline at end of file diff --git a/apps/next/components/user/login-form.tsx b/apps/next/components/user/login-form.tsx index a8c23f2..94e4e6b 100644 --- a/apps/next/components/user/login-form.tsx +++ b/apps/next/components/user/login-form.tsx @@ -109,10 +109,18 @@ export const LoginForm: React.FC<{ searchParamError: error || null, }) + function handleAnonymousSignIn(): void { + anonymousSignIn.mutate({ + redirect: { + url: "/guest", + }, + }) + } + return ( anonymousSignIn.mutate({})} + anonymousSignIn={handleAnonymousSignIn} isPending={signIn.isPending || passwordlessSignIn.isPending} isError={isError} errorMessage={errorMessage} @@ -217,14 +225,18 @@ const LoginFormComponent: React.FC<{ /> -