@genesislcap/blank-app-seed 3.16.0 → 3.17.0

package/.genx/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@genesislcap/blank-app-seed-config",
   "description": "Genesis Blank App Seed Configuration",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "license": "Apache-2.0",
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"**/*.js\""
+  },
   "genxSeedConfig": {
     "exclude": [
       ".git",
@@ -47,5 +52,13 @@
         ]
       }
     }
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.3.0",
+    "eslint": "^9.3.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "globals": "^15.3.0",
+    "prettier": "^3.2.5"
   }
 }

package/.genx/prompts/api.js

@@ -1,48 +1,40 @@
-const {websocketValidator} = require('./validators');
+const { websocketValidator } = require('./validators');
+const { TEXTS } = require('../static');
 
-const apiHostIntro = () => console.log(`
-  You can override the default Genesis server URL used during local developent.
-`);
-
-const ssoIntro = () => console.log(`
-  Optionally, you can enable the SSO function, which will redirect to identity provider before starting the application (given we only have one identity provider).
-`);
+const apiHostIntro = () => console.log(TEXTS.INTRO_API_HOST);
+const ssoIntro = () => console.log(TEXTS.INTRO_API_SSO);
 
 module.exports = async (inquirer, prevAns = {}) => {
   apiHostIntro();
-  const {
-    apiHost = prevAns.apiHost,
-  } = await inquirer.prompt([
+  const { apiHost = prevAns.apiHost } = await inquirer.prompt([
     {
       name: 'setApiHost',
       type: 'confirm',
-      message: 'Set API Host',
+      message: TEXTS.MESSAGE_API_SET_HOST,
       when: !prevAns.apiHost,
       default: true,
     },
     {
       name: 'apiHost',
       type: 'input',
-      message: 'API Host (with WebSocket prefix and suffix if any)',
-      when: ({setApiHost}) => setApiHost,
+      message: TEXTS.MESSAGE_API_HOST,
+      when: ({ setApiHost }) => setApiHost,
       default: prevAns.apiHost || 'ws://localhost/gwf/',
       validate: websocketValidator,
     },
-  ])
+  ]);
   ssoIntro();
-  const {
-    enableSSO = prevAns.enableSSO
-  } = await inquirer.prompt([
+  const { enableSSO = prevAns.enableSSO } = await inquirer.prompt([
     {
       name: 'enableSSO',
       type: 'confirm',
-      message: 'Init SSO connection before loading application',
+      message: TEXTS.MESSAGE_API_SSO,
       default: prevAns.enableSSO || false,
       when: prevAns.enableSSO === undefined,
     },
   ]);
   return {
     apiHost,
-    enableSSO
+    enableSSO,
   };
 };

package/.genx/prompts/server.js

@@ -1,59 +1,60 @@
-const {mavenArtifactVersionRegex} = require('./validators');
-const {parseJSONArgument} = require('../utils');
+const { mavenArtifactVersionRegex } = require('./validators');
+const { parseJSONArgument } = require('../utils');
+const { TEXTS } = require('../static');
 
 const parsecsv = parseJSONArgument('csv', []);
 
 module.exports = async (inquirer, prevAns = {}) => {
-    const {
-      description = prevAns.description,
-      groupId = prevAns.groupId,
-      applicationVersion = prevAns.applicationVersion,
-      enableDeployPlugin = prevAns.enableDeployPlugin,
-      csv = prevAns.csv,
-    } = await inquirer.prompt([
-      {
-        name: 'description',
-        type: 'input',
-        message: 'Project Description',
-        when: !prevAns.description,
-        default:'\n'
-      },
-      {
-        name: 'groupId',
-        type: 'input',
-        message: 'Group Id',
-        when: !prevAns.groupId,
-        default:'global.genesis'
-      },
-      {
-        name: 'applicationVersion',
-        type: 'input',
-        message: 'Application Version',
-        when: !prevAns.applicationVersion,
-        default:'1.0.0-SNAPSHOT',
-        validate: mavenArtifactVersionRegex
-      },
-      {
-        name: 'enableDeployPlugin',
-        type: 'confirm',
-        message: 'Enable deploy plugin?',
-        when: prevAns.enableDeployPlugin === undefined,
-        default: prevAns.enableDeployPlugin || false
-      },
-      {
-        name: 'csv',
-        type: 'input',
-        message: 'Generate empty CSV for entities? (config in JSON format)',
-        when: !prevAns.csv,
-        default: '[]'
-      },
-    ]);
+  const {
+    description = prevAns.description,
+    groupId = prevAns.groupId,
+    applicationVersion = prevAns.applicationVersion,
+    enableDeployPlugin = prevAns.enableDeployPlugin,
+    csv = prevAns.csv,
+  } = await inquirer.prompt([
+    {
+      name: 'description',
+      type: 'input',
+      message: TEXTS.MESSAGE_SERVER_DESCRIPTION,
+      when: !prevAns.description,
+      default: '\n',
+    },
+    {
+      name: 'groupId',
+      type: 'input',
+      message: TEXTS.MESSAGE_SERVER_GROUP_ID,
+      when: !prevAns.groupId,
+      default: 'global.genesis',
+    },
+    {
+      name: 'applicationVersion',
+      type: 'input',
+      message: TEXTS.MESSAGE_SERVER_APPLICATION_VERSION,
+      when: !prevAns.applicationVersion,
+      default: '1.0.0-SNAPSHOT',
+      validate: mavenArtifactVersionRegex,
+    },
+    {
+      name: 'enableDeployPlugin',
+      type: 'confirm',
+      message: TEXTS.MESSAGE_SERVER_DEPLOY_PLUGIN,
+      when: prevAns.enableDeployPlugin === undefined,
+      default: prevAns.enableDeployPlugin || false,
+    },
+    {
+      name: 'csv',
+      type: 'input',
+      message: TEXTS.MESSAGE_SERVER_CSV,
+      when: !prevAns.csv,
+      default: '[]',
+    },
+  ]);
 
-    return {
-      description,
-      groupId,
-      applicationVersion,
-      enableDeployPlugin,
-      csv: parsecsv(csv)
-    };
-  };
+  return {
+    description,
+    groupId,
+    applicationVersion,
+    enableDeployPlugin,
+    csv: parsecsv(csv),
+  };
+};

package/.genx/prompts/ui.js

@@ -1,38 +1,65 @@
-const {parseJSONArgument} = require('../utils');
+const { frameworkValidator } = require('./validators');
+const { parseJSONArgument, normalizeFrameworkAlias } = require('../utils');
+const {
+  FRAMEWORK_WEB_COMPONENTS_ALIAS,
+  FRAMEWORKS_ALIAS,
+  FRAMEWORKS_LABEL_MAP,
+  TEXTS,
+} = require('../static');
 
 const defaultRoutes = [{ name: 'home' }];
 const parseRoutes = parseJSONArgument('routes', defaultRoutes);
-const routesIntro = () => console.log(`
-  Pages to be added to the navigation header
-`);
 
 const defaultUI = {};
 const parseUI = parseJSONArgument('ui', defaultUI);
 
+const selectedFrameworkInfo = (framework) => {
+  if (framework && frameworkValidator(framework) === true) {
+    console.log(
+      `${TEXTS.MESSAGE_UI_FRAMEWORK}: ${FRAMEWORKS_LABEL_MAP.get(normalizeFrameworkAlias(framework))}`,
+    );
+  }
+};
+
 module.exports = async (inquirer, prevAns = {}) => {
-  routesIntro();
+  selectedFrameworkInfo(prevAns.framework);
+
   const {
-    routes = prevAns.routes,
+    framework = prevAns.framework,
     ui = prevAns.ui,
+    routes = prevAns.routes,
   } = await inquirer.prompt([
     {
-      name: 'routes',
-      type: 'input',
-      message: 'Pages config in JSON format',
-      when: !prevAns.routes,
-      default: JSON.stringify(defaultRoutes),
+      name: 'framework',
+      type: 'list',
+      choices: FRAMEWORKS_ALIAS.map((value) => ({
+        name: FRAMEWORKS_LABEL_MAP.get(value),
+        value,
+      })),
+      message: TEXTS.MESSAGE_UI_FRAMEWORK,
+      when: prevAns.framework === undefined,
+      validate: frameworkValidator,
+      default: FRAMEWORK_WEB_COMPONENTS_ALIAS,
     },
     {
       name: 'ui',
       type: 'input',
-      message: 'UI configuration in JSON format',
+      message: TEXTS.MESSAGE_UI_CONFIG,
       when: !prevAns.ui,
       default: JSON.stringify(defaultUI),
     },
-  ])
+    {
+      name: 'routes',
+      type: 'input',
+      message: TEXTS.MESSAGE_UI_ROTUES,
+      when: !prevAns.routes,
+      default: JSON.stringify(defaultRoutes),
+    },
+  ]);
 
   return {
     routes: parseRoutes(routes),
     ui: parseUI(ui),
+    framework: normalizeFrameworkAlias(framework),
   };
 };

package/.genx/prompts/validators.js

@@ -1,10 +1,20 @@
-const websocketRegex = /wss?:\/\/[-a-zA-Z0-9@:%._\+~#=]{1,256}\b([-a-zA-Z0-9()@:%_\+.~#?&\/=]*)\b\/*$/;
-const mavenArtifactVersionRegex = /([\d+{1,3}\.A-Z]+)/;
+const { TEXTS } = require('../static');
 
-const websocketValidator = value => websocketRegex.test(value) || 'Not a valid websocket';
-const mavenArtifactVersionValidator = value => mavenArtifactVersionRegex.test(value) || 'Not a valid version'
+const { validateFrameworkAlias } = require('../utils');
+
+const websocketRegex =
+  /wss?:\/\/[-a-zA-Z0-9@:%._+~#=]{1,256}\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)\b\/*$/;
+const mavenArtifactVersionRegex = /([\d+{1,3}.A-Z]+)/;
+
+const frameworkValidator = (value) =>
+  validateFrameworkAlias(value) || TEXTS.ERROR_VALIDATOR_FRAMEWORK;
+const websocketValidator = (value) =>
+  websocketRegex.test(value) || TEXTS.ERROR_VALIDATOR_WEBSOCKET;
+const mavenArtifactVersionValidator = (value) =>
+  mavenArtifactVersionRegex.test(value) || TEXTS.ERROR_VALIDATOR_VERSION;
 
 module.exports = {
+  frameworkValidator,
   websocketValidator,
-  mavenArtifactVersionValidator
-}
+  mavenArtifactVersionValidator,
+};

package/.genx/prompts.js

@@ -1,7 +1,12 @@
 const apiPrompts = require('./prompts/api');
 const genesisServerPrompts = require('./prompts/server');
 const uiPrompts = require('./prompts/ui');
-const {description: packageDescription, license, name, version} = require('./package.json');
+const {
+  description: packageDescription,
+  license,
+  name,
+  version,
+} = require('./package.json');
 
 module.exports = async (inquirer, prevAns = {}) => {
   console.log(`
@@ -11,9 +16,10 @@ module.exports = async (inquirer, prevAns = {}) => {
   Version: ${version}
   License: ${license}`);
 
-  const {apiHost, enableSSO} = await apiPrompts(inquirer, prevAns)
-  const {description, groupId, applicationVersion, enableDeployPlugin, csv} = await genesisServerPrompts(inquirer, prevAns);
-  const {routes, ui} = await uiPrompts(inquirer, prevAns);
+  const { apiHost, enableSSO } = await apiPrompts(inquirer, prevAns);
+  const { description, groupId, applicationVersion, enableDeployPlugin, csv } =
+    await genesisServerPrompts(inquirer, prevAns);
+  const { routes, ui, framework } = await uiPrompts(inquirer, prevAns);
 
   return {
     apiHost,
@@ -25,5 +31,6 @@ module.exports = async (inquirer, prevAns = {}) => {
     enableDeployPlugin,
     csv,
     ui,
+    framework,
   };
 };

package/.genx/scripts/update-versions.js

@@ -1,9 +1,10 @@
 const { execSync } = require('node:child_process');
 const { writeFileSync } = require('node:fs');
-const { resolve }  = require('node:path');
+const { resolve } = require('node:path');
 const current = require('../versions.json');
 
-const run = (command) => execSync(command, {
+const run = (command) =>
+  execSync(command, {
     stdio: ['pipe', 'pipe', 'ignore'],
   })
     .toString('utf8')
@@ -20,8 +21,12 @@ const writeJSON = (json, path) => {
 };
 
 const UI = run('npm info @genesislcap/foundation-ui@latest version');
-const GSF = run(`jf rt s "libs-release-client/global/genesis/genesis-distribution/" --exclusions="*-RC*;*-SNAPSHOT*;*maven-metadata*;*test*;*TEST*" | grep path | tr -s ' ' | sed 's/"path": //g' | awk -F'/' '{print $(NF-1)}' | sort -V | tail -n 1`);
-const Auth = run(`jf rt s "libs-release-client/global/genesis/auth-distribution/" --exclusions="*-RC*;*-SNAPSHOT*;*maven-metadata*;*test*;*TEST*" | grep path | tr -s ' ' | sed 's/"path": //g' | awk -F'/' '{print $(NF-1)}' | sort -V | tail -n 1`);
+const GSF = run(
+  `jf rt s "libs-release-client/global/genesis/genesis-distribution/" --exclusions="*-RC*;*-SNAPSHOT*;*maven-metadata*;*test*;*TEST*" | grep path | tr -s ' ' | sed 's/"path": //g' | awk -F'/' '{print $(NF-1)}' | sort -V | tail -n 1`,
+);
+const Auth = run(
+  `jf rt s "libs-release-client/global/genesis/auth-distribution/" --exclusions="*-RC*;*-SNAPSHOT*;*maven-metadata*;*test*;*TEST*" | grep path | tr -s ' ' | sed 's/"path": //g' | awk -F'/' '{print $(NF-1)}' | sort -V | tail -n 1`,
+);
 const latest = { UI, GSF, Auth };
 
 console.log('Current:', current);

package/.genx/static.js

@@ -0,0 +1,96 @@
+const FRAMEWORK_WEB_COMPONENTS_ALIAS = 'webcomponents';
+const FRAMEWORK_ANGULAR_ALIAS = 'angular';
+const FRAMEWORK_REACT_ALIAS = 'react';
+
+const FRAMEWORKS_ALIAS = [
+  FRAMEWORK_WEB_COMPONENTS_ALIAS,
+  FRAMEWORK_ANGULAR_ALIAS,
+  FRAMEWORK_REACT_ALIAS,
+];
+
+const FRAMEWORKS_LABEL_MAP = new Map([
+  [FRAMEWORK_WEB_COMPONENTS_ALIAS, 'Web Components'],
+  [FRAMEWORK_ANGULAR_ALIAS, 'Angular'],
+  [FRAMEWORK_REACT_ALIAS, 'React'],
+]);
+
+const FRAMEWORKS_DIR_MAP = new Map([
+  [FRAMEWORK_WEB_COMPONENTS_ALIAS, 'web-components'],
+  [FRAMEWORK_ANGULAR_ALIAS, 'angular'],
+  [FRAMEWORK_REACT_ALIAS, 'react'],
+]);
+
+const DEFAULT_FRAMEWORK_ALIAS = FRAMEWORK_WEB_COMPONENTS_ALIAS;
+
+const DIR_CLIENT_MAIN_ALIAS = 'client';
+const DIR_CLIENT_TEMP_ALIAS = 'client-tmp';
+const DIR_TEMPLATE_ROOT_ALIAS = 'templates';
+const DIR_TEMPLATE_ANGULAR_ALIAS = 'angular';
+const DIR_TEMPLATE_WEB_COMPONENT_ALIAS = 'web-components';
+const DIR_TEMPLATE_REACT_ALIAS = 'react';
+
+const DIRS_MAP = new Map([
+  [DIR_CLIENT_MAIN_ALIAS, DIR_CLIENT_MAIN_ALIAS],
+  [DIR_CLIENT_TEMP_ALIAS, DIR_CLIENT_TEMP_ALIAS],
+  [DIR_TEMPLATE_ROOT_ALIAS, DIR_TEMPLATE_ROOT_ALIAS],
+  [
+    DIR_TEMPLATE_ANGULAR_ALIAS,
+    `${DIR_TEMPLATE_ROOT_ALIAS}/${DIR_TEMPLATE_ANGULAR_ALIAS}`,
+  ],
+  [
+    DIR_TEMPLATE_WEB_COMPONENT_ALIAS,
+    `${DIR_TEMPLATE_ROOT_ALIAS}/${DIR_TEMPLATE_WEB_COMPONENT_ALIAS}`,
+  ],
+  [
+    DIR_TEMPLATE_REACT_ALIAS,
+    `${DIR_TEMPLATE_ROOT_ALIAS}/${DIR_TEMPLATE_REACT_ALIAS}`,
+  ],
+]);
+
+const DIR_TEMPLATE_BY_FRAMEWORK = {
+  [FRAMEWORK_WEB_COMPONENTS_ALIAS]: DIRS_MAP.get(
+    DIR_TEMPLATE_WEB_COMPONENT_ALIAS,
+  ),
+  [FRAMEWORK_ANGULAR_ALIAS]: DIRS_MAP.get(DIR_TEMPLATE_ANGULAR_ALIAS),
+};
+
+const TEXTS = {
+  INTRO_API_HOST:
+    'You can override the default Genesis server URL used during local developent.',
+  INTRO_API_SSO:
+    'Optionally, you can enable the SSO function, which will redirect to identity provider before starting the application (given we only have one identity provider).',
+  MESSAGE_API_SET_HOST: 'Set API Host',
+  MESSAGE_API_HOST: 'API Host (with WebSocket prefix and suffix if any)',
+  MESSAGE_API_SSO: 'Init SSO connection before loading application',
+  MESSAGE_SERVER_DESCRIPTION: 'Project Description',
+  MESSAGE_SERVER_GROUP_ID: 'Group Id',
+  MESSAGE_SERVER_APPLICATION_VERSION: 'Application Version',
+  MESSAGE_SERVER_DEPLOY_PLUGIN: 'Enable deploy plugin?',
+  MESSAGE_SERVER_CSV:
+    'Generate empty CSV for entities? (config in JSON format)',
+  MESSAGE_UI_ROTUES: 'Pages config in JSON format',
+  MESSAGE_UI_CONFIG: 'UI configuration in JSON format',
+  MESSAGE_UI_FRAMEWORK: 'Framework',
+  ERROR_VALIDATOR_FRAMEWORK: 'Selected framework is not supported',
+  ERROR_VALIDATOR_WEBSOCKET: 'Not a valid websocket',
+  ERROR_VALIDATOR_VERSION: 'Not a valid version',
+};
+
+module.exports = {
+  FRAMEWORK_WEB_COMPONENTS_ALIAS,
+  FRAMEWORK_ANGULAR_ALIAS,
+  FRAMEWORK_REACT_ALIAS,
+  FRAMEWORKS_ALIAS,
+  FRAMEWORKS_LABEL_MAP,
+  FRAMEWORKS_DIR_MAP,
+  DEFAULT_FRAMEWORK_ALIAS,
+  DIR_CLIENT_MAIN_ALIAS,
+  DIR_CLIENT_TEMP_ALIAS,
+  DIR_TEMPLATE_ROOT_ALIAS,
+  DIR_TEMPLATE_ANGULAR_ALIAS,
+  DIR_TEMPLATE_WEB_COMPONENT_ALIAS,
+  DIR_TEMPLATE_REACT_ALIAS,
+  DIR_TEMPLATE_BY_FRAMEWORK,
+  DIRS_MAP,
+  TEXTS,
+};

package/.genx/templates/angular/route.hbs

@@ -0,0 +1,14 @@
+import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+@Component({
+  selector: 'app-{{pascalCase route.name}}',
+  standalone: true,
+  imports: [
+    CommonModule,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: './{{kebabCase route.name}}.component.html',
+  styleUrls: ['./{{kebabCase route.name}}.component.css'],
+})
+export class {{pascalCase route.name}}Component {}

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

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

package/.genx/templates/angular/route.template.hbs

@@ -0,0 +1,8 @@
+  {{#if route.tiles}}
+  <zero-layout auto-save-key="{{route.layoutKey}}">
+     {{> (lookup ./route 'layoutType') }}
+  </zero-layout>
+  {{else}}
+  <!-- insert template code here -->
+  Welcome to {{sentenceCase route.name}}
+  {{/if}}

package/.genx/utils/excludeFrameworks.js

@@ -0,0 +1,29 @@
+const { rmSync, renameSync } = require('node:fs');
+const path = require('path');
+const {
+  FRAMEWORKS_DIR_MAP,
+  DIR_CLIENT_MAIN_ALIAS,
+  DIR_CLIENT_TEMP_ALIAS,
+  DIRS_MAP,
+} = require('../static');
+
+const dirClientTemp = path.join(
+  __dirname,
+  `../../${DIRS_MAP.get(DIR_CLIENT_TEMP_ALIAS)}`,
+);
+
+const getDirClientTemp = (frameworkName) => {
+  return `${dirClientTemp}/${FRAMEWORKS_DIR_MAP.get(frameworkName)}`;
+};
+
+const excludeFrameworks = (selectedFramework) => {
+  const mainClientDirPath = path.join(
+    __dirname,
+    `../../${DIRS_MAP.get(DIR_CLIENT_MAIN_ALIAS)}`,
+  );
+  renameSync(getDirClientTemp(selectedFramework), mainClientDirPath);
+
+  rmSync(dirClientTemp, { recursive: true, force: true });
+};
+
+module.exports = excludeFrameworks;

package/.genx/utils/formatJSONValue.js

@@ -0,0 +1,9 @@
+const formatJSONValue = (value) => {
+  try {
+    return value ? JSON.stringify(value, null, 2) : undefined;
+  } catch (e) {
+    console.warn('Could not serialise value to JSON', value, e);
+  }
+};
+
+module.exports = formatJSONValue;

package/.genx/utils/formatRouteData.js

@@ -0,0 +1,36 @@
+const gridOptionsSerializer = require('./gridOptionsSerializer');
+const formatJSONValue = require('./formatJSONValue');
+const gridColumnsSerializer = require('./gridColumnsSerializer');
+const getLayoutType = require('./getLayoutType');
+
+const formatRouteData = (route) => {
+  const layoutKey = route?.layoutKey || `${route.name}_${Date.now()}`;
+  const layoutType = route?.layoutType || getLayoutType(route);
+
+  const FDC3ClickCategory = 'fdc3';
+  const FDC3EventHandlersEnabled = !!route.tiles?.find(
+    (t) => t.config?.gridOptions?.onRowClicked?.category === FDC3ClickCategory,
+  );
+
+  const tiles = route.tiles?.map((tile) => ({
+    ...tile,
+    config: {
+      ...(tile.config || {}),
+      gridOptions: gridOptionsSerializer(tile.config?.gridOptions),
+      createFormUiSchema: formatJSONValue(tile.config?.createFormUiSchema),
+      updateFormUiSchema: formatJSONValue(tile.config?.updateFormUiSchema),
+      uischema: formatJSONValue(tile.config?.uischema),
+      columns: gridColumnsSerializer(tile.config?.columns),
+    },
+  }));
+
+  return {
+    ...route,
+    layoutType,
+    layoutKey,
+    tiles,
+    FDC3EventHandlersEnabled,
+  };
+};
+
+module.exports = formatRouteData;

package/.genx/utils/generateCsv.js

@@ -0,0 +1,13 @@
+const { resolve } = require('node:path');
+
+const generateCsv = (entity, { writeFileWithData }) => {
+  writeFileWithData(
+    resolve(
+      __dirname,
+      `../../server/{{appName}}-app/src/main/genesis/data/${entity.name}.csv`,
+    ),
+    { entity },
+    resolve(__dirname, '../templates/csv.hbs'),
+  );
+};
+module.exports = generateCsv;

package/.genx/utils/generateRoute.js

@@ -0,0 +1,64 @@
+const { resolve } = require('node:path');
+const makeDirectory = require('./makeDirectory');
+const {
+  FRAMEWORK_WEB_COMPONENTS_ALIAS,
+  FRAMEWORK_ANGULAR_ALIAS,
+  DIR_TEMPLATE_BY_FRAMEWORK,
+} = require('../static');
+
+const getPathByFramework = {
+  [FRAMEWORK_WEB_COMPONENTS_ALIAS]: {
+    clientSrcPath: `../../client/src/routes`,
+    route: (clientSrcPath, routeName) => `${clientSrcPath}/${routeName}`,
+    component: (routeDir, routeName) => `${routeDir}/${routeName}.ts`,
+    template: (routeDir, routeName) => `${routeDir}/${routeName}.template.ts`,
+    style: (routePath, routeName) => `${routePath}/${routeName}.styles.ts`,
+  },
+  [FRAMEWORK_ANGULAR_ALIAS]: {
+    clientSrcPath: `../../client/src/app/pages`,
+    route: (clientSrcPath, routeName) => `${clientSrcPath}/${routeName}`,
+    component: (routeDir, routeName) => `${routeDir}/${routeName}.component.ts`,
+    template: (routeDir, routeName) =>
+      `${routeDir}/${routeName}.component.html`,
+    style: (routePath, routeName) => `${routePath}/${routeName}.component.css`,
+  },
+};
+
+const generateRoute = (route, { changeCase, writeFileWithData }, framework) => {
+  const routeName = changeCase.paramCase(route.name);
+  const sourceTemplateDir = `../${DIR_TEMPLATE_BY_FRAMEWORK[framework]}`;
+  const {
+    clientSrcPath,
+    route: getRouteDir,
+    component: getComponentTarget,
+    template: getTemplateTarget,
+    style: getStyleTarget,
+  } = getPathByFramework[framework];
+  const routeDir = getRouteDir(clientSrcPath, routeName);
+
+  const filesToWrite = [
+    {
+      source: `${sourceTemplateDir}/route.hbs`,
+      target: getComponentTarget(routeDir, routeName),
+    },
+    {
+      source: `${sourceTemplateDir}/route.template.hbs`,
+      target: getTemplateTarget(routeDir, routeName),
+    },
+    {
+      source: `${sourceTemplateDir}/route.styles.hbs`,
+      target: getStyleTarget(routeDir, routeName),
+    },
+  ];
+
+  makeDirectory(resolve(__dirname, routeDir));
+  filesToWrite.forEach(({ source, target }) => {
+    writeFileWithData(
+      resolve(__dirname, target),
+      { route },
+      resolve(__dirname, source),
+    );
+  });
+};
+
+module.exports = generateRoute;