Updating guidelines

CONTRIBUTING.md

@@ -0,0 +1,37 @@
+# Contributing
+
+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.

README.md

@@ -27,11 +27,9 @@ For example, our [Next.js](https://nextjs.org/) app looks like this:
       📁 migrations
 ```
 
-* The UI lives in the `/components` directory categorized by module name i.e. *user*.
-* 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*.
-
-To learn more about this project, please visit [Supabase Modules Documentation](https://supabase-modules-docs.vercel.app/).
+- The UI lives in the `/components` directory categorized by module name i.e. _user_.
+- 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_.
 
 ## Install
 
@@ -74,3 +72,11 @@ To build, run the following command from the root repository:
 ```bash
 pnpm build
 ```
+
+## Contributing
+
+Excited to hear that you are interested in contributing to this project! Please visit [Contributing](https://supabase-modules-docs.vercel.app/introduction/contributing.html)
+
+## Documentation
+
+To learn more about this project, please visit [Supabase Modules Documentation](https://supabase-modules-docs.vercel.app/).

apps/next/app/globals.css

@@ -5,64 +5,68 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 6% 25%;
+    --foreground: 222.2 47.4% 11.2%;
 
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
 
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
 
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
 
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
 
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
 
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
+    --ring: 215 20.2% 65.1%;
 
     --radius: 0.5rem;
+  }
 
-    @media (prefers-color-scheme: dark) {
-      --background: 0 0% 3.9%;
-      --foreground: 255 255% 245%;
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
 
-      --card: 0 0% 3.9%;
-      --card-foreground: 0 0% 98%;
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
 
-      --popover: 0 0% 3.9%;
-      --popover-foreground: 0 0% 98%;
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
 
-      --primary: 0 0% 98%;
-      --primary-foreground: 0 0% 9%;
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
 
-      --secondary: 0 0% 14.9%;
-      --secondary-foreground: 0 0% 98%;
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
 
-      --muted: 0 0% 14.9%;
-      --muted-foreground: 0 0% 63.9%;
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
 
-      --accent: 0 0% 14.9%;
-      --accent-foreground: 0 0% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
 
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 0 0% 98%;
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
 
-      --border: 0 0% 14.9%;
-      --input: 0 0% 14.9%;
-      --ring: 0 0% 83.1%;
-    }
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
   }
 }
 
@@ -72,5 +76,6 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
   }
 }

apps/next/app/layout.tsx

@@ -21,7 +21,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" className="dark" suppressHydrationWarning>
       <body
         className={cn(
           "min-h-dvh bg-background font-sans antialiased",

apps/next/app/providers.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
 
 export const Providers: React.FC<React.PropsWithChildren> = ({ children }) => {
   const [queryClient] = React.useState(
@@ -15,6 +16,15 @@ export const Providers: React.FC<React.PropsWithChildren> = ({ children }) => {
       })
   );
   return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    <QueryClientProvider client={queryClient}>
+      <NextThemesProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+      >
+        {children}
+      </NextThemesProvider>
+    </QueryClientProvider>
   );
 };

docs/.vitepress/config.mts

@@ -54,6 +54,7 @@ export default defineConfig({
         items: [
           { text: "Supabase Modules", link: "/introduction/modules" },
           { text: "Workspace", link: "/introduction/workspace" },
+          { text: "Contributing", link: "/introduction/contributing" },
         ],
       },
       {

docs/introduction/contributing.md

@@ -0,0 +1 @@
+<!--@include: ../../CONTRIBUTING.md-->

docs/modules/installation.md

@@ -25,7 +25,7 @@ degit iamhectorsosa/supabase-modules/apps/next/modules/types types
 
 :::
 
-## Module Utilities
+## Module utilities
 
 If you are adding Supabase Modules to an existing project. Before installing any modules, you will need to add some database utils.
 
@@ -46,7 +46,7 @@ degit iamhectorsosa/supabase-modules/apps/next/modules/utils utils
 
 :::
 
-## List of Modules
+## List of modules
 
 Find all the modules you need for your Supabase project here. Quick to integrate, ready to use.