@eui/cli 21.0.0-alpha.4 → 21.0.0-alpha.40

package/lib/skeletons/_angular/base/angular.json

@@ -0,0 +1,129 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "cli": {
+        "analytics": false
+    },
+    "projects": {
+        "app": {
+            "root": "",
+            "sourceRoot": "src",
+            "projectType": "application",
+            "prefix": "app",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "style": "scss"
+                },
+                "@schematics/angular:application": {
+                    "strict": true
+                }
+            },
+            "architect": {
+                "build": {
+                    "builder": "@angular/build:application",
+                    "options": {
+                        "outputPath": "dist",
+                        "index": "src/index.html",
+                        "browser": "src/main.ts",
+                        "polyfills": ["zone.js"],
+                        "tsConfig": "src/tsconfig.app.json",
+                        "inlineStyleLanguage": "scss",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets",
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/@eui/core/assets/",
+                                "output": "./assets"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/@eui/styles/dist/assets/",
+                                "output": "./assets"
+                            }
+                        ],
+                        "styles": [
+                            "node_modules/@eui/styles/dist/eui.css",
+                            "node_modules/@eui/styles/dist/eui-utilities.css",
+                            "src/styles.scss"
+                        ]
+                    },
+                    "configurations": {
+                        "production": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ],
+                            "optimization": false,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "aot": true,
+                            "extractLicenses": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "1mb",
+                                    "maximumError": "2mb"
+                                }
+                            ]
+                        },
+                        "production-optimized": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ],
+                            "optimization": {
+                                "scripts": true,
+                                "styles": {
+                                    "minify": false,
+                                    "inlineCritical": true
+                                },
+                                "fonts": true
+                            },
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "extractLicenses": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "2mb",
+                                    "maximumError": "6mb"
+                                }
+                            ]
+                        },
+                        "development": {
+                            "optimization": false,
+                            "extractLicenses": false,
+                            "sourceMap": true
+                        }
+                    },
+                    "defaultConfiguration": "production"
+                },
+                "serve": {
+                    "builder": "@angular/build:dev-server",
+                    "options": {
+                        "buildTarget": "app:build"
+                    },
+                    "configurations": {
+                        "proxy-mock": {
+                            "buildTarget": "app:build:development",
+                            "proxyConfig": "proxy-mock.conf.json"
+                        },
+                        "production": {
+                            "buildTarget": "app:build:production"
+                        },
+                        "development": {
+                            "buildTarget": "app:build:development"
+                        }
+                    },
+                    "defaultConfiguration": "development"
+                }
+            }
+        }
+    }
+}

package/lib/skeletons/_angular/base/gitignore_TO_REPLACE

@@ -0,0 +1,51 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+**/node_modules
+**/target
+**/build
+**/dist
+**/out-tsc
+**/tmp
+**/test/reports
+**/coverage
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+yarn-error.log
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# Angular specific
+.angular
+.nx
+
+# System Files
+.DS_Store
+Thumbs.db
+
+/assets/env-json-config.json

package/lib/skeletons/_angular/base/mock/app/models/user.js

@@ -0,0 +1,6 @@
+module.exports = {
+  userId: '',
+  firstName: '',
+  lastName: '',
+  email: '',
+}

package/lib/skeletons/_angular/base/mock/app/routes/index.js

@@ -0,0 +1,5 @@
+const userRoutes = require('./user_routes');
+
+module.exports = function (app, db) {
+    userRoutes(app, db);
+};

package/lib/skeletons/_angular/base/mock/app/routes/user_routes.js

@@ -0,0 +1,44 @@
+const User = require('../models/user');
+const uuid = require('uuid');
+
+module.exports = function (app, db) {
+  db.then(db => {
+    app.get('/api/user-details', (req, res) => {
+      res.send(db.get('user-details'))
+    });
+
+    app.get('/api/users', (req, res) => {
+      res.send(db.get('users'))
+    });
+
+    app.get('/api/users/:userId', (req, res) => {
+      res.send(
+        db.get('users')
+          .find({ userId: req.params.userId })
+      );
+    });
+
+    app.put('/api/users/:userId', (req, res) => {
+      db.get('users')
+        .find({ userId: req.params.userId })
+        .assign( { ...req.body } )
+        .write()
+        .then(user => res.send(user))
+    });
+
+    app.delete('/api/users/:userId', (req, res) => {
+      db.get('users')
+        .remove({ userId: req.params.userId })
+        .write()
+        .then(res.send())
+    });
+
+    app.post('/api/users', (req, res) => {
+      db.get('users')
+        .push({ ...User, ...req.body, ...{ userId: uuid.v4() } })
+        .last()
+        .write()
+        .then(user => res.send(user))
+    });
+  });
+};

package/lib/skeletons/_angular/base/mock/db/db.json

@@ -0,0 +1,10 @@
+{
+  "user-details": {
+    "userId": "doejohn",
+    "firstName": "John",
+    "lastName": "Doe",
+    "email": "John.DOE@ec.europa.eu"
+  },
+  "users": [
+  ]
+}

package/lib/skeletons/_angular/base/mock/server.js

@@ -0,0 +1,23 @@
+const express = require('express');
+const bodyParser = require('body-parser');
+const app = express();
+const low = require('lowdb');
+const FileAsync = require('lowdb/adapters/FileAsync');
+const adapter = new FileAsync('mock/db/db.json');
+const db = low(adapter);
+const port = 3000;
+
+app.use(express.json());
+app.use(bodyParser.urlencoded({ extended: true }));
+// const cors = require('cors');
+// if needed to be reached from another localhost server for local testing a distributed app f.e.
+// app.use(cors({
+//     origin: 'http://127.0.0.1:8080',
+//     credentials: true,
+// }));
+
+require('./app/routes')(app, db);
+
+app.listen(port, () => {
+    console.log('We are live on ' + port);
+});

package/lib/skeletons/_angular/base/package.json

@@ -0,0 +1,39 @@
+{
+    "name": "eui-angular-app",
+    "version": "21.0.0-alpha.40",
+    "license": "EUPL-1.1",
+    "scripts": {
+        "ng": "ng",
+        "start-mock-server": "nodemon --watch ./mock ./mock/server.js",
+        "start-serve": "eui-cli serve-app --configuration=proxy-mock",
+        "start": "npm-run-all --parallel start-mock-server start-serve",
+        "start-proxy": "eui-cli serve-app --configuration=proxy",
+        "start-local": "eui-cli serve-app",
+        "build": "eui-cli build-app",
+        "build-dev": "eui-cli build-app --configuration=development --configEnvTarget=dev",
+        "build-prod": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod",
+        "build-prod-skip-test": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod --skipTest",
+        "build-prod-stats": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod --statsJson",
+        "app:build": "eui-cli build-app",
+        "app:inject-config": "eui-cli inject-config-app",
+        "generate-changelog": "eui-cli generate-changelog",
+        "generate-sprite": "eui-cli generate-sprite"
+    },
+    "private": true,
+    "dependencies": {
+        "@eui/deps-base": "21.0.0-alpha.40"
+    },
+    "devDependencies": {
+        "npm-run-all": "4.1.5",
+        "json-server": "1.0.0-beta.3",
+        "nodemon": "2.0.22",
+        "lowdb": "1.0.0",
+        "body-parser": "1.20.3",
+        "express": "4.21.2"
+    },
+    "resolutions": {
+        "semver": ">=7.5.2",
+        "dompurify": ">=3.2.4",
+        "tmp": ">0.2.4"
+    }
+}

package/lib/skeletons/_angular/base/proxy-mock.conf.json

@@ -0,0 +1,6 @@
+{
+    "/api": {
+        "target": "http://127.0.0.1:3000",
+        "secure": false
+    }
+}

package/lib/skeletons/_angular/base/proxy.conf.json

@@ -0,0 +1,6 @@
+{
+    "/api": {
+        "target": "http://localhost:7001",
+        "secure": false
+    }
+}

package/lib/skeletons/_angular/base/src/.eslintrc.json

@@ -0,0 +1,121 @@
+{
+    "root": true,
+    "ignorePatterns": [
+        "**/node_modules/**",
+        "**/dist/**",
+        "**/coverage/**",
+        "**/e2e/**",
+        "**/test/**",
+        "**/testing/**"
+    ],
+    "overrides": [
+        {
+            "files": [
+                "*.ts"
+            ],
+            "parserOptions": {
+                "project": [
+                    "tsconfig.json",
+                    "e2e/tsconfig.json"
+                ],
+                "createDefaultProgram": true
+            },
+            "extends": [
+                "eslint:recommended",
+                "plugin:@typescript-eslint/recommended",
+                "plugin:@angular-eslint/recommended",
+                "plugin:@angular-eslint/template/process-inline-templates"
+            ],
+            "rules": {
+                "@angular-eslint/component-selector": [
+                    "error",
+                    {
+                        "type": "element",
+                        "prefix": ["app", "app"],
+                        "style": "kebab-case"
+                    }
+                ],
+                "@angular-eslint/directive-selector": [
+                    "error",
+                    {
+                        "type": "attribute",
+                        "prefix": ["app", "eui"],
+                        "style": "camelCase"
+                    }
+                ],
+                "@typescript-eslint/ban-ts-comment": "off",
+                "@typescript-eslint/no-empty-object-type": "error",
+                "@typescript-eslint/no-unsafe-function-type": "error",
+                "@typescript-eslint/consistent-type-definitions": "off",
+                "@typescript-eslint/dot-notation": "off",
+                "@typescript-eslint/explicit-member-accessibility": [
+                    "off",
+                    {
+                        "accessibility": "explicit"
+                    }
+                ],
+                "@typescript-eslint/no-require-imports": "error",
+                "@typescript-eslint/no-unused-vars": "off",
+                "@typescript-eslint/no-var-requires": "error",
+                "@typescript-eslint/require-await": "error",
+                "brace-style": [
+                    "error",
+                    "1tbs"
+                ],
+                "id-blacklist": "off",
+                "id-match": "off",
+                "no-duplicate-case": "error",
+                "no-duplicate-imports": "off",
+                "no-invalid-this": "error",
+                "no-multiple-empty-lines": [
+                    "error",
+                    {
+                        "max": 1
+                    }
+                ],
+                "no-new-func": "error",
+                "no-redeclare": "off",
+                "@typescript-eslint/no-redeclare": [
+                    "error"
+                ],
+                "no-template-curly-in-string": "error",
+                "no-underscore-dangle": "off",
+                "@typescript-eslint/naming-convention": [
+                    "error",
+                    {
+                        "selector": "enum",
+                        "format": [
+                            "PascalCase",
+                            "UPPER_CASE"
+                        ]
+                    }
+                ],
+                "@typescript-eslint/member-ordering": [
+                    "error",
+                    {
+                        "default": [
+                            "public-static-field",
+                            "public-instance-field",
+                            "private-static-field",
+                            "private-instance-field",
+                            "public-constructor",
+                            "private-constructor",
+                            "public-instance-method",
+                            "protected-instance-method",
+                            "private-instance-method"
+                        ]
+                    }
+                ]
+            }
+        },
+        {
+            "files": [
+                "*.html"
+            ],
+            "extends": [
+                "plugin:@angular-eslint/template/recommended"
+            ],
+            "rules": {}
+        }
+    ]
+}

package/lib/skeletons/_angular/base/src/app/app-starter.service.spec.ts

@@ -0,0 +1,68 @@
+import {TestBed} from '@angular/core/testing';
+import { HttpTestingController, provideHttpClientTesting } from "@angular/common/http/testing";
+import {CONFIG_TOKEN, I18nService, UserService} from '@eui/core';
+import {EuiAppConfig} from '@eui/core';
+import {of} from 'rxjs';
+import {AppStarterService} from './app-starter.service';
+import SpyObj = jasmine.SpyObj;
+import { EuiServiceStatus } from '@eui/base';
+import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
+
+describe('AppStarterService', () => {
+    let service: AppStarterService;
+    let httpMock: HttpTestingController;
+    let userServiceMock: SpyObj<UserService>;
+    let i18nServiceMock: SpyObj<I18nService>;
+    let configMock: EuiAppConfig;
+
+    beforeEach(() => {
+        userServiceMock = jasmine.createSpyObj('UserService', ['init']);
+        i18nServiceMock = jasmine.createSpyObj('I18nService', ['init']);
+        configMock = {global: {}, modules: {core: {base: 'localhost:3000', userDetails: 'dummy'}}};
+
+        TestBed.configureTestingModule({
+            providers: [
+                provideHttpClient(withInterceptorsFromDi()),
+                provideHttpClientTesting(),
+                AppStarterService,
+                {provide: UserService, useValue: userServiceMock},
+                {provide: I18nService, useValue: i18nServiceMock},
+                {provide: CONFIG_TOKEN, useValue: configMock},
+            ],
+        });
+
+        service = TestBed.inject(AppStarterService);
+        httpMock = TestBed.inject(HttpTestingController);
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+
+    it('should call start method', () => {
+        userServiceMock.init.and.returnValue(of({ } as EuiServiceStatus));
+        i18nServiceMock.init.and.returnValue(of({ } as EuiServiceStatus));
+        service.start().subscribe(() => {
+            expect(userServiceMock.init).toHaveBeenCalled();
+            expect(i18nServiceMock.init).toHaveBeenCalled();
+        });
+    });
+
+    it('should call initUserService method', () => {
+        userServiceMock.init.and.returnValue(of({ } as EuiServiceStatus));
+        service.initUserService().subscribe(() => {
+            expect(userServiceMock.init).toHaveBeenCalled();
+        });
+    });
+
+    it('should fetch user details', () => {
+        const dummyUserDetails = {userId: 'anonymous'};
+        service['fetchUserDetails']().subscribe(userDetails => {
+            expect(userDetails).toEqual(dummyUserDetails);
+        });
+
+        const req = httpMock.expectOne(`${configMock.modules?.['core']['base']}${configMock.modules?.['core']['userDetails']}`);
+        expect(req.request.method).toBe('GET');
+        req.flush(dummyUserDetails);
+    });
+});

package/lib/skeletons/_angular/base/src/app/app-starter.service.ts

@@ -0,0 +1,68 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import {
+    CONFIG_TOKEN,
+    UserService,
+    I18nService,
+    EuiAppConfig,
+    UserDetails,
+    UserPreferences,
+    EuiServiceStatus,
+} from '@eui/core';
+import { catchError, Observable, of } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class AppStarterService {
+    defaultUserPreferences: UserPreferences | undefined;
+    private userService: UserService = inject(UserService);
+    private i18nService: I18nService = inject(I18nService);
+    private config: EuiAppConfig = inject(CONFIG_TOKEN);
+    private http: HttpClient = inject(HttpClient);
+
+    start(): Observable<EuiServiceStatus> {
+        return this.initUserService().pipe(
+            switchMap((userStatus) => {
+                console.log(userStatus);
+                return this.i18nService.init();
+            }),
+        );
+    }
+
+    /**
+     * Fetches user details,
+     * create user: UserState object
+     * then initialise to the UserService on run time
+     */
+    initUserService(): Observable<EuiServiceStatus> {
+        return this.fetchUserDetails().pipe(
+            switchMap((userDetails) => this.userService.init(userDetails))
+        );
+    }
+
+    /**
+     * Fetches user details
+     */
+    private fetchUserDetails(): Observable<UserDetails> {
+        // const url = this.config.modules.your_custom_module.your_custom_endpoint
+        const moduleCoreApi= this.config.modules?.['core'];
+        const url = `${moduleCoreApi?.['base']}${moduleCoreApi?.['userDetails']}`;
+        const user = {
+            userId: 'anonymous',
+            firstName: 'FirstName',
+            lastName: 'LastName',
+            fullName: 'FullName',
+        };
+
+        if (!url) {
+            return of(user);
+        }
+        return this.http.get<UserDetails>(url)
+            .pipe(
+                // in case of Http failure return dummy user
+                catchError(() => of(user)),
+            );
+    }
+}

package/lib/skeletons/_angular/base/src/app/app.component.html

@@ -0,0 +1,35 @@
+<eui-app>
+    <eui-app-toolbar>
+        <eui-toolbar>
+            <eui-toolbar-logo/>
+            <eui-toolbar-app appName="appName"/>
+            <eui-toolbar-environment>MOCK</eui-toolbar-environment>
+
+            <eui-toolbar-items>
+                <eui-toolbar-item>
+                    <eui-user-profile isShowAvatarInitials>
+                        <eui-user-profile-menu>
+                            <eui-user-profile-menu-item>
+                                <eui-icon-svg icon="person:outline"/>{{ 'eui.my-profile-informations' | translate }}
+                            </eui-user-profile-menu-item>
+                            <eui-user-profile-menu-item>
+                                <eui-icon-svg icon="log-out:outline"/>{{ 'eui.sign-out' | translate }}
+                            </eui-user-profile-menu-item>
+                        </eui-user-profile-menu>
+                    </eui-user-profile>
+                </eui-toolbar-item>
+
+                <eui-toolbar-item>
+                    <eui-notifications [count]="notificationItems?.length" [items]="notificationItems"></eui-notifications>
+                </eui-toolbar-item>
+            </eui-toolbar-items>
+
+            <eui-language-selector/>
+        </eui-toolbar>
+    </eui-app-toolbar>
+    <eui-app-sidebar>
+        <eui-app-sidebar-body>
+            <eui-app-sidebar-menu [items]="sidebarItems"/>
+        </eui-app-sidebar-body>
+    </eui-app-sidebar>
+</eui-app>