@genesislcap/blank-app-seed 5.20.0 → 5.21.0

package/.genx/package.json

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

package/.genx/versions.json

@@ -1,5 +1,5 @@
 {
-  "UI": "14.496.1",
+  "UI": "14.497.0",
   "GSF": "8.15.14",
   "Auth": "8.15.3"
 }

package/.github/workflows/build.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Set up JDK
         uses: actions/setup-java@v3

package/.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Release
         env:

package/.github/workflows/upgrade.yml

@@ -40,7 +40,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Set up Jfrog CLI
         uses: jfrog/setup-jfrog-cli@v4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [5.21.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v5.20.0...v5.21.0) (2026-07-27)
+
+
+### Features
+
+* **react:** migrate template routing to foundation-react-utils/router primitives [PTC-0](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/0) 28bb768
+* **react:** migrate template routing to foundation-react-utils/router primitives [PTC-0](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/0) (#607) 1d8f13e
+
+
+### Bug Fixes
+
+* **react:** add foundation-react-utils dep + avoid inline style double-brace [PTC-0](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/0) 7e5d676
+* **react:** theme single-component via FUI modal-theme (active-theme) not legacy design-tokens [PTC-0](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/0) 020d99e
+
 ## [5.20.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v5.19.2...v5.20.0) (2026-07-23)
 
 

package/client-tmp/react/package.json

@@ -58,6 +58,7 @@
     "@genesislcap/foundation-layout": "{{versions.UI}}",
     "@genesislcap/foundation-logger": "{{versions.UI}}",
     "@genesislcap/foundation-notifications": "{{versions.UI}}",
+    "@genesislcap/foundation-react-utils": "{{versions.UI}}",
     "@genesislcap/foundation-shell": "{{versions.UI}}",
     "@genesislcap/foundation-ui": "{{versions.UI}}",
     "@genesislcap/foundation-user": "{{versions.UI}}",

package/client-tmp/react/src/components/routes/AppRoutes.tsx

@@ -1,41 +1,31 @@
-import { Routes, Route{{#if routes.[0]}}, Navigate{{/if}} } from 'react-router-dom';
-import AuthPage from '../../pages/AuthPage/AuthPage';
-{{#if routes.[0]}}
-import {{pascalCase routes.[0].name}} from '../../pages/{{pascalCase routes.[0].name}}/{{pascalCase routes.[0].name}}';
-{{/if}}
+import { renderAppRoutes } from '@genesislcap/foundation-react-utils/router';
 import DefaultLayout from '../../layouts/default/DefaultLayout';
-import ProtectedRoute from './ProtectedRoute';
-import { useRoutesContext } from '../../store/RoutesContext';
-import PBCContainer from '../../pbc/container';
 import NotFoundPage from '../../pages/NotFoundPage/NotFoundPage.tsx';
+import { useRoutesContext } from '../../store/RoutesContext';
+import ProtectedRoute from './ProtectedRoute';
+{{#if routes.[0]}}
+import SingleComponent, { initialComponentName } from '../single-component/SingleComponent';
+{{/if}}
 
+/**
+ * Builds the app's `<Routes>` from the declarative route table (see RoutesContext)
+ * via `renderAppRoutes`, which applies the auth/permission guard, wraps in-layout
+ * routes in `DefaultLayout`, and handles the `/` redirect, not-found, and the
+ * single-component (`?component=<name>`) short-circuit.
+ */
 const AppRoutes = () => {
   const routes = useRoutesContext();
-  return (
-    <Routes>
-      <Route path="/login" element={<AuthPage />} />
-      {{#if routes.[0]}}
-      <Route path="/" element={<Navigate to="/{{kebabCase routes.[0].name}}" replace />} />
-      {{/if}}
-      <Route element={<DefaultLayout />}>
-        {{#if routes.[0]}}
-        <Route path="/" element={<{{pascalCase routes.[0].name}} />} />
-        {{/if}}
-        {routes.map(route => (<Route
-            key={route.path}
-            path={route.path}
-            element={
-            <ProtectedRoute>
-              {route.data?.pbcElement ? <PBCContainer /> : route.element}
-            </ProtectedRoute>
-            }
-            />))}
-      </Route>
-      
-      <Route path="*" element={<NotFoundPage />} />
-    </Routes>
-  );
-};
 
-export default AppRoutes; 
+  return renderAppRoutes({
+    routes,
+    ProtectedRoute,
+    layout: <DefaultLayout />,
+{{#if routes.[0]}}
+    redirects: [{ from: '/', to: '/{{kebabCase routes.[0].name}}' }],
+    singleComponent: { name: initialComponentName, element: <SingleComponent /> },
+{{/if}}
+    notFound: <NotFoundPage />,
+  });
+};
 
+export default AppRoutes;

package/client-tmp/react/src/components/routes/ProtectedRoute.tsx

@@ -1,19 +1,19 @@
-import { Navigate, useLocation } from 'react-router-dom';
+import { createProtectedRoute } from '@genesislcap/foundation-react-utils/router';
 import { getUser } from '@genesislcap/foundation-user';
+import { NOT_PERMITTED_PATH } from '../../config';
+import hasPermissionHelper from '../../helpers/hasPermissionHelper';
 
-interface ProtectedRouteProps {
-  children: React.ReactNode;
-}
+/**
+ * App auth + permission guard. Redirects to `/login` (stashing the full origin
+ * location, incl. query + hash) when unauthenticated, or to `/not-permitted`
+ * when authenticated but the route's `permissionCode` is denied. The reusable
+ * behaviour lives in `@genesislcap/foundation-react-utils/router`; this binds it
+ * to this app's user.
+ */
+const ProtectedRoute = createProtectedRoute({
+  getIsAuthenticated: () => getUser().isAuthenticated,
+  hasPermission: hasPermissionHelper,
+  notPermittedPath: `/${NOT_PERMITTED_PATH}`,
+});
 
-function ProtectedRoute({ children }: ProtectedRouteProps) {
-  const location = useLocation();
-
-  if (!getUser().isAuthenticated) {
-    const loginState = { from: location };
-    return <Navigate to="/login" state={loginState} replace />;
-  }
-
-  return <>{children}</>;
-}
-
-export default ProtectedRoute;
+export default ProtectedRoute;

package/client-tmp/react/src/components/single-component/SingleComponent.tsx

@@ -0,0 +1,55 @@
+import { SingleComponentOutlet } from '@genesislcap/foundation-react-utils/router';
+import { applyMode, injectThemeStyles, resolveInitialMode } from '@genesislcap/rapid-design-system';
+import { useEffect, useRef } from 'react';
+import { registerStylesTarget } from '../../pbc/utils';
+import { activeTheme } from '../../styles/active-theme';
+import ErrorMessage from '../ErrorMessage/ErrorMessage';
+import { initialComponentName } from './initialParams';
+import { registry } from './registry';
+
+export { SINGLE_COMPONENT_PARAM, initialComponentName } from './initialParams';
+
+// Defined outside JSX so the template stays free of inline `style={{ … }}`,
+// whose double braces collide with the seed's handlebars interpolation.
+const providerStyle = { display: 'block', height: '100%', width: '100%' } as const;
+
+/**
+ * Renders a single registered component full-screen based on the
+ * `?component=<name>` URL parameter captured at app load. The component is
+ * wrapped in the same design-system provider / theme that DefaultLayout sets
+ * up (the FUI modal-theme runtime via `activeTheme`), so it is themed
+ * identically to how it appears in-app — just without the header and
+ * navigation chrome (and without a mode toggle).
+ *
+ * Resolution + fallback are handled by `SingleComponentOutlet` from
+ * `@genesislcap/foundation-react-utils/router`; this file only supplies the
+ * app-specific provider/theming and the themed unknown-component message.
+ */
+const SingleComponent = () => {
+  const providerRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (providerRef.current) {
+      injectThemeStyles(providerRef.current, activeTheme);
+      applyMode(providerRef.current, activeTheme, resolveInitialMode(activeTheme));
+      registerStylesTarget(document.body, 'content');
+    }
+  }, []);
+
+  return (
+    <rapid-design-system-provider ref={providerRef} style={providerStyle}>
+      <SingleComponentOutlet
+        name={initialComponentName}
+        registry={registry}
+        renderUnknown={(name, available) => (
+          <ErrorMessage
+            elementType="h3"
+            message={`Unknown component "${name ?? ''}". Available: ${available.join(', ')}`}
+          />
+        )}
+      />
+    </rapid-design-system-provider>
+  );
+};
+
+export default SingleComponent;

package/client-tmp/react/src/components/single-component/initialParams.ts

@@ -0,0 +1,16 @@
+import { readInitialParam } from '@genesislcap/foundation-react-utils/router';
+
+/**
+ * The app shell performs async bootstrap (component registration, session
+ * restore) before React Router mounts, and during that window the platform
+ * rewrites the URL and drops the query string. We therefore capture the
+ * requested component name synchronously at module-evaluation time — which runs
+ * during the initial import phase, before any of that async work starts — so
+ * the `?component=<name>` request survives.
+ */
+
+/** Query-string key used to request a single standalone component. */
+export const SINGLE_COMPONENT_PARAM = 'component';
+
+/** The requested component name from the initial URL, or null if absent. */
+export const initialComponentName = readInitialParam(SINGLE_COMPONENT_PARAM);

package/client-tmp/react/src/components/single-component/registry.ts

@@ -0,0 +1,16 @@
+import { createComponentRegistry } from '@genesislcap/foundation-react-utils/router';
+{{#each routes}}
+import {{pascalCase this.name}} from '../../pages/{{pascalCase this.name}}/{{pascalCase this.name}}';
+{{/each}}
+
+/**
+ * Registry of components that can be rendered standalone via the
+ * `?component=<name>` URL parameter. Generated from the app's routes; add or
+ * remove entries here to control what is exposed. Lookup is case- and
+ * separator-insensitive (see `createComponentRegistry`).
+ */
+export const registry = createComponentRegistry({
+{{#each routes}}
+  {{pascalCase this.name}},
+{{/each}}
+});

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

@@ -1,15 +1,13 @@
 import { configure, defaultAuthConfig } from '@genesislcap/foundation-auth/config';
+import {
+  buildPostLoginRedirect,
+  type RedirectableLocationState,
+} from '@genesislcap/foundation-react-utils/router';
 import { AUTH_PATH } from '../config';
 import { Connect } from '@genesislcap/foundation-comms';
 import { DI } from '@genesislcap/web-core';
 import type { NavigateFunction, Location as RouterLocation } from 'react-router-dom';
 
-interface LocationState {
-  from?: {
-    pathname: string;
-  };
-}
-
 /**
  * Configure the micro frontend
  */
@@ -18,7 +16,7 @@ export const configureFoundationLogin = ({
   location,
 }: {
   navigate: NavigateFunction;
-  location: RouterLocation<LocationState>;
+  location: RouterLocation<RedirectableLocationState>;
 }) => {
   const baseElement = document.querySelector('base');
   const basePath = baseElement?.getAttribute('href') || '';
@@ -36,8 +34,9 @@ export const configureFoundationLogin = ({
     hostPath: basePath + AUTH_PATH,
     postLoginRedirect: async () => {
       await connect.connect();
-      const from = location.state?.from?.pathname || '/';
-      navigate(from, { replace: true });
+      // Preserve the full original location (query string + hash) so deep-link
+      // params such as `?component=<name>` survive the login bounce.
+      navigate(buildPostLoginRedirect(location), { replace: true });
     },
   });
 };

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

@@ -1,40 +1,33 @@
+import {
+  mergePbcRoutes,
+  type AppRouteConfig,
+  type PbcRouteInput,
+} from '@genesislcap/foundation-react-utils/router';
 import React, { createContext, useContext, ReactNode } from 'react';
-import { Navigate } from 'react-router-dom';
-import type { AppRoute } from '../types/AppRoute';
 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';
-import * as changeCase from 'change-case';
 
-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 />,
-  },
+/**
+ * Static application routes as a declarative table consumed by `renderAppRoutes`
+ * (routing), `DefaultLayout` (nav items), and `PBCContainer` (pbc lookup).
+ * `public` routes render outside the layout without the auth guard;
+ * `permissionCode` gates a route via the shared guard.
+ */
+const staticRoutes: AppRouteConfig[] = [
+  { path: `/${AUTH_PATH}`, element: <AuthPage />, public: true },
+  { path: `/${NOT_PERMITTED_PATH}`, element: <NotPermittedPage />, public: true },
   {{#each routes}}
   {
     path: '/{{kebabCase this.name}}',
     element: <{{pascalCase this.name}} />,
+    permissionCode: '{{this.permissions.viewRight}}',
     data: {
-      permissionCode: '{{this.permissions.viewRight}}',
       navItems: [
         {
           navId: 'header',
@@ -50,25 +43,14 @@ const routes = [
   {{/each}}
 ];
 
-const RoutesContext = createContext<AppRoute[]>([]);
+const RoutesContext = createContext<AppRouteConfig[]>([]);
 
 export const RoutesProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-  const pbcRoutes = getApp().routes.map((route) => ({
-    title: changeCase.capitalCase(route.path),
-    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];
+  const routes = mergePbcRoutes(staticRoutes, getApp().routes as unknown as PbcRouteInput[], {
+    renderPbc: () => <PBCContainer />,
+  });
 
-  return <RoutesContext.Provider value={allRoutes}>{children}</RoutesContext.Provider>;
+  return <RoutesContext.Provider value={routes}>{children}</RoutesContext.Provider>;
 };
 
 export const useRoutesContext = () => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed",
   "description": "Genesis Blank App Seed",
-  "version": "5.20.0",
+  "version": "5.21.0",
   "license": "Apache-2.0",
   "scripts": {
     "release": "semantic-release"