Skip to content

docs(website): clear all TS errors in React samples and add CI typecheck #13213

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
ilhan007 merged 1 commit into from
Mar 6, 2026
Merged

docs(website): clear all TS errors in React samples and add CI typecheck #13213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .github/workflows/ci-test-website.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,6 @@ jobs:
export NODE_OPTIONS="--max_old_space_size=4096"
yarn install
yarn ci:deploy:nightly

- name: Typecheck Samples
run: yarn workspace @ui5/webcomponents-website typecheck:samples
17 changes: 14 additions & 3 deletions packages/website/docs/_samples/ai/Input/Basic/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,18 @@ const SAMPLE_TEXTS: Record<string, string> = {
summarized: "Driving innovation creatively.",
};

const INITIAL_MENU_CONFIG = [
type Config = {
text?: string;
action?: string;
processingLabel?: string;
completedLabel?: string;
textKey?: string;
slot?: string;
children?: Config[];
separator?: boolean;
};

const INITIAL_MENU_CONFIG: Array<Config> = [
{
text: "Generate",
action: "generate",
Expand All @@ -31,7 +42,7 @@ const INITIAL_MENU_CONFIG = [
},
];

const FULL_MENU_CONFIG = [
const FULL_MENU_CONFIG: Array<Config> = [
{
text: "Regenerate",
action: "regenerate",
Expand Down Expand Up @@ -125,7 +136,7 @@ function App() {
const [currentVersion, setCurrentVersion] = useState(0);
const [totalVersions, setTotalVersions] = useState(0);
const [promptDescription, setPromptDescription] = useState("");
const [menuConfig, setMenuConfig] = useState(INITIAL_MENU_CONFIG);
const [menuConfig, setMenuConfig] = useState<Config[]>(INITIAL_MENU_CONFIG);

const versionHistoryRef = useRef<VersionEntry[]>([]);
const currentIndexRef = useRef(0);
Expand Down
4 changes: 2 additions & 2 deletions packages/website/docs/_samples/compat/Table/Grouping/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,13 @@ function App() {
</CompatTableColumn>
<CompatTableColumn
slot="columns"
minWidth="500"
minWidth={500}
popinText="Supplier"
demandPopin
>
<Label>Supplier</Label>
</CompatTableColumn>
<CompatTableColumn slot="columns" minWidth="500">
<CompatTableColumn slot="columns" minWidth={500}>
<Label>Date Of Foundation</Label>
</CompatTableColumn>

Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/compat/Table/GrowingOnScroll/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ function App() {
<div style={{ height: "200px", overflow: "scroll" }}>
<CompatTable
growing={growing}
busyDelay="0"
busyDelay={0}
busy={busy}
onLoadMore={handleLoadMore}
>
Expand Down
6 changes: 3 additions & 3 deletions packages/website/docs/_samples/compat/Table/MultipleSelection/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ function App() {
</CompatTableColumn>
<CompatTableColumn
slot="columns"
minWidth="600"
minWidth={600}
popinText="Supplier"
demandPopin
popinDisplay="Inline"
Expand All @@ -28,7 +28,7 @@ function App() {
</CompatTableColumn>
<CompatTableColumn
slot="columns"
minWidth="800"
minWidth={800}
popinText="Dimensions"
demandPopin
popinDisplay="Inline"
Expand All @@ -37,7 +37,7 @@ function App() {
</CompatTableColumn>
<CompatTableColumn
slot="columns"
minWidth="800"
minWidth={800}
popinText="Weight"
demandPopin
popinDisplay="Inline"
Expand Down
6 changes: 3 additions & 3 deletions packages/website/docs/_samples/compat/Table/SingleSelection/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ function App() {
</CompatTableColumn>
<CompatTableColumn
slot="columns"
minWidth="600"
minWidth={600}
popinText="Supplier"
demandPopin
popinDisplay="Inline"
Expand All @@ -28,7 +28,7 @@ function App() {
</CompatTableColumn>
<CompatTableColumn
slot="columns"
minWidth="800"
minWidth={800}
popinText="Dimensions"
demandPopin
popinDisplay="Inline"
Expand All @@ -37,7 +37,7 @@ function App() {
</CompatTableColumn>
<CompatTableColumn
slot="columns"
minWidth="800"
minWidth={800}
popinText="Weight"
demandPopin
popinDisplay="Inline"
Expand Down
6 changes: 3 additions & 3 deletions packages/website/docs/_samples/compat/Table/StickyHeader/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,20 @@ function App() {
<CompatTableColumn slot="columns">
<Text>Product</Text>
</CompatTableColumn>
<CompatTableColumn slot="columns" minWidth="800">
<CompatTableColumn slot="columns" minWidth={800}>
<Text>Supplier</Text>
</CompatTableColumn>
<CompatTableColumn
slot="columns"
minWidth="600"
minWidth={600}
popinText="Dimensions"
demandPopin
>
<Text>Dimensions</Text>
</CompatTableColumn>
<CompatTableColumn
slot="columns"
minWidth="600"
minWidth={600}
popinText="Weight"
demandPopin
>
Expand Down
4 changes: 2 additions & 2 deletions packages/website/docs/_samples/fiori/DynamicSideContent/Basic/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function App() {
<div style={{ width: "1000px", overflowX: "scroll" }}>
<DynamicSideContent sideContentVisibility="AlwaysShow">
<div>
<Title level="h1">Main Content</Title>
<Title level="H1">Main Content</Title>
<p className="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex
mi, elementum et ante commodo, semper sollicitudin magna. Sed
Expand All @@ -37,7 +37,7 @@ function App() {
</p>
</div>
<div slot="sideContent">
<Title level="h1">Side Content</Title>
<Title level="H1">Side Content</Title>
<p className="text">
Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit.
Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu
Expand Down
4 changes: 2 additions & 2 deletions packages/website/docs/_samples/fiori/DynamicSideContent/EqualSplit/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ function App() {
equalSplit={true}
>
<div>
<Title level="h1">Main Content</Title>
<Title level="H1">Main Content</Title>
<p className="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex
mi, elementum et ante commodo, semper sollicitudin magna. Sed
Expand All @@ -40,7 +40,7 @@ function App() {
</p>
</div>
<div slot="sideContent">
<Title level="h1">Side Content</Title>
<Title level="H1">Side Content</Title>
<p className="text">
Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit.
Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu
Expand Down
4 changes: 2 additions & 2 deletions packages/website/docs/_samples/fiori/DynamicSideContent/SideContentPosition/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ function App() {
sideContentPosition="Start"
>
<div>
<Title level="h1">Main Content</Title>
<Title level="H1">Main Content</Title>
<p className="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex
mi, elementum et ante commodo, semper sollicitudin magna. Sed
Expand All @@ -40,7 +40,7 @@ function App() {
</p>
</div>
<div slot="sideContent">
<Title level="h1">Side Content</Title>
<Title level="H1">Side Content</Title>
<p className="text">
Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit.
Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/fiori/FlexibleColumnLayout/Basic/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ function App() {
setRatingValue(getRandomInt(4) + 1);
setCol2Title(item.textContent);
setProductName(item.textContent);
setProductDesc(item.description);
setProductDesc((item as ListItemStandardClass).description);
setProductSupplier(supplierNames[getRandomInt(11)]);
setLayout(nextLayout("col1"));
},
Expand Down
4 changes: 2 additions & 2 deletions packages/website/docs/_samples/fiori/FlexibleColumnLayout/LayoutsConfiguration/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,8 +199,8 @@ function App() {
(e: UI5CustomEvent<SelectClass, "change">) => {
const fcl = fclRef.current;
if (fcl) {
fcl.layout = e.detail.selectedOption.textContent;
setCurrentLayout(e.detail.selectedOption.textContent);
fcl.layout = e.detail.selectedOption.textContent as `${FCLLayout}`;
setCurrentLayout(e.detail.selectedOption.textContent as `${FCLLayout}`);
displayCustomLayoutConfigurationInfo();
}
},
Expand Down
4 changes: 2 additions & 2 deletions packages/website/docs/_samples/fiori/MediaGallery/VideoContent/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ function App() {
<iframe
src="https://www.youtube.com/embed/GxGZG2fv6Aw"
title="YouTube video player"
frameborder="0"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
allowFullScreen={true}
></iframe>
<img
src="/images/sap-logo-square.svg"
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/fiori/NotificationList/GroupItems/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function App() {
e.detail.item.hidden = true;

Array.from(e.detail.item.parentElement.childNodes).forEach((element) => {
if (element.nodeName === "UI5-LI-NOTIFICATION" && !element.hidden) {
if (element.nodeName === "UI5-LI-NOTIFICATION" && !(element as NotificationListItemClass).hidden) {
visibleItems++;
}
});
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/fiori/NotificationList/InShellBar/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@
<body style="background-color: var(--sapBackgroundColor); height: 50rem;">
<!-- playground-fold-end -->
<ui5-shellbar
logo="../assets/images/sap-logo-svg.svg"
show-notifications
notifications-count="10"
>
<img slot="logo" src="../assets/images/sap-logo-svg.svg" alt="SAP Logo" />
<ui5-shellbar-branding slot="branding">Corporate Portal</ui5-shellbar-branding>
</ui5-shellbar>
<ui5-popover
Expand Down
9 changes: 6 additions & 3 deletions packages/website/docs/_samples/fiori/NotificationList/InShellBar/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ function App() {
e.detail.item.hidden = true;

Array.from(e.detail.item.parentElement.childNodes).forEach((element) => {
if (element.nodeName === "UI5-LI-NOTIFICATION" && !element.hidden) {
if (element.nodeName === "UI5-LI-NOTIFICATION" && !(element as NotificationListItemClass).hidden) {
visibleItems++;
}
});
Expand Down Expand Up @@ -187,14 +187,16 @@ function App() {
width: auto;
}
`}</style>

<ShellBar
logo="/images/sap-logo-svg.svg"
showNotifications={true}
notificationsCount={10}
notificationsCount="10"
onNotificationsClick={handleShellbarNotificationsClick}
>
<img slot="logo" src="/images/sap-logo-svg.svg" alt="SAP Logo" />
<ShellBarBranding slot="branding">Corporate Portal</ShellBarBranding>
</ShellBar>

<Popover
ref={popoverRef}
id="popover-with-notifications"
Expand Down Expand Up @@ -490,6 +492,7 @@ function App() {
</NotificationList>
)}
</Popover>

<Menu ref={sortMenuRef} headerText="Sort By" id="sort-menu">
<MenuItem text="Date" />
<MenuItem text="Importance" />
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function App() {
return (
<>
<ShellBar
notificationsCount={72}
notificationsCount="72"
showNotifications={true}
showProductSwitch={true}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/fiori/ShellBar/Basic/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const ToggleButton = createReactComponent(ToggleButtonClass);
function App() {
return (
<>
<ShellBar notificationsCount={72} showNotifications={true}>
<ShellBar notificationsCount="72" showNotifications={true}>
<Button icon="menu2" slot="startButton" />
<ShellBarBranding slot="branding">
Product Identifier
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/fiori/ShellBar/EmbeddedBackNavigation/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const ToggleButton = createReactComponent(ToggleButtonClass);
function App() {
return (
<>
<ShellBar notificationsCount={72} showNotifications={true}>
<ShellBar notificationsCount="72" showNotifications={true}>
<ShellBarBranding slot="branding">
Product Identifier
<img slot="logo" src="/images/sap-logo-svg.svg" alt="SAP Logo" />
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ function App() {

<ShellBar
primaryTitle="Product Identifier"
notificationsCount={72}
notificationsCount="72"
showNotifications={true}
>
<Button icon="menu2" slot="startButton" />
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ function App() {

<ShellBar
primaryTitle="Product Identifier"
notificationsCount={72}
notificationsCount="72"
showNotifications={true}
>
<Button icon="menu2" slot="startButton" />
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/fiori/ShellBar/TrialExample/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ function App() {
<>
<ShellBar
primaryTitle="Product Identifier"
notificationsCount={72}
notificationsCount="72"
showNotifications={true}
>
<Button icon="menu2" slot="startButton" />
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/fiori/SideNavigation/OverlayMode/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ function App() {
}
`}</style>
<Page style={{ height: "500px" }}>
<ShellBar notificationsCount={72} showNotifications={true}>
<ShellBar notificationsCount="72" showNotifications={true}>
<Button
icon="menu2"
slot="startButton"
Expand Down
10 changes: 5 additions & 5 deletions packages/website/docs/_samples/fiori/Timeline/WithState/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,21 @@

<ui5-timeline id="test-timeline">
<ui5-timeline-group-item group-name="Build">
<ui5-timeline-item title="Compile" subtitle="Testing suite A" icon="sap-icon://accept" name="Testing suite A" state="Positive">
<ui5-timeline-item title="Compile" subtitleText="Testing suite A" icon="sap-icon://accept" name="Testing suite A" state="Positive">
Compilation succeeded.
</ui5-timeline-item>
<ui5-timeline-item title="Lint" subtitle="Testing suite B" icon="sap-icon://message-information" name="Testing suite B" state="Information">
<ui5-timeline-item title="Lint" subtitleText="Testing suite B" icon="sap-icon://message-information" name="Testing suite B" state="Information">
Lint completed with minor issues.
</ui5-timeline-item>
</ui5-timeline-group-item>
<ui5-timeline-group-item group-name="Test">
<ui5-timeline-item title="Unit Test" subtitle="Testing suite C" icon="sap-icon://decline" name="Testing suite C" state="Negative">
<ui5-timeline-item title="Unit Test" subtitleText="Testing suite C" icon="sap-icon://decline" name="Testing suite C" state="Negative">
Unit tests failed.
</ui5-timeline-item>
<ui5-timeline-item title="Integration Test" subtitle="Testing suite D" icon="sap-icon://message-warning" name="Testing suite D" state="Critical">
<ui5-timeline-item title="Integration Test" subtitleText="Testing suite D" icon="sap-icon://message-warning" name="Testing suite D" state="Critical">
Integration tests have warnings.
</ui5-timeline-item>
<ui5-timeline-item title="E2E Test" subtitle="Testing suite E" icon="sap-icon://accept" name="Testing suite E" state="Positive">
<ui5-timeline-item title="E2E Test" subtitleText="Testing suite E" icon="sap-icon://accept" name="Testing suite E" state="Positive">
End-to-end tests passed.
</ui5-timeline-item>
</ui5-timeline-group-item>
Expand Down
Loading
Loading