Merge branch 'main' into feature/add-missing-dev-dep

.github/markdown-external-links.config.json

@@ -8,6 +8,9 @@
     },
     {
       "pattern": "https://img.shields.io/bundlephobia/*"
+    },
+    {
+      "pattern": "^https?://(127.0.0.1|localhost)[:/].*"
     }
   ],
   "replacementPatterns": [

.github/markdown-links.config.json

@@ -2,6 +2,9 @@
   "ignorePatterns": [
     {
       "pattern": "^https?:\/\/.*"
+    },
+    {
+      "pattern": "^https?://(127.0.0.1|localhost)[:/].*"
     }
   ],
   "replacementPatterns": [

CONTRIBUTING.md

@@ -21,7 +21,7 @@ The issue creation template requires:
 - NodeJS version
 - a fix suggestion, if possible
 
-If you already have a fix for the problem don't hesitate to [open a pull request](#creating-a-pull-request). Each pull request should be assign to an issue, so please create the issue and link it to the PR.
+If you already have a fix for the problem don't hesitate to [open a pull request](#creating-a-pull-request). Each pull request should be assigned to an issue, so please create the issue and link it to the PR.
 
 ## Creating a pull request
 
@@ -53,6 +53,7 @@ When contributing, please keep in mind the following rules:
 - A description comment must use the pattern `/** [Your comment] */`
 - Linter tasks must pass
 - Add relevant Unit Tests
+- E2E tests must pass (check [how to update screenshots for visual testing](./apps/showcase/scripts/update-screenshots/readme.md))
 - Any change should be followed by changes in the generator whenever it's applicable
 - Properties should have the most restricted type possible
 
@@ -72,12 +73,12 @@ To be able to benefit from this feature, you will need to perform the following
 
 1. Create an account on [Nx Cloud App](https://cloud.nx.app/)
 2. Create a Personal Access Token on [profile page](https://cloud.nx.app/profile/tokens).
-3. Follow [Nx Cloud instruction](https://nx.dev/ci/recipes/security/personal-access-tokens) to setup your previously generated PAT.
+3. Follow [Nx Cloud instruction](https://nx.dev/ci/recipes/security/personal-access-tokens) to set up your previously generated PAT.
 
 When building (`yarn build`) the project on the `main` branch (or another `release/*` branch), the remote cache will be downloaded.
 
 > [!NOTE]
-> Only Otter Team members can write Remote Cache on Nx Cloud, logged in user will be able to use Remote Cache in readonly access.
+> Only Otter Team members can write Remote Cache on Nx Cloud, logged-in users will be able to use Remote Cache in readonly mode.
 > The Local Cache is available for all users (logged or not to Nx Cloud).
 
 ### DevTools to create new Otter monorepo elements
@@ -103,6 +104,6 @@ As a reviewer, please follow these guidelines:
 - Always stay polite and professional in your comments.
 - The purpose of comments is to suggest improvements, ask a question or request for a change.
 - Comments should be constructive and suggest ways to improve things.
-- `Request changes` option should't be used if the comments consist only of questions.
+- `Request changes` option shouldn't be used if the comments consist only of questions.
 
 Thanks in advance for your contribution, and we look forward to hearing from you :)

apps/showcase/scripts/update-screenshots/readme.md

@@ -0,0 +1,14 @@
+# How to generate screenshots for the visual testing
+
+To minimize discrepancies on the screenshots between different operating systems, we are generating the screenshots from inside a docker.
+The procedure is the following:
+
+1. Prerequisite: you need a docker setup (or podman), `docker` should be available globally
+2. Build your application with your latest modifications `yarn nx build showcase`.
+3. Serve the application on port 8080 `npx http-server ./apps/showcase/dist/browser`\
+     The script will look on all local interfaces for an app running on `http://localhost:8080`
+4. Make sure all your changes on the spec files are commited `git commit`\
+     The project is cloned inside the docker image using `git clone` to avoid polluting the original folder.\
+     Only the screenshots are exported.
+5. Run the script to launch the e2e-tests inside the docker image `yarn workspace @o3r/showcase run update-screenshots`
+6. You should now have the updated screenshots in your project.

package.json

@@ -257,7 +257,7 @@
     "react-dom": "^18.0.0",
     "replace-in-files-cli": "^2.2.0",
     "rimraf": "^5.0.1",
-    "sass": "~1.80.0",
+    "sass": "~1.81.0",
     "sass-loader": "^14.0.0",
     "semver": "^7.5.2",
     "stylelint": "^16.0.2",

packages/@ama-sdk/create/README.md

@@ -37,7 +37,8 @@ npm create @ama-sdk typescript <project-name> -- --package-manager=yarn [...opti
 
 ## Options list
 
-- `--package-manager`: Node package manager to be used (`npm` and `yarn` are available).
+- `--package-manager`: Node package manager to be used (`npm` and `yarn` are available). If not specified, the automatically detected one will be used.
+- `--yarn`: Enforce `yarn` package manager. This option will be ignored if `--package-manager` is already specified.
 - `--debug --no-dry-run`: Enable schematics debug mode (dry-run is not currently supported).
 - `--o3r-metrics`: Enable or disable the collection of anonymous data for Otter
 - `--exact-o3r-version` : use a pinned version for [otter packages](https://github.com/AmadeusITGroup/otter/blob/main/docs/README.md).

packages/@ama-sdk/create/src/index.ts

@@ -17,7 +17,7 @@ if (packageManagerEnv && ['npm', 'yarn'].includes(packageManagerEnv)) {
   defaultPackageManager = packageManagerEnv;
 }
 
-const packageManager: string = argv['package-manager'] || defaultPackageManager;
+const packageManager: string = argv['package-manager'] || (argv.yarn && 'yarn') || defaultPackageManager;
 
 if (argv._.length < 2) {
   console.error('The SDK type and project name are mandatory');

packages/@o3r/core/README.md

@@ -43,6 +43,10 @@ npm create @o3r my-project -- --package-manager=yarn
 > [!TIP]
 > Get more details on [@o3r/create](https://www.npmjs.com/package/@o3r/create).
 
+> [!NOTE]
+> If you want to add o3r to an existing project, you will first need to install @o3r/schematics via
+> `ng add @o3r/schematics` and then `ng add @o3r/core`.
+
 ### Adding Material design theming
 
 ```shell

packages/@o3r/create/README.md

@@ -25,14 +25,17 @@ npm create @o3r <project-name> -- [...options]
 
 ### Custom package manager
 
-You can generate an environment with a specific package manager thanks to the `--package-manager` options:
+By default, the `npm` package manager will be used to generate the project, but you can generate an environment with a specific package manager using the `--package-manager` option:
 
 ```shell
 npm create @o3r <project-name> -- --package-manager=yarn [...options]
 ```
 
+> [!TIP]
+> The option `--package-manager=yarn` can be simplified to `--yarn`.
+
 > [!NOTE]
-> At the moment, the ``package-manager`` option only supports `yarn` and `npm`.
+> At the moment, the `package-manager` option only supports `yarn` and `npm`.
 
 ### Custom registry
 
@@ -50,5 +53,6 @@ If the specified package manager is `yarn`, it will also configure the `.yarnrc.
 The generator accepts all the configurations from the Angular `ng new` command, see the [options list](https://angular.io/cli/new#options).
 On top of them, the following options can be provided to the initializer:
 
+- `--yarn`: Enforce `yarn` package manager. This option will be ignored if `--package-manager` is already specified.
 - `--yarn-version`: specify the version of yarn to use (default: `latest`)
 - `--exact-o3r-version`: use a pinned version for [Otter packages](https://github.com/AmadeusITGroup/otter/blob/main/docs/README.md).

packages/@o3r/create/src/index.ts

@@ -105,8 +105,8 @@ let defaultPackageManager = supportedPackageManager[0];
 if (packageManagerEnv && supportedPackageManager.includes(packageManagerEnv)) {
   defaultPackageManager = packageManagerEnv;
 }
-const argvPackageManager = argv['package-manager'];
-let packageManager = supportedPackageManagerRegExp.test(argvPackageManager) ? argv['package-manager'] : defaultPackageManager;
+const argvPackageManager = argv['package-manager'] || (argv.yarn && 'yarn');
+let packageManager = supportedPackageManagerRegExp.test(argvPackageManager) ? argvPackageManager : defaultPackageManager;
 if (argvPackageManager && supportedPackageManagerRegExp.test(argvPackageManager)) {
   packageManager = argvPackageManager;
 } else if (argvPackageManager) {

packages/@o3r/design/package.json

@@ -61,7 +61,7 @@
     "@o3r/telemetry": "workspace:^",
     "chokidar": "^3.5.2",
     "globby": "^11.1.0",
-    "sass": "~1.80.0"
+    "sass": "~1.81.0"
   },
   "peerDependenciesMeta": {
     "@angular-devkit/architect": {
@@ -145,7 +145,7 @@
     "nx": "~19.5.0",
     "pid-from-port": "^1.1.3",
     "rxjs": "^7.8.1",
-    "sass": "~1.80.0",
+    "sass": "~1.81.0",
     "semver": "^7.5.2",
     "ts-jest": "~29.2.0",
     "ts-node": "~10.9.2",

packages/@o3r/schematics/schematics/ng-add/index.ts

@@ -1,5 +1,5 @@
 import type { Rule } from '@angular-devkit/schematics';
-import type { DependencyToAdd } from '@o3r/schematics';
+import { createSchematicWithMetricsIfInstalled, type DependencyToAdd, getExternalDependenciesVersionRange, setupDependencies } from '../../src/public_api';
 import { NodeDependencyType } from '@schematics/angular/utility/dependencies';
 import * as path from 'node:path';
 import type { NgAddSchematicsSchema } from './schema';
@@ -10,9 +10,8 @@ import type { NgAddSchematicsSchema } from './schema';
  */
 function ngAddFn(options: NgAddSchematicsSchema): Rule {
   const schematicsDependencies = ['@angular-devkit/architect', '@angular-devkit/schematics', '@angular-devkit/core', '@schematics/angular', 'globby'];
-  return async (_, context) => {
+  return (_, context) => {
     const packageJsonPath = path.resolve(__dirname, '..', '..', 'package.json');
-    const { getExternalDependenciesVersionRange, setupDependencies } = await import('@o3r/schematics');
     const dependencies = Object.entries(getExternalDependenciesVersionRange(schematicsDependencies, packageJsonPath, context.logger)).reduce((acc, [dep, range]) => {
       acc[dep] = {
         inManifest: [{
@@ -43,8 +42,7 @@ function ngAddFn(options: NgAddSchematicsSchema): Rule {
  * Add Otter schematics to an Angular Project
  * @param options
  */
-export const ngAdd = (options: NgAddSchematicsSchema): Rule => async () => {
-  const { createSchematicWithMetricsIfInstalled } = await import('@o3r/schematics');
+export const ngAdd = (options: NgAddSchematicsSchema): Rule => () => {
   return createSchematicWithMetricsIfInstalled(ngAddFn)(options);
 };
 

packages/@o3r/storybook/README.md

@@ -35,7 +35,8 @@ Otter framework provides 2 mechanisms to setup Storybook on an application/libra
 
 ### When starting a new Application/Library
 
-When creating a new application/library (`ng new`), the Otter Framework can be added with the `ng add @o3r/core` command. When executing this command, the following question will be asked: *Add storybook setup?* (default value: `yes`).
+When creating a new application/library (`ng new`), the Otter Framework can be added with the `ng add @o3r/schematics` and
+`ng add @o3r/core` commands. When executing this command, the following question will be asked: *Add storybook setup?* (default value: `yes`).
 If `yes` is chosen, [Storybook mandatory configurations](#storybook-mandatory-configurations) will be automatically added.
 
 ### Storybook mandatory configurations

packages/@o3r/styling/package.json

@@ -57,7 +57,7 @@
     "chokidar": "^3.5.2",
     "globby": "^11.1.0",
     "rxjs": "^7.8.1",
-    "sass": "~1.80.0",
+    "sass": "~1.81.0",
     "semver": "^7.5.2",
     "typescript": "~5.5.4"
   },
@@ -191,7 +191,7 @@
     "nx": "~19.5.0",
     "pid-from-port": "^1.1.3",
     "rxjs": "^7.8.1",
-    "sass": "~1.80.0",
+    "sass": "~1.81.0",
     "semver": "^7.5.2",
     "stylelint": "^16.0.2",
     "stylelint-scss": "^6.0.0",

yarn.lock

@@ -8190,7 +8190,7 @@ __metadata:
     nx: "npm:~19.5.0"
     pid-from-port: "npm:^1.1.3"
     rxjs: "npm:^7.8.1"
-    sass: "npm:~1.80.0"
+    sass: "npm:~1.81.0"
     semver: "npm:^7.5.2"
     ts-jest: "npm:~29.2.0"
     ts-node: "npm:~10.9.2"
@@ -8207,7 +8207,7 @@ __metadata:
     "@o3r/telemetry": "workspace:^"
     chokidar: ^3.5.2
     globby: ^11.1.0
-    sass: ~1.80.0
+    sass: ~1.81.0
   peerDependenciesMeta:
     "@angular-devkit/architect":
       optional: true
@@ -8870,7 +8870,7 @@ __metadata:
     replace-in-files-cli: "npm:^2.2.0"
     rimraf: "npm:^5.0.1"
     rxjs: "npm:^7.8.1"
-    sass: "npm:~1.80.0"
+    sass: "npm:~1.81.0"
     sass-loader: "npm:^14.0.0"
     semver: "npm:^7.5.2"
     stylelint: "npm:^16.0.2"
@@ -10104,7 +10104,7 @@ __metadata:
     nx: "npm:~19.5.0"
     pid-from-port: "npm:^1.1.3"
     rxjs: "npm:^7.8.1"
-    sass: "npm:~1.80.0"
+    sass: "npm:~1.81.0"
     semver: "npm:^7.5.2"
     stylelint: "npm:^16.0.2"
     stylelint-scss: "npm:^6.0.0"
@@ -10136,7 +10136,7 @@ __metadata:
     chokidar: ^3.5.2
     globby: ^11.1.0
     rxjs: ^7.8.1
-    sass: ~1.80.0
+    sass: ~1.81.0
     semver: ^7.5.2
     typescript: ~5.5.4
   peerDependenciesMeta:
@@ -30559,7 +30559,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass@npm:^1.42.1, sass@npm:^1.69.5":
+"sass@npm:^1.42.1, sass@npm:^1.69.5, sass@npm:~1.81.0":
   version: 1.81.0
   resolution: "sass@npm:1.81.0"
   dependencies:
@@ -30576,23 +30576,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass@npm:~1.80.0":
-  version: 1.80.7
-  resolution: "sass@npm:1.80.7"
-  dependencies:
-    "@parcel/watcher": "npm:^2.4.1"
-    chokidar: "npm:^4.0.0"
-    immutable: "npm:^5.0.2"
-    source-map-js: "npm:>=0.6.2 <2.0.0"
-  dependenciesMeta:
-    "@parcel/watcher":
-      optional: true
-  bin:
-    sass: sass.js
-  checksum: 10/617966d361968d6354bc17c0e2a66c6e0d822684b3694590441035e4966418304bbd4912ff4ee55e7a5751f94624057cd99ebc27964b102619e4e755b1f94f0e
-  languageName: node
-  linkType: hard
-
 "saucelabs@npm:^1.5.0":
   version: 1.5.0
   resolution: "saucelabs@npm:1.5.0"