@genesislcap/blank-app-seed 1.5.2

package/build.gradle.kts

@@ -0,0 +1,15 @@
+// Use base plugin to access base tasks (clean, assemble, check, and build).
+plugins {
+    base
+}
+
+tasks {
+    val tasks = listOf("clean", "assemble", "check", "build")
+    for(taskName in tasks){
+        named(taskName){
+            gradle.includedBuilds.forEach {
+                dependsOn(it.task(":$taskName"))
+            }
+        }
+    }
+}

package/client/.prettierignore

@@ -0,0 +1,14 @@
+**/.git
+**/.svn
+**/.hg
+**/node_modules
+**/__tests__
+**/__test__
+**/.tmp
+**/bootstrap
+**/coverage
+**/dist
+**/temp
+**/storybook-static
+**/*.d.ts
+**/*.md

package/client/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:20
+
+SHELL ["/bin/bash", "-c"]
+
+WORKDIR /app
+
+COPY package.json /app/package.json
+
+COPY . /app
+
+RUN npm run bootstrap
+

package/client/README.md

@@ -0,0 +1,88 @@
+# Web Client
+
+## Frontend stack
+
+Genesis components are standards-based Web Components, making them compatible with almost any modern web framework.
+Our state-of-the-art design system and component set is built on top of
+[Microsoft FAST](https://www.fast.design/docs/introduction/).
+
+# Development
+
+1. Install dependencies:
+
+```shell
+npm run bootstrap
+```
+
+2. Start Web development server in watch mode:
+
+```shell
+npm run dev
+```
+
+3. Build for production:
+
+```shell
+npm run build
+```
+
+Preview production build:
+
+```shell
+npm run serve
+```
+
+## Clean
+
+Remove distribution and node_modules directories:
+
+```shell
+npm run clean
+```
+
+Baseline task combines `clean` and `bootstrap` tasks into a single command:
+
+```shell
+npm run baseline
+```
+
+## Custom Elements IntelliSense
+
+Using any modern editor, you'll receive IntelliSense help while writing TypeScript code while working in the repo. However, you'll also likely be writing a lot of html markup inside of "html\`\`" blocks.
+By default you'll not get any IntelliSense provided in that scenario, but you can enable this while working in the monorepo by leveraging the open source [custom elements lsp](https://www.npmjs.com/package/@genesiscommunitysuccess/custom-elements-lsp) that Genesis provides. This comes pre-configured when you create a seed with `genx`.
+
+### VSCode
+
+VSCode has full support for the plugin, and is the recommended IDE to use if you're new working with the web code. To enable the LSP you'll need to follow the following steps.
+
+1. You need a `.vscode/settings.json` file from the place that you launch your IDE. This has been added to the root of your project automatically, but you'll need to create it in a different place if you want to launch your editor from a different directory. The contents should contain a `typescript.tsdk` key which points to your local typescript install.
+> This is the same file you'll edit if you want to set a specific workspace config. In that case you can have the `typescript.tsdk` key defined, as well as any other config you would like.
+
+2. Launch VSCode on the root directory of the project (so in the folder structure you'll have `.vscode` directory from step 1 at the root). You can do this via the GUI or if you've installed VSCode on your path you can navigate to the root and run `code .`.
+
+3. Ensuring you have a typescript file open, open the command palette (Ctrl/Cmd + Shift + P) and search for `TypeScript: Select Typescript Version...`
+![](docs/images/lsp_vscode_one.png)
+> If you don't see this option then ensure you have a `.ts` file open.
+> If you don't see this option, it may be because you need to set VSCode to trust the workspace (so it picks up the config from step 1) when asked.
+
+4. Select the workspace version, which should have the path matching the path set in the value of step 1.
+![](docs/images/lsp_vscode_two.png)
+> If you don't see this option then ensure that you've opened the project in VSCode that has the `.vscode` directory from step 1 at the root.
+
+5. That should be it! Please note that you'll not see any diagnostics information after the LSP had loaded until you interact and change the file.
+
+### JetBrains
+
+This section applies to JetBrains IDEs such as IntelliJ and Webstorm, though the location of the settings menus might slightly differ between versions.
+
+**IMPORTANT**: Currently JetBrains does not leverage the TypeScript server for full IntelliSense in their IDEs so our plugin can only offer limited functionality. You should receive full diagnostics support from the plugin, but only limited definition coverage, and no help with autocompletion. Currently we are in discussion with JetBrains to come to a solution about this.
+
+1. Launch the IDE.
+
+2. Open the preferences menu option from the settings.
+![](docs/images/lsp_jetbrains_one.png)
+
+3. Navigate to the `Typescript` settings in the `Languages & Frameworks` settings, and ensure that the typescript option is set to the `node_modules/typescript` of your _local_ project, as shown in the image. This may be the default already, in which case you don't need to do anything. You'll also want to enable at least the three options which are enabled in the image below.
+![](docs/images/lsp_jetbrains_two.png)
+
+4. That should be it! Please note that you'll not see any diagnostics information after the LSP had loaded until you interact and change the file.

package/client/build.gradle.kts

@@ -0,0 +1,100 @@
+import com.github.gradle.node.npm.task.NpmTask
+
+plugins {
+    base
+    id("com.github.node-gradle.node") version "3.1.1"
+    distribution
+}
+
+distributions {
+    main {
+        distributionBaseName.set("web-distribution")
+        contents {
+            into ("/") {
+                from("dist")
+            }
+        }
+    }
+}
+
+artifacts {
+    val distzip = tasks.distZip.get()
+    add("default", distzip.archiveFile) {
+        builtBy(distzip)
+    }
+}
+
+allprojects {
+    apply(plugin = "com.github.node-gradle.node")
+    apply(plugin = "base")
+
+    node {
+        // Version of Node to use.
+        version.set("20.8.1")
+
+        // Version of NPM to use.
+        npmVersion.set("10.1.0")
+
+        // If true, it will download node using above parameters.
+        // If false, it will try to use globally installed node.
+        download.set(false)
+    }
+
+    tasks {
+        // Setup custom clean task to be run when "clean" task runs.
+        val npmClean = register("npmClean", NpmTask::class) {
+            args.set(listOf("run", "clean"))
+            delete(".bootstrapDone")
+        }
+
+        clean {
+            // Depend on the custom npmClean task, the default gradle one deletes the "build" folder by default
+            // and the project build won't work without it.
+            dependsOn(npmClean)
+        }
+    }
+}
+
+tasks {
+    val npmBootstrap = register("npmBootstrap", NpmTask::class) {
+        val workingDir = layout.projectDirectory.asFile
+        args.set(listOf("run", "bootstrap"))
+        outputs.upToDateWhen { File(workingDir, ".bootstrapDone").exists() }
+        doLast { File(workingDir, ".bootstrapDone").createNewFile() }
+    }
+
+    val npmBuild = register("npmBuild", NpmTask::class) {
+        args.set(listOf("run", "build"))
+        inputs.dir("src")
+        outputs.dir("dist")
+        dependsOn(npmBootstrap)
+    }
+
+    val test = register("test", NpmTask::class) {
+        dependsOn(build)
+        args.set(listOf("run", "test"))
+        inputs.files(fileTree("src"))
+        inputs.file("package.json")
+
+        val testsExecutedMarkerName: String = "${projectDir}/.tests.executed"
+        // Below some potentially useful config snippets if we want to be efficient with test executions.
+
+        // allows easy triggering re-tests
+        doLast {
+            File(testsExecutedMarkerName).appendText("delete this file to force re-execution JavaScript tests")
+        }
+        outputs.file(testsExecutedMarkerName)
+    }
+
+    distZip {
+        dependsOn(npmBuild)
+    }
+
+    distTar {
+        dependsOn(npmBuild)
+    }
+
+    assemble {
+        dependsOn(npmBuild)
+    }
+}

package/client/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+{{!
+
+Standard Handlebars variables are evaluated once during app generation
+Escaped Handlebars variables (prefixed with \) are evaluated during each run of app build/dev cycle
+
+https://handlebarsjs.com/
+}}
+<head>
+    <meta charset="utf-8"/>
+    <title>\{{htmlWebpackPlugin.options.title}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    {{#if enableSSO}}
+    <script src="/initSSO.js"></script>
+    {{/if}}
+</head>
+<body {{#if enableSSO}}onload="appendApp()"{{/if}}>
+{{#unless enableSSO}}<{{rootElement}}></{{rootElement}}>{{/unless}}
+\{{#if insertEntryPoint}}
+<script type="module" src="/src/index.ts"></script>
+\{{/if}}
+</body>
+</html>

package/client/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "{{pkgName}}",
+  "description": "",
+  "version": "{{applicationVersionWeb}}",
+  "private": true,
+  "license": "UNLICENSED",
+  "config": {
+    "API_HOST": "{{apiHost}}",
+    "PORT": 6060,
+    "ENABLE_SSO": {{enableSSO}}
+  },
+  "genx": {
+    "app": {
+      "rootElement": "{{rootElement}}"
+    },
+    "federation": {
+      "remotes": [
+        "@genesislcap/foundation-zero"
+      ]
+    }
+  },
+  "scripts": {
+    "baseline": "npm run clean && npm run bootstrap",
+    "bootstrap": "npm install --no-fund --no-audit",
+    "bootstrap:ci": "npm ci --no-fund --no-audit",
+    "build": "genx build -e ENABLE_SSO",
+    "build:stats": "genx analyze",
+    "clean": "genx clean dist node_modules",
+    "dev": "genx dev -e API_HOST,ENABLE_SSO",
+    "dev:docker": "npm run dev -- --host 0.0.0.0",
+    "dev:intellij": "genx dev -e ENABLE_SSO",
+    "dev:no-open": "npm run dev -- --no-open",
+    "dev:https": "npm run dev -- --https",
+    "dev:webpack": "npm run dev -- -b webpack",
+    "dsconfig": "dsconfig --path src/styles/design-tokens.json",
+    "git:setup": "cd .. && npx --yes husky install",
+    "lint": "genx lint --profile",
+    "lint:fix": "genx lint --fix",
+    "lint:eslint": "genx lint -l eslint --profile",
+    "lint:stylelint": "genx lint -l stylelint",
+    "serve": "genx serve",
+    "test": "genx test",
+    "test:e2e": "genx test --e2e",
+    "test:e2e:debug": "genx test --e2e --debug",
+    "test:e2e:ui": "genx test --e2e --interactive",
+    "test:coverage": "genx test --coverage",
+    "test:unit:watch": "genx test --watch"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,js}": [
+      "eslint"
+    ],
+    "*.styles.ts": [
+      "stylelint"
+    ]
+  },
+  "eslintConfig": {
+    "extends": "@genesislcap/eslint-config",
+    "ignorePatterns": ["**/dist/**", "**/public/**", "**/coverage/**", "**/test/**", "playwright.config.ts"]
+  },
+  "stylelint": {
+    "extends": "@genesislcap/stylelint-config"
+  },
+  "prettier": "@genesislcap/prettier-config",
+  "devDependencies": {
+    "@genesiscommunitysuccess/cep-fast-plugin": "4.1.1",
+    "@genesiscommunitysuccess/custom-elements-lsp": "4.1.1",
+    "@genesislcap/design-system-configurator": "{{versions.UI}}",
+    "@genesislcap/eslint-config": "{{versions.UI}}",
+    "@genesislcap/foundation-testing": "{{versions.UI}}",
+    "@genesislcap/genx": "{{versions.UI}}",
+    "@genesislcap/prettier-config": "{{versions.UI}}",
+    "@genesislcap/stylelint-config": "{{versions.UI}}",
+    "@types/node": "20.11.5",
+    "husky": "^7.0.4",
+    "lint-prepush": "^2.2.1",
+    "lint-staged": "^12.4.1"
+  },
+  "dependencies": {
+    "@genesislcap/foundation-comms": "{{versions.UI}}",
+    "@genesislcap/foundation-entity-management": "{{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-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}}",
+    "@microsoft/fast-components": "^2.21.6",
+    "@microsoft/fast-element": "^1.7.0",
+    "@microsoft/fast-foundation": "^2.33.4",
+    "@microsoft/fast-router": "^0.4.2",
+    "@microsoft/fast-web-utilities": "^5.1.0",
+    "rxjs": "^7.5.4",
+    "tslib": "^2.3.1"
+  }
+}

package/client/playwright.config.ts

@@ -0,0 +1 @@
+export { configDefaults as default } from '@genesislcap/foundation-testing/e2e';

package/client/public/initSSO.js

@@ -0,0 +1,49 @@
+// Set the appHostURL from which the providers are to be fetched.
+const appHostURL = `${location.protocol}//${location.host}/gwf/`;
+
+const fetchIDPs = async () => {
+  const ipdsEndpoint = `${appHostURL}sso/list`;
+  console.log('IPD endpoint', ipdsEndpoint);
+  return fetch(ipdsEndpoint)
+    .then((res) => {
+      if (res.ok) return res;
+      throw new Error(res.statusText);
+    })
+    .then((res) => res.json())
+    .then((json) => json.IDPS)
+    .catch(() => {
+      console.error('Failed to fetch identity providers.');
+      return [{ ID: 'error', DESCRIPTION: 'Failed to fetch providers.' }];
+    });
+};
+
+// If we do not have initSSO token in our sessionStorage,
+// then we check the list of providers and get ssoToken
+if (!sessionStorage.getItem('initSSO')) {
+  fetchIDPs().then((allIdps) => {
+    console.log('Fetched IDPs', allIdps);
+    idps = allIdps.map((idp) => ({
+      id: idp.ID,
+      type: idp.TYPE,
+    }));
+
+    // Set initSSO token in sessionStorage after the first fetch of providers
+    sessionStorage.setItem('initSSO', 'true');
+
+    // If your environment has more providers and you want to test it - set a number corresponding to the number of your providers
+    if (idps.length === 1 && idps[0].type) {
+      const ssoLoginRoute = `/gwf/${idps[0].type}/login`;
+      const ssoLoginUrl = `${location.protocol}//${new URL(appHostURL).host}${ssoLoginRoute}?idp=${idps[0].id}`;
+
+      window.open(ssoLoginUrl, '_self');
+    }
+  });
+}
+
+// If we have initSSO in our sessionStorage, then we load the entire application
+function appendApp() {
+  if (sessionStorage.getItem('initSSO')) {
+    const node = document.createElement('{{rootElement}}');
+    document.body.appendChild(node);
+  }
+}

package/client/settings.gradle.kts

@@ -0,0 +1 @@
+rootProject.name = "client"

package/client/src/components/components.ts

@@ -0,0 +1,57 @@
+import { EntityManagement } from '@genesislcap/foundation-entity-management';
+import { Form } from '@genesislcap/foundation-forms';
+import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
+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.
+ */
+function loadZeroFallback() {
+  return import(
+    /* webpackMode: "lazy" */
+    '@genesislcap/foundation-zero'
+  );
+}
+
+/**
+ * Granular
+ */
+async function loadZeroDesignSystem() {
+  let type = ResourceType.REMOTE;
+  try {
+    // @ts-ignore
+    return await import('foundationZero/ZeroDesignSystem');
+  } catch (e) {
+    type = ResourceType.LOCAL;
+    return await loadZeroFallback();
+  } finally {
+    logger.debug(`Using '${type}' version of foundationZero/ZeroDesignSystem`);
+  }
+}
+
+export type LoadRemotesOptions = {};
+
+export async function loadRemotes() {
+  const { provideDesignSystem, baseComponents } = await loadZeroDesignSystem();
+  return {
+    ZeroDesignSystem: provideDesignSystem().register(
+      baseComponents,
+      zeroGridComponents,
+      g2plotChartsComponents,
+      foundationLayoutComponents,
+    ),
+  };
+}
+
+FASTRouter;

package/client/src/components/index.ts

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

package/client/src/index.federated.ts

@@ -0,0 +1 @@
+import('./index');

package/client/src/index.ts

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

package/client/src/layouts/default.ts

@@ -0,0 +1,135 @@
+import { css, html, repeat } from '@microsoft/fast-element';
+import { FASTElementLayout } from '@microsoft/fast-router';
+
+const baseLayoutCss = css`
+  .container {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: relative;
+  }
+
+  .content {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+`;
+
+export const loginLayout = new FASTElementLayout(
+  html`
+    <div class="container">
+      <div class="content">
+        <slot></slot>
+      </div>
+    </div>
+  `,
+  baseLayoutCss,
+);
+
+export const defaultLayout = new FASTElementLayout(
+  html`
+    <div class="container">
+      <foundation-header
+        show-luminance-toggle-button
+        show-misc-toggle-button
+        show-notification-button
+      >
+        ${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>
+      </foundation-header>
+      <div class="content">
+        <slot></slot>
+      </div>
+    </div>
+  `,
+  css`
+    ${baseLayoutCss}
+
+    .content {
+      padding-top: 60px;
+    }
+
+    foundation-header {
+      z-index: 999;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      align-items: center;
+      border: none;
+    }
+
+    zero-tree-item zero-icon {
+      color: #879ba6;
+      padding-right: 10px;
+    }
+  `,
+);

package/client/src/layouts/index.ts

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

package/client/src/main/index.ts

@@ -0,0 +1,2 @@
+export * from './main.template';
+export * from './main';

package/client/src/main/main.css

@@ -0,0 +1,17 @@
+/* index.ejs styling */
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+fast-router {
+  padding-top: 60px;
+}
+
+:not(:defined) {
+  visibility: hidden;
+}