refactor: replace root re-exports with named exports

.github/workflows/release-snapshot.yml

@@ -1,7 +1,6 @@
 name: 'Release - Snapshot'
 
-on:
-  workflow_dispatch
+on: workflow_dispatch
 
 jobs:
   test:
@@ -34,34 +33,23 @@ jobs:
         run: |
           npm install -g npm
           yarn install
+          yarn build
 
-      - name: version
+      - name: publish
         run: |
           git config user.email ${{ secrets.BOT_GIT_EMAIL }}
           git config user.name ${{ secrets.BOT_GIT_USERNAME }}
 
           git_hash=$(git rev-parse --short "$GITHUB_SHA")
           current_branch=$(node -p -e "'${{ github.ref }}'.replace('refs/heads/', '')")
-          echo "current_branch=${current_branch}" >> "$GITHUB_ENV"
 
-          ${GITHUB_WORKSPACE}/node_modules/.bin/lerna version "0.0.0-${git_hash}" \
+          ${GITHUB_WORKSPACE}/node_modules/.bin/lerna publish "0.0.0-${git_hash}" \
             --exact \
             --no-push \
             --no-git-tag-version \
+            --pre-dist-tag dev \
             --allow-branch ${current_branch}
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
-          NPM_CONFIG_PROVENANCE: true
 
-      - name: build
-        run: yarn build
-
-      - name: publish to npm
-        run: |
-          ${GITHUB_WORKSPACE}/node_modules/.bin/lerna publish from-git \
-            --pre-dist-tag dev \
-            --allow-branch ${{ env.current_branch }}
         env:
-          GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
           NPM_CONFIG_PROVENANCE: true

packages/base/src/index.ts

@@ -5,8 +5,8 @@ import { I18nStore } from './stores/I18nStore.js';
 import { StyleStore } from './stores/StyleStore.js';
 import { ThemingParameters } from './styling/ThemingParameters.js';
 
-export * from './styling/CssSizeVariables.js';
-export * from './utils/index.js';
+export { CssSizeVariables, CssSizeVariablesNames, CozySizes, CompactSizes } from './styling/CssSizeVariables.js';
+export { debounce, deprecationNotice, enrichEventWithDetails, throttle } from './utils/index.js';
 export * from './hooks/index.js';
 
 export { I18nStore, StyleStore, ThemingParameters, Device, hooks };

packages/base/src/styling/CssSizeVariables.ts

@@ -35,6 +35,11 @@ export const CssSizeVariables = new Proxy(CssSizeVariablesNames, {
   get: (target, prop: string): string => `var(${target[prop] as string})`
 });
 
+/**
+ * __Private__ CSS variables used for size calculation depending on content density.
+ *
+ * @private
+ */
 export const CozySizes = {
   [CssSizeVariablesNames.ui5WcrBarHeight]: `2.75rem`,
   [CssSizeVariablesNames.ui5WcrButtonTopBottomPadding]: `0.25rem 0`,
@@ -61,6 +66,11 @@ export const CozySizes = {
   [CssSizeVariablesNames.ui5WcrElementHeight]: ThemingParameters.sapElement_Height
 };
 
+/**
+ * __Private__ CSS variables used for size calculation depending on content density.
+ *
+ * @private
+ */
 export const CompactSizes = {
   [CssSizeVariablesNames.ui5WcrBarHeight]: `2.5rem`,
   [CssSizeVariablesNames.ui5WcrButtonTopBottomPadding]: `0.1875rem 0`,

packages/compat/package.json

@@ -12,7 +12,9 @@
       "default": "./dist/index.js"
     },
     "./package.json": "./package.json",
-    "./styles.css": "./dist/css/index.css"
+    "./styles.css": "./dist/css/index.css",
+    "./dist/*": "./dist/*",
+    "./dist/*.js": "./dist/*.js"
   },
   "homepage": "https://sap.github.io/ui5-webcomponents-react",
   "repository": {

packages/compat/src/index.ts

@@ -1,16 +1,27 @@
 import VersionInfo from './generated/VersionInfo.js';
 
-export * from './components/Loader/index.js';
-export * from './components/OverflowToolbarButton/index.js';
-export * from './components/OverflowToolbarToggleButton/index.js';
-export * from './components/Table/index.js';
-export * from './components/TableCell/index.js';
-export * from './components/TableColumn/index.js';
-export * from './components/TableGroupRow/index.js';
-export * from './components/TableRow/index.js';
-export * from './components/Toolbar/index.js';
-export * from './components/ToolbarSeparator/index.js';
-export * from './components/ToolbarSpacer/index.js';
+export type { LoaderPropTypes } from './components/Loader/index.js';
+export { Loader } from './components/Loader/index.js';
+export type { OverflowToolbarButtonPropTypes } from './components/OverflowToolbarButton/index.js';
+export { OverflowToolbarButton } from './components/OverflowToolbarButton/index.js';
+export type { OverflowToolbarToggleButtonPropTypes } from './components/OverflowToolbarToggleButton/index.js';
+export { OverflowToolbarToggleButton } from './components/OverflowToolbarToggleButton/index.js';
+export type { TableDomRef, TablePropTypes } from './components/Table/index.js';
+export { Table } from './components/Table/index.js';
+export type { TableCellDomRef, TableCellPropTypes } from './components/TableCell/index.js';
+export { TableCell } from './components/TableCell/index.js';
+export type { TableColumnDomRef, TableColumnPropTypes } from './components/TableColumn/index.js';
+export { TableColumn } from './components/TableColumn/index.js';
+export type { TableGroupRowDomRef, TableGroupRowPropTypes } from './components/TableGroupRow/index.js';
+export { TableGroupRow } from './components/TableGroupRow/index.js';
+export type { TableRowDomRef, TableRowPropTypes } from './components/TableRow/index.js';
+export { TableRow } from './components/TableRow/index.js';
+export type { ToolbarPropTypes } from './components/Toolbar/index.js';
+export { Toolbar } from './components/Toolbar/index.js';
+export type { ToolbarSeparatorPropTypes } from './components/ToolbarSeparator/index.js';
+export { ToolbarSeparator } from './components/ToolbarSeparator/index.js';
+export type { ToolbarSpacerPropTypes } from './components/ToolbarSpacer/index.js';
+export { ToolbarSpacer } from './components/ToolbarSpacer/index.js';
 
 export { LoaderType } from './enums/LoaderType.js';
 export { ToolbarDesign } from './enums/ToolbarDesign.js';

packages/cypress-commands/TestSetup.mdx

@@ -15,7 +15,7 @@ UI5 Web Components for React is using [Cypress](https://www.cypress.io/) as pref
 When launching Cypress the first time you're guided through the setup, which then will create a [configuration file](https://docs.cypress.io/guides/references/configuration) for you. You can use any configuration you like, but since we're heavily relying on web-components, we recommend traversing the shadow DOM per default:
 
 ```js
-includeShadowDom: true
+includeShadowDom: true;
 ```
 
 [Here](https://docs.cypress.io/guides/component-testing/react/overview) you can find the Cypress Quickstart tutorial for React.

packages/main/scripts/create-enum-export.mjs

@@ -12,11 +12,47 @@ const enums = fs
   // filter internal components
   .filter((file) => !INTERNAL_COMPONENTS.includes(file));
 
-let fileContent = `// This is an autogenerated file, please do not modify this file manually.
+// enums/index.ts
+let fileContentEnums = `// This is an autogenerated file, please do not modify this file manually.
 // In case you added a new file to the /enums folder, please rerun the scripts/create-enum-export.js script.
 
 `;
 
-fileContent += enums.map((file) => `export * from './${file}.js';`).join('\n');
+fileContentEnums += enums
+  .map((file) => {
+    const fileName = path.basename(file, '.js');
+    return `export { ${fileName} } from './${file}.js';`;
+  })
+  .join('\n');
 
-fs.writeFileSync(path.join(PATHS.packages, 'main', 'src', 'enums', 'index.ts'), fileContent);
+fs.writeFileSync(path.join(PATHS.packages, 'main', 'src', 'enums', 'index.ts'), fileContentEnums);
+
+// index.ts
+const TARGET_FILE = path.join(PATHS.packages, 'main', 'src', 'index.ts');
+
+const fileContent = fs.readFileSync(TARGET_FILE, 'utf8');
+const [beforeSection] = fileContent.split(
+  '// ================================\n// Enums\n// ================================\n'
+);
+
+let newContent = `// This part is auto-generated, please do not modify it manually.
+// In case you added a new file to the /enums folder, please rerun the scripts/create-enum-export.js script.\n\n`;
+newContent += enums
+  .map((file) => {
+    const fileName = path.basename(file, '.js');
+    return `export { ${fileName} } from './enums/${file}.js';`;
+  })
+  .join('\n');
+
+// Create the new file content with updated section
+const updatedFileContent = `
+${beforeSection}
+// ================================
+// Enums
+// ================================
+${newContent}`;
+
+// Write the updated content back to the file
+fs.writeFileSync(TARGET_FILE, updatedFileContent);
+
+console.log('Files updated successfully.');

packages/main/src/components/ActionSheet/ActionSheet.cy.tsx

@@ -1,5 +1,5 @@
-import type { ButtonPropTypes } from '../../webComponents/index.js';
-import { Button, Label } from '../../webComponents/index.js';
+import type { ButtonPropTypes } from '../../index.js';
+import { Button, Label } from '../../index.js';
 import type { ActionSheetPropTypes } from './index.js';
 import { ActionSheet } from './index.js';
 

packages/main/src/components/ActionSheet/ActionSheet.stories.tsx

@@ -8,8 +8,8 @@ import deleteIcon from '@ui5/webcomponents-icons/dist/delete.js';
 import emailIcon from '@ui5/webcomponents-icons/dist/email.js';
 import forwardIcon from '@ui5/webcomponents-icons/dist/forward.js';
 import { useEffect, useRef, useState } from 'react';
-import type { ButtonDomRef } from '../../webComponents/index.js';
-import { Button } from '../../webComponents/index.js';
+import type { ButtonDomRef } from '../../index.js';
+import { Button } from '../../index.js';
 import { ActionSheet } from './index.js';
 
 const meta = {

packages/main/src/components/ActionSheet/index.tsx

@@ -7,16 +7,12 @@ import { clsx } from 'clsx';
 import type { ReactElement } from 'react';
 import { forwardRef, useEffect, useReducer, useRef, useState } from 'react';
 import { AVAILABLE_ACTIONS, CANCEL, X_OF_Y } from '../../i18n/i18n-defaults.js';
+import type { ButtonPropTypes, ResponsivePopoverDomRef, ResponsivePopoverPropTypes } from '../../index.js';
+import { Button, ResponsivePopover } from '../../index.js';
 import { addCustomCSSWithScoping } from '../../internal/addCustomCSSWithScoping.js';
 import { flattenFragments, getUi5TagWithSuffix } from '../../internal/utils.js';
 import { CustomThemingParameters } from '../../themes/CustomVariables.js';
 import type { UI5WCSlotsNode } from '../../types/index.js';
-import type {
-  ButtonPropTypes,
-  ResponsivePopoverDomRef,
-  ResponsivePopoverPropTypes
-} from '../../webComponents/index.js';
-import { Button, ResponsivePopover } from '../../webComponents/index.js';
 import { classNames, styleData } from './ActionSheet.module.css.js';
 
 export interface ActionSheetPropTypes extends Omit<ResponsivePopoverPropTypes, 'header' | 'headerText' | 'children'> {

packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.cy.tsx

@@ -1,6 +1,6 @@
 import { getRGBColor } from '@ui5/webcomponents-base/dist/util/ColorConversion';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
-import { DeviationIndicator, ValueColor } from '../../enums';
+import { DeviationIndicator, ValueColor } from '../../enums/index.js';
 import type { CardPropTypes } from '../../webComponents/Card/index.js';
 import { Card } from '../../webComponents/Card/index.js';
 import { Text } from '../../webComponents/Text/index.js';

packages/main/src/components/AnalyticalCardHeader/index.tsx

@@ -6,7 +6,8 @@ import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { MouseEventHandler, ReactElement, ReactNode } from 'react';
 import { cloneElement, forwardRef, useId } from 'react';
-import { DeviationIndicator, ValueColor } from '../../enums/index.js';
+import { DeviationIndicator } from '../../enums/DeviationIndicator.js';
+import { ValueColor } from '../../enums/ValueColor.js';
 import {
   ARIA_DESC_CARD_HEADER,
   NUMERICCONTENT_DEVIATION_DOWN,
@@ -16,9 +17,9 @@ import {
   SEMANTIC_COLOR_GOOD,
   SEMANTIC_COLOR_NEUTRAL
 } from '../../i18n/i18n-defaults.js';
+import { Icon } from '../../index.js';
 import { flattenFragments } from '../../internal/utils.js';
 import type { CommonProps } from '../../types/index.js';
-import { Icon } from '../../webComponents/index.js';
 import type { NumericSideIndicatorPropTypes } from '../NumericSideIndicator/index.js';
 import { classNames, styleData } from './AnalyticalCardHeader.module.css.js';
 

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -2,18 +2,15 @@ import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import { useCallback, useEffect, useMemo, useRef, useState, version as reactVersion } from 'react';
 import type { AnalyticalTableDomRef, AnalyticalTablePropTypes } from '../..';
+import { AnalyticalTable, AnalyticalTableHooks, Button, Input } from '../..';
 import {
-  AnalyticalTable,
-  AnalyticalTableHooks,
   AnalyticalTableScaleWidthMode,
   AnalyticalTableSelectionBehavior,
   AnalyticalTableSelectionMode,
   AnalyticalTableSubComponentsBehavior,
   AnalyticalTableVisibleRowCountMode,
-  Button,
-  IndicationColor,
-  Input
-} from '../..';
+  IndicationColor
+} from '../../enums/index.js';
 import { useManualRowSelect } from './pluginHooks/useManualRowSelect';
 import { useRowDisableSelection } from './pluginHooks/useRowDisableSelection';
 import { cssVarToRgb, cypressPassThroughTestsFactory } from '@/cypress/support/utils';

packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx

@@ -15,7 +15,7 @@ import {
   FlexBoxJustifyContent,
   TextAlign
 } from '../../enums/index.js';
-import { Button, MultiComboBox, MultiComboBoxItem, Option, Select, Tag, Text } from '../../webComponents/index.js';
+import { Button, MultiComboBox, MultiComboBoxItem, Option, Select, Tag, Text } from '../../index.js';
 import { FlexBox } from '../FlexBox';
 import { AnalyticalTable } from './index.js';
 

packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx

@@ -4,7 +4,7 @@ import iconNavDownArrow from '@ui5/webcomponents-icons/dist/navigation-down-arro
 import iconNavRightArrow from '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
 import { CssSizeVariables, useCurrentTheme, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import { Button, Icon } from '../../../../webComponents/index.js';
+import { Button, Icon } from '../../../../index.js';
 import { classNames, styleData } from './Expandable.module.css.js';
 
 const getPadding = (level) => {

packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx

@@ -2,7 +2,7 @@ import iconNavDownArrow from '@ui5/webcomponents-icons/dist/navigation-down-arro
 import iconNavRightArrow from '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
 import type { CSSProperties } from 'react';
 import { TextAlign } from '../../../../enums/index.js';
-import { Icon } from '../../../../webComponents/index.js';
+import { Icon } from '../../../../index.js';
 
 const tableGroupExpandCollapseIcon = {
   color: 'var(--sapContent_IconColor)',

packages/main/src/components/AnalyticalTable/hooks/useDynamicColumnWidths.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { AnalyticalTableScaleWidthMode } from '../../../enums/index.js';
+import { AnalyticalTableScaleWidthMode } from '../../../index.js';
 import { DEFAULT_COLUMN_WIDTH } from '../defaults/Column/index.js';
 import type { AnalyticalTableColumnDefinition, ReactTableHooks, TableInstance } from '../types/index.js';
 

packages/main/src/components/ExpandableText/index.tsx

@@ -5,8 +5,8 @@ import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import { forwardRef, useId, useState } from 'react';
 import { CLOSE_POPOVER, SHOW_FULL_TEXT, SHOW_LESS, SHOW_MORE } from '../../i18n/i18n-defaults.js';
+import { Link } from '../../index.js';
 import type { CommonProps } from '../../types/index.js';
-import { Link } from '../../webComponents/index.js';
 import { ResponsivePopover } from '../../webComponents/ResponsivePopover/index.js';
 import type { TextPropTypes } from '../../webComponents/Text/index.js';
 import { Text } from '../../webComponents/Text/index.js';

packages/main/src/components/FilterBar/FilterBar.cy.tsx

@@ -9,7 +9,7 @@ import {
   StepInput,
   Switch,
   Token
-} from '../../webComponents/index.js';
+} from '../../index.js';
 import { FilterGroupItem } from '../FilterGroupItem/index.js';
 import { VariantManagement } from '../VariantManagement/index.js';
 import { VariantItem } from '../VariantManagement/VariantItem.js';

packages/main/src/components/FilterBar/FilterBar.stories.tsx

@@ -22,7 +22,7 @@ import {
   Switch,
   Title,
   Token
-} from '../../webComponents/index.js';
+} from '../../index.js';
 import { Text } from '../../webComponents/Text/index.js';
 import { FilterGroupItem } from '../FilterGroupItem/index.js';
 import { FlexBox } from '../FlexBox/index.js';

packages/main/src/components/FilterBar/FilterDialog.tsx

@@ -29,16 +29,7 @@ import {
   VISIBLE,
   VISIBLE_AND_ACTIVE
 } from '../../i18n/i18n-defaults.js';
-import { addCustomCSSWithScoping } from '../../internal/addCustomCSSWithScoping.js';
-import type { OnReorderParams } from '../../internal/FilterBarDialogContext.js';
-import { FilterBarDialogContext } from '../../internal/FilterBarDialogContext.js';
-import { stopPropagation } from '../../internal/stopPropagation.js';
-import type {
-  DialogDomRef,
-  InputPropTypes,
-  SegmentedButtonPropTypes,
-  TableSelectionDomRef
-} from '../../webComponents/index.js';
+import type { DialogDomRef, InputPropTypes, SegmentedButtonPropTypes, TableSelectionDomRef } from '../../index.js';
 import {
   Bar,
   Button,
@@ -55,7 +46,11 @@ import {
   TableHeaderRow,
   TableSelection,
   Title
-} from '../../webComponents/index.js';
+} from '../../index.js';
+import { addCustomCSSWithScoping } from '../../internal/addCustomCSSWithScoping.js';
+import type { OnReorderParams } from '../../internal/FilterBarDialogContext.js';
+import { FilterBarDialogContext } from '../../internal/FilterBarDialogContext.js';
+import { stopPropagation } from '../../internal/stopPropagation.js';
 import type { FilterGroupItemInternalProps } from '../FilterGroupItem/types.js';
 import { FlexBox } from '../FlexBox/index.js';
 import { MessageBox } from '../MessageBox/index.js';

packages/main/src/components/FilterBar/index.tsx

@@ -19,8 +19,8 @@ import {
   SEARCH,
   SHOW_FILTER_BAR
 } from '../../i18n/i18n-defaults.js';
-import type { DialogDomRef, ToolbarButtonDomRef } from '../../webComponents/index.js';
-import { Icon, Toolbar, ToolbarButton } from '../../webComponents/index.js';
+import type { DialogDomRef, ToolbarButtonDomRef } from '../../index.js';
+import { Icon, Toolbar, ToolbarButton } from '../../index.js';
 import { FilterGroupItem } from '../FilterGroupItem/index.js';
 import type { FilterGroupItemInternalProps } from '../FilterGroupItem/types.js';
 import { FlexBox } from '../FlexBox/index.js';

packages/main/src/components/FilterBar/types.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties, MouseEvent, ReactElement, ReactNode } from 'react';
+import type { DialogPropTypes, InputPropTypes, ToolbarButtonPropTypes } from '../../index.js';
 import type { CommonProps } from '../../types/index.js';
-import type { DialogPropTypes, InputPropTypes, ToolbarButtonPropTypes } from '../../webComponents/index.js';
 import type { FilterGroupItemInternalProps } from '../FilterGroupItem/types.js';
 
 interface OnToggleFiltersEvent extends Omit<MouseEvent, 'detail'> {