fix(compat): use deep import paths for main imports

eslint.config.mjs

@@ -25,9 +25,11 @@ const ignorePatterns = {
     '**/scripts',
     '**/shared',
     '**/examples',
-    '**/templates'
+    '**/templates',
+    '**/*.module.css.ts'
   ]
 };
+
 const config = tseslint.config(
   ignorePatterns,
   eslint.configs.recommended,
@@ -224,6 +226,25 @@ const config = tseslint.config(
     }
   },
 
+  // no-restricted-imports rule for compat package
+  {
+    files: ['packages/compat/**/*.{js,jsx,ts,tsx}'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: '@ui5/webcomponents-react',
+              message:
+                "Please use deep imports from @ui5/webcomponents-react. Example: import { Button } from '@ui5/webcomponents-react/dist/webComponents/Button/index.js';"
+            }
+          ]
+        }
+      ]
+    }
+  },
+
   // prettier plugin must be the last entry in the config!
   prettierPlugin
 );

package.json

@@ -23,7 +23,7 @@
     "lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push",
     "wrappers:main": "WITH_WEB_COMPONENT_IMPORT_PATH='../../internal/withWebComponent.js' INTERFACES_IMPORT_PATH='../../types/index.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'",
     "wrappers:fiori": "WITH_WEB_COMPONENT_IMPORT_PATH='../../internal/withWebComponent.js' INTERFACES_IMPORT_PATH='../../types/index.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'",
-    "wrappers:compat": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)' && prettier --log-level silent --write ./packages/compat/src/components && eslint --ext .ts,.tsx --fix ./packages/compat/src/components/*/index.tsx",
+    "wrappers:compat": "WITH_WEB_COMPONENT_IMPORT_PATH='@ui5/webcomponents-react/dist/internal/withWebComponent.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)' && prettier --log-level silent --write ./packages/compat/src/components && eslint --ext .ts,.tsx --fix ./packages/compat/src/components/*/index.tsx",
     "create-webcomponents-wrapper": "(cd packages/cli && tsc) && yarn run wrappers:main && yarn run wrappers:fiori && yarn run wrappers:compat && prettier --log-level silent --write ./packages/main/src/webComponents && eslint --ext .ts,.tsx --fix ./packages/main/src/webComponents/*/index.tsx && yarn run sb:prepare-cem",
     "chromatic": "cross-env STORYBOOK_ENV=chromatic npx chromatic --build-script-name build:storybook",
     "postinstall": "husky && yarn setup",

packages/compat/src/components/Loader/Loader.stories.tsx

@@ -1,6 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import activateIcon from '@ui5/webcomponents-icons/dist/activate.js';
-import { Card, CardHeader, FlexBox, FlexBoxDirection, Icon, Text } from '@ui5/webcomponents-react';
+import { FlexBox } from '@ui5/webcomponents-react/dist/components/FlexBox/index.js';
+import { FlexBoxDirection } from '@ui5/webcomponents-react/dist/enums/FlexBoxDirection.js';
+import { Card } from '@ui5/webcomponents-react/dist/webComponents/Card/index.js';
+import { CardHeader } from '@ui5/webcomponents-react/dist/webComponents/CardHeader/index.js';
+import { Icon } from '@ui5/webcomponents-react/dist/webComponents/Icon/index.js';
+import { Text } from '@ui5/webcomponents-react/dist/webComponents/Text/index.js';
 import { useEffect, useRef, useState } from 'react';
 import { LoaderType } from '../../enums/LoaderType.js';
 import { Loader } from './index.js';

packages/compat/src/components/Loader/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import type { CommonProps } from '@ui5/webcomponents-react';
 import { PLEASE_WAIT } from '@ui5/webcomponents-react/dist/i18n/i18n-defaults.js';
+import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
 import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { CSSProperties } from 'react';

packages/compat/src/components/OverflowToolbarButton/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Button } from '@ui5/webcomponents-react';
-import type { ButtonDomRef, ButtonPropTypes } from '@ui5/webcomponents-react';
+import { Button } from '@ui5/webcomponents-react/dist/webComponents/Button/index.js';
+import type { ButtonDomRef, ButtonPropTypes } from '@ui5/webcomponents-react/dist/webComponents/Button/index.js';
 import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
 import { useOverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';

packages/compat/src/components/OverflowToolbarToggleButton/index.tsx

@@ -1,7 +1,10 @@
 'use client';
 
-import type { ToggleButtonDomRef, ToggleButtonPropTypes } from '@ui5/webcomponents-react';
-import { ToggleButton } from '@ui5/webcomponents-react';
+import { ToggleButton } from '@ui5/webcomponents-react/dist/webComponents/ToggleButton/index.js';
+import type {
+  ToggleButtonDomRef,
+  ToggleButtonPropTypes
+} from '@ui5/webcomponents-react/dist/webComponents/ToggleButton/index.js';
 import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
 import { useOverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';

packages/compat/src/components/Table/index.tsx

@@ -8,8 +8,11 @@ import type {
 import type { TableRowClickEventDetail } from '@ui5/webcomponents-compat/dist/TableRow.js';
 import type TableGrowingMode from '@ui5/webcomponents-compat/dist/types/TableGrowingMode.js';
 import type TableMode from '@ui5/webcomponents-compat/dist/types/TableMode.js';
-import { withWebComponent } from '@ui5/webcomponents-react';
-import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react';
+import { withWebComponent } from '@ui5/webcomponents-react/dist/internal/withWebComponent.js';
+import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
+import type { UI5WCSlotsNode } from '@ui5/webcomponents-react/dist/types/index.js';
+import type { Ui5CustomEvent } from '@ui5/webcomponents-react/dist/types/Ui5CustomEvent.js';
+import type { Ui5DomRef } from '@ui5/webcomponents-react/dist/types/Ui5DomRef.js';
 import type { ReactNode } from 'react';
 
 interface TableAttributes {

packages/compat/src/components/TableCell/index.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import '@ui5/webcomponents-compat/dist/TableCell.js';
-import { withWebComponent } from '@ui5/webcomponents-react';
-import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react';
+import { withWebComponent } from '@ui5/webcomponents-react/dist/internal/withWebComponent.js';
+import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
+import type { Ui5DomRef } from '@ui5/webcomponents-react/dist/types/Ui5DomRef.js';
 import type { ReactNode } from 'react';
 
 interface TableCellAttributes {}

packages/compat/src/components/TableColumn/index.tsx

@@ -2,8 +2,9 @@
 
 import '@ui5/webcomponents-compat/dist/TableColumn.js';
 import type TableColumnPopinDisplay from '@ui5/webcomponents-compat/dist/types/TableColumnPopinDisplay.js';
-import { withWebComponent } from '@ui5/webcomponents-react';
-import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react';
+import { withWebComponent } from '@ui5/webcomponents-react/dist/internal/withWebComponent.js';
+import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
+import type { Ui5DomRef } from '@ui5/webcomponents-react/dist/types/Ui5DomRef.js';
 import type { ReactNode } from 'react';
 
 interface TableColumnAttributes {

packages/compat/src/components/TableGroupRow/index.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import '@ui5/webcomponents-compat/dist/TableGroupRow.js';
-import { withWebComponent } from '@ui5/webcomponents-react';
-import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react';
+import { withWebComponent } from '@ui5/webcomponents-react/dist/internal/withWebComponent.js';
+import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
+import type { Ui5DomRef } from '@ui5/webcomponents-react/dist/types/Ui5DomRef.js';
 import type { ReactNode } from 'react';
 
 interface TableGroupRowAttributes {}

packages/compat/src/components/TableRow/index.tsx

@@ -2,8 +2,9 @@
 
 import '@ui5/webcomponents-compat/dist/TableRow.js';
 import type TableRowType from '@ui5/webcomponents-compat/dist/types/TableRowType.js';
-import { withWebComponent } from '@ui5/webcomponents-react';
-import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react';
+import { withWebComponent } from '@ui5/webcomponents-react/dist/internal/withWebComponent.js';
+import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
+import type { Ui5DomRef } from '@ui5/webcomponents-react/dist/types/Ui5DomRef.js';
 import type { ReactNode } from 'react';
 
 interface TableRowAttributes {

packages/compat/src/components/Toolbar/OverflowPopover.tsx

@@ -2,16 +2,17 @@ import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
 import PopupAccessibleRole from '@ui5/webcomponents/dist/types/PopupAccessibleRole.js';
 import iconOverflow from '@ui5/webcomponents-icons/dist/overflow.js';
-import type {
-  ButtonPropTypes,
-  PopoverDomRef,
-  ToggleButtonDomRef,
-  ToggleButtonPropTypes
-} from '@ui5/webcomponents-react';
-import { Popover, ToggleButton } from '@ui5/webcomponents-react';
 import { WITH_X_ITEMS, SHOW_MORE, X_OF_Y } from '@ui5/webcomponents-react/dist/i18n/i18n-defaults.js';
 import { stopPropagation } from '@ui5/webcomponents-react/dist/internal/stopPropagation.js';
 import { getUi5TagWithSuffix } from '@ui5/webcomponents-react/dist/internal/utils.js';
+import type { ButtonPropTypes } from '@ui5/webcomponents-react/dist/webComponents/Button/index.js';
+import type { PopoverDomRef } from '@ui5/webcomponents-react/dist/webComponents/Popover/index.js';
+import { Popover } from '@ui5/webcomponents-react/dist/webComponents/Popover/index.js';
+import type {
+  ToggleButtonDomRef,
+  ToggleButtonPropTypes
+} from '@ui5/webcomponents-react/dist/webComponents/ToggleButton/index.js';
+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';

packages/compat/src/components/Toolbar/Toolbar.cy.tsx

@@ -2,8 +2,11 @@ import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import PopupAccessibleRole from '@ui5/webcomponents/dist/types/PopupAccessibleRole.js';
 import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
 import menu2Icon from '@ui5/webcomponents-icons/dist/menu2.js';
-import type { PopoverDomRef } from '@ui5/webcomponents-react';
-import { Button, Input, Text, ToggleButton } from '@ui5/webcomponents-react';
+import { Button } from '@ui5/webcomponents-react/dist/webComponents/Button/index.js';
+import { Input } from '@ui5/webcomponents-react/dist/webComponents/Input/index.js';
+import type { PopoverDomRef } from '@ui5/webcomponents-react/dist/webComponents/Popover/index.js';
+import { Text } from '@ui5/webcomponents-react/dist/webComponents/Text/index.js';
+import { ToggleButton } from '@ui5/webcomponents-react/dist/webComponents/ToggleButton/index.js';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import { useRef, useState } from 'react';
 import { ToolbarDesign } from '../../enums/ToolbarDesign.js';

packages/compat/src/components/Toolbar/Toolbar.mdx

@@ -1,7 +1,5 @@
 import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Description, Markdown, Meta } from '@storybook/blocks';
-import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
-import { MessageStrip } from '@ui5/webcomponents-react';
 import * as ComponentStories from './Toolbar.stories';
 import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
 import { OverflowToolbarButton, OverflowToolbarToggleButton, ToolbarSpacer, ToolbarSeparator } from '../..';

packages/compat/src/components/Toolbar/Toolbar.stories.tsx

@@ -4,19 +4,17 @@ import downloadIcon from '@ui5/webcomponents-icons/dist/download.js';
 import editIcon from '@ui5/webcomponents-icons/dist/edit.js';
 import favoriteIcon from '@ui5/webcomponents-icons/dist/favorite.js';
 import settingsIcon from '@ui5/webcomponents-icons/dist/settings.js';
-import {
-  Button,
-  DatePicker,
-  Icon,
-  Input,
-  Menu,
-  MenuItem,
-  Select,
-  Slider,
-  Switch,
-  Text,
-  ToggleButton
-} from '@ui5/webcomponents-react';
+import { Button } from '@ui5/webcomponents-react/dist/webComponents/Button/index.js';
+import { DatePicker } from '@ui5/webcomponents-react/dist/webComponents/DatePicker/index.js';
+import { Icon } from '@ui5/webcomponents-react/dist/webComponents/Icon/index.js';
+import { Input } from '@ui5/webcomponents-react/dist/webComponents/Input/index.js';
+import { Menu } from '@ui5/webcomponents-react/dist/webComponents/Menu/index.js';
+import { MenuItem } from '@ui5/webcomponents-react/dist/webComponents/MenuItem/index.js';
+import { Select } from '@ui5/webcomponents-react/dist/webComponents/Select/index.js';
+import { Slider } from '@ui5/webcomponents-react/dist/webComponents/Slider/index.js';
+import { Switch } from '@ui5/webcomponents-react/dist/webComponents/Switch/index.js';
+import { Text } from '@ui5/webcomponents-react/dist/webComponents/Text/index.js';
+import { ToggleButton } from '@ui5/webcomponents-react/dist/webComponents/ToggleButton/index.js';
 import { useState } from 'react';
 import { ToolbarDesign } from '../../enums/ToolbarDesign.js';
 import { ToolbarStyle } from '../../enums/ToolbarStyle.js';

packages/compat/src/components/Toolbar/index.tsx

@@ -1,8 +1,11 @@
 'use client';
 
 import type PopupAccessibleRole from '@ui5/webcomponents/dist/types/PopupAccessibleRole.js';
-import type { ButtonPropTypes, CommonProps, PopoverDomRef, ToggleButtonPropTypes } from '@ui5/webcomponents-react';
 import { flattenFragments } from '@ui5/webcomponents-react/dist/internal/utils.js';
+import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
+import type { ButtonPropTypes } from '@ui5/webcomponents-react/dist/webComponents/Button/index.js';
+import type { PopoverDomRef } from '@ui5/webcomponents-react/dist/webComponents/Popover/index.js';
+import type { ToggleButtonPropTypes } from '@ui5/webcomponents-react/dist/webComponents/ToggleButton/index.js';
 import { debounce, useIsomorphicLayoutEffect, useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { ElementType, HTMLAttributes, ReactElement, ReactNode, Ref, RefObject } from 'react';

packages/compat/src/components/ToolbarSeparator/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { CommonProps } from '@ui5/webcomponents-react';
+import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
 import { useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';

packages/compat/src/components/ToolbarSpacer/index.tsx

@@ -1,4 +1,4 @@
-import type { CommonProps } from '@ui5/webcomponents-react';
+import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
 import { forwardRef } from 'react';
 
 export type ToolbarSpacerPropTypes = CommonProps;