@dsivd/prestations-ng 15.5.13 → 16.0.0-beta10

package/CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 ## Prerequisite
 
--   Node 10.20+
+-   Node 16.15+
 -   yarn 1.22+
 -   Chrome or Chromium
 -   G++
@@ -188,3 +188,34 @@ export NODE_OPTIONS=--max_old_space_size=4096
 ```
 
 Use at your own risks.
+
+## E2E testing
+
+`Protractor` is no longer included in new Angular projects as of Angular 12.
+We have decided to remove it from `prestations-ng` and use instead `Cypress`.
+
+For more informations, please visit :
+https://github.com/angular/protractor/issues/5502
+https://docs.cypress.io/guides/migrating-to-cypress/protractor#Introduction
+
+**DO NOT FORGET TO BUILD THE LIBRARY BEFORE RUNNING E2E TESTS**
+
+### Running e2e in headless mode
+
+When launching Cypress in headless mode, execute:
+```bash
+yarn e2e
+```
+When a test fails, a screenshot will be added in `cypress/e2e/screenshots` folder.
+
+### Running e2e using Cypress visual interface
+
+When launching Cypress visual interface for running tests files individually in `watch` mode, execute:
+```bash
+yarn e2e:open
+```
+To execute a test, just click on your integration test file listed in the newly open window.
+A new window will open showing your e2e test execution.
+To show back your test list window, just click on `Tests` button in the top left corner.
+Click the `Stop` button to close your e2e test execution window.
+Then click on an other test in the list and so on...

package/ESLINT_MIGRATION_GUIDE.md

@@ -71,10 +71,10 @@ After:
 }
 ``` 
 
-## Adding `import` ,`jasmine` ,`jsdoc` ,`prefer-arrow` ,`rxjs` and `rxjs-angular` as plugins
+## Adding `import` ,`jasmine` ,`jsdoc` ,`simple-import-sort` ,`rxjs` and `rxjs-angular` as plugins
 
 ```bash
-yarn add eslint-plugin-import eslint-plugin-jasmine eslint-plugin-jsdoc eslint-plugin-prefer-arrow eslint-plugin-rxjs eslint-plugin-rxjs-angular --dev
+yarn add eslint-plugin-import eslint-plugin-jasmine eslint-plugin-jsdoc eslint-plugin-simple-import-sort eslint-plugin-rxjs eslint-plugin-rxjs-angular --dev
 ```
 
 ## Customizing ESLint (inspired from OTIA and prestations-ng's files for rules)
@@ -94,13 +94,30 @@ You can replace the content of your `.eslintrc.json` with the following `json`.
     },
     "ignorePatterns": [
         "/projects/**/*",
-        "/src/test.ts",
+        "/package.json",
+        "/angular.json",
+        "/karma.conf.js",
+        "/.eslintrc.json",
+        "/tsconfig*.json",
+        "/src/tsconfig*.json",
         "/src/main.ts",
-        "/src/polyfills.ts",
-        "/src/environments/*.ts",
         "/src/typings.d.ts"
     ],
     "reportUnusedDisableDirectives": true,
+    "settings": {
+        "import/extensions": [
+            ".js",
+            ".ts",
+            ".mjs",
+            ".mts",
+            ".d.ts"
+        ],
+        "import/internal-regex": "^@dsivd/",
+        "import/resolver": {
+            "node": { "extensions": [".js", ".ts", ".d.ts"] },
+            "typescript": {}
+        }
+    },
     "overrides": [
         // Typescript
         {
@@ -108,17 +125,16 @@ You can replace the content of your `.eslintrc.json` with the following `json`.
             "parserOptions": {
                 "ecmaVersion": 2020,
                 "project": [
-                    "tsconfig.json",
-                    "e2e/tsconfig.e2e.json"
+                    "tsconfig.json"
                 ],
                 "createDefaultProgram": true
             },
             "plugins": [
                 "import",
                 "jsdoc",
-                "prefer-arrow",
                 "rxjs",
-                "rxjs-angular"
+                "rxjs-angular",
+                "simple-import-sort"
             ],
             "extends": [
                 "plugin:@angular-eslint/recommended",
@@ -152,7 +168,9 @@ You can replace the content of your `.eslintrc.json` with the following `json`.
                 }],
                 "@typescript-eslint/ban-ts-comment": "error",
                 "@typescript-eslint/ban-tslint-comment": "error",
-                "@typescript-eslint/brace-style": "error",
+                "@typescript-eslint/brace-style": ["error", "1tbs", {
+                    "allowSingleLine": true
+                }],
                 "@typescript-eslint/comma-dangle": ["error", {
                     "objects": "never",
                     "arrays": "always-multiline",
@@ -204,6 +222,7 @@ You can replace the content of your `.eslintrc.json` with the following `json`.
                 "@typescript-eslint/no-unused-expressions": "error",
                 "@typescript-eslint/no-use-before-define": "off",
                 "@typescript-eslint/no-var-requires": "error",
+                "@typescript-eslint/object-curly-spacing": ["error", "always"],
                 "@typescript-eslint/prefer-for-of": "error",
                 "@typescript-eslint/prefer-function-type": "error",
                 "@typescript-eslint/prefer-includes": "warn",
@@ -221,6 +240,7 @@ You can replace the content of your `.eslintrc.json` with the following `json`.
                 }],
                 "@typescript-eslint/unified-signatures": "error",
                 /* @eslint */
+                "array-bracket-spacing": ["error", "never"],
                 "arrow-body-style": "error",
                 "arrow-parens": ["error", "as-needed"],
                 "brace-style": "off",
@@ -269,11 +289,13 @@ You can replace the content of your `.eslintrc.json` with the following `json`.
                 "no-unsafe-finally": "error",
                 "no-unused-labels": "error",
                 "no-var": "error",
+                "object-curly-spacing": "off",
                 "object-shorthand": ["error", "always", {
                     "avoidQuotes": true,
                     "avoidExplicitReturnArrows": false
                 }],
                 "one-var": ["error", "never"],
+                "prefer-arrow-callback": "error",
                 "prefer-template": "error",
                 "quote-props": ["error", "as-needed"],
                 "quotes": ["error", "single"],
@@ -284,6 +306,7 @@ You can replace the content of your `.eslintrc.json` with the following `json`.
                     "asyncArrow": "always",
                     "named": "never"
                 }],
+                "space-in-parens": ["error", "never"],
                 "spaced-comment": ["error", "always", {
                     "markers": ["/"]
                 }],
@@ -298,15 +321,18 @@ You can replace the content of your `.eslintrc.json` with the following `json`.
                     "ignoreExternal": true
                 }],
                 "import/no-deprecated": "warn",
+                "simple-import-sort/imports": "error",
+                "simple-import-sort/exports": "error",
+                "import/first": "error",
+                "import/newline-after-import": "error",
+                "import/no-duplicates": "error",
                 /* @jsdoc */
                 "jsdoc/check-alignment": "error",
                 "jsdoc/check-indentation": "error",
                 "jsdoc/newline-after-description": "error",
                 "jsdoc/no-types": "error",
                 "jsdoc/require-param-type": "off",
-                "jsdoc/require-returns-type": "off",
-                /* @preferArrow */
-                "prefer-arrow/prefer-arrow-functions": "error"
+                "jsdoc/require-returns-type": "off"
             }
         },
         // HTML
@@ -354,7 +380,7 @@ You can replace the content of your `.eslintrc.json` with the following `json`.
 First, you can run the automatic lint fixing:
 
 ```bash
-yarn lint --fix
+ng lint --fix=true
 ```
 
 Then manually fix remaining errors and run your tests to be sure you didn't break anything. Good luck! 

package/README.md

@@ -4,8 +4,12 @@ Best practice guide online in our DSI WiKi at [https://portail.etat-de-vaud.ch/o
 
 An implementation of [Foehn](https://dsi-vd.github.io/foehn-design-system/) with Angular for [PrestaKit](https://www.vd.ch/prestakit/).
 
+The generated documentation of our entire library is available online at [https://dsi-vd.github.io/prestations-ng/generateddoc](https://dsi-vd.github.io/prestations-ng/generateddoc)
+
 The documentation is available online at [https://dsi-vd.github.io/prestations-ng/](https://dsi-vd.github.io/prestations-ng/)
 
+-   If you're using **Angular 15**, use `@dsivd/prestations-ng` at version `^16`.
+-   If you're using **Angular 13**, use `@dsivd/prestations-ng` at version `^15`.
 -   If you're using **Angular 12**, use `@dsivd/prestations-ng` at version `^14.5.0`.
 -   If you're using **Angular 11**, use `@dsivd/prestations-ng` at version `^13` until `14.4.1`.
 -   If you're using **Angular 9**, use `@dsivd/prestations-ng` at version `^11`.
@@ -15,6 +19,8 @@ The documentation is available online at [https://dsi-vd.github.io/prestations-n
 
 Migration guides are available to provide an upgrade path from one major version to another.
 
+-   If you need to upgrade to version `16+`, please refer to [the V16 upgrade guide](UPGRADING_V16.md).
+-   If you need to upgrade to version `15+`, please refer to [the V15 upgrade guide](UPGRADING_V15.md).
 -   If you need to upgrade to version `14+`, please refer to [the V14 upgrade guide](UPGRADING_V14.md).
 -   If you need to upgrade to version `13+`, please refer to [the V13 upgrade guide](UPGRADING_V13.md).
 -   If you need to upgrade to version `12+`, please refer to [the V12 upgrade guide](UPGRADING_V12.md).

package/UPGRADING_V12.md

@@ -216,18 +216,3 @@ In your `package.json` located at the root of your application, add `start:symli
     }
 }
 ```
-
-## e2e tip
-
-When `e2e` test are broken due to `puppeteer` not having the same version between browser and driver, you can temporarily modify your `package.json` with:
-
-```json
-{
-    "scripts": {
-        "pree2e": "node_modules/protractor/bin/webdriver-manager update --versions.chrome=[VERSION_OF_CHROME_MATCHING_DRIVER] --gecko false --standalone false",
-        "e2e": "ng e2e --webdriverUpdate=false"
-    }
-}
-```
-
-**Be sure to rollback when `puppeteer` is up-to-date**

package/UPGRADING_V13.md

@@ -29,18 +29,3 @@ yarn upgrade
 ## Migrating to ESLint
 
 -   Follow [our migration guide](ESLINT_MIGRATION_GUIDE.md) to migrate your project from TSLint to ESLint
-
-## e2e tip
-
-When `e2e` test are broken due to `puppeteer` not having the same version between browser and driver, you can temporarily modify your `package.json` with:
-
-```json
-{
-    "scripts": {
-        "pree2e": "node_modules/protractor/bin/webdriver-manager update --versions.chrome=[VERSION_OF_CHROME_MATCHING_DRIVER] --gecko false --standalone false",
-        "e2e": "ng e2e --webdriverUpdate=false"
-    }
-}
-```
-
-**Be sure to rollback when `puppeteer` is up-to-date**

package/UPGRADING_V14.md

@@ -13,20 +13,19 @@ at this address:
 ### When having migrated to ESLint
 ```bash
 yarn global add @angular/cli@12
+ng update @angular/core@12 @angular/cli@12
 ng update @angular-eslint/builder@12
 ng update @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/template-parser
-ng update eslint
 ng update eslint-plugin-import eslint-plugin-jasmine eslint-plugin-jsdoc eslint-plugin-prefer-arrow
 ng update eslint-plugin-rxjs@3
 ng update @typescript-eslint/eslint-plugin @typescript-eslint/parser
+ng update eslint
 ng update rxjs@6
 ng update ng-http-loader@10
-ng update @dsivd/prestations-ng@14
-ng update \
-    @types/jasmine \
-    @types/node@15 \
-    ts-node@10
+ng update @types/jasmine @types/node@15 ts-node@10
 yarn add dayjs@1
+yarn add ngx-image-cropper@5
+ng update @dsivd/prestations-ng@14
 # Remove your resolutions in package.json before executing 'yarn upgrade'
 yarn upgrade
 ```
@@ -37,12 +36,10 @@ yarn global add @angular/cli@12
 ng update @angular/core@12 @angular/cli@12
 ng update rxjs@6
 ng update ng-http-loader@10
-ng update @dsivd/prestations-ng@14
-ng update \
-    @types/jasmine \
-    @types/node@15 \
-    ts-node@10
+ng update @types/jasmine @types/node@15 ts-node@10
 yarn add dayjs@1
+yarn add ngx-image-cropper@5
+ng update @dsivd/prestations-ng@14
 # Remove your resolutions in package.json before executing 'yarn upgrade'
 yarn upgrade
 ```
@@ -50,18 +47,3 @@ yarn upgrade
 ## Migrating to ESLint
 
 -   Follow [our migration guide](ESLINT_MIGRATION_GUIDE.md) to migrate your project from TSLint to ESLint
-
-## e2e tip
-
-When `e2e` test are broken due to `puppeteer` not having the same version between browser and driver, you can temporarily modify your `package.json` with:
-
-```json
-{
-    "scripts": {
-        "pree2e": "node_modules/protractor/bin/webdriver-manager update --versions.chrome=[VERSION_OF_CHROME_MATCHING_DRIVER] --gecko false --standalone false",
-        "e2e": "ng e2e --webdriverUpdate=false"
-    }
-}
-```
-
-**Be sure to rollback when `puppeteer` is up-to-date**

package/UPGRADING_V15.md

@@ -0,0 +1,113 @@
+# Upgrading from v14 to v15
+
+The main feature in `prestations-ng` v15 is the update of the `@angular/*` peer dependencies
+to `^13.1.0`.
+
+## Updating Angular
+
+`prestations-ng` v15+ now supports Angular 13. You can follow the Angular update guide
+at this address:
+
+-   [https://update.angular.io/?l=3&v=12.0-13.0](https://update.angular.io/?l=3&v=12.0-13.0)
+
+### When having migrated to ESLint
+```bash
+yarn global add @angular/cli@13
+ng update @angular-eslint/builder@13
+ng update @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/template-parser
+ng update @typescript-eslint/eslint-plugin @typescript-eslint/parser
+ng update eslint-plugin-import eslint-plugin-jasmine eslint-plugin-jsdoc eslint-plugin-prefer-arrow eslint-plugin-rxjs-angular
+ng update eslint
+ng update eslint-plugin-rxjs@4
+ng update @angular/core@13 @angular/cli@13
+ng update rxjs@7
+ng update @dsivd/prestations-ng@15
+ng update \
+    @types/jasmine \
+    @types/node@15 \
+    ts-node@10
+ng update ngx-image-cropper@~6.0.0
+ng update ng-http-loader@11
+# Remove your resolutions in package.json before executing 'yarn upgrade'
+yarn upgrade
+```
+
+### Otherwise
+```bash
+yarn global add @angular/cli@13
+ng update @angular/core@13 @angular/cli@13
+ng update rxjs@7
+ng update @dsivd/prestations-ng@latest
+ng update \
+    @types/jasmine \
+    @types/node@15 \
+    ts-node@10
+ng update ngx-image-cropper@~6.0.0
+ng update ng-http-loader@11
+# Remove your resolutions in package.json before executing 'yarn upgrade'
+yarn upgrade
+```
+
+## Migrating to ESLint
+
+-   Follow [our migration guide](ESLINT_MIGRATION_GUIDE.md) to migrate your project from TSLint to ESLint
+
+## Deprecated features
+
+### foehn-input-date component
+
+Added `<foehn-date-picker-button>` directly into template. Please refer to the [datepicker documentation](https://dsi-vd.github.io/prestations-ng/datepicker)
+
+- removed 
+```html
+<ng-content select="[date-picker-button]"></ng-content> 
+```
+- replaced by
+```html
+<foehn-date-picker-button></foehn-date-picker-button>
+``` 
+which is visible by default. To hide it, set `hideDatePickerButton` to `true` as a `foehn-input-date` attribute. See example below for more information.
+
+#### Migration step by step:
+
+##### Case 1: When using `foehn-input-date` with `foehn-date-picker-button`:
+Before :
+```html
+<foehn-input-date
+    label="Date"
+    [(model)]="yourModel"
+>
+    <foehn-date-picker-button
+        date-picker-button
+        [(model)]="yourModel"
+        [displaySelectedDate]="false"
+        class="align-self-center"
+    ></foehn-date-picker-button>
+</foehn-input-date>
+```
+
+After :
+```html
+<foehn-input-date
+    label="Date"
+    [(model)]="yourModel"
+></foehn-input-date>
+```
+
+##### Case 2: When using `foehn-input-date` without `foehn-date-picker-button`:
+Before :
+```html
+<foehn-input-date
+    label="Date"
+    [(model)]="yourModel"
+></foehn-input-date>
+```
+
+After :
+```html
+<foehn-input-date
+    label="Date"
+    [(model)]="yourModel"
+    [hideDatePickerButton]="true"
+></foehn-input-date>
+```