Merge branch 'feature/ng-update' into develop

ju4n97 · Dec 10, 2021 · 0bc7f7d · 0bc7f7d
2 parents c678f87 + 63d9eae
commit 0bc7f7d
Show file tree

Hide file tree

Showing 109 changed files with 1,978 additions and 5,379 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -2,4 +2,5 @@ node_modules/*
 package.json
 package-lock.json
 yarn.lock
+pnpm-lock.yaml
 dist
diff --git a/.gitignore b/.gitignore
@@ -32,6 +32,7 @@ speed-measure-plugin*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,6 +11,5 @@
   "[json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "css.validate": false,
-  "scss.validate": false
+  "css.validate": false
 }
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
diff --git a/README.md b/README.md
@@ -20,16 +20,6 @@
   <br>
   <br>
 </p>
-
-<p align="center">
-  <a href="https://github.com/facebook/jest">
-    <img src="https://jestjs.io/img/jest-badge.svg" alt="unit tests with Jest" />
-  </a>&nbsp;
-  <a href="https://github.com/juanmesa2097/angular-boilerplate/issues">
-    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="Contributions welcome" />
-  </a>
-</p>
-
 <hr>
 
 ## ⚗️ Features
@@ -41,27 +31,17 @@
 - Self-contained components and encapsulated modules.
 - Components types (e.g. component, page).
 - Amazing directory structure.
-- Unit tests with Jest instead of Karma & Jasmine.
-- e2e tests with Cypress (removed in favor of the official [cypress schematic](https://github.com/cypress-io/cypress/tree/develop/npm/cypress-schematic) as an opt-in feature)
 - PWA
 - Dynamic titles and content meta tags.
-- TailwindCSS + Autoprefixer + PurgeCSS setup.
+- TailwindCSS.
 - Dark mode and theme configuration.
 - Scalable CSS architecture in favor of TailwindCSS layers.
 - [Lighthouse](https://developers.google.com/web/tools/lighthouse) reports improved.
-- Migration from TSLint to ESLint.
-- Run unit tests & lint code on Git Hooks using [Husky](https://github.com/typicode/husky) & validate commit messages using [commitlint](https://github.com/conventional-changelog/commitlint)
-- GitHub Actions workflows for code analysis and unit tests.
+- ESLint.
+- Run unit tests & lint code using [Husky](https://github.com/typicode/husky) & validate commit messages using [commitlint](https://github.com/conventional-changelog/commitlint)
 
 ## 📄 Pages
 
-```
-Types of pages
-
-public: everybody can see them
-private: only logged in users can see them
-```
-
 - General
   - home
   - not-found
@@ -101,28 +81,20 @@ private: only logged in users can see them
 
 ## 📛 Custom directives
 
-- click-outside (detects when the user clicks outside an element).
+- click-outside: detects when the user clicks outside an element.
 
 ## 🧪 Custom pipes
 
-- bytes (transforms a numeric value into bytes, KB, MB, GB, etc.).
+- bytes: transforms a numeric value into bytes, KB, MB, GB, etc.
 
 ## 🛠️ Make some initial tweaks
 
-- Change application title:
-
-  Go to `src/index.html` and inside the `title` tag, replace "Angular Boilerplate" with your app name.
-
-- Change paths of the pages:
+- Change pages routes:
 
   Go to `src/app/core/utils/router.utils.ts` to find all the registered routes inside a config object.
 
   For example, you could replace `sign-in` with `SignIn`, `login` or `iniciar_sesion`
 
-- Change titles, descriptions, and robots of the pages:
-
-  Every page has a `.route` file that contains an exported constant that holds the title, description and a robot's metatag that indicates if it can be indexed or followed by a web crawler.
-
 - Change your TailwindCSS configuration:
 
   You can find the config file in the project root, then you can refer to https://tailwindcss.com/docs/configuration to learn how to make your own adjustments.
@@ -149,83 +121,6 @@ private: only logged in users can see them
   export const DEFAULT_BASE_THEME = ThemeList.Dark;
   ```
 
-## 🗑️ Remove features
-
-There are certain features that you may or may not like to have in your projects, and here's how to remove them:
-
-### 🌠 Husky & commitlint
-
-> Husky allows you to easily run scripts on Git Hooks & commitlint validates if a commit message follows a certain convention.
-
-- Remove execution of tests and linting on pre-commit:
-
-  - Go to `angular-boilerplate\.husky` and remove the npm scripts inside the `pre-commit` file or the file itself.
-
-- Remove execution of build on pre-push:
-
-  - Go to `angular-boilerplate\.husky` and remove the npm scripts inside the `pre-push` file or the file itself.
-
-- Remove conventional commit messages validation:
-
-  1. Go to `angular-boilerplate\.husky` and remove the command `npx commitlint --edit $1` inside the `commit-msg` file or the file itself.
-  2. Remove the file `angular-boilerplate\.commitlintrc`.
-  3. Run the following command:
-
-  ```
-  npm uninstall @commitlint/cli @commitlint/config-conventional
-  ```
-
-  OR
-
-  ```
-  yarn remove @commitlint/cli @commitlint/config-conventional
-  ```
-
-- Fully remove Husky & commitlint
-
-  1. Remove the folder `angular-boilerplate\.husky`.
-  2. Remove the file `angular-boilerplate\.commitlintrc`.
-  3. Run the following commands:
-
-  ```
-  npm uninstall husky @commitlint/cli @commitlint/config-conventional
-  ```
-
-  OR
-
-  ```
-  yarn remove husky @commitlint/cli @commitlint/config-conventional
-  ```
-
-### 🌠 GitHub Actions workflows
-
-> A GitHub Action workflow is a configurable automated process made up of one or more jobs that will help us to validate if some actions pass before we integrate new code into the repository (E.g., run unit tests on pull-requests or branch pushes).
-
-- Remove CodeQL analysis:
-
-  - Go to `angular-boilerplate\.github\workflows` and remove the file codeql-analysis.yml
-
-- Remove tests workflow:
-
-  - Go to `angular-boilerplate\.github\workflows` and remove the file test.yml
-
-### 🌠 TailwindCSS
-
-> TailwindCSS is a utility-first CSS Framework fully customizable & fully tree shakeable. If you want to replace it with another CSS framework or don't want to use a CSS framework at all, you can easily remove it from the project.
-
-1. Remove `angular-boilerplate\tailwind.config.js` file.
-2. Run the following command:
-
-```
-npm uninstall tailwindcss autoprefixer postcss
-```
-
-OR
-
-```
-yarn remove tailwindcss autoprefixer postcss
-```
-
 ## ⛩️ Project structure
 
 ```console
@@ -285,13 +180,11 @@ yarn remove tailwindcss autoprefixer postcss
 
 ## 🧙‍♂️ Commands
 
-| Command     | Description                                                    | NPM                 | Yarn             | Background command                                          |
-| ----------- | -------------------------------------------------------------- | ------------------- | ---------------- | ----------------------------------------------------------- |
-| ng          | See available commands                                         | npm run ng          | yarn ng          | ng                                                          |
-| start       | Run your app in development mode                               | npm start           | yarn start       | ng serve                                                    |
-| build       | Build your app for production                                  | npm run build       | yarn build       | ng build                                                    |
-| build:stats | Build your app for production and generate a "stats.json" file | npm run build:stats | yarn build:stats | ng build --stats-json                                       |
-| watch       | Run build when files change.                                   | npm run watch       | yarn watch       | ng build --watch --configuration development                |
-| test        | Run your unit tests                                            | npm run test        | yarn test        | ng test                                                     |
-| lint        | Use ESLint to lint your app                                    | npm run lint        | yarn lint        | ng lint                                                     |
-| analyze     | Open webpack-bundle-analyzer                                   | npm run analyze     | yarn analyze     | webpack-bundle-analyzer dist/angular-boilerplate/stats.json |
+| Command | Description                      | NPM           | Yarn       | Pnpm       | Background command                           |
+| ------- | -------------------------------- | ------------- | ---------- | ---------- | -------------------------------------------- |
+| ng      | See available commands           | npm run ng    | yarn ng    | pnpm ng    | ng                                           |
+| start   | Run your app in development mode | npm start     | yarn start | pnpm start | ng serve                                     |
+| build   | Build your app for production    | npm run build | yarn build | pnpm build | ng build                                     |
+| watch   | Run build when files change.     | npm run watch | yarn watch | pnpm watch | ng build --watch --configuration development |
+| test    | Run your unit tests              | npm run test  | yarn test  | pnpm test  | ng test                                      |
+| lint    | Use ESLint to lint your app      | npm run lint  | yarn lint  | pnpm lint  | ng lint                                      |
diff --git a/angular.json b/angular.json
@@ -11,9 +11,6 @@
       "schematics": {
         "@schematics/angular:application": {
           "strict": true
-        },
-        "@schematics/angular:component": {
-          "style": "scss"
         }
       },
       "root": "",
@@ -28,9 +25,9 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
+            "inlineStyleLanguage": "css",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/theme/styles.scss"],
+            "styles": ["src/theme/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -79,12 +76,14 @@
           "defaultConfiguration": "development"
         },
         "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@angular-devkit/build-angular:karma",
           "options": {
+            "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": [],
+            "styles": ["src/theme/styles.css"],
             "scripts": []
           }
         },

diff --git a/jest.config.js b/jest.config.js
diff --git a/karma.conf.js b/karma.conf.js
@@ -0,0 +1,41 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true, // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/test-app'),
+      subdir: '.',
+      reporters: [{ type: 'html' }, { type: 'text-summary' }],
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: [],
+    singleRun: false,
+    restartOnFileChange: true,
+  });
+};