Agregando una acción para correr prettier/eslint/tsc

.eslintignore

@@ -0,0 +1,3 @@
+# # GQL / code-generation
+src/api/gql/**/*
+src/**/*.generated.*

.eslintrc

@@ -9,12 +9,20 @@
       },
       "extends": [
         "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
         "plugin:@typescript-eslint/recommended-requiring-type-checking",
         "plugin:tailwindcss/recommended",
-        "plugin:react/recommended",
-        "next/core-web-vitals",
         "plugin:@next/next/recommended"
-      ]
+      ],
+      "settings": {
+        "react": {
+          "version": "detect"
+        }
+      },
+      "rules": {
+        "react/react-in-jsx-scope": "off"
+      }
     },
     {
       "files": ["*.graphql", "*.gql"],

.github/workflows/lint_and_typecheck.yml

@@ -0,0 +1,61 @@
+name: Lint and Typecheck
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  linting-and-typechecking:
+    runs-on: ubuntu-latest
+    name: Linting and Typechecking
+
+    # Considerar Mover clone/setup/caches a un composite action 🙏
+    steps:
+      - name: ⏳ Cloning repo
+        uses: actions/checkout@v3
+
+      - name: ⬢ Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: 📦 Download Cached Package Dependencies
+        uses: actions/cache@v3
+        env:
+          cache-name: NPM
+        with:
+          path: ~/.npm
+          key: CACHE-${{ env.cache-name }}-${{ hashFiles('package-lock.json') }}
+
+      - name: 📦 Download Cached Eslint output
+        uses: actions/cache@v3
+        env:
+          cache-name: ESLINT
+        with:
+          path: .eslintcache
+          key: CACHE-${{ env.cache-name }}-${{ hashFiles('.eslintcache') }}
+
+      - name: 📦 Download Cached Typescript output
+        uses: actions/cache@v3
+        env:
+          cache-name: TYPESCRIPT
+        with:
+          path: tsconfig.tsbuildinfo
+          key: CACHE-${{ env.cache-name }}-${{ hashFiles('tsconfig.tsbuildinfo') }}
+
+      - name: 📥 Install dependencies
+        run: npm ci --prefer-offline --no-audit --legacy-peer-deps --cache ~/.npm
+
+      - name: Run Prettier
+        run: npm run prettier:ci
+
+      - name: Run Linter
+        run: npm run lint
+
+      - name: Run Typecheck
+        run: npm run typecheck
+
+      - name: Run Next Linter
+        run: npx next lint

.gitignore

@@ -34,6 +34,9 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+# eslint
+.eslintcache
+
 # # GQL / code-generation
 # src/api/gql/**/*
 # src/**/*.generated.*

.prettierrc

@@ -1 +1 @@
-{}
+{}

app/(transition)/(root)/layout.tsx

@@ -1,10 +1,7 @@
 import PageTransition from "@/components/PageTransition";
 import { Nav } from "@/components/nav";
-export default async function Template({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+
+export default function Template({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Nav />

app/(transition)/(root)/page.tsx

@@ -13,13 +13,15 @@ export default async function Home() {
   return (
     <main className="flex max-w-5xl flex-col items-center justify-between px-6 pt-36 transition-all md:px-10 md:pt-44 xl:px-0 xl:pt-52">
       <div className="flex flex-col gap-16 pb-4">
-        <h1 className="flex flex-col justify-start gap-7 text-left text-6xl font-extrabold shadow-slate-900 transition-all text-shadow sm:text-7xl xl:text-8xl">
+        <h1 className="flex flex-col justify-start gap-7 text-left text-6xl font-extrabold shadow-slate-900 transition-all sm:text-7xl xl:text-8xl">
           <span>TICKETS</span>
         </h1>
       </div>
       <div className="flex flex-col gap-4">
         <h1>RSC</h1>
-        {variable.data?.events?.map((event) => <div>{event.id}</div>)}
+        {variable.data?.events?.map((event) => (
+          <div key={event.id}>{event.id}</div>
+        ))}
       </div>
       <div className="flex flex-col gap-4">
         <h1>Client fetching</h1>

app/(transition)/graphiql/page.tsx

@@ -149,7 +149,7 @@ export default function Pregunta() {
   }
   return (
     <GraphiQL
-      fetcher={fetcherRef.current!}
+      fetcher={fetcherRef.current}
       defaultEditorToolsVisibility="variables"
       defaultTabs={[
         {

app/globals.css

@@ -1,76 +1,76 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
 
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
- 
+
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
- 
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
+
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
- 
+
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
- 
+
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
-    --ring: hsl(212.7,26.8%,83.9);
+    --ring: hsl(212.7, 26.8%, 83.9);
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+}

app/layout.tsx

@@ -23,7 +23,7 @@ export const metadata = {
   description: "Generated by create next app",
 };
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;

package.json

@@ -9,8 +9,10 @@
     "generate": "graphql-codegen",
     "prestart": "npm run generate",
     "predev": "npm run generate",
-    "lint": "next lint",
-    "prettier": "prettier ./src --write"
+    "typecheck": "tsc",
+    "lint": "eslint ./src --cache",
+    "prettier:ci": "prettier ./src --cache --check",
+    "prettier:fix": "prettier ./src --cache --write"
   },
   "dependencies": {
     "@apollo/client": "^3.9.0-alpha.4",
@@ -53,12 +55,13 @@
     "@graphql-codegen/typescript-operations": "^4.0.1",
     "@graphql-codegen/typescript-react-apollo": "^4.1.0",
     "@graphql-eslint/eslint-plugin": "^3.20.0",
-    "@next/eslint-plugin-next": "^13.4.9",
+    "@next/eslint-plugin-next": "^13.5.6",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "eslint": "^8.44.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-tailwindcss": "^3.13.0",
+    "graphql-config": "^5.0.3",
     "prettier": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.3.0",
     "ts-node": "^10.9.1",

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/components/Navbar/MainNav.tsx

@@ -1,13 +1,48 @@
 import { NavBarProps } from "./types";
 import { NavbarItem } from "./NavbarItem";
+import {
+  SignInButton,
+  SignOutButton,
+  SignedIn,
+  SignedOut,
+} from "@clerk/clerk-react";
+import { Button } from "../ui/button";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 
 export function MainNav({ items }: NavBarProps) {
+  const pathname = usePathname();
+  const [redirectUrl, setRedirectUrl] = useState("");
+  useEffect(() => {
+    setRedirectUrl(window.location.host);
+  }, []);
   return (
-    <nav
-      className={"items-center space-x-4 lg:space-x-6"}>
+    <nav className={"items-center space-x-4 lg:space-x-6"}>
       {items.map((item) => (
         <NavbarItem key={`navbarItem-${item.content}`} item={item} />
       ))}
+      <SignedOut>
+        {process.env.NEXT_PUBLIC_SIGN_IN_URL ? (
+          <Button asChild variant="secondary">
+            <a
+              href={`${process.env.NEXT_PUBLIC_SIGN_IN_URL}?redirect_url=https://${redirectUrl}`}
+            >
+              Ingresar
+            </a>
+          </Button>
+        ) : (
+          <SignInButton mode="modal" redirectUrl={pathname}>
+            <Button variant="secondary">Ingresar</Button>
+          </SignInButton>
+        )}
+      </SignedOut>
+      <SignedIn>
+        <SignOutButton>
+          <Button variant={"link"} className="cursor-pointer">
+            Salir
+          </Button>
+        </SignOutButton>
+      </SignedIn>
     </nav>
   );
 }

src/components/Navbar/MobileLink.tsx

@@ -1,4 +1,3 @@
-
 import { useRouter } from "next/navigation";
 import Link, { LinkProps } from "next/link";
 import classNames from "classnames";