From 5704fa4f5095558e8b3d128c39b055eca18b8c7d Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 25 Oct 2024 13:57:29 +0200 Subject: [PATCH 1/2] fix(compat): use deep import paths for `main` imports --- eslint.config.mjs | 23 +++++++++++++++++- .../src/components/Loader/Loader.stories.tsx | 7 +++++- .../compat/src/components/Loader/index.tsx | 2 +- .../OverflowToolbarButton/index.tsx | 4 ++-- .../OverflowToolbarToggleButton/index.tsx | 7 ++++-- .../compat/src/components/Table/index.tsx | 7 ++++-- .../compat/src/components/TableCell/index.tsx | 5 ++-- .../src/components/TableColumn/index.tsx | 5 ++-- .../src/components/TableGroupRow/index.tsx | 5 ++-- .../compat/src/components/TableRow/index.tsx | 5 ++-- .../components/Toolbar/OverflowPopover.tsx | 15 ++++++------ .../src/components/Toolbar/Toolbar.cy.tsx | 7 ++++-- .../compat/src/components/Toolbar/Toolbar.mdx | 2 -- .../components/Toolbar/Toolbar.stories.tsx | 24 +++++++++---------- .../compat/src/components/Toolbar/index.tsx | 5 +++- .../src/components/ToolbarSeparator/index.tsx | 2 +- .../src/components/ToolbarSpacer/index.tsx | 2 +- 17 files changed, 83 insertions(+), 44 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index 1596f129e1b..8a12f6e1e51 100644 --- a/eslint.config.mjs +++ b/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 ); diff --git a/packages/compat/src/components/Loader/Loader.stories.tsx b/packages/compat/src/components/Loader/Loader.stories.tsx index 4005dbba9a8..12ba02c126f 100644 --- a/packages/compat/src/components/Loader/Loader.stories.tsx +++ b/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'; diff --git a/packages/compat/src/components/Loader/index.tsx b/packages/compat/src/components/Loader/index.tsx index 53a101e2f8a..5550cd4c3e6 100644 --- a/packages/compat/src/components/Loader/index.tsx +++ b/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'; diff --git a/packages/compat/src/components/OverflowToolbarButton/index.tsx b/packages/compat/src/components/OverflowToolbarButton/index.tsx index 19def520f4b..82e9ce97ed5 100644 --- a/packages/compat/src/components/OverflowToolbarButton/index.tsx +++ b/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'; diff --git a/packages/compat/src/components/OverflowToolbarToggleButton/index.tsx b/packages/compat/src/components/OverflowToolbarToggleButton/index.tsx index 76fabf689d5..8f59ee9e0ce 100644 --- a/packages/compat/src/components/OverflowToolbarToggleButton/index.tsx +++ b/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'; diff --git a/packages/compat/src/components/Table/index.tsx b/packages/compat/src/components/Table/index.tsx index 4afc55872b9..2ba24d4c3ea 100644 --- a/packages/compat/src/components/Table/index.tsx +++ b/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 { diff --git a/packages/compat/src/components/TableCell/index.tsx b/packages/compat/src/components/TableCell/index.tsx index 57699d54475..3575dc02204 100644 --- a/packages/compat/src/components/TableCell/index.tsx +++ b/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 {} diff --git a/packages/compat/src/components/TableColumn/index.tsx b/packages/compat/src/components/TableColumn/index.tsx index ba3c2df561f..9d2b7c2a50d 100644 --- a/packages/compat/src/components/TableColumn/index.tsx +++ b/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 { diff --git a/packages/compat/src/components/TableGroupRow/index.tsx b/packages/compat/src/components/TableGroupRow/index.tsx index 874f4b8dbb4..c509d52beca 100644 --- a/packages/compat/src/components/TableGroupRow/index.tsx +++ b/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 {} diff --git a/packages/compat/src/components/TableRow/index.tsx b/packages/compat/src/components/TableRow/index.tsx index 831226f5ce3..1d0a6317c91 100644 --- a/packages/compat/src/components/TableRow/index.tsx +++ b/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 { diff --git a/packages/compat/src/components/Toolbar/OverflowPopover.tsx b/packages/compat/src/components/Toolbar/OverflowPopover.tsx index aa497661cf2..2272a627849 100644 --- a/packages/compat/src/components/Toolbar/OverflowPopover.tsx +++ b/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'; diff --git a/packages/compat/src/components/Toolbar/Toolbar.cy.tsx b/packages/compat/src/components/Toolbar/Toolbar.cy.tsx index 97a4a482c40..35632dbaf2b 100644 --- a/packages/compat/src/components/Toolbar/Toolbar.cy.tsx +++ b/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'; diff --git a/packages/compat/src/components/Toolbar/Toolbar.mdx b/packages/compat/src/components/Toolbar/Toolbar.mdx index 5cdac1a21ae..7f3e7df1c2d 100644 --- a/packages/compat/src/components/Toolbar/Toolbar.mdx +++ b/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 '../..'; diff --git a/packages/compat/src/components/Toolbar/Toolbar.stories.tsx b/packages/compat/src/components/Toolbar/Toolbar.stories.tsx index 4baefb1b213..1bbce05dba6 100644 --- a/packages/compat/src/components/Toolbar/Toolbar.stories.tsx +++ b/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'; diff --git a/packages/compat/src/components/Toolbar/index.tsx b/packages/compat/src/components/Toolbar/index.tsx index edd339d2d95..762c6609edd 100644 --- a/packages/compat/src/components/Toolbar/index.tsx +++ b/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'; diff --git a/packages/compat/src/components/ToolbarSeparator/index.tsx b/packages/compat/src/components/ToolbarSeparator/index.tsx index 847af73987b..ad74ad1c053 100644 --- a/packages/compat/src/components/ToolbarSeparator/index.tsx +++ b/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'; diff --git a/packages/compat/src/components/ToolbarSpacer/index.tsx b/packages/compat/src/components/ToolbarSpacer/index.tsx index edcb79a7b49..c546eea98a3 100644 --- a/packages/compat/src/components/ToolbarSpacer/index.tsx +++ b/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; From c251db2227e96041e54e1f080986ac6778551bf9 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 25 Oct 2024 14:10:26 +0200 Subject: [PATCH 2/2] add WITH_WEB_COMPONENT_IMPORT_PATH --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d1f786b08cb..8a0ac2de64b 100644 --- a/package.json +++ b/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",