((props, ref) => {
17 | const { children, titleBarId } = props;
18 | return (
19 |
20 | {typeof children === 'string' &&
{children} }
21 | {isValidElement(children) && children}
22 |
23 | );
24 | });
25 |
26 | TitleBar.displayName = 'TitleBar';
27 |
--------------------------------------------------------------------------------
/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx:
--------------------------------------------------------------------------------
1 | export const Cell = ({ cell: { value = '', isGrouped }, column, row, webComponentsReactProperties }) => {
2 | let cellContent = `${value ?? ''}`;
3 | if (isGrouped) {
4 | cellContent += ` (${row.subRows.length})`;
5 | }
6 | return (
7 |
12 | {cellContent}
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/packages/main/src/components/AnalyticalTable/defaults/Column/RepeatedValue.tsx:
--------------------------------------------------------------------------------
1 | export const RepeatedValue = () => null;
2 |
--------------------------------------------------------------------------------
/packages/main/src/components/AnalyticalTable/defaults/NoDataComponent/index.tsx:
--------------------------------------------------------------------------------
1 | interface NoDataComponentProps {
2 | noDataText: string;
3 | className: string;
4 | }
5 |
6 | export const DefaultNoDataComponent = ({ noDataText, className }: NoDataComponentProps) => {
7 | return (
8 |
9 | {noDataText}
10 |
11 | );
12 | };
13 |
14 | DefaultNoDataComponent.displayName = 'DefaultNoDataComponent';
15 |
--------------------------------------------------------------------------------
/packages/main/src/components/AnalyticalTable/hooks/useResizeColumnsConfig.ts:
--------------------------------------------------------------------------------
1 | import type { MouseEvent } from 'react';
2 | import type { ReactTableHooks } from '../types/index.js';
3 |
4 | const useGetResizerProps = (props) => {
5 | return {
6 | ...props,
7 | 'aria-hidden': 'true',
8 | onMouseDown: (e: MouseEvent) => {
9 | e.preventDefault();
10 | props.onMouseDown(e);
11 | },
12 | };
13 | };
14 |
15 | export const useResizeColumnsConfig = (hooks: ReactTableHooks) => {
16 | hooks.getResizerProps.push(useGetResizerProps);
17 | };
18 |
19 | useResizeColumnsConfig.pluginName = 'useResizeColumnsConfig';
20 |
--------------------------------------------------------------------------------
/packages/main/src/components/AnalyticalTable/hooks/useVisibleColumnsWidth.ts:
--------------------------------------------------------------------------------
1 | import type { ReactTableHooks, TableInstance } from '../types/index.js';
2 |
3 | const getVisibleColumnsWidth = (instance: TableInstance) => {
4 | const visibleColumnsWidth = instance.visibleColumns.map((item) => item.totalWidth);
5 | Object.assign(instance, { visibleColumnsWidth });
6 | };
7 |
8 | export const useVisibleColumnsWidth = (hooks: ReactTableHooks) => {
9 | hooks.useInstance.push(getVisibleColumnsWidth);
10 | };
11 | useVisibleColumnsWidth.pluginName = 'useVisibleColumnsWidth';
12 |
--------------------------------------------------------------------------------
/packages/main/src/components/AnalyticalTable/pluginHooks/AnalyticalTableHooks.ts:
--------------------------------------------------------------------------------
1 | import { useAnnounceEmptyCells } from './useAnnounceEmptyCells.js';
2 | import { useIndeterminateRowSelection } from './useIndeterminateRowSelection.js';
3 | import { useManualRowSelect } from './useManualRowSelect.js';
4 | import { useOnColumnResize } from './useOnColumnResize.js';
5 | import { useOrderedMultiSort } from './useOrderedMultiSort.js';
6 | import { useRowDisableSelection } from './useRowDisableSelection.js';
7 |
8 | export {
9 | useAnnounceEmptyCells,
10 | useIndeterminateRowSelection,
11 | useManualRowSelect,
12 | useOnColumnResize,
13 | useOrderedMultiSort,
14 | useRowDisableSelection,
15 | };
16 |
--------------------------------------------------------------------------------
/packages/main/src/components/FlexBox/FlexBox.mdx:
--------------------------------------------------------------------------------
1 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import { Canvas, Meta } from '@storybook/blocks';
3 | import * as ComponentStories from './FlexBox.stories';
4 |
5 | ).props?.id === id
11 | );
12 | });
13 | };
14 |
15 | export const getSectionElementById = (objectPage: HTMLDivElement, isSubSection: boolean, id: string | undefined) => {
16 | return objectPage?.querySelector(
17 | `#${isSubSection ? 'ObjectPageSubSection' : 'ObjectPageSection'}-${CSS.escape(id)}`,
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/packages/main/src/components/ObjectPageHeader/ObjectPageHeader.module.css:
--------------------------------------------------------------------------------
1 | .header {
2 | background-color: var(--sapObjectHeader_Background);
3 | position: sticky;
4 | z-index: 1;
5 | padding-block-start: 1rem;
6 | padding-block-end: 1rem;
7 | display: var(--_ui5wcr_ObjectPage_header_display);
8 | overflow: hidden;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/main/src/components/ObjectPageTitle/ActionsSpacer.tsx:
--------------------------------------------------------------------------------
1 | import type { MouseEventHandler } from 'react';
2 |
3 | interface ActionsSpacerProps {
4 | onClick: MouseEventHandler;
5 | noHover?: boolean;
6 | }
7 |
8 | export const ActionsSpacer = ({ onClick, noHover }: ActionsSpacerProps) => {
9 | return (
10 | Note: Corresponds to `flex-start`.
5 | */
6 | Start = 'Start',
7 | /**
8 | * Items are centered.Note: Corresponds to `center`.
10 | */
11 | Center = 'Center',
12 | /**
13 | * Items are aligned toward the end of the flex-direction.Note: Corresponds to `flex-end`.
15 | */
16 | End = 'End',
17 | /**
18 | * Items are aligned by their baseline.Note: Corresponds to `baseline`.
20 | */
21 | Baseline = 'Baseline',
22 | /**
23 | * Items are stretched to fill the container.Note: Corresponds to `stretch`.
25 | */
26 | Stretch = 'Stretch',
27 | }
28 |
--------------------------------------------------------------------------------
/packages/main/src/enums/FlexBoxDirection.ts:
--------------------------------------------------------------------------------
1 | export enum FlexBoxDirection {
2 | /**
3 | * Items are placed top to bottom.Note: Corresponds to `column`.
5 | */
6 | Column = 'Column',
7 | /**
8 | * Items are placed bottom to top.Note: Corresponds to `column-reverse`.
10 | */
11 | ColumnReverse = 'ColumnReverse',
12 | /**
13 | * Items are placed left to right in `ltr` and right to left in `rtl`.Note: Corresponds to `row`.
15 | */
16 | Row = 'Row',
17 | /**
18 | * Items are placed right to left in `ltr` and left to right in `rtl`.Note: Corresponds to `row-reverse`.
20 | */
21 | RowReverse = 'RowReverse',
22 | }
23 |
--------------------------------------------------------------------------------
/packages/main/src/enums/FlexBoxJustifyContent.ts:
--------------------------------------------------------------------------------
1 | export enum FlexBoxJustifyContent {
2 | /**
3 | * Items are aligned toward the start of the flex-direction.Note: Corresponds to `flex-start`.
5 | */
6 | Start = 'Start',
7 | /**
8 | * Items are centered.Note: Corresponds to `center`.
10 | */
11 | Center = 'Center',
12 | /**
13 | * Items are aligned toward the end of the flex-direction.Note: Corresponds to `flex-end`.
15 | */
16 | End = 'End',
17 | /**
18 | * Items are evenly distributed on the main-axis with equal space around them.Note: Corresponds to `space-around`.
20 | */
21 | SpaceAround = 'SpaceAround',
22 | /**
23 | * Items are evenly distributed on the main-axis; first item is on the start line, last item on the end line.Note: Corresponds to `space-between`.
25 | */
26 | SpaceBetween = 'SpaceBetween',
27 | }
28 |
--------------------------------------------------------------------------------
/packages/main/src/enums/FlexBoxWrap.ts:
--------------------------------------------------------------------------------
1 | export enum FlexBoxWrap {
2 | /**
3 | * All will stay on one line. Note: Corresponds to `nowrap`.
5 | */
6 | NoWrap = 'NoWrap',
7 | /**
8 | * Items will wrap onto multiple lines. (top to bottom)Note: Corresponds to `wrap`.
10 | */
11 | Wrap = 'Wrap',
12 | /**
13 | * Items will wrap onto multiple lines. (bottom to top)Note: Corresponds to `wrap-reverse`.
15 | */
16 | WrapReverse = 'WrapReverse',
17 | }
18 |
--------------------------------------------------------------------------------
/packages/main/src/enums/GridPosition.ts:
--------------------------------------------------------------------------------
1 | export enum GridPosition {
2 | Left = 'Left',
3 | Center = 'Center',
4 | Right = 'Right',
5 | }
6 |
--------------------------------------------------------------------------------
/packages/main/src/enums/MessageBoxAction.ts:
--------------------------------------------------------------------------------
1 | export enum MessageBoxAction {
2 | Abort = 'Abort',
3 | Cancel = 'Cancel',
4 | Close = 'Close',
5 | Delete = 'Delete',
6 | Ignore = 'Ignore',
7 | No = 'No',
8 | OK = 'OK',
9 | Retry = 'Retry',
10 | Yes = 'Yes',
11 | }
12 |
--------------------------------------------------------------------------------
/packages/main/src/enums/MessageBoxType.ts:
--------------------------------------------------------------------------------
1 | export enum MessageBoxType {
2 | Confirm = 'Confirm',
3 | Error = 'Error',
4 | Information = 'Information',
5 | Success = 'Success',
6 | Warning = 'Warning',
7 | }
8 |
--------------------------------------------------------------------------------
/packages/main/src/enums/ObjectPageMode.ts:
--------------------------------------------------------------------------------
1 | export enum ObjectPageMode {
2 | /**
3 | * All `ObjectPageSections` and `ObjectPageSubSections` are displayed on one page.
4 | * Selecting tabs will scroll to the corresponding section.
5 | */
6 | Default = 'Default',
7 | /**
8 | * All `ObjectPageSections` are displayed on separate pages.
9 | * Selecting tabs will lead to the corresponding page.
10 | */
11 | IconTabBar = 'IconTabBar',
12 | }
13 |
--------------------------------------------------------------------------------
/packages/main/src/enums/Size.ts:
--------------------------------------------------------------------------------
1 | export enum Size {
2 | Small = 'Small',
3 | Medium = 'Medium',
4 | Large = 'Large',
5 | }
6 |
--------------------------------------------------------------------------------
/packages/main/src/enums/TextAlign.ts:
--------------------------------------------------------------------------------
1 | export enum TextAlign {
2 | Begin = 'Begin',
3 | End = 'End',
4 | Left = 'Left',
5 | Right = 'Right',
6 | Center = 'Center',
7 | Initial = 'Initial',
8 | }
9 |
--------------------------------------------------------------------------------
/packages/main/src/enums/Theme.ts:
--------------------------------------------------------------------------------
1 | export enum Theme {
2 | sap_fiori_3 = 'sap_fiori_3',
3 | sap_fiori_3_dark = 'sap_fiori_3_dark',
4 | sap_fiori_3_hcb = 'sap_fiori_3_hcb',
5 | sap_fiori_3_hcw = 'sap_fiori_3_hcw',
6 | sap_horizon = 'sap_horizon',
7 | sap_horizon_dark = 'sap_horizon_dark',
8 | sap_horizon_hcb = 'sap_horizon_hcb',
9 | sap_horizon_hcw = 'sap_horizon_hcw',
10 | }
11 |
--------------------------------------------------------------------------------
/packages/main/src/enums/ValueColor.ts:
--------------------------------------------------------------------------------
1 | export enum ValueColor {
2 | /**
3 | * Critical value color.
4 | */
5 | Critical = 'Critical',
6 | /**
7 | * Error value color.
8 | */
9 | Error = 'Error',
10 | /**
11 | * Good value color.
12 | */
13 | Good = 'Good',
14 | /**
15 | * Neutral value color.
16 | */
17 | Neutral = 'Neutral',
18 | /**
19 | * None value color.
20 | * _Note_: The None value color is set to prevent the display of tooltip 'Neutral' for numeric content.
21 | */
22 | None = 'None',
23 | }
24 |
--------------------------------------------------------------------------------
/packages/main/src/enums/VerticalAlign.ts:
--------------------------------------------------------------------------------
1 | export enum VerticalAlign {
2 | Bottom = 'Bottom',
3 | Inherit = 'Inherit',
4 | Middle = 'Middle',
5 | Top = 'Top',
6 | }
7 |
--------------------------------------------------------------------------------
/packages/main/src/internal/ContainerQueries.ts:
--------------------------------------------------------------------------------
1 | export const ContainerQueries = {
2 | S: '@container (max-width: 599px)',
3 | M: '@container (min-width: 600px) and (max-width: 1023px)',
4 | L: '@container (min-width: 1024px) and (max-width: 1439px)',
5 | XL: '@container (min-width: 1440px)',
6 | } as const;
7 |
8 | export const ResponsiveContainerPadding = {
9 | [ContainerQueries.S]: { paddingInline: '1rem' },
10 | [ContainerQueries.M]: { paddingInline: '2rem' },
11 | [ContainerQueries.L]: { paddingInline: '2rem' },
12 | [ContainerQueries.XL]: { paddingInline: '3rem' },
13 | } as const;
14 |
--------------------------------------------------------------------------------
/packages/main/src/internal/DynamicPageStickyHeader.css:
--------------------------------------------------------------------------------
1 | .dynamicPageStickyContent::part(fit-content) {
2 | position: static;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/main/src/internal/MessageViewContext.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 | import type { MessageItemPropTypes } from '../components/MessageView/MessageItem.js';
3 |
4 | export type SelectedMessage = MessageItemPropTypes & { titleTextStr: string };
5 |
6 | interface MessageViewContextType {
7 | selectMessage: (message: SelectedMessage) => void;
8 | }
9 |
10 | export const MessageViewContext = createContext({
11 | selectMessage: (_message: SelectedMessage) => {},
12 | });
13 |
--------------------------------------------------------------------------------
/packages/main/src/internal/OverflowPopoverContext.ts:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from 'react';
2 |
3 | const SYMBOL = Symbol.for('@ui5/webcomponents-react/OverflowPopoverContext');
4 |
5 | interface IOverflowPopoverContext {
6 | inPopover: boolean;
7 | }
8 |
9 | const OverflowPopoverContext = createContext({ inPopover: false });
10 |
11 | export function getOverflowPopoverContext(): typeof OverflowPopoverContext {
12 | globalThis[SYMBOL] ??= OverflowPopoverContext;
13 | return globalThis[SYMBOL];
14 | }
15 |
16 | export function useOverflowPopoverContext() {
17 | return useContext(getOverflowPopoverContext());
18 | }
19 |
--------------------------------------------------------------------------------
/packages/main/src/internal/SplitterLayoutContext.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | interface ISplitterLayoutContext {
4 | vertical: boolean;
5 | reset: boolean;
6 | }
7 |
8 | export const SplitterLayoutContext = createContext({
9 | vertical: true,
10 | reset: false,
11 | });
12 |
--------------------------------------------------------------------------------
/packages/main/src/internal/VariantManagementContext.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 | import type { VariantItemPropTypes } from '../components/VariantManagement/VariantItem.js';
3 | import type { ListItemStandardDomRef } from '../webComponents/ListItemStandard/index.js';
4 |
5 | interface VariantManagementContextTypes {
6 | selectVariantItem: (_selectedVariant: SelectedVariant) => void;
7 | selectedVariant: SelectedVariant;
8 | }
9 |
10 | export interface SelectedVariant extends VariantItemPropTypes {
11 | variantItem: ListItemStandardDomRef;
12 | }
13 |
14 | export const VariantManagementContext = createContext({
15 | selectVariantItem: (_selectedVariant: SelectedVariant) => {},
16 | selectedVariant: undefined,
17 | });
18 |
--------------------------------------------------------------------------------
/packages/main/src/internal/getRandomId.ts:
--------------------------------------------------------------------------------
1 | export const getRandomId = () => {
2 | if ('randomUUID' in crypto) {
3 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
4 | // @ts-ignore
5 | return crypto.randomUUID();
6 | }
7 | const uint32 = window.crypto.getRandomValues(new Uint32Array(1))[0];
8 | return uint32.toString(16);
9 | };
10 |
--------------------------------------------------------------------------------
/packages/main/src/internal/safeGetChildrenArray.ts:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react';
2 | import { Children, isValidElement } from 'react';
3 |
4 | export const safeGetChildrenArray = >(children: unknown): T[] => {
5 | const childArray = [];
6 |
7 | Children.forEach(children, (child) => {
8 | if (isValidElement(child)) {
9 | childArray.push(child);
10 | }
11 | });
12 |
13 | return childArray as T[];
14 | };
15 |
--------------------------------------------------------------------------------
/packages/main/src/internal/stopPropagation.ts:
--------------------------------------------------------------------------------
1 | export const stopPropagation = (e) => {
2 | e.stopPropagation();
3 | e.stopImmediatePropagation?.();
4 | };
5 |
--------------------------------------------------------------------------------
/packages/main/src/internal/withWebComponent.tsx:
--------------------------------------------------------------------------------
1 | export { withWebComponent } from '@ui5/webcomponents-react-base';
2 | export type { WithWebComponentPropTypes } from '@ui5/webcomponents-react-base';
3 |
--------------------------------------------------------------------------------
/packages/main/src/themes/sap_belize.css:
--------------------------------------------------------------------------------
1 | [data-sap-theme='sap_belize'] {
2 | --_ui5wcr_ActionSheet_BoxShadow: var(--sapContent_HeaderShadow);
3 | --_ui5wcr_Scrollbar_BorderRadius: 0;
4 | --_ui5wcr_Splitter_BarBorderFocus: 0.0625rem dotted var(--sapContent_FocusColor);
5 | --_ui5wcr_ActionSheet_TopBorderRadius: var(--sapElement_BorderCornerRadius);
6 | --_ui5wcr_Splitter_BarBorderHighContrastFix: 0.0625rem dotted var(--sapContent_FocusColor);
7 | }
8 |
--------------------------------------------------------------------------------
/packages/main/src/themes/sap_belize_hcb.css:
--------------------------------------------------------------------------------
1 | [data-sap-theme='sap_belize_hcb'] {
2 | --_ui5wcr_Scrollbar_Border: 0.0625rem solid #999;
3 | --_ui5wcr_ActionSheet_BoxShadow: var(--sapContent_HeaderShadow);
4 | --_ui5wcr_Scrollbar_BorderRadius: 0;
5 | --_ui5wcr_ActionSheet_TopBorderRadius: var(--sapElement_BorderCornerRadius);
6 | }
7 |
--------------------------------------------------------------------------------
/packages/main/src/themes/sap_belize_hcw.css:
--------------------------------------------------------------------------------
1 | [data-sap-theme='sap_belize_hcw'] {
2 | --_ui5wcr_Scrollbar_Border: 0.0625rem solid #585858;
3 | --_ui5wcr_ActionSheet_BoxShadow: var(--sapContent_HeaderShadow);
4 | --_ui5wcr_Scrollbar_BorderRadius: 0;
5 | --_ui5wcr_ActionSheet_TopBorderRadius: var(--sapElement_BorderCornerRadius);
6 | }
7 |
--------------------------------------------------------------------------------
/packages/main/src/themes/sap_fiori_3.css:
--------------------------------------------------------------------------------
1 | [data-sap-theme='sap_fiori_3'] {
2 | --_ui5wcr_ActionSheet_BoxShadow: var(--sapContent_HeaderShadow);
3 | --_ui5wcr_Splitter_BarBorderFocus: 0.0625rem dotted var(--sapContent_FocusColor);
4 | --_ui5wcr_ActionSheet_TopBorderRadius: var(--sapElement_BorderCornerRadius);
5 | --_ui5wcr_Splitter_BarBorderHighContrastFix: 0.0625rem dotted var(--sapContent_FocusColor);
6 | }
7 |
--------------------------------------------------------------------------------
/packages/main/src/themes/sap_fiori_3_dark.css:
--------------------------------------------------------------------------------
1 | [data-sap-theme='sap_fiori_3_dark'] {
2 | --_ui5wcr_ActionSheet_BoxShadow: var(--sapContent_HeaderShadow);
3 | --_ui5wcr_Splitter_BarBorderFocus: 0.0625rem dotted var(--sapContent_FocusColor);
4 | --_ui5wcr_ActionSheet_TopBorderRadius: var(--sapElement_BorderCornerRadius);
5 | --_ui5wcr_Splitter_BarBorderHighContrastFix: 0.0625rem dotted var(--sapContent_FocusColor);
6 | }
7 |
--------------------------------------------------------------------------------
/packages/main/src/themes/sap_fiori_3_hcb.css:
--------------------------------------------------------------------------------
1 | [data-sap-theme='sap_fiori_3_hcb'] {
2 | --_ui5wcr_Splitter_BarOutline: 0.15rem dotted var(--sapGroup_ContentBorderColor);
3 | --_ui5wcr_ActionSheet_BoxShadow: var(--sapContent_HeaderShadow);
4 | --_ui5wcr_Splitter_BarBorderFocus: solid var(--sapGroup_ContentBorderColor) 0.0625rem;
5 | --_ui5wcr_Splitter_BarBorderStyle: solid var(--sapGroup_ContentBorderColor) 0.0625rem;
6 | --_ui5wcr_ActionSheet_TopBorderRadius: var(--sapElement_BorderCornerRadius);
7 | --_ui5wcr_Splitter_ContentBorderColor: var(--sapGroup_ContentBorderColor);
8 | --_ui5wcr_Splitter_BarBorderHighContrastFix: none;
9 | --_ui5wcr_Form_HeaderBorderWidth: calc(3 * var(--sapList_BorderWidth));
10 | }
11 |
--------------------------------------------------------------------------------
/packages/main/src/themes/sap_fiori_3_hcw.css:
--------------------------------------------------------------------------------
1 | [data-sap-theme='sap_fiori_3_hcw'] {
2 | --_ui5wcr_Splitter_BarOutline: 0.15rem dotted var(--sapGroup_ContentBorderColor);
3 | --_ui5wcr_ActionSheet_BoxShadow: var(--sapContent_HeaderShadow);
4 | --_ui5wcr_Splitter_BarBorderFocus: solid var(--sapGroup_ContentBorderColor) 0.0625rem;
5 | --_ui5wcr_Splitter_BarBorderStyle: solid var(--sapGroup_ContentBorderColor) 0.0625rem;
6 | --_ui5wcr_ActionSheet_TopBorderRadius: var(--sapElement_BorderCornerRadius);
7 | --_ui5wcr_Splitter_ContentBorderColor: var(--sapGroup_ContentBorderColor);
8 | --_ui5wcr_Splitter_BarBorderHighContrastFix: none;
9 | --_ui5wcr_Form_HeaderBorderWidth: calc(3 * var(--sapList_BorderWidth));
10 | }
11 |
--------------------------------------------------------------------------------
/packages/main/src/types/CommonProps.ts:
--------------------------------------------------------------------------------
1 | export type { CommonProps } from '@ui5/webcomponents-react-base';
2 |
--------------------------------------------------------------------------------
/packages/main/src/types/Ui5CustomEvent.ts:
--------------------------------------------------------------------------------
1 | export type { Ui5CustomEvent } from '@ui5/webcomponents-react-base';
2 |
--------------------------------------------------------------------------------
/packages/main/src/types/Ui5DomRef.ts:
--------------------------------------------------------------------------------
1 | export type { Ui5DomRef } from '@ui5/webcomponents-react-base';
2 |
--------------------------------------------------------------------------------
/packages/main/src/types/index.ts:
--------------------------------------------------------------------------------
1 | export type {
2 | ReducedReactNode,
3 | ReducedReactNodeWithBoolean,
4 | UI5WCSlotsNode,
5 | Nullable,
6 | CommonProps,
7 | Ui5CustomEvent,
8 | Ui5DomRef,
9 | } from '@ui5/webcomponents-react-base';
10 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/Avatar/Avatar.mdx:
--------------------------------------------------------------------------------
1 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import { Canvas, Meta } from '@storybook/blocks';
3 | import * as ComponentStories from './Avatar.stories';
4 |
5 | ;
21 |
22 | export default meta;
23 | type Story = StoryObj;
24 |
25 | export const Default: Story = {};
26 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/AvatarGroup/AvatarGroup.mdx:
--------------------------------------------------------------------------------
1 | import { Canvas, Meta } from '@storybook/blocks';
2 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
3 | import * as ComponentStories from './AvatarGroup.stories';
4 |
5 | {SubcomponentsSection}
23 |
24 | ## BreadcrumbsItem
25 |
26 | {SubcomponentsSection}
23 |
24 | ## ColorPaletteItem
25 |
26 | ;
11 |
12 | export default meta;
13 | type Story = StoryObj;
14 |
15 | export const Default: Story = {};
16 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/DatePicker/DatePicker.mdx:
--------------------------------------------------------------------------------
1 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import { Canvas, Meta } from '@storybook/blocks';
3 | import * as ComponentStories from './DatePicker.stories';
4 |
5 | {
30 | setDialogIsOpen(true);
31 | }}
32 | >
33 | Open Dialog
34 |
35 | ;
21 |
22 | export default meta;
23 | type Story = StoryObj;
24 |
25 | export const Default: Story = {};
26 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/Label/Label.mdx:
--------------------------------------------------------------------------------
1 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import { Canvas, Meta } from '@storybook/blocks';
3 | import * as ComponentStories from './Label.stories';
4 |
5 | ;
15 |
16 | export default meta;
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {};
20 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/Link/Link.mdx:
--------------------------------------------------------------------------------
1 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import { Canvas, Meta } from '@storybook/blocks';
3 | import * as ComponentStories from './Link.stories';
4 |
5 | ;
19 |
20 | export default meta;
21 | type Story = StoryObj;
22 |
23 | export const Default: Story = {};
24 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/MessageStrip/MessageStrip.mdx:
--------------------------------------------------------------------------------
1 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import { Canvas, Meta } from '@storybook/blocks';
3 | import * as ComponentStories from './MessageStrip.stories';
4 |
5 | ;
20 |
21 | export default meta;
22 | type Story = StoryObj;
23 |
24 | export const Default: Story = {};
25 |
26 | export const WithIcon: Story = {
27 | args: {
28 | icon: {SubcomponentsSection}
22 |
23 | ## ProductSwitchItem
24 |
25 | ;
15 |
16 | export default meta;
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {};
20 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/RadioButton/RadioButton.mdx:
--------------------------------------------------------------------------------
1 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import { Canvas, Meta } from '@storybook/blocks';
3 | import * as ComponentStories from './RadioButton.stories';
4 |
5 | ;
13 |
14 | export default meta;
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {};
18 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/RatingIndicator/RatingIndicator.mdx:
--------------------------------------------------------------------------------
1 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import { Canvas, Meta } from '@storybook/blocks';
3 | import * as ComponentStories from './RatingIndicator.stories';
4 |
5 | ;
11 |
12 | export default meta;
13 | type Story = StoryObj;
14 |
15 | export const Default: Story = {};
16 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/SegmentedButton/SegmentedButton.mdx:
--------------------------------------------------------------------------------
1 | import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
3 | import { Canvas, Description, Markdown, Meta } from '@storybook/blocks';
4 | import { SegmentedButtonItem } from '../SegmentedButtonItem';
5 | import * as ComponentStories from './SegmentedButton.stories';
6 | import { excludePropsForAbstract } from '@sb/utils';
7 |
8 | {SubcomponentsSection}
23 |
24 | ## SegmentedButtonItem
25 |
26 | Button 1
16 | Button 2
17 | Button 3
18 |
19 | ),
20 | },
21 | tags: ['package:@ui5/webcomponents'],
22 | } satisfies Meta;
23 |
24 | export default meta;
25 | type Story = StoryObj;
26 |
27 | export const Default: Story = {};
28 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/Slider/Slider.mdx:
--------------------------------------------------------------------------------
1 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import { Canvas, Meta } from '@storybook/blocks';
3 | import * as ComponentStories from './Slider.stories';
4 |
5 | ;
13 |
14 | export default meta;
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {};
18 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/SplitButton/SplitButton.mdx:
--------------------------------------------------------------------------------
1 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import { Canvas, Meta } from '@storybook/blocks';
3 | import * as ComponentStories from './SplitButton.stories';
4 |
5 | ;
19 |
20 | export default meta;
21 | type Story = StoryObj;
22 |
23 | export const Default: Story = {};
24 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/StepInput/StepInput.mdx:
--------------------------------------------------------------------------------
1 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import { Canvas, Meta } from '@storybook/blocks';
3 | import * as ComponentStories from './StepInput.stories';
4 |
5 | ;
16 |
17 | export default meta;
18 | type Story = StoryObj;
19 |
20 | export const Default: Story = {};
21 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/Switch/Switch.mdx:
--------------------------------------------------------------------------------
1 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import { Canvas, Meta } from '@storybook/blocks';
3 | import * as ComponentStories from './Switch.stories';
4 |
5 | ;
11 |
12 | export default meta;
13 | type Story = StoryObj;
14 |
15 | export const Default: Story = {};
16 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/Tag/Tag.mdx:
--------------------------------------------------------------------------------
1 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import { Canvas, Meta } from '@storybook/blocks';
3 | import * as ComponentStories from './Tag.stories';
4 |
5 | ;
16 |
17 | export default meta;
18 | type Story = StoryObj;
19 |
20 | export const Default: Story = {};
21 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/TimePicker/TimePicker.mdx:
--------------------------------------------------------------------------------
1 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import { Canvas, Meta } from '@storybook/blocks';
3 | import * as ComponentStories from './TimePicker.stories';
4 |
5 | ;
16 |
17 | export default meta;
18 | type Story = StoryObj;
19 |
20 | export const Default: Story = {};
21 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/Title/Title.mdx:
--------------------------------------------------------------------------------
1 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import { Canvas, Meta } from '@storybook/blocks';
3 | import * as ComponentStories from './Title.stories';
4 |
5 | ;
17 |
18 | export default meta;
19 | type Story = StoryObj;
20 |
21 | export const Default: Story = {};
22 |
--------------------------------------------------------------------------------
/packages/main/src/webComponents/ToggleButton/ToggleButton.mdx:
--------------------------------------------------------------------------------
1 | import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2 | import { Canvas, Meta } from '@storybook/blocks';
3 | import * as ComponentStories from './ToggleButton.stories';
4 |
5 | ;
18 |
19 | export default meta;
20 | type Story = StoryObj;
21 |
22 | export const Default: Story = {};
23 |
--------------------------------------------------------------------------------
/packages/main/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "references": [
4 | {
5 | "path": "../base/tsconfig.build.json"
6 | }
7 | ],
8 | "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx", "**/*.stories.tsx"]
9 | }
10 |
--------------------------------------------------------------------------------
/packages/main/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "strict": true,
5 | "noImplicitAny": false,
6 | "strictNullChecks": false,
7 | "isolatedModules": true,
8 | "emitDeclarationOnly": true
9 | },
10 | "references": [
11 | {
12 | "path": "../base/tsconfig.json"
13 | }
14 | ],
15 | "include": ["src"]
16 | }
17 |
--------------------------------------------------------------------------------
/patterns/Docs.mdx:
--------------------------------------------------------------------------------
1 | import {Footer} from '@sb/components';
2 | import {Meta} from '@storybook/blocks';
3 |
4 | UI5 Web Components React - Navigation Layout Page
8 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/patterns/navigation-layout/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "navigation-layout",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "lint": "eslint .",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "@ui5/webcomponents": "2.11.0",
14 | "@ui5/webcomponents-base": "2.11.0",
15 | "@ui5/webcomponents-fiori": "2.11.0",
16 | "@ui5/webcomponents-icons": "2.11.0",
17 | "@ui5/webcomponents-react": "2.11.1",
18 | "react": "19.1.0",
19 | "react-dom": "19.1.0"
20 | },
21 | "devDependencies": {
22 | "@types/react": "19.1.5",
23 | "@types/react-dom": "19.1.5",
24 | "@vitejs/plugin-react": "4.5.0",
25 | "eslint": "9.27.0",
26 | "eslint-plugin-react-hooks": "5.2.0",
27 | "eslint-plugin-react-refresh": "0.4.20",
28 | "globals": "16.2.0",
29 | "typescript": "^5.0.2",
30 | "typescript-eslint": "8.32.1",
31 | "vite": "6.3.5"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/patterns/navigation-layout/src/ClearAllMessageBox.tsx:
--------------------------------------------------------------------------------
1 | import type { MessageBoxPropTypes } from '@ui5/webcomponents-react';
2 | import { MessageBox, Text } from '@ui5/webcomponents-react';
3 |
4 | export function ClearAllMessageBox(props: Pick) {
5 | const { open, onClose } = props;
6 | return (
7 |
8 | Are you sure you want to clear all the notifications?
9 |
10 | );
11 | }
12 |
13 | ClearAllMessageBox.displayName = 'ClearAllMessageBox';
14 |
--------------------------------------------------------------------------------
/patterns/navigation-layout/src/assets/avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/ui5-webcomponents-react/86664332772a527af88f6accfcf95d3dd0a6c465/patterns/navigation-layout/src/assets/avatar.png
--------------------------------------------------------------------------------
/patterns/navigation-layout/src/main.tsx:
--------------------------------------------------------------------------------
1 | import '@ui5/webcomponents-react/dist/Assets.js';
2 | import { ThemeProvider } from '@ui5/webcomponents-react';
3 | import { StrictMode } from 'react';
4 | import { createRoot } from 'react-dom/client';
5 | import App from './App.tsx';
6 | import './index.css';
7 |
8 | createRoot(document.getElementById('root') as HTMLElement).render(
9 |
10 |
11 |
13 | ,
14 | );
15 |
--------------------------------------------------------------------------------
/patterns/navigation-layout/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// (({ children }, ref) => {
5 | return (
6 |
7 |
15 | {children}
16 |
17 |
18 | );
19 | });
20 |
21 | SelectionAssistantContainer.displayName = 'SelectionAssistantContainer';
22 |
--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @see https://prettier.io/docs/configuration
3 | * @type {import("prettier").Config}
4 | */
5 | const config = {
6 | printWidth: 120,
7 | singleQuote: true,
8 | arrowParens: 'always',
9 | trailingComma: 'all',
10 | embeddedLanguageFormatting: 'auto',
11 | overrides: [
12 | {
13 | files: '*.mdx',
14 | options: {
15 | embeddedLanguageFormatting: 'off',
16 | },
17 | },
18 | ],
19 | };
20 |
21 | export default config;
22 |
--------------------------------------------------------------------------------
/templates/nextjs-app/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["next/core-web-vitals", "next/typescript"]
3 | }
4 |
--------------------------------------------------------------------------------
/templates/nextjs-app/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 |
30 | # vercel
31 | .vercel
32 |
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 |
--------------------------------------------------------------------------------
/templates/nextjs-app/app/clientAssetsImport.ts:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import '@ui5/webcomponents-react/dist/Assets';
4 |
--------------------------------------------------------------------------------
/templates/nextjs-app/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/ui5-webcomponents-react/86664332772a527af88f6accfcf95d3dd0a6c465/templates/nextjs-app/app/favicon.ico
--------------------------------------------------------------------------------
/templates/nextjs-app/app/globals.css:
--------------------------------------------------------------------------------
1 | /* to prevent flickering, only show the web-component when its custom-element is defined */
2 | :not(:defined) {
3 | display: none;
4 | }
5 |
6 | html,
7 | body {
8 | margin: 0;
9 | width: 100vw;
10 | height: 100vh;
11 | background: var(--sapBackgroundColor);
12 | font-family: var(--sapFontFamily);
13 | }
14 |
--------------------------------------------------------------------------------
/templates/nextjs-app/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import './clientAssetsImport.ts';
2 | import '@ui5/webcomponents-react/styles.css';
3 | import './globals.css';
4 | import { ThemeProvider } from '@ui5/webcomponents-react';
5 |
6 | export default function RootLayout({ children }: { children: React.ReactNode }) {
7 | return (
8 |
9 |
10 |
19 |
20 |
21 |
22 | {children}
23 |
24 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/templates/nextjs-app/app/page.tsx:
--------------------------------------------------------------------------------
1 | import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js';
2 | import { Avatar, ShellBar } from '@ui5/webcomponents-react';
3 |
4 | export default function Page() {
5 | return (
6 | <>
7 |
23 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/templates/nextjs-pages/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js';
2 | import { Avatar, ShellBar } from '@ui5/webcomponents-react';
3 |
4 | export default function Home() {
5 | return (
6 | <>
7 | Components App
8 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/templates/vite-ts/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import js from '@eslint/js';
2 | import globals from 'globals';
3 | import reactHooks from 'eslint-plugin-react-hooks';
4 | import reactRefresh from 'eslint-plugin-react-refresh';
5 | import tseslint from 'typescript-eslint';
6 |
7 | export default tseslint.config(
8 | { ignores: ['dist'] },
9 | {
10 | extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 | files: ['**/*.{ts,tsx}'],
12 | languageOptions: {
13 | ecmaVersion: 2020,
14 | globals: globals.browser,
15 | },
16 | plugins: {
17 | 'react-hooks': reactHooks,
18 | 'react-refresh': reactRefresh,
19 | },
20 | rules: {
21 | ...reactHooks.configs.recommended.rules,
22 | 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
23 | },
24 | },
25 | );
26 |
--------------------------------------------------------------------------------
/templates/vite-ts/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | UI5 Web Components React - Vite + TS
8 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/templates/vite-ts/src/App.cy.tsx:
--------------------------------------------------------------------------------
1 | import App from './App';
2 |
3 | describe('Component tests', () => {
4 | it('basic component test', () => {
5 | cy.mount(
10 |
11 |
13 | ,
14 | );
15 |
--------------------------------------------------------------------------------
/templates/vite-ts/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// ;
17 | export default content;
18 | }
19 |
--------------------------------------------------------------------------------