chore(examples): migrate remix to react-router 7 (#6725)

.github/workflows/examples.yml

@@ -20,7 +20,7 @@ jobs:
         path:
           - nextjs-app
           - nextjs-pages
-          - remix-ts
+          - react-router-ts
           - vite-ts
       fail-fast: false
     steps:

docs/ProjectTemplates.mdx

@@ -1,9 +1,9 @@
-import { Footer, ProjectTemplate, TableOfContent, LabelWithWrapping } from '@sb/components';
-import { Meta } from '@storybook/blocks';
-import { Link, FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label } from '@ui5/webcomponents-react';
+import { Footer, LabelWithWrapping, ProjectTemplate, TableOfContent } from '@sb/components';
 import NextLogo from '@sb/images/logo-nextjs.svg';
+import ReactRouterLogo from '@sb/images/logo-react-router.svg';
 import ViteLogo from '@sb/images/logo-vitejs.svg';
-import RemixLogo from '@sb/images/logo-remix.svg';
+import { Meta } from '@storybook/blocks';
+import { FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label } from '@ui5/webcomponents-react';
 
 <Meta title="Project Templates & Examples" />
 
@@ -98,33 +98,27 @@ A curated list of minimal project templates and examples to get started using UI
   >
     <ul>
       <li>
-        <LabelWithWrapping>
-          Routing and Data Fetching using the createBrowserRouter of React Router v7
-        </LabelWithWrapping>
-      </li>
-      <li>
-        <Label>Cypress Component Test setup</Label>
+        <LabelWithWrapping>{`Routing and Data Fetching using the createBrowserRouter of React Router v7`}</LabelWithWrapping>
       </li>
       <li>
-        <Label>Cypress E2E Test setup</Label>
+        <Label>Cypress Component & E2E Test setup</Label>
       </li>
       <li>
         <Label>Theming</Label>
       </li>
     </ul>
   </ProjectTemplate>
   <ProjectTemplate
-    title={'Remix'}
-    logo={RemixLogo}
-    logoAttribution={'Remix.run Logo. Original Source: https://remix.run'}
-    href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/remix-ts'}
+    title={'React Router v7'}
+    subtitle={'Previously: Remix Template'}
+    logo={ReactRouterLogo}
+    logoAttribution={'React Router Logo. Original Source: https://reactrouter.com'}
+    href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/react-router-ts'}
     isTypeScript
   >
     <ul>
       <li>
-        <Label>
-          Remix template using <code>remix-island</code>
-        </Label>
+        <Label>{`React Router v7 with server side rendering`}</Label>
       </li>
       <li>
         <Label>Theming</Label>

examples/remix-ts/.gitignore → examples/react-router-ts/.gitignore

@@ -3,3 +3,4 @@ node_modules
 /.cache
 /build
 .env
+.react-router/

examples/react-router-ts/README.md

@@ -0,0 +1,45 @@
+# UI5 Web Components React - React Router Example
+
+This example shows how to use the [React Router](https://reactrouter.com/) with UI5 Web Components for React.
+This example was previously known as [Remix](https://remix.run/), and got updated to use React Router v7.
+
+## How to use this template
+
+```bash
+npx degit SAP/ui5-webcomponents-react/examples/react-router-ts#main my-project
+cd my-project
+```
+
+## Getting Started
+
+First, install the node_modules:
+
+```bash
+npm install
+```
+
+Then, run the development server:
+
+```bash
+npm run dev
+```
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+## Learn More
+
+- 📖 See the [React router docs](https://reactrouter.com/home).

examples/remix-ts/app/components/AppShellBar.tsx → examples/react-router-ts/app/components/AppShellBar.tsx

@@ -1,4 +1,4 @@
-import { useLocation, useNavigate } from '@remix-run/react';
+import { useLocation, useNavigate } from 'react-router';
 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';
@@ -46,7 +46,7 @@ export function AppShellBar() {
     <>
       <ShellBar
         primaryTitle={'UI5 Web Components for React Examples'}
-        secondaryTitle={'Remix.run App'}
+        secondaryTitle={'React Router Example'}
         startButton={
           pathname !== '/' && (
             <Button

examples/remix-ts/app/components/TodoList.tsx → examples/react-router-ts/app/components/TodoList.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from '@remix-run/react';
+import { useNavigate } from 'react-router';
 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';

examples/react-router-ts/app/root.tsx

@@ -0,0 +1,36 @@
+import wcrStyles from '@ui5/webcomponents-react/styles.css?url';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';
+import type { Route } from './+types/root';
+import { AppShell } from './components/AppShell';
+import appStyles from './globals.css?url';
+
+export const links: Route.LinksFunction = () => [
+  { rel: 'stylesheet', href: appStyles },
+  { rel: 'stylesheet', href: wcrStyles }
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head suppressHydrationWarning={true}>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return (
+    <AppShell>
+      <Outlet />
+    </AppShell>
+  );
+}

examples/react-router-ts/app/routes.ts

@@ -0,0 +1,3 @@
+import { index, route, type RouteConfig } from '@react-router/dev/routes';
+
+export default [index('./routes/index.tsx'), route('todos/:id', './routes/todo.tsx')] satisfies RouteConfig;

examples/remix-ts/app/routes/_index.tsx → examples/react-router-ts/app/routes/index.tsx

@@ -1,28 +1,29 @@
-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 type { MetaFunction } from 'react-router';
 import { TodoList } from '~/components/TodoList';
 import { Todo, todos } from '~/mockData/todos';
+import type { Route } from './+types/index';
 
 export const meta: MetaFunction = () => {
-  return [{ title: 'New Remix App' }, { name: 'description', content: 'Welcome to Remix!' }];
+  return [
+    { title: 'UI5 Web Components React - React Router Example' },
+    { name: 'description', content: 'Welcome to this example!' }
+  ];
 };
 
-export const loader = async () => {
+export async function loader() {
   const todoList = await new Promise<Todo[]>((resolve) => {
     setTimeout(() => {
       resolve(todos);
     }, 1500);
   });
 
-  return json({ data: { todos: todoList } });
-};
+  return { todos: todoList };
+}
+
+export default function Index({ loaderData }: Route.ComponentProps) {
+  const { todos } = loaderData;
 
-export default function Index() {
-  const {
-    data: { todos }
-  } = useLoaderData<typeof loader>();
   return (
     <Page header={<Bar style={{ paddingInline: 0 }} startContent={<Title>My Todos</Title>} />}>
       <TodoList items={todos} />

examples/remix-ts/app/routes/todos.$id.tsx → examples/react-router-ts/app/routes/todo.tsx

@@ -1,5 +1,3 @@
-import { json, LoaderFunctionArgs } from '@remix-run/node';
-import { useLoaderData } from '@remix-run/react';
 import {
   DatePicker,
   DynamicPage,
@@ -15,21 +13,20 @@ import {
 } from '@ui5/webcomponents-react';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
 import { Todo, todos } from '~/mockData/todos';
+import type { Route } from './+types/todo';
 
-export const loader = async ({ params }: LoaderFunctionArgs) => {
+export async function loader({ params }: Route.LoaderArgs) {
   const todo = await new Promise<Todo | undefined>((resolve) => {
     setTimeout(() => {
       resolve(todos.at(Number(params.id)));
     }, 500);
   });
 
-  return json({ data: { todo } });
-};
+  return todo;
+}
 
-export default function TodoDetails() {
-  const {
-    data: { todo }
-  } = useLoaderData<typeof loader>();
+export default function TodoDetails({ loaderData }: Route.ComponentProps) {
+  const todo = loaderData;
 
   return (
     <>

examples/remix-ts/eslint.config.mjs → examples/react-router-ts/eslint.config.mjs

@@ -8,7 +8,7 @@ import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
   {
-    ignores: ['build', '**/node_modules']
+    ignores: ['build', '.react-router', '**/node_modules']
   },
   js.configs.recommended,
   {