chore: lint require and how to import react (#30041)

web/app/components/app-sidebar/app-info.tsx

@@ -13,7 +13,8 @@ import {
 } from '@remixicon/react'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/navigation'
-import React, { useCallback, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view'

web/app/components/app-sidebar/app-sidebar-dropdown.tsx

@@ -3,7 +3,8 @@ import {
   RiEqualizer2Line,
   RiMenuLine,
 } from '@remixicon/react'
-import React, { useCallback, useRef, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import {

web/app/components/app-sidebar/basic.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   ApiAggregate,

web/app/components/app-sidebar/dataset-info/dropdown.tsx

@@ -1,7 +1,8 @@
 import type { DataSet } from '@/models/datasets'
 import { RiMoreFill } from '@remixicon/react'
 import { useRouter } from 'next/navigation'
-import React, { useCallback, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'

web/app/components/app-sidebar/dataset-info/index.spec.tsx

@@ -2,7 +2,7 @@ import type { DataSet } from '@/models/datasets'
 import { RiEditLine } from '@remixicon/react'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import React from 'react'
+import * as React from 'react'
 import {
   ChunkingMode,
   DatasetPermission,

web/app/components/app-sidebar/dataset-info/index.tsx

@@ -1,7 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import type { DataSet } from '@/models/datasets'
-import React, { useMemo } from 'react'
+import * as React from 'react'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useKnowledge } from '@/hooks/use-knowledge'

web/app/components/app-sidebar/dataset-info/menu-item.tsx

@@ -1,5 +1,5 @@
 import type { RemixiconComponentType } from '@remixicon/react'
-import React from 'react'
+import * as React from 'react'
 
 type MenuItemProps = {
   name: string

web/app/components/app-sidebar/dataset-info/menu.tsx

@@ -1,5 +1,5 @@
 import { RiDeleteBinLine, RiEditLine, RiFileDownloadLine } from '@remixicon/react'
-import React from 'react'
+import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import Divider from '../../base/divider'

web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx

@@ -3,7 +3,8 @@ import type { DataSet } from '@/models/datasets'
 import {
   RiMenuLine,
 } from '@remixicon/react'
-import React, { useCallback, useRef, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   PortalToFollowElem,

web/app/components/app-sidebar/index.tsx

@@ -1,7 +1,8 @@
 import type { NavIcon } from './navLink'
 import { useHover, useKeyPress } from 'ahooks'
 import { usePathname } from 'next/navigation'
-import React, { useCallback, useEffect, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useEventEmitterContextContext } from '@/context/event-emitter'

web/app/components/app-sidebar/navLink.spec.tsx

@@ -1,6 +1,6 @@
 import type { NavLinkProps } from './navLink'
 import { render, screen } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import NavLink from './navLink'
 
 // Mock Next.js navigation

web/app/components/app-sidebar/navLink.tsx

@@ -2,7 +2,7 @@
 import type { RemixiconComponentType } from '@remixicon/react'
 import Link from 'next/link'
 import { useSelectedLayoutSegment } from 'next/navigation'
-import React from 'react'
+import * as React from 'react'
 import { cn } from '@/utils/classnames'
 
 export type NavIcon = React.ComponentType<

web/app/components/app-sidebar/sidebar-animation-issues.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 
 // Simple Mock Components that reproduce the exact UI issues
 const MockNavLink = ({ name, mode }: { name: string, mode: string }) => {

web/app/components/app-sidebar/text-squeeze-fix-verification.spec.tsx

@@ -4,7 +4,7 @@
  */
 
 import { render } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 
 // Mock Next.js navigation
 vi.mock('next/navigation', () => ({

web/app/components/app-sidebar/toggle-button.tsx

@@ -1,5 +1,5 @@
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
-import React from 'react'
+import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/utils/classnames'
 import Button from '../base/button'