@eui/tools 5.0.0-rc.2 → 5.0.0-rc.20

package/scripts/csdr/cli/package.js

@@ -13,7 +13,9 @@ const configUtils = require('../config/config-utils');
 const TARGET_ROOT_PATH = path.join(process.cwd(), 'packages');
 const SKELETONS_ROOT_PATH = path.join(__dirname, 'skeletons', 'package');
 const FRONTEND_SKELETON_PATH = path.join(SKELETONS_ROOT_PATH, 'frontend');
+const FRONTEND_SKELETON_EUI10_PATH = path.join(SKELETONS_ROOT_PATH, 'frontend-eui10');
 const FRONTEND_SKELETON_REMOTE_PATH = path.join(SKELETONS_ROOT_PATH, 'frontend-remote');
+const FRONTEND_SKELETON_REMOTE_EUI10_PATH = path.join(SKELETONS_ROOT_PATH, 'frontend-remote-eui10');
 const FRONTEND_OPTION_ROUTE_PATH = path.join(SKELETONS_ROOT_PATH, 'frontend-option-route');
 const BACKEND_SKELETON_PATH = path.join(SKELETONS_ROOT_PATH, 'backend');
 
@@ -28,7 +30,13 @@ const defaultConfig = {
     DEFAULT: 'default',
     REMOTE: 'remote'
   },
+  pkgFrontendVersion: {
+    DEFAULT: 'eui7',
+    EUI10: 'eui10'
+  },
   isRouteModule: true,
+  isCsdrRepo: true,
+  externalRepoName: null,
   pkgGroupId: 'eu.europa.ec.cc'
 };
 
@@ -76,6 +84,24 @@ const prompt = () => {
             }
           }
         },
+        {
+          type: 'list',
+          name: 'pkgFrontendVersion',
+          message: 'Select eUI version target :',
+          choices: [
+            { name: 'v7', value: defaultConfig.pkgFrontendVersion.DEFAULT },
+            { name: 'v10', value: defaultConfig.pkgFrontendVersion.EUI10 },
+          ],
+          default: defaultConfig.pkgFrontendType.DEFAULT,
+          when: function (answers) {
+            return (answers.pkgType === defaultConfig.pkgType.FRONTEND);
+          },
+          validate: function (value) {
+            if (value.length) {
+              return true;
+            }
+          }
+        },
         {
           name: 'pkgScope',
           type: 'input',
@@ -99,7 +125,24 @@ const prompt = () => {
               answers.pkgFrontendType !== defaultConfig.pkgFrontendType.REMOTE
             );
           }
-        }
+        },
+        {
+          name: 'isCsdrRepo',
+          type: 'confirm',
+          message: 'Is the repository within CSDR git project ?',
+          default: defaultConfig.isCsdrRepo
+        },
+        {
+          name: 'externalRepoName',
+          type: 'input',
+          message: 'Enter the project CITnet project name where the repository is located :',
+          default: defaultConfig.externalRepoName,
+          when: function (answers) {
+            return (
+              answers.isCsdrRepo === false
+            );
+          }
+        },
       ]);
     })
 
@@ -110,22 +153,40 @@ const prompt = () => {
 
 
 
-const buildFrontend = (name, scope, frontendType, isRouteModule) => {
+const buildFrontend = (name, scope, frontendType, frontendVersion, isRouteModule, isCsdrRepo, externalRepoName) => {
   tools.logTitle('Generating package');
 
   let fullName = scope.substr(1) + '-' + name;
+  let npmPkgName, repoName;
+
   if (frontendType === defaultConfig.pkgFrontendType.DEFAULT) {
     fullName += '-ui';
+    npmPkgName = `${scope}/${name}`;
+
   } else if (frontendType === defaultConfig.pkgFrontendType.REMOTE) {
-    fullName += '-remote-el-ui';
+    if (frontendVersion === defaultConfig.pkgFrontendVersion.EUI10) {
+      fullName += '-eui10-remote-el-ui';
+      npmPkgName = `${scope}/${name}-eui10-remote-el`;
+
+    } else {
+      fullName += '-remote-el-ui';
+      npmPkgName = `${scope}/${name}-remote-el`;
+    }
+  }
+
+  if (isCsdrRepo) {
+    repoName = `${fullName}.git`;
+
+  } else {
+    repoName = `${externalRepoName}/${fullName}.git`;
   }
 
   const targetPath = path.join(TARGET_ROOT_PATH, fullName);
 
   const pkg = {
     name: fullName,
-    npmPkgScope: scope,
-    npmPkgName: name
+    repoName: repoName,
+    npmPkgName: npmPkgName
   };
 
   return Promise.resolve()
@@ -143,9 +204,17 @@ const buildFrontend = (name, scope, frontendType, isRouteModule) => {
     .then(() => {
       tools.logInfo('Copying skeleton to target');
       if (frontendType === defaultConfig.pkgFrontendType.REMOTE) {
-        return tools.copydir(FRONTEND_SKELETON_REMOTE_PATH, targetPath, true);
+        if (frontendVersion === defaultConfig.pkgFrontendVersion.EUI10) {
+          return tools.copydir(FRONTEND_SKELETON_REMOTE_EUI10_PATH, targetPath, true);
+        } else {
+          return tools.copydir(FRONTEND_SKELETON_REMOTE_PATH, targetPath, true);
+        }
       } else {
-        return tools.copydir(FRONTEND_SKELETON_PATH, targetPath, true);
+        if (frontendVersion === defaultConfig.pkgFrontendVersion.EUI10) {
+          return tools.copydir(FRONTEND_SKELETON_EUI10_PATH, targetPath, true);
+        } else {
+          return tools.copydir(FRONTEND_SKELETON_PATH, targetPath, true);
+        }
       }
     })
 
@@ -171,6 +240,9 @@ const buildFrontend = (name, scope, frontendType, isRouteModule) => {
         .then(() => {
           return tools.replaceInPath(targetPath, '@module.scope@', scope);
         })
+        .then(() => {
+          return tools.replaceInPath(targetPath, '@module.scope-name@', `${scope.substr(1)}-${name}`);
+        })
         .then(() => {
           return tools.replaceInPath(targetPath, '@module.scope.string@', scope.substr(1));
         })
@@ -302,10 +374,22 @@ module.exports.generate = () => {
       console.log(answers);
 
       if (answers.pkgType === defaultConfig.pkgType.FRONTEND) {
-        return buildFrontend(answers.pkgName, answers.pkgScope, answers.pkgFrontendType, answers.isRouteModule);
+        return buildFrontend(
+          answers.pkgName,
+          answers.pkgScope,
+          answers.pkgFrontendType,
+          answers.pkgFrontendVersion,
+          answers.isRouteModule,
+          answers.isCsdrRepo,
+          answers.externalRepoName,
+        );
 
       } else if (answers.pkgType === defaultConfig.pkgType.BACKEND) {
-        return buildBackend(answers.pkgName, answers.pkgScope, answers.pkgGroupId);
+        return buildBackend(
+          answers.pkgName,
+          answers.pkgScope,
+          answers.pkgGroupId,
+        );
       }
     })
 

package/scripts/csdr/cli/skeletons/app-eui10/angular-config.json

@@ -0,0 +1,20 @@
+{
+    "build": {
+        "assets": [
+            "apps/@app.name@/src/favicon.ico",
+            "apps/@app.name@/src/assets",
+            {
+                "glob": "**/*",
+                "input": "node_modules/@eui/core/assets/",
+                "output": "./assets"
+            }
+        ],
+        "styles": [
+            "node_modules/@eui/styles/dist/styles/eui.css",
+            "node_modules/@eui/styles/dist/styles/eui-components.css",
+            "node_modules/@eui/styles/dist/styles/eui-next.css",
+            "apps/@app.name@/src/styles.scss"
+        ],
+        "scripts": []
+    }
+}

package/scripts/csdr/cli/skeletons/app-eui10/dependencies-base.json

@@ -0,0 +1,2 @@
+{
+}

package/scripts/csdr/cli/skeletons/app-eui10/dependencies-composite.json

@@ -0,0 +1,5 @@
+{
+    "dependencies": {
+        "@eui/deps-base": "^10.0.0"
+    }
+}

package/scripts/csdr/cli/skeletons/app-eui10/gitignore_TO_REPLACE

@@ -0,0 +1,63 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+**/node_modules
+**/target
+**/build
+**/dist
+**/out-tsc
+**/tmp
+**/tests/reports
+# /src/assets/i18n-compiled/*
+# /src/assets/openid-login-config*
+
+# 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
+
+# System Files
+.DS_Store
+Thumbs.db
+
+/*.iml
+
+/proxy-mock.conf.json
+/proxy.conf.json
+/src/assets/dynamic-config.prod.json
+/src/assets/jsrsasign-all-min.js
+/src/assets/oidc-client.min.js
+/src/assets/openid-login-config.json
+/src/assets/openid-login.js
+/src/karma.conf.js
+/src/main.ts
+/src/polyfills.ts
+/src/test.ts
+/tsconfig.app.json
+/tsconfig.spec.json
+/webpack.extra.js

package/scripts/csdr/cli/skeletons/app-eui10/mock/app/models/user.js

@@ -0,0 +1,8 @@
+module.exports = {
+  id: 0,
+  firstName: '',
+  lastName: '',
+  email: '',
+  isAdmin: false,
+  birthdate: null
+}

package/scripts/csdr/cli/skeletons/app-eui10/mock/app/routes/index.js

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

package/scripts/csdr/cli/skeletons/app-eui10/mock/app/routes/user_routes.js

@@ -0,0 +1,24 @@
+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.post('/api/users', (req, res) => {
+      db.get('users')
+        .push({ ...User, ...req.body, ...{ id: uuid.v1() } })
+        .last()
+        .write()
+        .then(user => res.send(user))
+    });
+
+  });
+};

package/scripts/csdr/cli/skeletons/app-eui10/mock/db/db.json

@@ -0,0 +1,12 @@
+{
+    "user-details": {
+        "firstName": "John",
+        "lastName": "Doe",
+        "fullName": "John Doe",
+        "organisationRef": {
+          "id": "123456", "abbreviation": "DIGIT.B.3"
+        },
+        "userId": "doejohn",
+        "email": "John.DOE@ec.europa.eu"
+    }
+}

package/scripts/csdr/cli/skeletons/app-eui10/mock/server.js

@@ -0,0 +1,16 @@
+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('apps/@app.name@/mock/db/db.json')
+const db = low(adapter)
+const port = 3000;
+
+app.use(bodyParser.urlencoded({ extended: true }));
+
+require('./app/routes')(app, db);
+
+app.listen(port, () => {
+  console.log('We are live on ' + port);
+});

package/scripts/csdr/cli/skeletons/app-eui10/package.json

@@ -0,0 +1,6 @@
+{
+    "name": "@app.name@",
+    "version": "1.0.0",
+    "license": "EUPL-1.1",
+    "private": true
+}

package/scripts/csdr/cli/skeletons/app-eui10/scripts.json

@@ -0,0 +1,5 @@
+{
+    "@app.name@:start-mock-server": "nodemon --ext js --watch ./apps/@app.name@/mock ./apps/@app.name@/mock/server.js",
+    "@app.name@:start-serve": "eui-scripts serve-app @app.name@ --configuration=proxy-mock",
+    "@app.name@:start": "npm-run-all --parallel @app.name@:start-mock-server @app.name@:start-serve"
+}

package/scripts/csdr/cli/skeletons/app-eui10/src/app/app-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+    { path: '', redirectTo: 'home', pathMatch: 'full' },
+    { path: 'index.jsp', redirectTo: 'home' },
+    { path: 'home', loadChildren: './features/home/home.module#Module' },
+    { path: 'module1', loadChildren: './features/module1/module1.module#Module' },
+    { path: 'module2', loadChildren: './features/module2/module2.module#Module' },
+
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forRoot(routes),
+    ],
+})
+export class AppRoutingModule {}

package/scripts/csdr/cli/skeletons/app-eui10/src/app/app-starter.service.ts

@@ -0,0 +1,68 @@
+import { Inject, Injectable } from '@angular/core';
+import {
+    CONFIG_TOKEN,
+    UserService,
+    EuiAppConfig,
+    UserDetails,
+    UserPreferences,
+    I18nService,
+} from '@eui/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, of, zip } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class AppStarterService {
+    defaultUserPreferences: UserPreferences;
+
+    constructor(
+        protected userService: UserService,
+        protected i18nService: I18nService,
+        @Inject(CONFIG_TOKEN) private config: EuiAppConfig,
+        protected http: HttpClient,
+    ) {
+    }
+
+    start(): Observable<any> {
+
+        return zip(
+            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<any> {
+        return zip(
+            this.fetchUserDetails(),
+        ).pipe(
+            switchMap(([userDetails]) => {
+                return 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' };
+
+        if (!url) {
+            return of(user);
+        }
+        return this.http.get<UserDetails>(url);
+    }
+}

package/scripts/csdr/cli/skeletons/app-eui10/src/app/app.component.html

@@ -0,0 +1,29 @@
+<eui-app [userInfos]="userInfos?.fullName" isSidebarOpen=true>
+    <eui-app-toolbar>
+        <eui-toolbar>
+            <eui-toolbar-logo></eui-toolbar-logo>
+            <eui-toolbar-app appName="@app.name@"></eui-toolbar-app>
+            <eui-toolbar-environment>MOCK</eui-toolbar-environment>
+            <eui-toolbar-items euiPositionRight>
+                <eui-toolbar-item-user-profile>
+                    <eui-user-profile-menu>
+                        <eui-user-profile-menu-item>
+                            <eui-icon iconClass="eui-icon-person-thin"></eui-icon> {{ 'eui.my-profile-informations' | translate }}
+                        </eui-user-profile-menu-item>
+                        <eui-user-profile-menu-item>
+                            <eui-icon iconClass="eui-icon-logout-thin"></eui-icon> {{ 'eui.sign-out' | translate }}
+                        </eui-user-profile-menu-item>
+                    </eui-user-profile-menu>
+                </eui-toolbar-item-user-profile>
+                <eui-toolbar-item-notifications>
+                    <eui-notifications [count]="notificationItems?.length" [items]="notificationItems"></eui-notifications>
+                </eui-toolbar-item-notifications>
+            </eui-toolbar-items>
+        </eui-toolbar>
+    </eui-app-toolbar>
+    <eui-app-sidebar>
+        <eui-app-sidebar-body>
+            <eui-app-sidebar-menu [items]="sidebarItems"></eui-app-sidebar-menu>
+        </eui-app-sidebar-body>
+    </eui-app-sidebar>
+</eui-app>

package/scripts/csdr/cli/skeletons/app-eui10/src/app/app.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import {
+    getUserState,
+    UserState,
+} from '@eui/core';
+import { Observable, Subscription } from 'rxjs';
+import { AppStarterService } from './app-starter.service';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+})
+export class AppComponent implements OnInit, OnDestroy {
+    userInfos: UserState;
+    // Observe state changes
+    userState: Observable<UserState>;
+    // an array to keep all subscriptions and easily unsubscribe
+    subs: Subscription[] = [];
+
+    sidebarItems = [
+        { label: 'Home', url: 'home', iconClass: 'eui-icon-home' },
+        { label: 'Module 1', url: 'module1', iconClass: 'eui-icon-work', children: [
+            { label: 'page 1', url: 'module1/page1' },
+            { label: 'page 2', url: 'module1/page2' },
+        ] },
+        { label: 'Module 2', url: 'module2', iconClass: 'eui-icon-work' },
+    ];
+    notificationItems = [
+        { label: 'Title label 1', subLabel: 'Subtitle label' },
+        { label: 'Title label 2', subLabel: 'Subtitle label' },
+        { label: 'Title label 3', subLabel: 'Subtitle label' },
+        { label: 'Title label 4', subLabel: 'Subtitle label' },
+    ];
+
+    constructor(
+        private store: Store<any>,
+        private appStarterService: AppStarterService,
+    ) {
+        this.appStarterService.start().subscribe(() => {
+            this.userState = <any>this.store.select(getUserState);
+            this.subs.push(this.userState.subscribe((user: UserState) => {
+                this.userInfos = { ...user };
+                console.log(user);
+            }));
+        });
+    }
+
+    ngOnInit() {
+    }
+
+    ngOnDestroy() {
+        this.subs.forEach((s: Subscription) => s.unsubscribe());
+    }
+}

package/scripts/csdr/cli/skeletons/app-eui10/src/app/app.module.ts

@@ -0,0 +1,27 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { CoreModule } from './core/core.module';
+import { AppStarterService } from './app-starter.service';
+
+@NgModule({
+    declarations: [
+        AppComponent,
+    ],
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        CoreModule,
+        AppRoutingModule,
+    ],
+    providers: [
+        AppStarterService,
+    ],
+    bootstrap: [
+        AppComponent,
+    ],
+})
+export class AppModule {}

package/scripts/csdr/cli/skeletons/app-eui10/src/app/core/core.module.ts

@@ -0,0 +1,84 @@
+import { NgModule } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import {
+    CachePreventionInterceptor,
+    CorsSecurityInterceptor,
+    CsrfPreventionInterceptor,
+    EuLoginSessionTimeoutHandlingInterceptor,
+    CoreModule as EuiCoreModule,
+    translateConfig,
+    CoreModuleEffects,
+    EUI_CONFIG_TOKEN,
+} from '@eui/core';
+
+import { appConfig } from '../../config/index';
+import { environment } from '../../environments/environment';
+
+import { REDUCER_TOKEN, getReducers, metaReducers } from './reducers/index';
+
+import { SharedModule } from '../shared/shared.module';
+
+@NgModule({
+    imports: [
+        SharedModule,
+        EuiCoreModule.forRoot(),
+        EffectsModule.forRoot([...CoreModuleEffects]),
+        TranslateModule.forRoot(translateConfig),
+        StoreModule.forRoot(REDUCER_TOKEN, { metaReducers }),
+        !environment.production ? StoreDevtoolsModule.instrument({ maxAge: 50 }) : [],
+    ],
+    declarations: [
+    ],
+    exports: [
+        SharedModule,
+    ],
+    providers: [
+        {
+            provide: REDUCER_TOKEN,
+            deps: [],
+            useFactory: getReducers,
+        },
+        {
+            provide: EUI_CONFIG_TOKEN,
+            useValue: { appConfig: appConfig, environment: environment }
+        },
+        {
+            // Sets the withCredentials on Ajax Request to send the JSESSIONID cookie to another domain.
+            // This is necessary when a request is being made to another domain that is protected by EU Login.
+            provide: HTTP_INTERCEPTORS,
+            useClass: CorsSecurityInterceptor,
+            multi: true,
+        },
+        {
+            // WARNING: in case of OpenID this is not needed since OpenID is stateless therefore no revalidation needed.
+            // When the authentication session is invalid, we need to re-authenticate. The browser refreshes the current URL,
+            // and lets the EU Login client redirect to the official EU Login page.
+            provide: HTTP_INTERCEPTORS,
+            useClass: EuLoginSessionTimeoutHandlingInterceptor,
+            multi: true,
+        },
+        {
+            // Adds HTTP header to each Ajax request that ensures the request is set by a piece of JavaScript code in the application.
+            // This prevents dynamically-loaded content from forging a request in the name of the currently logged-in user.
+            // Be aware that this assumes that cross-site scripting (XSS) is already put in place, (default setting in Angular).
+            provide: HTTP_INTERCEPTORS,
+            useClass: CsrfPreventionInterceptor,
+            multi: true,
+        },
+        {
+            // Asks the intermediate proxies not to return a cache copy of the resource.
+            // In matter of fact forces each server in the chain to validate the freshness of the resource.
+            provide: HTTP_INTERCEPTORS,
+            useClass: CachePreventionInterceptor,
+            multi: true,
+        },
+    ]
+})
+export class CoreModule {
+
+}

package/scripts/csdr/cli/skeletons/app-eui10/src/app/core/reducers/index.ts

@@ -0,0 +1,33 @@
+import { InjectionToken } from '@angular/core';
+import { MetaReducer } from '@ngrx/store';
+import { storeFreeze } from 'ngrx-store-freeze';
+import { reducers as coreReducers, CoreState, getAppState, localStorageSync } from '@eui/core';
+
+import { environment } from '../../../environments/environment';
+
+export const REDUCER_TOKEN = new InjectionToken<any>('Registered Reducers');
+
+/**
+ * Define here your app state
+ *
+ * [IMPORTANT]
+ * There are some **reserved** slice of the state
+ * that you **can not** use in your application ==> app |user | notification
+ */
+/* tslint:disable-next-line */
+export interface AppState extends CoreState {
+    // [key: string]: fromTaskManager.State | any;
+}
+
+/**
+ * Define here the reducers of your app
+ */
+const rootReducer = Object.assign({}, coreReducers, {
+    // [fromTaskManager.namespace]: fromTaskManager.reducers,
+});
+
+export function getReducers() {
+    return rootReducer;
+}
+
+export const metaReducers: MetaReducer<AppState>[] = !environment.production ? [localStorageSync, storeFreeze] : [localStorageSync];