TECH-5: Angular 22

.github/workflows/main.yaml

@@ -7,8 +7,10 @@ jobs:
     name: Build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: ./.github/actions/init
+      - uses: actions/checkout@v6
+      - uses: valitydev/action-frontend/setup-install@v3
+        with:
+          force: true
       - name: Build
         run: npm run build
       - name: Deploy image
@@ -33,14 +35,6 @@ jobs:
           command: pages deploy ./dist/browser --project-name=dashboard
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
           packageManager: npm
-  notify:
-    name: Notify
-    runs-on: ubuntu-latest
-    needs: [build]
-    permissions:
-      contents: read
-    steps:
-      - uses: actions/checkout@v4
       - uses: valitydev/action-mattermost-notify@v0.1.4
         with:
           webhook: ${{ secrets.MATTERMOST_WEBHOOK_URL }}

.github/workflows/pr.yaml

@@ -7,15 +7,11 @@ jobs:
     name: Check
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: ./.github/actions/init
+      - uses: actions/checkout@v6
+      - uses: valitydev/action-frontend/setup-install@v3
+        with:
+          force: true
       - name: Check
         run: npm run check
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: ./.github/actions/init
       - name: Build
         run: npm run build

.prettierrc.js

@@ -1 +1,34 @@
-module.exports = require('@vality/ng-configs').prettierConfig;
+module.exports = {
+    printWidth: 100,
+    singleQuote: true,
+    tabWidth: 4,
+    plugins: ['prettier-plugin-organize-attributes'],
+    attributeSort: 'ASC',
+    attributeGroups: [
+        '$ANGULAR_ELEMENT_REF',
+        '$ANGULAR_STRUCTURAL_DIRECTIVE',
+        '$ANGULAR_ANIMATION',
+        '$ANGULAR_ANIMATION_INPUT',
+        '$ANGULAR_TWO_WAY_BINDING',
+        '$ANGULAR_INPUT',
+        '$DEFAULT',
+        '$ANGULAR_OUTPUT',
+    ],
+    overrides: [
+        {
+            files: '*.html',
+            options: { parser: 'angular' },
+        },
+        {
+            files: ['.{vscode,github}/**'],
+            options: {
+                tabWidth: 2,
+            },
+        },
+        {
+            files: '*.svg',
+            options: { parser: 'html' },
+        },
+    ],
+    endOfLine: 'auto',
+};

README.md

@@ -38,4 +38,4 @@ You can copy from examples like this one: [`_appConfig.json`](./src/assets/_appC
 
 ## Tests
 
-- Run `npm run test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+- Run `npm run test` to execute the unit tests via Vitest.

angular.json

@@ -68,6 +68,35 @@
                                     "with": "src/environments/environment.stage.ts"
                                 }
                             ]
+                        },
+                        "testing": {
+                            "aot": false,
+                            "optimization": false,
+                            "extractLicenses": false,
+                            "styles": [
+                                "src/styles/core.scss",
+                                {
+                                    "input": "src/styles/themes/main.scss",
+                                    "bundleName": "main-theme",
+                                    "inject": false
+                                },
+                                {
+                                    "input": "src/styles/themes/persian-green.scss",
+                                    "bundleName": "persian-green-theme",
+                                    "inject": false
+                                },
+                                {
+                                    "input": "src/styles/themes/solitude.scss",
+                                    "bundleName": "solitude-theme",
+                                    "inject": false
+                                },
+                                {
+                                    "input": "src/styles/themes/eastern.scss",
+                                    "bundleName": "eastern-theme",
+                                    "inject": false
+                                }
+                            ],
+                            "polyfills": ["zone.js", "zone.js/testing"]
                         }
                     },
                     "defaultConfiguration": "production"
@@ -91,36 +120,11 @@
                     "builder": "@angular/build:extract-i18n"
                 },
                 "test": {
-                    "builder": "@angular/build:karma",
+                    "builder": "@angular/build:unit-test",
                     "options": {
-                        "polyfills": ["zone.js", "zone.js/testing"],
                         "tsConfig": "tsconfig.spec.json",
-                        "inlineStyleLanguage": "scss",
-                        "assets": ["src/favicon.ico", "src/assets"],
-                        "styles": [
-                            "src/styles/core.scss",
-                            {
-                                "input": "src/styles/themes/main.scss",
-                                "bundleName": "main-theme",
-                                "inject": false
-                            },
-                            {
-                                "input": "src/styles/themes/persian-green.scss",
-                                "bundleName": "persian-green-theme",
-                                "inject": false
-                            },
-                            {
-                                "input": "src/styles/themes/solitude.scss",
-                                "bundleName": "solitude-theme",
-                                "inject": false
-                            },
-                            {
-                                "input": "src/styles/themes/eastern.scss",
-                                "bundleName": "eastern-theme",
-                                "inject": false
-                            }
-                        ],
-                        "scripts": []
+                        "buildTarget": ":build:testing",
+                        "runner": "vitest"
                     }
                 },
                 "lint": {

cspell.json

@@ -1,9 +1,18 @@
 {
     "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
     "version": "0.2",
-    "import": "./node_modules/@vality/ng-configs/src/lib/cspell-config.json",
-    "ignorePaths": ["**/country-codes.ts"],
+    "files": ["**"],
+    "ignorePaths": ["node_modules", "**/*.svg"],
+    "import": "@cspell/dict-ru_ru/cspell-ext.json",
+    "useGitignore": true,
+    "language": "en,ru",
     "words": [
+        "vality",
+        "valitydev",
+        "matez",
+        "vhosts",
+        "preauthorization",
+
         "transloco",
         "xrequest",
         "klass",

eslint.config.js

@@ -1,15 +1,118 @@
+// @ts-check
+const eslint = require('@eslint/js');
 const tseslint = require('typescript-eslint');
 const angular = require('angular-eslint');
-const configs = require('@vality/ng-configs');
+const importPlugin = require('eslint-plugin-import-x');
+const unusedImportsPlugin = require('eslint-plugin-unused-imports');
+const pathsPlugin = require('eslint-plugin-paths');
+
+function getImportOrderConfig(internalPatterns = ['~/**']) {
+    return {
+        files: ['**/*.ts'],
+        plugins: {
+            import: importPlugin,
+            paths: pathsPlugin,
+        },
+        rules: {
+            'sort-imports': [
+                'error',
+                {
+                    ignoreDeclarationSort: true,
+                },
+            ],
+            'import/order': [
+                'error',
+                {
+                    groups: [
+                        ['builtin', 'external'],
+                        'type',
+                        'internal',
+                        'parent',
+                        ['index', 'sibling'],
+                        'object',
+                    ],
+                    pathGroups: [
+                        {
+                            pattern: '@vality/**',
+                            group: 'type',
+                            position: 'before',
+                        },
+                        {
+                            pattern: '@*/**',
+                            group: 'external',
+                            position: 'after',
+                        },
+                        ...internalPatterns.map((pattern) => ({
+                            pattern,
+                            group: 'internal',
+                        })),
+                    ],
+                    pathGroupsExcludedImportTypes: ['builtin'],
+                    'newlines-between': 'always',
+                    alphabetize: {
+                        order: 'asc',
+                        caseInsensitive: true,
+                    },
+                },
+            ],
+            'paths/alias': 'error',
+            'no-restricted-imports': [
+                'error',
+                {
+                    patterns: [
+                        {
+                            group: [
+                                '~/utils/**',
+                                '~/services/**',
+                                // TODO:
+                                // '~/styles/**',
+                                //  '~/components/*/**',
+                            ],
+                            message: 'Import from index: ~/utils',
+                        },
+                    ],
+                },
+            ],
+        },
+    };
+}
+
+const baseEslintConfig = [
+    {
+        files: ['**/*.ts'],
+        plugins: {
+            'unused-imports': unusedImportsPlugin,
+        },
+        rules: {
+            '@typescript-eslint/no-inferrable-types': 'off',
+            '@typescript-eslint/no-unused-vars': 'off', // for unused-imports
+            'unused-imports/no-unused-imports': 'error',
+            'unused-imports/no-unused-vars': [
+                'error',
+                {
+                    vars: 'all',
+                    varsIgnorePattern: '^_|^[A-Z]$',
+                    args: 'after-used',
+                    argsIgnorePattern: '^_',
+                },
+            ],
+            'no-duplicate-imports': 'error',
+        },
+    },
+    getImportOrderConfig(),
+];
 
 module.exports = tseslint.config(
-    { ignores: ['**/dist'] },
     {
         files: ['**/*.ts'],
-        extends: [...tseslint.configs.recommended, ...angular.configs.tsRecommended],
+        extends: [
+            eslint.configs.recommended,
+            ...tseslint.configs.recommended,
+            ...tseslint.configs.stylistic,
+            ...angular.configs.tsRecommended,
+        ],
         processor: angular.processInlineTemplates,
         rules: {
-            '@angular-eslint/prefer-standalone': 'off',
             '@angular-eslint/directive-selector': [
                 'error',
                 {
@@ -26,14 +129,20 @@ module.exports = tseslint.config(
                     style: 'kebab-case',
                 },
             ],
-            '@angular-eslint/prefer-inject': 'off',
+            // Temporarily disabled due to issues with standalone components
+            '@angular-eslint/prefer-standalone': 'warn',
+            '@angular-eslint/prefer-on-push-component-change-detection': 'warn',
+            '@angular-eslint/prefer-inject': 'warn',
         },
     },
     {
         files: ['**/*.html'],
         extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
-        rules: {},
+        rules: {
+            '@angular-eslint/template/no-negated-async': 'off',
+            '@angular-eslint/template/click-events-have-key-events': 'off',
+            '@angular-eslint/template/interactive-supports-focus': 'off',
+        },
     },
-    ...configs.baseEslintConfig,
-    ...configs.appEslintConfig({ internalPatterns: ['@dsh/**'] }),
+    ...baseEslintConfig,
 );