feat(agora): migration About and related components (AG-1545) (#2837)

apps/agora/app/src/app/app.routes.ts

@@ -1,6 +1,10 @@
 import { Route } from '@angular/router';
 
 export const routes: Route[] = [
+  {
+    path: 'about',
+    loadChildren: () => import('@sagebionetworks/agora/about').then((routes) => routes.routes),
+  },
   {
     path: 'not-found',
     loadChildren: () => import('@sagebionetworks/agora/not-found').then((routes) => routes.routes),

apps/agora/app/src/test-setup.ts

@@ -1,8 +1,9 @@
 // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
-import 'jest-preset-angular/setup-jest';
 globalThis.ngJest = {
   testEnvironmentOptions: {
     errorOnUnknownElements: true,
     errorOnUnknownProperties: true,
   },
 };
+
+import 'jest-preset-angular/setup-jest';

jest.config.ts

@@ -1,5 +1,5 @@
-const { getJestProjects } = require('@nx/jest');
+import { getJestProjectsAsync } from '@nx/jest';
 
-export default {
-  projects: getJestProjects(),
-};
+export default async () => ({
+  projects: await getJestProjectsAsync(),
+});

libs/agora/about/.eslintrc.json

@@ -0,0 +1,40 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "env": {
+    "jest": true
+  },
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "plugin:jest/recommended"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "agora",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "agora",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/agora/about/.hintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["../../../.hintrc"]
+}

libs/agora/about/README.md

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

libs/agora/about/jest.config.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+export default {
+  displayName: 'agora-about',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {},
+  coverageDirectory: '../../../coverage/libs/agora/about',
+  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/agora/about/project.json

@@ -0,0 +1,35 @@
+{
+  "name": "agora-about",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "libs/agora/about/src",
+  "prefix": "agora",
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/libs/agora/about"],
+      "options": {
+        "jestConfig": "libs/agora/about/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "lint-fix": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "fix": true
+      }
+    },
+    "lint-html": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["hint src/**/*.html"],
+        "cwd": "libs/agora/about",
+        "parallel": false
+      }
+    }
+  },
+  "tags": ["type:feature", "scope:agora", "language:typescript"],
+  "implicitDependencies": []
+}

libs/agora/about/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/about.routes';

libs/agora/about/src/lib/about.component.html

@@ -0,0 +1,15 @@
+<div class="section section-hero">
+  <div class="section-inner">
+    <div class="container-sm">
+      <h1 class="h2">About</h1>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <div class="section-inner">
+    <div class="container-sm">
+      <agora-wiki [wikiId]="wikiId" [className]="className"></agora-wiki>
+    </div>
+  </div>
+</div>

libs/agora/about/src/lib/about.component.spec.ts

@@ -0,0 +1,13 @@
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+  let component: AboutComponent;
+
+  beforeEach(() => {
+    component = new AboutComponent();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/agora/about/src/lib/about.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { WikiComponent } from 'libs/agora/wiki/src/lib/wiki.component';
+
+@Component({
+  selector: 'agora-about',
+  standalone: true,
+  imports: [CommonModule, WikiComponent],
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.scss'],
+})
+export class AboutComponent {
+  wikiId = '612058';
+  className = 'about-page-content';
+}

libs/agora/about/src/lib/about.routes.ts

@@ -0,0 +1,4 @@
+import { Routes } from '@angular/router';
+import { AboutComponent } from './about.component';
+
+export const routes: Routes = [{ path: '', component: AboutComponent }];

libs/agora/about/src/test-setup.ts

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

libs/agora/about/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "target": "es2020",
+    "esModuleInterop": true
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/agora/about/tsconfig.lib.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"],
+  "include": ["**/*.ts"]
+}

libs/agora/about/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts", "jest.config.ts"]
+}

libs/agora/services/tsconfig.json

@@ -17,6 +17,7 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "target": "es2020",
     "esModuleInterop": true
   },
   "angularCompilerOptions": {

libs/agora/styles/src/_index.scss

@@ -2,3 +2,4 @@
 
 @use './lib/constants';
 @use './lib/general';
+@use './lib/variables';

libs/agora/styles/src/lib/_mixins.scss

@@ -0,0 +1,103 @@
+@use 'sass:map';
+@use 'sass:meta';
+
+@import 'variables';
+
+@mixin reset-button() {
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  overflow: visible;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  appearance: none;
+
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+}
+
+@mixin reset-ul() {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+@mixin container($width: 'md') {
+  max-width: var(--container-max-width-#{$width});
+  padding-left: 0;
+  padding-right: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/**
+* Responsive breakpoint manager
+* S. https://sass-guidelin.es/#architecture
+*/
+@mixin respond-to($breakpoint) {
+  $raw-query: map.get($breakpoints, $breakpoint);
+
+  @if $raw-query {
+    $query: if(
+      meta.type-of($raw-query) == 'string',
+      string.unquote($raw-query),
+      meta.inspect($raw-query)
+    );
+
+    @media #{$query} {
+      @content;
+    }
+  } @else {
+    @error 'No value found for `#{$breakpoint}`. '
+            + 'Please make sure it is defined in `$breakpoints` map.';
+  }
+}
+
+@mixin link-hover {
+  color: var(--color-link);
+  text-decoration: underline;
+}
+
+@mixin link {
+  color: var(--color-link);
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover {
+    @include link-hover;
+  }
+}
+
+@mixin two-tone-icon-hover {
+  .svg-icon-bg {
+    fill: rgb(var(--color-action-primary-rgb) / 30%);
+  }
+
+  circle,
+  rect,
+  path {
+    &:not(.svg-icon-bg) {
+      fill: var(--color-action-primary);
+    }
+  }
+}
+
+@mixin two-tone-icon {
+  color: var(--color-gray-600);
+  transition: $transition-duration;
+
+  circle,
+  rect,
+  path {
+    transition: $transition-duration;
+  }
+
+  &:hover {
+    @include two-tone-icon-hover;
+  }
+}