updated ngx-material-tracking and ngx-material-navigation

Author: tim-fabian

eslint.config.mjs

@@ -1,10 +1,10 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import { configs } from 'eslint-config-service-soft';
 
 // eslint-disable-next-line jsdoc/require-description
 /** @type {import('eslint').Linter.Config} */
-export default [
-    ...configs,
-    {
-        ignores: ['src/__testing__/tmp/*', 'src/__testing__/coverage/*', 'sandbox']
-    }
-];
+export default [...configs, {
+    ignores: ['src/__testing__/tmp/*', 'src/__testing__/coverage/*', 'sandbox']
+}, ...storybook.configs["flat/recommended"], ...storybook.configs["flat/recommended"]];

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "monux-cli",
-    "version": "2.5.2",
+    "version": "2.5.3",
     "license": "MIT",
     "main": "index.js",
     "engines": {

package.json

@@ -7,7 +7,7 @@ import { NpmPackage, NpmUtilities } from '../npm';
 import { ArrayStartIdentifier, TsImportDefinition, TsUtilities } from '../ts';
 import { AngularJson, AngularJsonAssetPattern } from './angular-json.model';
 import { NgPackageJson } from './ng-package-json.model';
-import { ANGULAR_APP_COMPONENT_FILE_NAME, ANGULAR_JSON_FILE_NAME, ANGULAR_ROUTES_FILE_NAME, APP_CONFIG_FILE_NAME, ENVIRONMENT_MODEL_TS_FILE_NAME, ROBOTS_FILE_NAME, SITEMAP_FILE_NAME } from '../constants';
+import { ANGULAR_APP_COMPONENT_FILE_NAME, ANGULAR_JSON_FILE_NAME, ANGULAR_ROUTES_FILE_NAME, ANGULAR_SERVER_ROUTES_FILE_NAME, APP_CONFIG_FILE_NAME, APP_CONFIG_SERVER_FILE_NAME, ENVIRONMENT_MODEL_TS_FILE_NAME, ROBOTS_FILE_NAME, SITEMAP_FILE_NAME } from '../constants';
 import { DefaultEnvKeys, EnvUtilities } from '../env';
 import { DeepPartial } from '../types';
 import { AddNavElementConfig } from './add-nav-element-config.model';
@@ -462,6 +462,19 @@ export abstract class AngularUtilities {
      * @param root - The root of the angular project to setup material for.
      */
     static async setupMaterial(root: string): Promise<void> {
+        await AngularUtilities.setupBaseStyles(root);
+        await FsUtilities.updateFile(
+            getPath(root, 'src', 'styles.css'),
+            '@import "@angular/material/prebuilt-themes/indigo-pink.css";',
+            'prepend'
+        );
+    }
+
+    /**
+     * Sets up the base styles.
+     * @param root - The root of the project.
+     */
+    static async setupBaseStyles(root: string): Promise<void> {
         await FsUtilities.updateFile(
             getPath(root, 'src', 'styles.css'),
             [
@@ -479,11 +492,6 @@ export abstract class AngularUtilities {
             ],
             'append'
         );
-        await FsUtilities.updateFile(
-            getPath(root, 'src', 'styles.css'),
-            '@import "@angular/material/prebuilt-themes/indigo-pink.css";',
-            'prepend'
-        );
     }
 
     /**
@@ -623,12 +631,29 @@ export abstract class AngularUtilities {
     /**
      * Adds tracking to the angular project with the given name.
      * @param projectName - The name of the angular project to add tracking to.
+     * @param root - The root dir of the project.
      */
-    static async setupTracking(projectName: string): Promise<void> {
+    static async setupTracking(projectName: string, root: Path): Promise<void> {
         // eslint-disable-next-line no-console
         console.log('Adds tracking');
         await NpmUtilities.install(projectName, [NpmPackage.NGX_MATERIAL_TRACKING]);
         // TODO: Angular Tracking
+        await this.addProvider(
+            root,
+            {
+                provide: 'NGX_TRACKING_SNACKBAR_COMPONENT',
+                useValue: 'SnackbarComponent'
+            },
+            [{ defaultImport: false, element: 'SnackbarComponent', path: NpmPackage.NGX_MATERIAL_TRACKING }]
+        );
+        await this.addProvider(
+            root,
+            {
+                provide: 'NGX_GDPR_TRACKINGS',
+                useValue: []
+            },
+            [{ defaultImport: false, element: 'NGX_GDPR_TRACKINGS', path: NpmPackage.NGX_MATERIAL_TRACKING }]
+        );
     }
 
     /**
@@ -683,11 +708,12 @@ export abstract class AngularUtilities {
             getPath(root, 'src', 'app', 'app.html'),
             [
                 // eslint-disable-next-line stylistic/max-len
-                '<ngx-mat-navigation-navbar [minHeight]="80" [minSidenavWidth]="\'30%\'" [minHeightOtherElements]="70" [navbarRows]="navbarRows">',
+                '<ngx-mat-navigation-navbar [minHeight]="80" [minSidenavWidth]="\'40%\'" [minHeightOtherElements]="150" [navbarRows]="navbarRows">',
+                '\t<ngx-mat-navigation-breadcrumbs></ngx-mat-navigation-breadcrumbs>',
                 '\t<router-outlet></router-outlet>',
                 '</ngx-mat-navigation-navbar>',
                 '',
-                '<ngx-mat-navigation-footer [minHeight]="70" [footerRows]="footerRows"></ngx-mat-navigation-footer>'
+                '<ngx-mat-navigation-footer [minHeight]="150" [footerRows]="footerRows"></ngx-mat-navigation-footer>'
             ],
             'append'
         );
@@ -704,6 +730,11 @@ export abstract class AngularUtilities {
                     element: 'NgxMatNavigationFooterComponent',
                     path: NpmPackage.NGX_MATERIAL_NAVIGATION,
                     defaultImport: false
+                },
+                {
+                    element: 'NgxMatNavigationBreadcrumbsComponent',
+                    path: NpmPackage.NGX_MATERIAL_NAVIGATION,
+                    defaultImport: false
                 }
             ]
         );
@@ -742,6 +773,15 @@ export abstract class AngularUtilities {
         await FsUtilities.updateFile(appComponentTs, tsLines, 'replace');
 
         const routesTs: Path = getPath(root, 'src', 'app', ANGULAR_ROUTES_FILE_NAME);
+        await FsUtilities.rename(
+            getPath(root, 'src', 'app', 'app.routes.server.ts'),
+            getPath(root, 'src', 'app', ANGULAR_SERVER_ROUTES_FILE_NAME)
+        );
+        await FsUtilities.replaceAllInFile(
+            getPath(root, 'src', 'app', APP_CONFIG_SERVER_FILE_NAME),
+            'import { serverRoutes } from \'./app.routes.server\';',
+            'import { serverRoutes } from \'./server.routes\';'
+        );
         await FsUtilities.rename(
             getPath(root, 'src', 'app', 'app.routes.ts'),
             routesTs

src/angular/angular.utilities.ts

@@ -109,11 +109,11 @@ export class AddAngularWebsiteCommand extends BaseAddCommand<AddAngularWebsiteCo
             getPath(root, ANGULAR_JSON_FILE_NAME),
             { $schema: '../../node_modules/@angular/cli/lib/config/schema.json' }
         );
-        await AngularUtilities.setupMaterial(root);
+        await AngularUtilities.setupBaseStyles(root);
         await EnvUtilities.setupProjectEnvironment(root, false);
         await this.createDefaultPages(root, config.titleSuffix, domain);
         if (config.addTracking) {
-            await AngularUtilities.setupTracking(config.name);
+            await AngularUtilities.setupTracking(config.name, root);
         }
         await NpmUtilities.updatePackageJson(config.name, { scripts: { start: `ng serve --port ${config.port}` }, prettier: undefined });
         const app: WorkspaceProject = await WorkspaceUtilities.findProjectOrFail(config.name, getPath('.'));

src/commands/add/add-angular-website/add-angular-website.command.ts

@@ -111,6 +111,11 @@ export const ANGULAR_JSON_FILE_NAME: string = 'angular.json';
  */
 export const ANGULAR_ROUTES_FILE_NAME: string = 'routes.ts';
 
+/**
+ * The name of the angular server routes file.
+ */
+export const ANGULAR_SERVER_ROUTES_FILE_NAME: string = 'server.routes.ts';
+
 /**
  * The name of the angular app component file.
  */
@@ -136,6 +141,11 @@ export const SITEMAP_FILE_NAME: string = 'sitemap.xml';
  */
 export const APP_CONFIG_FILE_NAME: string = 'app.config.ts';
 
+/**
+ * The name of the angular app server config file.
+ */
+export const APP_CONFIG_SERVER_FILE_NAME: string = 'app.config.server.ts';
+
 /**
  * The name of the angular ng package file.
  */