├── .nvmrc ├── .storybook ├── images │ ├── .nojekyll │ ├── googleda3b81df2a761821.html │ ├── favicon.ico │ ├── logo-ts.png │ ├── sb-pkg-filter.png │ └── master │ │ └── index.html ├── docs │ ├── SubcomponentsSection.md │ └── DesignCompliantExampleSection.md ├── addons │ └── version-switch │ │ └── manager.ts ├── demoImages │ ├── PC1.jpg │ ├── PC2.jpg │ ├── Person.png │ ├── Laptop1.jpg │ └── Laptop2.jpg ├── images-dev │ └── favicon.ico ├── scoping.ts ├── components │ ├── ArgTypesWithNote.module.css │ ├── ControlsWithNote.module.css │ ├── FilterBarExample.module.css │ ├── LabelWithWrapping.tsx │ ├── index.ts │ ├── SplitterElementContent.tsx │ ├── DomRefTable.module.css │ ├── ProjectTemplate.module.css │ ├── Footer.module.css │ ├── GitHub-Mark.tsx │ └── DocsHeader.module.css └── tsconfig.json ├── packages ├── cli │ ├── .gitignore │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── src │ │ ├── scripts │ │ ├── resolve-cem │ │ │ └── main.ts │ │ └── create-wrappers │ │ │ ├── AbstractRenderer.ts │ │ │ └── ExportsRenderer.ts │ │ └── util │ │ └── cem-reader.ts ├── cypress-commands │ ├── .gitignore │ ├── src │ │ └── index.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ ├── Queries.mdx │ └── Commands.mdx ├── compat │ ├── .gitignore │ ├── src │ │ ├── enums │ │ │ ├── ToolbarStyle.ts │ │ │ ├── LoaderType.ts │ │ │ └── ToolbarDesign.ts │ │ ├── components │ │ │ ├── ToolbarSeparator │ │ │ │ └── ToolbarSeparator.module.css │ │ │ └── ToolbarSpacer │ │ │ │ └── index.tsx │ │ ├── internal │ │ │ └── OverflowPopoverContext.ts │ │ └── index.ts │ ├── postcss.config.mjs │ ├── tsconfig.build.json │ └── tsconfig.json ├── base │ ├── .gitignore │ ├── tsconfig.build.json │ ├── src │ │ ├── hooks │ │ │ ├── index.ts │ │ │ ├── useI18nBundle.ts │ │ │ └── useViewportRange.ts │ │ ├── internal │ │ │ ├── hooks │ │ │ │ ├── useIsomorphicLayoutEffect.ts │ │ │ │ ├── index.ts │ │ │ │ └── useCurrentTheme.ts │ │ │ ├── types │ │ │ │ ├── Ui5CustomEvent.ts │ │ │ │ ├── index.ts │ │ │ │ └── CommonProps.ts │ │ │ └── utils │ │ │ │ └── addCustomCSSWithScoping.ts │ │ ├── types │ │ │ └── index.ts │ │ ├── Device │ │ │ └── EventProvider.ts │ │ └── index.ts │ └── tsconfig.json ├── ai │ ├── .gitignore │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── src │ │ ├── components │ │ └── PromptInput │ │ │ └── PromptInput.stories.tsx │ │ └── index.ts ├── charts │ ├── .gitignore │ ├── src │ │ ├── internal │ │ │ ├── defaults.ts │ │ │ ├── staticProps.ts │ │ │ └── ChartContainer.module.css │ │ ├── components │ │ │ ├── TimelineChart │ │ │ │ └── util │ │ │ │ │ ├── context.ts │ │ │ │ │ └── error.ts │ │ │ ├── PieChart │ │ │ │ ├── PieChart.module.css │ │ │ │ └── Placeholder.tsx │ │ │ ├── ColumnChartWithTrend │ │ │ │ ├── ColumnChartWithTrend.module.css │ │ │ │ └── ColumnChartWithTrend.mdx │ │ │ └── RadialChart │ │ │ │ └── RadialChart.mdx │ │ ├── interfaces │ │ │ ├── index.ts │ │ │ ├── IChartDimension.ts │ │ │ └── IPolarChartConfig.ts │ │ ├── hooks │ │ │ ├── useChartMargin.ts │ │ │ ├── useTooltipFormatter.ts │ │ │ ├── useOnClickInternal.ts │ │ │ ├── useLabelFormatter.ts │ │ │ ├── useLegendItemClick.ts │ │ │ └── useCancelAnimationFallback.ts │ │ └── resources │ │ │ └── NormalizedStackedChart.mdx │ ├── tsconfig.json │ ├── postcss.config.mjs │ └── tsconfig.build.json └── main │ ├── src │ ├── types │ │ ├── CommonProps.ts │ │ ├── Ui5DomRef.ts │ │ ├── Ui5CustomEvent.ts │ │ └── index.ts │ ├── components │ │ ├── VariantItem │ │ │ └── VariantItem.module.css │ │ ├── AnalyticalTable │ │ │ ├── defaults │ │ │ │ ├── Column │ │ │ │ │ ├── RepeatedValue.tsx │ │ │ │ │ └── Cell.tsx │ │ │ │ └── NoDataComponent │ │ │ │ │ └── index.tsx │ │ │ ├── hooks │ │ │ │ ├── useIsFirefox.ts │ │ │ │ ├── useCanUseVoiceOver.ts │ │ │ │ ├── useVisibleColumnsWidth.ts │ │ │ │ ├── useResizeColumnsConfig.ts │ │ │ │ └── useFontsReady.ts │ │ │ ├── TableBody │ │ │ │ └── EmptyRow.tsx │ │ │ ├── pluginHooks │ │ │ │ └── AnalyticalTableHooks.ts │ │ │ └── TitleBar │ │ │ │ └── index.tsx │ │ ├── SplitterElement │ │ │ └── SplitterElement.module.css │ │ ├── VariantManagement │ │ │ └── SaveViewDialog.module.css │ │ ├── ObjectPageHeader │ │ │ └── ObjectPageHeader.module.css │ │ ├── ObjectPage │ │ │ ├── context.ts │ │ │ └── CollapsedAvatar.module.css │ │ ├── FlexBox │ │ │ └── FlexBox.mdx │ │ ├── Grid │ │ │ ├── Grid.mdx │ │ │ └── Grid.module.css │ │ ├── SplitterLayout │ │ │ └── SplitterLayout.module.css │ │ ├── MessageViewButton │ │ │ └── MessageViewButton.mdx │ │ ├── ThemeProvider │ │ │ └── ThemeProvider.css │ │ ├── ObjectPageTitle │ │ │ └── ActionsSpacer.tsx │ │ ├── ResponsiveGridLayout │ │ │ └── ResponsiveGridLayout.mdx │ │ └── NumericSideIndicator │ │ │ └── NumericSideIndicator.module.css │ ├── enums │ │ ├── ContentDensity.ts │ │ ├── Size.ts │ │ ├── DeviationIndicator.ts │ │ ├── GridPosition.ts │ │ ├── VerticalAlign.ts │ │ ├── TextAlign.ts │ │ ├── MessageBoxType.ts │ │ ├── MessageBoxAction.ts │ │ ├── AnalyticalTableNoDataReason.ts │ │ ├── Theme.ts │ │ ├── ObjectPageMode.ts │ │ ├── AnalyticalTableSelectionMode.ts │ │ ├── FlexBoxWrap.ts │ │ ├── ValueColor.ts │ │ ├── AnalyticalTableSelectionBehavior.ts │ │ ├── AnalyticalTablePopinDisplay.ts │ │ ├── FlexBoxDirection.ts │ │ ├── AnalyticalTableScrollMode.ts │ │ ├── FlexBoxAlignItems.ts │ │ └── FlexBoxJustifyContent.ts │ ├── internal │ │ ├── DynamicPageStickyHeader.css │ │ ├── stopPropagation.ts │ │ ├── withWebComponent.tsx │ │ ├── SplitterLayoutContext.ts │ │ ├── getRandomId.ts │ │ ├── safeGetChildrenArray.ts │ │ ├── MessageViewContext.ts │ │ ├── ContainerQueries.ts │ │ ├── OverflowPopoverContext.ts │ │ └── VariantManagementContext.ts │ ├── themes │ │ ├── sap_belize_hcb.css │ │ ├── sap_belize_hcw.css │ │ ├── sap_fiori_3.css │ │ ├── sap_fiori_3_dark.css │ │ ├── sap_belize.css │ │ ├── sap_fiori_3_hcb.css │ │ └── sap_fiori_3_hcw.css │ └── webComponents │ │ ├── Switch │ │ ├── Switch.stories.tsx │ │ └── Switch.mdx │ │ ├── ColorPicker │ │ ├── ColorPicker.stories.tsx │ │ └── ColorPicker.mdx │ │ ├── Icon │ │ └── Icon.mdx │ │ ├── Link │ │ ├── Link.mdx │ │ └── Link.stories.tsx │ │ ├── Text │ │ └── Text.mdx │ │ ├── Label │ │ ├── Label.mdx │ │ └── Label.stories.tsx │ │ ├── Title │ │ ├── Title.mdx │ │ └── Title.stories.tsx │ │ ├── RatingIndicator │ │ ├── RatingIndicator.stories.tsx │ │ └── RatingIndicator.mdx │ │ ├── TextArea │ │ ├── TextArea.mdx │ │ └── TextArea.stories.tsx │ │ ├── Slider │ │ ├── Slider.stories.tsx │ │ └── Slider.mdx │ │ ├── Avatar │ │ ├── Avatar.mdx │ │ └── Avatar.stories.tsx │ │ ├── DatePicker │ │ └── DatePicker.mdx │ │ ├── Carousel │ │ └── Carousel.mdx │ │ ├── Page │ │ └── Page.mdx │ │ ├── ToggleButton │ │ ├── ToggleButton.mdx │ │ └── ToggleButton.stories.tsx │ │ ├── StepInput │ │ ├── StepInput.mdx │ │ └── StepInput.stories.tsx │ │ ├── TimePicker │ │ ├── TimePicker.mdx │ │ └── TimePicker.stories.tsx │ │ ├── AvatarGroup │ │ └── AvatarGroup.mdx │ │ ├── ExpandableText │ │ └── ExpandableText.mdx │ │ ├── RangeSlider │ │ ├── RangeSlider.mdx │ │ └── RangeSlider.stories.tsx │ │ ├── SplitButton │ │ ├── SplitButton.mdx │ │ └── SplitButton.stories.tsx │ │ ├── DateTimePicker │ │ └── DateTimePicker.mdx │ │ ├── DateRangePicker │ │ └── DateRangePicker.mdx │ │ ├── DynamicSideContent │ │ └── DynamicSideContent.mdx │ │ ├── ProgressIndicator │ │ ├── ProgressIndicator.mdx │ │ └── ProgressIndicator.stories.tsx │ │ ├── BarcodeScannerDialog │ │ └── BarcodeScannerDialog.mdx │ │ ├── Tag │ │ └── Tag.mdx │ │ ├── Panel │ │ └── Panel.mdx │ │ ├── CheckBox │ │ └── CheckBox.mdx │ │ ├── MessageStrip │ │ ├── MessageStrip.mdx │ │ └── MessageStrip.stories.tsx │ │ ├── Bar │ │ └── Bar.mdx │ │ ├── BusyIndicator │ │ └── BusyIndicator.mdx │ │ ├── FileUploader │ │ └── FileUploader.mdx │ │ ├── FlexibleColumnLayout │ │ └── FlexibleColumnLayout.mdx │ │ ├── RadioButton │ │ └── RadioButton.mdx │ │ ├── ProductSwitch │ │ └── ProductSwitch.mdx │ │ ├── SegmentedButton │ │ └── SegmentedButton.stories.tsx │ │ ├── IllustratedMessage │ │ └── IllustratedMessage.stories.tsx │ │ ├── Breadcrumbs │ │ └── Breadcrumbs.mdx │ │ └── Dialog │ │ └── Dialog.mdx │ ├── tsconfig.build.json │ ├── .gitignore │ ├── postcss.config.mjs │ ├── tsconfig.json │ ├── README.md │ └── scripts │ └── create-enum-export.mjs ├── .husky └── pre-commit ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ └── config.yml ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── open-source-security.yml ├── examples ├── vite-ts │ ├── src │ │ ├── vite-env.d.ts │ │ ├── AppShell.module.css │ │ ├── ToDos.module.css │ │ ├── index.css │ │ ├── TodoDetails.module.css │ │ ├── App.cy.tsx │ │ └── mockImplementations │ │ │ └── mockAPIs.ts │ ├── public │ │ └── person.png │ ├── cypress │ │ ├── fixtures │ │ │ └── example.json │ │ ├── e2e │ │ │ └── App.cy.tsx │ │ └── support │ │ │ ├── component-index.html │ │ │ └── e2e.ts │ ├── vite.config.ts │ ├── tsconfig.spec.json │ ├── tsconfig.node.json │ ├── .gitignore │ ├── cypress.config.ts │ ├── index.html │ ├── tsconfig.json │ └── eslint.config.mjs ├── nextjs-pages │ ├── pages │ │ ├── index.module.css │ │ ├── api │ │ │ └── todos │ │ │ │ └── [id].ts │ │ └── _app.tsx │ ├── next.config.js │ ├── styles │ │ └── globals.css │ ├── components │ │ └── AppShell │ │ │ └── AppShell.module.css │ ├── eslint.config.mjs │ ├── .gitignore │ ├── tsconfig.json │ └── package.json ├── react-router-ts │ ├── .gitignore │ ├── app │ │ ├── components │ │ │ ├── AppShellBar.module.css │ │ │ └── AppShell.tsx │ │ ├── routes.ts │ │ └── globals.css │ ├── public │ │ └── favicon.ico │ ├── react-router.config.ts │ ├── vite.config.ts │ ├── tsconfig.json │ └── README.md ├── nextjs-app │ ├── app │ │ ├── components │ │ │ ├── AppShellBar.module.css │ │ │ └── AppShell.tsx │ │ ├── favicon.ico │ │ ├── loading.module.css │ │ ├── loading.tsx │ │ ├── globals.css │ │ ├── page.tsx │ │ └── layout.tsx │ ├── next.config.js │ ├── eslint.config.mjs │ ├── .gitignore │ ├── package.json │ └── tsconfig.json └── remix-ts │ └── README.md ├── templates ├── vite-ts │ ├── src │ │ ├── vite-env.d.ts │ │ ├── index.css │ │ ├── App.cy.tsx │ │ ├── main.tsx │ │ └── App.tsx │ ├── cypress │ │ ├── fixtures │ │ │ └── example.json │ │ └── support │ │ │ └── component-index.html │ ├── vite.config.ts │ ├── cypress.config.ts │ ├── tsconfig.spec.json │ ├── tsconfig.node.json │ ├── .gitignore │ ├── index.html │ ├── tsconfig.json │ ├── eslint.config.mjs │ └── README.md ├── nextjs-app │ ├── app │ │ ├── clientAssetsImport.ts │ │ ├── favicon.ico │ │ ├── globals.css │ │ ├── page.tsx │ │ └── layout.tsx │ ├── next.config.js │ ├── eslint.config.mjs │ ├── .gitignore │ ├── package.json │ └── tsconfig.json └── nextjs-pages │ ├── next.config.js │ ├── styles │ └── globals.css │ ├── eslint.config.mjs │ ├── .gitignore │ ├── pages │ ├── index.tsx │ └── _app.tsx │ ├── tsconfig.json │ └── package.json ├── patterns ├── navigation-layout │ ├── src │ │ ├── vite-env.d.ts │ │ ├── assets │ │ │ └── avatar.png │ │ ├── main.tsx │ │ └── ClearAllMessageBox.tsx │ ├── vite.config.ts │ ├── tsconfig.node.json │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── tsconfig.json │ ├── eslint.config.mjs │ └── package.json ├── Docs.mdx └── selection-assistant │ └── SelectionAssistantContainer.tsx ├── .yarnrc.yml ├── assets ├── Logo.png ├── Logo-Sticker.png └── SAP_Best_R_grad_blk_scrn.png ├── makefile ├── .prettierignore ├── docs ├── styling │ ├── CssPartsExample.css │ ├── MyCustomElement.css │ ├── MyCustomElement.tsx │ └── CssPartsExample.tsx ├── ReadMeAI.mdx ├── Changelog.mdx ├── ReadMeCompat.mdx ├── MigrationGuide.css ├── knowledgeBaseExamples │ └── slotExamples.tsx ├── EmbeddedStackBlitz.tsx └── knowledge-base │ └── SsrLimitations.tsx ├── tsconfig.node.json ├── config ├── .gitmessage ├── layers-plugin.js └── paths.js ├── cypress └── support │ ├── component.tsx │ └── component-index.html ├── nx.json ├── .browserslistrc ├── tsconfig.spec.json ├── types.d.ts ├── .editorconfig ├── prettier.config.js ├── lerna.json ├── tsconfig.build.json ├── translation_v2.json ├── .gitignore ├── .pipeline └── config.yml └── tsconfig.json /.nvmrc: -------------------------------------------------------------------------------- 1 | 24.12.0 2 | -------------------------------------------------------------------------------- /.storybook/images/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/cli/.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | test -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | yarn run lint-staged 2 | -------------------------------------------------------------------------------- /packages/cypress-commands/.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | -------------------------------------------------------------------------------- /packages/compat/.gitignore: -------------------------------------------------------------------------------- 1 | /dist 2 | src/**/*.css.ts -------------------------------------------------------------------------------- /packages/base/.gitignore: -------------------------------------------------------------------------------- 1 | /LICENSE 2 | /NOTICE.txt 3 | /dist 4 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # general code owners 2 | * @MarcusNotheis @Lukas742 3 | -------------------------------------------------------------------------------- /examples/vite-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/vite-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/ai/.gitignore: -------------------------------------------------------------------------------- 1 | /LICENSE 2 | /NOTICE.txt 3 | /dist 4 | 5 | src/**/*.css.ts -------------------------------------------------------------------------------- /packages/cli/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /.storybook/docs/SubcomponentsSection.md: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | # Subcomponents 5 | -------------------------------------------------------------------------------- /packages/charts/.gitignore: -------------------------------------------------------------------------------- 1 | /LICENSE 2 | /NOTICE.txt 3 | /dist 4 | 5 | src/**/*.css.ts -------------------------------------------------------------------------------- /patterns/navigation-layout/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /.storybook/addons/version-switch/manager.ts: -------------------------------------------------------------------------------- 1 | import '../../components/VersionSwitch.js'; 2 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | 3 | yarnPath: .yarn/releases/yarn-4.12.0.cjs 4 | -------------------------------------------------------------------------------- /assets/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/assets/Logo.png -------------------------------------------------------------------------------- /examples/nextjs-pages/pages/index.module.css: -------------------------------------------------------------------------------- 1 | .pageHeader { 2 | padding-inline: 0; 3 | } 4 | -------------------------------------------------------------------------------- /packages/cypress-commands/src/index.ts: -------------------------------------------------------------------------------- 1 | import './commands.js'; 2 | import './queries.js'; 3 | -------------------------------------------------------------------------------- /.storybook/images/googleda3b81df2a761821.html: -------------------------------------------------------------------------------- 1 | google-site-verification: googleda3b81df2a761821.html 2 | -------------------------------------------------------------------------------- /makefile: -------------------------------------------------------------------------------- 1 | chromatic: 2 | git commit --allow-empty --message "[ci chromatic]" 3 | git push origin 4 | -------------------------------------------------------------------------------- /assets/Logo-Sticker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/assets/Logo-Sticker.png -------------------------------------------------------------------------------- /examples/react-router-ts/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | /.cache 4 | /build 5 | .env 6 | .react-router/ 7 | -------------------------------------------------------------------------------- /packages/main/src/types/CommonProps.ts: -------------------------------------------------------------------------------- 1 | export type { CommonProps } from '@ui5/webcomponents-react-base'; 2 | -------------------------------------------------------------------------------- /packages/main/src/types/Ui5DomRef.ts: -------------------------------------------------------------------------------- 1 | export type { Ui5DomRef } from '@ui5/webcomponents-react-base'; 2 | -------------------------------------------------------------------------------- /.storybook/demoImages/PC1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/.storybook/demoImages/PC1.jpg -------------------------------------------------------------------------------- /.storybook/demoImages/PC2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/.storybook/demoImages/PC2.jpg -------------------------------------------------------------------------------- /.storybook/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/.storybook/images/favicon.ico -------------------------------------------------------------------------------- /.storybook/images/logo-ts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/.storybook/images/logo-ts.png -------------------------------------------------------------------------------- /packages/main/src/types/Ui5CustomEvent.ts: -------------------------------------------------------------------------------- 1 | export type { Ui5CustomEvent } from '@ui5/webcomponents-react-base'; 2 | -------------------------------------------------------------------------------- /.storybook/demoImages/Person.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/.storybook/demoImages/Person.png -------------------------------------------------------------------------------- /templates/nextjs-app/app/clientAssetsImport.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import '@ui5/webcomponents-react/dist/Assets'; 4 | -------------------------------------------------------------------------------- /.storybook/demoImages/Laptop1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/.storybook/demoImages/Laptop1.jpg -------------------------------------------------------------------------------- /.storybook/demoImages/Laptop2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/.storybook/demoImages/Laptop2.jpg -------------------------------------------------------------------------------- /.storybook/images-dev/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/.storybook/images-dev/favicon.ico -------------------------------------------------------------------------------- /examples/vite-ts/public/person.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/examples/vite-ts/public/person.png -------------------------------------------------------------------------------- /packages/main/src/components/VariantItem/VariantItem.module.css: -------------------------------------------------------------------------------- 1 | .variantItem::part(title) { 2 | text-align: start; 3 | } 4 | -------------------------------------------------------------------------------- /packages/main/src/enums/ContentDensity.ts: -------------------------------------------------------------------------------- 1 | export enum ContentDensity { 2 | Cozy = 'Cozy', 3 | Compact = 'Compact', 4 | } 5 | -------------------------------------------------------------------------------- /.storybook/images/sb-pkg-filter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/.storybook/images/sb-pkg-filter.png -------------------------------------------------------------------------------- /assets/SAP_Best_R_grad_blk_scrn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/assets/SAP_Best_R_grad_blk_scrn.png -------------------------------------------------------------------------------- /examples/nextjs-app/app/components/AppShellBar.module.css: -------------------------------------------------------------------------------- 1 | .popover { 2 | } 3 | .popover::part(content) { 4 | padding: 0; 5 | } 6 | -------------------------------------------------------------------------------- /examples/nextjs-app/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/examples/nextjs-app/app/favicon.ico -------------------------------------------------------------------------------- /packages/compat/src/enums/ToolbarStyle.ts: -------------------------------------------------------------------------------- 1 | export enum ToolbarStyle { 2 | Clear = 'Clear', 3 | Standard = 'Standard', 4 | } 5 | -------------------------------------------------------------------------------- /packages/main/src/enums/Size.ts: -------------------------------------------------------------------------------- 1 | export enum Size { 2 | Small = 'Small', 3 | Medium = 'Medium', 4 | Large = 'Large', 5 | } 6 | -------------------------------------------------------------------------------- /templates/nextjs-app/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/templates/nextjs-app/app/favicon.ico -------------------------------------------------------------------------------- /examples/react-router-ts/app/components/AppShellBar.module.css: -------------------------------------------------------------------------------- 1 | .popover { 2 | } 3 | .popover::part(content) { 4 | padding: 0; 5 | } 6 | -------------------------------------------------------------------------------- /packages/charts/src/internal/defaults.ts: -------------------------------------------------------------------------------- 1 | export const defaultFormatter = (d) => d; 2 | 3 | export const defaultMaxYAxisWidth = 200; 4 | -------------------------------------------------------------------------------- /packages/main/src/internal/DynamicPageStickyHeader.css: -------------------------------------------------------------------------------- 1 | .dynamicPageStickyContent::part(fit-content) { 2 | position: static; 3 | } 4 | -------------------------------------------------------------------------------- /examples/nextjs-app/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | module.exports = nextConfig; 5 | -------------------------------------------------------------------------------- /examples/react-router-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/examples/react-router-ts/public/favicon.ico -------------------------------------------------------------------------------- /packages/base/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/compat/src/enums/LoaderType.ts: -------------------------------------------------------------------------------- 1 | export enum LoaderType { 2 | Determinate = 'Determinate', 3 | Indeterminate = 'Indeterminate', 4 | } 5 | -------------------------------------------------------------------------------- /packages/cypress-commands/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "include": ["src"], 4 | "exclude": ["test"] 5 | } 6 | -------------------------------------------------------------------------------- /packages/main/src/enums/DeviationIndicator.ts: -------------------------------------------------------------------------------- 1 | export enum DeviationIndicator { 2 | Down = 'Down', 3 | Up = 'Up', 4 | None = 'None', 5 | } 6 | -------------------------------------------------------------------------------- /packages/main/src/enums/GridPosition.ts: -------------------------------------------------------------------------------- 1 | export enum GridPosition { 2 | Left = 'Left', 3 | Center = 'Center', 4 | Right = 'Right', 5 | } 6 | -------------------------------------------------------------------------------- /templates/nextjs-app/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | module.exports = nextConfig; 5 | -------------------------------------------------------------------------------- /examples/vite-ts/src/AppShell.module.css: -------------------------------------------------------------------------------- 1 | .popover::part(content) { 2 | padding: 0; 3 | } 4 | 5 | .dynamicPage { 6 | height: calc(100% - 52px); 7 | } 8 | -------------------------------------------------------------------------------- /patterns/navigation-layout/src/assets/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UI5/webcomponents-react/HEAD/patterns/navigation-layout/src/assets/avatar.png -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | *.module.css.ts 2 | *.css.ts 3 | 4 | yarn.lock 5 | .next 6 | dist 7 | temp 8 | .out 9 | 10 | .nx 11 | /.nx/cache 12 | /.nx/workspace-data -------------------------------------------------------------------------------- /examples/vite-ts/src/ToDos.module.css: -------------------------------------------------------------------------------- 1 | .card { 2 | box-sizing: border-box; 3 | } 4 | 5 | .list { 6 | box-sizing: border-box; 7 | padding: 0.5rem; 8 | } 9 | -------------------------------------------------------------------------------- /packages/main/src/internal/stopPropagation.ts: -------------------------------------------------------------------------------- 1 | export const stopPropagation = (e) => { 2 | e.stopPropagation(); 3 | e.stopImmediatePropagation?.(); 4 | }; 5 | -------------------------------------------------------------------------------- /docs/styling/CssPartsExample.css: -------------------------------------------------------------------------------- 1 | .card::part(root) { 2 | background-color: lightgreen; 3 | } 4 | .card::part(content) { 5 | transform: rotate(180deg); 6 | } 7 | -------------------------------------------------------------------------------- /packages/main/src/enums/VerticalAlign.ts: -------------------------------------------------------------------------------- 1 | export enum VerticalAlign { 2 | Bottom = 'Bottom', 3 | Inherit = 'Inherit', 4 | Middle = 'Middle', 5 | Top = 'Top', 6 | } 7 | -------------------------------------------------------------------------------- /examples/nextjs-app/app/loading.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 100%; 3 | height: 100%; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | } 8 | -------------------------------------------------------------------------------- /examples/nextjs-pages/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | }; 5 | 6 | module.exports = nextConfig; 7 | -------------------------------------------------------------------------------- /packages/compat/src/enums/ToolbarDesign.ts: -------------------------------------------------------------------------------- 1 | export enum ToolbarDesign { 2 | Auto = 'Auto', 3 | Info = 'Info', 4 | Solid = 'Solid', 5 | Transparent = 'Transparent', 6 | } 7 | -------------------------------------------------------------------------------- /templates/nextjs-pages/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | }; 5 | 6 | module.exports = nextConfig; 7 | -------------------------------------------------------------------------------- /packages/charts/src/components/TimelineChart/util/context.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | export const TimelineChartBodyCtx = createContext({ chartBodyWidth: 0 }); 4 | -------------------------------------------------------------------------------- /packages/main/src/components/AnalyticalTable/defaults/Column/RepeatedValue.tsx: -------------------------------------------------------------------------------- 1 | export const RepeatedValue = () => null; 2 | 3 | RepeatedValue.displayName = 'RepeatedValueCellContent'; 4 | -------------------------------------------------------------------------------- /templates/vite-ts/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | width: 100vw; 4 | height: 100vh; 5 | background: var(--sapBackgroundColor); 6 | font-family: var(--sapFontFamily); 7 | } 8 | -------------------------------------------------------------------------------- /packages/base/src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | import { useI18nBundle } from './useI18nBundle.js'; 2 | import { useViewportRange } from './useViewportRange.js'; 3 | 4 | export { useI18nBundle, useViewportRange }; 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 | -------------------------------------------------------------------------------- /.storybook/scoping.ts: -------------------------------------------------------------------------------- 1 | import { setCompatCustomElementsScopingSuffix } from '@ui5/webcomponents-compat/dist/utils/CompatCustomElementsScope.js'; 2 | 3 | setCompatCustomElementsScopingSuffix('compat'); 4 | -------------------------------------------------------------------------------- /examples/vite-ts/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | width: 100vw; 4 | height: 100vh; 5 | background: var(--sapBackgroundColor); 6 | } 7 | 8 | #root { 9 | height: 100%; 10 | } 11 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /examples/nextjs-pages/styles/globals.css: -------------------------------------------------------------------------------- 1 | :not(:defined) { 2 | display: none; 3 | } 4 | 5 | html, 6 | body { 7 | max-width: 100vw; 8 | overflow-x: hidden; 9 | padding: 0; 10 | margin: 0; 11 | } 12 | -------------------------------------------------------------------------------- /examples/vite-ts/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /templates/vite-ts/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /.storybook/components/ArgTypesWithNote.module.css: -------------------------------------------------------------------------------- 1 | .tableContainer { 2 | margin-top: 25px; 3 | 4 | table { 5 | margin-top: 0 !important; 6 | } 7 | } 8 | 9 | .strip { 10 | margin-bottom: 10px; 11 | } 12 | -------------------------------------------------------------------------------- /examples/vite-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /packages/compat/src/components/ToolbarSeparator/ToolbarSeparator.module.css: -------------------------------------------------------------------------------- 1 | .separator { 2 | width: 0.0625rem; 3 | height: var(--_ui5wcr-ToolbarSeparatorHeight); 4 | background: var(--sapToolbar_SeparatorColor); 5 | } 6 | -------------------------------------------------------------------------------- /templates/vite-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Questions 4 | url: https://github.com/UI5/webcomponents-react/discussions 5 | about: Please ask and answer questions here. 6 | -------------------------------------------------------------------------------- /packages/main/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export type { 2 | ReducedReactNode, 3 | ReducedReactNodeWithBoolean, 4 | UI5WCSlotsNode, 5 | CommonProps, 6 | Ui5CustomEvent, 7 | Ui5DomRef, 8 | } from '@ui5/webcomponents-react-base'; 9 | -------------------------------------------------------------------------------- /examples/react-router-ts/app/routes.ts: -------------------------------------------------------------------------------- 1 | import { index, route, type RouteConfig } from '@react-router/dev/routes'; 2 | 3 | export default [index('./routes/index.tsx'), route('todos/:id', './routes/todo.tsx')] satisfies RouteConfig; 4 | -------------------------------------------------------------------------------- /patterns/navigation-layout/vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react'; 2 | import { defineConfig } from 'vite'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /packages/base/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "strict": true, 5 | "noImplicitAny": false, 6 | "strictNullChecks": false 7 | }, 8 | "include": ["src"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/main/src/components/SplitterElement/SplitterElement.module.css: -------------------------------------------------------------------------------- 1 | .splitterElement { 2 | display: flex; 3 | overflow: hidden; 4 | position: relative; 5 | will-change: flex-basis; 6 | min-width: 0px; 7 | min-height: 0px; 8 | } 9 | -------------------------------------------------------------------------------- /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(); 6 | cy.get('[ui5-shellbar]').should('be.visible'); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /.storybook/components/ControlsWithNote.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | margin-block-start: 25px !important; 3 | } 4 | 5 | .container:has(> .strip) table { 6 | margin-top: 0px; 7 | } 8 | 9 | .strip { 10 | margin-block-end: 10px; 11 | } 12 | -------------------------------------------------------------------------------- /examples/remix-ts/README.md: -------------------------------------------------------------------------------- 1 | # UI5 Web Components React - Remix Example 2 | 3 | This example got updated to use React Router v7. 4 | You can find the new example [here](https://github.com/UI5/webcomponents-react/tree/main/examples/react-router-ts). 5 | -------------------------------------------------------------------------------- /packages/base/src/internal/hooks/useIsomorphicLayoutEffect.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { useEffect, useLayoutEffect } from 'react'; 4 | 5 | export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect; 6 | -------------------------------------------------------------------------------- /examples/vite-ts/src/TodoDetails.module.css: -------------------------------------------------------------------------------- 1 | .card { 2 | margin-block-start: 1rem; 3 | box-sizing: border-box; 4 | } 5 | 6 | .form { 7 | padding: 1rem; 8 | } 9 | 10 | .formControl { 11 | width: 100%; 12 | max-width: 45rem; 13 | } 14 | -------------------------------------------------------------------------------- /templates/vite-ts/cypress.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'cypress'; 2 | 3 | export default defineConfig({ 4 | component: { 5 | devServer: { 6 | framework: 'react', 7 | bundler: 'vite', 8 | }, 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "allowJs": true 6 | }, 7 | "include": ["scripts", "config", ".github"], 8 | "files": ["prettier.config.js"] 9 | } 10 | -------------------------------------------------------------------------------- /docs/styling/MyCustomElement.css: -------------------------------------------------------------------------------- 1 | .containerCustomElement { 2 | background-color: var(--sapBackgroundColor); 3 | font-family: var(--sapFontFamily); 4 | height: 50px; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /.storybook/images/master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/ai/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.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 | -------------------------------------------------------------------------------- /.storybook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./../tsconfig.base.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "allowImportingTsExtensions": true 6 | }, 7 | "include": ["./**/*.js", "./**/*.tsx", "./**/*.ts", "../patterns/selection-assistant"] 8 | } 9 | -------------------------------------------------------------------------------- /examples/vite-ts/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "target": "es5", 5 | "lib": ["es5", "dom"], 6 | "types": ["cypress", "node"], 7 | "jsx": "react-jsx" 8 | }, 9 | "include": ["cypress", "src"] 10 | } 11 | -------------------------------------------------------------------------------- /templates/nextjs-pages/styles/globals.css: -------------------------------------------------------------------------------- 1 | :not(:defined) { 2 | display: none; 3 | } 4 | 5 | html, 6 | body { 7 | margin: 0; 8 | width: 100vw; 9 | height: 100vh; 10 | background: var(--sapBackgroundColor); 11 | font-family: var(--sapFontFamily); 12 | } 13 | -------------------------------------------------------------------------------- /templates/vite-ts/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "target": "es5", 5 | "lib": ["es5", "dom"], 6 | "types": ["cypress", "node"], 7 | "jsx": "react-jsx" 8 | }, 9 | "include": ["cypress", "src"] 10 | } 11 | -------------------------------------------------------------------------------- /examples/nextjs-pages/components/AppShell/AppShell.module.css: -------------------------------------------------------------------------------- 1 | .appShell { 2 | height: 100vh; 3 | width: 100vw; 4 | overflow: hidden; 5 | } 6 | 7 | .scrollContainer { 8 | height: calc(100vh - 3.25rem); 9 | overflow-y: auto; 10 | position: relative; 11 | } 12 | -------------------------------------------------------------------------------- /examples/react-router-ts/react-router.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from '@react-router/dev/config'; 2 | 3 | export default { 4 | // Config options... 5 | // Server-side render by default, to enable SPA mode set this to `false` 6 | ssr: true, 7 | } satisfies Config; 8 | -------------------------------------------------------------------------------- /packages/charts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "references": [ 4 | { 5 | "path": "../base/tsconfig.json" 6 | }, 7 | { 8 | "path": "../main/tsconfig.json" 9 | } 10 | ], 11 | "include": ["src"] 12 | } 13 | -------------------------------------------------------------------------------- /packages/main/.gitignore: -------------------------------------------------------------------------------- 1 | /components 2 | /enums 3 | /internal 4 | /webComponents 5 | /index.d.ts 6 | /index.esm.js 7 | /LICENSE 8 | /NOTICE.txt 9 | /scripts/wrapperGeneration/dist 10 | /dist 11 | /wrappers 12 | /ssr 13 | src/i18n/i18n-defaults.ts 14 | src/**/*.css.ts 15 | -------------------------------------------------------------------------------- /config/.gitmessage: -------------------------------------------------------------------------------- 1 | # type is one of fix, feat, chore, docs, style, refactor, perf, test 2 | [optional scope]: 3 | 4 | # [Optional] Body, Indicate a Breaking Change here by starting with BREAKING CHANGE 5 | 6 | # [Optional] Footer, you can reference issues here 7 | -------------------------------------------------------------------------------- /examples/react-router-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { reactRouter } from '@react-router/dev/vite'; 2 | import { defineConfig } from 'vite'; 3 | import tsconfigPaths from 'vite-tsconfig-paths'; 4 | 5 | export default defineConfig({ 6 | plugins: [reactRouter(), tsconfigPaths()], 7 | }); 8 | -------------------------------------------------------------------------------- /cypress/support/component.tsx: -------------------------------------------------------------------------------- 1 | import 'cypress-real-events'; 2 | import '@cypress/code-coverage/support'; 3 | import '@testing-library/cypress/add-commands'; 4 | import './commands'; 5 | import '../../packages/cypress-commands/src/index.js'; 6 | import '../../packages/main/dist/Assets.js'; 7 | -------------------------------------------------------------------------------- /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/charts/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | import fs from 'node:fs'; 2 | import { postcssConfigFactory } from '../../config/postcss-config-factory.js'; 3 | 4 | const packageName = JSON.parse(fs.readFileSync('./package.json').toString()).name; 5 | 6 | export default postcssConfigFactory(packageName); 7 | -------------------------------------------------------------------------------- /packages/compat/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | import fs from 'node:fs'; 2 | import { postcssConfigFactory } from '../../config/postcss-config-factory.js'; 3 | 4 | const packageName = JSON.parse(fs.readFileSync('./package.json').toString()).name; 5 | 6 | export default postcssConfigFactory(packageName); 7 | -------------------------------------------------------------------------------- /packages/main/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | import fs from 'node:fs'; 2 | import { postcssConfigFactory } from '../../config/postcss-config-factory.js'; 3 | 4 | const packageName = JSON.parse(fs.readFileSync('./package.json').toString()).name; 5 | 6 | export default postcssConfigFactory(packageName); 7 | -------------------------------------------------------------------------------- /.storybook/components/FilterBarExample.module.css: -------------------------------------------------------------------------------- 1 | .filterBarDemo { 2 | padding: 1rem; 3 | border: var(--sapElement_BorderWidth) solid var(--sapNeutralBorderColor); 4 | border-radius: var(--sapElement_BorderCornerRadius); 5 | } 6 | 7 | .filterBarDemo [ui5-dialog] { 8 | max-height: 80vh; 9 | } 10 | -------------------------------------------------------------------------------- /.storybook/docs/DesignCompliantExampleSection.md: -------------------------------------------------------------------------------- 1 | ## Design-Compliant Examples 2 | 3 | These examples demonstrate the implementation of design specifications. They primarily illustrate design concepts and mostly do not provide additional functionality. You can reference them to select the appropriate design patterns. 4 | -------------------------------------------------------------------------------- /examples/vite-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts", "cypress.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /templates/vite-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts", "cypress.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /patterns/navigation-layout/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts", "cypress.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/main/src/components/VariantManagement/SaveViewDialog.module.css: -------------------------------------------------------------------------------- 1 | .dialog { 2 | &::part(footer) { 3 | border-block-start: none; 4 | padding: 0; 5 | } 6 | } 7 | 8 | .input { 9 | width: 100%; 10 | margin-block: 0.1875rem; 11 | } 12 | 13 | .checkBoxesContainer { 14 | padding-inline: 0.5rem; 15 | } 16 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /nx.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/nx/schemas/nx-schema.json", 3 | "namedInputs": { 4 | "default": ["{projectRoot}/**/*", "sharedGlobals"], 5 | "sharedGlobals": [], 6 | "production": ["default"] 7 | }, 8 | "targetDefaults": { 9 | "clean": { 10 | "dependsOn": ["^clean"] 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/charts/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "references": [ 4 | { 5 | "path": "../base/tsconfig.build.json" 6 | }, 7 | { 8 | "path": "../main/tsconfig.build.json" 9 | } 10 | ], 11 | "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx", "**/*.stories.tsx"] 12 | } 13 | -------------------------------------------------------------------------------- /packages/compat/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "references": [ 4 | { 5 | "path": "../base/tsconfig.build.json" 6 | }, 7 | { 8 | "path": "../main/tsconfig.build.json" 9 | } 10 | ], 11 | "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx", "**/*.stories.tsx"] 12 | } 13 | -------------------------------------------------------------------------------- /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/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/cli/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "target": "es2022", 5 | "lib": ["ES2023", "dom"], 6 | "noEmitOnError": true, 7 | "strict": true, 8 | "types": ["node"], 9 | "skipLibCheck": true 10 | }, 11 | "include": ["src", "**/*.json", "patches"] 12 | } 13 | -------------------------------------------------------------------------------- /packages/cypress-commands/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "module": "NodeNext", 5 | "moduleResolution": "NodeNext", 6 | "noEmitOnError": true, 7 | "types": ["cypress"], 8 | "strict": true, 9 | "skipLibCheck": true 10 | }, 11 | "include": ["src", "test"] 12 | } 13 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | [production] 2 | last 2 Safari versions 3 | last 2 Chrome versions 4 | last 2 Edge versions 5 | last 2 Firefox versions 6 | last 2 iOS versions 7 | last 2 ChromeAndroid versions 8 | last 2 FirefoxAndroid versions 9 | 10 | [development] 11 | last 1 chrome version 12 | last 1 edge version 13 | last 1 safari version 14 | last 1 firefox version 15 | -------------------------------------------------------------------------------- /docs/ReadMeAI.mdx: -------------------------------------------------------------------------------- 1 | import { Footer, TableOfContent } from '@sb/components'; 2 | import { Markdown, Meta } from '@storybook/addon-docs/blocks'; 3 | import ReadMe from '../packages/ai/README.md?raw'; 4 | 5 | 6 | 7 | 8 | 9 | {ReadMe.split('## Documentation')[0].trim()} 10 | 11 |