chore: update Next.js App Router and Vite examples to v2 (#6270)

Author: Lukas742

examples/nextjs-app/app/components/AppShellBar.tsx

@@ -5,19 +5,20 @@ import paletteIcon from '@ui5/webcomponents-icons/dist/palette.js';
 import {
   Button,
   List,
-  ListMode,
   ListPropTypes,
   ResponsivePopover,
   ResponsivePopoverDomRef,
   ShellBar,
   ShellBarItem,
   ShellBarItemPropTypes,
-  StandardListItem
+  ListItemStandard,
+  ButtonDomRef
 } from '@ui5/webcomponents-react';
 import { usePathname, useRouter } from 'next/navigation';
 import { useRef, useState } from 'react';
 import classes from './AppShellBar.module.css';
 import { getTheme, setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
+import ListMode from '@ui5/webcomponents/dist/types/ListSelectionMode.js';
 
 const THEMES = [
   { key: 'sap_horizon', value: 'Morning Horizon (Light)' },
@@ -29,15 +30,17 @@ const THEMES = [
 export function AppShellBar() {
   const router = useRouter();
   const pathname = usePathname();
-  const popoverRef = useRef<ResponsivePopoverDomRef | null>(null);
+  const popoverOpenerRef = useRef<ButtonDomRef | undefined>(undefined);
+  const [popoverOpen, setPopoverOpen] = useState(false);
   const [currentTheme, setCurrentTheme] = useState(getTheme);
 
   const handleThemeSwitchItemClick: ShellBarItemPropTypes['onClick'] = (e) => {
-    popoverRef.current?.showAt(e.detail.targetRef);
+    popoverOpenerRef.current = e.detail.targetRef as ButtonDomRef;
+    setPopoverOpen(true);
   };
   const handleThemeSwitch: ListPropTypes['onSelectionChange'] = (e) => {
     const { targetItem } = e.detail;
-    setTheme(targetItem.dataset.key!);
+    void setTheme(targetItem.dataset.key!);
     setCurrentTheme(targetItem.dataset.key!);
   };
 
@@ -59,12 +62,19 @@ export function AppShellBar() {
       >
         <ShellBarItem icon={paletteIcon} text="Change Theme" onClick={handleThemeSwitchItemClick} />
       </ShellBar>
-      <ResponsivePopover ref={popoverRef} className={classes.popover}>
-        <List onSelectionChange={handleThemeSwitch} headerText="Change Theme" mode={ListMode.SingleSelect}>
+      <ResponsivePopover
+        className={classes.popover}
+        open={popoverOpen}
+        opener={popoverOpenerRef.current}
+        onClose={(e) => {
+          setPopoverOpen(false);
+        }}
+      >
+        <List onSelectionChange={handleThemeSwitch} headerText="Change Theme" selectionMode={ListMode.Single}>
           {THEMES.map((theme) => (
-            <StandardListItem key={theme.key} selected={currentTheme === theme.key} data-key={theme.key}>
+            <ListItemStandard key={theme.key} selected={currentTheme === theme.key} data-key={theme.key}>
               {theme.value}
-            </StandardListItem>
+            </ListItemStandard>
           ))}
         </List>
       </ResponsivePopover>

examples/nextjs-app/app/components/TodoList.tsx

@@ -1,9 +1,11 @@
 'use client';
-
 import { Todo } from '@/app/mockData/todos';
-import { List, ListItemType, ListPropTypes, StandardListItem, ValueState } from '@ui5/webcomponents-react';
+import { List, ListPropTypes, ListItemStandard } from '@ui5/webcomponents-react';
 import { useRouter } from 'next/navigation';
 
+import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js';
+import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
+
 interface TodoListProps {
   items: Todo[];
 }
@@ -18,15 +20,15 @@ export function TodoList({ items }: TodoListProps) {
     <List onItemClick={handleTodoClick}>
       {items.map((todo) => {
         return (
-          <StandardListItem
+          <ListItemStandard
             key={todo.id}
             data-id={todo.id}
             type={ListItemType.Navigation}
             additionalText={`${!todo.completed ? 'Not ' : ''}Completed`}
-            additionalTextState={todo.completed ? ValueState.Success : ValueState.None}
+            additionalTextState={todo.completed ? ValueState.Positive : ValueState.None}
           >
             {todo.title}
-          </StandardListItem>
+          </ListItemStandard>
         );
       })}
     </List>

examples/nextjs-app/app/globals.css

@@ -5,21 +5,22 @@
 
 html,
 body {
+  background: var(--sapBackgroundColor);
   max-width: 100vw;
   overflow-x: hidden;
   padding: 0;
   margin: 0;
 }
 
 .appShell {
-    height: 100vh;
-    width: 100vw;
-    overflow: hidden;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
 }
 
 .appScrollContainer {
-    height: calc(100vh - 3.25rem);
-    width: 100vw;
-    overflow-y: auto;
-    position: relative;
-}
+  height: calc(100vh - 3.25rem);
+  width: 100vw;
+  overflow-y: auto;
+  position: relative;
+}

examples/nextjs-app/app/loading.module.css

@@ -1,7 +1,7 @@
 .container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

examples/nextjs-app/app/loading.tsx

@@ -1,10 +1,12 @@
-import { BusyIndicator, BusyIndicatorSize } from '@ui5/webcomponents-react';
+import { BusyIndicator } from '@ui5/webcomponents-react';
 import classes from './loading.module.css';
 
+import BusyIndicatorSize from '@ui5/webcomponents/dist/types/BusyIndicatorSize.js';
+
 export default function HomeLoading() {
   return (
     <div className={classes.container}>
-      <BusyIndicator active size={BusyIndicatorSize.Large} delay={0} />
+      <BusyIndicator active size={BusyIndicatorSize.L} delay={0} />
     </div>
   );
 }

examples/nextjs-app/app/page.tsx

@@ -12,7 +12,7 @@ export default async function Home() {
 
   return (
     <>
-      <Page header={<Bar startContent={<Title>My Todos</Title>} />}>
+      <Page header={<Bar startContent={<Title wrappingType="None">My Todos</Title>} />} fixedFooter>
         <TodoList items={todoList} />
       </Page>
     </>

examples/nextjs-app/app/todos/[id]/page.tsx

@@ -6,11 +6,13 @@ import {
   Form,
   FormItem,
   Input,
+  Label,
   MessageStrip,
-  MessageStripDesign,
   Switch,
-  TextArea
+  TextArea,
+  Title
 } from '@ui5/webcomponents-react';
+import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
 
 export default async function TodoDetails({ params }: { params: { id: string } }) {
   // this is a very simple mock which mimics data fetching
@@ -22,22 +24,22 @@ export default async function TodoDetails({ params }: { params: { id: string } }
 
   return (
     <>
-      <DynamicPage showHideHeaderButton={false} headerTitle={<DynamicPageTitle header={todo?.title} />}>
+      <DynamicPage titleArea={<DynamicPageTitle heading={<Title>{todo?.title}</Title>} />}>
         <MessageStrip design={MessageStripDesign.Information}>
           {`Since this is only a demo app, adjustments made here on this page won't be reflected in the todo list.`}
         </MessageStrip>
         <Form>
-          <FormItem label={'Title'}>
+          <FormItem labelContent={<Label wrappingType="None">Title</Label>}>
             <Input value={todo?.title} />
           </FormItem>
-          <FormItem label={'Details'}>
-            <TextArea value={todo?.details} growing growingMaxLines={10} />
+          <FormItem labelContent={<Label wrappingType="None">Details</Label>}>
+            <TextArea value={todo?.details} growing growingMaxRows={10} />
           </FormItem>
 
-          <FormItem label={'Due Date'}>
+          <FormItem labelContent={<Label wrappingType="None">Due Date</Label>}>
             <DatePicker />
           </FormItem>
-          <FormItem label={'Completed'}>
+          <FormItem labelContent={<Label wrappingType="None">Completed</Label>}>
             <Switch checked={todo?.completed} />
           </FormItem>
         </Form>