Skip to content

Commit d432c5e

Browse files
Lukas742Lukas742
authored
fix(compat): use deep import paths for main imports (#6554)
1 parent fd31359 commit d432c5e

File tree

18 files changed

+84
-45
lines changed

18 files changed

+84
-45
lines changed

‎eslint.config.mjs

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,11 @@ const ignorePatterns = {
2525
'**/scripts',
2626
'**/shared',
2727
'**/examples',
28-
'**/templates'
28+
'**/templates',
29+
'**/*.module.css.ts'
2930
]
3031
};
32+
3133
const config = tseslint.config(
3234
ignorePatterns,
3335
eslint.configs.recommended,
@@ -224,6 +226,25 @@ const config = tseslint.config(
224226
}
225227
},
226228

229+
// no-restricted-imports rule for compat package
230+
{
231+
files: ['packages/compat/**/*.{js,jsx,ts,tsx}'],
232+
rules: {
233+
'no-restricted-imports': [
234+
'error',
235+
{
236+
paths: [
237+
{
238+
name: '@ui5/webcomponents-react',
239+
message:
240+
"Please use deep imports from @ui5/webcomponents-react. Example: import { Button } from '@ui5/webcomponents-react/dist/webComponents/Button/index.js';"
241+
}
242+
]
243+
}
244+
]
245+
}
246+
},
247+
227248
// prettier plugin must be the last entry in the config!
228249
prettierPlugin
229250
);

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push",
2424
"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/)'",
2525
"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/)'",
26-
"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",
26+
"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",
2727
"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",
2828
"chromatic": "cross-env STORYBOOK_ENV=chromatic npx chromatic --build-script-name build:storybook",
2929
"postinstall": "husky && yarn setup",

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import type { Meta, StoryObj } from '@storybook/react';
22
import activateIcon from '@ui5/webcomponents-icons/dist/activate.js';
3-
import { Card, CardHeader, FlexBox, FlexBoxDirection, Icon, Text } from '@ui5/webcomponents-react';
3+
import { FlexBox } from '@ui5/webcomponents-react/dist/components/FlexBox/index.js';
4+
import { FlexBoxDirection } from '@ui5/webcomponents-react/dist/enums/FlexBoxDirection.js';
5+
import { Card } from '@ui5/webcomponents-react/dist/webComponents/Card/index.js';
6+
import { CardHeader } from '@ui5/webcomponents-react/dist/webComponents/CardHeader/index.js';
7+
import { Icon } from '@ui5/webcomponents-react/dist/webComponents/Icon/index.js';
8+
import { Text } from '@ui5/webcomponents-react/dist/webComponents/Text/index.js';
49
import { useEffect, useRef, useState } from 'react';
510
import { LoaderType } from '../../enums/LoaderType.js';
611
import { Loader } from './index.js';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

3-
import type { CommonProps } from '@ui5/webcomponents-react';
43
import { PLEASE_WAIT } from '@ui5/webcomponents-react/dist/i18n/i18n-defaults.js';
4+
import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
55
import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
66
import { clsx } from 'clsx';
77
import type { CSSProperties } from 'react';

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

3-
import { Button } from '@ui5/webcomponents-react';
4-
import type { ButtonDomRef, ButtonPropTypes } from '@ui5/webcomponents-react';
3+
import { Button } from '@ui5/webcomponents-react/dist/webComponents/Button/index.js';
4+
import type { ButtonDomRef, ButtonPropTypes } from '@ui5/webcomponents-react/dist/webComponents/Button/index.js';
55
import type { ReactNode } from 'react';
66
import { forwardRef } from 'react';
77
import { useOverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
'use client';
22

3-
import type { ToggleButtonDomRef, ToggleButtonPropTypes } from '@ui5/webcomponents-react';
4-
import { ToggleButton } from '@ui5/webcomponents-react';
3+
import { ToggleButton } from '@ui5/webcomponents-react/dist/webComponents/ToggleButton/index.js';
4+
import type {
5+
ToggleButtonDomRef,
6+
ToggleButtonPropTypes
7+
} from '@ui5/webcomponents-react/dist/webComponents/ToggleButton/index.js';
58
import type { ReactNode } from 'react';
69
import { forwardRef } from 'react';
710
import { useOverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,11 @@ import type {
88
import type { TableRowClickEventDetail } from '@ui5/webcomponents-compat/dist/TableRow.js';
99
import type TableGrowingMode from '@ui5/webcomponents-compat/dist/types/TableGrowingMode.js';
1010
import type TableMode from '@ui5/webcomponents-compat/dist/types/TableMode.js';
11-
import { withWebComponent } from '@ui5/webcomponents-react';
12-
import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react';
11+
import { withWebComponent } from '@ui5/webcomponents-react/dist/internal/withWebComponent.js';
12+
import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
13+
import type { UI5WCSlotsNode } from '@ui5/webcomponents-react/dist/types/index.js';
14+
import type { Ui5CustomEvent } from '@ui5/webcomponents-react/dist/types/Ui5CustomEvent.js';
15+
import type { Ui5DomRef } from '@ui5/webcomponents-react/dist/types/Ui5DomRef.js';
1316
import type { ReactNode } from 'react';
1417

1518
interface TableAttributes {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
'use client';
22

33
import '@ui5/webcomponents-compat/dist/TableCell.js';
4-
import { withWebComponent } from '@ui5/webcomponents-react';
5-
import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react';
4+
import { withWebComponent } from '@ui5/webcomponents-react/dist/internal/withWebComponent.js';
5+
import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
6+
import type { Ui5DomRef } from '@ui5/webcomponents-react/dist/types/Ui5DomRef.js';
67
import type { ReactNode } from 'react';
78

89
interface TableCellAttributes {}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22

33
import '@ui5/webcomponents-compat/dist/TableColumn.js';
44
import type TableColumnPopinDisplay from '@ui5/webcomponents-compat/dist/types/TableColumnPopinDisplay.js';
5-
import { withWebComponent } from '@ui5/webcomponents-react';
6-
import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react';
5+
import { withWebComponent } from '@ui5/webcomponents-react/dist/internal/withWebComponent.js';
6+
import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
7+
import type { Ui5DomRef } from '@ui5/webcomponents-react/dist/types/Ui5DomRef.js';
78
import type { ReactNode } from 'react';
89

910
interface TableColumnAttributes {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
'use client';
22

33
import '@ui5/webcomponents-compat/dist/TableGroupRow.js';
4-
import { withWebComponent } from '@ui5/webcomponents-react';
5-
import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react';
4+
import { withWebComponent } from '@ui5/webcomponents-react/dist/internal/withWebComponent.js';
5+
import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
6+
import type { Ui5DomRef } from '@ui5/webcomponents-react/dist/types/Ui5DomRef.js';
67
import type { ReactNode } from 'react';
78

89
interface TableGroupRowAttributes {}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22

33
import '@ui5/webcomponents-compat/dist/TableRow.js';
44
import type TableRowType from '@ui5/webcomponents-compat/dist/types/TableRowType.js';
5-
import { withWebComponent } from '@ui5/webcomponents-react';
6-
import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react';
5+
import { withWebComponent } from '@ui5/webcomponents-react/dist/internal/withWebComponent.js';
6+
import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
7+
import type { Ui5DomRef } from '@ui5/webcomponents-react/dist/types/Ui5DomRef.js';
78
import type { ReactNode } from 'react';
89

910
interface TableRowAttributes {

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,17 @@ import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
22
import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
33
import PopupAccessibleRole from '@ui5/webcomponents/dist/types/PopupAccessibleRole.js';
44
import iconOverflow from '@ui5/webcomponents-icons/dist/overflow.js';
5-
import type {
6-
ButtonPropTypes,
7-
PopoverDomRef,
8-
ToggleButtonDomRef,
9-
ToggleButtonPropTypes
10-
} from '@ui5/webcomponents-react';
11-
import { Popover, ToggleButton } from '@ui5/webcomponents-react';
125
import { WITH_X_ITEMS, SHOW_MORE, X_OF_Y } from '@ui5/webcomponents-react/dist/i18n/i18n-defaults.js';
136
import { stopPropagation } from '@ui5/webcomponents-react/dist/internal/stopPropagation.js';
147
import { getUi5TagWithSuffix } from '@ui5/webcomponents-react/dist/internal/utils.js';
8+
import type { ButtonPropTypes } from '@ui5/webcomponents-react/dist/webComponents/Button/index.js';
9+
import type { PopoverDomRef } from '@ui5/webcomponents-react/dist/webComponents/Popover/index.js';
10+
import { Popover } from '@ui5/webcomponents-react/dist/webComponents/Popover/index.js';
11+
import type {
12+
ToggleButtonDomRef,
13+
ToggleButtonPropTypes
14+
} from '@ui5/webcomponents-react/dist/webComponents/ToggleButton/index.js';
15+
import { ToggleButton } from '@ui5/webcomponents-react/dist/webComponents/ToggleButton/index.js';
1516
import { Device, useI18nBundle, useSyncRef } from '@ui5/webcomponents-react-base';
1617
import { clsx } from 'clsx';
1718
import type { Dispatch, FC, HTMLAttributes, ReactElement, ReactNode, Ref, SetStateAction } from 'react';

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@ import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
22
import PopupAccessibleRole from '@ui5/webcomponents/dist/types/PopupAccessibleRole.js';
33
import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
44
import menu2Icon from '@ui5/webcomponents-icons/dist/menu2.js';
5-
import type { PopoverDomRef } from '@ui5/webcomponents-react';
6-
import { Button, Input, Text, ToggleButton } from '@ui5/webcomponents-react';
5+
import { Button } from '@ui5/webcomponents-react/dist/webComponents/Button/index.js';
6+
import { Input } from '@ui5/webcomponents-react/dist/webComponents/Input/index.js';
7+
import type { PopoverDomRef } from '@ui5/webcomponents-react/dist/webComponents/Popover/index.js';
8+
import { Text } from '@ui5/webcomponents-react/dist/webComponents/Text/index.js';
9+
import { ToggleButton } from '@ui5/webcomponents-react/dist/webComponents/ToggleButton/index.js';
710
import { ThemingParameters } from '@ui5/webcomponents-react-base';
811
import { useRef, useState } from 'react';
912
import { ToolbarDesign } from '../../enums/ToolbarDesign.js';

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components';
22
import { Canvas, Description, Markdown, Meta } from '@storybook/blocks';
3-
import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
4-
import { MessageStrip } from '@ui5/webcomponents-react';
53
import * as ComponentStories from './Toolbar.stories';
64
import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
75
import { OverflowToolbarButton, OverflowToolbarToggleButton, ToolbarSpacer, ToolbarSeparator } from '../..';

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

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,17 @@ import downloadIcon from '@ui5/webcomponents-icons/dist/download.js';
44
import editIcon from '@ui5/webcomponents-icons/dist/edit.js';
55
import favoriteIcon from '@ui5/webcomponents-icons/dist/favorite.js';
66
import settingsIcon from '@ui5/webcomponents-icons/dist/settings.js';
7-
import {
8-
Button,
9-
DatePicker,
10-
Icon,
11-
Input,
12-
Menu,
13-
MenuItem,
14-
Select,
15-
Slider,
16-
Switch,
17-
Text,
18-
ToggleButton
19-
} from '@ui5/webcomponents-react';
7+
import { Button } from '@ui5/webcomponents-react/dist/webComponents/Button/index.js';
8+
import { DatePicker } from '@ui5/webcomponents-react/dist/webComponents/DatePicker/index.js';
9+
import { Icon } from '@ui5/webcomponents-react/dist/webComponents/Icon/index.js';
10+
import { Input } from '@ui5/webcomponents-react/dist/webComponents/Input/index.js';
11+
import { Menu } from '@ui5/webcomponents-react/dist/webComponents/Menu/index.js';
12+
import { MenuItem } from '@ui5/webcomponents-react/dist/webComponents/MenuItem/index.js';
13+
import { Select } from '@ui5/webcomponents-react/dist/webComponents/Select/index.js';
14+
import { Slider } from '@ui5/webcomponents-react/dist/webComponents/Slider/index.js';
15+
import { Switch } from '@ui5/webcomponents-react/dist/webComponents/Switch/index.js';
16+
import { Text } from '@ui5/webcomponents-react/dist/webComponents/Text/index.js';
17+
import { ToggleButton } from '@ui5/webcomponents-react/dist/webComponents/ToggleButton/index.js';
2018
import { useState } from 'react';
2119
import { ToolbarDesign } from '../../enums/ToolbarDesign.js';
2220
import { ToolbarStyle } from '../../enums/ToolbarStyle.js';

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
'use client';
22

33
import type PopupAccessibleRole from '@ui5/webcomponents/dist/types/PopupAccessibleRole.js';
4-
import type { ButtonPropTypes, CommonProps, PopoverDomRef, ToggleButtonPropTypes } from '@ui5/webcomponents-react';
54
import { flattenFragments } from '@ui5/webcomponents-react/dist/internal/utils.js';
5+
import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
6+
import type { ButtonPropTypes } from '@ui5/webcomponents-react/dist/webComponents/Button/index.js';
7+
import type { PopoverDomRef } from '@ui5/webcomponents-react/dist/webComponents/Popover/index.js';
8+
import type { ToggleButtonPropTypes } from '@ui5/webcomponents-react/dist/webComponents/ToggleButton/index.js';
69
import { debounce, useIsomorphicLayoutEffect, useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base';
710
import { clsx } from 'clsx';
811
import type { ElementType, HTMLAttributes, ReactElement, ReactNode, Ref, RefObject } from 'react';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import type { CommonProps } from '@ui5/webcomponents-react';
3+
import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
44
import { useStylesheet } from '@ui5/webcomponents-react-base';
55
import { clsx } from 'clsx';
66
import { forwardRef } from 'react';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { CommonProps } from '@ui5/webcomponents-react';
1+
import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js';
22
import { forwardRef } from 'react';
33

44
export type ToolbarSpacerPropTypes = CommonProps;

0 commit comments

Comments
 (0)