Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: replace root re-exports with named exports #6375

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
refactor: replace root re-exports with named exports
  • Loading branch information
Lukas742 committed Sep 17, 2024
commit 180e03f46b01d0121d8f0abdcfd556b9fdedf731
4 changes: 2 additions & 2 deletions packages/base/src/index.ts
Original file line number Diff line number Diff line change
@@ -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 };
10 changes: 10 additions & 0 deletions packages/base/src/styling/CssSizeVariables.ts
Original file line number Diff line number Diff line change
@@ -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`,
4 changes: 3 additions & 1 deletion packages/compat/package.json
Original file line number Diff line number Diff line change
@@ -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": {
33 changes: 22 additions & 11 deletions packages/compat/src/index.ts
Original file line number Diff line number Diff line change
@@ -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';
2 changes: 1 addition & 1 deletion packages/cypress-commands/TestSetup.mdx
Original file line number Diff line number Diff line change
@@ -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.
42 changes: 39 additions & 3 deletions packages/main/scripts/create-enum-export.mjs
Original file line number Diff line number Diff line change
@@ -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.');
4 changes: 2 additions & 2 deletions packages/main/src/components/ActionSheet/ActionSheet.cy.tsx
Original file line number Diff line number Diff line change
@@ -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';

Original file line number Diff line number Diff line change
@@ -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 = {
8 changes: 2 additions & 6 deletions packages/main/src/components/ActionSheet/index.tsx
Original file line number Diff line number Diff line change
@@ -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'> {
Original file line number Diff line number Diff line change
@@ -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';
5 changes: 3 additions & 2 deletions packages/main/src/components/AnalyticalCardHeader/index.tsx
Original file line number Diff line number Diff line change
@@ -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';

Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -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';

Original file line number Diff line number Diff line change
@@ -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) => {
Original file line number Diff line number Diff line change
@@ -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)',
Original file line number Diff line number Diff line change
@@ -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';

2 changes: 1 addition & 1 deletion packages/main/src/components/ExpandableText/index.tsx
Original file line number Diff line number Diff line change
@@ -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';
2 changes: 1 addition & 1 deletion packages/main/src/components/FilterBar/FilterBar.cy.tsx
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -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';
17 changes: 6 additions & 11 deletions packages/main/src/components/FilterBar/FilterDialog.tsx
Original file line number Diff line number Diff line change
@@ -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';
4 changes: 2 additions & 2 deletions packages/main/src/components/FilterBar/index.tsx
Original file line number Diff line number Diff line change
@@ -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';
2 changes: 1 addition & 1 deletion packages/main/src/components/FilterBar/types.ts
Original file line number Diff line number Diff line change
@@ -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'> {
4 changes: 2 additions & 2 deletions packages/main/src/components/FilterGroupItem/index.tsx
Original file line number Diff line number Diff line change
@@ -22,10 +22,10 @@ import {
MOVE_UP,
UP_ARROW
} from '../../i18n/i18n-defaults.js';
import type { ButtonPropTypes, TableRowDomRef } from '../../index.js';
import { BusyIndicator, Button, Icon, Label, TableCell, TableRow } from '../../index.js';
import type { ReorderDirections } from '../../internal/FilterBarDialogContext.js';
import { FilterBarDialogContext } from '../../internal/FilterBarDialogContext.js';
import type { ButtonPropTypes, TableRowDomRef } from '../../webComponents/index.js';
import { BusyIndicator, Button, Icon, Label, TableCell, TableRow } from '../../webComponents/index.js';
import { FlexBox } from '../FlexBox/index.js';
import { classNames, styleData } from './FilterGroupItem.module.css.js';
import type { FilterGroupItemInternalProps, FilterGroupItemPropTypes } from './types.js';
12 changes: 2 additions & 10 deletions packages/main/src/components/FlexBox/FlexBox.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
import type { Meta, StoryObj } from '@storybook/react';
import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js';
import {
FlexBoxAlignItems,
FlexBoxDirection,
FlexBoxJustifyContent,
FlexBoxWrap,
Icon,
Input,
Label,
Title
} from '../..';
import { Icon, Input, Label, Title } from '../..';
import { FlexBoxAlignItems, FlexBoxDirection, FlexBoxJustifyContent, FlexBoxWrap } from '../../enums/index.js';
import { FlexBox } from './index.js';

const meta = {
3 changes: 2 additions & 1 deletion packages/main/src/components/MessageBox/MessageBox.cy.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import addIcon from '@ui5/webcomponents-icons/dist/add.js';
import { useState } from 'react';
import { Button, Icon, MessageBoxAction, MessageBoxType } from '../..';
import { Button, Icon } from '../..';
import { MessageBoxAction, MessageBoxType } from '../../enums/index.js';
import { MessageBox } from './index.js';

describe('MessageBox', () => {
4 changes: 2 additions & 2 deletions packages/main/src/components/MessageBox/index.tsx
Original file line number Diff line number Diff line change
@@ -27,8 +27,8 @@ import {
WARNING,
YES
} from '../../i18n/i18n-defaults.js';
import type { ButtonPropTypes, DialogDomRef, DialogPropTypes } from '../../webComponents/index.js';
import { Button, Dialog, Icon, Text, Title } from '../../webComponents/index.js';
import type { ButtonPropTypes, DialogDomRef, DialogPropTypes } from '../../index.js';
import { Button, Dialog, Icon, Text, Title } from '../../index.js';
import { classNames, styleData } from './MessageBox.module.css.js';

// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
Loading
Loading