@genesislcap/blank-app-seed 3.30.0-prerelease.14 → 3.30.0-prerelease.16

package/.genx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed-config",
   "description": "Genesis Blank App Seed Configuration",
-  "version": "3.30.0-prerelease.14",
+  "version": "3.30.0-prerelease.16",
   "license": "Apache-2.0",
   "scripts": {
     "lint": "eslint .",

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [3.30.0-prerelease.16](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.30.0-prerelease.15...v3.30.0-prerelease.16) (2024-09-30)
+
+
+### Features
+
+* add webpack builder in react  (#350) 69c4c6b, closes FUI-2173 FUI-2173 FUI-2173 FUI-2157 FUI-2157 origin/ak/FUI-2173 ak/FUI-2157 FUI-2157 FUI-2157 FUI-2140 FUI-2140 FUI-2140 FUI-2140 FUI-2140 FUI-2140 FUI-2140 FUI-2140 FUI-2140 FUI-2140 FUI-2140 FUI-2140 FUI-2140 FUI-2140 FUI-2140 FUI-2140 FUI-2140
+
+## [3.30.0-prerelease.15](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.30.0-prerelease.14...v3.30.0-prerelease.15) (2024-09-26)
+
+
+### Features
+
+* pbc support in react [FUI-2140](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/2140) (#347) 4c41243, closes FUI-2173 FUI-2173 FUI-2173 FUI-2157 FUI-2157 origin/ak/FUI-2173 ak/FUI-2157 FUI-2157 FUI-2157
+
 ## [3.30.0-prerelease.14](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.30.0-prerelease.13...v3.30.0-prerelease.14) (2024-09-26)
 
 

package/client-tmp/react/package.json

@@ -6,10 +6,13 @@
     "baseline": "npm run clean && npm run bootstrap",
     "bootstrap": "npm i --legacy-peer-deps",
     "bootstrap:ci": "npm ci --no-fund --no-audit",
-    "build": "vite build",
     "build:stats": "npm run build --stats-json",
     "clean": "genx clean dist node_modules",
-    "dev": "vite",
+    "dev": "webpack serve --mode development",
+    "build": "webpack --mode production",
+    "stats": "webpack --mode production --json > stats.json",
+    "build:vite": "vite build",
+    "dev:vite": "vite build && vite preview",
     "dev:docker": "npm run dev -- --host 0.0.0.0",
     "dev:no-open": "NO_OPEN=true npm run dev",
     "dev:intellij": "npm run dev",
@@ -33,17 +36,21 @@
     "@ag-grid-enterprise/core": "29.2.0",
     "@ag-grid-enterprise/row-grouping": "29.2.0",
     "@ag-grid-enterprise/server-side-row-model": "29.2.0",
+    "@genesislcap/foundation-comms": "{{versions.UI}}",
+    "@genesislcap/foundation-entity-management": "{{versions.UI}}",
     {{#if FDC3.includeDependencies}}
     "@genesislcap/foundation-fdc3": "{{versions.UI}}",
     {{/if}}
-    "@genesislcap/foundation-comms": "{{versions.UI}}",
-    "@genesislcap/foundation-login": "{{versions.UI}}",
-    "@genesislcap/foundation-entity-management": "{{versions.UI}}",
     "@genesislcap/foundation-header": "{{versions.UI}}",
+    "@genesislcap/foundation-layout": "{{versions.UI}}",
+    "@genesislcap/foundation-logger": "{{versions.UI}}",
+    "@genesislcap/foundation-login": "{{versions.UI}}",
+    "@genesislcap/foundation-shell": "{{versions.UI}}",
     "@genesislcap/foundation-ui": "{{versions.UI}}",
+    "@genesislcap/foundation-utils": "{{versions.UI}}",
     "@genesislcap/rapid-design-system": "{{versions.UI}}",
     "@genesislcap/rapid-grid-pro": "{{versions.UI}}",
-    "@genesislcap/foundation-layout": "{{versions.UI}}",
+    "@genesislcap/web-core": "{{versions.UI}}",
     "@genesislcap/g2plot-chart": "{{versions.UI}}",
     "history": "^5.3.0",
     "react": "^19.0.0-beta-94eed63c49-20240425",
@@ -64,6 +71,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
+    "@types/css-modules": "^1.0.5",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.10",
     "@types/react": "npm:types-react@alpha",  
@@ -71,16 +79,23 @@
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
     "@vitejs/plugin-react": "^4.3.1",
+    "babel-loader": "^9.2.1",
     "babel-plugin-react-require": "^4.0.3",
+    "dotenv-webpack": "^8.1.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
+    "file-loader": "^6.2.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
-    "vite": "^5.3.1"
+    "vite": "^5.3.1",
+    "vite-plugin-tsconfig-paths": "^1.4.1",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
   },  
   "overrides": {  
     "@types/react": "npm:types-react@alpha",  

package/client-tmp/react/public/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{capitalCase appName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="/bundle.js"></script>
+  </body>
+</html>

package/client-tmp/react/src/App.tsx

@@ -1,31 +1,75 @@
+import { useEffect, useState } from 'react';
+import { unstable_HistoryRouter as HistoryRouter, Routes, Route, useLocation } from 'react-router-dom';
 import {
-  unstable_HistoryRouter as HistoryRouter,
-  Routes,
-  Route,
-  useLocation,
-} from 'react-router-dom';
-import { useEffect } from 'react';
-import { history, setApiHost{{#if FDC3.channels.length}}, listenToChannel{{/if}} } from './utils';
+  history,
+  setApiHost,
+  getLayoutNameByRoute,
+  {{#if FDC3.channels.length~}}
+  listenToChannel,
+  onFDC3Ready,
+  {{/if}}
+} from './utils';
+import { customEventFactory, registerStylesTarget } from '@/pbc/utils';
 import LayoutWrapper from './layouts/LayoutWrapper';
-import { AUTH_PATH, NOT_PERMITTED_PATH, routeLayouts } from './config';
-import AuthGuard from './guards/AuthGuard';
-import PermissionsGuard from './guards/PermissionsGuard';
+import LayoutName from '@/types/LayoutName';
+import { AUTH_PATH, routeLayouts } from './config';
 import { AuthProvider } from './store/AuthContext';
-// Pages Components
+import { RoutesProvider, useRoutesContext } from './store/RoutesContext';
 import AuthPage from './pages/AuthPage/AuthPage';
-import NotPermittedPage from './pages/NotPermittedPage/NotPermittedPage';
-{{#each routes}}
-import {{pascalCase this.name}} from './pages/{{pascalCase this.name}}/{{pascalCase this.name}}';
-{{/each}}
-
-// Genesis Components
-import './share/genesis-components';
+import { registerComponents as genesisRegisterComponents } from './share/genesis-components';
+import { configureFoundationLogin } from './share/foundation-login';
+import ProtectedGuard from './guards/ProtectedGuard';
+import { storeService } from '@/services/store.service';
 
-const LayoutWithLocation = () => {
+const DynamicLayout = () => {
   const location = useLocation();
-  const layout = routeLayouts[location.pathname] || 'default';
-  {{#if FDC3.channels.length}}
+  const [layoutName, setLayoutName] = useState<LayoutName>(routeLayouts[location.pathname]  || 'default');
+  const handleRouteChange = (location: any) => {
+    setLayoutName(getLayoutNameByRoute(location.pathname));
+  };
+  const route = useRoutesContext().find((r) => r.path === location.pathname);
+  let pageComponent;
+  let content;
+
   useEffect(() => {
+    handleRouteChange(location);
+    const unlisten = history.listen(handleRouteChange);
+
+    return () => {
+      unlisten();
+    }
+  }, [location]);
+
+  if (route) {
+    pageComponent = route.element;
+  } else {
+    pageComponent = <AuthPage />;
+  }
+
+  if (location.pathname === `/${AUTH_PATH}` || location.pathname === '/') {
+    content = pageComponent;
+  } else {
+    content = <ProtectedGuard>{pageComponent}</ProtectedGuard>
+  }
+
+  return <LayoutWrapper layout={layoutName}>{content}</LayoutWrapper>
+
+};
+
+interface AppProps {
+  rootElement: HTMLElement;
+}
+
+const App: React.FC<AppProps> = ({ rootElement }) => {
+  const [isStoreConnected, setIsStoreConnected] = useState(false);
+  const dispatchCustomEvent = (type: string, detail?: any) => {
+    rootElement.dispatchEvent(customEventFactory(type, detail));
+  };
+  const handleStoreConnected = (event: CustomEvent) => {
+    storeService.onConnected(event);
+  };
+  {{#if FDC3.channels.length~}}
+  const FDC3ReadyHandler = () => {
     {{#each FDC3.channels}}
     listenToChannel('{{this.name}}', '{{this.type}}', (result) => {
       console.log('Received FDC3 channel message on: {{this.name}} channel, type: {{this.type}}', result);
@@ -33,61 +77,44 @@ const LayoutWithLocation = () => {
       // E.g. open a modal or route to specific page: Route.path.push(`[Route name]`);
     });
     {{/each}}
-    
-    return () => {
-      console.log('Component is being unmounted');
-    };
-  }, []);
+  };
   {{/if}}
 
-  let pageComponent;
-  let permissionCode = '{{this.permissions.viewRight}}';
-
-  switch (location.pathname) {
-    case `/${AUTH_PATH}`:
-      pageComponent = <AuthPage />;
-      break;
-    case `/${NOT_PERMITTED_PATH}`:
-      pageComponent = <NotPermittedPage />;
-      break;
-  {{#each routes}}
-    case '/{{kebabCase this.name}}':
-      pageComponent = <{{pascalCase this.name}} />;
-      permissionCode = '{{this.permissions.viewRight}}';
-      break;
-  {{/each}}
-    default:
-      pageComponent = <AuthPage />;
-  }
+  setApiHost();
+  genesisRegisterComponents();
+  configureFoundationLogin({ router: history });
 
-  if (
-    location.pathname === '/auth' ||
-    location.pathname === '/'
-  ) {
-    return <LayoutWrapper layout={layout}>{pageComponent}</LayoutWrapper>;
-  } else {
-    return (
-      <AuthGuard>
-        <PermissionsGuard permissionCode={permissionCode}>
-          <LayoutWrapper layout={layout}>{pageComponent}</LayoutWrapper>
-        </PermissionsGuard>
-      </AuthGuard>
-    );
-  }
-};
+  useEffect(() => {
+    registerStylesTarget(document.body, 'main');
+    {{#if FDC3.channels.length~}}
+    onFDC3Ready(FDC3ReadyHandler);
+    {{/if}}
+    if (!isStoreConnected) {
+      rootElement.addEventListener('store-connected', handleStoreConnected);
+      dispatchCustomEvent('store-connected', rootElement);
+      dispatchCustomEvent('store-ready', true);
+      setIsStoreConnected(true);
+    }
 
-const App: React.FC = () => {
-  setApiHost();
+    return () => {
+      if (isStoreConnected) {
+        rootElement.removeEventListener('store-connected', handleStoreConnected);
+        dispatchCustomEvent('store-disconnected');
+      }
+    };
+  }, [isStoreConnected]);
 
   return (
     <AuthProvider>
-      <HistoryRouter history={history}>
-        <Routes>
-          <Route path="*" element={<LayoutWithLocation />} />
-        </Routes>
-      </HistoryRouter>
+      <RoutesProvider>
+        <HistoryRouter history={history as any}>
+          <Routes>
+            <Route path="*" element={<DynamicLayout />} />
+          </Routes>
+        </HistoryRouter>
+      </RoutesProvider>
     </AuthProvider>
   );
 };
 
-export default App;
+export default App;

package/client-tmp/react/src/config.ts

@@ -1,32 +1,18 @@
 import { RouteLayouts } from './types/RouteLayouts';
+import { environment } from '@environment';
 
 export const routeLayouts: RouteLayouts = {
-  '/auth-mock': 'blank',
   '/auth': 'blank',
   '/': 'blank',
 };
 
-import type { MainMenu } from './types/menu';
-
 export const AUTH_PATH = 'auth';
 export const NOT_PERMITTED_PATH = 'not-permitted';
 
 export const API_DATA = {
-  URL: import.meta.env.VITE_API_HOST,
+  URL: environment.API_HOST,
   AUTH: {
     username: '', // provide login to a user in given environment
     password: '', // provide password to a user in given environment
   },
 };
-
-export const mainMenu: MainMenu = [
-  {{#each routes}}
-  {
-    index: {{@index}},
-    path: '{{kebabCase this.name}}',
-    title: '{{#if this.title}}{{this.title}}{{else}}{{this.name}}{{/if}}',
-    icon: '{{this.icon}}',
-    variant: 'solid'
-  }{{#unless @last}},{{/unless}}
-  {{/each}}
-];

package/client-tmp/react/src/custom-elements.d.ts

@@ -1,10 +1,11 @@
 import React, { useState, DOMAttributes }  from 'react';
 
-type CustomElement<T = HTMLElement> = Partial<T & DOMAttributes<T> & { children: any }>;
+type CustomElement<T = React.HTMLAttributes<HTMLElement>> = Partial<T & DOMAttributes<T> & { [key: string]: any }>;
 
 declare module "react/jsx-runtime" {
   namespace JSX {
     interface IntrinsicElements {
+      'rapid-design-system-provider': CustomElement;
       'entity-management': CustomElement;
       'foundation-form': CustomElement;
       'rapid-grid-pro': CustomElement;
@@ -16,6 +17,7 @@ declare module "react/jsx-runtime" {
       'rapid-layout': CustomElement;
       'rapid-layout-region': CustomElement;
       'rapid-layout-item': CustomElement;
+      'foundation-header': CustomElement;
     }
   }
 }

package/client-tmp/react/src/environments/environment.prod.ts

@@ -0,0 +1,8 @@
+export const environment = {
+  production: true,
+  PORT: 4200,
+  ENABLE_SSO: {{enableSSO}},
+  HOST: 'localhost',
+  PROTOCOL: 'http',
+  BUILDER: 'webpack',
+};

package/client-tmp/react/src/environments/environment.ts

@@ -0,0 +1,9 @@
+export const environment = {
+  production: false,
+  API_HOST: '{{apiHost}}',
+  PORT: 4200,
+  ENABLE_SSO: {{enableSSO}},
+  HOST: 'localhost',
+  PROTOCOL: 'http',
+  BUILDER: 'webpack'
+};

package/client-tmp/react/src/guards/ProtectedGuard.tsx

@@ -0,0 +1,64 @@
+import { useState, useEffect, ReactNode } from 'react';
+import { RouteObject } from 'react-router';
+import isConnectedHelper from '@/helpers/isConnectedHelper';
+import isAuthenticatedHelper from '@/helpers/isAuthenticatedHelper';
+import hasPermissionHelper from '@/helpers/hasPermissionHelper';
+import { useRoutesContext } from '@/store/RoutesContext';
+import { NOT_PERMITTED_PATH, AUTH_PATH } from '@/config';
+
+enum PermissionState {
+  ALLOWED = 'allowed',
+  DENIED = 'denied',
+  UNKNOWN = 'unknown',
+}
+
+const redirectUrlByPermissionState: { [key in Partial<PermissionState>]?: string } = {
+  [PermissionState.DENIED]: NOT_PERMITTED_PATH,
+  [PermissionState.UNKNOWN]: AUTH_PATH,
+};
+
+type ExtendedRouteObject = RouteObject & {
+  data?: {
+    permissionCode?: string;
+  };
+  path: string;
+}
+
+const ProtectedGuard: React.FC<{ children: ReactNode }> = ({ children }: { children: ReactNode }) => {
+  const routes = useRoutesContext() as ExtendedRouteObject[];
+  const [isConnected, setIsConnected] = useState<boolean | null>(null);
+  const isAuthenticated: boolean | null = null;
+  const route = routes.find(({ path }) => path === location.pathname);
+  const hasPermission = route?.data?.permissionCode ? hasPermissionHelper(route.data?.permissionCode) : true;
+
+  useEffect(() => {
+    isConnectedHelper().then((connectedState: boolean): void => {
+      setIsConnected(connectedState);
+    });
+  }, []);
+  
+  useEffect((): void  => {
+    if (isConnected === null) {
+      return;
+    }
+
+    const isAuthenticated = isAuthenticatedHelper();
+
+
+    let permissionState;
+
+    if (!isConnected || !isAuthenticated) {
+      permissionState = PermissionState.UNKNOWN;
+    } else if (hasPermission === false) {
+      permissionState = PermissionState.DENIED;
+    } 
+    
+    if (permissionState) {
+      window.location.href = `/${redirectUrlByPermissionState[permissionState]}`;
+    }
+  }, [routes, isConnected, isAuthenticated, hasPermission]);
+
+  return children;
+};
+
+export default ProtectedGuard;

package/client-tmp/react/src/helpers/hasPermissionHelper.tsx

@@ -0,0 +1,10 @@
+import { getUser } from '@genesislcap/foundation-user';
+
+const hasPermissionHelper = (permissionCode: string | undefined): boolean => {
+  const user = getUser();
+
+  return !!(permissionCode && !user.hasPermission(permissionCode))
+
+};
+
+export default hasPermissionHelper;

package/client-tmp/react/src/helpers/isAuthenticatedHelper.tsx

@@ -0,0 +1,14 @@
+import { getUser } from '@genesislcap/foundation-user';
+
+const isAuthenticatedHelper = (): boolean => {
+  const user = getUser();
+
+  if (!user.isAuthenticated) {
+    user.trackPath();
+    return false;
+  }
+
+  return true;
+};
+
+export default isAuthenticatedHelper;

package/client-tmp/react/src/helpers/isConnectedHelper.tsx

@@ -0,0 +1,16 @@
+import { getConnect } from '@genesislcap/foundation-comms';
+
+const isConnectedHelper = (): Promise<boolean> => {
+  const connect = getConnect();
+  const hostUrl = sessionStorage.getItem('hostUrl');
+
+  if (connect.isConnected) {
+    return new Promise((resolve) => resolve(true));
+  }
+  if (!hostUrl) {
+    return new Promise((resolve) => resolve(false));
+  }
+  return connect.connect(hostUrl);
+};
+
+export default isConnectedHelper;

package/client-tmp/react/src/layouts/blank/BlankLayout.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, useEffect, useRef } from 'react';
 import { configureDesignSystem } from '@genesislcap/foundation-ui';
 import styles from './BlankLayout.module.css';
-import * as designTokens from '../../styles/design-tokens.json';
+import * as designTokens from '@/styles/design-tokens.json';
 
 interface BlankLayoutProps {
   children: ReactNode;

package/client-tmp/react/src/layouts/default/DefaultLayout.tsx

@@ -1,24 +1,36 @@
 import React, { ReactNode, useEffect, useRef } from 'react';
-import { configureDesignSystem } from '@genesislcap/foundation-ui';
+import { RouteObject } from 'react-router';
+import { configureDesignSystem, getNavItems } from '@genesislcap/foundation-ui';
 import { useNavigate } from 'react-router-dom';
 import {
   baseLayerLuminance,
   StandardLuminance,
 } from '@microsoft/fast-components';
 import styles from './DefaultLayout.module.css';
-import { mainMenu } from '../../config';
-import * as designTokens from '../../styles/design-tokens.json';
+import PBCElementsRenderer from '@/pbc/elementsRenderer';
+import * as designTokens from '@/styles/design-tokens.json';
+import { useRoutesContext } from '@/store/RoutesContext';
 
 interface DefaultLayoutProps {
   children: ReactNode;
 }
 
+type ExtendedRouteObject = RouteObject & {
+  data?: {
+    navItems?: any;
+  };
+  path: string;
+}
+
 const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
   const navigate = useNavigate();
-
   const designSystemProviderRef = useRef<HTMLElement>(null);
   const foundationHeaderRef = useRef<HTMLElement>(null);
-  const allRoutes = mainMenu;
+  const routes = useRoutesContext() as ExtendedRouteObject[];
+  const navItems = getNavItems(routes.flatMap((route) => ({
+    path: route.path || '',
+    navItems: route.data?.navItems,
+  })));
 
   const onLuminanceToggle = (): void => {
     if (designSystemProviderRef.current) {
@@ -57,22 +69,21 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
 
   return (
     <rapid-design-system-provider ref={designSystemProviderRef} class={className}>
+      <PBCElementsRenderer target={['layout-start']} />
       <foundation-header
         ref={foundationHeaderRef}
         show-luminance-toggle-button
         show-misc-toggle-button
-        navigateTo={(path) => navigate(path)}
+        routeNavItems={navItems}
+        navigateTo={(path: string) => navigate(path)}
       >
-        <section className={styles['routes-wrapper']} slot="routes">
-          {allRoutes.map((route, index) => (
-            <rapid-button key={index} onClick={() => navigate(route.path)}>
-              <rapid-icon name={route.icon}></rapid-icon>
-              {route.title}
-            </rapid-button>
-          ))}
-        </section>
       </foundation-header>
-      <section className={styles['content']}>{children}</section>
+      <section className={styles['content']}>
+        <PBCElementsRenderer target={['content-start']} />
+        {children}
+        <PBCElementsRenderer target={['content', 'content-end']} />
+      </section>
+      <PBCElementsRenderer target={['layout', 'layout-end']} />
     </rapid-design-system-provider>
   );
 };

package/client-tmp/react/src/main.tsx

@@ -1,10 +1,26 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
+
+import { registerPBCs } from '@/pbc/utils';
+import { createLogger } from '@genesislcap/foundation-logger';
+
 import './styles/styles.css'
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+const logger = createLogger('main');
+
+function bootstrapApp() {
+  const rootEelement = document.getElementById('root');
+  if (rootEelement) {
+    ReactDOM.createRoot(rootEelement!).render(
+      <React.StrictMode>
+        <App rootElement={rootEelement} />
+      </React.StrictMode>,
+    )
+  }
+}
+
+registerPBCs()
+.then(hasAssets => logger.debug(hasAssets ? 'PBCs registered' : 'No PBCs detected'))
+.catch((err) => logger.error(err))
+.finally(bootstrapApp)

package/client-tmp/react/src/pages/NotFoundPage/NotFoundPage.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ErrorMessage from '@/components/ErrorMessage/ErrorMessage';
+import './NotFoundPage.css';
+
+const NotFoundPage: React.FC = () => {
+  return (
+    <ErrorMessage
+      elementType="h1"
+      message="Page Not Found 404"
+    />
+  );
+};
+
+export default NotFoundPage;

package/client-tmp/react/src/pages/NotPermittedPage/NotPermittedPage.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import NotPermittedPage from './NotPermittedPage';
 
-jest.mock('../../components/ErrorMessage/ErrorMessage', () => {
+jest.mock('@/components/ErrorMessage/ErrorMessage', () => {
   return jest.fn((props: { message: string }) => <h1 data-testid="error-message">{props.message}</h1>);
 });
 

package/client-tmp/react/src/pages/NotPermittedPage/NotPermittedPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ErrorMessage from '../../components/ErrorMessage/ErrorMessage';
+import ErrorMessage from '@/components/ErrorMessage/ErrorMessage';
 import './NotPermittedPage.css';
 
 const NotPermittedPage: React.FC = () => {

package/client-tmp/react/src/pbc/README.md

@@ -0,0 +1,7 @@
+# PBC
+
+This directory contains PBC `genx add` output.
+
+The app will reload if you remove, add, or customise a packaged business capability.
+
+See the expanded README.md in `@genesislcap/foundation-shell`.