chore: OPTIC-1154: biome linting tweaks

web/apps/labelstudio/src/app/App.jsx

@@ -1,7 +1,6 @@
 /* global Sentry */
 
 import { createBrowserHistory } from "history";
-import React from "react";
 import { render } from "react-dom";
 import { Router } from "react-router-dom";
 import { LEAVE_BLOCKER_KEY, leaveBlockerCallback } from "../components/LeaveBlocker/LeaveBlocker";

web/apps/labelstudio/src/app/AsyncPage/AsyncPage.jsx

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
 import { useHistory } from "react-router";
 import { ErrorWrapper } from "../../components/Error/Error";
 import { modal } from "../../components/Modal/Modal";

web/apps/labelstudio/src/app/RootPage.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Menubar } from "../components/Menubar/Menubar";
 import { ProjectRoutes } from "../routes/ProjectRoutes";
 

web/apps/labelstudio/src/components/Breadcrumbs/Breadcrumbs.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { NavLink } from "react-router-dom";
 import { useConfig } from "../../providers/ConfigProvider";
 import { useBreadcrumbs, useFindRouteComponent } from "../../providers/RoutesProvider";

web/apps/labelstudio/src/components/Card/Card.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { cn } from "../../utils/bem";
 import "./Card.scss";
 

web/apps/labelstudio/src/components/CopyableTooltip/CopyableTooltip.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Children, cloneElement, forwardRef, useCallback } from "react";
 import { useCopyText } from "../../hooks/useCopyText";
 import { Tooltip } from "../Tooltip/Tooltip";

web/apps/labelstudio/src/components/DescriptionList/DescriptionList.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { cn } from "../../utils/bem";
 import "./DescriptionList.scss";
 import { IconInfoOutline } from "../../assets/icons";

web/apps/labelstudio/src/components/Divider/Divider.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export const Divider = ({ height }) => {
   return <div style={{ height: height }} />;
 };

web/apps/labelstudio/src/components/Dropdown/DropdownComponent.jsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { cloneElement, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import { Block, cn } from "../../utils/bem";
 import { alignElements } from "../../utils/dom";

web/apps/labelstudio/src/components/Dropdown/DropdownTrigger.jsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   Children,
   cloneElement,
   forwardRef,

web/apps/labelstudio/src/components/Error/Error.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useMemo, useState } from "react";
+import { Fragment, useCallback, useMemo, useState } from "react";
 import sanitizeHtml from "sanitize-html";
 import { LsSlack } from "../../assets/icons";
 import { Block, Elem } from "../../utils/bem";

web/apps/labelstudio/src/components/Form/Elements/Input/Input.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { cn } from "../../../../utils/bem";
 import { FormField } from "../../FormField";
 import { default as Label } from "../Label/Label";

web/apps/labelstudio/src/components/Form/Elements/Label/Label.jsx

@@ -1,4 +1,4 @@
-import React, { createElement } from "react";
+import { createElement } from "react";
 import { cn } from "../../../../utils/bem";
 import "./Label.scss";
 

web/apps/labelstudio/src/components/Form/Elements/RadioGroup/RadioGroup.jsx

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
 import { Label } from "..";
 import { BemWithSpecifiContext } from "../../../../utils/bem";
 import { FormField } from "../../FormField";

web/apps/labelstudio/src/components/Form/Elements/Select/Select.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { cn } from "../../../../utils/bem";
 import { FormField } from "../../FormField";
 import { default as Label } from "../Label/Label";

web/apps/labelstudio/src/components/Form/Elements/TextArea/TextArea.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { cn } from "../../../../utils/bem";
 import { FormField } from "../../FormField";
 import { default as Label } from "../Label/Label";

web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useMemo } from "react";
+import { forwardRef, useEffect, useMemo } from "react";
 import { cn } from "../../../../utils/bem";
 import { FormField } from "../../FormField";
 import { useValueTracker } from "../../Utils";

web/apps/labelstudio/src/components/Form/Elements/ToggleRight/ToggleRight.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useMemo } from "react";
+import { forwardRef, useEffect, useMemo } from "react";
 import { cn } from "../../../../utils/bem";
 import { FormField } from "../../FormField";
 import { useValueTracker } from "../../Utils";

web/apps/labelstudio/src/components/Hamburger/Hamburger.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { cn } from "../../utils/bem";
 import "./Hamburger.scss";
 

web/apps/labelstudio/src/components/HeidiTips/HeidiTips.tsx

@@ -1,7 +1,7 @@
 import { type FC, memo, useCallback, useState } from "react";
 import type { HeidiTipsProps } from "./types";
 import { HeidiTip } from "./HeidiTip";
-import { dismissTip, getRandomTip, isTipDismissed } from "./utils";
+import { dismissTip, getRandomTip } from "./utils";
 
 export const HeidiTips: FC<HeidiTipsProps> = memo(({ collection }) => {
   const [tip, setTip] = useState(getRandomTip(collection));

web/apps/labelstudio/src/components/Menu/MenuItem.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { NavLink } from "react-router-dom";
 import { cn } from "../../utils/bem";
 import { absoluteURL } from "../../utils/helpers";

web/apps/labelstudio/src/components/Modal/Modal.jsx

@@ -1,4 +1,4 @@
-import React, { createRef } from "react";
+import { createRef } from "react";
 import { render, unmountComponentAtNode } from "react-dom";
 import { ApiProvider } from "../../providers/ApiProvider";
 import { ConfigProvider } from "../../providers/ConfigProvider";

web/apps/labelstudio/src/components/SidebarMenu/SidebarMenu.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { cn } from "../../utils/bem";
 import { Menu } from "../Menu/Menu";
 import "./SidebarMenu.scss";

web/apps/labelstudio/src/components/Space/Space.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { BemWithSpecifiContext } from "../../utils/bem";
 import "./Space.scss";
 

web/apps/labelstudio/src/components/Spinner/Spinner.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { cn } from "../../utils/bem";
 import "./Spinner.scss";
 

web/apps/labelstudio/src/components/ToggleItems/ToggleItems.tsx

@@ -1,4 +1,4 @@
-import React, { type CSSProperties } from "react";
+import type { CSSProperties } from "react";
 import { cn } from "../../utils/bem";
 import "./ToggleItems.scss";
 

web/apps/labelstudio/src/components/VersionNotifier/VersionNotifier.jsx

@@ -1,5 +1,5 @@
 import { format } from "date-fns";
-import React, { createContext, useCallback, useContext, useEffect, useReducer } from "react";
+import { createContext, useCallback, useContext, useEffect, useReducer } from "react";
 import { Link } from "react-router-dom";
 import { useAPI } from "../../providers/ApiProvider";
 import { Block, Elem } from "../../utils/bem";

web/apps/labelstudio/src/pages/CreateProject/Config/Preview.jsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { Spinner } from "../../../components";
 import { cn } from "../../../utils/bem";
 import { FF_DEV_3617, isFF } from "../../../utils/feature-flags";

web/apps/labelstudio/src/pages/CreateProject/Config/UnsavedChanges.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { Button } from "../../../components";
 import { LeaveBlocker, type LeaveBlockerCallbacks } from "../../../components/LeaveBlocker/LeaveBlocker";
 import { modal } from "../../../components/Modal/Modal";

web/apps/labelstudio/src/pages/ExportPage/ExportPage.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useHistory } from "react-router";
 import { Button } from "../../components";
 import { Form, Input } from "../../components/Form";

web/apps/labelstudio/src/pages/Organization/PeoplePage/PeopleList.jsx

@@ -5,7 +5,6 @@ import { usePage, usePageSize } from "../../../components/Pagination/Pagination"
 import { useAPI } from "../../../providers/ApiProvider";
 import { Block, Elem } from "../../../utils/bem";
 import { isDefined } from "../../../utils/helpers";
-import { useUpdateEffect } from "../../../utils/hooks";
 import "./PeopleList.scss";
 import { CopyableTooltip } from "../../../components/CopyableTooltip/CopyableTooltip";
 

web/apps/labelstudio/src/pages/Organization/index.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { SidebarMenu } from "../../components/SidebarMenu/SidebarMenu";
 import { PeoplePage } from "./PeoplePage/PeoplePage";
 import { WebhookPage } from "../WebhookPage/WebhookPage";

web/apps/labelstudio/src/pages/Projects/ProjectsList.jsx

@@ -1,6 +1,6 @@
 import chr from "chroma-js";
 import { format } from "date-fns";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { NavLink } from "react-router-dom";
 import { LsBulb, LsCheck, LsEllipsis, LsMinus } from "../../assets/icons";
 import { Button, Dropdown, Menu, Pagination, Userpic } from "../../components";

web/apps/labelstudio/src/pages/Settings/AnnotationSettings/ModelVersionSelector.jsx

@@ -1,6 +1,6 @@
 import { useCallback, useContext, useEffect, useState } from "react";
 import { useAPI } from "../../../providers/ApiProvider";
-import { Label, Select } from "../../../components/Form";
+import { Select } from "../../../components/Form";
 import { ProjectContext } from "../../../providers/ProjectProvider";
 
 export const ModelVersionSelector = ({

web/apps/labelstudio/src/pages/Settings/DangerZone.jsx

@@ -3,7 +3,6 @@ import { useHistory } from "react-router";
 import { Button } from "../../components";
 import { Label } from "../../components/Form";
 import { confirm } from "../../components/Modal/Modal";
-import { Space } from "../../components/Space/Space";
 import { Spinner } from "../../components/Spinner/Spinner";
 import { useAPI } from "../../providers/ApiProvider";
 import { useProject } from "../../providers/ProjectProvider";

web/apps/labelstudio/src/pages/Settings/GeneralSettings.jsx

@@ -1,9 +1,9 @@
-import React, { useCallback, useContext } from "react";
+import { useCallback, useContext } from "react";
 import { Button } from "../../components";
-import { Form, Input, Label, Select, TextArea } from "../../components/Form";
+import { Form, Input, Select, TextArea } from "../../components/Form";
 import { RadioGroup } from "../../components/Form/Elements/RadioGroup/RadioGroup";
 import { ProjectContext } from "../../providers/ProjectProvider";
-import { Block, cn, Elem } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { EnterpriseBadge } from "../../components/Badges/Enterprise";
 import "./settings.scss";
 import { HeidiTips } from "../../components/HeidiTips/HeidiTips";

web/apps/labelstudio/src/pages/Settings/PredictionsSettings/PredictionsList.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from "react";
+import { useCallback, useContext } from "react";
 
 import { format, formatDistanceToNow, parseISO } from "date-fns";
 import { IconInfoOutline, IconPredictions, LsEllipsis } from "../../../assets/icons";

web/apps/labelstudio/src/pages/Settings/PredictionsSettings/PredictionsSettings.jsx

@@ -2,14 +2,12 @@ import { useCallback, useContext, useEffect, useState } from "react";
 import { Description } from "../../../components/Description/Description";
 import { Divider } from "../../../components/Divider/Divider";
 import { EmptyState } from "../../../components/EmptyState/EmptyState";
-import { Caption } from "../../../components/Caption/Caption";
 import { IconPredictions } from "../../../assets/icons";
 import { useAPI } from "../../../providers/ApiProvider";
 import { ProjectContext } from "../../../providers/ProjectProvider";
 import { Spinner } from "../../../components/Spinner/Spinner";
 import { PredictionsList } from "./PredictionsList";
 import { Block, Elem } from "../../../utils/bem";
-import { Label } from "../../../components/Form";
 import "./PredictionsSettings.scss";
 
 export const PredictionsSettings = () => {

web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageSettings.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Columns } from "../../../components/Columns/Columns";
 import { Description } from "../../../components/Description/Description";
 import { Block, cn } from "../../../utils/bem";

web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageSummary.jsx

@@ -1,5 +1,4 @@
 import { format } from "date-fns/esm";
-import { React } from "react";
 import { Button } from "../../../components";
 import { DescriptionList } from "../../../components/DescriptionList/DescriptionList";
 import { Tooltip } from "../../../components/Tooltip/Tooltip";

web/apps/labelstudio/src/pages/Settings/index.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { SidebarMenu } from "../../components/SidebarMenu/SidebarMenu";
 import { WebhookPage } from "../WebhookPage/WebhookPage";
 import { DangerZone } from "./DangerZone";

web/apps/labelstudio/src/pages/WebhookPage/WebhookDeleteModal.jsx

@@ -1,12 +1,8 @@
-import React from "react";
-
 import { Button } from "../../components";
-import { Elem } from "../../components/Menu/MenuContext";
 import { modal } from "../../components/Modal/Modal";
 import { useModalControls } from "../../components/Modal/ModalPopup";
 import { Space } from "../../components/Space/Space";
-import { useAPI } from "../../providers/ApiProvider";
-import { Block, cn } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 
 export const WebhookDeleteModal = ({ onDelete }) => {
   return modal({

web/apps/labelstudio/src/pages/WebhookPage/WebhookDetail.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Button } from "../../components";
 import { Form, Input, Label, Toggle } from "../../components/Form";
 import { Block, cn, Elem } from "../../utils/bem";
@@ -8,10 +8,7 @@ import { useAPI } from "../../providers/ApiProvider";
 import "./WebhookPage.scss";
 import { Space } from "../../components/Space/Space";
 import { useProject } from "../../providers/ProjectProvider";
-import { modal } from "../../components/Modal/Modal";
-import { useModalControls } from "../../components/Modal/ModalPopup";
 import { WebhookDeleteModal } from "./WebhookDeleteModal";
-import { format } from "date-fns";
 
 const WebhookDetail = ({ webhook, webhooksInfo, fetchWebhooks, onBack, onSelectActive }) => {
   // if webhook === null - create mod

web/apps/labelstudio/src/pages/WebhookPage/WebhookList.jsx

@@ -1,14 +1,12 @@
-import React, { useCallback } from "react";
-import { LsCross, LsPencil, LsPlus } from "../../assets/icons";
+import { useCallback } from "react";
+import { LsCross, LsPencil } from "../../assets/icons";
 import { Button } from "../../components";
-import { Form, Input, Label, Toggle } from "../../components/Form";
-import { modal } from "../../components/Modal/Modal";
+import { Toggle } from "../../components/Form";
 import { Block, Elem } from "../../utils/bem";
 import "./WebhookPage.scss";
 import { format } from "date-fns";
 import { useAPI } from "../../providers/ApiProvider";
 import { WebhookDeleteModal } from "./WebhookDeleteModal";
-import { useProject } from "../../providers/ProjectProvider";
 
 const WebhookList = ({ onSelectActive, onAddWebhook, webhooks, fetchWebhooks }) => {
   const api = useAPI();

web/apps/labelstudio/src/pages/WebhookPage/WebhookPage.jsx

@@ -1,12 +1,11 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { useAPI } from "../../providers/ApiProvider";
 import "./WebhookPage.scss";
 
 import WebhookList from "./WebhookList";
 import WebhookDetail from "./WebhookDetail";
 import { useProject } from "../../providers/ProjectProvider";
-import { Button, Spinner } from "../../components";
 import { Block, Elem } from "../../utils/bem";
 import { IconInfo } from "../../assets/icons";
 import { useHistory } from "react-router";

web/apps/labelstudio/src/routes/ProjectRoutes.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useRoutesMap } from "../providers/RoutesProvider";
 import { resolveRoutes } from "../utils/routeHelpers";
 import { RouteWithStaticFallback } from "./RouteWithStaticFallback";

web/apps/labelstudio/src/utils/hooks.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useHistory } from "react-router";
 import { useFixedLocation } from "../providers/RoutesProvider";
 

web/biome.json

@@ -54,7 +54,13 @@
       "correctness": {
         "useExhaustiveDependencies": "off",
         "noChildrenProp": "off",
-        "useJsxKeyInIterable": "off"
+        "useJsxKeyInIterable": "off",
+        "noUnusedImports": {
+          "level": "warn"
+        },
+        "noUnusedVariables": {
+          "level": "warn"
+        }
       },
       "performance": {
         "noAccumulatingSpread": "off",

web/libs/datamanager/src/components/CellViews/BooleanCell.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Tag } from "../Common/Tag/Tag";
 
 const parseBoolean = (value) => {

web/libs/datamanager/src/components/Common/Button/Button.jsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, forwardRef, useMemo } from "react";
+import { cloneElement, forwardRef, useMemo } from "react";
 import { Block, Elem } from "../../../utils/bem";
 import { FF_LOPS_E_10, isFF } from "../../../utils/feature-flags";
 import { isDefined } from "../../../utils/utils";

web/libs/datamanager/src/components/Common/ErrorBox.jsx

@@ -1,5 +1,4 @@
 import { inject } from "mobx-react";
-import React from "react";
 import { RiErrorWarningFill } from "react-icons/ri";
 import { Button } from "./Button/Button";
 import { Dropdown } from "./Dropdown/Dropdown";

web/libs/datamanager/src/components/Common/Form/Elements/RadioGroup/RadioGroup.jsx

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
 import { Label } from "..";
 import { BemWithSpecifiContext } from "../../../../utils/bem";
 import { FormField } from "../../FormField";

web/libs/datamanager/src/components/Common/Modal/Modal.jsx

@@ -1,4 +1,4 @@
-import React, { createRef } from "react";
+import { createRef } from "react";
 import { render } from "react-dom";
 import { cn } from "../../../utils/bem";
 import { Button } from "../Button/Button";

web/libs/datamanager/src/components/Common/SDKButtons.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useSDK } from "../../providers/SDKProvider";
 import { Button } from "./Button/Button";
 

web/libs/datamanager/src/components/Common/Select/Select.jsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   Children,
   cloneElement,
   createContext,

web/libs/datamanager/src/components/Common/SkeletonLoader/SkeletonLoader.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactChildren } from "react";
+import type { ReactChildren } from "react";
 import "./SkeletonLoader.scss";
 import { Block } from "../../../utils/bem";
 import { SkeletonLine } from "./SkeletonLine";