@genesislcap/blank-app-seed 3.29.1-prerelease.10 → 3.29.1-prerelease.12

package/.genx/package.json

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

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

@@ -1,38 +1,30 @@
-
-{{#if tile.config.permissions.viewRight}}
 import { getUser } from '@genesislcap/foundation-user';
 import { getViewUpdateRightComponent } from '../../../utils';
 import ErrorMessage from '../../../components/ErrorMessage/ErrorMessage';
-{{else}}{{#if tile.config.permissions.updateRight}}
-import { getViewUpdateRightComponent } from '../../../utils';
-import { getUser } from '@genesislcap/foundation-user';
-import ErrorMessage from '../../../components/ErrorMessage/ErrorMessage';
-{{/if}}{{/if}}
 {{#if tile.config.createFormUiSchema}}
-import { createFormSchema } from './{{kebabCase tile.title}}.create.form.schema';
+import { createFormSchema as createFormSchemaTile } from './{{kebabCase tile.title}}.create.form.schema';
 {{/if}}
 {{#if tile.config.uischema}}
-import { createFormSchema } from './{{kebabCase tile.title}}.create.form.schema';
+import { createFormSchema as createFormSchemaTile } from './{{kebabCase tile.title}}.create.form.schema';
 {{/if}}
 {{#if tile.config.updateFormUiSchema}}
-import { updateFormSchema } from './{{kebabCase tile.title}}.update.form.schema';
+import { updateFormSchema as updateFormSchemaTile } from './{{kebabCase tile.title}}.update.form.schema';
 {{/if}}
 {{#if tile.config.columns}}
-import { columnDefs } from './{{kebabCase tile.title}}.column.defs';
+import { columnDefs as columnDefsTile } from './{{kebabCase tile.title}}.column.defs';
 {{/if}}
 {{#if tile.config.gridOptions}}
-import { gridOptions as tileGridOptions } from './{{kebabCase tile.title}}.gridOptions';
+import { gridOptions as gridOptionsTile } from './{{kebabCase tile.title}}.gridOptions';
 {{/if}}
 import './{{kebabCase tile.title}}.component.css';
 
-export const {{pascalCase tile.componentName}} = () => { {{#if tile.config.permissions.viewRight}}
-  const hasUserPermission = (permissionCode) => getViewUpdateRightComponent(getUser(), permissionCode);{{else}}{{#if tile.config.permissions.updateRight}}
-  const hasUserPermission = (permissionCode) => getViewUpdateRightComponent(getUser(), permissionCode);{{/if}}{{/if}}{{#if tile.config.createFormUiSchema}}
-  const createFormSchema = createFormSchema;{{/if}}{{#if tile.config.uischema}}
-  const uischema = createFormSchema;{{/if}}{{#if tile.config.updateFormUiSchema}}
-  const updateFormSchema = updateFormSchema;{{/if}}{{#if tile.config.columns}}
-  const columnDefs = columnDefs;{{/if}}{{#if tile.config.gridOptions}}
-  const gridOptions = tileGridOptions;{{/if}}{{#if tile.config.reqrep}}
+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,

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

@@ -1,5 +1,7 @@
 {{#if config.permissions.viewRight}}hasUserPermission('{{config.permissions.viewRight}}') ? ({{/if}}
 <rapid-grid-pro
+  header-case-type="capitalCase"{{#if config.useOnlyTemplateCols}}
+  only-template-col-defs{{/if}}
   enable-row-flashing
   enable-cell-flashing
   >
@@ -15,6 +17,11 @@
     deferredGridOptions=\{{ onRowClicked: gridOptions?.onRowClicked }}
     {{/if}}
   ></grid-pro-genesis-datasource>
+  {{#if config.gridOptions}}
+  {gridOptions?.columnDefs?.map((columnDef, index) => (
+    <grid-pro-column key={index} definition={columnDef}></grid-pro-column>
+  ))}
+  {{/if}}
 </rapid-grid-pro>{{#if config.permissions.viewRight}} 
 ) : (
 <ErrorMessage elementType="h3" message="You do not have access to view this component." />

package/.genx/versions.json

@@ -1,5 +1,5 @@
 {
-  "UI": "14.201.0",
+  "UI": "14.203.1",
   "GSF": "8.3.0-beta4",
   "Auth": "8.3.0-beta4"
 }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [3.29.1-prerelease.12](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.29.1-prerelease.11...v3.29.1-prerelease.12) (2024-09-03)
+
+
+### Bug Fixes
+
+* update unit test commands in package.json (#329) 290a3ab
+
+## [3.29.1-prerelease.11](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.29.1-prerelease.10...v3.29.1-prerelease.11) (2024-08-28)
+
+
+### Bug Fixes
+
+* automated dependency version update [skip-ci] [PSD-9](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/9) (#323) aea0500
+
 ## [3.29.1-prerelease.10](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.29.1-prerelease.9...v3.29.1-prerelease.10) (2024-08-23)
 
 

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

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  env: { browser: true, es2020: true },
+  env: { browser: true, es2020: true, node: true, jest: true },
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
@@ -10,6 +10,8 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },

package/client-tmp/react/index.html

@@ -4,7 +4,7 @@
     <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>
+    <title>{{capitalCase appName}}</title>
   </head>
   <body>
     <div id="root"></div>

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

@@ -0,0 +1,18 @@
+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/package.json

@@ -5,12 +5,26 @@
   "scripts": {
     "baseline": "npm run clean && npm run bootstrap",
     "bootstrap": "npm i --legacy-peer-deps",
+    "bootstrap:ci": "npm ci --no-fund --no-audit",
+    "build": "vite build",
+    "build:stats": "npm run build --stats-json",
+    "clean": "genx clean dist node_modules",
     "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"
+    "dev:docker": "npm run dev -- --host 0.0.0.0",
+    "dev:no-open": "NO_OPEN=true npm run dev",
+    "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": "npm lint",
+    "lint:stylelint": "node lint-css.js",
+    "test": "genx test",
+    "test:e2e": "genx test --e2e",
+    "test:e2e:debug": "genx test --e2e --debug",
+    "test:e2e:ui": "genx test --e2e --interactive",
+    "test:coverage": "genx test --no-watch --coverage",
+    "test:unit:watch": "genx test --watch"
   },
   "dependencies": {
     "@ag-grid-community/client-side-row-model": "29.2.0",
@@ -37,6 +51,15 @@
     "react-router-dom": "6.24.1"
   },
   "devDependencies": {
+    "@genesislcap/design-system-configurator": "{{versions.UI}}",
+    "@genesislcap/eslint-config": "{{versions.UI}}",
+    "@genesislcap/prettier-config": "{{versions.UI}}",
+    "@genesislcap/foundation-testing": "{{versions.UI}}",
+    "@genesislcap/genx": "{{versions.UI}}",
+    "@genesislcap/build-kit": "{{versions.UI}}",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.0",
     "@types/node": "^20.14.10",
     "@types/react": "npm:types-react@alpha",  
     "@types/react-dom": "npm:types-react-dom@alpha",

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

@@ -0,0 +1,17 @@
+import { configDefaults } from '@genesislcap/foundation-testing/e2e';
+
+export const PROTOCOL = process.env['PROTOCOL'] || 'http';
+export const HOST = process.env['HOST'] || 'localhost';
+export const PORT: number = Number(process.env['PORT']) || 5173;
+
+export default {
+    ...configDefaults,
+    webServer: {
+        ...configDefaults.webServer,
+        url: `${PROTOCOL}://${HOST}:${PORT}`,
+    },
+    use: {
+        ...configDefaults.use,
+        baseURL: `${PROTOCOL}://${HOST}:${PORT}`,
+    }
+};

package/client-tmp/react/src/components/ErrorMessage/ErrorMessage.jsx

@@ -29,7 +29,7 @@ const styles = {
 const ErrorMessage = ({ elementType = 'div', message = '' }) => {
   const ElementType = elementType;
 
-  return (
+  return message && message !== '' && (
     <section style={styles.errorMessageWrapper}>
       <div style={styles.errorMessage}>
         {(() => {

package/client-tmp/react/src/components/ErrorMessage.test.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ErrorMessage from './ErrorMessage';
+
+describe('ErrorMessage Component', () => {
+  const message = 'Test Error Message';
+
+  test('renders the message as a div by default', () => {
+    render(<ErrorMessage message={message} />);
+    const displayedMessage = 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 });
+    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);
+    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');
+    expect(wrapper).toHaveStyle(`
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      width: 100%;
+    `);
+  });
+
+  test('applies the correct styles to the error message itself', () => {
+    render(<ErrorMessage message={message} />);
+    const displayedMessage = screen.getByText(message);
+    const messageWrapper = displayedMessage.parentElement;
+    
+    expect(messageWrapper).toBeInTheDocument();
+    expect(messageWrapper).toHaveStyle(`
+      color: var(--neutral-foreground-rest);
+      background-color: var(--neutral-layer-4);
+      border-color: var(--error-color);
+      border-radius: 7px;
+      border-style: solid;
+      border-width: 4px;
+      padding: 5px;
+      margin: 15px;
+      text-align: center;
+      width: fit-content;
+      align-self: center;
+      height: auto;
+      max-height: 100%;
+    `);
+  });
+
+  test('renders nothing if the message is an empty string', () => {
+    const { container } = 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);
+      expect(displayedMessage).toBeInTheDocument();
+      expect(displayedMessage.tagName).toBe(elementType.toUpperCase());
+    });
+  });
+});

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

@@ -1,7 +1,7 @@
 declare namespace JSX {
   interface IntrinsicElements {
     // Wildcard for all webcomponents:
-    [elemName: string]: any;
+    [elemName: string]: unknown;
   }
 }
 

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

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

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

@@ -1,7 +1,7 @@
 {{#if FDC3.includeDependencies}}
 import { DefaultFDC3 } from '@genesislcap/foundation-fdc3';
 {{/if}}
-export const isFDC3 = (): boolean => !!(window as any).fdc3;
+export const isFDC3 = (): boolean => !!((window as unknown as { fdc3?: boolean }).fdc3);
 {{#if FDC3.includeDependencies}}
 
 export const onFDC3Ready = async (FDC3ReadyCb: () => any): Promise<void> => {

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

@@ -0,0 +1,26 @@
+import { base, Page } from '@genesislcap/foundation-testing/e2e';
+import { ProtectedPage } from './pages';
+import { PORT } from '../../playwright.config';
+
+export type FixtureConfig = {
+  API_HOST: string;
+  DEFAULT_USER: string;
+  DEFAULT_PASSWORD: string;
+  PORT: number;
+};
+
+export type Fixture = {
+  config: FixtureConfig;
+  protectedPage: ProtectedPage;
+};
+
+const API_HOST = process.env['API_HOST'] || 'localhost';
+
+export const test = base.extend<Fixture>({
+  config: [{ PORT, API_HOST, DEFAULT_PASSWORD: '', DEFAULT_USER: '' }, { option: true }],
+  protectedPage: async ({ config, page }: { config: FixtureConfig, page: Page }, use: (page: ProtectedPage) => Promise<unknown>) => {
+    const protectedPage = new ProtectedPage(config, page);
+    await protectedPage.goto();
+    await use(protectedPage);
+  },
+});

package/client-tmp/react/test/e2e/flows/001-protected.e2e.ts

@@ -0,0 +1,6 @@
+import { expect } from '@genesislcap/foundation-testing/e2e';
+import { test } from '../fixture';
+
+test('expected page title', async ({ page }: { page: any }) => {
+  await expect(page).toHaveTitle(/{{capitalCase appName}}/);
+});

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

@@ -0,0 +1,2 @@
+export * from './fixture';
+export * from './pages';

package/client-tmp/react/test/e2e/pages/index.ts

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

package/client-tmp/react/test/e2e/pages/protected.ts

@@ -0,0 +1,16 @@
+import type { Page } from '@genesislcap/foundation-testing/e2e';
+import type { FixtureConfig } from '../fixture';
+
+export class ProtectedPage {
+  config: FixtureConfig;
+  page: Page;
+
+  constructor(config: FixtureConfig, page: Page) {
+    this.config = config;
+    this.page = page;
+  }
+
+  async goto() {
+    await this.page.goto('/');
+  }
+}

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

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

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

@@ -0,0 +1,47 @@
+import { fileURLToPath } from 'node:url';
+import { resolve } from 'path';
+import path from 'node:path';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import visualizer from 'rollup-plugin-visualizer';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig(({ mode }) => {
+  const https =  process.env.HTTPS === 'true';
+  const open = !(process.env.NO_OPEN === 'true');
+
+  const config = {
+    server: {
+      https,
+      open,
+    },
+    plugins: [
+      react(),
+    ],
+    build: {
+      rollupOptions: {
+        plugins: []
+      }
+    },
+    resolve: {
+      alias: {
+        'foundationZero/ZeroDesignSystem': resolve(__dirname, 'node_modules/@genesislcap/foundation-zero'),
+      },
+    },
+  };
+
+  if (mode === 'stats') {
+    config.build.rollupOptions.plugins.push(
+      visualizer({
+        template: 'raw-data',
+        filename: 'stats.json',
+        open: true,
+        gzipSize: true,
+        brotliSize: true,
+      })
+    );
+  }
+
+  return config;
+});

package/package.json

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

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

@@ -1,14 +0,0 @@
-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'),
-    },
-  },
-});