@genesislcap/blank-app-seed 3.22.0 → 3.24.0

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.24.0",
   "license": "Apache-2.0",
   "scripts": {
     "release": "semantic-release"

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

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