@genesislcap/blank-app-seed 3.33.2 → 3.34.0

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`.

package/client-tmp/react/src/pbc/container.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef, RouteObject } from 'react';
+import { deriveElementTag } from './utils';
+import { useRoutesContext } from '@/store/RoutesContext';
+import { useLocation } from 'react-router-dom';
+
+type ExtendedRouteObject = RouteObject & {
+  data?: {
+    pbcElementTag?: string;
+    pbcElement?: any;
+  };
+  path: string;
+}
+
+const PBCContainer: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const routes = useRoutesContext() as ExtendedRouteObject[];
+  const location = useLocation();
+
+  useEffect(() => {
+    const loadElement = async () => {
+      const route = routes.find(({ path }) => path === location.pathname);
+      const { data } = route || {};
+      const { pbcElement, pbcElementTag } = data || {};
+
+      if (!pbcElement) {
+        return;
+      }
+      const element = pbcElement.define ? pbcElement : await pbcElement();
+      const tagName = pbcElementTag || deriveElementTag(element.name);
+      const customElement = document.createElement(tagName);
+
+      if (containerRef.current) {
+        containerRef.current.replaceChildren();
+        containerRef.current.appendChild(customElement);
+      }
+    };
+
+    loadElement();
+  }, [location.pathname, routes]);
+
+  return <div ref={containerRef} className="container" style=\{{ width: '100%', height: '100%' }}></div>;
+};
+
+export default PBCContainer;

package/client-tmp/react/src/pbc/elementsRenderer.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useRef } from 'react';
+import { AppElementPredicate, AppTargetId } from '@genesislcap/foundation-shell/app';
+import { customEventFactory, getTargetElements } from './utils';
+
+interface PBCElementsRendererProps {
+  target: AppTargetId;
+  predicate?: AppElementPredicate;
+}
+
+interface PBCContainerElement extends HTMLDivElement {
+  $emit: (type: string, detail: any) => void;
+}
+
+const PBCElementsRenderer = ({ target = [], predicate = () => true }: PBCElementsRendererProps) => {
+  const containerRef = useRef<PBCContainerElement>(null);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.$emit = (type, detail) => {
+        containerRef.current.dispatchEvent(customEventFactory(type, detail));
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.replaceChildren();
+    }
+    const templates = getTargetElements(target, predicate);
+    templates.forEach((currentTemplate: any) => {
+      if (containerRef.current) {
+        currentTemplate.render(containerRef.current, containerRef.current);
+      }
+    });
+  }, [target, predicate]);
+
+  return (<div ref={containerRef} className="container"></div>);
+};
+
+export default PBCElementsRenderer;

package/client-tmp/react/src/pbc/utils.ts

@@ -0,0 +1,121 @@
+import { createLogger } from '@genesislcap/foundation-logger';
+import {
+    AppContext,
+    AppElement,
+    AppElementPredicate,
+    AppStyle,
+    AppStylePredicate,
+    AppTargetId,
+    assetPredicate,
+    getApp,
+    registrationPredicate,
+    targetIdPredicate
+} from '@genesislcap/foundation-shell/app';
+import { importPBCAssets } from '@genesislcap/foundation-shell/pbc';
+import { toElementStyles } from '@genesislcap/foundation-utils';
+import { ComposableStyles } from '@genesislcap/web-core';
+
+const logger = createLogger('pbc-utils');
+
+/**
+ * Some of this logic already exists in shell, but exists as part of a logic chain that assumes web components.
+ * After testing, we can backport the changes required.
+ */
+
+/**
+ * @public
+ */
+export async function registerPBCs(): Promise<boolean> {
+    const app = getApp();
+    const pbcAssets = await importPBCAssets();
+    app.registerAssets(pbcAssets);
+    return app.hasAssets();
+}
+
+/**
+ * @privateRemarks
+ * Shared across elements and styles.
+ */
+const assetFilter = (
+    asset: AppElement | AppStyle,
+    targetId: AppTargetId,
+    predicate: AppElementPredicate | AppStylePredicate = () => true,
+    context: AppContext,
+) => targetIdPredicate(asset, targetId) &&
+    assetPredicate(asset, context) &&
+    registrationPredicate(
+        asset,
+        predicate,
+        context,
+    );
+
+/**
+ * @public
+ */
+export function getTargetStyles(
+    targetId: AppTargetId,
+    predicate: AppStylePredicate = () => true
+) {
+    const app = getApp();
+    return app.styles
+        .filter(asset => assetFilter(asset, targetId, predicate, app.config.context!))
+        .map((token) => token.styles)
+        .flat();
+}
+
+
+/**
+ * @public
+ */
+export function getTargetElements(
+    targetId: AppTargetId,
+    predicate: AppElementPredicate = () => true
+) {
+    const app = getApp();
+    return app.elements
+        .filter(asset => assetFilter(asset, targetId, predicate, app.config.context!))
+        .map((token) => token.elements);
+}
+
+/**
+ * @public
+ */
+export function registerStylesTarget(nativeElement: HTMLElement, targetId: AppTargetId) {
+    const styles = getTargetStyles(targetId);
+    if (!styles || styles.length === 0) {
+        return;
+    }
+    applyDynamicStyles(nativeElement, styles);
+}
+
+/**
+ * @public
+ */
+export function applyDynamicStyles(nativeElement: HTMLElement, style: ComposableStyles | ComposableStyles[]) {
+    const elementStyles = toElementStyles(style);
+    const styleTarget = nativeElement.shadowRoot ? nativeElement.shadowRoot : document;
+    elementStyles.addStylesTo(styleTarget);
+}
+
+/**
+ * @public
+ */
+export function customEventFactory(type: string, detail?: any) {
+    return new CustomEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail,
+    });
+}
+
+/**
+ * @privateRemarks
+ * May need to add an elementTag to routes, ie. elementTag: 'notifications-dashboard'. May remove when complete.
+ * @public
+ */
+export function deriveElementTag(name: string): string {
+    const tagName = name.replace(/([A-Z])/g, '-$1').toLowerCase().replace(/^-/, '');
+    logger.debug(`Guessing pbc element tag is '${tagName}' based on '${name}'. This may be incorrect, please set pbcElementTag in route data.`);
+    return tagName;
+}

package/client-tmp/react/src/services/store.service.ts

@@ -0,0 +1,48 @@
+
+import { CustomEventMap } from '@genesislcap/foundation-events';
+import { getApp } from '@genesislcap/foundation-shell/app';
+import {
+  AbstractStoreRoot,
+  registerStore,
+  StoreRoot,
+  StoreRootEventDetailMap,
+} from '@genesislcap/foundation-store';
+import { DI } from '@genesislcap/web-core';
+
+interface Store extends StoreRoot {}
+type StoreEventDetailMap = StoreRootEventDetailMap & Record<string, never>;
+
+declare global {
+  interface HTMLElementEventMap extends CustomEventMap<StoreEventDetailMap> {}
+}
+
+class DefaultStore extends AbstractStoreRoot<Store, StoreEventDetailMap> implements Store {
+  constructor() {
+    super();
+
+    /**
+     * Register the store root
+     */
+    getApp().registerStoreRoot(this);
+  }
+}
+
+const Store = registerStore(DefaultStore, 'Store');
+
+class StoreService {
+  private store: any;
+
+  constructor() {
+    this.store = DI.getOrCreateDOMContainer().get(Store) as Store;
+  }
+
+  getStore() {
+    return this.store;
+  }
+
+  onConnected(event?: CustomEvent) {
+    this.store.onConnected(event);
+  }
+}
+
+export const storeService = new StoreService();

package/client-tmp/react/src/share/foundation-login.ts

@@ -1,21 +1,28 @@
 import {configure, define} from '@genesislcap/foundation-login';
-import { AUTH_PATH } from '../config';
-import { DI } from '@microsoft/fast-foundation';
-import { history } from '../utils/history';
+import { getUser } from '@genesislcap/foundation-user';
+import { DI } from '@genesislcap/web-core';
+import { AUTH_PATH } from '@/config';
+import type { Router } from '@/utils/history';
 
 /**
  * Configure the micro frontend
  */
-export const configureFoundationLogin = () => {
+export const configureFoundationLogin = ({ router }:{ router: Router }) => {
   configure(DI.getOrCreateDOMContainer(), {
+    autoConnect: true,
+    autoAuth: true, // < Allow users to skip login
     showConnectionIndicator: true,
     hostPath: AUTH_PATH,
     redirectHandler: () => {
-      history.push('/{{kebabCase routes.[0].name}}'); 
+      // workaround for redirect from foundation-login
+      setTimeout(() => {
+        const lastPath = getUser().lastPath() ?? '/{{kebabCase routes.[0].name}}';
+        router.push(lastPath);
+      }, 0);
     },
   });
 
   return define({
     name: `client-app-login`,
   });
-};
+}

package/client-tmp/react/src/share/genesis-components.ts

@@ -1,32 +1,58 @@
-import { configure as configureHeader }from '@genesislcap/foundation-header/config';
-import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
 import { EntityManagement } from '@genesislcap/foundation-entity-management';
+import { Form } from '@genesislcap/foundation-forms';
+import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
+import { getApp } from '@genesislcap/foundation-shell/app';
+import * as zeroDesignSystem from '@genesislcap/foundation-zero';
 import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
 import * as rapidDesignSystem from '@genesislcap/rapid-design-system';
 import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
-import { configureFoundationLogin } from './foundation-login';
+import { FoundationRouter } from '@genesislcap/foundation-ui';
 
+/**
+ * Ensure tree shaking doesn't remove these.
+ */
+FoundationRouter;
 EntityManagement;
+Form;
+
+/**
+ * registerComponents.
+ * @public
+ */
+export async function registerComponents() {
+  const { configure: configureHeader } = await import('@genesislcap/foundation-header/config');
+  /**
+  * Register any PBC components with the design system
+  */
+  getApp().registerComponents({
+    designSystem: rapidDesignSystem,
+  });
 
-configureHeader({
- templateOptions: {
-    provider: 'template',
-     icon: 'rapid-icon',
-     button: 'rapid-button',
-     connectionIndicator: 'rapid-connection-indicator',
-     select: 'rapid-select',
-     option: 'rapid-option',
-     flyout: 'rapid-flyout',
- },
-});
+  rapidDesignSystem
+    .provideDesignSystem()
+    .register(
+      rapidDesignSystem.baseComponents,
+      rapidGridComponents,
+      g2plotChartsComponents,
+      foundationLayoutComponents,
+    );
 
-configureFoundationLogin();
+  configureHeader({
+    templateOptions: {
+      provider: 'template',
+      icon: 'rapid-icon',
+      button: 'rapid-button',
+      connectionIndicator: 'rapid-connection-indicator',
+      select: 'rapid-select',
+      option: 'rapid-option',
+      flyout: 'rapid-flyout',
+    },
+  });
 
-rapidDesignSystem
- .provideDesignSystem()
- .register(
-     rapidDesignSystem.baseComponents,
-     rapidGridComponents,
-     g2plotChartsComponents,
-     foundationLayoutComponents,
- );
+  /**
+   * May be still required while we transition all PBCs to rapid. Remove when complete.
+   */
+  zeroDesignSystem
+    .provideDesignSystem()
+    .register(zeroDesignSystem.baseComponents, g2plotChartsComponents, foundationLayoutComponents);
+}

package/client-tmp/react/src/store/AuthContext.tsx

@@ -48,8 +48,6 @@ export const AuthProvider: FunctionComponent<AuthProviderProps> = ({
     }
   };
 
-
-
   const value = { user, setUser, checkAuthStatus };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

package/client-tmp/react/src/store/RoutesContext.tsx

@@ -0,0 +1,74 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+import { RouteObject, Navigate } from 'react-router-dom';
+import { getApp } from '@genesislcap/foundation-shell/app';
+import AuthPage from '@/pages/AuthPage/AuthPage';
+import NotFoundPage from '@/pages/NotFoundPage/NotFoundPage';
+import NotPermittedPage from '@/pages/NotPermittedPage/NotPermittedPage';
+{{#each routes}}
+import {{pascalCase this.name}} from '@/pages/{{pascalCase this.name}}/{{pascalCase this.name}}';
+{{/each}}
+import PBCContainer from '@/pbc/container';
+import { AUTH_PATH, NOT_PERMITTED_PATH } from '@/config';
+
+const routes = [
+  {
+    path: '',
+    element: <Navigate to={AUTH_PATH} replace />,
+  },
+  {
+    path: '/not-found',
+    element: <NotFoundPage />,
+  },
+  {
+    path: `/${AUTH_PATH}`,
+    element: <AuthPage />,
+  },
+  {
+    path: `/${NOT_PERMITTED_PATH}`,
+    element: <NotPermittedPage />,
+  },
+  {{#each routes}}
+  {
+    path: '/{{kebabCase this.name}}',
+    element: <{{pascalCase this.name}} />,
+    data: {
+      permissionCode: '{{this.permissions.viewRight}}',
+      navItems: [
+        {
+          navId: 'header',
+          title: '{{#if this.title}}{{this.title}}{{else}}{{this.name}}{{/if}}',
+          icon: {
+            name: '{{this.icon}}',
+            variant: 'solid',
+          },
+        },
+      ],
+    },
+  },
+  {{/each}}
+];
+
+const RoutesContext = createContext<RouteObject[]>([]);
+
+export const RoutesProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const pbcRoutes = getApp().routes.map((route) => ({
+    title: route.title,
+    path: `/${route.path}`,
+    element: <PBCContainer />,
+    data: {
+      ...route.settings,
+      pbcElement: route.element,
+      // @ts-expect-error - getApp() is not typed to return the elementTag
+      pbcElementTag: route.elementTag,
+      navItems: route.navItems,
+    },
+  }));
+
+  const allRoutes = [...routes, ...pbcRoutes];
+
+  return <RoutesContext.Provider value={allRoutes}>{children}</RoutesContext.Provider>;
+};
+
+export const useRoutesContext = () => {
+  return useContext(RoutesContext);
+};

package/client-tmp/react/src/types/LayoutName.ts

@@ -0,0 +1,3 @@
+type LayoutName = 'blank' | 'default';
+
+export default LayoutName;

package/client-tmp/react/src/types/RouteLayouts.ts

@@ -1,3 +1,5 @@
+import LayoutName from './LayoutName';
+
 export interface RouteLayouts {
-  [key: string]: 'blank' | 'default';
+  [key: string]: LayoutName;
 }

package/client-tmp/react/src/utils/getLayoutNameByRoute.ts

@@ -0,0 +1,5 @@
+import { routeLayouts } from '@/config';
+
+export const getLayoutNameByRoute = (route: string) => {
+  return routeLayouts[route] || 'default';
+}

package/client-tmp/react/src/utils/history.ts

@@ -1,3 +1,5 @@
-import { createBrowserHistory } from 'history';
+import { createBrowserHistory, History } from 'history';
 
-export const history = createBrowserHistory();
+export type Router = History;
+
+export const history = createBrowserHistory() as History;

package/client-tmp/react/src/utils/index.ts

@@ -2,4 +2,5 @@ export * from './history';
 export * from './fdc3';
 export * from './layout';
 export * from './permissions';
-export * from './setApiHost';
+export * from './setApiHost';
+export * from './getLayoutNameByRoute';

package/client-tmp/react/test/e2e/fixture.ts

@@ -1,6 +1,6 @@
 import { base, Page } from '@genesislcap/foundation-testing/e2e';
 import { ProtectedPage } from './pages';
-import { PORT } from '../../playwright.config';
+import { PORT } from '@/playwright.config';
 
 export type FixtureConfig = {
   API_HOST: string;