Adding prettier/eslint/tsc action

.github/workflows/lint_and_typecheck.yml

@@ -0,0 +1,58 @@
+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 Linter
+        run: npm run lint
+
+      - name: Run Typecheck
+        run: npm run typecheck
+
+      - name: Run Prettier
+        run: npm run prettier:ci

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",
@@ -33,6 +35,7 @@
     "framer-motion": "^10.12.18",
     "graphiql": "^3.0.6",
     "graphql": "^16.8.1",
+    "graphql-config": "^5.0.3",
     "graphql-request": "^6.1.0",
     "lucide-react": "^0.265.0",
     "next": "^14.0.3",

src/components/Navbar/MainNav.tsx

@@ -3,8 +3,7 @@ import { NavbarItem } from "./NavbarItem";
 
 export function MainNav({ items }: NavBarProps) {
   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} />
       ))}

src/components/Navbar/MobileLink.tsx

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

src/components/Navbar/MobileNav.tsx

@@ -36,7 +36,11 @@ export function MobileNav({ items }: NavBarProps) {
           <div className="flex flex-col space-y-2">
             <div className="flex flex-col space-y-3 pt-6">
               {items.map((item) => (
-                <MobileNavbarItem key={`mobile-${item.content}`} item={item} setOpen={setOpen} />
+                <MobileNavbarItem
+                  key={`mobile-${item.content}`}
+                  item={item}
+                  setOpen={setOpen}
+                />
               ))}
             </div>
           </div>

src/components/Navbar/MobileNavbarItem.tsx

@@ -25,11 +25,20 @@ export const MobileNavbarItem = ({
     }
 
     if (item.onClick) {
-      return <span className="text-muted-foreground cursor-pointer" onClick={item.onClick}>{item.content}</span>
+      return (
+        <span
+          className="text-muted-foreground cursor-pointer"
+          onClick={item.onClick}
+        >
+          {item.content}
+        </span>
+      );
     }
 
-    return <h4 className="font-medium text-muted-foreground">{item.content}</h4>
-  }
+    return (
+      <h4 className="font-medium text-muted-foreground">{item.content}</h4>
+    );
+  };
 
   if (item.children) {
     return (

src/components/Navbar/NavbarItem.tsx

@@ -23,7 +23,10 @@ export const NavbarItem = ({ item }: { item: NavbarMenuItem }) => {
           {item.children.map((children) => {
             if (children.link) {
               return (
-                <DropdownMenuItem key={`dropdown-${item.content}`} className="cursor-pointer">
+                <DropdownMenuItem
+                  key={`dropdown-${item.content}`}
+                  className="cursor-pointer"
+                >
                   <Link href={children.link} className="flex items-center">
                     {children.icon}
                     <span>{children.content}</span>
@@ -36,7 +39,11 @@ export const NavbarItem = ({ item }: { item: NavbarMenuItem }) => {
               return <DropdownMenuSeparator key={`dropdown-${item.content}`} />;
             }
             return (
-              <DropdownMenuItem key={`dropdown-${item.content}`} onClick={children.onClick} className={classNames(children.onClick && 'cursor-pointer')}>
+              <DropdownMenuItem
+                key={`dropdown-${item.content}`}
+                onClick={children.onClick}
+                className={classNames(children.onClick && "cursor-pointer")}
+              >
                 {children.icon}
                 <span>{children.content}</span>
               </DropdownMenuItem>
@@ -55,10 +62,18 @@ export const NavbarItem = ({ item }: { item: NavbarMenuItem }) => {
       >
         {item.content}
       </Link>
-    )
+    );
   }
 
-  return <span onClick={item.onClick} className={classNames("text-sm font-medium text-muted-foreground transition-colors hover:text-primary", item.onClick && 'cursor-pointer')}>
-    {item.content}
-  </span>
+  return (
+    <span
+      onClick={item.onClick}
+      className={classNames(
+        "text-sm font-medium text-muted-foreground transition-colors hover:text-primary",
+        item.onClick && "cursor-pointer",
+      )}
+    >
+      {item.content}
+    </span>
+  );
 };

src/components/Navbar/ThemeSwitcher.tsx

@@ -1,31 +1,33 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
 
 export function ThemeSwitcher() {
-  const { setTheme } = useTheme()
-  const themes = [{
-    name: 'Light',
-    type: 'light'
-  },
-  {
-    name: 'Dark',
-    type: 'dark',
-  },
-  {
-    name: 'System',
-    type: 'system'
-  }];
+  const { setTheme } = useTheme();
+  const themes = [
+    {
+      name: "Light",
+      type: "light",
+    },
+    {
+      name: "Dark",
+      type: "dark",
+    },
+    {
+      name: "System",
+      type: "system",
+    },
+  ];
 
   return (
     <DropdownMenu>
@@ -37,10 +39,16 @@ export function ThemeSwitcher() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        {themes.map(({ name, type }) => <DropdownMenuItem key={name} className="cursor-pointer" onClick={() => setTheme(type)}>
-          {name}
-        </DropdownMenuItem>)}
+        {themes.map(({ name, type }) => (
+          <DropdownMenuItem
+            key={name}
+            className="cursor-pointer"
+            onClick={() => setTheme(type)}
+          >
+            {name}
+          </DropdownMenuItem>
+        ))}
       </DropdownMenuContent>
-    </DropdownMenu >
-  )
-}
+    </DropdownMenu>
+  );
+}

src/components/Navbar/types.d.ts

@@ -1,13 +1,11 @@
-
 export type NavbarMenuItem = {
-    content: string;
-    link?: string;
-    icon?: React.ReactNode;
-    onClick?: (e: React.MouseEvent<HTMLElement>) => void; 
-    children?: Array<NavbarMenuItem | DropdownMenuSeparator>;
-}
+  content: string;
+  link?: string;
+  icon?: React.ReactNode;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  children?: Array<NavbarMenuItem | DropdownMenuSeparator>;
+};
 
 export type NavBarProps = {
-    items: Array<NavbarMenuItem>;
-}
-
+  items: Array<NavbarMenuItem>;
+};

src/components/PageTransition.tsx

@@ -17,7 +17,7 @@ const transition = {
 
 function PageTransition(
   { children, ...rest }: PageTransitionProps,
-  ref: PageTransitionRef
+  ref: PageTransitionRef,
 ) {
   return (
     <motion.div
@@ -28,7 +28,7 @@ function PageTransition(
       transition={transition}
       className={classNames(
         "flex h-full flex-col items-center overflow-auto",
-        rest.className
+        rest.className,
       )}
     >
       {children}

src/components/providers.tsx

@@ -1,13 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { ThemeProviderProps } from "next-themes/dist/types"
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { ThemeProviderProps } from "next-themes/dist/types";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return (
-    <NextThemesProvider {...props}>
-      {children}
-    </NextThemesProvider>
-  )
-}
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

src/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@@ -30,27 +30,27 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };