fix: all lint fixes

Author: hrhv

packages/imagekit-editor-dev/src/components/common/FilterChipsField.tsx

@@ -66,21 +66,13 @@ export const FilterChipsField: React.FC<FilterChipsFieldProps> = ({
   }
 
   return (
-    <HStack
-      as="fieldset"
-      id={id}
-      role="group"
-      align="center"
-      spacing="2"
-      wrap="wrap"
-    >
+    <HStack as="fieldset" id={id} align="center" spacing="2" wrap="wrap">
       {options.map((opt) => {
         const isChecked = safeValue.includes(opt.value)
         const disabled = opt.isDisabled || (!isChecked && isMaxed)
         return (
           <Box
             key={opt.value}
-            role="checkbox"
             aria-checked={isChecked}
             aria-disabled={disabled || undefined}
             tabIndex={disabled ? -1 : 0}

packages/imagekit-editor-dev/src/components/common/MultiSelectListField.tsx

@@ -7,8 +7,6 @@ import {
   HStack,
   Icon,
   Input,
-  InputGroup,
-  InputLeftElement,
   Text,
 } from "@chakra-ui/react"
 import { PiMagnifyingGlass } from "@react-icons/all-files/pi/PiMagnifyingGlass"
@@ -150,7 +148,6 @@ export const MultiSelectListField: React.FC<MultiSelectListFieldProps> = ({
   return (
     <Box
       id={id}
-      role="group"
       borderWidth="0"
       borderRadius="md"
       overflow="hidden"

packages/imagekit-editor-dev/src/components/header/TemplateNameInput.tsx

@@ -1,5 +1,6 @@
 import { Input } from "@chakra-ui/react"
-import React, { useEffect, useRef, useState } from "react"
+import type React from "react"
+import { useEffect, useRef, useState } from "react"
 import { useEditorStore } from "../../store"
 
 const UNTITLED = "Untitled Template"

packages/imagekit-editor-dev/src/components/header/TemplateStatus.tsx

@@ -13,7 +13,7 @@ import {
 import { IoMdCloudDone } from "@react-icons/all-files/io/IoMdCloudDone"
 import { MdSync } from "@react-icons/all-files/md/MdSync"
 import { MdSyncProblem } from "@react-icons/all-files/md/MdSyncProblem"
-import React, { useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { useTemplateStorage } from "../../context/TemplateStorageContext"
 import { useEditorStore } from "../../store"
 

packages/imagekit-editor-dev/src/components/header/TemplatesDropdown.tsx

@@ -31,7 +31,7 @@ import { PiPlus } from "@react-icons/all-files/pi/PiPlus"
 import { PiPushPin } from "@react-icons/all-files/pi/PiPushPin"
 import { PiPushPinFill } from "@react-icons/all-files/pi/PiPushPinFill"
 import { PiSquaresFourLight } from "@react-icons/all-files/pi/PiSquaresFourLight"
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useTemplateStorage } from "../../context/TemplateStorageContext"
 import type { TemplateRecord } from "../../storage"
 import { useEditorStore } from "../../store"
@@ -87,8 +87,6 @@ export function TemplatesDropdown({
     }
   }, [syncStatus, fetchTemplates])
 
-  if (!provider) return null
-
   const activeTemplate = templateId
     ? (templates.find((t) => t.id === templateId) ?? null)
     : null
@@ -123,6 +121,8 @@ export function TemplatesDropdown({
       .slice(0, MAX_VISIBLE)
   }, [templates, templateId, search])
 
+  if (!provider) return null
+
   const doLoadTemplate = (record: TemplateRecord) => {
     loadTemplate(record.transformations)
     setTemplateName(record.name)
@@ -376,7 +376,6 @@ export function TemplatesDropdown({
                     _hover={{ bg: "editorGray.100" }}
                     onClick={() => handleSelect(record)}
                     transition="background-color 0.15s"
-                    role="group"
                   >
                     {/* Visibility Icon */}
                     <Icon

packages/imagekit-editor-dev/src/components/templates/TemplatesLibraryView.tsx

@@ -66,8 +66,6 @@ export function TemplatesLibraryView({ onClose }: Props) {
   const { loadTemplate, setTemplateName, setTemplateId, resetToNewTemplate } =
     useEditorStore()
   const templateId = useEditorStore((s) => s.templateId)
-  const templateName = useEditorStore((s) => s.templateName)
-  const transformations = useEditorStore((s) => s.transformations)
   const isPristine = useEditorStore((s) => s.isPristine)
   const syncStatus = useEditorStore((s) => s.syncStatus)
 
@@ -92,10 +90,6 @@ export function TemplatesLibraryView({ onClose }: Props) {
     ? (templates.find((t) => t.id === templateId) ?? null)
     : null
 
-  const currentTransformCount = activeTemplate
-    ? activeTemplate.transformations.length
-    : transformations.length
-
   const uniqueCreators = useMemo(() => {
     const seen = new Map<string, { name: string; email: string }>()
     for (const t of templates) {

packages/imagekit-editor-dev/src/context/TemplateStorageContext.tsx

@@ -1,4 +1,5 @@
-import React, { createContext, useContext } from "react"
+import type React from "react"
+import { createContext, useContext } from "react"
 import type { TemplateStorageProvider } from "../storage"
 
 const TemplateStorageContext = createContext<TemplateStorageProvider | null>(