fix(webapp): resolve ESLint errors in chatroom and toolbar components

HMarzban · HMarzban · commit 4f63e977b992 · 2026-01-28T14:11:36.000+03:30
- Remove empty Props types in message action components
- Fix unsafe optional chaining in useEmojiBoxHandler
- Add block scope for lexical declarations in switch case
- Fix no-unused-expressions by converting ternaries to if statements
- Add className prop to Link, ClearMark, ImageBox icons
- Fix duplicate setupFilesAfterEnv in jest.config.js
- Add missing serialize import in getSupabaseSession
- Prefix unused variables with underscore
diff --git a/packages/webapp/jest.config.js b/packages/webapp/jest.config.js
@@ -26,8 +26,7 @@ const customJestConfig = {
     '^@config$': '<rootDir>/src/config/index.ts',
     '^@helpers$': '<rootDir>/src/lib/helpers/index.ts'
   },
-  moduleDirectories: ['node_modules', '<rootDir>/'],
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'] // For custom Jest setup
+  moduleDirectories: ['node_modules', '<rootDir>/']
 }
 
 // Export Jest config
diff --git a/packages/webapp/src/components/TipTap/hyperlinkPopovers/previewHyperlink.ts b/packages/webapp/src/components/TipTap/hyperlinkPopovers/previewHyperlink.ts
@@ -158,7 +158,7 @@ const createMetadataContent = (data: MetadataResponse | null, href: string): HTM
         this.style.display = 'none'
       }
     }) as HTMLImageElement
-    iconElement && container.removeChild(iconElement)
+    if (iconElement) container.removeChild(iconElement)
     container.prepend(img)
   }
 
@@ -169,7 +169,7 @@ const fetchMetadata = async (
   href: string,
   metadataContainer: HTMLDivElement,
   editor: Editor,
-  nodePos: number
+  _nodePos: number
 ): Promise<void> => {
   const defaultContent = createMetadataContent(null, href)
   metadataContainer.appendChild(defaultContent)
@@ -207,7 +207,7 @@ const fetchMetadata = async (
       const { left: x, top: y } = editor.view.coordsAtPos(from)
       let el = document.elementFromPoint(x, y)
       el = el?.closest('a[href]') as HTMLElement | null
-      el && updateCurrentToolbarPosition(el as HTMLElement)
+      if (el) updateCurrentToolbarPosition(el as HTMLElement)
     } else {
       console.error('Metadata API error:', data.message)
     }
@@ -217,7 +217,7 @@ const fetchMetadata = async (
 }
 
 export default function previewHyperlink(options: HyperlinkModalOptions) {
-  const { link, editor, nodePos, node, attrs } = options
+  const { link, editor, nodePos, node: _node, attrs } = options
   const href = link.href
 
   const hyperlinkLinkModal = createHTMLElement('div', { className: 'hyperlinkPreviewPopover' })
diff --git a/packages/webapp/src/components/TipTap/toolbar/Icon.tsx b/packages/webapp/src/components/TipTap/toolbar/Icon.tsx
@@ -29,7 +29,7 @@ import {
 import { TbBlockquote } from 'react-icons/tb'
 
 const icons: {
-  [key: string]: React.ComponentType<{ size?: number; fill?: string; className?: string }>
+  [key: string]: React.ComponentType<{ size?: number; fill?: string; className?: any }>
 } = {
   Bold,
   Italic,
diff --git a/packages/webapp/src/components/TipTap/toolbar/toolbarUtils.ts b/packages/webapp/src/components/TipTap/toolbar/toolbarUtils.ts
@@ -56,14 +56,14 @@ export const applySearchThroughHeading = (searchInput: string, router: NextRoute
   router.push(url.toString(), undefined, { shallow: true })
 }
 
-interface DocumentMetadata {
+interface DocumentMetadataUpdate {
   documentId: string
-  description: string
-  keywords: string[]
+  description?: string
+  keywords?: string[]
 }
 
-export const saveDocDescriptionHandler = (
-  mutate: UseMutateFunction<unknown, unknown, DocumentMetadata>,
+export const saveDocDescriptionHandler = <TData = unknown, TError = unknown, TContext = unknown>(
+  mutate: UseMutateFunction<TData, TError, DocumentMetadataUpdate, TContext>,
   docId: string,
   docDescription: string,
   tags: string[]
@@ -77,11 +77,11 @@ export const saveDocDescriptionHandler = (
 
 interface ReadOnlyUpdate {
   documentId: string
-  readOnly: boolean
+  readOnly?: boolean
 }
 
-export const saveDocReadOnlyPage = (
-  mutate: UseMutateFunction<unknown, unknown, ReadOnlyUpdate>,
+export const saveDocReadOnlyPage = <TData = unknown, TError = unknown, TContext = unknown>(
+  mutate: UseMutateFunction<TData, TError, ReadOnlyUpdate, TContext>,
   documentId: string,
   readOnly: boolean
 ): void => {
diff --git a/packages/webapp/src/components/chatroom/components/MessageCard/components/MessageActions/components/MoreActionsDropdown/components/CopyToDocAction.tsx b/packages/webapp/src/components/chatroom/components/MessageCard/components/MessageActions/components/MoreActionsDropdown/components/CopyToDocAction.tsx
@@ -2,8 +2,7 @@ import { useMessageCardContext } from '@components/chatroom/components/MessageCa
 import { useCopyMessageToDocHandler } from '@components/chatroom/components/MessageCard/hooks/useCopyMessageToDocHandler'
 import { MdOutlineFileOpen } from 'react-icons/md'
 
-type Props = {}
-export const CopyToDocAction = ({}: Props) => {
+export const CopyToDocAction = () => {
   const { copyMessageToDocHandler } = useCopyMessageToDocHandler()
   const { message } = useMessageCardContext()
 
diff --git a/packages/webapp/src/components/chatroom/components/MessageCard/components/MessageActions/components/MoreActionsDropdown/components/DeleteAction.tsx b/packages/webapp/src/components/chatroom/components/MessageCard/components/MessageActions/components/MoreActionsDropdown/components/DeleteAction.tsx
@@ -5,8 +5,7 @@ import { useChatroomContext } from '@components/chatroom/ChatroomContext'
 import { DeleteMessageConfirmationDialog } from '@components/chatroom/components/MessageCard/components/common/DeleteMessageConfirmationDialog'
 import { useMemo } from 'react'
 
-type Props = {}
-export const DeleteAction = ({}: Props) => {
+export const DeleteAction = () => {
   const { message } = useMessageCardContext()
   const profile = useAuthStore((state) => state.profile)
   const { openDialog } = useChatroomContext()
diff --git a/packages/webapp/src/components/chatroom/components/MessageCard/components/MessageActions/components/MoreActionsDropdown/components/EditAction.tsx b/packages/webapp/src/components/chatroom/components/MessageCard/components/MessageActions/components/MoreActionsDropdown/components/EditAction.tsx
@@ -4,8 +4,7 @@ import { useAuthStore } from '@stores'
 import { useMemo } from 'react'
 import { MdOutlineEdit } from 'react-icons/md'
 
-type Props = {}
-export const EditAction = ({}: Props) => {
+export const EditAction = () => {
   const { message } = useMessageCardContext()
   const { editMessageHandler } = useEditMessageHandler()
   const profile = useAuthStore((state) => state.profile)
diff --git a/packages/webapp/src/components/chatroom/components/MessageCard/components/MessageContent/components/CommentReference.tsx b/packages/webapp/src/components/chatroom/components/MessageCard/components/MessageContent/components/CommentReference.tsx
@@ -2,9 +2,7 @@ import { MdInsertComment } from 'react-icons/md'
 import { useMessageCardContext } from '../../../MessageCardContext'
 import { getMetadataProperty } from '@utils/metadata'
 
-type Props = {}
-
-export const CommentReference = ({}: Props) => {
+export const CommentReference = () => {
   const { message } = useMessageCardContext()
 
   const comment = getMetadataProperty<{ content?: string; html?: string }>(
diff --git a/packages/webapp/src/components/chatroom/components/MessageCard/components/MessageContent/components/ReplyReference.tsx b/packages/webapp/src/components/chatroom/components/MessageCard/components/MessageContent/components/ReplyReference.tsx
@@ -1,8 +1,7 @@
 import { useMessageCardContext } from '../../../MessageCardContext'
 import { useMemo } from 'react'
 
-type Props = {}
-export const ReplyReference = ({}: Props) => {
+export const ReplyReference = () => {
   const { message } = useMessageCardContext()
 
   const userReplyTo = useMemo(() => {
diff --git a/packages/webapp/src/components/chatroom/components/MessageCard/hooks/usePinMessageHandler.ts b/packages/webapp/src/components/chatroom/components/MessageCard/hooks/usePinMessageHandler.ts
@@ -18,9 +18,11 @@ export const usePinMessageHandler = () => {
       toast.Error(`Message not ${actionType}`)
     } else {
       toast.Success(`Message ${actionType} successfully`)
-      actionType === 'pin'
-        ? addChannelPinnedMessage(message.channel_id, message)
-        : removeChannelPinnedMessage(message.channel_id, message.id)
+      if (actionType === 'pin') {
+        addChannelPinnedMessage(message.channel_id, message)
+      } else {
+        removeChannelPinnedMessage(message.channel_id, message.id)
+      }
 
       // await workspaceBroadcaster.send({
       //   type: 'broadcast',
diff --git a/packages/webapp/src/components/chatroom/hooks/useEmojiBoxHandler.ts b/packages/webapp/src/components/chatroom/hooks/useEmojiBoxHandler.ts
@@ -31,7 +31,10 @@ export const useEmojiBoxHandler = (emojiPikerRef: any, messageContainerRef: any)
       setEditor(editor)
       setEventTypes(type)
 
-      const { clientHeight, clientWidth } = emojiPikerRef?.current
+      const { clientHeight, clientWidth } = emojiPikerRef?.current ?? {
+        clientHeight: 0,
+        clientWidth: 0
+      }
 
       // we need to pick up these dynamic values from the DOM
       const emojiButtonWidth = 24
diff --git a/packages/webapp/src/components/icons/Icons.jsx b/packages/webapp/src/components/icons/Icons.jsx
@@ -37,9 +37,9 @@ export const HighlightMarker = ({ size = 18, fill = 'black' }) => {
 }
 
 // prettier-ignore
-export const ClearMark = ({ size = 18, fill = 'black' }) => {
+export const ClearMark = ({ size = 18, fill = 'black', className = '' }) => {
   return (
-    <svg fill={fill} viewBox="0 0 13.73 13" width={size} xmlns="http://www.w3.org/2000/svg">
+    <svg fill={fill} viewBox="0 0 13.73 13" width={size} xmlns="http://www.w3.org/2000/svg" className={className}>
       <path d="M0,1.55,5.16,6.7,2.73,12h2.5L6.87,8.42,11.46,13l1.27-1.27L1.28.27,0,1.55ZM3.55,0l2,2H7.31L6.76,3.21,8.47,4.92,9.81,2h3.92V0Z" fillRule="evenodd" />
     </svg>
   )
@@ -82,9 +82,9 @@ export const BulletList = ({ size = 18, fill = 'black' }) => {
 }
 
 // prettier-ignore
-export const Link = ({ size = 18, fill = 'black' }) => {
+export const Link = ({ size = 18, fill = 'black', className = '' }) => {
   return (
-    <svg fill={fill} viewBox="0 0 20 10" width={size} xmlns="http://www.w3.org/2000/svg">
+    <svg fill={fill} viewBox="0 0 20 10" width={size} xmlns="http://www.w3.org/2000/svg" className={className}>
       <path d="M15,0H11V2h4a3,3,0,0,1,0,6H11v2h4A5,5,0,0,0,15,0ZM9,8H5A3,3,0,0,1,5,2H9V0H5A5,5,0,0,0,5,10H9ZM6,4h8V6H6Z" />
     </svg>
   )
@@ -162,9 +162,9 @@ export const Video = ({ size = 18, fill = 'black' }) => {
 }
 
 // prettier-ignore
-export const ImageBox = ({ size = 18, fill = 'black' }) => {
+export const ImageBox = ({ size = 18, fill = 'black', className = '' }) => {
   return (
-    <svg viewBox="0 0 18 18" fill={fill} width={size} xmlns="http://www.w3.org/2000/svg">
+    <svg viewBox="0 0 18 18" fill={fill} width={size} xmlns="http://www.w3.org/2000/svg" className={className}>
       <path d="M16,0H2A2,2,0,0,0,0,2V16a2,2,0,0,0,2,2H16a2,2,0,0,0,2-2V2A2,2,0,0,0,16,0Zm0,16H2V2H16ZM11,9,8,12.72,6,10,3,14H15Z" />
     </svg>
   )
diff --git a/packages/webapp/src/components/pages/design-system/types/index.ts b/packages/webapp/src/components/pages/design-system/types/index.ts
@@ -4,7 +4,14 @@
  * Centralized type definitions for the design system demo page.
  */
 
-export type TabType = 'dashboard' | 'documents' | 'team' | 'components' | 'forms' | 'settings'
+export type TabType =
+  | 'dashboard'
+  | 'documents'
+  | 'foundations'
+  | 'team'
+  | 'components'
+  | 'forms'
+  | 'settings'
 
 export type ThemeType = 'docsplus' | 'docsplus-dark'
 
diff --git a/packages/webapp/src/components/pages/editor/hooks/useHierarchicalSelection.ts b/packages/webapp/src/components/pages/editor/hooks/useHierarchicalSelection.ts
@@ -45,11 +45,12 @@ export const useHierarchicalSelection = (editor: Editor | null) => {
           targetElement = element.closest('p, li, h1, h2, h3, h4, h5, h6') as HTMLElement
           break
 
-        case 'parent':
+        case 'parent': {
           // Find the parent container
           const immediateElement = element.closest('p, li, h1, h2, h3, h4, h5, h6') as HTMLElement
           targetElement = immediateElement?.parentElement as HTMLElement
           break
+        }
 
         case 'section':
           // Find the section container
diff --git a/packages/webapp/src/utils/emojis.ts b/packages/webapp/src/utils/emojis.ts
@@ -24,6 +24,7 @@ export const isOnlyEmoji = (str: string): boolean => {
   // - Zero width joiners
   // - Variation selectors
   // - Regional indicators (for flags)
+  // eslint-disable-next-line no-misleading-character-class
   const emojiPattern = /^[\p{Emoji}\p{Emoji_Modifier}\p{Emoji_Component}\u200D\uFE0F\uFE0E]+$/u
 
   return emojiPattern.test(cleanedStr)
diff --git a/packages/webapp/src/utils/getSupabaseSession.js b/packages/webapp/src/utils/getSupabaseSession.js
@@ -1,42 +1,45 @@
 import { createServerClient } from '@supabase/ssr'
+import { serialize } from 'cookie'
 
 // Use SUPABASE_URL for server-side (container → host) or fallback to NEXT_PUBLIC_SUPABASE_URL (browser)
 const getSupabaseUrl = () => {
   // Server-side: prefer SUPABASE_URL (host.docker.internal) if available
   if (process.env.SUPABASE_URL) {
-    return process.env.SUPABASE_URL;
+    return process.env.SUPABASE_URL
   }
   // Fallback: use NEXT_PUBLIC_SUPABASE_URL (localhost)
-  return process.env.NEXT_PUBLIC_SUPABASE_URL;
-};
+  return process.env.NEXT_PUBLIC_SUPABASE_URL
+}
 
 export async function getSupabaseSession(context) {
   let supabase, session
 
   try {
     if (process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY) {
-      supabase = createServerClient(
-        getSupabaseUrl(),
-        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
-        {
-          cookies: {
-            get(name) {
-              return context.req.cookies[name]
-            },
-            set(name, value, options) {
-              context.res.appendHeader('Set-Cookie', serialize(name, value, options))
-            },
-            remove(name, options) {
-              context.res.appendHeader('Set-Cookie', serialize(name, '', options))
-            }
+      supabase = createServerClient(getSupabaseUrl(), process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY, {
+        cookies: {
+          get(name) {
+            return context.req.cookies[name]
+          },
+          set(name, value, options) {
+            context.res.appendHeader('Set-Cookie', serialize(name, value, options))
+          },
+          remove(name, options) {
+            context.res.appendHeader('Set-Cookie', serialize(name, '', options))
           }
         }
-      )
+      })
 
       // Verify user authentication first (server-validated)
-      const { data: { user }, error: userError } = await supabase.auth.getUser()
-
-      console.log('user==========================================supabase.auth.getUser', {user, userError})
+      const {
+        data: { user },
+        error: userError
+      } = await supabase.auth.getUser()
+
+      console.log('user==========================================supabase.auth.getUser', {
+        user,
+        userError
+      })
 
       if (user && !userError) {
         // User is authenticated, safe to get session

Original file line number	Diff line number	Diff line change
`@@ -26,8 +26,7 @@ const customJestConfig = {`
`26`	`26`	`'^@config$': '<rootDir>/src/config/index.ts',`
`27`	`27`	`'^@helpers$': '<rootDir>/src/lib/helpers/index.ts'`
`28`	`28`	`},`
`29`		`- moduleDirectories: ['node_modules', '<rootDir>/'],`
`30`		`- setupFilesAfterEnv: ['<rootDir>/jest.setup.js'] // For custom Jest setup`
	`29`	`+ moduleDirectories: ['node_modules', '<rootDir>/']`
`31`	`30`	`}`
`32`	`31`
`33`	`32`	`// Export Jest config`