docs: add NextJS app router example (#4714)

Co-authored-by: Lukas Harbarth <[email protected]>

Author: MarcusNotheis

.github/workflows/examples.yml

@@ -16,6 +16,7 @@ jobs:
     strategy:
       matrix:
         path:
+          - nextjs-app
           - nextjs-pages
           - vite-ts
       fail-fast: false

examples/nextjs-app/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals"
+}

examples/nextjs-app/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs-app/README.md

@@ -0,0 +1,45 @@
+## UI5 Web Components React - Next.js App Router Example
+
+This example shows how to use the [Next.js](https://nextjs.org/) App Router with UI5 Web Components for React.
+
+## How to use this template
+
+```bash
+npx degit SAP/ui5-webcomponents-react/examples/nextjs-app#main my-project
+cd my-project
+```
+
+## Getting Started
+
+First, install the node_modules:
+
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
+```
+
+Then, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

examples/nextjs-app/app/CssRegistry.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useServerInsertedHTML } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { createGenerateId, JssProvider, SheetsRegistry } from 'react-jss';
+
+export function CssRegistry({ children }: { children: React.ReactNode }) {
+  const [registry] = useState(() => new SheetsRegistry());
+  const generateId = createGenerateId();
+
+  useServerInsertedHTML(() => {
+    return (
+      <>
+        <style id="server-side-styles">{registry.toString()}</style>
+      </>
+    );
+  });
+
+  useEffect(() => {
+    const style = document.getElementById('server-side-styles');
+    if (style) {
+      style.parentNode?.removeChild(style);
+    }
+  }, []);
+
+  return (
+    <JssProvider registry={registry} generateId={generateId}>
+      {children}
+    </JssProvider>
+  );
+}

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

@@ -0,0 +1,30 @@
+'use client';
+
+import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js';
+import { Button, ShellBar } from '@ui5/webcomponents-react';
+import '@ui5/webcomponents-react/dist/Assets.js';
+import { usePathname, useRouter } from 'next/navigation';
+
+export function AppShell() {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  return (
+    <>
+      <ShellBar
+        primaryTitle={'UI5 Web Components for React Examples'}
+        secondaryTitle={'NextJS - App Router'}
+        startButton={
+          pathname !== '/' && (
+            <Button
+              icon={navBackIcon}
+              onClick={() => {
+                router.back();
+              }}
+            />
+          )
+        }
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,34 @@
+'use client';
+
+import { Todo } from '@/app/mockData/todos';
+import { List, ListItemType, ListPropTypes, StandardListItem, ValueState } from '@ui5/webcomponents-react';
+import { useRouter } from 'next/navigation';
+
+interface TodoListProps {
+  items: Todo[];
+}
+
+export function TodoList({ items }: TodoListProps) {
+  const router = useRouter();
+  const handleTodoClick: ListPropTypes['onItemClick'] = (event) => {
+    router.push(`/todos/${event.detail.item.dataset.id}`);
+  };
+
+  return (
+    <List onItemClick={handleTodoClick}>
+      {items.map((todo) => {
+        return (
+          <StandardListItem
+            key={todo.id}
+            data-id={todo.id}
+            type={ListItemType.Navigation}
+            additionalText={`${!todo.completed ? 'Not ' : ''}Completed`}
+            additionalTextState={todo.completed ? ValueState.Success : ValueState.None}
+          >
+            {todo.title}
+          </StandardListItem>
+        );
+      })}
+    </List>
+  );
+}

examples/nextjs-app/app/favicon.ico

@@ -0,0 +1,25 @@
+/* to prevent flickering, only show the web-component when its custom-element is defined  */
+:not(:defined) {
+  display: none;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+  padding: 0;
+  margin: 0;
+}
+
+.appShell {
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+}
+
+.appScrollContainer {
+    height: calc(100vh - 3.25rem);
+    width: 100vw;
+    overflow-y: auto;
+    position: relative;
+}

examples/nextjs-app/app/globals.css

@@ -0,0 +1,32 @@
+import { AppShell } from '@/app/components/AppShell';
+import { CssRegistry } from '@/app/CssRegistry';
+import { ThemeProvider } from '@ui5/webcomponents-react';
+import './globals.css';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <script
+          data-ui5-config
+          type="application/json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify({
+              theme: 'sap_horizon'
+            })
+          }}
+        />
+      </head>
+      <body>
+        <div className="appShell">
+          <CssRegistry>
+            <ThemeProvider>
+              <AppShell />
+              <div className="appScrollContainer">{children}</div>
+            </ThemeProvider>
+          </CssRegistry>
+        </div>
+      </body>
+    </html>
+  );
+}

examples/nextjs-app/app/layout.tsx

@@ -0,0 +1,7 @@
+.container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

examples/nextjs-app/app/loading.module.css

@@ -0,0 +1,10 @@
+import { BusyIndicator, BusyIndicatorSize } from '@ui5/webcomponents-react';
+import classes from './loading.module.css';
+
+export default function HomeLoading() {
+  return (
+    <div className={classes.container}>
+      <BusyIndicator active size={BusyIndicatorSize.Large} delay={0} />
+    </div>
+  );
+}