feat(btp): add Tool Layout (SAP#10680)

* feat: added btp package blueprint

* chore: added btp in header package switcher

* feat(btp): add Tool Layout

* feat(btp): add BTP Tool Layout

* feat(btp): add Tool Layout

* fix: added tool layout to the tsconfig

* chore: added HasElementRef interface to the tool layout component

* chore: renamed directives to be camel case and removed hostbindings on static classes

* chore: updated fd styles

* chore: using ng-package entrypoints for generating typedocs

* chore: renamed tool layout component selector

* chore: removed incorrect class

* fix: fixed nx tags test

---------

Co-authored-by: g-cheishvili <[email protected]>

.eslintrc.json

@@ -17,6 +17,10 @@
                                 "sourceTag": "scope:fd",
                                 "onlyDependOnLibsWithTags": ["scope:fd", "scope:i18n", "scope:cdk"]
                             },
+                            {
+                                "sourceTag": "scope:fdb",
+                                "onlyDependOnLibsWithTags": ["scope:fd", "scope:fdb", "scope:i18n", "scope:cdk"]
+                            },
                             {
                                 "sourceTag": "scope:fdp",
                                 "onlyDependOnLibsWithTags": ["scope:fd", "scope:fdp", "scope:i18n", "scope:cdk"]

.github/workflows/create-release.yml

@@ -88,18 +88,18 @@ jobs:
               uses: ./.github/actions/parallel-commands
               with:
                   parallel-commands: |
-                      npx nx run-many --target=lint --projects=i18n,cdk,core,platform,moment-adapter,datetime-adapter,cx --parallel=2
+                      npx nx run-many --target=lint --projects=i18n,cdk,core,platform,moment-adapter,datetime-adapter,cx,btp --parallel=2
                       npx nx run-many --target=build --all --parallel=1
 
             - name: Pack libraries
-              run: npx nx run-many --target=prepare --projects=i18n,cdk,core,platform,moment-adapter,datetime-adapter,cx --parallel=3 --projectVersion=${{ steps.bumpVersion.outputs.newVersion }} --pack
+              run: npx nx run-many --target=prepare --projects=i18n,cdk,core,platform,moment-adapter,datetime-adapter,cx,btp --parallel=3 --projectVersion=${{ steps.bumpVersion.outputs.newVersion }} --pack
               env:
                   NX_CLOUD_DISTRIBUTED_EXECUTION: false
 
             - name: Publish packages
               uses: ./.github/actions/npm-publish
               with:
-                  projects: '["cdk", "core", "i18n", "platform", "moment-adapter", "datetime-adapter", "cx"]'
+                  projects: '["cdk", "core", "i18n", "platform", "moment-adapter", "datetime-adapter", "cx", "btp"]'
                   token: ${{ secrets.NPM_TOKEN }}
                   releaseTag: ${{ steps.releaseTags.outputs.npm }}
 

.github/workflows/on-pull-request.yml

@@ -68,7 +68,7 @@ jobs:
                   parallel-commands: |
                       npx nx affected --target=build --base=origin/${{ github.event.pull_request.base.ref }} --head=HEAD --exclude=docs --parallel=3
                       npx nx affected --target=test --base=origin/${{ github.event.pull_request.base.ref }} --head=HEAD --exclude=nx-plugin --parallel=3
-                      npx nx affected --target=lint --base=origin/${{ github.event.pull_request.base.ref }} --head=HEAD --exclude=core,platform,cx --parallel=3
+                      npx nx affected --target=lint --base=origin/${{ github.event.pull_request.base.ref }} --head=HEAD --exclude=core,platform,cx,btp --parallel=3
                       npx nx run nx-plugin:test --skip-nx-cache
             - name: Format Check
               run: npx nx format:check --base=origin/${{ github.event.pull_request.base.ref }} --head=HEAD

apps/docs/project.json

@@ -78,6 +78,11 @@
                         "glob": "README.md",
                         "output": "./assets/cdk"
                     },
+                    {
+                        "input": "./libs/btp",
+                        "glob": "README.md",
+                        "output": "./assets/btp"
+                    },
                     {
                         "input": "./libs/i18n",
                         "glob": "README.md",
@@ -108,6 +113,11 @@
                         "input": "libs/docs/core",
                         "output": "./docs/core"
                     },
+                    {
+                        "glob": "**/examples/**/*",
+                        "input": "libs/docs/btp",
+                        "output": "./docs/btp"
+                    },
                     {
                         "glob": "**/examples/**/*",
                         "input": "libs/docs/platform",
@@ -211,6 +221,14 @@
                         }
                     ]
                 },
+                "btp": {
+                    "fileReplacements": [
+                        {
+                            "replace": "apps/docs/src/environments/app.routes.ts",
+                            "with": "apps/docs/src/environments/btp.routes.ts"
+                        }
+                    ]
+                },
                 "platform": {
                     "fileReplacements": [
                         {
@@ -274,6 +292,11 @@
                     "port": 4205,
                     "hmr": true
                 },
+                "btp": {
+                    "browserTarget": "docs:compile:btp",
+                    "port": 4206,
+                    "hmr": true
+                },
                 "hot-module-replacement": {
                     "hmr": true
                 },

apps/docs/src/environments/app.routes.ts

@@ -8,6 +8,13 @@ export const ROUTES: Routes = [
         },
         loadChildren: () => import('@fundamental-ngx/docs/core')
     },
+    {
+        path: 'btp',
+        data: {
+            library: 'BTP'
+        },
+        loadChildren: () => import('@fundamental-ngx/docs/btp')
+    },
     {
         path: 'platform',
         data: {

apps/docs/src/environments/btp.routes.ts

@@ -0,0 +1,10 @@
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import ROUTES from '@fundamental-ngx/docs/btp';
+
+ROUTES[0].path = 'btp';
+ROUTES.push({
+    path: '**',
+    redirectTo: 'btp'
+});
+
+export { ROUTES };

commitlint.config.js

@@ -4,7 +4,21 @@ const Configuration = {
         'scope-enum': [
             2,
             'always',
-            ['core', 'platform', 'docs', 'e2e', 'release', 'deps', 'deps-dev', 'changelog', 'ci', 'cx', 'cdk', 'shared']
+            [
+                'core',
+                'platform',
+                'docs',
+                'e2e',
+                'release',
+                'deps',
+                'deps-dev',
+                'changelog',
+                'ci',
+                'cx',
+                'btp',
+                'cdk',
+                'shared'
+            ]
         ],
         'body-max-line-length': [2, 'always', 400],
         'footer-max-line-length': [2, 'always', 400],

libs/btp/.eslintrc.json

@@ -0,0 +1,34 @@
+{
+    "extends": ["../../.eslintrc.json"],
+    "ignorePatterns": ["!**/*"],
+    "overrides": [
+        {
+            "files": ["*.ts"],
+            "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+            "rules": {
+                "@angular-eslint/directive-selector": [
+                    "error",
+                    {
+                        "type": "attribute",
+                        "prefix": "fdb",
+                        "style": "camelCase"
+                    }
+                ],
+                "@angular-eslint/component-selector": [
+                    "warn",
+                    {
+                        "type": "element",
+                        "prefix": "fdb",
+                        "style": "kebab-case"
+                    }
+                ],
+                "@angular-eslint/no-host-metadata-property": "off"
+            }
+        },
+        {
+            "files": ["*.html"],
+            "extends": ["plugin:@nx/angular-template"],
+            "rules": {}
+        }
+    ]
+}

libs/btp/README.md

@@ -0,0 +1,7 @@
+# btp
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test btp` to execute the unit tests.

libs/btp/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+    displayName: 'btp',
+    preset: '../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../coverage/libs/btp',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$'
+            }
+        ]
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment'
+    ]
+};

libs/btp/navigation/README.md

@@ -0,0 +1,3 @@
+# @fundamental-ngx/btp/navigation
+
+Secondary entry point of `@fundamental-ngx/btp`. It can be used by importing from `@fundamental-ngx/btp/navigation`.

libs/btp/navigation/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

libs/btp/navigation/project.json

@@ -0,0 +1,7 @@
+{
+    "sourceRoot": "libs/btp/navigation/src",
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "name": "btp-navigation",
+    "projectType": "library",
+    "tags": ["scope:fdb", "type:lib"]
+}

libs/btp/navigation/src/index.ts

@@ -0,0 +1 @@
+export default 'btp-navigation';

libs/btp/ng-package.json

@@ -0,0 +1,7 @@
+{
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../dist/libs/btp",
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

libs/btp/package.json

@@ -0,0 +1,14 @@
+{
+    "name": "@fundamental-ngx/btp",
+    "version": "0.0.1",
+    "peerDependencies": {
+        "@angular/common": "ANGULAR_VER_PLACEHOLDER",
+        "@angular/core": "ANGULAR_VER_PLACEHOLDER",
+        "@fundamental-ngx/core": "VERSION_PLACEHOLDER",
+        "@fundamental-ngx/cdk": "VERSION_PLACEHOLDER"
+    },
+    "dependencies": {
+        "tslib": "^2.3.0"
+    },
+    "sideEffects": false
+}

libs/btp/project.json

@@ -0,0 +1,48 @@
+{
+    "name": "btp",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/btp",
+    "prefix": "fundamental-ngx",
+    "tags": ["type:lib", "scope:fdb"],
+    "projectType": "library",
+    "targets": {
+        "prepare": {
+            "executor": "@fundamental-ngx/nx-plugin:prepare-library",
+            "options": {
+                "distPath": "dist/libs/btp"
+            }
+        },
+        "compile-typedoc": {
+            "executor": "@fundamental-ngx/nx-plugin:compile-typedoc",
+            "options": {
+                "outputPath": "libs/docs/typedoc/btp"
+            },
+            "outputs": ["{options.outputPath}"]
+        },
+        "build": {
+            "executor": "@nx/angular:package",
+            "outputs": ["{workspaceRoot}/dist/libs/btp"],
+            "options": {
+                "tsConfig": "libs/btp/tsconfig.lib.json",
+                "project": "libs/btp/ng-package.json"
+            },
+            "configurations": {
+                "production": {
+                    "tsConfig": "libs/btp/tsconfig.lib.prod.json"
+                }
+            },
+            "defaultConfiguration": "production"
+        },
+        "lint": {
+            "executor": "@nx/linter:eslint",
+            "options": {
+                "lintFilePatterns": [
+                    "libs/btp/src/lib/**/*.ts",
+                    "libs/btp/src/lib/**/*.html",
+                    "libs/btp/navigation/**/*.ts",
+                    "libs/btp/navigation/**/*.html"
+                ]
+            }
+        }
+    }
+}

libs/btp/src/index.ts

@@ -0,0 +1,2 @@
+throw new Error('Do not import anything from the `@fundamental-ngx/btp`, use secondary entrypoint exports instead!');
+export default 'btp-library';

libs/btp/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

libs/btp/tool-header/README.md

@@ -0,0 +1,3 @@
+# @fundamental-ngx/btp/tool-header
+
+Secondary entry point of `@fundamental-ngx/btp`. It can be used by importing from `@fundamental-ngx/btp/tool-header`.

libs/btp/tool-header/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

libs/btp/tool-header/project.json

@@ -0,0 +1,7 @@
+{
+    "sourceRoot": "libs/btp/tool-header/src",
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "name": "btp-tool-header",
+    "projectType": "library",
+    "tags": ["scope:fdb", "type:lib"]
+}

libs/btp/tool-header/src/index.ts

@@ -0,0 +1 @@
+export default 'btp-tool-header';

libs/btp/tool-layout/README.md

@@ -0,0 +1,3 @@
+# @fundamental-ngx/btp/tool-layout
+
+Secondary entry point of `@fundamental-ngx/btp`. It can be used by importing from `@fundamental-ngx/btp/tool-layout`.

libs/btp/tool-layout/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

libs/btp/tool-layout/project.json

@@ -0,0 +1,7 @@
+{
+    "sourceRoot": "libs/btp/tool-layout/src",
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "name": "btp-tool-layout",
+    "projectType": "library",
+    "tags": ["scope:fdb", "type:lib"]
+}

libs/btp/tool-layout/src/directives/tool-layout-container.directive.ts

@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+    selector: '[fdbToolLayoutContainer]',
+    standalone: true,
+    host: {
+        class: 'fd-tool-layout__container'
+    }
+})
+export class ToolLayoutContainerDirective {}