@genesislcap/blank-app-seed 3.30.0-prerelease.7 → 3.30.0-prerelease.9

package/.genx/package.json

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

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

@@ -1,4 +1,6 @@
-{{#if config.permissions.viewRight}}hasUserPermission('{{config.permissions.viewRight}}') ? ({{/if}}
+{{#if config.permissions.viewRight~}}
+hasUserPermission('{{config.permissions.viewRight}}') ? (
+{{/if}}
 <rapid-g2plot-chart
   type="{{ config.type }}"
   config={chartConfig}
@@ -7,7 +9,9 @@
     resourceName="{{ config.resourceName }}"
     server-fields="{{ config.xField }} {{ config.yField }}"
   ></chart-datasource>
-</rapid-g2plot-chart>{{#if config.permissions.viewRight}} 
+</rapid-g2plot-chart>
+{{#if config.permissions.viewRight~}} 
 ) : (
 <ErrorMessage elementType="h3" message="You do not have access to view this component." />
-){{/if}}
+)
+{{/if}}

package/.genx/templates/react/component/component.column.defs.hbs

@@ -1,9 +1,11 @@
+{{#if tile.config.columns~}}
 import { ColDef } from '@ag-grid-community/core';
+{{/if}}
 import { getNumberFormatter, getDateFormatter } from '@genesislcap/foundation-utils';
-{{#if route.FDC3EventHandlersEnabled}}
+{{#if route.FDC3EventHandlersEnabled~}}
 import { sendEventOnChannel } from '../../../utils';
 {{/if}}
 
-{{#if tile.config.columns}}
+{{#if tile.config.columns~}}
 export const columnDefs: ColDef[] = {{{ tile.config.columns }}}
 {{/if}}

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

@@ -1,8 +1,8 @@
 import { UiSchema } from '@genesislcap/foundation-forms';
 
-{{#if tile.config.createFormUiSchema}}
+{{#if tile.config.createFormUiSchema~}}
 export const createFormSchema: UiSchema = {{{ tile.config.createFormUiSchema }}}
 {{/if}}
-{{#if tile.config.uischema}}
+{{#if tile.config.uischema~}}
 export const createFormSchema: UiSchema = {{{ tile.config.uischema }}}
 {{/if}}

package/.genx/templates/react/component/component.gridOptions.hbs

@@ -1,9 +1,11 @@
+{{#if tile.config.gridOptions~}}
 import { GridOptionsConfig } from '@genesislcap/rapid-grid-pro';
+{{/if}}
 import { getNumberFormatter, getDateFormatter } from '@genesislcap/foundation-utils';
-{{#if route.FDC3EventHandlersEnabled}}
+{{#if route.FDC3EventHandlersEnabled~}}
 import { sendEventOnChannel } from '../../../utils';
 {{/if}}
 
-{{#if tile.config.gridOptions}}
+{{#if tile.config.gridOptions~}}
 export const gridOptions: GridOptionsConfig = {{{ tile.config.gridOptions }}}
 {{/if}}

package/.genx/templates/react/component/component.hbs

@@ -1,40 +1,77 @@
+{{#if tile.config.permissions.viewRight~}}
 import { getUser } from '@genesislcap/foundation-user';
 import { getViewUpdateRightComponent } from '../../../utils';
 import ErrorMessage from '../../../components/ErrorMessage/ErrorMessage';
-{{#if tile.config.createFormUiSchema}}
+{{else if tile.config.permissions.updateRight~}}
+import { getUser } from '@genesislcap/foundation-user';
+import { getViewUpdateRightComponent } from '../../../utils';
+import ErrorMessage from '../../../components/ErrorMessage/ErrorMessage';
+{{/if}}
+{{#if tile.config.createFormUiSchema~}}
 import { createFormSchema as createFormSchemaTile } from './{{pascalCase tile.title}}CreateFormSchema';
 {{/if}}
-{{#if tile.config.uischema}}
+{{#if tile.config.uischema~}}
 import { createFormSchema as createFormSchemaTile } from './{{pascalCase tile.title}}CreateFormSchema';
 {{/if}}
-{{#if tile.config.updateFormUiSchema}}
+{{#if tile.config.updateFormUiSchema~}}
 import { updateFormSchema as updateFormSchemaTile } from './{{pascalCase tile.title}}UpdateFormSchema';
 {{/if}}
-{{#if tile.config.columns}}
+{{#if tile.config.columns~}}
 import { columnDefs as columnDefsTile } from './{{pascalCase tile.title}}ColumnDefs';
 {{/if}}
-{{#if tile.config.gridOptions}}
+{{#if tile.config.gridOptions~}}
+import { GridOptionsConfig } from '@genesislcap/rapid-grid-pro';
 import { gridOptions as gridOptionsTile } from './{{pascalCase tile.title}}GridOptions';
 {{/if}}
 import './{{pascalCase tile.title}}Component.css';
 
-export const {{pascalCase tile.componentName}} = () => {
-  const hasUserPermission = (permissionCode) => getViewUpdateRightComponent(getUser(), permissionCode);{{#if tile.config.createFormUiSchema}}
-  const createFormSchema = createFormSchemaTile;{{/if}}{{#if tile.config.uischema}}
-  const uischema = createFormSchemaTile;{{/if}}{{#if tile.config.updateFormUiSchema}}
-  const updateFormSchema = updateFormSchemaTile;{{/if}}{{#if tile.config.columns}}
-  const columnDefs = columnDefsTile;{{/if}}{{#if tile.config.gridOptions}}
-  const gridOptions = gridOptionsTile;{{/if}}{{#if tile.config.reqrep}}
-  const reqrep = { pollingInterval: 5000 };{{/if}}{{#if tile.config.type}}
-  const chartConfig = { {{#ifEquals tile.config.type 'pie'}}
-      "radius": 0.75,
-      "angleField": "value",
-      "colorField": "groupBy",{{else}}
-      "xField": "groupBy",
-      "yField": "value",{{/ifEquals}}
-  };{{/if}}
+export const {{pascalCase tile.componentName}}: React.FC = () => {
+  {{#if tile.config.permissions.viewRight~}}
+  const hasUserPermission = (permissionCode: string): boolean => getViewUpdateRightComponent(getUser(), permissionCode);
+  {{else if tile.config.permissions.updateRight~}}
+  const hasUserPermission = (permissionCode: string): boolean => getViewUpdateRightComponent(getUser(), permissionCode);
+  {{/if}}
+  {{#if tile.config.createFormUiSchema~}}
+  const createFormSchema: typeof createFormSchemaTile = createFormSchemaTile;
+  {{/if}}
+  {{#if tile.config.uischema~}}
+  const uischema: typeof createFormSchemaTile = createFormSchemaTile;
+  {{/if}}
+  {{#if tile.config.updateFormUiSchema~}}
+  const updateFormSchema: typeof updateFormSchemaTile = updateFormSchemaTile;
+  {{/if}}
+  {{#if tile.config.columns~}}
+  const columnDefs: typeof columnDefsTile = columnDefsTile;
+  {{/if}}
+  {{#if tile.config.gridOptions~}}
+  const deferredGridOptions: { onRowClicked: GridOptionsConfig.onRowClicked } = { onRowClicked: gridOptionsTile?.onRowClicked  }
+  {{/if}}
+  {{#if tile.config.reqrep~}}
+  const reqrep: { pollingInterval: number } = { pollingInterval: 5000 };
+  {{/if}}
+  {{#if tile.config.type~}}
+  const chartConfig: {
+    {{#ifEquals tile.config.type 'pie'~}}
+    radius: number;
+    angleField: string;
+    colorField: string;
+    {{else~}}
+    xField: string;
+    yField: string;
+    {{/ifEquals}}
+  } = {
+    {{#ifEquals tile.config.type 'pie'~}}
+    radius: 0.75,
+    angleField: 'value',
+    colorField: 'groupBy',
+    {{else~}}
+    xField: 'groupBy',
+    yField: 'value',
+    {{/ifEquals}}
+  };
+  {{/if}}
 
   return (
     {{> (lookup tile 'type') tile}}
   );
-};
+};

package/.genx/templates/react/component/component.index.hbs

@@ -1 +1 @@
-export * from './{{pascalCase tile.title}}Component.jsx';
+export * from './{{pascalCase tile.title}}Component.tsx';

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

@@ -1,5 +1,5 @@
 import { UiSchema } from '@genesislcap/foundation-forms';
 
-{{#if tile.config.updateFormUiSchema}}
+{{#if tile.config.updateFormUiSchema~}}
 export const updateFormSchema: UiSchema = {{{ tile.config.updateFormUiSchema }}}
 {{/if}}

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

@@ -1,52 +1,65 @@
-{{#if config.permissions.viewRight}}hasUserPermission('{{config.permissions.viewRight}}') ? ({{/if}}
+{{#if config.permissions.viewRight~}}
+hasUserPermission('{{config.permissions.viewRight}}') ? (
+{{/if}}
 <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={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.createEvent }}' : undefined}
-    {{#if config.createFormUiSchema}}
-    createFormUiSchema={createFormSchema}
-    {{/if}}
-    {{/if}}
-    {{#if config.updateEvent}}
-    updateEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.updateEvent }}' : undefined}
-    {{#if config.updateFormUiSchema}}
-    updateFormUiSchema={updateFormSchema}
-    {{/if}}
-    {{/if}}
-    {{#if config.deleteEvent}}
-    deleteEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.deleteEvent }}' : undefined}
-    {{/if}}
-    {{#if config.gridOptions}}
-    gridOptions={gridOptions}
-    {{/if}}
-    {{#if config.snapshot}}
-    datasourceConfig={ isSnapshot: {{ config.snapshot }} }
-    {{/if}}
-    {{#if config.reqrep}}
-    datasourceConfig={reqrep}
-    {{/if}}
-    {{#if config.entityName}}
-    entityLabel="{{ config.entityName }}"
-    {{/if}}
-    {{#if config.columns}}
-    columns={columnDefs}
-    {{/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>{{#if config.permissions.viewRight}} 
+  design-system-prefix="rapid"
+  enable-row-flashing
+  enable-cell-flashing
+  {{#if config.title~}}
+  title="{{ config.title }}"
+  {{/if}}
+  resourceName="{{ config.resourceName }}"
+  {{#if config.createEvent~}}
+  {{#if config.permissions.updateRight~}}
+  createEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.createEvent }}' : undefined}
+  {{else~}}
+  createEvent="{{ config.updateEvent }}"
+  {{/if}}
+  {{#if config.createFormUiSchema~}}
+  createFormUiSchema={createFormSchema}
+  {{/if}}
+  {{/if}}
+  {{#if config.updateEvent~}}
+  {{#if config.permissions.updateRight~}}
+  updateEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.updateEvent }}' : undefined}
+  {{else~}}
+  updateEvent="{{ config.updateEvent }}"
+  {{/if}}
+  {{#if config.updateFormUiSchema~}}
+  updateFormUiSchema={updateFormSchema}
+  {{/if}}
+  {{/if}}
+  {{#if config.deleteEvent~}}
+  {{#if config.permissions.updateRight~}}
+  deleteEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.deleteEvent }}' : undefined}
+  {{else~}}
+  deleteEvent="{{ config.deleteEvent }}"
+  {{/if}}
+  {{/if}}
+  {{#if config.gridOptions~}}
+  gridOptions={gridOptions}
+  {{/if}}
+  {{#if config.snapshot~}}
+  datasourceConfig={ isSnapshot: {{ config.snapshot }} }
+  {{/if}}
+  {{#if config.reqrep~}}
+  datasourceConfig={reqrep}
+  {{/if}}
+  {{#if config.columns~}}
+  columns={columnDefs}
+  {{/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>
+{{#if config.permissions.viewRight~}}
 ) : (
 <ErrorMessage elementType="h3" message="You do not have access to view this component." />
-){{/if}}
+)
+{{/if}}

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

@@ -1,4 +1,6 @@
-{{#if config.permissions.updateRight}}hasUserPermission('{{config.permissions.updateRight}}') ? ({{/if}}
+{{#if config.permissions.updateRight~}}
+hasUserPermission('{{config.permissions.updateRight}}') ? (
+{{/if}}
 <foundation-form
   design-system-prefix="rapid"
   resourceName="{{config.resourceName}}"
@@ -6,7 +8,9 @@
   uischema={uischema}
   {{/if}}
 >
-</foundation-form>{{#if config.permissions.updateRight}} 
+</foundation-form>
+{{#if config.permissions.updateRight~}} 
 ) : (
 <ErrorMessage elementType="h3" message="You do not have access to view this component." />
-){{/if}}
+)
+{{/if}}

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

@@ -1,28 +1,34 @@
-{{#if config.permissions.viewRight}}hasUserPermission('{{config.permissions.viewRight}}') ? ({{/if}}
+{{#if config.permissions.viewRight~}}
+hasUserPermission('{{config.permissions.viewRight}}') ? (
+{{/if}}
 <rapid-grid-pro
-  header-case-type="capitalCase"{{#if config.useOnlyTemplateCols}}
-  only-template-col-defs{{/if}}
+  header-case-type="capitalCase"
+  {{#if config.useOnlyTemplateCols~}}
+  only-template-col-defs
+  {{/if}}
   enable-row-flashing
   enable-cell-flashing
   >
   <grid-pro-genesis-datasource
     resource-name="{{config.resourceName}}"
-    {{#if config.snapshot}}
+    {{#if config.snapshot~}}
     isSnapshot="{{config.snapshot}}"
     {{/if}}
-    {{#if config.reqrep}}
+    {{#if config.reqrep~}}
     datasourceConfig="reqrep"
     {{/if}}
-    {{#if config.gridOptions}}
-    deferredGridOptions=\{{ onRowClicked: gridOptions?.onRowClicked }}
+    {{#if config.gridOptions~}}
+    deferredGridOptions={deferredGridOptions}
     {{/if}}
   ></grid-pro-genesis-datasource>
   {{#if config.gridOptions}}
-  {gridOptions?.columnDefs?.map((columnDef, index) => (
+  {gridOptionsTile?.columnDefs?.map((columnDef, index) => (
     <grid-pro-column key={index} definition={columnDef}></grid-pro-column>
   ))}
   {{/if}}
-</rapid-grid-pro>{{#if config.permissions.viewRight}} 
+</rapid-grid-pro>
+{{#if config.permissions.viewRight~}} 
 ) : (
 <ErrorMessage elementType="h3" message="You do not have access to view this component." />
-){{/if}}
+)
+{{/if}}

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

@@ -4,7 +4,6 @@ import { {{pascalCase this.componentName}} } from './{{pascalCase this.title}}{{
 {{/each}}
 
 const {{pascalCase route.name}} = () => {
-
   return (
     <section className="{{kebabCase route.name}}-page">
       {{#if route.tiles}}

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

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

package/.genx/utils/generateRoute.js

@@ -29,7 +29,7 @@ const getPathByFramework = {
     route: (clientSrcPath, routeName, changeCase) =>
       `${clientSrcPath}/${changeCase.pascalCase(routeName)}`,
     component: (routeDir, routeName, changeCase) =>
-      `${routeDir}/${changeCase.pascalCase(routeName)}.jsx`,
+      `${routeDir}/${changeCase.pascalCase(routeName)}.tsx`,
     style: (routeDir, routeName, changeCase) =>
       `${routeDir}/${changeCase.pascalCase(routeName)}.css`,
   },

package/.genx/utils/generateTile.js

@@ -44,12 +44,12 @@ const getPathByFramework = {
   },
   [FRAMEWORK_REACT_ALIAS]: {
     ...defaultPathGetters,
-    index: (componentPath) => `${componentPath}/index.jsx`,
+    index: (componentPath) => `${componentPath}/index.tsx`,
     clientSrcPath: `../../client/src/pages`,
     route: (clientSrcPath, tile, routeName, changeCase) =>
       `${clientSrcPath}/${changeCase.pascalCase(routeName)}/${changeCase.pascalCase(tile.name)}${changeCase.pascalCase(tile.componentType)}`,
     component: (componentPath, tile, changeCase) =>
-      `${componentPath}/${changeCase.pascalCase(tile.name)}Component.jsx`,
+      `${componentPath}/${changeCase.pascalCase(tile.name)}Component.tsx`,
     style: (componentPath, tile, changeCase) =>
       `${componentPath}/${changeCase.pascalCase(tile.name)}Component.css`,
     addForm: (componentPath, tile, changeCase) =>

package/.genx/versions.json

@@ -1,5 +1,5 @@
 {
   "UI": "14.207.0",
   "GSF": "8.4.0-beta1",
-  "Auth": "8.3.0"
+  "Auth": "8.4.0-beta1"
 }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [3.30.0-prerelease.9](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.30.0-prerelease.8...v3.30.0-prerelease.9) (2024-09-12)
+
+
+### Features
+
+* integrate TypeScript support into react - [FUI-2157](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/2157) (#338) ac55e1f
+
+## [3.30.0-prerelease.8](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.30.0-prerelease.7...v3.30.0-prerelease.8) (2024-09-11)
+
+
+### Bug Fixes
+
+* updating server version information for Auth [PSD-0](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/0) 09ba9a2
+
 ## [3.30.0-prerelease.7](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.30.0-prerelease.6...v3.30.0-prerelease.7) (2024-09-11)
 
 

package/client-tmp/react/.babelrc

@@ -1,7 +1,8 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
   "plugins": [
     "react-require"

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

@@ -10,6 +10,7 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-unused-vars': 'off',
     '@typescript-eslint/no-var-requires': 'off',
     'react-refresh/only-export-components': [

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

@@ -0,0 +1,15 @@
+import type { Config } from '@jest/types';
+
+const config: Config.InitialOptions = {
+  testEnvironment: 'jsdom',
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.app.json' }],
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  testMatch: ["**/?(*.)+(test).[jt]s?(x)"],
+  watchPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/dist/"],
+};
+
+export default config;

package/client-tmp/react/lint-css.ts

@@ -0,0 +1,19 @@
+import { execSync } from 'child_process';
+import glob from 'glob';
+import path from 'path';
+
+const cssFiles: string[] = glob.sync(path.join(__dirname, '**/*.css'));
+
+if (cssFiles.length === 0) {
+  console.log('No CSS files found.');
+  process.exit(0);
+}
+
+const command: string = `genx lint -l stylelint ${cssFiles.join(' ')}`;
+
+try {
+  execSync(command, { stdio: 'inherit' });
+} catch (error) {
+  console.error('Error running stylelint:', error);
+  process.exit(1);
+}

package/client-tmp/react/package.json

@@ -15,10 +15,10 @@
     "dev:intellij": "npm run dev",
     "dev:https": "HTTPS=true npm run dev",
     "dsconfig": "dsconfig --path src/styles/design-tokens.json",
-    "lint": "eslint src/**/*.js src/**/*.jsx",
-    "lint:fix": "eslint src/**/*.js src/**/*.jsx --fix",
+    "lint": "eslint src/**/*.ts src/**/*.tsx",
+    "lint:fix": "eslint src/**/*.ts src/**/*.tsx --fix",
     "lint:eslint": "npm lint",
-    "lint:stylelint": "node lint-css.js",
+    "lint:stylelint": "npx ts-node lint-css.ts",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:unit:watch": "jest --watchAll",
@@ -48,7 +48,8 @@
     "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"
+    "react-router-dom": "6.24.1",
+    "web-vitals": "^2.1.4"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -63,6 +64,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
+    "@types/jest": "^29.5.12",
     "@types/node": "^20.14.10",
     "@types/react": "npm:types-react@alpha",  
     "@types/react-dom": "npm:types-react-dom@alpha",
@@ -75,6 +77,8 @@
     "eslint-plugin-react-refresh": "^0.4.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
     "vite": "^5.3.1"
   },  

package/client-tmp/react/src/components/ErrorMessage/{ErrorMessage.test.js → ErrorMessage.test.tsx}

@@ -1,35 +1,33 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import ErrorMessage from './ErrorMessage';
+import { default as ErrorMessage, ErrorMessageProps } from './ErrorMessage';
 
 describe('ErrorMessage Component', () => {
-  const message = 'Test Error Message';
+  const message: string = 'Test Error Message';
 
   test('renders the message as a div by default', () => {
     render(<ErrorMessage message={message} />);
-    const displayedMessage = screen.getByText(message);
+    const displayedMessage: HTMLElement = screen.getByText(message);
     expect(displayedMessage.tagName).toBe('DIV');
     expect(displayedMessage).toBeInTheDocument();
   });
 
   test('renders the message as an h1 element when elementType is "h1"', () => {
     render(<ErrorMessage message={message} elementType="h1" />);
-    const displayedMessage = screen.getByRole('heading', { level: 1 });
+    const displayedMessage: HTMLElement = screen.getByRole('heading', { level: 1 });
     expect(displayedMessage.tagName).toBe('H1');
     expect(displayedMessage).toBeInTheDocument();
   });
 
   test('renders the message as a p element when elementType is "p"', () => {
     render(<ErrorMessage message={message} elementType="p" />);
-    const displayedMessage = screen.getByText(message);
+    const displayedMessage: HTMLElement = screen.getByText(message);
     expect(displayedMessage.tagName).toBe('P');
     expect(displayedMessage).toBeInTheDocument();
   });
 
   test('applies the correct styles to the error message wrapper', () => {
     render(<ErrorMessage message={message} />);
-    const wrapper = screen.getByText(message).closest('section');
+    const wrapper: HTMLElement | null = screen.getByText(message).closest('section');
     expect(wrapper).toHaveStyle(`
       display: flex;
       flex-direction: column;
@@ -42,8 +40,8 @@ describe('ErrorMessage Component', () => {
 
   test('applies the correct styles to the error message itself', () => {
     render(<ErrorMessage message={message} />);
-    const displayedMessage = screen.getByText(message);
-    const messageWrapper = displayedMessage.parentElement;
+    const displayedMessage: HTMLElement = screen.getByText(message);
+    const messageWrapper: HTMLElement | null = displayedMessage.parentElement;
     
     expect(messageWrapper).toBeInTheDocument();
     expect(messageWrapper).toHaveStyle(`
@@ -64,34 +62,34 @@ describe('ErrorMessage Component', () => {
   });
 
   test('renders nothing if the message is an empty string', () => {
-    const { container } = render(<ErrorMessage message="" />);
+    const { container }: { container: HTMLElement } = render(<ErrorMessage message="" />);
     expect(container.firstChild).toBeNull();
   });
 
   test('renders the correct element type for various elementType props', () => {
-    const elementTypes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div'];
-    elementTypes.forEach((elementType) => {
-      const { container } = render(<ErrorMessage message={message} elementType={elementType} />);
-      const displayedMessage = container.querySelector(elementType);
+    const elementTypes: ErrorMessageProps['elementType'][] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div'];
+    elementTypes.forEach((elementType: ErrorMessageProps['elementType']) => {
+      const { container }: { container: HTMLElement } = render(<ErrorMessage message={message} elementType={elementType} />);
+      const displayedMessage: HTMLElement | null = container.querySelector(elementType as string);
       expect(displayedMessage).toBeInTheDocument();
-      expect(displayedMessage.tagName).toBe(elementType.toUpperCase());
+      expect(displayedMessage?.tagName).toBe((elementType as string).toUpperCase());
     });
   });
 
   test('renders the message as a div element when elementType is unknown', () => {
-    render(<ErrorMessage message={message} elementType="unknown" />);
-    const displayedMessage = screen.getByText(message);
+    render(<ErrorMessage message={message} />);
+    const displayedMessage: HTMLElement = screen.getByText(message);
     expect(displayedMessage.tagName).toBe('DIV');
     expect(displayedMessage).toBeInTheDocument();
   });
 
   test('renders nothing if the message is null', () => {
-    const { container } = render(<ErrorMessage message={null} />);
+    const { container }: { container: HTMLElement } = render(<ErrorMessage />);
     expect(container.firstChild).toBeNull();
   });
 
   test('renders nothing if the message is undefined', () => {
-    const { container } = render(<ErrorMessage message={undefined} />);
+    const { container }: { container: HTMLElement } = render(<ErrorMessage message={undefined} />);
     expect(container.firstChild).toBeNull();
   });
 });

package/client-tmp/react/src/components/ErrorMessage/{ErrorMessage.jsx → ErrorMessage.tsx}

@@ -3,7 +3,7 @@ import React from 'react';
 const styles = {
   errorMessageWrapper: {
     display: 'flex',
-    flexDirection: 'column',
+    flexDirection: 'column' as const,
     justifyContent: 'center',
     alignItems: 'center',
     height: '100%',
@@ -14,11 +14,11 @@ const styles = {
     backgroundColor: 'var(--neutral-layer-4)',
     borderColor: 'var(--error-color)',
     borderRadius: '7px',
-    borderStyle: 'solid',
+    borderStyle: 'solid' as const,
     borderWidth: '4px',
     padding: '5px',
     margin: '15px',
-    textAlign: 'center',
+    textAlign: 'center' as const,
     width: 'fit-content',
     alignSelf: 'center',
     height: 'auto',
@@ -26,7 +26,12 @@ const styles = {
   },
 };
 
-const ErrorMessage = ({ elementType = 'div', message = '' }) => {
+export interface ErrorMessageProps {
+  elementType?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+  message?: string;
+}
+
+const ErrorMessage: React.FC<ErrorMessageProps> = ({ elementType = 'div', message = '' }) => {
   const ElementType = elementType;
 
   return message && message !== '' && (

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

@@ -1,11 +1,21 @@
-declare namespace JSX {
-  interface IntrinsicElements {
-    // Wildcard for all webcomponents:
-    [elemName: string]: unknown;
-  }
-}
+import React, { useState, DOMAttributes }  from 'react';
 
-declare module '*.module.css' {
-  const classes: { [key: string]: string };
-  export default classes;
+type CustomElement<T = HTMLElement> = Partial<T & DOMAttributes<T> & { children: any }>;
+
+declare module "react/jsx-runtime" {
+  namespace JSX {
+    interface IntrinsicElements {
+      'entity-management': CustomElement;
+      'foundation-form': CustomElement;
+      'rapid-grid-pro': CustomElement;
+      'grid-pro-genesis-datasource': CustomElement;
+      'grid-pro-column': CustomElement;
+      'rapid-g2plot-chart': CustomElement;
+      'chart-datasource': CustomElement;
+      'client-app-login': CustomElement;
+      'rapid-layout': CustomElement;
+      'rapid-layout-region': CustomElement;
+      'rapid-layout-item': CustomElement;
+    }
+  }
 }

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

@@ -16,7 +16,7 @@ const AuthGuard: React.FC<AuthGuardProps> = ({ children }: AuthGuardProps) => {
     };
 
     verifyAuth();
-  }, []);
+  }, [checkAuthStatus]);
 
   if (isLoading) {
     return <div>Loading...</div>; // Or some loading component

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './styles/styles.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+  const root = ReactDOM.createRoot(rootElement);
+  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/pages/AuthPage/{AuthPage.test.js → AuthPage.test.tsx}

@@ -3,8 +3,8 @@ import AuthPage from './AuthPage';
 
 test('renders AuthPage component', () => {
   const { container } = render(<AuthPage />);
-  const authPageElement = container.querySelector('.auth-page');
+  const authPageElement: Element | null = container.querySelector('.auth-page');
   expect(authPageElement).toBeInTheDocument();
-  const clientAppLoginElement = container.querySelector('client-app-login');
+  const clientAppLoginElement: Element | null = container.querySelector('client-app-login');
   expect(clientAppLoginElement).toBeInTheDocument();
 });

package/client-tmp/react/src/pages/AuthPage/{AuthPage.jsx → AuthPage.tsx}

@@ -1,6 +1,7 @@
+import React from 'react';
 import './AuthPage.css';
 
-const AuthPage = () => {
+const AuthPage: React.FC = () => {
   return (
     <section className="auth-page">
       <client-app-login></client-app-login>
@@ -8,4 +9,4 @@ const AuthPage = () => {
   );
 };
 
-export default AuthPage;
+export default AuthPage;

package/client-tmp/react/src/pages/NotPermittedPage/{NotPermittedPage.test.js → NotPermittedPage.test.tsx}

@@ -1,16 +1,15 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import NotPermittedPage from './NotPermittedPage';
 
 jest.mock('../../components/ErrorMessage/ErrorMessage', () => {
-  return jest.fn((props) => <h1 data-testid="error-message">{props.message}</h1>);
+  return jest.fn((props: { message: string }) => <h1 data-testid="error-message">{props.message}</h1>);
 });
 
 describe('NotPermittedPage Component', () => {
   test('renders the ErrorMessage component with correct props', () => {
     render(<NotPermittedPage />);
     
-    const errorMessage = screen.getByTestId('error-message');
+    const errorMessage: HTMLElement = screen.getByTestId('error-message');
     expect(errorMessage).toBeInTheDocument();
     expect(errorMessage.tagName).toBe('H1');
     expect(errorMessage).toHaveTextContent('You do not have permission to access this part of the application, please contact your administrator.');

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import ErrorMessage from '../../components/ErrorMessage/ErrorMessage';
+import './NotPermittedPage.css';
+
+const NotPermittedPage: React.FC = () => {
+  return (
+    <ErrorMessage
+      elementType="h1"
+      message="You do not have permission to access this part of the application, please contact your administrator."
+    />
+  );
+};
+
+export default NotPermittedPage;

package/client-tmp/react/src/{reportWebVitals.js → reportWebVitals.ts}

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

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

@@ -7,8 +7,6 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
@@ -16,13 +14,12 @@
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
-
-    /* Linting */
     "strict": true,
+    "esModuleInterop": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "types": ["node", "react"]
   },
-  "include": ["src"]
+  "include": ["src" , "src/**/*.d.ts"],
 }

package/client-tmp/react/tsconfig.json

@@ -7,5 +7,8 @@
     {
       "path": "./tsconfig.node.json"
     }
-  ]
+  ],
+  "compilerOptions": {
+    "esModuleInterop": true,
+  }
 }

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

@@ -9,5 +9,5 @@
     "strict": true,
     "noEmit": true
   },
-  "include": ["vite.config.js"]
+  "include": ["vite.config.ts"]
 }

package/client-tmp/react/{vite.config.js → vite.config.ts}

@@ -1,28 +1,28 @@
 import { fileURLToPath } from 'node:url';
 import { resolve, dirname } from 'path';
-import { defineConfig } from 'vite';
+import { defineConfig, UserConfig } from 'vite';
 import fs from 'fs';
 import react from '@vitejs/plugin-react';
 import visualizer from 'rollup-plugin-visualizer';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-export default defineConfig(({ mode }) => {
-  const https =  process.env.HTTPS === 'true';
-  const open = !(process.env.NO_OPEN === 'true');
-  const jsonFilePath = resolve(process.cwd(), `env.${mode}.json`);
-  const envConfig = {};
+export default defineConfig(({ mode }: { mode: string }): UserConfig => {
+  const https: boolean = process.env.HTTPS === 'true';
+  const open: boolean = !(process.env.NO_OPEN === 'true');
+  const jsonFilePath: string = resolve(process.cwd(), `env.${mode}.json`);
+  const envConfig: Record<string, string> = {};
   
   if (fs.existsSync(jsonFilePath)) {
-    const jsonContent = fs.readFileSync(jsonFilePath, 'utf-8');
-    const parsedConfig = JSON.parse(jsonContent);
+    const jsonContent: string = fs.readFileSync(jsonFilePath, 'utf-8');
+    const parsedConfig: Record<string, any> = JSON.parse(jsonContent);
   
     for (const key in parsedConfig) {
       envConfig[`import.meta.env.${key}`] = JSON.stringify(parsedConfig[key]);
     }
   }
 
-  const config = {
+  const config: UserConfig = {
     define: envConfig,
     server: {
       https,

package/package.json

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

package/client-tmp/react/jest.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-  testEnvironment: 'jsdom',
-  moduleFileExtensions: ['js', 'jsx'],
-  transform: {
-    '^.+\\.jsx?$': 'babel-jest',
-  },
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-  testMatch: ["**/?(*.)+(test).[jt]s?(x)"],
-  watchPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/dist/"],
-};

package/client-tmp/react/lint-css.js

@@ -1,18 +0,0 @@
-const { execSync } = require('child_process');
-const glob = require('glob');
-const path = require('path');
-const cssFiles = glob.sync(path.join(__dirname, '**/*.css'));
-
-if (cssFiles.length === 0) {
-  console.log('No CSS files found.');
-  process.exit(0);
-}
-
-const command = `genx lint -l stylelint ${cssFiles.join(' ')}`;
-
-try {
-  execSync(command, { stdio: 'inherit' });
-} catch (error) {
-  console.error('Error running stylelint:', error);
-  process.exit(1);
-}

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

@@ -1,17 +0,0 @@
-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/pages/NotPermittedPage/NotPermittedPage.jsx

@@ -1,13 +0,0 @@
-import ErrorMessage from '../../components/ErrorMessage/ErrorMessage';
-import './NotPermittedPage.css';
-
-const NotPermittedPage = () => {
-  return (
-    <ErrorMessage
-    elementType="h1"
-    message="You do not have permission to access this part of the application, please contact your administrator."
-    ></ErrorMessage>
-  );
-};
-
-export default NotPermittedPage;