refactor(libs): move all datahub common components to a new mel lib

Author: tkohr

apps/datahub/src/app/app.module.ts

@@ -41,28 +41,11 @@ import { HomePageComponent } from './home/home-page/home-page.component'
 import { AppRouterService } from './app.router.service'
 import { HomeHeaderComponent } from './home/home-header/home-header.component'
 import { MatIconModule } from '@angular/material/icon'
-import { MelEmbeddedTranslateLoader } from './common/embedded.translate.loader'
-import { ResultsListComponent } from './common/results-list/results-list.component'
-import { ResultsListItemComponent } from './common/results-list-item/results-list-item.component'
-import { ResultsListCarouselComponent } from './common/results-list/results-list-carousel/results-list-carousel.component'
-import { ResultsListGridComponent } from './common/results-list/results-list-grid/results-list-grid.component'
-import { ResultsCardFavoriteComponent } from './common/results-list-item/results-card-favorite/results-card-favorite.component'
-import { ResultsCardLastCreatedComponent } from './common/results-list-item/results-card-last-created/results-card-last-created.component'
-import { ResultsCardSearchComponent } from './common/results-list-item/results-card-search/results-card-search.component'
 import { MatTabsModule } from '@angular/material/tabs'
 import { DatasetApisComponent } from './dataset/dataset-apis/dataset-apis.component'
-import { MelDatahubMetadataQualityComponent } from './common/metadata-quality/mel-datahub-metadata-quality.component'
 import { DatasetHeaderComponent } from './dataset/dataset-header/dataset-header.component'
-import { ButtonComponent } from './common/button/button.component'
 import { DatasetDownloadsComponent } from './dataset/dataset-downloads/dataset-downloads.component'
-import { FavoriteHeartComponent } from './common/favorites/favorite-heart/favorite-heart.component'
-import { HeartToggleComponent } from './common/favorites/heart-toggle/heart-toggle.component'
-import { TextExpandComponent } from './common/text-expand/text-expand.component'
-import { MelDatahubFooterComponent } from './common/footer/mel-datahub-footer.component'
-import { CustomCarouselComponent } from './common/custom-carousel/custom-carousel.component'
 import { DatasetInformationComponent } from './dataset/dataset-information/dataset-information.component'
-import { MelFuzzySearchComponent } from './common/fuzzy-search/fuzzy-search.component'
-import { MelAutocompleteComponent } from './common/autocomplete/autocomplete.component'
 import { ReactiveFormsModule } from '@angular/forms'
 import { MatAutocompleteModule } from '@angular/material/autocomplete'
 import { SearchFormComponent } from './search/search-form/search-form.component'
@@ -80,7 +63,7 @@ import { DatasetVisualisationComponent } from './dataset/dataset-visualisation/d
 import { MelMapViewComponent } from './dataset/dataset-visualisation/map-view/map-view.component'
 import { MelDataViewComponent } from './dataset/dataset-visualisation/data-view/data-view.component'
 import { environment } from '../environments/environnment'
-import { StripHtmlPipe } from './common/strip-html.pipe'
+import { MelModule, MelEmbeddedTranslateLoader } from '@mel-dataplatform/mel'
 
 @NgModule({
   declarations: [
@@ -90,27 +73,11 @@ import { StripHtmlPipe } from './common/strip-html.pipe'
     SearchResultsComponent,
     HomePageComponent,
     HomeHeaderComponent,
-    ResultsListComponent,
-    ResultsListCarouselComponent,
-    ResultsListGridComponent,
-    ResultsListItemComponent,
-    ResultsCardFavoriteComponent,
-    ResultsCardLastCreatedComponent,
-    ResultsCardSearchComponent,
     DatasetPageComponent,
     DatasetApisComponent,
-    MelDatahubMetadataQualityComponent,
     DatasetHeaderComponent,
-    ButtonComponent,
     DatasetDownloadsComponent,
-    FavoriteHeartComponent,
-    HeartToggleComponent,
-    TextExpandComponent,
-    MelDatahubFooterComponent,
-    CustomCarouselComponent,
     DatasetInformationComponent,
-    MelFuzzySearchComponent,
-    MelAutocompleteComponent,
     SearchFormComponent,
     SearchFiltersComponent,
     MelFilterDropdownComponent,
@@ -122,9 +89,9 @@ import { StripHtmlPipe } from './common/strip-html.pipe'
     DatasetVisualisationComponent,
     MelMapViewComponent,
     MelDataViewComponent,
-    StripHtmlPipe,
   ],
   imports: [
+    MelModule,
     BrowserModule,
     BrowserAnimationsModule,
     UiWidgetsModule,

apps/datahub/tsconfig.editor.json

@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["src/**/*.ts"],
+  "include": ["src/**/*.ts", "../../libs/mel/src/lib/strip-html.pipe.ts"],
   "compilerOptions": {
     "types": ["jest", "node"]
   }

libs/mel/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "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": "melDataplatform",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "mel-datahub",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/mel/README.md

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'mel',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../coverage/libs/mel',
+  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/mel/jest.config.ts

@@ -0,0 +1,21 @@
+{
+  "name": "mel",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/mel/src",
+  "prefix": "mel-datahub",
+  "tags": [],
+  "projectType": "library",
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/mel/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    }
+  }
+}

libs/mel/project.json

@@ -0,0 +1,2 @@
+export * from './lib/mel.module'
+export * from './lib/embedded.translate.loader'