docs

Author: Lukas742

.storybook/preview.tsx

@@ -144,6 +144,7 @@ const preview: Preview = {
           'Knowledge Base',
           'Testing with Cypress',
           ['Setup', 'Commands', 'Queries'],
+          'Patterns',
           'Charts',
           ['Docs'],
           'Data Display',

docs/EmbeddedStackBlitz.tsx

@@ -0,0 +1,36 @@
+import sdk from '@stackblitz/sdk';
+import type { CSSProperties } from 'react';
+import { useEffect, useRef } from 'react';
+
+interface EmbeddedStackBlitzProps {
+  style?: CSSProperties;
+  projectId: string;
+}
+
+export function EmbeddedStackBlitz({ style, projectId }: EmbeddedStackBlitzProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    sdk.embedProjectId(container, projectId, {
+      openFile: 'src/App.tsx',
+      view: 'editor',
+      height: '90%',
+      hideDevTools: true,
+      terminalHeight: 0,
+    });
+
+    return () => {
+      if (container) {
+        container.innerHTML = '';
+      }
+    };
+  }, [projectId]);
+
+  return <div ref={containerRef} data-where style={{ height: '80vh', ...style }} />;
+}
+
+EmbeddedStackBlitz.displayName = 'EmbeddedStackBlitz';

docs/Patterns.mdx

@@ -0,0 +1,11 @@
+import {Footer} from '@sb/components';
+import {Meta} from '@storybook/blocks';
+import UXCIntegration from "./UXCIntegration.js"
+
+<Meta title="Patterns / UXC Integration"/>
+
+# UXC Integration
+
+<UXCIntegration/>
+
+<Footer/>

docs/UXCIntegration.tsx

@@ -0,0 +1,16 @@
+import { ThemeProvider } from '@ui5/webcomponents-react';
+import UXCIntegrationApp from '../patterns/navigation-layout/src/App.js';
+import '../patterns/navigation-layout/src/index.css';
+import { EmbeddedStackBlitz } from '@/docs/EmbeddedStackBlitz.js';
+
+function UXCIntegration() {
+  return (
+    <div style={{ height: '80vh', position: 'relative' }}>
+      <ThemeProvider>
+        <UXCIntegrationApp content={<EmbeddedStackBlitz projectId={'github-k5xmevmm'} />} />
+      </ThemeProvider>
+    </div>
+  );
+}
+
+export default UXCIntegration;

package.json

@@ -64,6 +64,7 @@
     "@eslint/compat": "1.2.9",
     "@eslint/js": "9.27.0",
     "@semantic-release/github": "11.0.3",
+    "@stackblitz/sdk": "^1.11.0",
     "@testing-library/cypress": "10.0.3",
     "@types/jscodeshift": "17.3.0",
     "@types/node": "22.15.21",

patterns/navigation-layout/src/App.tsx

@@ -1,12 +1,18 @@
 import NavigationLayoutMode from '@ui5/webcomponents-fiori/dist/types/NavigationLayoutMode.js';
 import { NavigationLayout, Text, Title } from '@ui5/webcomponents-react';
+import type { ReactNode } from 'react';
 import { useState } from 'react';
 import { NLShellBar } from './NLShellBar.tsx';
 import { NLSideNavigation } from './NLSideNavigation.tsx';
 
-function App() {
+interface AppProps {
+  content?: ReactNode;
+}
+
+function App({ content }: AppProps) {
   const [mode, setMode] = useState<NavigationLayoutMode>(NavigationLayoutMode.Auto);
   const [contentTitle, setContentTitle] = useState('Home');
+
   return (
     <>
       <NavigationLayout
@@ -18,7 +24,7 @@ function App() {
         <div className="mainContent">
           <Title>{contentTitle}</Title>
           <br />
-          <Text>Content...</Text>
+          {content ?? <Text>Content...</Text>}
         </div>
       </NavigationLayout>
     </>

patterns/navigation-layout/src/NLShellBar.tsx

@@ -25,6 +25,8 @@ import {
 } from '@ui5/webcomponents-react';
 import type { Dispatch, SetStateAction } from 'react';
 import { useRef, useState } from 'react';
+import avatarPng from './assets/avatar.png';
+import SapLogoSvg from './assets/sap-logo.svg';
 import { NLUserMenu } from './NLUserMenu.tsx';
 import { NotificationsPopover } from './NotificationsPopover.tsx';
 
@@ -86,7 +88,7 @@ export function NLShellBar(props: NLShellBarProps) {
             onClick={handleMenuBtnClick}
           />
         }
-        logo={<img src="sap-logo.svg" alt="SAP Logo" />}
+        logo={<img src={SapLogoSvg} alt="SAP Logo" />}
         content={
           <>
             <Tag design="Set2" colorScheme="7" data-hide-order="2">
@@ -125,7 +127,7 @@ export function NLShellBar(props: NLShellBarProps) {
         }
         profile={
           <Avatar>
-            <img src="avatar.png" alt="User Avatar" />
+            <img src={avatarPng} alt="User Avatar" />
           </Avatar>
         }
       >

patterns/navigation-layout/src/NLUserMenu.tsx

@@ -5,6 +5,7 @@ import type { MessageBoxPropTypes, UserMenuDomRef, UserMenuPropTypes } from '@ui
 import { MessageBox, Text, UserMenu, UserMenuAccount, UserMenuItem } from '@ui5/webcomponents-react';
 import type { Dispatch, SetStateAction } from 'react';
 import { forwardRef, useState } from 'react';
+import avatarPng from './assets/avatar.png';
 import { NLUserSettingsDialog } from './UserSettingsDialog/NLUserSettingsDialog.tsx';
 
 interface NLUserMenuProps extends Pick<UserMenuPropTypes, 'open'> {
@@ -70,7 +71,7 @@ export const NLUserMenu = forwardRef<UserMenuDomRef, NLUserMenuProps>((props, re
           <>
             <UserMenuAccount
               loading={accountsLoading}
-              avatarSrc="avatar.png"
+              avatarSrc={avatarPng}
               titleText="Alain Chevalier 1"
               subtitleText="[email protected]"
               description="Delivery Manager, SAP SE"