@genesislcap/blank-app-seed 3.22.0 → 3.23.0

package/.genx/package.json

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

package/.genx/static.js

@@ -52,14 +52,15 @@ const DIR_TEMPLATE_BY_FRAMEWORK = {
     DIR_TEMPLATE_WEB_COMPONENT_ALIAS,
   ),
   [FRAMEWORK_ANGULAR_ALIAS]: DIRS_MAP.get(DIR_TEMPLATE_ANGULAR_ALIAS),
+  [FRAMEWORK_REACT_ALIAS]: DIRS_MAP.get(FRAMEWORK_REACT_ALIAS),
 };
 
 const COMPONENT_TYPE = {
   'entity-manager': 'manager',
   'grid-pro': 'grid',
   'smart-form': 'form',
-  'chart': 'chart'
-}
+  chart: 'chart',
+};
 
 const TEXTS = {
   INTRO_API_HOST:

package/.genx/templates/react/chart.hbs

@@ -0,0 +1,9 @@
+<rapid-g2plot-chart
+  type="{{ config.type }}"
+  config={tile{{ config.index }}.chartConfig}
+>
+  <chart-datasource
+    resourceName="{{ config.resourceName }}"
+    server-fields="{{ config.xField }} {{ config.yField }}"
+  ></chart-datasource>
+</rapid-g2plot-chart>

package/.genx/templates/react/entityManager.hbs

@@ -0,0 +1,45 @@
+<entity-management
+    design-system-prefix="rapid"
+    enable-row-flashing
+    enable-cell-flashing
+    {{#if config.title}}
+    title="{{ config.title }}"
+    {{/if}}
+    resourceName="{{ config.resourceName }}"
+    {{#if config.createEvent}}
+    createEvent="{{ config.createEvent }}"
+    {{#if config.createFormUiSchema}}
+    createFormUiSchema={tile{{ config.index }}.createFormUiSchema}
+    {{/if}}
+    {{/if}}
+    {{#if config.updateEvent}}
+    updateEvent="{{ config.updateEvent }}"
+    {{#if config.updateFormUiSchema}}
+    updateFormUiSchema={tile{{ config.index }}.updateFormUiSchema}
+    {{/if}}
+    {{/if}}
+    {{#if config.deleteEvent}}
+    deleteEvent="{{ config.deleteEvent }}"
+    {{/if}}
+    {{#if config.gridOptions}}
+    gridOptions={{{ config.gridOptions }}}
+    {{/if}}
+    {{#if config.snapshot}}
+    datasourceConfig={ isSnapshot: {{ config.snapshot }} }
+    {{/if}}
+    {{#if config.reqrep}}
+    datasourceConfig={tile{{ config.index }}.reqrep}
+    {{/if}}
+    {{#if config.columns}}
+    columns={tile{{ config.index }}.columns}
+    {{/if}}
+    {{#if config.modalPosition}}
+    modal-position="{{ config.modalPosition }}"
+    {{/if}}
+    {{#if config.sizeColumnsToFit}}
+    size-columns-to-fit
+    {{/if}}
+    {{#if config.enableSearchBar}}
+    enable-search-bar
+    {{/if}}
+></entity-management>

package/.genx/templates/react/form.hbs

@@ -0,0 +1,8 @@
+<foundation-form
+  design-system-prefix="rapid"
+  resourceName="{{config.resourceName}}"
+  {{#if config.uischema}}
+  uischema={tile{{ config.index }}.uischema}
+  {{/if}}
+>
+</foundation-form>

package/.genx/templates/react/grid.hbs

@@ -0,0 +1,18 @@
+<rapid-grid-pro
+  enable-row-flashing
+  enable-cell-flashing
+  >
+  <grid-pro-genesis-datasource
+    resource-name="{{config.resourceName}}"
+    {{#if config.snapshot}}
+    isSnapshot="{{config.snapshot}}"
+    {{/if}}
+    {{#if config.reqrep}}
+    [datasourceConfig]="tile{{ config.index }}.reqrep"
+    {{/if}}
+    {{#if config.gridOptions}}
+    [deferredGridOptions]="tile{{ config.index }}.gridOptions"
+    {{/if}}
+  >
+  </grid-pro-genesis-datasource>
+</rapid-grid-pro>

package/.genx/templates/react/gridLayout.hbs

@@ -0,0 +1,30 @@
+<rapid-layout-region type="horizontal">
+    <rapid-layout-region type="vertical">
+    {{#each route.tiles}}
+        {{#ifEquals @index 0}}
+        <rapid-layout-item title="{{../title}}">
+            {{> (lookup ../this 'type') ../this}}
+        </rapid-layout-item>
+        {{/ifEquals}}
+        {{#ifEquals @index 1}}
+        <rapid-layout-item title="{{../title}}">
+            {{> (lookup ../this 'type') ../this}}
+        </rapid-layout-item>
+        {{/ifEquals}}
+    {{/each}}
+    </rapid-layout-region>
+    <rapid-layout-region type="vertical">
+    {{#each route.tiles}}
+        {{#ifEquals @index 2}}
+        <rapid-layout-item title="{{../title}}">
+            {{> (lookup ../this 'type') ../this}}
+        </rapid-layout-item>
+        {{/ifEquals}}
+        {{#ifEquals @index 3}}
+        <rapid-layout-item title="{{../title}}">
+            {{> (lookup ../this 'type') ../this}}
+        </rapid-layout-item>
+        {{/ifEquals}}
+    {{/each}}
+    </rapid-layout-region>
+</rapid-layout-region>

package/.genx/templates/react/horizontalLayout.hbs

@@ -0,0 +1,7 @@
+<rapid-layout-region>
+    {{#each route.tiles}}
+    <rapid-layout-item title="{{this.title}}">
+        {{> (lookup . 'type') }}
+    </rapid-layout-item>
+    {{/each}}
+</rapid-layout-region>

package/.genx/templates/react/route.hbs

@@ -0,0 +1,35 @@
+import './{{pascalCase route.name}}.css';
+
+const {{pascalCase route.name}} = () => {
+  {{#each route.tiles}}
+  const tile{{this.config.index}} = { {{#if this.config.createFormUiSchema}}
+    "createFormUiSchema": {{{ this.config.createFormUiSchema }}},{{/if}}{{#if this.config.updateFormUiSchema}}
+    "updateFormUiSchema": {{{ this.config.updateFormUiSchema }}},{{/if}}{{#if this.config.uischema}}
+    "uischema": {{{ this.config.uischema }}},{{/if}}{{#if this.config.gridOptions}}
+    "gridOptions": {{{ this.config.gridOptions }}},{{/if}}{{#if this.config.reqrep}}
+    "reqrep": {{{ this.config.reqrep }}},{{/if}}{{#if this.config.columns}}
+    "columns": {{{ this.config.columns }}},{{/if}}{{#if this.config.type}}
+    "chartConfig": { {{#ifEquals this.config.type 'pie'}}
+      "radius": 0.75,
+      "angleField": "value",
+      "colorField": "groupBy",{{else}}
+      "xField": "groupBy",
+      "yField": "value",{{/ifEquals}}
+    },{{/if}}
+  };
+  {{/each}}
+
+  return (
+    <section className="{{kebabCase route.name}}-page">
+      {{#if route.tiles}}
+      <rapid-layout auto-save-key="{{route.layoutKey}}">
+        {{> (lookup ./route 'layoutType') }}
+      </rapid-layout>
+      {{else}}
+      Welcome to {{sentenceCase route.name}}
+      {{/if}}
+    </section>
+  );
+};
+
+export default {{pascalCase route.name}};

package/.genx/templates/react/route.styles.hbs

@@ -0,0 +1,3 @@
+:host {
+  height: 100%;
+}

package/.genx/templates/react/tabsLayout.hbs

@@ -0,0 +1,7 @@
+<rapid-layout-region type="tabs">
+    {{#each route.tiles}}
+    <rapid-layout-item title="{{this.title}}">
+        {{> (lookup . 'type') }}
+    </rapid-layout-item>
+    {{/each}}
+</rapid-layout-region>

package/.genx/utils/generateRoute.js

@@ -4,6 +4,7 @@ const generateTile = require('./generateTile');
 const {
   FRAMEWORK_WEB_COMPONENTS_ALIAS,
   FRAMEWORK_ANGULAR_ALIAS,
+  FRAMEWORK_REACT_ALIAS,
   DIR_TEMPLATE_BY_FRAMEWORK,
 } = require('../static');
 
@@ -23,11 +24,17 @@ const getPathByFramework = {
       `${routeDir}/${routeName}.component.html`,
     style: (routePath, routeName) => `${routePath}/${routeName}.component.css`,
   },
+  [FRAMEWORK_REACT_ALIAS]: {
+    clientSrcPath: `../../client/src/pages`,
+    route: (clientSrcPath, routeName) => `${clientSrcPath}/${routeName}`,
+    component: (routeDir, routeName, changeCase) =>
+      `${routeDir}/${changeCase.pascalCase(routeName)}.jsx`,
+    style: (routePath, routeName, changeCase) =>
+      `${routePath}/${changeCase.pascalCase(routeName)}.css`,
+  },
 };
 
 const generateRoute = (route, { changeCase, writeFileWithData }, framework) => {
-  const routeName = changeCase.paramCase(route.name);
-  const sourceTemplateDir = `../${DIR_TEMPLATE_BY_FRAMEWORK[framework]}`;
   const {
     clientSrcPath,
     route: getRouteDir,
@@ -35,23 +42,28 @@ const generateRoute = (route, { changeCase, writeFileWithData }, framework) => {
     template: getTemplateTarget,
     style: getStyleTarget,
   } = getPathByFramework[framework];
+  const routeName = changeCase.paramCase(route.name);
+  const sourceTemplateDir = `../${DIR_TEMPLATE_BY_FRAMEWORK[framework]}`;
   const routeDir = getRouteDir(clientSrcPath, routeName);
 
   const filesToWrite = [
     {
       source: `${sourceTemplateDir}/route.hbs`,
-      target: getComponentTarget(routeDir, routeName),
-    },
-    {
-      source: `${sourceTemplateDir}/route.template.hbs`,
-      target: getTemplateTarget(routeDir, routeName),
+      target: getComponentTarget(routeDir, routeName, changeCase),
     },
     {
       source: `${sourceTemplateDir}/route.styles.hbs`,
-      target: getStyleTarget(routeDir, routeName),
+      target: getStyleTarget(routeDir, routeName, changeCase),
     },
   ];
 
+  if (getTemplateTarget) {
+    filesToWrite.push({
+      source: `${sourceTemplateDir}/route.template.hbs`,
+      target: getTemplateTarget(routeDir, routeName),
+    });
+  }
+
   makeDirectory(resolve(__dirname, routeDir));
   filesToWrite.forEach(({ source, target }) => {
     writeFileWithData(
@@ -61,7 +73,7 @@ const generateRoute = (route, { changeCase, writeFileWithData }, framework) => {
     );
   });
 
-  // Remove condition after adding changes for angular
+  // Remove condition after adding changes for angular & react
   if (framework === FRAMEWORK_WEB_COMPONENTS_ALIAS && route?.tiles?.length) {
     route.tiles.forEach((tile) => {
       generateTile(tile, route, { changeCase, writeFileWithData }, framework);

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [3.23.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.22.0...v3.23.0) (2024-07-15)
+
+
+### Features
+
+* react blank-app-seed (#278) 83b1767
+
 ## [3.22.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.21.0...v3.22.0) (2024-07-15)
 
 

package/client-tmp/react/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

package/client-tmp/react/README.md

@@ -0,0 +1,48 @@
+
+# {{capitalCase appName}}
+
+This project is built with React.
+
+## Development
+
+1. Install dependencies:
+
+```shell
+npm run bootstrap
+```
+
+2. Start the development server:
+
+```shell
+npm run start
+```
+
+3. Build for production:
+
+```shell
+npm run build
+```
+
+Preview the production build:
+
+```shell
+npm run serve
+```
+
+## Clean
+
+Remove `build` and `node_modules` directories:
+
+```shell
+npm run clean
+```
+
+Baseline task combines `clean` and `install` tasks into a single command:
+
+```shell
+npm run baseline
+```
+
+## Further help
+
+To get more help on React, check out the [React documentation](https://reactjs.org/docs/getting-started.html).

package/client-tmp/react/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{pkgName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/client-tmp/react/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "{{pkgName}}",
+  "version": "{{applicationVersionWeb}}",
+  "private": true,
+  "scripts": {
+    "baseline": "npm run clean && npm run bootstrap",
+    "bootstrap": "npm i --legacy-peer-deps",
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "serve": "vite preview",
+    "clean": "rm -rf node_modules dist",
+
+    "lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix"
+  },
+  "dependencies": {
+    "@ag-grid-community/client-side-row-model": "29.2.0",
+    "@ag-grid-community/core": "29.2.0",
+    "@ag-grid-community/csv-export": "29.2.0",
+    "@ag-grid-enterprise/core": "29.2.0",
+    "@ag-grid-enterprise/row-grouping": "29.2.0",
+    "@ag-grid-enterprise/server-side-row-model": "29.2.0",
+    "@genesislcap/foundation-comms": "{{versions.UI}}",
+    "@genesislcap/foundation-login": "{{versions.UI}}",
+    "@genesislcap/foundation-entity-management": "{{versions.UI}}",
+    "@genesislcap/foundation-header": "{{versions.UI}}",
+    "@genesislcap/foundation-ui": "{{versions.UI}}",
+    "@genesislcap/rapid-design-system": "{{versions.UI}}",
+    "@genesislcap/rapid-grid-pro": "{{versions.UI}}",
+    "@genesislcap/foundation-layout": "{{versions.UI}}",
+    "@genesislcap/g2plot-chart": "{{versions.UI}}",
+    "history": "^5.3.0",
+    "react": "^19.0.0-beta-94eed63c49-20240425",
+    "react-dom": "^19.0.0-beta-94eed63c49-20240425",
+    "react-router-dom": "6.24.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.10",
+    "@types/react": "npm:types-react@alpha",  
+    "@types/react-dom": "npm:types-react-dom@alpha",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1"
+  },  
+  "overrides": {  
+    "@types/react": "npm:types-react@alpha",  
+    "@types/react-dom": "npm:types-react-dom@alpha"  
+  } 
+}

package/client-tmp/react/src/App.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import {
+  unstable_HistoryRouter as HistoryRouter,
+  Routes,
+  Route,
+  useLocation,
+} from 'react-router-dom';
+import history from './utils/history';
+import LayoutWrapper from './layouts/LayoutWrapper';
+import { routeLayouts } from './config';
+import AuthGuard from './guards/AuthGuard';
+import { AuthProvider } from './store/AuthContext';
+// Pages Components
+import AuthPage from './pages/auth/AuthPage';
+{{#each routes}}
+import {{pascalCase this.name}} from './pages/{{kebabCase this.name}}/{{pascalCase this.name}}';
+{{/each}}
+// Genesis Components
+import './share/genesis-components';
+
+const LayoutWithLocation = () => {
+  const location = useLocation();
+  const layout = routeLayouts[location.pathname] || 'default';
+
+  let pageComponent;
+
+  switch (location.pathname) {
+    case '/auth':
+      pageComponent = <AuthPage />;
+      break;
+  {{#each routes}}
+    case '/{{kebabCase this.name}}':
+      pageComponent = <{{pascalCase this.name}} />;
+      break;
+  {{/each}}
+    default:
+      pageComponent = <AuthPage />;
+  }
+
+  if (
+    location.pathname === '/auth' ||
+    location.pathname === '/'
+  ) {
+    return <LayoutWrapper layout={layout}>{pageComponent}</LayoutWrapper>;
+  } else {
+    return (
+      <AuthGuard>
+        <LayoutWrapper layout={layout}>{pageComponent}</LayoutWrapper>
+      </AuthGuard>
+    );
+  }
+};
+
+const App: React.FC = () => {
+  return (
+    <AuthProvider>
+      <HistoryRouter history={history}>
+        <Routes>
+          <Route path="*" element={<LayoutWithLocation />} />
+        </Routes>
+      </HistoryRouter>
+    </AuthProvider>
+  );
+};
+
+export default App;

package/client-tmp/react/src/assets/logo-icon--light.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.7702 23.0437C18.7702 22.4675 18.8526 21.8089 19.0995 21.3149C19.3465 20.7386 19.6758 20.2447 20.0874 19.833C20.4991 19.4214 20.993 19.0921 21.5693 18.8451C22.1456 18.5982 22.7219 18.5158 23.2981 18.5158H25.9326V11.6828H19.1819V14.3172C19.1819 15.5521 18.6879 16.7047 17.8647 17.5279C17.0414 18.3512 15.8888 18.8451 14.7363 18.9275H6.7507V6.99025H16.4651V0.157227H3.54C2.63442 0.157227 1.72884 0.568855 1.07023 1.22746C0.411628 1.88606 0 2.79165 0 3.77955V22.2205C0 23.1261 0.411628 24.0316 1.07023 24.7726C1.72884 25.4312 2.63442 25.8428 3.54 25.8428H18.7702V23.0437Z" fill="white"/>
+</svg>

package/client-tmp/react/src/config.ts

@@ -0,0 +1,31 @@
+import { RouteLayouts } from './types/RouteLayouts';
+
+export const routeLayouts: RouteLayouts = {
+  '/auth-mock': 'blank',
+  '/auth': 'blank',
+  '/': 'blank',
+};
+
+import type { MainMenu } from './types/menu';
+
+export const AUTH_PATH = 'auth';
+
+export const API_DATA = {
+  URL: '',
+  AUTH: {
+    username: '', // provide login to a user in given environment
+    password: '', // provide password to a user in given environment
+  },
+};
+
+export const mainMenu: MainMenu = [
+  {{#each routes}}
+  {
+    index: {{@index}},
+    path: '{{kebabCase this.name}}',
+    title: '{{#if this.title}}{{this.title}}{{else}}{{this.name}}{{/if}}',
+    icon: '{{this.icon}}',
+    variant: 'solid'
+  }{{#unless @last}},{{/unless}}
+  {{/each}}
+];

package/client-tmp/react/src/custom-elements.d.ts

@@ -0,0 +1,11 @@
+declare namespace JSX {
+  interface IntrinsicElements {
+    // Wildcard for all webcomponents:
+    [elemName: string]: any;
+  }
+}
+
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/client-tmp/react/src/guards/AuthGuard.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState, ReactNode } from 'react';
+import { useAuth } from '../store/AuthContext';
+import { Navigate } from 'react-router-dom';
+import { AUTH_PATH } from '../config';
+interface AuthGuardProps {
+  children: ReactNode;
+}
+const AuthGuard: React.FC<AuthGuardProps> = ({ children }: AuthGuardProps) => {
+  const { user, checkAuthStatus } = useAuth();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const verifyAuth = async () => {
+      await checkAuthStatus();
+      setIsLoading(false);
+    };
+
+    verifyAuth();
+  }, []);
+
+  if (isLoading) {
+    return <div>Loading...</div>; // Or some loading component
+  }
+
+  if (!user) {
+    return <Navigate to={`/${AUTH_PATH}`} />;
+  }
+
+  return <>{children}</>;
+};
+
+export default AuthGuard;

package/client-tmp/react/src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './styles/styles.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

package/client-tmp/react/src/layouts/LayoutWrapper.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+import BlankLayout from './blank/BlankLayout';
+import DefaultLayout from './default/DefaultLayout';
+
+interface LayoutWrapperProps {
+  layout: 'blank' | 'default';
+  children: ReactNode;
+}
+
+const layoutMap = {
+  blank: BlankLayout,
+  default: DefaultLayout,
+};
+
+const LayoutWrapper: React.FC<LayoutWrapperProps> = ({ layout, children }) => {
+  const Layout = layoutMap[layout] || DefaultLayout;
+  return <Layout>{children}</Layout>;
+};
+
+export default LayoutWrapper;

package/client-tmp/react/src/layouts/blank/BlankLayout.module.css

@@ -0,0 +1,9 @@
+.blank-layout {
+  height: 100%;
+}
+
+.content {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}

package/client-tmp/react/src/layouts/blank/BlankLayout.tsx

@@ -0,0 +1,26 @@
+import React, { ReactNode, useEffect, useRef } from 'react';
+import { configureDesignSystem } from '@genesislcap/foundation-ui';
+import styles from './BlankLayout.module.css';
+import * as designTokens from '../../styles/design-tokens.json';
+
+interface BlankLayoutProps {
+  children: ReactNode;
+}
+
+const BlankLayout: React.FC<BlankLayoutProps> = ({ children }) =>{
+  const designSystemProviderRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (designSystemProviderRef.current) {
+      configureDesignSystem(designSystemProviderRef.current, designTokens);
+    }
+  }, []);
+
+  return (
+  <zero-design-system-provider className={styles['blank-layout']}>
+    <section className={styles.content}>{children}</section>
+  </zero-design-system-provider>
+);
+};
+
+export default BlankLayout;

package/client-tmp/react/src/layouts/default/DefaultLayout.module.css

@@ -0,0 +1,35 @@
+.default-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--neutral-fill-stealth-active);
+  color: var(--neutral-foreground-rest);
+  overflow: hidden;
+}
+
+.default-layout foundation-header {
+  z-index: 999;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  align-items: center;
+  border: none;
+}
+
+.routes-wrapper {
+  display: flex;
+  gap: calc(var(--design-unit) * 2px);
+  margin: calc(var(--design-unit) * 1px) 0;
+}
+
+.content {
+  width: 100%;
+  flex-grow: 1;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding-top: var(--nav-height);
+}

package/client-tmp/react/src/layouts/default/DefaultLayout.tsx

@@ -0,0 +1,80 @@
+import React, { ReactNode, useEffect, useRef } from 'react';
+import { configureDesignSystem } from '@genesislcap/foundation-ui';
+import { useNavigate } from 'react-router-dom';
+import {
+  baseLayerLuminance,
+  StandardLuminance,
+} from '@microsoft/fast-components';
+import styles from './DefaultLayout.module.css';
+import { mainMenu } from '../../config';
+import * as designTokens from '../../styles/design-tokens.json';
+
+interface DefaultLayoutProps {
+  children: ReactNode;
+}
+
+const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
+  const navigate = useNavigate();
+
+  const designSystemProviderRef = useRef<HTMLElement>(null);
+  const foundationHeaderRef = useRef<HTMLElement>(null);
+  const allRoutes = mainMenu;
+
+  const onLuminanceToggle = (): void => {
+    if (designSystemProviderRef.current) {
+      baseLayerLuminance.setValueFor(
+        designSystemProviderRef.current,
+        baseLayerLuminance.getValueFor(designSystemProviderRef.current) ===
+          StandardLuminance.DarkMode
+          ? StandardLuminance.LightMode
+          : StandardLuminance.DarkMode,
+      );
+    }
+  };
+  
+  useEffect(() => {
+    if (designSystemProviderRef.current) {
+      configureDesignSystem(designSystemProviderRef.current, designTokens);
+    }
+
+    const handleLuminanceIconClicked = () => {
+      onLuminanceToggle();
+    };
+
+    const foundationHeader = foundationHeaderRef.current;
+    if (foundationHeader) {
+      foundationHeader.addEventListener('luminance-icon-clicked', handleLuminanceIconClicked);
+    }
+
+    return () => {
+      if (foundationHeader) {
+        foundationHeader.removeEventListener('luminance-icon-clicked', handleLuminanceIconClicked);
+      }
+    };
+  }, []);
+
+  const className = `${styles['default-layout']}`;
+
+  return (
+    <rapid-design-system-provider ref={designSystemProviderRef} class={className}>
+      <foundation-header
+        ref={foundationHeaderRef}
+        show-luminance-toggle-button
+        show-misc-toggle-button
+        navigateTo={(path) => navigate(path)}
+      >
+        <section className={styles['routes-wrapper']} slot="routes">
+          {allRoutes.map((route, index) => (
+            <rapid-button key={index} onClick={() => navigate(route.path)}>
+              <rapid-icon name={route.icon}></rapid-icon>
+              {route.title}
+            </rapid-button>
+          ))}
+        </section>
+      </foundation-header>
+      <section className={styles['content']}>{children}</section>
+    </rapid-design-system-provider>
+  );
+};
+
+export default DefaultLayout;

package/client-tmp/react/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './styles/styles.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/client-tmp/react/src/pages/auth/AuthPage.jsx

@@ -0,0 +1,11 @@
+import './AuthPage.css';
+
+const AuthPage = () => {
+  return (
+    <section className="auth-page">
+      <client-app-login></client-app-login>
+    </section>
+  );
+};
+
+export default AuthPage;

package/client-tmp/react/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = (onPerfEntry) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/client-tmp/react/src/services/auth.service.ts

@@ -0,0 +1,13 @@
+import { Auth } from '@genesislcap/foundation-comms';
+import { DI } from '@microsoft/fast-foundation';
+
+class AuthService {
+  isAuthenticated = false;
+
+  async isUserAuthenticated(): Promise<boolean> {
+    const auth: Auth = DI.getOrCreateDOMContainer().get(Auth);
+    return auth.isLoggedIn;
+  }
+}
+
+export const authService = new AuthService();

package/client-tmp/react/src/services/connect.service.ts

@@ -0,0 +1,26 @@
+import { DI } from '@microsoft/fast-foundation';
+import { Connect } from '@genesislcap/foundation-comms';
+import { API_DATA } from '../config';
+
+class ConnectService {
+  private container = DI.getOrCreateDOMContainer();
+  private connect: Connect = this.container.get(Connect);
+
+  getContainer() {
+    return this.container;
+  }
+
+  getConnect() {
+    return this.connect;
+  }
+
+  isConnected() {
+    return this.connect.isConnected;
+  }
+
+  init() {
+    return this.connect.connect(API_DATA.URL);
+  }
+}
+
+export const connectService = new ConnectService();

package/client-tmp/react/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

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

@@ -0,0 +1,21 @@
+import {configure, define} from '@genesislcap/foundation-login';
+import { AUTH_PATH } from '../config';
+import { DI } from '@microsoft/fast-foundation';
+import history from '../utils/history';
+
+/**
+ * Configure the micro frontend
+ */
+export const configureFoundationLogin = () => {
+  configure(DI.getOrCreateDOMContainer(), {
+    showConnectionIndicator: true,
+    hostPath: AUTH_PATH,
+    redirectHandler: () => {
+      history.push('/{{kebabCase routes.[0].name}}'); 
+    },
+  });
+
+  return define({
+    name: `client-app-login`,
+  });
+};

package/client-tmp/react/src/share/genesis-components.ts

@@ -0,0 +1,32 @@
+import { configure as configureHeader }from '@genesislcap/foundation-header/config';
+import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
+import { EntityManagement } from '@genesislcap/foundation-entity-management';
+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';
+
+EntityManagement;
+
+configureHeader({
+ templateOptions: {
+    provider: 'template',
+     icon: 'rapid-icon',
+     button: 'rapid-button',
+     connectionIndicator: 'rapid-connection-indicator',
+     select: 'rapid-select',
+     option: 'rapid-option',
+     flyout: 'rapid-flyout',
+ },
+});
+
+configureFoundationLogin();
+
+rapidDesignSystem
+ .provideDesignSystem()
+ .register(
+     rapidDesignSystem.baseComponents,
+     rapidGridComponents,
+     g2plotChartsComponents,
+     foundationLayoutComponents,
+ );

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

@@ -0,0 +1,56 @@
+import {
+  createContext,
+  useState,
+  useContext,
+  ReactNode,
+  FunctionComponent,
+} from 'react';
+import { authService } from '../services/auth.service';
+
+interface AuthContextType {
+  user: User | null;
+  setUser: (user: User | null) => void;
+  checkAuthStatus: () => Promise<void>;
+}
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+interface User {
+  authorized: boolean;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
+
+export const AuthProvider: FunctionComponent<AuthProviderProps> = ({
+  children,
+}) => {
+  const [user, setUser] = useState<User | null>(null);
+
+  const checkAuthStatus = async () => {
+    const isUserAuthenticated = await authService.isUserAuthenticated();
+
+    if (isUserAuthenticated) {
+      const user = {
+        authorized: isUserAuthenticated,
+      };
+
+      setUser(user);
+    }
+  };
+
+
+
+  const value = { user, setUser, checkAuthStatus };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};

package/client-tmp/react/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-tmp/react/src/styles/styles.css

@@ -0,0 +1,39 @@
+@font-face {
+  font-family: Segoe UI;
+  font-weight: 300;
+  src: local("Segoe UI Semilight"), local("Segoe UI");
+}
+
+* {
+  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; 
+  font-style: normal;
+  font-weight: normal;
+}
+
+html,
+body,
+#root,
+[class$='-page'] {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+
+  --nav-height: 60px;
+}
+
+body{
+  overflow: hidden;
+}
+
+rapid-design-system-provider,
+.dynamic-template,
+foundation-router {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+rapid-design-system-provider {
+  overflow: hidden;
+}

package/client-tmp/react/src/svg-elements.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}

package/client-tmp/react/src/types/RouteLayouts.ts

@@ -0,0 +1,3 @@
+export interface RouteLayouts {
+  [key: string]: 'blank' | 'default';
+}

package/client-tmp/react/src/types/layers.ts

@@ -0,0 +1,9 @@
+export interface LayersState {
+  [key: string]: boolean; // Each key is a layer name, value is its visibility (true/false)
+}
+
+export interface LayerContextState {
+  state: LayersState;
+  updateState: (newState: Partial<LayerContextState['state']>) => void;
+  setLayerState: (layerName: string, isVisible: boolean) => void;
+}

package/client-tmp/react/src/types/menu.ts

@@ -0,0 +1,8 @@
+export type MainMenuLink = {
+  index: number;
+  path: string;
+  title: string;
+  icon: string;
+  variant?: string;
+};
+export type MainMenu = MainMenuLink[];

package/client-tmp/react/src/utils/history.ts

@@ -0,0 +1,5 @@
+import { createBrowserHistory } from 'history';
+
+const history = createBrowserHistory();
+
+export default history;

package/client-tmp/react/src/utils/navigation.ts

@@ -0,0 +1,5 @@
+import { history } from './history';
+
+export const navigateTo = (path: string): void => {
+  history.push(path);
+};

package/client-tmp/react/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

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

@@ -0,0 +1,28 @@
+{
+  "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"]
+}

package/client-tmp/react/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

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

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

package/client-tmp/react/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+  ],
+  resolve: {
+    alias: {
+      'foundationZero/ZeroDesignSystem': resolve(__dirname, 'node_modules/@genesislcap/foundation-zero'),
+    },
+  },
+});

package/package.json

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

package/client-tmp/react/react-file.ts

@@ -1 +0,0 @@
-// WIP