@genesislcap/blank-app-seed 5.7.0-prerelease.4 → 5.7.0-prerelease.40

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

@@ -7,26 +7,20 @@ import {
   onFDC3Ready,
   {{/if}}
 } from './utils';
-import { customEventFactory, registerStylesTarget } from '@/pbc/utils';
+import { customEventFactory, registerStylesTarget } from './pbc/utils';
 import { RoutesProvider } from './store/RoutesContext';
 import { registerComponents as genesisRegisterComponents } from './share/genesis-components';
-import { storeService } from '@/services/store.service';
+import { storeService } from './services/store.service';
 import AppRoutes from './components/routes/AppRoutes';
 import NotFoundPage from "@/pages/NotFoundPage/NotFoundPage.tsx";
-
+import { reduxStore } from './store/store';
+import { Provider } from 'react-redux';
 
 interface AppProps {
   rootElement: HTMLElement;
 }
 
 const App: React.FC<AppProps> = ({ rootElement }) => {
-  const [isStoreConnected, setIsStoreConnected] = useState(false);
-  const dispatchCustomEvent = (type: string, detail?: any) => {
-    rootElement.dispatchEvent(customEventFactory(type, detail));
-  };
-  const handleStoreConnected = (event: CustomEvent) => {
-    storeService.onConnected(event);
-  };
   {{#if FDC3.channels.length~}}
   const FDC3ReadyHandler = () => {
     {{#each FDC3.channels}}
@@ -38,15 +32,31 @@ const App: React.FC<AppProps> = ({ rootElement }) => {
     {{/each}}
   };
   {{/if}}
+  const [isStoreConnected, setIsStoreConnected] = useState(false);
+  const [componentsReady, setComponentsReady] = useState(false);
+  const dispatchCustomEvent = (type: string, detail?: any) => {
+    rootElement.dispatchEvent(customEventFactory(type, detail));
+  };
 
-  setApiHost();
-  genesisRegisterComponents();
+  const handleStoreConnected = (event: CustomEvent) => {
+    storeService.onConnected(event);
+  };
+  useEffect(() => {
+    let mounted = true;
+    setApiHost();
+    (async () => {
+      await genesisRegisterComponents();
+      if (mounted) {
+        setComponentsReady(true);
+      }
+    })();
+    return () => {
+      mounted = false;
+    };
+  }, []);
 
   useEffect(() => {
     registerStylesTarget(document.body, 'main');
-    {{#if FDC3.channels.length~}}
-    onFDC3Ready(FDC3ReadyHandler);
-    {{/if}}
     if (!isStoreConnected) {
       rootElement.addEventListener('store-connected', handleStoreConnected);
       dispatchCustomEvent('store-connected', rootElement);
@@ -60,17 +70,27 @@ const App: React.FC<AppProps> = ({ rootElement }) => {
         dispatchCustomEvent('store-disconnected');
       }
     };
+    {{#if FDC3.channels.length~}}
+    onFDC3Ready(FDC3ReadyHandler);
+    {{/if}}
+
   }, [isStoreConnected]);
 
   const baseElement = document.querySelector('base');
   const basePath = baseElement?.getAttribute('href') || '';
 
+  if (!componentsReady) {
+    return null;
+  }
+
   return (
-    <RoutesProvider>
-        <Router basename={basePath}>
-          <AppRoutes />
-        </Router>
-    </RoutesProvider>
+    <Provider store={reduxStore}>
+      <RoutesProvider>
+          <Router basename={basePath}>
+            <AppRoutes />
+          </Router>
+      </RoutesProvider>
+    </Provider>
   );
 };
 

package/client-tmp/react/src/components/routes/AppRoutes.tsx

@@ -1,11 +1,11 @@
 import { Routes, Route, Navigate } from 'react-router-dom';
 import AuthPage from '../../pages/AuthPage/AuthPage';
-import {{pascalCase routes.[0].name}} from '@/pages/{{pascalCase routes.[0].name}}/{{pascalCase routes.[0].name}}';
+import {{pascalCase routes.[0].name}} from '../../pages/{{pascalCase routes.[0].name}}/{{pascalCase routes.[0].name}}';
 import DefaultLayout from '../../layouts/default/DefaultLayout';
 import ProtectedRoute from './ProtectedRoute';
-import { useRoutesContext } from '@/store/RoutesContext';
-import PBCContainer from '@/pbc/container';
-import NotFoundPage from '@/pages/NotFoundPage/NotFoundPage.tsx';
+import { useRoutesContext } from '../../store/RoutesContext';
+import PBCContainer from '../../pbc/container';
+import NotFoundPage from '../../pages/NotFoundPage/NotFoundPage.tsx';
 
 const AppRoutes = () => {
   const routes = useRoutesContext();

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

@@ -1,5 +1,5 @@
 import { RouteLayouts } from './types/RouteLayouts';
-import { environment } from '@environment';
+import { environment } from './environments/environment';
 
 export const routeLayouts: RouteLayouts = {
   '/login': 'blank',

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

@@ -1,7 +1,7 @@
 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';
+import * as designTokens from '../../styles/design-tokens.json';
 
 interface BlankLayoutProps {
   children: ReactNode;

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

@@ -17,6 +17,14 @@
   border: none;
 }
 
+.default-layout foundation-header::part(logo) {
+  max-width: 50px;
+  max-height: 24px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
 .routes-wrapper {
   display: flex;
   gap: calc(var(--design-unit) * 2px);

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

@@ -6,10 +6,12 @@ import {
   StandardLuminance,
 } from '@microsoft/fast-components';
 import styles from './DefaultLayout.module.css';
-import PBCElementsRenderer from '@/pbc/elementsRenderer';
-import * as designTokens from '@/styles/design-tokens.json';
-import { useRoutesContext } from '@/store/RoutesContext';
-import { AUTH_PATH } from '@/config';
+import PBCElementsRenderer from '../../pbc/elementsRenderer';
+import { registerStylesTarget } from '../../pbc/utils';
+import * as designTokens from '../../styles/design-tokens.json';
+import { useRoutesContext } from '../../store/RoutesContext';
+import { useDocumentTitle } from '../../utils/useDocumentTitle';
+import { AUTH_PATH } from '../../config';
 import { LOGOUT_URL } from '@genesislcap/foundation-utils';
 
 interface DefaultLayoutProps {}
@@ -30,6 +32,8 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = () => {
     navItems: route.data?.navItems,
   })));
 
+  useDocumentTitle();
+
   const onLuminanceToggle = (): void => {
     if (designSystemProviderRef.current) {
       baseLayerLuminance.setValueFor(
@@ -45,6 +49,9 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = () => {
   useEffect(() => {
     if (designSystemProviderRef.current) {
       configureDesignSystem(designSystemProviderRef.current, designTokens);
+      registerStylesTarget(document.body, 'layout');
+      registerStylesTarget(document.body, 'header');
+      registerStylesTarget(document.body, 'content');
     }
 
     return () => {
@@ -57,6 +64,9 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = () => {
     <rapid-design-system-provider ref={designSystemProviderRef} class={className}>
       <PBCElementsRenderer target={['layout-start']} />
       <foundation-header
+{{#if headerLogoSrc}}
+        logo-src="{{headerLogoSrc}}"
+{{/if}}
         onluminance-icon-clicked={onLuminanceToggle}
         logout={async () => {
           await fetch(LOGOUT_URL);
@@ -67,6 +77,7 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = () => {
         routeNavItems={navItems}
         navigateTo={(path: string) => navigate(path)}
       >
+        <PBCElementsRenderer target={['header', 'nav-start', 'nav-end']} />
       </foundation-header>
       <section className={styles['content']}>
         <PBCElementsRenderer target={['content-start']} />

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

@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 
-import { registerPBCs } from '@/pbc/utils';
+import { registerPBCs } from './pbc/utils';
 import { createLogger } from '@genesislcap/foundation-logger';
 
 import './styles/styles.css'

package/client-tmp/react/src/pages/AuthPage/AuthPage.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect} from 'react';
 import './AuthPage.css';
-import { configureFoundationLogin } from "@/share/foundation-login.ts";
+import { configureFoundationLogin } from '../../share/foundation-login.ts';
 import { useNavigate, useLocation } from 'react-router-dom';
 
 const AuthPage: React.FC = () => {

package/client-tmp/react/src/pages/NotFoundPage/NotFoundPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ErrorMessage from '@/components/ErrorMessage/ErrorMessage';
+import ErrorMessage from '../../components/ErrorMessage/ErrorMessage';
 import './NotFoundPage.css';
 
 const NotFoundPage: React.FC = () => {

package/client-tmp/react/src/pages/NotPermittedPage/NotPermittedPage.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import NotPermittedPage from './NotPermittedPage';
 
-jest.mock('@/components/ErrorMessage/ErrorMessage', () => {
+jest.mock('../../components/ErrorMessage/ErrorMessage', () => {
   return jest.fn((props: { message: string }) => <h1 data-testid="error-message">{props.message}</h1>);
 });
 

package/client-tmp/react/src/pages/NotPermittedPage/NotPermittedPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ErrorMessage from '@/components/ErrorMessage/ErrorMessage';
+import ErrorMessage from '../../components/ErrorMessage/ErrorMessage';
 import './NotPermittedPage.css';
 
 const NotPermittedPage: React.FC = () => {

package/client-tmp/react/src/pbc/container.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { deriveElementTag } from './utils';
-import { useRoutesContext } from '@/store/RoutesContext';
+import { useRoutesContext } from '../store/RoutesContext';
 import { useLocation, RouteObject } from 'react-router-dom';
 
 type ExtendedRouteObject = RouteObject & {

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

@@ -1,4 +1,3 @@
-
 import { CustomEventMap } from '@genesislcap/foundation-events';
 import { getApp } from '@genesislcap/foundation-shell/app';
 import {
@@ -9,28 +8,38 @@ import {
 } from '@genesislcap/foundation-store';
 import { DI } from '@genesislcap/web-core';
 
-interface Store extends StoreRoot {}
-type StoreEventDetailMap = StoreRootEventDetailMap & Record<string, never>;
+interface Store extends StoreRoot {
+  connected: boolean;
+}
+
+type StoreEventDetailMap = StoreRootEventDetailMap & {
+  'connected-changed': { connected: boolean };
+};
 
 declare global {
   interface HTMLElementEventMap extends CustomEventMap<StoreEventDetailMap> {}
 }
 
 class DefaultStore extends AbstractStoreRoot<Store, StoreEventDetailMap> implements Store {
+  connected: boolean = false;
+
   constructor() {
     super();
-
-    /**
-     * Register the store root
-     */
     getApp().registerStoreRoot(this);
   }
+
+  setConnected(connected: boolean) {
+    this.connected = connected;
+    document.dispatchEvent(new CustomEvent('connected-changed', {
+      detail: { connected }
+    }));
+  }
 }
 
 const Store = registerStore(DefaultStore, 'Store');
 
 class StoreService {
-  private store: any;
+  private store: Store;
 
   constructor() {
     this.store = DI.getOrCreateDOMContainer().get(Store) as Store;
@@ -41,7 +50,9 @@ class StoreService {
   }
 
   onConnected(event?: CustomEvent) {
-    this.store.onConnected(event);
+    if (event) {
+      this.store.onConnected(event as any);
+    }
   }
 }
 

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

@@ -1,6 +1,6 @@
 import { configure, defaultAuthConfig } from '@genesislcap/foundation-auth/config';
-import { AUTH_PATH } from '@/config';
-import { environment } from "@/environments/environment.ts";
+import { AUTH_PATH } from '../config';
+import { environment } from '../environments/environment.ts';
 import { Connect } from '@genesislcap/foundation-comms';
 import { DI } from '@genesislcap/web-core';
 import type { NavigateFunction, Location as RouterLocation } from 'react-router-dom';

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

@@ -4,8 +4,9 @@ import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
 import { getApp } from '@genesislcap/foundation-shell/app';
 import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
 import * as rapidDesignSystem from '@genesislcap/rapid-design-system';
-import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
+import { rapidGridComponents, rapidGridPro, rapidGridProStyles } from '@genesislcap/rapid-grid-pro';
 import { FoundationRouter } from '@genesislcap/foundation-ui';
+import { css } from "@genesislcap/web-core";
 
 /**
  * Ensure tree shaking doesn't remove these.
@@ -32,6 +33,16 @@ export async function registerComponents() {
     .provideDesignSystem()
     .register(
       rapidDesignSystem.baseComponents,
+      rapidGridPro({
+        styles: css`
+          ${rapidGridProStyles}
+          .ag-theme-genesis-rapid,
+          .ag-theme-genesis-rapid-dark,
+          .ag-theme-genesis-rapid-light {
+            --ag-selected-row-background-color: var(--accent-fill-rest);
+          }
+        `,
+      }),
       rapidGridComponents,
       g2plotChartsComponents,
       foundationLayoutComponents,

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

@@ -1,14 +1,15 @@
 import React, { createContext, useContext, ReactNode } from 'react';
 import { RouteObject, Navigate } from 'react-router-dom';
 import { getApp } from '@genesislcap/foundation-shell/app';
-import AuthPage from '@/pages/AuthPage/AuthPage';
-import NotFoundPage from '@/pages/NotFoundPage/NotFoundPage';
-import NotPermittedPage from '@/pages/NotPermittedPage/NotPermittedPage';
+import AuthPage from '../pages/AuthPage/AuthPage';
+import NotFoundPage from '../pages/NotFoundPage/NotFoundPage';
+import NotPermittedPage from '../pages/NotPermittedPage/NotPermittedPage';
 {{#each routes}}
-import {{pascalCase this.name}} from '@/pages/{{pascalCase this.name}}/{{pascalCase this.name}}';
+import {{pascalCase this.name}} from '../pages/{{pascalCase this.name}}/{{pascalCase this.name}}';
 {{/each}}
-import PBCContainer from '@/pbc/container';
-import { AUTH_PATH, NOT_PERMITTED_PATH } from '@/config';
+import PBCContainer from '../pbc/container';
+import { AUTH_PATH, NOT_PERMITTED_PATH } from '../config';
+import * as changeCase from 'change-case';
 
 const routes = [
   {
@@ -52,7 +53,7 @@ const RoutesContext = createContext<RouteObject[]>([]);
 
 export const RoutesProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const pbcRoutes = getApp().routes.map((route) => ({
-    title: route.title,
+    title: changeCase.capitalCase(route.path),
     path: `/${route.path}`,
     element: <PBCContainer />,
     data: {

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

@@ -12,7 +12,7 @@
     },
     "fontFamily": {
       "bodyFont": {
-        "$value": "Roboto, \"Segoe UI\", Arial, Helvetica, sans-serif",
+        "$value": "{{#if fontFamily}}{{fontFamily}}, {{/if}}Roboto, \"Segoe UI\", Arial, Helvetica, sans-serif",
         "$type": "fontFamily"
       }
     },
@@ -37,6 +37,10 @@
         "$value": 0,
         "$type": "number"
       },
+      "baseHeightMultiplier": {
+        "$value": 10,
+        "$type": "number"
+      },
       "borderRadius": {
         "$value": 4,
         "$type": "number"

package/client-tmp/react/src/styles/styles.css

@@ -1,11 +1,25 @@
+{{#if fontData}}
+{{#each fontData}}
+@font-face {
+  font-family: "{{../fontFamily}}";
+  src: url("../public/fonts/{{filename}}") format("{{format}}");
+  font-weight: {{weight}};
+  font-style: normal;
+  font-display: swap;
+}
+{{/each}}
+{{/if}}
+
+{{#unless fontFamily}}
 @font-face {
   font-family: Segoe UI;
   font-weight: 300;
   src: local("Segoe UI Semilight"), local("Segoe UI");
 }
+{{/unless}}
 
 * {
-  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; 
+  font-family: {{#if fontFamily}}"{{fontFamily}}", {{/if}}"Segoe UI", "Helvetica Neue", Arial, sans-serif;
   font-style: normal;
   font-weight: normal;
 }

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

@@ -1,4 +1,4 @@
-import { routeLayouts } from '@/config';
+import { routeLayouts } from '../config';
 
 export const getLayoutNameByRoute = (route: string) => {
   return routeLayouts[route] || 'default';

package/client-tmp/react/src/utils/goldenLayout.helper.ts

@@ -0,0 +1,59 @@
+const ERROR_PREFIX = 'Golden layout helper - ';
+
+export const setComponentItemsMap = (
+  layoutNativeElement: any,
+  componentMapInstance: Map<string, any>,
+): (() => void) => {
+  if (!layoutNativeElement || !layoutNativeElement.layout) {
+    throw new Error(`${ERROR_PREFIX} - layout is not defined`);
+  }
+
+  const componentSetter = ({ _target: componentItem }: any) => {
+    componentMapInstance.set(componentItem.componentName, componentItem);
+  };
+
+  layoutNativeElement.layout.on('componentCreated', componentSetter);
+
+  return () => layoutNativeElement.layout.off('componentCreated', componentSetter);
+};
+
+const getElementRoot = (componentInstance: any): any => {
+  if (componentInstance) {
+    const { _element } = componentInstance;
+    return _element;
+  }
+
+  throw new Error(`${ERROR_PREFIX} - component instance is not defined`);
+};
+
+export const getElementsBySelectorFromComponent = (
+  componentInstance: any,
+  selectorValue: string,
+): any => {
+  const element = getElementRoot(componentInstance);
+  return element.querySelectorAll(`[data-selector=${selectorValue}]`);
+};
+
+export const getElementBySelectorFromComponent = (
+  componentInstance: any,
+  selector: string,
+): any => {
+  return getElementsBySelectorFromComponent(componentInstance, selector)[0];
+};
+
+export const getElementsByTagFromComponent = (
+  componentInstance: any,
+  tag: string,
+): any => {
+  const element = getElementRoot(componentInstance);
+  return element.getElementsByTagName(tag);
+};
+
+export const getElementByTagFromComponent = (
+  componentInstance: any,
+  tag: string,
+): any => {
+  return getElementsByTagFromComponent(componentInstance, tag)[0];
+};
+
+

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

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useRoutesContext } from '../store/RoutesContext';
+
+type ExtendedRouteObject = {
+  path?: string;
+  title?: string;
+  data?: {
+    navItems?: Array<{ title?: string }>;
+  };
+};
+
+/**
+ * Hook to update document title based on current route
+ */
+export const useDocumentTitle = () => {
+  const location = useLocation();
+  const routes = useRoutesContext() as unknown as ExtendedRouteObject[];
+
+  useEffect(() => {
+    const currentRoute = routes.find((route) => {
+      const routePath = route.path;
+
+      if (!routePath) return false;
+
+      return location.pathname === routePath || location.pathname.startsWith(routePath + '/');
+    });
+
+    let pageTitle = 'React App';
+
+    if (currentRoute) {
+      if (currentRoute.title) {
+        pageTitle = currentRoute.title;
+      }
+      else if (currentRoute.data?.navItems && currentRoute.data.navItems.length > 0) {
+        pageTitle = currentRoute.data.navItems[0].title || 'React App';
+      }
+    }
+
+    document.title = pageTitle;
+
+    return () => {
+      document.title = 'React App';
+    };
+  }, [location.pathname, routes]);
+};

package/client-tmp/react/test/e2e/fixture.ts

@@ -1,6 +1,6 @@
 import { base, Page } from '@genesislcap/foundation-testing/e2e';
 import { ProtectedPage } from './pages';
-import { PORT } from '@/playwright.config';
+import { PORT } from '../../playwright.config';
 
 export type FixtureConfig = {
   API_HOST: string;

package/client-tmp/web-components/package.json

@@ -91,6 +91,7 @@
   "dependencies": {
     "@genesislcap/foundation-auth": "{{versions.UI}}",
     "@genesislcap/foundation-comms": "{{versions.UI}}",
+    "@genesislcap/foundation-criteria": "{{versions.UI}}",
     "@genesislcap/foundation-entity-management": "{{versions.UI}}",
     "@genesislcap/foundation-events": "{{versions.UI}}",
     {{#if FDC3.includeDependencies}}
@@ -103,6 +104,7 @@
     "@genesislcap/foundation-notifications": "{{versions.UI}}",
     "@genesislcap/foundation-shell": "{{versions.UI}}",
     "@genesislcap/foundation-store": "{{versions.UI}}",
+    "@genesislcap/foundation-redux": "{{versions.UI}}",
     "@genesislcap/foundation-ui": "{{versions.UI}}",
     "@genesislcap/foundation-utils": "{{versions.UI}}",
     "@genesislcap/foundation-user": "{{versions.UI}}",
@@ -122,6 +124,7 @@
     "@analytics/core": "0.12.17",
     "@genesislcap/foundation-auth": "{{versions.UI}}",
     "@genesislcap/foundation-comms": "{{versions.UI}}",
+    "@genesislcap/foundation-criteria": "{{versions.UI}}",
     "@genesislcap/foundation-entity-management": "{{versions.UI}}",
     "@genesislcap/foundation-events": "{{versions.UI}}",
     {{#if FDC3.includeDependencies}}
@@ -134,6 +137,7 @@
     "@genesislcap/foundation-notifications": "{{versions.UI}}",
     "@genesislcap/foundation-shell": "{{versions.UI}}",
     "@genesislcap/foundation-store": "{{versions.UI}}",
+    "@genesislcap/foundation-redux": "{{versions.UI}}",
     "@genesislcap/foundation-ui": "{{versions.UI}}",
     "@genesislcap/foundation-utils": "{{versions.UI}}",
     "@genesislcap/foundation-user": "{{versions.UI}}",

package/client-tmp/web-components/src/components/components.ts

@@ -6,7 +6,8 @@ import { FoundationRouter } from '@genesislcap/foundation-ui';
 import * as zeroDesignSystem from '@genesislcap/foundation-zero';
 import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
 import * as rapidDesignSystem from '@genesislcap/rapid-design-system';
-import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
+import { rapidGridComponents, rapidGridPro, rapidGridProStyles } from '@genesislcap/rapid-grid-pro';
+import { css } from '@genesislcap/web-core';
 import { NotPermittedComponent } from './not-permitted-component';
 
 /**
@@ -31,14 +32,22 @@ export async function registerComponents() {
     designSystem: rapidDesignSystem,
   });
 
-  rapidDesignSystem
-    .provideDesignSystem()
-    .register(
-      rapidDesignSystem.baseComponents,
-      rapidGridComponents,
-      g2plotChartsComponents,
-      foundationLayoutComponents,
-    );
+  rapidDesignSystem.provideDesignSystem().register(
+    rapidDesignSystem.baseComponents,
+    rapidGridPro({
+      styles: css`
+        ${rapidGridProStyles}
+        .ag-theme-genesis-rapid,
+        .ag-theme-genesis-rapid-dark,
+        .ag-theme-genesis-rapid-light {
+          --ag-selected-row-background-color: var(--accent-fill-rest);
+        }
+      `,
+    }),
+    rapidGridComponents,
+    g2plotChartsComponents,
+    foundationLayoutComponents,
+  );
 
   configureHeader({
     templateOptions: {