remix-ts: wip

Author: Lukas742

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

@@ -66,7 +66,7 @@ export function AppShellBar() {
         className={classes.popover}
         open={popoverOpen}
         opener={popoverOpenerRef.current}
-        onClose={(e) => {
+        onClose={() => {
           setPopoverOpen(false);
         }}
       >

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

@@ -2,7 +2,6 @@
 import { Todo } from '@/app/mockData/todos';
 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';
 

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

@@ -3,19 +3,19 @@ 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 { 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';
+import ListMode from '@ui5/webcomponents/dist/types/ListSelectionMode.js';
 
 const THEMES = [
   { key: 'sap_horizon', value: 'Morning Horizon (Light)' },
@@ -27,15 +27,17 @@ const THEMES = [
 export function AppShellBar() {
   const navigate = useNavigate();
   const { pathname } = useLocation();
-  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!);
   };
 
@@ -57,12 +59,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={() => {
+          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/remix-ts/app/components/TodoList.tsx

@@ -1,6 +1,8 @@
 import { useNavigate } from '@remix-run/react';
-import { List, ListItemType, ListPropTypes, StandardListItem, ValueState } from '@ui5/webcomponents-react';
+import { List, ListPropTypes, ListItemStandard } from '@ui5/webcomponents-react';
 import { Todo } from '~/mockData/todos';
+import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js';
+import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 
 interface TodoListProps {
   items: Todo[];
@@ -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/globals.css

@@ -12,14 +12,14 @@ body {
 }
 
 .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/remix-ts/app/routes/_index.tsx

@@ -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 startContent={<Title wrappingType="None">My Todos</Title>} />} fixedFooter>
       <TodoList items={todos} />
     </Page>
   );

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

@@ -7,12 +7,13 @@ import {
   Form,
   FormItem,
   Input,
+  Label,
   MessageStrip,
-  MessageStripDesign,
   Switch,
   TextArea
 } from '@ui5/webcomponents-react';
 import { Todo, todos } from '~/mockData/todos';
+import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
 
 export const loader = async ({ params }: LoaderFunctionArgs) => {
   const todo = await new Promise<Todo | undefined>((resolve) => {
@@ -31,22 +32,22 @@ export default function TodoDetails() {
 
   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>