nextsjs-page: wip

Author: Lukas742

examples/nextjs-pages/components/AppShell/AppShell.module.css

@@ -1,11 +1,11 @@
 .appShell {
-    height: 100vh;
-    width: 100vw;
-    overflow: hidden;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
 }
 
 .scrollContainer {
-    height: calc(100vh - 3.25rem);
-    overflow-y: auto;
-    position: relative;
-}
+  height: calc(100vh - 3.25rem);
+  overflow-y: auto;
+  position: relative;
+}

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-lock.json

@@ -9,9 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@ui5/webcomponents": "1.24.8",
-    "@ui5/webcomponents-fiori": "1.24.8",
-    "@ui5/webcomponents-react": "1.29.8",
+    "@ui5/webcomponents": "2.1.2",
+    "@ui5/webcomponents-fiori": "2.1.2",
+    "@ui5/webcomponents-base": "2.1.2",
+    "@ui5/webcomponents-react": "2.0.1",
     "@types/node": "20.16.1",
     "@types/react": "18.3.4",
     "@types/react-dom": "18.3.0",

examples/nextjs-pages/package.json

@@ -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/_app.tsx

@@ -8,7 +8,7 @@ import {
   StandardListItem,
   Title,
   ValueState
-} from '@ui5/webcomponents-react/ssr';
+} from '@ui5/webcomponents-react';
 import { GetServerSideProps } from 'next';
 import { useRouter } from 'next/router';
 
@@ -30,19 +30,19 @@ export default function Home({ todos }: Props) {
 
   return (
     <>
-      <Page header={<Bar startContent={<Title>My Todos</Title>} />}>
+      <Page header={<Bar startContent={<Title wrappingType="None">My Todos</Title>} />} fixedFooter>
         <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/index.tsx

@@ -11,9 +11,11 @@ import {
   MessageStripDesign,
   Switch,
   TextArea
-} from '@ui5/webcomponents-react/ssr';
+} from '@ui5/webcomponents-react';
 import { GetServerSideProps } from 'next';
 
+import { Label } from '@ui5/webcomponents-react';
+
 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={todo?.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>