chore(deps): update ui5 web components react (examples & templates) to v2 (major)

examples/nextjs-pages/components/AppShell/index.tsx

@@ -1,5 +1,5 @@
 import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js';
-import { Button, ShellBar } from '@ui5/webcomponents-react/ssr';
+import { Button, ShellBar } from '@ui5/webcomponents-react';
 import { useRouter } from 'next/router';
 import { ReactNode } from 'react';
 import classes from './AppShell.module.css';

examples/nextjs-pages/package.json

@@ -9,9 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@ui5/webcomponents": "1.24.11",
-    "@ui5/webcomponents-fiori": "1.24.11",
-    "@ui5/webcomponents-react": "1.29.11",
+    "@ui5/webcomponents": "2.3.0",
+    "@ui5/webcomponents-fiori": "2.3.0",
+    "@ui5/webcomponents-react": "2.2.0",
     "@types/node": "20.16.10",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.0",

examples/nextjs-pages/pages/_app.tsx

@@ -1,7 +1,7 @@
 import '@ui5/webcomponents-react/dist/Assets.js';
 import '@ui5/webcomponents-react/styles.css';
 import '../styles/globals.css';
-import { ThemeProvider } from '@ui5/webcomponents-react/ssr';
+import { ThemeProvider } from '@ui5/webcomponents-react';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { AppShell } from '../components/AppShell';

examples/nextjs-pages/pages/index.module.css

@@ -0,0 +1,3 @@
+.pageHeader {
+  padding-inline: 0;
+}

examples/nextjs-pages/pages/index.tsx

@@ -1,16 +1,10 @@
-import { fetchTodos, Todo } from './api/todos';
-import {
-  Bar,
-  List,
-  ListItemType,
-  ListPropTypes,
-  Page,
-  StandardListItem,
-  Title,
-  ValueState
-} from '@ui5/webcomponents-react/ssr';
+import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
+import { Bar, List, ListItemStandard, ListPropTypes, Page, Title } from '@ui5/webcomponents-react';
+import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js';
 import { GetServerSideProps } from 'next';
 import { useRouter } from 'next/router';
+import { fetchTodos, Todo } from './api/todos';
+import classes from './index.module.css';
 
 interface Props {
   todos: Todo[];
@@ -30,19 +24,19 @@ export default function Home({ todos }: Props) {
 
   return (
     <>
-      <Page header={<Bar startContent={<Title>My Todos</Title>} />}>
+      <Page header={<Bar className={classes.pageHeader} startContent={<Title>My Todos</Title>} />}>
         <List onItemClick={handleTodoClick}>
           {todos.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-pages/pages/todos/[id].tsx

@@ -1,18 +1,20 @@
-import { Todo } from '../api/todos';
-import { fetchTodoById } from '../api/todos/[id]';
 import {
   DatePicker,
   DynamicPage,
   DynamicPageTitle,
   Form,
   FormItem,
   Input,
+  Label,
   MessageStrip,
-  MessageStripDesign,
   Switch,
-  TextArea
-} from '@ui5/webcomponents-react/ssr';
+  TextArea,
+  Title
+} from '@ui5/webcomponents-react';
+import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
 import { GetServerSideProps } from 'next';
+import { Todo } from '../api/todos';
+import { fetchTodoById } from '../api/todos/[id]';
 
 interface Props {
   todo: Todo | undefined;
@@ -27,22 +29,22 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
 export default function TodoDetails({ todo }: Props) {
   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>Title</Label>}>
             <Input value={todo?.title} />
           </FormItem>
-          <FormItem label={'Details'}>
-            <TextArea value={todo?.details} growing growingMaxLines={10} />
+          <FormItem labelContent={<Label>Details</Label>}>
+            <TextArea value={todo?.details} growing growingMaxRows={10} />
           </FormItem>
 
-          <FormItem label={'Due Date'}>
+          <FormItem labelContent={<Label>Due Date</Label>}>
             <DatePicker />
           </FormItem>
-          <FormItem label={'Completed'}>
+          <FormItem labelContent={<Label>Completed</Label>}>
             <Switch checked={todo?.completed} />
           </FormItem>
         </Form>