@genesislcap/blank-app-seed 1.5.2

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

@@ -0,0 +1,21 @@
+import { css } from '@microsoft/fast-element';
+import { stylesFontFaces } from '../styles';
+import './main.css';
+
+export const MainStyles = css`
+  ${stylesFontFaces}
+  :host {
+    contain: content;
+
+    --nav-height: 60px;
+  }
+
+  :host,
+  zero-design-system-provider,
+  .dynamic-template,
+  fast-router {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+`;

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

@@ -0,0 +1,21 @@
+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>
+`;
+
+export const LoadingTemplate: ViewTemplate<MainApplication> = html`
+  <zero-progress-ring></zero-progress-ring>
+`;
+
+export const MainTemplate: ViewTemplate<MainApplication> = html`
+  <fast-router
+    @luminance-icon-clicked=${(x) => x.onDarkModeToggle()}
+    :config=${(x) => x.config}
+    :navigation=${(x) => x.navigation}
+  ></fast-router>
+`;

package/client/src/main/main.ts

@@ -0,0 +1,95 @@
+import { Connect, ConnectConfig, defaultConnectConfig } from '@genesislcap/foundation-comms';
+import { Navigation } from '@genesislcap/foundation-header';
+import { configureDesignSystem } from '@genesislcap/foundation-ui';
+import { baseLayerLuminance, StandardLuminance } from '@microsoft/fast-components';
+import { FASTElement, customElement, observable, DOM } from '@microsoft/fast-element';
+import { Container, inject, Registration } from '@microsoft/fast-foundation';
+import { DefaultRouteRecognizer } from '@microsoft/fast-router';
+import * as Components from '../components';
+import { MainRouterConfig } from '../routes';
+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/`;
+
+@customElement({
+  name: '{{rootElement}}',
+  template,
+  styles,
+})
+export class MainApplication extends FASTElement {
+  @inject(MainRouterConfig) config!: MainRouterConfig;
+  @inject(Navigation) navigation!: Navigation;
+  @Connect connect!: Connect;
+  @Container container!: Container;
+  @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();
+    await this.loadRemotes();
+    DOM.queueUpdate(() => {
+      configureDesignSystem(this.provider, designTokens);
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  onDarkModeToggle() {
+    baseLayerLuminance.setValueFor(
+      this.provider,
+      baseLayerLuminance.getValueFor(this.provider) === StandardLuminance.DarkMode
+        ? StandardLuminance.LightMode
+        : StandardLuminance.DarkMode,
+    );
+  }
+
+  async loadRemotes() {
+    await Components.loadRemotes();
+    /**
+     * Simulate loading delay
+     * await new Promise(resolve => setTimeout(resolve, 3000));
+     */
+    this.ready = true;
+  }
+
+  public selectTemplate() {
+    return this.ready ? MainTemplate : LoadingTemplate;
+  }
+
+  private registerDIDependencies() {
+    this.container.register(
+      Registration.transient(DefaultRouteRecognizer, DefaultRouteRecognizer),
+      /**
+       * Register custom configs for core services and micro frontends. Note this can also be done via
+       * provideDesignSystem().register(...) if preferred.
+       *
+       * Registration.instance<CredentialManagerConfig>(CredentialManagerConfig, {
+       *  ...defaultCredentialManagerConfig,
+       *  cookie: {
+       *    ...defaultCredentialManagerConfig.cookie,
+       *    path: '/login',
+       *  },
+       * }),
+       */
+      Registration.instance<ConnectConfig>(ConnectConfig, {
+        ...defaultConnectConfig,
+        connect: {
+          ...defaultConnectConfig.connect,
+          heartbeatInterval: 15_000,
+        },
+      }),
+    );
+  }
+}

package/client/src/routes/config.ts

@@ -0,0 +1,142 @@
+import {
+  Auth,
+  FoundationAnalytics,
+  FoundationAnalyticsEvent,
+  FoundationAnalyticsEventType,
+  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 { defaultLayout, loginLayout } from '../layouts';
+import { Home } from './home/home';
+import { NotFound } from './not-found/not-found';
+
+// eslint-disable-next-line
+declare var ENABLE_SSO: string;
+
+const ssoSettings =
+  typeof ENABLE_SSO !== 'undefined' && ENABLE_SSO === 'true'
+    ? {
+        autoAuth: true,
+        sso: {
+          toggled: true,
+          identityProvidersPath: 'sso/list',
+        },
+      }
+    : {};
+
+export class MainRouterConfig extends RouterConfiguration<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 },
+  ) {
+    super();
+  }
+
+  public allRoutes = [{ index: 1, path: 'home', title: 'Home', icon: 'home', variant: 'solid' }];
+
+  public configure() {
+    this.title = 'Blank App Demo';
+    this.defaultLayout = defaultLayout;
+
+    const authPath = 'login';
+
+    this.routes.map(
+      { path: '', redirect: authPath },
+      {
+        path: authPath,
+        name: 'login',
+        title: 'Login',
+        element: async () => {
+          const { configure, define } = await import(
+            /* webpackChunkName: "foundation-login" */
+            '@genesislcap/foundation-login'
+          );
+          configure(this.container, {
+            autoConnect: true,
+            defaultRedirectUrl: 'home',
+            ...ssoSettings,
+          });
+          return define({
+            name: `{{rootElement}}-login`,
+            /**
+             * You can augment the template and styles here when needed.
+             */
+          });
+        },
+        layout: loginLayout,
+        settings: { public: true },
+        childRouters: true,
+      },
+      { path: 'home', element: Home, title: 'Home', name: 'home' },
+      { path: 'not-found', element: NotFound, title: 'Not Found', name: 'not-found' },
+    );
+
+    const auth = this.auth;
+
+    /**
+     * Example of a FallbackRouteDefinition
+     */
+    this.routes.fallback(() =>
+      this.auth.isLoggedIn ? { redirect: 'not-found' } : { redirect: authPath },
+    );
+
+    /**
+     * Example of a NavigationContributor
+     */
+    this.contributors.push({
+      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
+         */
+        if (settings && settings.public) {
+          return;
+        }
+
+        /**
+         * If logged in don't block
+         */
+        if (this.auth.isLoggedIn) {
+          return;
+        }
+
+        /**
+         * If allowAutoAuth and session is valid try to connect+auto-login
+         */
+        if (this.loginConfig.autoAuth && (await auth.reAuthFromSession())) {
+          return;
+        }
+
+        /**
+         * Otherwise route them somewhere, like to a login
+         */
+        phase.cancel(() => {
+          this.session.captureReturnUrl();
+          Route.name.replace(phase.router, authPath);
+        });
+      },
+    });
+  }
+
+  public construct<T>(Type: Constructable<T>): T {
+    return this.container.get(Type) as T;
+  }
+}

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

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

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,14 @@
+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();
+  }
+}

package/client/src/routes/index.ts

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

package/client/src/routes/not-found/not-found.styles.ts

@@ -0,0 +1,11 @@
+import { css } from '@microsoft/fast-element';
+import { mixinScreen } from '../../styles';
+
+export const NotFoundStyles = css`
+  :host {
+    ${mixinScreen('flex')}
+
+    align-items: center;
+    justify-content: center;
+  }
+`;

package/client/src/routes/not-found/not-found.template.ts

@@ -0,0 +1,6 @@
+import { html } from '@microsoft/fast-element';
+import type { NotFound } from './not-found';
+
+export const NotFoundTemplate = html<NotFound>`
+  <h1>Not found! 404</h1>
+`;

package/client/src/routes/not-found/not-found.ts

@@ -0,0 +1,16 @@
+import { customElement, FASTElement } from '@microsoft/fast-element';
+import { logger } from '../../utils';
+import { NotFoundStyles as styles } from './not-found.styles';
+import { NotFoundTemplate as template } from './not-found.template';
+
+@customElement({
+  name: 'not-found-route',
+  template,
+  styles,
+})
+export class NotFound extends FASTElement {
+  public connectedCallback() {
+    super.connectedCallback();
+    logger.debug(`${name} is now connected to the DOM`);
+  }
+}

package/client/src/styles/design-tokens.json

@@ -0,0 +1,56 @@
+{
+  "design_tokens": {
+    "color": {
+      "accent": {
+        "$value": "#0EAFE2",
+        "$type": "color"
+      },
+      "neutral": {
+        "$value": "#7C909B",
+        "$type": "color"
+      }
+    },
+    "fontFamily": {
+      "bodyFont": {
+        "$value": "Roboto, \"Segoe UI\", Arial, Helvetica, sans-serif",
+        "$type": "fontFamily"
+      }
+    },
+    "typography": {
+      "baseFontSize": {
+        "$value": "14px",
+        "$type": "dimension"
+      },
+      "baseLineHeight": {
+        "$value": "20px",
+        "$type": "dimension"
+      }
+    },
+    "mode": {
+      "luminance": {
+        "$value": 0.23,
+        "$type": "number"
+      }
+    },
+    "style": {
+      "density": {
+        "$value": 0,
+        "$type": "number"
+      },
+      "borderRadius": {
+        "$value": 4,
+        "$type": "number"
+      },
+      "strokeWidth": {
+        "$value": 1,
+        "$type": "number"
+      }
+    },
+    "space": {
+      "designUnit": {
+        "$value": 4,
+        "$type": "number"
+      }
+    }
+  }
+}

package/client/src/styles/index.ts

@@ -0,0 +1,2 @@
+export * from './styles';
+export * from './typography';

package/client/src/styles/styles.ts

@@ -0,0 +1,30 @@
+import { css } from '@microsoft/fast-element';
+import { mixinCardTitle } from './typography';
+
+export const stylesCardHeading = css`
+  header h1 {
+    ${mixinCardTitle}
+  }
+`;
+
+export const mixinScreen = (display: string = 'block') => `
+  contain: content;
+  display: ${display};
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+`;
+
+export const mixinCardStyles = `
+  padding: calc(var(--design-unit) * 2px);
+`;
+
+/**
+ * Temp as these parts are being removed from foundation-ui
+ */
+export const hideZeroButtonParts = `
+  zero-button::part(info1),
+  zero-button::part(info2) {
+    display: none;
+  }
+`;

package/client/src/styles/typography.ts

@@ -0,0 +1,25 @@
+const mixinSegoeUI = (style = 'normal', weight = 'normal') => `
+  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; 
+  font-style: ${style};
+  font-weight: ${weight};
+`;
+
+export const stylesFontFaces = `
+  @font-face {
+    font-family: Segoe UI;
+    font-weight: 300;
+    src: local("Segoe UI Semilight"), local("Segoe UI");
+  }
+
+  * {
+    ${mixinSegoeUI()}
+  }
+`;
+
+export const mixinCardTitle = mixinSegoeUI('normal', 'bold');
+
+export const stylesHeaders = `
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+  }
+`;

package/client/src/types.ts

@@ -0,0 +1,5 @@
+import { DI } from '@microsoft/fast-foundation';
+
+export const HostENV = DI.createInterface<string>();
+
+export const HostURL = DI.createInterface<string>();

package/client/src/utils/index.ts

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

package/client/src/utils/logger.ts

@@ -0,0 +1,3 @@
+import { createLogger } from '@genesislcap/foundation-logger';
+
+export const logger = createLogger('{{rootElement}}');

package/client/test/README.md

@@ -0,0 +1,3 @@
+# Test
+
+See [@genesislcap/foundation-testing](https://learn.genesis.global/docs/web/testing/foundation-testing/) for more information.

package/client/test/e2e/fixture.ts

@@ -0,0 +1,25 @@
+import { base } from '@genesislcap/foundation-testing/e2e';
+import { ProtectedPage } from './pages';
+
+const { config: pkgConfig } = require('../../package.json');
+
+export type FixtureConfig = {
+  API_HOST: string;
+  DEFAULT_USER: string;
+  DEFAULT_PASSWORD: string;
+  PORT: number;
+};
+
+export type Fixture = {
+  config: FixtureConfig;
+  protectedPage: ProtectedPage;
+};
+
+export const test = base.extend<Fixture>({
+  config: [pkgConfig, { option: true }],
+  protectedPage: async ({ config, page }, use) => {
+    const protectedPage = new ProtectedPage(config, page);
+    await protectedPage.goto();
+    await use(protectedPage);
+  },
+});

package/client/test/e2e/flows/001-protected.e2e.ts

@@ -0,0 +1,6 @@
+import { expect } from '@genesislcap/foundation-testing/e2e';
+import { test } from '../fixture';
+
+test('expected page title', async ({ protectedPage, page }) => {
+  await expect(page).toHaveTitle(/Blank App Demo - Login - Login/);
+});

package/client/test/e2e/index.ts

@@ -0,0 +1,2 @@
+export * from './fixture';
+export * from './pages';

package/client/test/e2e/pages/index.ts

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

package/client/test/e2e/pages/protected.ts

@@ -0,0 +1,16 @@
+import type { Page } from '@genesislcap/foundation-testing/e2e';
+import type { FixtureConfig } from '../fixture';
+
+export class ProtectedPage {
+  config: FixtureConfig;
+  page: Page;
+
+  constructor(config: FixtureConfig, page: Page) {
+    this.config = config;
+    this.page = page;
+  }
+
+  async goto() {
+    await this.page.goto('/');
+  }
+}

package/docker-compose.yml

@@ -0,0 +1,42 @@
+version: '3.3'
+services:
+  gsf:
+    tty: true
+    container_name: gsf
+    build:
+      context: server/jvm/{{appName}}-deploy/build/docker/
+      dockerfile: Dockerfile
+    networks:
+      qs_network:
+        aliases:
+          - localnode
+    ports:
+      - '9064:9064'
+      - '1337:22'
+      - '5432:5432'
+      - '4569:4569'
+  nginx-proxy:
+    ports:
+      - '80:80'
+      - '443:443'
+    container_name: nginx
+    build:
+      context: server/nginx/
+      dockerfile: Dockerfile
+    networks:
+      - qs_network
+  frontend:
+    container_name: frontend
+    build:
+      context: client/
+      dockerfile: Dockerfile
+    volumes:
+      - ./client:/app/
+    ports:
+      - '6060:6060'
+    entrypoint: [ "/bin/bash" , "-c", "npm run dev:docker && tail -f /dev/null" ]
+    networks:
+      - qs_network
+networks:
+  qs_network:
+    driver: bridge

package/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

package/gradle.properties

@@ -0,0 +1,3 @@
+kotlin.code.style=official
+org.gradle.jvmargs=-Xmx6g -Xss512k -XX:+HeapDumpOnOutOfMemoryError -XX:+UseG1GC -XX:+UseStringDeduplication -XX:ReservedCodeCacheSize=512m -Dkotlin.daemon.jvm.options=-Xmx2g -Dfile.encoding=UTF-8
+org.gradle.caching=true