add config & format all files

.husky/pre-commit

@@ -1,2 +1,3 @@
 pnpm lint
+pnpm prettier
 pnpm build

.prettierignore

@@ -0,0 +1,5 @@
+# Ignore artifacts:
+build
+coverage
+node_modules
+pnpm-lock.yaml

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": false
+}

components.json

@@ -14,4 +14,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}

eslint.config.mjs

@@ -1,14 +1,35 @@
-import globals from "globals";
-import pluginJs from "@eslint/js";
-import tseslint from "typescript-eslint";
-import pluginReact from "eslint-plugin-react";
+import eslintConfigPrettier from "eslint-config-prettier"
+import nextPlugin from "@next/eslint-plugin-next"
+import tsPlugin from "@typescript-eslint/eslint-plugin"
+import tsParser from "@typescript-eslint/parser"
 
-
-/** @type {import('eslint').Linter.Config[]} */
 export default [
-  {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
-  {languageOptions: { globals: globals.browser }},
-  pluginJs.configs.recommended,
-  ...tseslint.configs.recommended,
-  pluginReact.configs.flat.recommended,
-];
+  {
+    ignores: ["node_modules/**", "dist/**", ".next/**", "out/**"],
+  },
+  {
+    files: ["**/*.{ts,tsx}"],
+    plugins: {
+      "@typescript-eslint": tsPlugin,
+      "@next/next": nextPlugin,
+    },
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
+    },
+    rules: {
+      // Avertissement pour les 'any'
+      "@typescript-eslint/no-explicit-any": "warn",
+
+      // Avertissement pour les imports/variables non utilisés
+      "@typescript-eslint/no-unused-vars": "warn",
+
+      // Avertissement pour les types implicites qui pourraient être 'any'
+      "@typescript-eslint/no-inferrable-types": "warn",
+    },
+  },
+  eslintConfigPrettier,
+]

next.config.mjs

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "standalone",
-};
+}
 
-export default nextConfig;
+export default nextConfig

package.json

@@ -6,7 +6,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "npx eslint .",
+    "prettier": "prettier --check .",
+    "prettier:format": "prettier --write .",
     "prepare": "husky"
   },
   "dependencies": {
@@ -47,6 +49,8 @@
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.13.0",
+    "@typescript-eslint/parser": "^8.13.0",
     "eslint": "^9.14.0",
     "eslint-config-next": "14.2.5",
     "eslint-config-prettier": "^9.1.0",

postcss.config.mjs

@@ -3,6 +3,6 @@ const config = {
   plugins: {
     tailwindcss: {},
   },
-};
+}
 
-export default config;
+export default config

src/app/(gistLayout)/layout-ui.tsx

@@ -1,16 +1,16 @@
-import { OrgListFeature } from '@/components/logic/org-list-logic'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/shadcn/avatar'
-import { Button } from '@/components/shadcn/button'
-import { Codearea } from '@/components/shadcn/codearea'
-import { Input } from '@/components/shadcn/input'
-import { Sidebar, SidebarContent, SidebarHeader, SidebarProvider } from '@/components/shadcn/sidebar'
-import MenuButton from '@/components/ui/menu-button'
-import { Modal } from '@/components/ui/modal'
-import { ProfileDropdown } from '@/components/ui/profile-dropdown'
-import TooltipShortcut, { TooltipShortcutTrigger } from '@/components/ui/tooltip-shortcut'
-import { getLanguage } from '@/lib/language'
-import { FileCodeIcon, LucidePencil, PlusIcon } from 'lucide-react'
-import { useState } from 'react'
+import { OrgListFeature } from "@/components/logic/org-list-logic"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/shadcn/avatar"
+import { Button } from "@/components/shadcn/button"
+import { Codearea } from "@/components/shadcn/codearea"
+import { Input } from "@/components/shadcn/input"
+import { Sidebar, SidebarContent, SidebarHeader, SidebarProvider } from "@/components/shadcn/sidebar"
+import MenuButton from "@/components/ui/menu-button"
+import { Modal } from "@/components/ui/modal"
+import { ProfileDropdown } from "@/components/ui/profile-dropdown"
+import TooltipShortcut, { TooltipShortcutTrigger } from "@/components/ui/tooltip-shortcut"
+import { getLanguage } from "@/lib/language"
+import { FileCodeIcon, LucidePencil, PlusIcon } from "lucide-react"
+import { useState } from "react"
 
 interface GistLayoutProps {
   username: string
@@ -22,11 +22,19 @@ interface GistLayoutProps {
   onLogout: () => void
 }
 
-export default function GistLayout({ avatar, children, username, onMyGists, onCreateOrg, onCreateGist, onLogout }: GistLayoutProps) {
-  const [gistName, setGistName] = useState('')
-  const [gistContent, setGistContent] = useState('')
+export default function GistLayout({
+  avatar,
+  children,
+  username,
+  onMyGists,
+  onCreateOrg,
+  onCreateGist,
+  onLogout,
+}: GistLayoutProps) {
+  const [gistName, setGistName] = useState("")
+  const [gistContent, setGistContent] = useState("")
   const [isGistModalOpen, setIsGistModalOpen] = useState(false)
-  const [orgName, setOrgName] = useState('')
+  const [orgName, setOrgName] = useState("")
   const [isOrgModalOpen, setIsOrgModalOpen] = useState(false)
 
   const language = getLanguage(gistName)
@@ -124,10 +132,24 @@ function AppSidebar({
         </SidebarHeader>
         <SidebarContent>
           <div className="flex flex-col gap-2">
-            <MenuButton icon={<FileCodeIcon />} variant="menu" size="menu" letter="M" onClick={onMyGists} href="/mygist" className="w-full">
+            <MenuButton
+              icon={<FileCodeIcon />}
+              variant="menu"
+              size="menu"
+              letter="M"
+              onClick={onMyGists}
+              href="/mygist"
+              className="w-full"
+            >
               My Gists
             </MenuButton>
-            <CreateOrgModal orgName={orgName} setOrgName={setOrgName} isOrgModalOpen={isOrgModalOpen} setIsOrgModalOpen={setIsOrgModalOpen} onCreateOrg={onCreateOrg} />
+            <CreateOrgModal
+              orgName={orgName}
+              setOrgName={setOrgName}
+              isOrgModalOpen={isOrgModalOpen}
+              setIsOrgModalOpen={setIsOrgModalOpen}
+              onCreateOrg={onCreateOrg}
+            />
           </div>
           <OrgListFeature />
         </SidebarContent>
@@ -147,17 +169,26 @@ interface CreateGistModalProps {
   language: string
 }
 
-function CreateGistModal({ gistName, setGistName, isGistModalOpen, setIsGistModalOpen, onCreateGist, gistContent, setGistContent, language }: CreateGistModalProps) {
+function CreateGistModal({
+  gistName,
+  setGistName,
+  isGistModalOpen,
+  setIsGistModalOpen,
+  onCreateGist,
+  gistContent,
+  setGistContent,
+  language,
+}: CreateGistModalProps) {
   return (
     <Modal
       open={isGistModalOpen}
       onOpenChange={setIsGistModalOpen}
       title="New Gist"
       trigger={
         <div>
-          <TooltipShortcut tooltip="Create a new Gist" shortcuts={['C']}>
+          <TooltipShortcut tooltip="Create a new Gist" shortcuts={["C"]}>
             <TooltipShortcutTrigger>
-              <Button className="w-8 h-8 flex-shrink-0" size={'icon'} variant={'icon'}>
+              <Button className="w-8 h-8 flex-shrink-0" size={"icon"} variant={"icon"}>
                 <LucidePencil className="w-4 h-4" />
               </Button>
             </TooltipShortcutTrigger>
@@ -166,9 +197,20 @@ function CreateGistModal({ gistName, setGistName, isGistModalOpen, setIsGistModa
       }
       content={
         <div className="flex flex-col gap-3">
-          <Input className="border-0 bg-background p-0 h-min font-bold" placeholder="Gist name" value={gistName} onChange={(e) => setGistName(e.target.value)} />
+          <Input
+            className="border-0 bg-background p-0 h-min font-bold"
+            placeholder="Gist name"
+            value={gistName}
+            onChange={(e) => setGistName(e.target.value)}
+          />
           <div className="max-h-80 overflow-y-auto">
-            <Codearea className="border-0 bg-background p-0 font-normal" placeholder="Write content..." value={gistContent} language={language} onChange={(e) => setGistContent(e.target.value)} />
+            <Codearea
+              className="border-0 bg-background p-0 font-normal"
+              placeholder="Write content..."
+              value={gistContent}
+              language={language}
+              onChange={(e) => setGistContent(e.target.value)}
+            />
           </div>
         </div>
       }
@@ -178,7 +220,7 @@ function CreateGistModal({ gistName, setGistName, isGistModalOpen, setIsGistModa
           size="sm"
           onClick={() => {
             onCreateGist(gistName, gistContent)
-            setGistName('')
+            setGistName("")
             setIsGistModalOpen(false)
           }}
         >
@@ -210,7 +252,12 @@ function CreateOrgModal({ orgName, setOrgName, setIsOrgModalOpen, onCreateOrg, i
       title="Create Org"
       content={
         <div className="flex flex-col gap-3">
-          <Input className="border-0 bg-background p-0 h-min font-bold" placeholder="Org name" value={orgName} onChange={(e) => setOrgName(e.target.value)} />
+          <Input
+            className="border-0 bg-background p-0 h-min font-bold"
+            placeholder="Org name"
+            value={orgName}
+            onChange={(e) => setOrgName(e.target.value)}
+          />
         </div>
       }
       footer={
@@ -219,7 +266,7 @@ function CreateOrgModal({ orgName, setOrgName, setIsOrgModalOpen, onCreateOrg, i
           size="sm"
           onClick={() => {
             onCreateOrg(orgName)
-            setOrgName('')
+            setOrgName("")
             setIsOrgModalOpen(false)
           }}
         >

src/app/(gistLayout)/layout.tsx

@@ -1,40 +1,40 @@
-'use client'
+"use client"
 
-import { ReactNode, useCallback } from 'react'
-import GistLayout from './layout-ui'
-import { useMe } from '@/lib/queries/user.queries'
-import { useToast } from '@/components/shadcn/use-toast'
-import { useCreateGist } from '@/lib/queries/gists.queries'
-import { useCreateOrg } from '@/lib/queries/orgs.queries'
-import { useLogout } from '@/lib/queries/auth.queries'
+import { ReactNode, useCallback } from "react"
+import GistLayout from "./layout-ui"
+import { useMe } from "@/lib/queries/user.queries"
+import { useToast } from "@/components/shadcn/use-toast"
+import { useCreateGist } from "@/lib/queries/gists.queries"
+import { useCreateOrg } from "@/lib/queries/orgs.queries"
+import { useLogout } from "@/lib/queries/auth.queries"
 
 export default function GistLayoutFeature({ children }: { children: ReactNode }) {
   const { data, error } = useMe()
   const { toast } = useToast()
   const { mutate: createGist } = useCreateGist({
     onSuccess: () => {
       toast({
-        title: 'Gist Created',
-        description: 'Your gist has been created successfully',
+        title: "Gist Created",
+        description: "Your gist has been created successfully",
       })
     },
   })
   const { mutate: createOrg } = useCreateOrg({
     onSuccess: () => {
       toast({
-        title: 'Organization Created',
-        description: 'Your org has been created successfully',
+        title: "Organization Created",
+        description: "Your org has been created successfully",
       })
     },
   })
 
   const { mutate: logout } = useLogout({
     onSuccess: () => {
       toast({
-        title: 'Logged Out',
-        description: 'You have been logged out successfully',
+        title: "Logged Out",
+        description: "You have been logged out successfully",
       })
-      window.location.href = '/' //sorry but couldn't find a way to redirect to the login page
+      window.location.href = "/" //sorry but couldn't find a way to redirect to the login page
     },
   })
 
@@ -59,7 +59,14 @@ export default function GistLayoutFeature({ children }: { children: ReactNode })
   }
 
   return (
-    <GistLayout onLogout={onLogout} username={data?.name ?? ''} avatar={data?.picture ?? ''} onCreateOrg={onCreateOrg} onMyGists={onMyGists} onCreateGist={onCreateGist}>
+    <GistLayout
+      onLogout={onLogout}
+      username={data?.name ?? ""}
+      avatar={data?.picture ?? ""}
+      onCreateOrg={onCreateOrg}
+      onMyGists={onMyGists}
+      onCreateGist={onCreateGist}
+    >
       {children}
     </GistLayout>
   )

src/app/(gistLayout)/mygist/[gistId]/page-ui.tsx

@@ -1,5 +1,5 @@
-import GistDetails from '@/components/ui/gist-details'
-import { Gist } from '@/types'
+import GistDetails from "@/components/ui/gist-details"
+import { Gist } from "@/types"
 
 interface MyGistIdPageProps {
   gist: Gist
@@ -10,5 +10,15 @@ interface MyGistIdPageProps {
 }
 
 export default function MyGistIdPage({ gist, onDownload, onSave, onDelete, onShare }: MyGistIdPageProps) {
-  return <GistDetails orgName={'My Gists'} gist={gist} redirect={true} onDownload={onDownload} onSave={onSave} onDelete={onDelete} onShare={onShare} />
+  return (
+    <GistDetails
+      orgName={"My Gists"}
+      gist={gist}
+      redirect={true}
+      onDownload={onDownload}
+      onSave={onSave}
+      onDelete={onDelete}
+      onShare={onShare}
+    />
+  )
 }