@genesislcap/blank-app-seed 3.30.0-prerelease.2 → 3.30.0-prerelease.21

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

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+import NotPermittedPage from './NotPermittedPage';
+
+jest.mock('@/components/ErrorMessage/ErrorMessage', () => {
+  return jest.fn((props: { message: string }) => <h1 data-testid="error-message">{props.message}</h1>);
+});
+
+describe('NotPermittedPage Component', () => {
+  test('renders the ErrorMessage component with correct props', () => {
+    render(<NotPermittedPage />);
+    
+    const errorMessage: HTMLElement = screen.getByTestId('error-message');
+    expect(errorMessage).toBeInTheDocument();
+    expect(errorMessage.tagName).toBe('H1');
+    expect(errorMessage).toHaveTextContent('You do not have permission to access this part of the application, please contact your administrator.');
+  });
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import ErrorMessage from '@/components/ErrorMessage/ErrorMessage';
+import './NotPermittedPage.css';
+
+const NotPermittedPage: React.FC = () => {
+  return (
+    <ErrorMessage
+      elementType="h1"
+      message="You do not have permission to access this part of the application, please contact your administrator."
+    />
+  );
+};
+
+export default NotPermittedPage;

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, // < Workaround - Guard should ensure connection
+    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() ?? '/home';
+        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

@@ -1,4 +1,5 @@
 export * from './history';
 export * from './fdc3';
 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;

package/client-tmp/react/tsconfig.app.json

@@ -1,28 +1,4 @@
 {
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "types": ["node", "react"]
-  },
-  "include": ["src"]
+  "extends": "./tsconfig.json",
+  "include": ["src" , "src/**/*.d.ts"],
 }

package/client-tmp/react/tsconfig.json

@@ -1,11 +1,34 @@
 {
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": false,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
     },
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+  },
+  "include": [
+    "src" ,
+    "src/**/*.d.ts", 
+    "src/pbc/**/*.ts",
+  ],
 }

package/client-tmp/react/tsconfig.node.json

@@ -9,5 +9,5 @@
     "strict": true,
     "noEmit": true
   },
-  "include": ["vite.config.js"]
+  "include": ["vite.config.ts"]
 }