chore(web): new lint setup (#30020)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>

web/app/components/workflow/nodes/assigner/components/operation-selector.tsx

@@ -1,20 +1,20 @@
 import type { FC } from 'react'
-import { useState } from 'react'
+import type { WriteMode } from '../types'
+import type { VarType } from '@/app/components/workflow/types'
 import {
   RiArrowDownSLine,
   RiCheckLine,
 } from '@remixicon/react'
-import { cn } from '@/utils/classnames'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import type { WriteMode } from '../types'
-import { getOperationItems } from '../utils'
+import Divider from '@/app/components/base/divider'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import type { VarType } from '@/app/components/workflow/types'
-import Divider from '@/app/components/base/divider'
+import { cn } from '@/utils/classnames'
+import { getOperationItems } from '../utils'
 
 type Item = {
   value: string | number
@@ -58,19 +58,16 @@ const OperationSelector: FC<OperationSelectorProps> = ({
     <PortalToFollowElem
       open={open}
       onOpenChange={setOpen}
-      placement='bottom-start'
+      placement="bottom-start"
       offset={4}
     >
       <PortalToFollowElemTrigger
         onClick={() => !disabled && setOpen(v => !v)}
       >
         <div
-          className={cn('flex items-center gap-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1',
-            disabled ? 'cursor-not-allowed !bg-components-input-bg-disabled' : 'cursor-pointer hover:bg-state-base-hover-alt',
-            open && 'bg-state-base-hover-alt',
-            className)}
+          className={cn('flex items-center gap-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1', disabled ? 'cursor-not-allowed !bg-components-input-bg-disabled' : 'cursor-pointer hover:bg-state-base-hover-alt', open && 'bg-state-base-hover-alt', className)}
         >
-          <div className='flex items-center p-1'>
+          <div className="flex items-center p-1">
             <span
               className={`system-sm-regular overflow-hidden truncate text-ellipsis
                 ${selectedItem ? 'text-components-input-text-filled' : 'text-components-input-text-disabled'}`}
@@ -83,36 +80,35 @@ const OperationSelector: FC<OperationSelectorProps> = ({
       </PortalToFollowElemTrigger>
 
       <PortalToFollowElemContent className={`z-20 ${popupClassName}`}>
-        <div className='flex w-[140px] flex-col items-start rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
-          <div className='flex flex-col items-start self-stretch p-1'>
-            <div className='flex items-start self-stretch px-3 pb-0.5 pt-1'>
-              <div className='system-xs-medium-uppercase flex grow text-text-tertiary'>{t(`${i18nPrefix}.operations.title`)}</div>
+        <div className="flex w-[140px] flex-col items-start rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
+          <div className="flex flex-col items-start self-stretch p-1">
+            <div className="flex items-start self-stretch px-3 pb-0.5 pt-1">
+              <div className="system-xs-medium-uppercase flex grow text-text-tertiary">{t(`${i18nPrefix}.operations.title`)}</div>
             </div>
             {items.map(item => (
               item.value === 'divider'
                 ? (
-                  <Divider key="divider" className="my-1" />
-                )
+                    <Divider key="divider" className="my-1" />
+                  )
                 : (
-                  <div
-                    key={item.value}
-                    className={cn('flex items-center gap-1 self-stretch rounded-lg px-2 py-1',
-                      'cursor-pointer hover:bg-state-base-hover')}
-                    onClick={() => {
-                      onSelect(item)
-                      setOpen(false)
-                    }}
-                  >
-                    <div className='flex min-h-5 grow items-center gap-1 px-1'>
-                      <span className={'system-sm-medium flex grow text-text-secondary'}>{t(`${i18nPrefix}.operations.${item.name}`)}</span>
-                    </div>
-                    {item.value === value && (
-                      <div className='flex items-center justify-center'>
-                        <RiCheckLine className='h-4 w-4 text-text-accent' />
+                    <div
+                      key={item.value}
+                      className={cn('flex items-center gap-1 self-stretch rounded-lg px-2 py-1', 'cursor-pointer hover:bg-state-base-hover')}
+                      onClick={() => {
+                        onSelect(item)
+                        setOpen(false)
+                      }}
+                    >
+                      <div className="flex min-h-5 grow items-center gap-1 px-1">
+                        <span className="system-sm-medium flex grow text-text-secondary">{t(`${i18nPrefix}.operations.${item.name}`)}</span>
                       </div>
-                    )}
-                  </div>
-                )
+                      {item.value === value && (
+                        <div className="flex items-center justify-center">
+                          <RiCheckLine className="h-4 w-4 text-text-accent" />
+                        </div>
+                      )}
+                    </div>
+                  )
             ))}
           </div>
         </div>

web/app/components/workflow/nodes/assigner/components/var-list/index.tsx

@@ -1,23 +1,23 @@
 'use client'
 import type { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import React, { useCallback } from 'react'
-import { produce } from 'immer'
-import { RiDeleteBinLine } from '@remixicon/react'
-import OperationSelector from '../operation-selector'
-import { AssignerNodeInputType, WriteMode } from '../../types'
 import type { AssignerNodeOperation } from '../../types'
-import ListNoDataPlaceholder from '@/app/components/workflow/nodes/_base/components/list-no-data-placeholder'
-import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
-import { VarType } from '@/app/components/workflow/types'
-import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import { RiDeleteBinLine } from '@remixicon/react'
+import { produce } from 'immer'
+import { noop } from 'lodash-es'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
-import { noop } from 'lodash-es'
+import ListNoDataPlaceholder from '@/app/components/workflow/nodes/_base/components/list-no-data-placeholder'
+import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import BoolValue from '@/app/components/workflow/panel/chat-variable-panel/components/bool-value'
+import { VarType } from '@/app/components/workflow/types'
+import { AssignerNodeInputType, WriteMode } from '../../types'
+import OperationSelector from '../operation-selector'
 
 type Props = {
   readonly: boolean
@@ -105,7 +105,8 @@ const VarList: FC<Props> = ({
   const handleFilterToAssignedVar = useCallback((index: number) => {
     return (payload: Var) => {
       const { variable_selector, operation } = list[index]
-      if (!variable_selector || !operation || !filterToAssignedVar) return true
+      if (!variable_selector || !operation || !filterToAssignedVar)
+        return true
 
       const assignedVarType = getAssignedVarType?.(variable_selector)
       const isSameVariable = Array.isArray(variable_selector) && variable_selector.join('.') === `${payload.nodeId}.${payload.variable}`
@@ -123,7 +124,7 @@ const VarList: FC<Props> = ({
   }
 
   return (
-    <div className='flex flex-col items-start gap-4 self-stretch'>
+    <div className="flex flex-col items-start gap-4 self-stretch">
       {list.map((item, index) => {
         const assignedVarType = item.variable_selector ? getAssignedVarType?.(item.variable_selector) : undefined
         const toAssignedVarType = (assignedVarType && item.operation && getToAssignedVarType)
@@ -131,9 +132,9 @@ const VarList: FC<Props> = ({
           : undefined
 
         return (
-          <div className='flex items-start gap-1 self-stretch' key={index}>
-            <div className='flex grow flex-col items-start gap-1'>
-              <div className='flex items-center gap-1 self-stretch'>
+          <div className="flex items-start gap-1 self-stretch" key={index}>
+            <div className="flex grow flex-col items-start gap-1">
+              <div className="flex items-center gap-1 self-stretch">
                 <VarReferencePicker
                   readonly={readonly}
                   nodeId={nodeId}
@@ -144,12 +145,12 @@ const VarList: FC<Props> = ({
                   filterVar={filterVar}
                   placeholder={t('workflow.nodes.assigner.selectAssignedVariable') as string}
                   minWidth={352}
-                  popupFor='assigned'
-                  className='w-full'
+                  popupFor="assigned"
+                  className="w-full"
                 />
                 <OperationSelector
                   value={item.operation}
-                  placeholder='Operation'
+                  placeholder="Operation"
                   disabled={!item.variable_selector || item.variable_selector.length === 0}
                   onSelect={handleOperationChange(index, assignedVarType!)}
                   assignedVarType={assignedVarType}
@@ -172,11 +173,10 @@ const VarList: FC<Props> = ({
                     valueTypePlaceHolder={toAssignedVarType}
                     placeholder={t('workflow.nodes.assigner.setParameter') as string}
                     minWidth={352}
-                    popupFor='toAssigned'
-                    className='w-full'
+                    popupFor="toAssigned"
+                    className="w-full"
                   />
-                )
-              }
+                )}
               {item.operation === WriteMode.set && assignedVarType && (
                 <>
                   {assignedVarType === 'number' && (
@@ -184,14 +184,14 @@ const VarList: FC<Props> = ({
                       type="number"
                       value={item.value as number}
                       onChange={e => handleToAssignedVarChange(index)(Number(e.target.value))}
-                      className='w-full'
+                      className="w-full"
                     />
                   )}
                   {assignedVarType === 'string' && (
                     <Textarea
                       value={item.value as string}
                       onChange={e => handleToAssignedVarChange(index)(e.target.value)}
-                      className='w-full'
+                      className="w-full"
                     />
                   )}
                   {assignedVarType === 'boolean' && (
@@ -205,28 +205,29 @@ const VarList: FC<Props> = ({
                       value={item.value as string}
                       language={CodeLanguage.json}
                       onChange={value => handleToAssignedVarChange(index)(value)}
-                      className='w-full'
+                      className="w-full"
                       readOnly={readonly}
                     />
                   )}
                 </>
               )}
               {writeModeTypesNum?.includes(item.operation)
-                && <Input
-                  type="number"
-                  value={item.value as number}
-                  onChange={e => handleToAssignedVarChange(index)(Number(e.target.value))}
-                  placeholder="Enter number value..."
-                  className='w-full'
-                />
-              }
+                && (
+                  <Input
+                    type="number"
+                    value={item.value as number}
+                    onChange={e => handleToAssignedVarChange(index)(Number(e.target.value))}
+                    placeholder="Enter number value..."
+                    className="w-full"
+                  />
+                )}
             </div>
             <ActionButton
-              size='l'
-              className='group shrink-0 hover:!bg-state-destructive-hover'
+              size="l"
+              className="group shrink-0 hover:!bg-state-destructive-hover"
               onClick={handleVarRemove(index)}
             >
-              <RiDeleteBinLine className='h-4 w-4 text-text-tertiary group-hover:text-text-destructive' />
+              <RiDeleteBinLine className="h-4 w-4 text-text-tertiary group-hover:text-text-destructive" />
             </ActionButton>
           </div>
         )

web/app/components/workflow/nodes/assigner/components/var-list/use-var-list.ts

@@ -1,6 +1,6 @@
-import { useCallback } from 'react'
-import { produce } from 'immer'
 import type { AssignerNodeOperation, AssignerNodeType } from '../../types'
+import { produce } from 'immer'
+import { useCallback } from 'react'
 import { AssignerNodeInputType, WriteMode } from '../../types'
 
 type Params = {

web/app/components/workflow/nodes/assigner/default.ts

@@ -1,8 +1,10 @@
 import type { NodeDefault } from '../../types'
-import { type AssignerNodeType, WriteMode } from './types'
-import { genNodeMetaData } from '@/app/components/workflow/utils'
-import { BlockEnum } from '@/app/components/workflow/types'
+import type { AssignerNodeType } from './types'
 import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { genNodeMetaData } from '@/app/components/workflow/utils'
+import { WriteMode } from './types'
+
 const i18nPrefix = 'workflow.errorMsg'
 
 const metaData = genNodeMetaData({

web/app/components/workflow/nodes/assigner/hooks.ts

@@ -1,15 +1,15 @@
+import type {
+  Node,
+  Var,
+} from '../../types'
+import { uniqBy } from 'lodash-es'
 import { useCallback } from 'react'
 import { useNodes } from 'reactflow'
-import { uniqBy } from 'lodash-es'
 import {
   useIsChatMode,
   useWorkflow,
   useWorkflowVariables,
 } from '../../hooks'
-import type {
-  Node,
-  Var,
-} from '../../types'
 import { AssignerNodeInputType, WriteMode } from './types'
 
 export const useGetAvailableVars = () => {

web/app/components/workflow/nodes/assigner/node.tsx

@@ -1,14 +1,15 @@
 import type { FC } from 'react'
-import React from 'react'
-import { useNodes } from 'reactflow'
-import { useTranslation } from 'react-i18next'
 import type { AssignerNodeType } from './types'
+import type { Node, NodeProps } from '@/app/components/workflow/types'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNodes } from 'reactflow'
+import Badge from '@/app/components/base/badge'
 import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
-import { BlockEnum, type Node, type NodeProps } from '@/app/components/workflow/types'
 import {
   VariableLabelInNode,
 } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
-import Badge from '@/app/components/base/badge'
+import { BlockEnum } from '@/app/components/workflow/types'
 
 const i18nPrefix = 'workflow.nodes.assigner'
 
@@ -25,17 +26,17 @@ const NodeComponent: FC<NodeProps<AssignerNodeType>> = ({
 
     if (validOperationItems.length === 0) {
       return (
-        <div className='relative flex flex-col items-start gap-0.5 self-stretch px-3 py-1'>
-          <div className='flex flex-col items-start gap-1 self-stretch'>
-            <div className='flex items-center gap-1 self-stretch rounded-md bg-workflow-block-parma-bg px-[5px] py-1'>
-              <div className='system-xs-medium flex-1 text-text-tertiary'>{t(`${i18nPrefix}.varNotSet`)}</div>
+        <div className="relative flex flex-col items-start gap-0.5 self-stretch px-3 py-1">
+          <div className="flex flex-col items-start gap-1 self-stretch">
+            <div className="flex items-center gap-1 self-stretch rounded-md bg-workflow-block-parma-bg px-[5px] py-1">
+              <div className="system-xs-medium flex-1 text-text-tertiary">{t(`${i18nPrefix}.varNotSet`)}</div>
             </div>
           </div>
         </div>
       )
     }
     return (
-      <div className='relative flex flex-col items-start gap-0.5 self-stretch px-3 py-1'>
+      <div className="relative flex flex-col items-start gap-0.5 self-stretch px-3 py-1">
         {operationItems.map((value, index) => {
           const variable = value.variable_selector
           if (!variable || variable.length === 0)
@@ -49,7 +50,7 @@ const NodeComponent: FC<NodeProps<AssignerNodeType>> = ({
               nodeType={node?.data.type}
               nodeTitle={node?.data.title}
               rightSlot={
-                value.operation && <Badge className='!ml-auto shrink-0' text={t(`${i18nPrefix}.operations.${value.operation}`)} />
+                value.operation && <Badge className="!ml-auto shrink-0" text={t(`${i18nPrefix}.operations.${value.operation}`)} />
               }
             />
           )
@@ -66,13 +67,13 @@ const NodeComponent: FC<NodeProps<AssignerNodeType>> = ({
   const node = isSystem ? nodes.find(node => node.data.type === BlockEnum.Start) : nodes.find(node => node.id === variable[0])
 
   return (
-    <div className='relative flex flex-col items-start gap-0.5 self-stretch px-3 py-1'>
+    <div className="relative flex flex-col items-start gap-0.5 self-stretch px-3 py-1">
       <VariableLabelInNode
         variables={variable}
         nodeType={node?.data.type}
         nodeTitle={node?.data.title}
         rightSlot={
-          writeMode && <Badge className='!ml-auto shrink-0' text={t(`${i18nPrefix}.operations.${writeMode}`)} />
+          writeMode && <Badge className="!ml-auto shrink-0" text={t(`${i18nPrefix}.operations.${writeMode}`)} />
         }
       />
     </div>

web/app/components/workflow/nodes/assigner/panel.tsx

@@ -1,15 +1,15 @@
 import type { FC } from 'react'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
+import type { AssignerNodeType } from './types'
+import type { NodePanelProps } from '@/app/components/workflow/types'
 import {
   RiAddLine,
 } from '@remixicon/react'
-import VarList from './components/var-list'
-import useConfig from './use-config'
-import type { AssignerNodeType } from './types'
-import type { NodePanelProps } from '@/app/components/workflow/types'
-import { useHandleAddOperationItem } from './hooks'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
+import VarList from './components/var-list'
+import { useHandleAddOperationItem } from './hooks'
+import useConfig from './use-config'
 
 const i18nPrefix = 'workflow.nodes.assigner'
 
@@ -37,12 +37,12 @@ const Panel: FC<NodePanelProps<AssignerNodeType>> = ({
   }
 
   return (
-    <div className='flex flex-col items-start self-stretch py-2'>
-      <div className='flex w-full flex-col items-start justify-center gap-1 self-stretch px-4 py-2'>
-        <div className='flex items-start gap-2 self-stretch'>
-          <div className='system-sm-semibold-uppercase flex grow flex-col items-start justify-center text-text-secondary'>{t(`${i18nPrefix}.variables`)}</div>
+    <div className="flex flex-col items-start self-stretch py-2">
+      <div className="flex w-full flex-col items-start justify-center gap-1 self-stretch px-4 py-2">
+        <div className="flex items-start gap-2 self-stretch">
+          <div className="system-sm-semibold-uppercase flex grow flex-col items-start justify-center text-text-secondary">{t(`${i18nPrefix}.variables`)}</div>
           <ActionButton onClick={handleAddOperation}>
-            <RiAddLine className='h-4 w-4 shrink-0 text-text-tertiary' />
+            <RiAddLine className="h-4 w-4 shrink-0 text-text-tertiary" />
           </ActionButton>
         </div>
         <VarList

web/app/components/workflow/nodes/assigner/use-config.ts

@@ -1,20 +1,19 @@
-import { useCallback, useMemo } from 'react'
-import { produce } from 'immer'
-import { useStoreApi } from 'reactflow'
-import { VarType } from '../../types'
 import type { ValueSelector, Var } from '../../types'
-import { WriteMode } from './types'
 import type { AssignerNodeOperation, AssignerNodeType } from './types'
-import { writeModeTypesNum } from './types'
-import { useGetAvailableVars } from './hooks'
-import { convertV1ToV2 } from './utils'
-import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import { produce } from 'immer'
+import { useCallback, useMemo } from 'react'
+import { useStoreApi } from 'reactflow'
 import {
   useIsChatMode,
   useNodesReadOnly,
   useWorkflow,
   useWorkflowVariables,
 } from '@/app/components/workflow/hooks'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import { VarType } from '../../types'
+import { useGetAvailableVars } from './hooks'
+import { WriteMode, writeModeTypesNum } from './types'
+import { convertV1ToV2 } from './utils'
 
 const useConfig = (id: string, rawPayload: AssignerNodeType) => {
   const payload = useMemo(() => convertV1ToV2(rawPayload), [rawPayload])
@@ -75,8 +74,9 @@ const useConfig = (id: string, rawPayload: AssignerNodeType) => {
 
   const getToAssignedVarType = useCallback((assignedVarType: VarType, write_mode: WriteMode) => {
     if (write_mode === WriteMode.overwrite || write_mode === WriteMode.increment || write_mode === WriteMode.decrement
-      || write_mode === WriteMode.multiply || write_mode === WriteMode.divide || write_mode === WriteMode.extend)
+      || write_mode === WriteMode.multiply || write_mode === WriteMode.divide || write_mode === WriteMode.extend) {
       return assignedVarType
+    }
     if (write_mode === WriteMode.append) {
       if (assignedVarType === VarType.arrayString)
         return VarType.string

web/app/components/workflow/nodes/assigner/use-single-run-form-params.ts

@@ -1,13 +1,13 @@
 import type { RefObject } from 'react'
+import type { AssignerNodeType } from './types'
 import type { InputVar, ValueSelector, Variable } from '@/app/components/workflow/types'
 import { useMemo } from 'react'
 import useNodeCrud from '../_base/hooks/use-node-crud'
-import { type AssignerNodeType, WriteMode } from './types'
-import { writeModeTypesNum } from './types'
+import { WriteMode, writeModeTypesNum } from './types'
 
 type Params = {
-  id: string,
-  payload: AssignerNodeType,
+  id: string
+  payload: AssignerNodeType
   runInputData: Record<string, any>
   runInputDataRef: RefObject<Record<string, any>>
   getInputVars: (textList: string[]) => InputVar[]
@@ -26,8 +26,8 @@ const useSingleRunFormParams = ({
 
   const vars = (inputs.items ?? []).filter((item) => {
     return item.operation !== WriteMode.clear && item.operation !== WriteMode.set
-                    && item.operation !== WriteMode.removeFirst && item.operation !== WriteMode.removeLast
-                    && !writeModeTypesNum.includes(item.operation)
+      && item.operation !== WriteMode.removeFirst && item.operation !== WriteMode.removeLast
+      && !writeModeTypesNum.includes(item.operation)
   }).map(item => item.value as ValueSelector)
 
   const forms = useMemo(() => {