@genesislcap/blank-app-seed 2.1.0 → 2.3.0

package/.genx/configure.js

@@ -1,5 +1,13 @@
 const versions = require('./versions.json');
+const path = require('path');
+const fs = require('fs');
+const directoryExists = (directory) => fs.existsSync(directory);
 
+const makeDirectory = (directory) => {
+  if (!directoryExists(directory)) {
+    fs.mkdirSync(directory);
+  }
+};
 /**
  * Signature is `async (data: inquirer.Answers, utils: SeedConfigurationUtils)`
  */
@@ -12,4 +20,12 @@ module.exports = async (data, utils) => {
   data.versions = versions;
   // to be exposed via user prompt in the future
   data.useDocker = !!process.env.USE_DOCKER;
+  data.routes.forEach(route => {
+    // utils.makeDirectory(path.resolve(data.directory,`client/src/routes/${route}`))
+    makeDirectory(path.resolve(data.directory,`client/src/routes/${route}`));
+    utils.writeFileWithData(path.resolve(data.directory, `client/src/routes/${route}/${route}.ts`), {route}, path.resolve(data.directory, '.genx/templates/route.hbs'));
+    utils.writeFileWithData(path.resolve(data.directory, `client/src/routes/${route}/${route}.template.ts`), {route}, path.resolve(data.directory, '.genx/templates/route.template.hbs'));
+    utils.writeFileWithData(path.resolve(data.directory, `client/src/routes/${route}/${route}.styles.ts`), {route}, path.resolve(data.directory, '.genx/templates/route.styles.hbs'));
+  })
+
 };

package/.genx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed-config",
   "description": "Genesis Blank App Seed Configuration",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "license": "Apache-2.0",
   "genxSeedConfig": {
     "exclude": [

package/.genx/prompts/ui.js

@@ -0,0 +1,22 @@
+const routesInto = () => console.log(`
+  Pages to be added to the navigation header
+`);
+
+module.exports = async (inquirer, prevAns = {}) => {
+  routesInto();
+  const {
+    routes = prevAns.routes,
+  } = await inquirer.prompt([
+    {
+      name: 'routes',
+      type: 'input',
+      message: 'Pages in comma separated format e.g. home,dashboard,admin',
+      when: !prevAns.routes,
+      default: prevAns.routes || 'home',
+    },
+  ])
+
+  return {
+    routes: routes?.split(','),
+  };
+};

package/.genx/prompts.js

@@ -1,5 +1,6 @@
 const apiPrompts = require('./prompts/api');
 const genesisServerPrompts = require('./prompts/server');
+const uiPrompts = require('./prompts/ui');
 const {description, license, name, version} = require('./package.json');
 
 module.exports = async (inquirer, prevAns = {}) => {
@@ -12,9 +13,11 @@ module.exports = async (inquirer, prevAns = {}) => {
 
   const {apiHost, enableSSO} = await apiPrompts(inquirer, prevAns)
   const {groupId, applicationVersion, enableDeployPlugin} = await genesisServerPrompts(inquirer, prevAns);
+  const {routes} = await uiPrompts(inquirer, prevAns);
 
   return {
     apiHost,
+    routes,
     enableSSO,
     groupId,
     applicationVersion,

package/.genx/templates/route.hbs

@@ -0,0 +1,14 @@
+import { customElement, FASTElement } from '@microsoft/fast-element';
+import { {{pascalCase route}}Styles as styles } from './{{route}}.styles';
+import { {{pascalCase route}}Template as template } from './{{route}}.template';
+
+@customElement({
+  name: '{{route}}-route',
+  template,
+  styles,
+})
+export class {{pascalCase route}} extends FASTElement {
+  constructor() {
+    super();
+  }
+}

package/{client/src/routes/home/home.styles.ts → .genx/templates/route.styles.hbs}

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 
-export const HomeStyles = css`
+export const {{pascalCase route}}Styles = css`
   :host {
     /* insert css styles here */
   }

package/.genx/templates/route.template.hbs

@@ -0,0 +1,7 @@
+import { html } from '@microsoft/fast-element';
+import type { {{pascalCase route}} } from './{{route}}';
+
+export const {{pascalCase route}}Template = html<{{pascalCase route}}>`
+  <!-- insert template code here -->
+  Welcome to {{route}}
+`;

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.3.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v2.2.0...v2.3.0) (2024-03-14)
+
+
+### Features
+
+* route generation GENC-57 (#144) 5374330
+
+## [2.2.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v2.1.0...v2.2.0) (2024-03-11)
+
+
+### Features
+
+* add ui pbc compatibility [PLAT-1028](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/1028) (#139) 2a1f927
+
 ## [2.1.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v2.0.2...v2.1.0) (2024-03-11)
 
 

package/client/.editorconfig

@@ -0,0 +1,8 @@
+[*]
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+
+[*.json]
+indent_style = space
+indent_size = 2

package/client/package.json

@@ -88,12 +88,15 @@
   "dependencies": {
     "@genesislcap/foundation-comms": "{{versions.UI}}",
     "@genesislcap/foundation-entity-management": "{{versions.UI}}",
+    "@genesislcap/foundation-events": "{{versions.UI}}",
     "@genesislcap/foundation-forms": "{{versions.UI}}",
     "@genesislcap/foundation-header": "{{versions.UI}}",
     "@genesislcap/foundation-inbox": "{{versions.UI}}",
     "@genesislcap/foundation-layout": "{{versions.UI}}",
     "@genesislcap/foundation-logger": "{{versions.UI}}",
     "@genesislcap/foundation-login": "{{versions.UI}}",
+    "@genesislcap/foundation-shell": "{{versions.UI}}",
+    "@genesislcap/foundation-store": "{{versions.UI}}",
     "@genesislcap/foundation-ui": "{{versions.UI}}",
     "@genesislcap/foundation-utils": "{{versions.UI}}",
     "@genesislcap/foundation-zero": "{{versions.UI}}",
@@ -106,5 +109,23 @@
     "@microsoft/fast-web-utilities": "^5.1.0",
     "rxjs": "^7.5.4",
     "tslib": "^2.3.1"
-  }
+  },
+  "overrides": {
+    "@genesislcap/foundation-comms": "{{versions.UI}}",
+    "@genesislcap/foundation-entity-management": "{{versions.UI}}",
+    "@genesislcap/foundation-events": "{{versions.UI}}",
+    "@genesislcap/foundation-forms": "{{versions.UI}}",
+    "@genesislcap/foundation-header": "{{versions.UI}}",
+    "@genesislcap/foundation-inbox": "{{versions.UI}}",
+    "@genesislcap/foundation-layout": "{{versions.UI}}",
+    "@genesislcap/foundation-logger": "{{versions.UI}}",
+    "@genesislcap/foundation-login": "{{versions.UI}}",
+    "@genesislcap/foundation-shell": "{{versions.UI}}",
+    "@genesislcap/foundation-store": "{{versions.UI}}",
+    "@genesislcap/foundation-ui": "{{versions.UI}}",
+    "@genesislcap/foundation-utils": "{{versions.UI}}",
+    "@genesislcap/foundation-zero": "{{versions.UI}}",
+    "@genesislcap/foundation-zero-grid-pro": "{{versions.UI}}",
+    "@genesislcap/g2plot-chart": "{{versions.UI}}"
+}
 }

package/client/src/components/components.ts

@@ -1,57 +1,75 @@
 import { EntityManagement } from '@genesislcap/foundation-entity-management';
 import { Form } from '@genesislcap/foundation-forms';
+import { Navigation } from '@genesislcap/foundation-header';
 import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
+import { getApp } from '@genesislcap/foundation-shell/app';
+import { FoundationRouter } from '@genesislcap/foundation-ui';
+import {
+  assureDesignSystem,
+  DesignSystemModule,
+  ResourceType,
+} from '@genesislcap/foundation-utils';
 import { zeroGridComponents } from '@genesislcap/foundation-zero-grid-pro';
 import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
-import { FASTRouter } from '@microsoft/fast-router';
 import { logger } from '../utils';
 
-EntityManagement;
-Form;
-
-enum ResourceType {
-  LOCAL = 'LOCAL',
-  REMOTE = 'REMOTE',
-}
-
 /**
- * TODO: Think about sharing import functions across micro frontends.
+ * Ensure tree shaking doesn't remove these.
  */
-function loadZeroFallback() {
-  return import(
-    /* webpackMode: "lazy" */
-    '@genesislcap/foundation-zero'
-  );
-}
+FoundationRouter;
+Navigation;
+EntityManagement;
+Form;
 
 /**
- * Granular
+ * zeroDesignSystemImport.
+ * @remarks
+ * Attempts to use a module federation version of zero before falling back to the version that was bundled with the app.
+ * @internal
  */
-async function loadZeroDesignSystem() {
-  let type = ResourceType.REMOTE;
+async function zeroDesignSystemImport(): Promise<DesignSystemModule> {
+  let module: DesignSystemModule;
+  let type: ResourceType = ResourceType.remote;
   try {
-    // @ts-ignore
-    return await import('foundationZero/ZeroDesignSystem');
+    module = await import(
+      /* webpackChunkName: "foundation-zero" */
+      'foundationZero/ZeroDesignSystem'
+    );
+    return assureDesignSystem(module);
   } catch (e) {
-    type = ResourceType.LOCAL;
-    return await loadZeroFallback();
+    logger.info(
+      `Please note remoteEntry.js load errors are expected if module federated dependencies are offline. Falling back to locally bundled versions.`,
+    );
+    type = ResourceType.local;
+    module = await import(
+      /* webpackChunkName: "foundation-zero" */
+      '@genesislcap/foundation-zero'
+    );
+    return assureDesignSystem(module);
   } finally {
-    logger.debug(`Using '${type}' version of foundationZero/ZeroDesignSystem`);
+    logger.debug(`Using '${type}' version of foundation-zero`);
   }
 }
 
-export type LoadRemotesOptions = {};
+/**
+ * registerComponents.
+ * @public
+ */
+export async function registerComponents() {
+  const designSystem = await zeroDesignSystemImport();
+  const { provideDesignSystem, baseComponents } = designSystem;
 
-export async function loadRemotes() {
-  const { provideDesignSystem, baseComponents } = await loadZeroDesignSystem();
-  return {
-    ZeroDesignSystem: provideDesignSystem().register(
-      baseComponents,
-      zeroGridComponents,
-      g2plotChartsComponents,
-      foundationLayoutComponents,
-    ),
-  };
-}
+  /**
+   * Register any PBC components with the design system
+   */
+  getApp().registerComponents({
+    designSystem,
+  });
 
-FASTRouter;
+  provideDesignSystem().register(
+    baseComponents,
+    zeroGridComponents,
+    g2plotChartsComponents,
+    foundationLayoutComponents,
+  );
+}

package/client/src/layouts/default.ts

@@ -1,5 +1,12 @@
-import { css, html, repeat } from '@microsoft/fast-element';
+import { getApp } from '@genesislcap/foundation-shell/app';
+import type { FoundationRouter } from '@genesislcap/foundation-ui';
+import { css, html } from '@microsoft/fast-element';
 import { FASTElementLayout } from '@microsoft/fast-router';
+import type { Store } from '../store';
+
+type ClientAppRouter = FoundationRouter & { store: Store };
+
+const app = getApp();
 
 const baseLayoutCss = css`
   .container {
@@ -19,7 +26,7 @@ const baseLayoutCss = css`
 `;
 
 export const loginLayout = new FASTElementLayout(
-  html`
+  html<ClientAppRouter>`
     <div class="container">
       <div class="content">
         <slot></slot>
@@ -30,84 +37,76 @@ export const loginLayout = new FASTElementLayout(
 );
 
 export const defaultLayout = new FASTElementLayout(
-  html`
+  html<ClientAppRouter>`
     <div class="container">
+      ${app.registerElementsTarget('layout-start')}
       <foundation-header
         show-luminance-toggle-button
         show-misc-toggle-button
-        show-notification-button
+        :routeNavItems=${(x) => x.config.getNavItems()}
       >
-        ${repeat(
-          (x) => x.config.allRoutes,
-          html`
-            <zero-button
-              appearance="neutral-grey"
-              slot="routes"
-              value="${(x) => x.index}"
-              @click=${(x, c) => c.parent.navigation.navigateTo(x.path)}
-            >
-              <zero-icon variant="${(x) => x.variant}" name="${(x) => x.icon}"></zero-icon>
-              ${(x) => x.title}
-            </zero-button>
-          `,
-        )}
-        <span slot="group-title-1">GROUP SLOT</span>
-        <zero-tree-view slot="nav-items-1">
-          <zero-tree-item>
-            <zero-icon variant="solid" name="location-arrow"></zero-icon>
-            Slot Tree Item
-          </zero-tree-item>
-          <zero-tree-item>
-            <zero-icon variant="solid" name="location-arrow"></zero-icon>
-            Slot Tree Item
-          </zero-tree-item>
-          <zero-tree-item>
-            <zero-icon variant="solid" name="location-arrow"></zero-icon>
-            Slot Tree Item
-          </zero-tree-item>
-          <zero-tree-item>
-            <zero-icon variant="solid" name="location-arrow"></zero-icon>
-            Slot Tree Item
-          </zero-tree-item>
-        </zero-tree-view>
-        <span slot="group-title-2">GROUP SLOT 2</span>
-        <zero-tree-view slot="nav-items-2">
-          <zero-tree-item>
-            <zero-icon variant="solid" name="location-arrow"></zero-icon>
-            Slot Tree Item 2
-          </zero-tree-item>
-          <zero-tree-item>
-            <zero-icon variant="solid" name="location-arrow"></zero-icon>
-            Slot Tree Item 2
-          </zero-tree-item>
-          <zero-tree-item>
-            <zero-icon variant="solid" name="location-arrow"></zero-icon>
-            Slot Tree Item 2
-          </zero-tree-item>
-          <zero-tree-item>
-            <zero-icon variant="solid" name="location-arrow"></zero-icon>
-            Slot Tree Item 2
-          </zero-tree-item>
-        </zero-tree-view>
-        <span slot="group-title-3">GROUP SLOT 3</span>
-        <zero-tree-view slot="nav-items-3">
-          <zero-tree-item>
-            <zero-icon variant="solid" name="location-arrow"></zero-icon>
-            User Slot
-          </zero-tree-item>
-          <zero-tree-item>
-            <zero-icon variant="solid" name="location-arrow"></zero-icon>
-            Reporting Slot
-          </zero-tree-item>
-          <zero-tree-item>
-            <zero-icon variant="solid" name="location-arrow"></zero-icon>
-            Settings Slot
-          </zero-tree-item>
-        </zero-tree-view>
+        <div slot="menu-contents">
+          <span slot="group-title-1">GROUP SLOT</span>
+          <zero-tree-view slot="nav-items-1">
+            <zero-tree-item>
+              <zero-icon variant="solid" name="location-arrow"></zero-icon>
+              Slot Tree Item
+            </zero-tree-item>
+            <zero-tree-item>
+              <zero-icon variant="solid" name="location-arrow"></zero-icon>
+              Slot Tree Item
+            </zero-tree-item>
+            <zero-tree-item>
+              <zero-icon variant="solid" name="location-arrow"></zero-icon>
+              Slot Tree Item
+            </zero-tree-item>
+            <zero-tree-item>
+              <zero-icon variant="solid" name="location-arrow"></zero-icon>
+              Slot Tree Item
+            </zero-tree-item>
+          </zero-tree-view>
+          <span slot="group-title-2">GROUP SLOT 2</span>
+          <zero-tree-view slot="nav-items-2">
+            <zero-tree-item>
+              <zero-icon variant="solid" name="location-arrow"></zero-icon>
+              Slot Tree Item 2
+            </zero-tree-item>
+            <zero-tree-item>
+              <zero-icon variant="solid" name="location-arrow"></zero-icon>
+              Slot Tree Item 2
+            </zero-tree-item>
+            <zero-tree-item>
+              <zero-icon variant="solid" name="location-arrow"></zero-icon>
+              Slot Tree Item 2
+            </zero-tree-item>
+            <zero-tree-item>
+              <zero-icon variant="solid" name="location-arrow"></zero-icon>
+              Slot Tree Item 2
+            </zero-tree-item>
+          </zero-tree-view>
+          <span slot="group-title-3">GROUP SLOT 3</span>
+          <zero-tree-view slot="nav-items-3">
+            <zero-tree-item>
+              <zero-icon variant="solid" name="location-arrow"></zero-icon>
+              User Slot
+            </zero-tree-item>
+            <zero-tree-item>
+              <zero-icon variant="solid" name="location-arrow"></zero-icon>
+              Reporting Slot
+            </zero-tree-item>
+            <zero-tree-item>
+              <zero-icon variant="solid" name="location-arrow"></zero-icon>
+              Settings Slot
+            </zero-tree-item>
+          </zero-tree-view>
+        </div>
       </foundation-header>
       <div class="content">
+        ${app.registerElementsTarget('content-start')}
         <slot></slot>
+        ${app.registerElementsTarget(['content', 'content-end'])}
       </div>
+      ${app.registerElementsTarget(['layout', 'layout-end'])}
     </div>
   `,
   css`
@@ -131,5 +130,23 @@ export const defaultLayout = new FASTElementLayout(
       color: #879ba6;
       padding-right: 10px;
     }
-  `,
+
+    foundation-header::part(nav-visibility-icon) {
+      color: var(--accent-foreground-rest);
+    }
+
+    foundation-header::part(notifications-button) {
+      position: relative;
+    }
+
+    zero-flyout::part(flyout) {
+      width: 40%;
+      min-width: 320px;
+      padding: 0;
+    }
+
+    zero-flyout::part(content) {
+      height: 100%;
+    }
+  `.withBehaviors(app.registerStylesTarget('layout')),
 );

package/client/src/main/main.css

@@ -8,7 +8,7 @@ body {
   margin: 0;
 }
 
-fast-router {
+foundation-router {
   padding-top: 60px;
 }
 

package/client/src/main/main.styles.ts

@@ -1,3 +1,4 @@
+import { getApp } from '@genesislcap/foundation-shell/app';
 import { css } from '@microsoft/fast-element';
 import { stylesFontFaces } from '../styles';
 import './main.css';
@@ -13,9 +14,9 @@ export const MainStyles = css`
   :host,
   zero-design-system-provider,
   .dynamic-template,
-  fast-router {
+  foundation-router {
     display: flex;
     width: 100%;
     height: 100%;
   }
-`;
+`.withBehaviors(getApp().registerStylesTarget('main'));

package/client/src/main/main.template.ts

@@ -1,11 +1,14 @@
+import { LAYOUT_POPOUT_CONTAINER_CLASS } from '@genesislcap/foundation-layout';
 import { html, ref } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type { MainApplication } from './main';
 
 export const DynamicTemplate: ViewTemplate<MainApplication> = html`
-  <zero-design-system-provider ${ref('provider')}>
-    <div class="dynamic-template">${(x) => x.selectTemplate()}</div>
-  </zero-design-system-provider>
+  <template>
+    <zero-design-system-provider ${ref('provider')} class="${LAYOUT_POPOUT_CONTAINER_CLASS}">
+      <div class="dynamic-template">${(x) => x.selectTemplate()}</div>
+    </zero-design-system-provider>
+  </template>
 `;
 
 export const LoadingTemplate: ViewTemplate<MainApplication> = html`
@@ -13,9 +16,9 @@ export const LoadingTemplate: ViewTemplate<MainApplication> = html`
 `;
 
 export const MainTemplate: ViewTemplate<MainApplication> = html`
-  <fast-router
+  <foundation-router
     @luminance-icon-clicked=${(x) => x.onDarkModeToggle()}
     :config=${(x) => x.config}
-    :navigation=${(x) => x.navigation}
-  ></fast-router>
+    :store=${(x) => x.store}
+  ></foundation-router>
 `;

package/client/src/main/main.ts

@@ -1,5 +1,7 @@
 import { Connect, ConnectConfig, defaultConnectConfig } from '@genesislcap/foundation-comms';
-import { Navigation } from '@genesislcap/foundation-header';
+import { EventEmitter } from '@genesislcap/foundation-events';
+import { App } from '@genesislcap/foundation-shell/app';
+import { importPBCAssets } from '@genesislcap/foundation-shell/pbc';
 import { configureDesignSystem } from '@genesislcap/foundation-ui';
 import { baseLayerLuminance, StandardLuminance } from '@microsoft/fast-components';
 import { FASTElement, customElement, observable, DOM } from '@microsoft/fast-element';
@@ -7,35 +9,40 @@ import { Container, inject, Registration } from '@microsoft/fast-foundation';
 import { DefaultRouteRecognizer } from '@microsoft/fast-router';
 import * as Components from '../components';
 import { MainRouterConfig } from '../routes';
+import { Store, StoreEventDetailMap } from '../store';
 import designTokens from '../styles/design-tokens.json';
-import { logger } from '../utils';
 import { MainStyles as styles } from './main.styles';
 import { DynamicTemplate as template, LoadingTemplate, MainTemplate } from './main.template';
 
-// eslint-disable-next-line
-declare var API_HOST: string;
-
-const hostEnv = location.host;
-const hostUrl = API_HOST || `wss://${hostEnv}/gwf/`;
+const name = '{{rootElement}}';
 
+/**
+ * @fires store-connected - Fired when the store is connected.
+ * @fires store-ready - Fired when the store is ready.
+ */
 @customElement({
-  name: '{{rootElement}}',
+  name,
   template,
   styles,
 })
-export class MainApplication extends FASTElement {
-  @inject(MainRouterConfig) config!: MainRouterConfig;
-  @inject(Navigation) navigation!: Navigation;
+export class MainApplication extends EventEmitter<StoreEventDetailMap>(FASTElement) {
+  @App app: App;
   @Connect connect!: Connect;
   @Container container!: Container;
+  @Store store: Store;
+
+  @inject(MainRouterConfig) config!: MainRouterConfig;
+
   @observable provider!: any;
   @observable ready: boolean = false;
   @observable data: any = null;
 
   async connectedCallback() {
-    super.connectedCallback();
-    logger.debug('{{rootElement}} is now connected to the DOM');
     this.registerDIDependencies();
+    super.connectedCallback();
+    this.addEventListeners();
+    this.readyStore();
+    await this.loadPBCs();
     await this.loadRemotes();
     DOM.queueUpdate(() => {
       configureDesignSystem(this.provider, designTokens);
@@ -44,6 +51,8 @@ export class MainApplication extends FASTElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.removeEventListeners();
+    this.disconnectStore();
   }
 
   onDarkModeToggle() {
@@ -55,16 +64,28 @@ export class MainApplication extends FASTElement {
     );
   }
 
-  async loadRemotes() {
-    await Components.loadRemotes();
+  async loadPBCs() {
+    /**
+     * Import PBC assets that may have been added to the ./pbc directory by genx or by hand
+     */
+    const pbcAssets = await importPBCAssets();
     /**
-     * Simulate loading delay
-     * await new Promise(resolve => setTimeout(resolve, 3000));
+     * Register bulk assets
      */
+    this.app.registerAssets(pbcAssets);
+    /**
+     * Register the top-level route collection
+     */
+    this.app.registerRouteCollection(this.config.routes);
+  }
+
+  async loadRemotes() {
+    const { registerComponents } = Components;
+    await registerComponents();
     this.ready = true;
   }
 
-  public selectTemplate() {
+  selectTemplate() {
     return this.ready ? MainTemplate : LoadingTemplate;
   }
 
@@ -90,6 +111,30 @@ export class MainApplication extends FASTElement {
           heartbeatInterval: 15_000,
         },
       }),
+      /**
+       * // example of setting grid options for all grids from app level
+       * Registration.instance<GridOptionsConfig>(GridOptionsConfig, {
+       *  defaultCsvExportParams: csvExportParams,
+       * }),
+       */
     );
   }
+
+  protected addEventListeners() {
+    this.addEventListener('store-connected', this.store.onConnected);
+  }
+
+  protected removeEventListeners() {
+    this.removeEventListener('store-connected', this.store.onConnected);
+  }
+
+  protected readyStore() {
+    // @ts-ignore
+    this.$emit('store-connected', this);
+    this.$emit('store-ready', true);
+  }
+
+  protected disconnectStore() {
+    this.$emit('store-disconnected');
+  }
 }

package/client/src/pbc/README.md

@@ -0,0 +1,8 @@
+# PBC
+
+This directory contains PBCs that have been added dynamically via the `genx add` command. Each `genx add` will create
+a new changeset for you and your team to review and merge. You may choose to tailor the generate PBC assets post
+`genx add` for fine grain control, but be aware that doing so makes it more difficult to automate future PBC upgrades.
+You may need to re-add a PBC that you have previously edited and re-merge any changes to it yourself.
+
+See the app README.md in `@genesislcap/foundation-shell/app` or visit https://learn.genesis.global/docs/web/ to learn more.

package/client/src/routes/config.ts

@@ -1,21 +1,17 @@
-import {
-  Auth,
-  FoundationAnalytics,
-  FoundationAnalyticsEvent,
-  FoundationAnalyticsEventType,
-  Session,
-} from '@genesislcap/foundation-comms';
+import { Auth, Session } from '@genesislcap/foundation-comms';
 import {
   defaultLoginConfig,
   LoginConfig,
   Settings as LoginSettings,
 } from '@genesislcap/foundation-login';
-import { Constructable } from '@microsoft/fast-element';
-import { Container, optional } from '@microsoft/fast-foundation';
-import { Route, RouterConfiguration } from '@microsoft/fast-router';
+import { FoundationRouterConfiguration } from '@genesislcap/foundation-ui';
+import { optional } from '@microsoft/fast-foundation';
+import { Route } from '@microsoft/fast-router';
 import { defaultLayout, loginLayout } from '../layouts';
-import { Home } from './home/home';
 import { NotFound } from './not-found/not-found';
+{{#each routes}}
+import { {{pascalCase this}} } from './{{this}}/{{this}}';
+{{/each}}
 
 // eslint-disable-next-line
 declare var ENABLE_SSO: string;
@@ -31,11 +27,9 @@ const ssoSettings =
       }
     : {};
 
-export class MainRouterConfig extends RouterConfiguration<LoginSettings> {
+export class MainRouterConfig extends FoundationRouterConfiguration<LoginSettings> {
   constructor(
     @Auth private auth: Auth,
-    @Container private container: Container,
-    @FoundationAnalytics private analytics: FoundationAnalytics,
     @Session private session: Session,
     @optional(LoginConfig)
     private loginConfig: LoginConfig = { ...defaultLoginConfig, autoAuth: true, autoConnect: true },
@@ -43,9 +37,8 @@ export class MainRouterConfig extends RouterConfiguration<LoginSettings> {
     super();
   }
 
-  public allRoutes = [{ index: 1, path: 'home', title: 'Home', icon: 'home', variant: 'solid' }];
-
-  public configure() {
+  async configure() {
+    this.configureAnalytics();
     this.title = 'Blank App Demo';
     this.defaultLayout = defaultLayout;
 
@@ -64,7 +57,7 @@ export class MainRouterConfig extends RouterConfiguration<LoginSettings> {
           );
           configure(this.container, {
             autoConnect: true,
-            defaultRedirectUrl: 'home',
+            defaultRedirectUrl: '{{routes.[0]}}',
             ...ssoSettings,
           });
           return define({
@@ -78,12 +71,26 @@ export class MainRouterConfig extends RouterConfiguration<LoginSettings> {
         settings: { public: true },
         childRouters: true,
       },
-      { path: 'home', element: Home, title: 'Home', name: 'home' },
       { path: 'not-found', element: NotFound, title: 'Not Found', name: 'not-found' },
+      {{#each routes}}
+      {
+        path: '{{this}}',
+        element: {{pascalCase this}},
+        title: '{{sentenceCase this}}',
+        name: '{{this}}',
+        navItems: [
+          {
+            title: '{{sentenceCase this}}',
+            icon: {
+              name: 'cog',
+              variant: 'solid',
+            },
+          },
+        ],
+      },
+      {{/each}}
     );
 
-    const auth = this.auth;
-
     /**
      * Example of a FallbackRouteDefinition
      */
@@ -98,12 +105,6 @@ export class MainRouterConfig extends RouterConfiguration<LoginSettings> {
       navigate: async (phase) => {
         const settings = phase.route.settings;
 
-        this.analytics.trackEvent(FoundationAnalyticsEventType.routeChanged, <
-          FoundationAnalyticsEvent.RouteChanged
-        >{
-          path: phase.route.endpoint.path,
-        });
-
         /**
          * If public route don't block
          */
@@ -121,7 +122,7 @@ export class MainRouterConfig extends RouterConfiguration<LoginSettings> {
         /**
          * If allowAutoAuth and session is valid try to connect+auto-login
          */
-        if (this.loginConfig.autoAuth && (await auth.reAuthFromSession())) {
+        if (this.loginConfig.autoAuth && (await this.auth.reAuthFromSession())) {
           return;
         }
 
@@ -135,8 +136,4 @@ export class MainRouterConfig extends RouterConfiguration<LoginSettings> {
       },
     });
   }
-
-  public construct<T>(Type: Constructable<T>): T {
-    return this.container.get(Type) as T;
-  }
 }

package/client/src/store/index.ts

@@ -0,0 +1 @@
+export * from './store';

package/client/src/store/store.ts

@@ -0,0 +1,29 @@
+import { CustomEventMap } from '@genesislcap/foundation-events';
+import { getApp } from '@genesislcap/foundation-shell/app';
+import {
+  AbstractStoreRoot,
+  registerStore,
+  StoreRoot,
+  StoreRootEventDetailMap,
+} from '@genesislcap/foundation-store';
+
+export interface Store extends StoreRoot {}
+
+export type StoreEventDetailMap = StoreRootEventDetailMap & {};
+
+declare global {
+  interface HTMLElementEventMap extends CustomEventMap<StoreEventDetailMap> {}
+}
+
+class DefaultStore extends AbstractStoreRoot<Store, StoreEventDetailMap> implements Store {
+  constructor() {
+    super();
+
+    /**
+     * Register the store root
+     */
+    getApp().registerStoreRoot(this);
+  }
+}
+
+export const Store = registerStore(DefaultStore, 'Store');

package/client/src/typings.d.ts

@@ -0,0 +1,5 @@
+declare module 'foundationZero/ZeroDesignSystem';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.svg';
+declare module '*.css';

package/package.json

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

package/client/src/routes/home/home.template.ts

@@ -1,6 +0,0 @@
-import { html } from '@microsoft/fast-element';
-import type { Home } from './home';
-
-export const HomeTemplate = html<Home>`
-  <!-- insert template code here -->
-`;

package/client/src/routes/home/home.ts

@@ -1,14 +0,0 @@
-import { customElement, FASTElement } from '@microsoft/fast-element';
-import { HomeStyles as styles } from './home.styles';
-import { HomeTemplate as template } from './home.template';
-
-@customElement({
-  name: 'home-route',
-  template,
-  styles,
-})
-export class Home extends FASTElement {
-  constructor() {
-    super();
-  }
-}