Updating Linting and Formatting

apps/next/.eslintrc.json

@@ -1,25 +1,25 @@
 {
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "project": true
-  },
-  "plugins": ["@typescript-eslint", "tailwindcss"],
   "extends": [
     "next/core-web-vitals",
-    "plugin:@typescript-eslint/recommended-type-checked",
-    "plugin:@typescript-eslint/stylistic-type-checked",
+    "eslint:recommended",
+    "prettier",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:tailwindcss/recommended"
   ],
+  "plugins": ["@typescript-eslint", "react", "react-hooks", "tailwindcss"],
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": true,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
   "rules": {
     "@typescript-eslint/consistent-type-definitions": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        "argsIgnorePattern": "^_"
-      }
-    ],
     "@typescript-eslint/no-misused-promises": [
       "error",
       {
@@ -28,22 +28,18 @@
         }
       }
     ],
-    "sort-imports": [
-      "error",
-      {
-        "ignoreCase": true,
-        "memberSyntaxSortOrder": ["all", "single", "multiple", "none"]
-      }
-    ],
     "react/prop-types": "off",
     "react/react-in-jsx-scope": "off",
     "tailwindcss/no-custom-classname": "off",
-    "tailwindcss/classnames-order": "error"
+    "tailwindcss/classnames-order": "off"
   },
   "settings": {
     "tailwindcss": {
       "callees": ["cn", "cva"],
       "config": "tailwind.config.ts"
+    },
+    "react": {
+      "version": "detect"
     }
   },
   "ignorePatterns": ["/lib/env.ts", "/postcss.config.js", "/modules/types"]

apps/next/.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+.next
+.vscode
+**/*.html
+supabase

apps/next/.prettierrc.json

@@ -0,0 +1,31 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "importOrder": [
+    "^(react/(.*)$)|^(react$)",
+    "^(next/(.*)$)|^(next$)",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^@/lib/(.*)$",
+    "^@/components/ui/(.*)$",
+    "^@/components/(.*)$",
+    "^@/styles/(.*)$",
+    "^@/app/(.*)$",
+    "",
+    "^@/modules/types(.*)$",
+    "^@/modules/utils(.*)$",
+    "^@/modules(.*)$",
+    "",
+    "^[./]"
+  ],
+  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"],
+  "plugins": [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ],
+  "tailwindConfig": "tailwind.config.ts",
+  "tailwindFunctions": ["cn", "cva"]
+}

apps/next/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint"]
+}

apps/next/.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always"
+  },
+  "editor.formatOnSave": true,
+  "eslint.rules.customizations": [
+    {
+      "rule": "*",
+      "severity": "warn"
+    }
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

apps/next/app/auth/confirm/route.ts

@@ -1,32 +1,33 @@
-import { createClient } from "@/modules/utils/server";
-import { type EmailOtpType } from "@supabase/supabase-js";
-import { type NextRequest, NextResponse } from "next/server";
+import { NextResponse, type NextRequest } from "next/server"
+import { type EmailOtpType } from "@supabase/supabase-js"
+
+import { createClient } from "@/modules/utils/server"
 
 export async function GET(request: NextRequest) {
-  const { searchParams } = new URL(request.url);
-  const token_hash = searchParams.get("token_hash");
-  const type = searchParams.get("type") as EmailOtpType | null;
-  const next = searchParams.get("next") ?? "/";
+  const { searchParams } = new URL(request.url)
+  const token_hash = searchParams.get("token_hash")
+  const type = searchParams.get("type") as EmailOtpType | null
+  const next = searchParams.get("next") ?? "/"
 
-  const redirectTo = request.nextUrl.clone();
-  redirectTo.pathname = next;
-  redirectTo.searchParams.delete("token_hash");
-  redirectTo.searchParams.delete("type");
+  const redirectTo = request.nextUrl.clone()
+  redirectTo.pathname = next
+  redirectTo.searchParams.delete("token_hash")
+  redirectTo.searchParams.delete("type")
 
   if (token_hash && type) {
-    const supabase = createClient();
+    const supabase = createClient()
 
     const { error } = await supabase.auth.verifyOtp({
       type,
       token_hash,
-    });
+    })
 
     if (!error) {
-      redirectTo.searchParams.delete("next");
-      return NextResponse.redirect(redirectTo);
+      redirectTo.searchParams.delete("next")
+      return NextResponse.redirect(redirectTo)
     }
   }
 
-  redirectTo.pathname = "/";
-  return NextResponse.redirect(redirectTo);
+  redirectTo.pathname = "/"
+  return NextResponse.redirect(redirectTo)
 }

apps/next/app/globals.css

@@ -76,6 +76,8 @@
   }
   body {
     @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
   }
 }

apps/next/app/layout.tsx

@@ -1,24 +1,27 @@
-import { cn } from "@/lib/utils";
-import { Schibsted_Grotesk as FontSans } from "next/font/google";
-import type { Metadata } from "next";
-import { Providers } from "./providers";
-import "./globals.css";
+import type { Metadata } from "next"
+import { Schibsted_Grotesk as FontSans } from "next/font/google"
+
+import { cn } from "@/lib/utils"
+
+import { Providers } from "./providers"
+
+import "./globals.css"
 
 const fontSans = FontSans({
   subsets: ["latin"],
   variable: "--font-sans",
-});
+})
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://supabase-modules-demo.vercel.app/"),
   title: "The Playground",
   description: "Supabase Modules - Build smarter with pre-built modules today",
-};
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
     <html lang="en" className="dark" suppressHydrationWarning>
@@ -35,5 +38,5 @@ export default function RootLayout({
         </Providers>
       </body>
     </html>
-  );
+  )
 }

apps/next/app/login/layout.tsx

@@ -1,10 +1,10 @@
-import { DynamicBreadCrumbs } from "@/components/dynamic-breadcrumbs";
+import { DynamicBreadCrumbs } from "@/components/dynamic-breadcrumbs"
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <section className="mx-auto max-w-lg space-y-2 py-12">
       <DynamicBreadCrumbs />
       {children}
     </section>
-  );
+  )
 }

apps/next/app/login/new/page.tsx

@@ -1,17 +1,19 @@
-import { createClient } from "@/modules/utils/server";
-import { redirect } from "next/navigation";
-import { RegisterForm } from "@/components/user/register-form";
+import { redirect } from "next/navigation"
+
+import { RegisterForm } from "@/components/user/register-form"
+
+import { createClient } from "@/modules/utils/server"
 
 export default async function Page() {
-  const supabase = createClient();
+  const supabase = createClient()
 
   const {
     data: { user },
-  } = await supabase.auth.getUser();
+  } = await supabase.auth.getUser()
 
   if (user) {
-    redirect("/settings/accounts");
+    redirect("/settings/accounts")
   }
 
-  return <RegisterForm />;
+  return <RegisterForm />
 }

apps/next/app/login/otp/page.tsx

@@ -1,36 +1,38 @@
-import { createClient } from "@/modules/utils/server";
-import { OtpLoginForm } from "@/components/user/otp-login-form";
-import { redirect } from "next/navigation";
-import { z } from "zod";
+import { redirect } from "next/navigation"
+import { z } from "zod"
+
+import { OtpLoginForm } from "@/components/user/otp-login-form"
+
+import { createClient } from "@/modules/utils/server"
 
 const emailSchema = z.object({
   email: z.string().email(),
-});
+})
 
 export default async function Page({
   searchParams,
 }: {
-  searchParams: { email?: string };
+  searchParams: { email?: string }
 }) {
-  const supabase = createClient();
+  const supabase = createClient()
 
   const {
     data: { user },
-  } = await supabase.auth.getUser();
+  } = await supabase.auth.getUser()
 
   if (user) {
-    redirect("/settings/accounts");
+    redirect("/settings/accounts")
   }
 
   if (!searchParams.email) {
-    redirect("/login");
+    redirect("/login")
   }
 
-  const res = emailSchema.safeParse({ email: searchParams.email });
+  const res = emailSchema.safeParse({ email: searchParams.email })
 
   if (!res.success) {
-    redirect("/login");
+    redirect("/login")
   }
 
-  return <OtpLoginForm email={searchParams.email} />;
+  return <OtpLoginForm email={searchParams.email} />
 }

apps/next/app/login/page.tsx

@@ -1,17 +1,19 @@
-import { createClient } from "@/modules/utils/server";
-import { LoginForm } from "@/components/user/login-form";
-import { redirect } from "next/navigation";
+import { redirect } from "next/navigation"
+
+import { LoginForm } from "@/components/user/login-form"
+
+import { createClient } from "@/modules/utils/server"
 
 export default async function Page() {
-  const supabase = createClient();
+  const supabase = createClient()
 
   const {
     data: { user },
-  } = await supabase.auth.getUser();
+  } = await supabase.auth.getUser()
 
   if (user) {
-    redirect("/settings/accounts");
+    redirect("/settings/accounts")
   }
 
-  return <LoginForm />;
+  return <LoginForm />
 }

apps/next/app/login/reset-password/new/page.tsx

@@ -1,17 +1,19 @@
-import { createClient } from "@/modules/utils/server";
-import { NewResetPasswordForm } from "@/components/user/new-reset-password-form";
-import { redirect } from "next/navigation";
+import { redirect } from "next/navigation"
+
+import { NewResetPasswordForm } from "@/components/user/new-reset-password-form"
+
+import { createClient } from "@/modules/utils/server"
 
 export default async function Page() {
-  const supabase = createClient();
+  const supabase = createClient()
 
   const {
     data: { user },
-  } = await supabase.auth.getUser();
+  } = await supabase.auth.getUser()
 
   if (!user) {
-    redirect("/login");
+    redirect("/login")
   }
 
-  return <NewResetPasswordForm />;
+  return <NewResetPasswordForm />
 }

apps/next/app/login/reset-password/page.tsx

@@ -1,17 +1,19 @@
-import { createClient } from "@/modules/utils/server";
-import { redirect } from "next/navigation";
-import { ResetPasswordForm } from "@/components/user/reset-password-form";
+import { redirect } from "next/navigation"
+
+import { ResetPasswordForm } from "@/components/user/reset-password-form"
+
+import { createClient } from "@/modules/utils/server"
 
 export default async function Page() {
-  const supabase = createClient();
+  const supabase = createClient()
 
   const {
     data: { user },
-  } = await supabase.auth.getUser();
+  } = await supabase.auth.getUser()
 
   if (user) {
-    redirect("/settings/accounts");
+    redirect("/settings/accounts")
   }
 
-  return <ResetPasswordForm />;
+  return <ResetPasswordForm />
 }