Setup lint rules and resolve all lint issues. (#49)

blrchen · Feb 17, 2024 · ed7b175 · ed7b175
1 parent 23f2dc8
commit ed7b175
Show file tree

Hide file tree

Showing 19 changed files with 577 additions and 435 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,11 +1,8 @@
 {
   "$schema": "https://json.schemastore.org/eslintrc",
   "root": true,
-  "extends": [
-    "next/core-web-vitals",
-    "prettier"
-  ],
-  "plugins": ["import"],
+  "extends": ["next/core-web-vitals", "prettier", "plugin:tailwindcss/recommended"],
+  "plugins": ["import", "@typescript-eslint"],
   "rules": {
     "import/order": [
       "error",
@@ -26,10 +23,20 @@
         }
       }
     ],
-    "no-unused-vars": "warn"
-  },
-  "settings": {
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "after-used",
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "react-hooks/exhaustive-deps": "off",
+    "tailwindcss/no-custom-classname": "off",
+    "tailwindcss/classnames-order": "off"
   },
+  "settings": {},
   "overrides": [
     {
       "files": ["*.ts", "*.tsx"],

diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -13,4 +13,4 @@
       "skipFiles": ["<node_internals>/**"]
     }
   ]
-}
+}
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -0,0 +1,17 @@
+import { Flex, Heading, Separator } from '@radix-ui/themes'
+
+const NotFound = () => {
+  return (
+    <Flex justify="center" align="center" className="flex flex-1">
+      <Flex gap="3" align="center">
+        <Heading as="h2" size="6" weight="medium">
+          404
+        </Heading>
+        <Separator orientation="vertical" style={{ height: 'var(--space-6)' }} />
+        This page could not be found.
+      </Flex>
+    </Flex>
+  )
+}
+
+export default NotFound
diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
@@ -264,7 +264,7 @@ const Chat = (props: ChatProps, ref: any) => {
                 justify="center"
                 style={{ color: 'var(--accent-11)' }}
               >
-                <AiOutlineLoading3Quarters className="animate-spin h-4 w-4" />
+                <AiOutlineLoading3Quarters className="animate-spin size-4" />
               </Flex>
             )}
             <Tooltip content={'Send Message'}>
@@ -276,7 +276,7 @@ const Chat = (props: ChatProps, ref: any) => {
                 className="rounded-xl cursor-pointer"
                 onClick={sendMessage}
               >
-                <FiSend className="h-4 w-4" />
+                <FiSend className="size-4" />
               </IconButton>
             </Tooltip>
             <Tooltip content={'Clear Message'}>
@@ -288,7 +288,7 @@ const Chat = (props: ChatProps, ref: any) => {
                 disabled={isLoading}
                 onClick={clearMessages}
               >
-                <AiOutlineClear className="h-4 w-4" />
+                <AiOutlineClear className="size-4" />
               </IconButton>
             </Tooltip>
             <Tooltip content={'Toggle Sidebar'}>
@@ -300,7 +300,7 @@ const Chat = (props: ChatProps, ref: any) => {
                 disabled={isLoading}
                 onClick={onToggleSidebar}
               >
-                <AiOutlineUnorderedList className="h-4 w-4" />
+                <AiOutlineUnorderedList className="size-4" />
               </IconButton>
             </Tooltip>
           </Flex>

diff --git a/components/Chat/ChatSideBar.tsx b/components/Chat/ChatSideBar.tsx
@@ -31,7 +31,7 @@ export const ChatSideBar = () => {
           onClick={() => onCreateChat?.(DefaultPersonas[0])}
           className="bg-token-surface-primary active:scale-95 cursor-pointer"
         >
-          <FiPlus className="h-4 w-4" />
+          <FiPlus className="size-4" />
           <Text>New Chat</Text>
         </Box>
         <ScrollArea className="flex-1" type="auto" scrollbars="vertical">
@@ -46,7 +46,7 @@ export const ChatSideBar = () => {
                 onClick={() => onChangeChat?.(chat)}
               >
                 <Flex gap="2" align="center">
-                  <BiMessageDetail className="h-4 w-4" />
+                  <BiMessageDetail className="size-4" />
                   <Text as="p" className="truncate">
                     {chat.persona?.name}
                   </Text>
@@ -62,7 +62,7 @@ export const ChatSideBar = () => {
                     onDeleteChat?.(chat)
                   }}
                 >
-                  <AiOutlineCloseCircle className="h-4 w-4" />
+                  <AiOutlineCloseCircle className="size-4" />
                 </IconButton>
               </Box>
             ))}
@@ -73,7 +73,7 @@ export const ChatSideBar = () => {
           onClick={() => onOpenPersonaPanel?.('chat')}
           className="bg-token-surface-primary active:scale-95 cursor-pointer"
         >
-          <RiRobot2Line className="h-4 w-4" />
+          <RiRobot2Line className="size-4" />
           <Text>Persona Store</Text>
         </Box>
       </Flex>

diff --git a/components/Chat/Message.tsx b/components/Chat/Message.tsx
@@ -17,7 +17,7 @@ const Message = (props: MessageProps) => {
   return (
     <Flex gap="4" className="mb-5">
       <Avatar
-        fallback={isUser ? <HiUser className="h-4 w-4" /> : <SiOpenai className="h-4 w-4" />}
+        fallback={isUser ? <HiUser className="size-4" /> : <SiOpenai className="size-4" />}
         color={isUser ? undefined : 'green'}
         size="2"
         radius="full"

diff --git a/components/Chat/PersonaPanel.tsx b/components/Chat/PersonaPanel.tsx
@@ -21,7 +21,7 @@ import { Persona } from './interface'
 
 export interface PersonaPanelProps {}
 
-const PersonaPanel = (props: PersonaPanelProps) => {
+const PersonaPanel = (_props: PersonaPanelProps) => {
   const {
     personaPanelType,
     DefaultPersonas,
@@ -83,10 +83,10 @@ const PersonaPanel = (props: PersonaPanelProps) => {
           radius="full"
           onClick={onClosePersonaPanel}
         >
-          <AiOutlineClose className="w-4 h-4" />
+          <AiOutlineClose className="size-4" />
         </IconButton>
       </Flex>
-      <Container size="3" className="flex-grow-0 px-4">
+      <Container size="3" className="grow-0 px-4">
         <Flex gap="4" py="5">
           <TextField.Root size="3" className="flex-1" radius="large">
             <TextField.Slot>
@@ -134,7 +134,7 @@ const PersonaPanel = (props: PersonaPanelProps) => {
                       onCreateChat?.(prompt)
                     }}
                   >
-                    <LuMessageSquarePlus className="h-4 w-4" />
+                    <LuMessageSquarePlus className="size-4" />
                   </IconButton>
                   <IconButton
                     size="2"
@@ -145,7 +145,7 @@ const PersonaPanel = (props: PersonaPanelProps) => {
                       onEditPersona?.(prompt)
                     }}
                   >
-                    <AiOutlineEdit className="h-4 w-4" />
+                    <AiOutlineEdit className="size-4" />
                   </IconButton>
                   <IconButton
                     size="2"
@@ -156,7 +156,7 @@ const PersonaPanel = (props: PersonaPanelProps) => {
                       onDeletePersona?.(prompt)
                     }}
                   >
-                    <AiOutlineDelete className="h-4 w-4" />
+                    <AiOutlineDelete className="size-4" />
                   </IconButton>
                 </Flex>
               </Flex>

diff --git a/components/Chat/index.ts b/components/Chat/index.ts
@@ -1,3 +1,5 @@
+'use client'
+
 export * from './interface'
 export { default as Chat } from './Chat'
 export { default as ChatSideBar } from './ChatSideBar'

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -5,21 +5,13 @@ import { HamburgerMenuIcon } from '@radix-ui/react-icons'
 import { Avatar, Flex, Heading, IconButton, Select, Tooltip } from '@radix-ui/themes'
 import cs from 'classnames'
 import NextLink from 'next/link'
-import { usePathname } from 'next/navigation'
 import { FaAdjust, FaGithub, FaMoon, FaRegSun } from 'react-icons/fa'
 import { Link } from './Link'
 import { useTheme } from './Themes'
 
-export interface HeaderProps {
-  children?: React.ReactNode
-  gitHubLink?: string
-  ghost?: boolean
-}
-
-export const Header = ({ children, gitHubLink, ghost }: HeaderProps) => {
-  const pathname = usePathname()
+export const Header = () => {
   const { theme, setTheme } = useTheme()
-  const [show, setShow] = useState(false)
+  const [, setShow] = useState(false)
 
   const toggleNavBar = useCallback(() => {
     setShow((state) => !state)
@@ -32,7 +24,7 @@ export const Header = ({ children, gitHubLink, ghost }: HeaderProps) => {
     >
       <Flex align="center" gap="3">
         <NextLink href="/">
-          <Heading as="h2" size="3" style={{ maxWidth: 200 }}>
+          <Heading as="h2" size="4" style={{ maxWidth: 200 }}>
             ChatGPT Lite
           </Heading>
         </NextLink>

diff --git a/components/Markdown.tsx b/components/Markdown.tsx
@@ -25,7 +25,7 @@ export const Markdown = ({ className, children }: MarkdownProps) => {
       rehypePlugins={[rehypeRaw, rehypeKatex, rehypeStringify]}
       components={{
         code(props) {
-          const { children, className, node, ref, ...rest } = props
+          const { children, className, ref, ...rest } = props
           const match = /language-(\w+)/.exec(className || '')
           return match ? (
             <>

diff --git a/components/Spin/DotLoading.tsx b/components/Spin/DotLoading.tsx
diff --git a/components/Spin/Spin.tsx b/components/Spin/Spin.tsx