chore(remix-example): update for v2 (SAP#6455)

Author: MarcusNotheis

examples/remix-ts/app/components/AppShellBar.tsx

@@ -1,21 +1,21 @@
+import { useLocation, useNavigate } from '@remix-run/react';
+import { getTheme, setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
 import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js';
 import paletteIcon from '@ui5/webcomponents-icons/dist/palette.js';
 import {
   Button,
   List,
-  ListMode,
+  ListItemStandard,
   ListPropTypes,
   ResponsivePopover,
   ResponsivePopoverDomRef,
   ShellBar,
   ShellBarItem,
-  ShellBarItemPropTypes,
-  StandardListItem
+  ShellBarItemPropTypes
 } from '@ui5/webcomponents-react';
+import ListSelectionMode from '@ui5/webcomponents/dist/types/ListSelectionMode.js';
 import { useRef, useState } from 'react';
 import classes from './AppShellBar.module.css';
-import { getTheme, setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
-import { useLocation, useNavigate } from '@remix-run/react';
 
 const THEMES = [
   { key: 'sap_horizon', value: 'Morning Horizon (Light)' },
@@ -31,7 +31,10 @@ export function AppShellBar() {
   const [currentTheme, setCurrentTheme] = useState(getTheme);
 
   const handleThemeSwitchItemClick: ShellBarItemPropTypes['onClick'] = (e) => {
-    popoverRef.current?.showAt(e.detail.targetRef);
+    if (popoverRef.current) {
+      popoverRef.current.opener = e.detail.targetRef;
+      popoverRef.current.open = true;
+    }
   };
   const handleThemeSwitch: ListPropTypes['onSelectionChange'] = (e) => {
     const { targetItem } = e.detail;
@@ -58,11 +61,11 @@ 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}>
+        <List onSelectionChange={handleThemeSwitch} headerText="Change Theme" selectionMode={ListSelectionMode.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/remix-ts/app/components/TodoList.tsx

@@ -1,5 +1,7 @@
 import { useNavigate } from '@remix-run/react';
-import { List, ListItemType, ListPropTypes, StandardListItem, ValueState } from '@ui5/webcomponents-react';
+import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
+import { List, ListItemStandard, ListPropTypes } from '@ui5/webcomponents-react';
+import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js';
 import { Todo } from '~/mockData/todos';
 
 interface TodoListProps {
@@ -16,15 +18,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/remix-ts/app/routes/_index.tsx

@@ -1,9 +1,9 @@
 import type { MetaFunction } from '@remix-run/node';
+import { json } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
 import { Bar, Page, Title } from '@ui5/webcomponents-react';
-import { Todo, todos } from '~/mockData/todos';
-import { json } from '@remix-run/node';
 import { TodoList } from '~/components/TodoList';
+import { Todo, todos } from '~/mockData/todos';
 
 export const meta: MetaFunction = () => {
   return [{ title: 'New Remix App' }, { name: 'description', content: 'Welcome to Remix!' }];
@@ -24,7 +24,7 @@ export default function Index() {
     data: { todos }
   } = useLoaderData<typeof loader>();
   return (
-    <Page header={<Bar startContent={<Title>My Todos</Title>} />}>
+    <Page header={<Bar style={{ paddingInline: 0 }} startContent={<Title>My Todos</Title>} />}>
       <TodoList items={todos} />
     </Page>
   );

examples/remix-ts/app/routes/todos.$id.tsx

@@ -1,4 +1,4 @@
-import { LoaderFunctionArgs, json } from '@remix-run/node';
+import { json, LoaderFunctionArgs } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
 import {
   DatePicker,
@@ -7,11 +7,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';
 import { Todo, todos } from '~/mockData/todos';
 
 export const loader = async ({ params }: LoaderFunctionArgs) => {
@@ -31,22 +33,22 @@ export default function TodoDetails() {
 
   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>