feat(model-ad): create a footer component and add it to the MODEL-AD app

tschaffter commented 1 month ago

Description

Create the UI library for MODEL-AD and its first component, a footer, which is then imported in the web app.

cc: @sagely1 @hallieswan

Changelog

create the library model-ad-ui
create the component model-ad-footer
insert the footer into the app home page
create the library model-ad-styles
create the library model-ad-themes

Notes

Two ways to create a new components
1. with the generator: https://nx.dev/nx-api/angular/generators/library
2. by copy & pasting an existing component + replacing product and project names (the approach we took today)
The following tools were mentioned today
- Testing Library
- Storybook

About styles, themes and assets

OpenChallenges has three libraries:

openchallenges-styles: defines reusable layouts for OpenChallenges.
openchallenges-themes: defines the colors and fonts of OpenChallenges.
openchallenges-assets: contains assets (e.g. images).

Resources shared by two or more products would be placed in a shared projects, for example:

shared-styles
shared-themes
shared-assets

Preview

New footer component

nx serve model-ad-app

Then, visit localhost:4200:

Lint the library

$ nx lint model-ad-ui

> nx run model-ad-ui:lint  [existing outputs match the cache, left as is]

Linting "model-ad-ui"...

✔ All files pass linting

———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 NX   Successfully ran target lint for project model-ad-ui (202ms)

Nx read the output from the cache instead of running the command for 1 out of 1 tasks.

Test the library

$ nx test model-ad-ui

> nx run model-ad-ui:test

 PASS   model-ad-ui  libs/model-ad/ui/src/lib/footer/footer.component.spec.ts (9.818 s)
  FooterComponent
    ✓ should create (188 ms)

-----------------------|---------|----------|---------|---------|-------------------
File                   | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------------|---------|----------|---------|---------|-------------------
All files              |     100 |      100 |     100 |     100 |                   
 footer.component.html |     100 |      100 |     100 |     100 |                   
 footer.component.ts   |     100 |      100 |     100 |     100 |                   
-----------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        12.582 s
Ran all test suites.

———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 NX   Successfully ran target test for project model-ad-ui (17s)

tschaffter commented 1 month ago

The app can't import `libs/model-ad/styles/src/index`

apps/model-ad/app/src/styles.scss (adapted from OpenChallenges):

/* You can add global styles to this file, and also import other style files */
@use 'libs/model-ad/styles/src/index';

// @use 'app-theme';

In OpenChallenges, there is no config that enable that import. The import just works.

The error occurs with the following build task definition for MODEL-AD, which was created by the Angular generator:

    "build": {
      "executor": "@angular-devkit/build-angular:application",
      "outputs": [
        "{options.outputPath}"
      ],
      "options": {
        "outputPath": "dist/apps/model-ad/app",
        "index": "apps/model-ad/app/src/index.html",
        "browser": "apps/model-ad/app/src/main.ts",
        "polyfills": [
          "zone.js"
        ],
        "tsConfig": "apps/model-ad/app/tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": [
          "apps/model-ad/app/src/favicon.ico",
          "apps/model-ad/app/src/assets"
        ],
        "styles": [
          "apps/model-ad/app/src/styles.scss"
        ],
        "scripts": [],
        "server": "apps/model-ad/app/src/main.server.ts",
        "prerender": true,
        "ssr": {
          "entry": "apps/model-ad/app/server.ts"
        }
      },
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "1mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ],
          "outputHashing": "all"
        },
        "development": {
          "optimization": false,
          "extractLicenses": false,
          "sourceMap": true
        }
      },
      "defaultConfiguration": "production"
    },

However, the build works using an adapted version of the build task of OpenChallenges:

    "build": {
      "executor": "@angular-devkit/build-angular:browser",
      "outputs": [
        "{options.outputPath}"
      ],
      "options": {
        "outputPath": "dist/apps/model-ad/app/browser/browser",
        "index": "apps/model-ad/app/src/index.html",
        "main": "apps/model-ad/app/src/main.ts",
        "polyfills": [
          "zone.js"
        ],
        "tsConfig": "apps/model-ad/app/tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": [
          "apps/model-ad/app/src/assets",
          "apps/model-ad/app/src/favicon.ico"
        ],
        "styles": [
          "apps/model-ad/app/src/styles.scss"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "1mb",
              "maximumError": "2mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "10kb"
            }
          ],
          "outputHashing": "all"
        },
        "development": {
          "buildOptimizer": false,
          "optimization": false,
          "vendorChunk": true,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }
      },
      "defaultConfiguration": "production"
    },

Note that the two configuration use different executors!

OpenChallenges actually use the browser executor, which uses Webpack under the hood.

This new build system is stable and fully supported for use with Angular applications. You can migrate to the new build system with applications that use the browser builder.

We could continue to use Webpack, but new applications use the new build system by default.

The existing Webpack-based build system is still considered stable and fully supported. Applications can continue to use the browser builder and will not be automatically migrated when updating.

Source

Since Angular v17, it's recommended to use the new executor that use esbuild.

See the list of Angular executors.

tschaffter commented 1 month ago

References

tschaffter commented 1 month ago

@hallieswan One check we have is that all comments in the PR thread should be resolved before merging. Could you please review my answers and resolve the comments if the answers completely address them?

Sage-Bionetworks / sage-monorepo