chore(lint - import/order): treat ui5wcr imports as internal (#8167)

Lukas742 · web-flow · commit 1bc625b05355 · 2026-02-04T09:12:32.000Z
Before, wcr imports where treated differently if `dist` folders were
present or not.
diff --git a/.storybook/components/ProjectTemplate.tsx b/.storybook/components/ProjectTemplate.tsx
@@ -12,7 +12,6 @@ import {
   Text,
   ThemeProvider,
 } from '@ui5/webcomponents-react';
-// eslint-disable-next-line import/order
 import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/internal/utils';
 import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
diff --git a/cypress/support/commands.tsx b/cypress/support/commands.tsx
@@ -1,5 +1,5 @@
-import type { ThemeProviderPropTypes } from '@ui5/webcomponents-react';
 import { ThemeProvider } from '@ui5/webcomponents-react';
+import type { ThemeProviderPropTypes } from '@ui5/webcomponents-react';
 import type { MountOptions, MountReturn } from 'cypress/react';
 import { mount } from 'cypress/react';
 import type { ReactNode } from 'react';
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -96,8 +96,15 @@ const config = tseslint.config(
       'import/order': [
         'error',
         {
+          // Ensure wcr packages are always resolved as 'external' no matter if local dist folders exist (without defined pathGroups they would resolve as 'internal' with `dist`)
+          pathGroups: [
+            { pattern: '@ui5/webcomponents-react*', group: 'external' },
+            { pattern: '@ui5/webcomponents-react*/**', group: 'external' },
+            { pattern: '@ui5/webcomponents-cypress-commands', group: 'external' },
+            { pattern: '@ui5/webcomponents-cypress-commands/**', group: 'external' },
+          ],
+          pathGroupsExcludedImportTypes: ['builtin'],
           'newlines-between': 'never',
-
           alphabetize: {
             order: 'asc',
             caseInsensitive: true,
diff --git a/packages/ai/src/components/Button/Button.stories.tsx b/packages/ai/src/components/Button/Button.stories.tsx
@@ -3,8 +3,8 @@ import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import aiIcon from '@ui5/webcomponents-icons/dist/ai.js';
 import navDownIcon from '@ui5/webcomponents-icons/dist/navigation-down-arrow.js';
 import stopIcon from '@ui5/webcomponents-icons/dist/stop.js';
-import type { MenuPropTypes } from '@ui5/webcomponents-react';
 import { Menu, MenuItem, MenuSeparator } from '@ui5/webcomponents-react';
+import type { MenuPropTypes } from '@ui5/webcomponents-react';
 import { useRef, useState } from 'react';
 import { ButtonState } from '../ButtonState/index.js';
 import type { ButtonDomRef, ButtonPropTypes } from './index.js';
diff --git a/packages/ai/src/components/TextArea/TextArea.stories.tsx b/packages/ai/src/components/TextArea/TextArea.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import type { MenuPropTypes } from '@ui5/webcomponents-react';
 import { Menu, MenuItem } from '@ui5/webcomponents-react';
+import type { MenuPropTypes } from '@ui5/webcomponents-react';
 import { useRef, useState } from 'react';
 import { useFakeStream, useStopStreamByESC } from '../../../../../.storybook/utils.js';
 import type { TextAreaPropTypes } from './index.js';
diff --git a/packages/compat/src/components/Toolbar/OverflowPopover.tsx b/packages/compat/src/components/Toolbar/OverflowPopover.tsx
@@ -15,8 +15,8 @@ import type {
 import { ToggleButton } from '@ui5/webcomponents-react/dist/webComponents/ToggleButton/index.js';
 import { Device, useI18nBundle, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import type { Dispatch, FC, HTMLAttributes, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
 import { isValidElement, cloneElement, useEffect, useRef, useState } from 'react';
+import type { Dispatch, FC, HTMLAttributes, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
 import { createPortal } from 'react-dom';
 import { getOverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';
 import type { ToolbarPropTypes } from './index.js';
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -4,8 +4,8 @@ import NoFilterResults from '@ui5/webcomponents-fiori/dist/illustrations/NoFilte
 import paperPlaneIcon from '@ui5/webcomponents-icons/paper-plane.js';
 import { isIOS, isMac } from '@ui5/webcomponents-react-base/Device';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/ThemingParameters';
-import type { ComponentClass, ComponentProps } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState, version as reactVersion } from 'react';
+import type { ComponentClass, ComponentProps } from 'react';
 import type {
   AnalyticalTableCellInstance,
   AnalyticalTableColumnDefinition,
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
@@ -7,6 +7,7 @@ import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js';
 import iconSortDescending from '@ui5/webcomponents-icons/dist/sort-descending.js';
 import { ThemingParameters, useIsomorphicLayoutEffect } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
+import { useRef, useState } from 'react';
 import type {
   AriaAttributes,
   CSSProperties,
@@ -15,7 +16,6 @@ import type {
   MouseEventHandler,
   ReactNode,
 } from 'react';
-import { useRef, useState } from 'react';
 import { Icon } from '../../../webComponents/Icon/index.js';
 import { Text } from '../../../webComponents/Text/index.js';
 import type { ClassNames, ColumnType, DivWithCustomScrollProp } from '../types/index.js';
diff --git a/packages/main/src/components/AnalyticalTable/pluginHooks/useF2CellEdit.ts b/packages/main/src/components/AnalyticalTable/pluginHooks/useF2CellEdit.ts
@@ -1,5 +1,5 @@
-import type { Ui5DomRef } from '@ui5/webcomponents-react-base';
 import { useI18nBundle } from '@ui5/webcomponents-react-base';
+import type { Ui5DomRef } from '@ui5/webcomponents-react-base';
 import type { FocusEventHandler, KeyboardEventHandler } from 'react';
 import { useCallback, useEffect } from 'react';
 import { INCLUDES_X } from '../../../i18n/i18n-defaults.js';
diff --git a/packages/main/src/components/FilterBar/FilterDialog.tsx b/packages/main/src/components/FilterBar/FilterDialog.tsx
@@ -6,8 +6,8 @@ import listIcon from '@ui5/webcomponents-icons/dist/list.js';
 import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
 import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/internal/utils';
-import type { ReactElement, RefObject } from 'react';
 import { Children, cloneElement, useEffect, useId, useReducer, useRef, useState } from 'react';
+import type { ReactElement, RefObject } from 'react';
 import { FlexBoxDirection } from '../../enums/FlexBoxDirection.js';
 import { FlexBoxJustifyContent } from '../../enums/FlexBoxJustifyContent.js';
 import { MessageBoxAction } from '../../enums/MessageBoxAction.js';
diff --git a/packages/main/src/components/FilterBar/index.tsx b/packages/main/src/components/FilterBar/index.tsx
@@ -6,8 +6,8 @@ import ToolbarDesign from '@ui5/webcomponents/dist/types/ToolbarDesign.js';
 import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
 import { debounce, Device, enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import type { CSSProperties, ElementType, ReactElement } from 'react';
 import { Children, cloneElement, forwardRef, isValidElement, useEffect, useId, useRef, useState } from 'react';
+import type { CSSProperties, ElementType, ReactElement } from 'react';
 import { FlexBoxAlignItems } from '../../enums/FlexBoxAlignItems.js';
 import {
   ADAPT_FILTERS,
diff --git a/packages/main/src/components/MessageBox/index.tsx b/packages/main/src/components/MessageBox/index.tsx
@@ -8,8 +8,8 @@ import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import iconSysHelp from '@ui5/webcomponents-icons/dist/sys-help-2.js';
 import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import type { ReactElement, ReactNode } from 'react';
 import { cloneElement, forwardRef, isValidElement, useId } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { MessageBoxAction } from '../../enums/MessageBoxAction.js';
 import { MessageBoxType } from '../../enums/MessageBoxType.js';
 import {
diff --git a/packages/main/src/components/MessageItem/index.tsx b/packages/main/src/components/MessageItem/index.tsx
@@ -7,8 +7,8 @@ import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import iconArrowRight from '@ui5/webcomponents-icons/dist/slim-arrow-right.js';
 import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import type { ReactNode } from 'react';
 import { Children, isValidElement, forwardRef, useContext, useEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
 import { FlexBoxAlignItems } from '../../enums/FlexBoxAlignItems.js';
 import { FlexBoxDirection } from '../../enums/FlexBoxDirection.js';
 import { COUNTER, HAS_DETAILS } from '../../i18n/i18n-defaults.js';
diff --git a/packages/main/src/components/MessageView/MessageView.cy.tsx b/packages/main/src/components/MessageView/MessageView.cy.tsx
@@ -2,9 +2,9 @@ import WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import { Link } from '@ui5/webcomponents-react';
 import { useRef } from 'react';
+import { Dialog } from '../../webComponents/Dialog/index.js';
 import { MessageItem } from '../MessageItem/index.js';
 import { MessageView } from './index.js';
-import { Dialog } from '../../webComponents/Dialog/index.js';
 
 describe('MessageView', () => {
   it('default & grouped', () => {
diff --git a/packages/main/src/components/MessageView/index.tsx b/packages/main/src/components/MessageView/index.tsx
@@ -8,11 +8,11 @@ import { getAnimationMode } from '@ui5/webcomponents-base/dist/config/AnimationM
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import announce from '@ui5/webcomponents-base/dist/util/InvisibleMessage.js';
 import iconSlimArrowLeft from '@ui5/webcomponents-icons/dist/slim-arrow-left.js';
-import type { Ui5DomRef } from '@ui5/webcomponents-react-base';
 import { useI18nBundle, useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base';
+import type { Ui5DomRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import type { ReactElement, ReactNode } from 'react';
 import { useRef, Children, forwardRef, Fragment, isValidElement, useCallback, useEffect, useState } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { FlexBoxDirection } from '../../enums/FlexBoxDirection.js';
 import { ALL, LIST_NO_DATA, NAVIGATE_BACK, MESSAGE_DETAILS, MESSAGE_TYPES } from '../../i18n/i18n-defaults.js';
 import type { SelectedMessage } from '../../internal/MessageViewContext.js';
diff --git a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
@@ -6,8 +6,8 @@ import InputType from '@ui5/webcomponents/dist/types/InputType.js';
 import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js';
-import type { CSSProperties } from 'react';
 import { useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react';
+import type { CSSProperties } from 'react';
 import type { ObjectPagePropTypes } from '../..';
 import {
   CheckBox,
diff --git a/packages/main/src/components/ObjectPage/useHandleTabSelect.ts b/packages/main/src/components/ObjectPage/useHandleTabSelect.ts
@@ -1,5 +1,5 @@
-import type { debounce } from '@ui5/webcomponents-react-base';
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
+import type { debounce } from '@ui5/webcomponents-react-base';
 import type { Dispatch, JSXElementConstructor, MutableRefObject, ReactElement, RefObject, SetStateAction } from 'react';
 import { isValidElement, useEffect, useState } from 'react';
 import { ObjectPageMode } from '../../enums/ObjectPageMode.js';
diff --git a/packages/main/src/components/ObjectPageAnchorBar/index.tsx b/packages/main/src/components/ObjectPageAnchorBar/index.tsx
@@ -6,8 +6,8 @@ import iconArrowDown from '@ui5/webcomponents-icons/dist/slim-arrow-down.js';
 import iconArrowUp from '@ui5/webcomponents-icons/dist/slim-arrow-up.js';
 import { debounce, enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import type { CSSProperties, Dispatch, MouseEvent, SetStateAction } from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
+import type { CSSProperties, Dispatch, MouseEvent, SetStateAction } from 'react';
 import { COLLAPSE_HEADER, EXPAND_HEADER, PIN_HEADER, UNPIN_HEADER } from '../../i18n/i18n-defaults.js';
 import { cssVarVersionInfoPrefix, getUi5TagWithSuffix } from '../../internal/utils.js';
 import type { CommonProps } from '../../types/index.js';
diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx
@@ -14,8 +14,8 @@ import informationIcon from '@ui5/webcomponents-icons/dist/information.js';
 import successIcon from '@ui5/webcomponents-icons/dist/sys-enter-2.js';
 import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import type { MouseEventHandler, ReactNode } from 'react';
 import { forwardRef } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 import type { IndicationColor } from '../../enums/IndicationColor.js';
 import {
   ARIA_OBJ_STATUS_DESC,
diff --git a/packages/main/src/components/SelectDialog/index.tsx b/packages/main/src/components/SelectDialog/index.tsx
@@ -11,8 +11,8 @@ import announce from '@ui5/webcomponents-base/dist/util/InvisibleMessage.js';
 import iconSearch from '@ui5/webcomponents-icons/dist/search.js';
 import { enrichEventWithDetails, useI18nBundle, useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import type { ReactNode } from 'react';
 import { forwardRef, useEffect, useState } from 'react';
+import type { ReactNode } from 'react';
 import { FlexBoxAlignItems } from '../../enums/FlexBoxAlignItems.js';
 import { CANCEL, CLEAR, SEARCH, SELECT, SELECTED, SELECTED_ITEMS } from '../../i18n/i18n-defaults.js';
 import type { Ui5CustomEvent } from '../../types/index.js';
diff --git a/packages/main/src/components/Splitter/index.tsx b/packages/main/src/components/Splitter/index.tsx
@@ -4,8 +4,8 @@ import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import horizontalGripIcon from '@ui5/webcomponents-icons/dist/horizontal-grip.js';
 import verticalGripIcon from '@ui5/webcomponents-icons/dist/vertical-grip.js';
 import { useCurrentTheme, useI18nBundle, useIsRTL, useSyncRef, useStylesheet } from '@ui5/webcomponents-react-base';
-import { forwardRef, useEffect, useRef, useState } from 'react';
 import type { KeyboardEventHandler, PointerEventHandler } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import { PRESS_ARROW_KEYS_TO_MOVE } from '../../i18n/i18n-defaults.js';
 import { Button } from '../../webComponents/Button/index.js';
 import { Icon } from '../../webComponents/Icon/index.js';
diff --git a/packages/main/src/components/ThemeProvider/index.tsx b/packages/main/src/components/ThemeProvider/index.tsx
@@ -5,8 +5,8 @@ import { getScopedVarName } from '@ui5/webcomponents-base/dist/CustomElementsSco
 import { attachLanguageChange, detachLanguageChange } from '@ui5/webcomponents-base/dist/locale/languageChange.js';
 import { attachThemeLoaded, detachThemeLoaded } from '@ui5/webcomponents-base/dist/theming/ThemeLoaded.js';
 import { I18nStore, StyleStore, useIsomorphicLayoutEffect, useStylesheet } from '@ui5/webcomponents-react-base';
-import type { FC, ReactNode } from 'react';
 import { useEffect, useId } from 'react';
+import type { FC, ReactNode } from 'react';
 import VersionInfo from '../../generated/VersionInfo.js';
 import { styleData } from './ThemeProvider.css.js';
 
diff --git a/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx b/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx
@@ -5,10 +5,10 @@ import { getScopedVarName } from '@ui5/webcomponents-base/dist/CustomElementsSco
 import { isPhone as getIsPhone } from '@ui5/webcomponents-base/dist/Device.js';
 import NoEntriesIllu from '@ui5/webcomponents-fiori/dist/illustrations/NoEntries.js';
 import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
-import type { Ui5DomRef } from '@ui5/webcomponents-react-base';
 import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
-import type { MouseEventHandler, ReactElement } from 'react';
+import type { Ui5DomRef } from '@ui5/webcomponents-react-base';
 import { Children, isValidElement, useEffect, useId, useRef, useState } from 'react';
+import type { MouseEventHandler, ReactElement } from 'react';
 import { FlexBoxAlignItems } from '../../enums/FlexBoxAlignItems.js';
 import { FlexBoxDirection } from '../../enums/FlexBoxDirection.js';
 import {
diff --git a/packages/main/src/components/VariantManagement/index.tsx b/packages/main/src/components/VariantManagement/index.tsx
@@ -11,7 +11,6 @@ import navDownIcon from '@ui5/webcomponents-icons/dist/navigation-down-arrow.js'
 import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
 import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import type { ComponentElement, ReactElement } from 'react';
 import {
   Children,
   cloneElement,
@@ -23,6 +22,7 @@ import {
   useState,
   version as reactVersion,
 } from 'react';
+import type { ComponentElement, ReactElement } from 'react';
 import { MANAGE, MY_VIEWS, SAVE, SAVE_AS, SEARCH, SEARCH_VARIANT, SELECT_VIEW } from '../../i18n/i18n-defaults.js';
 import { stopPropagation } from '../../internal/stopPropagation.js';
 import type { SelectedVariant } from '../../internal/VariantManagementContext.js';
diff --git a/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.stories.tsx b/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.stories.tsx
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import actionSettingsIcon from '@ui5/webcomponents-icons/dist/action-settings.js';
-import type { UserMenuDomRef, UserMenuPropTypes } from '@ui5/webcomponents-react';
 import {
   Avatar,
   Button,
@@ -20,6 +19,7 @@ import {
   Title,
   RadioButton,
 } from '@ui5/webcomponents-react';
+import type { UserMenuDomRef, UserMenuPropTypes } from '@ui5/webcomponents-react';
 import { useEffect, useRef, useState } from 'react';
 import { Switch } from '../Switch/index.js';
 import { UserSettingsAppearanceView } from '../UserSettingsAppearanceView/index.js';
