angular-ru / angular-ru-sdk

🅰️ ngular-RU Software Development Kit

Angular-RU SDK

The Angular-RU Software Development Kit (SDK) is a set of tool chain that implement common interaction patterns whilst being un opinionated about their presentation for Angular. It represents an abstraction of the core functionalities found in the Angular.

---

Development kit

Package	Version	README	Downloads
@angular-ru/cdk
@angular-ru/ngxs

---

Infra

Sharable configs

Package	Version	README	Downloads
@angular-ru/typescript
@angular-ru/renovate
@angular-ru/prettier
@angular-ru/commitlint

Jest

Package	Version	README	Downloads
@angular-ru/jest

ESLint

Package	Version	README	Downloads
@angular-ru/eslint-plugin-enterprise
@angular-ru/eslint-config-enterprise

Useful dev dependencies for many project

Package	Version	README	Downloads
@angular-ru/dev-dependencies

angular-ru-sdk's Issues

🚀[FEATURE]: https://github.com/cartant/eslint-plugin-rxjs

Add https://github.com/cartant/eslint-plugin-rxjs to eslint-config

🚀[FEATURE]: https://eslint.org/docs/rules/no-implicit-coercion

https://eslint.org/docs/rules/no-implicit-coercion

🚀[FEATURE]: https://bundlewatch.io/#/getting-started/using-bundlewatch

https://bundlewatch.io/#/getting-started/using-bundlewatch

🐞[BUG]: Deprecation jest

no-restricted-syntax TSEnumDeclaration

   'no-restricted-syntax': [
            'error',
            {
                selector: 'TSEnumDeclaration:not([const=true])',
                message: "Don't declare non-const enums"
            }
        ],

🚀[FEATURE]: Material Extensions

    protected readonly multiEditModal: ModalHandler<PosShop> = dialog()
        .setComponent(MultiEditShopLimitsModalComponent)
        .setFullOverlay()
        .setWidth('500px');

🚀[FEATURE]: add noPropertyAccessFromIndexSignature and noImplicitOverride to TS

🐞[BUG]: This package has been deprecated. Please use the ng-packagr builder from @angular-devkit/build-angular instead.

This package has been deprecated. Please use the ng-packagr builder from @angular-devkit/build-angular instead.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (@Angular-RU)

🚀[FEATURE]: Move to Github CI

🚀[FEATURE]: @RequestBody((body) => mutateBodyBeforeRequest(body))

public send(@RequestBody(SKIP_NULLABLE_FIELDS) _body: Body) {}

🚀[FEATURE]: Nx deploy to Netfliy

🚀[FEATURE]: build-tools

"@types/jasmine": "3.5.0",
"@types/jasminewd2": "2.0.8",

Dependency Dashboard

This issue contains a list of Renovate updates and their statuses.

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• build: update dependency @types/node to v15.14.2
• build: update dependency karma-jasmine-html-reporter to v1.7.0
• build: update dependency ts-node to v10.1.0
• build: update dependency rxjs to v7

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, check the box below.

• build: update dependency @types/node to v16

---

• Check this box to trigger a request for Renovate to run again on this repository

🚀[FEATURE]: add "importsNotUsedAsValues": "error"

"importsNotUsedAsValues": "error"

🚀[FEATURE]: directive-selector and component-selector

 // ORIGINAL tslint.json -> "directive-selector": [true, "attribute", "app", "camelCase"],
    '@angular-eslint/directive-selector': [
      'error',
      { type: 'attribute', prefix: 'hc', style: 'camelCase' },
    ],

    // ORIGINAL tslint.json -> "component-selector": [true, "element", "app", "kebab-case"],
    '@angular-eslint/component-selector': [
      'error',
      { type: 'element', prefix: 'hc', style: 'kebab-case' },
    ],

🐞[BUG]: ESLint enums

export const enum SlideInOutState {
    in = 'in',
    out = 'out'
}

🚀[FEATURE]: firstSelectedItem in table-builder

🐞[BUG]: https://github.com/Angular-RU/angular-ru-sdk/pull/490

class Cd {}

@InjectContext()
class IceCream {
    @Authowired() cd?: Cd;
}

function Authowired() {
  return function(target: Object, key: string | symbol) {
    let val = target[key];

    Promise.resolve().then(() => {
        console.log('emoji', target);
    });

    const getter = () =>  {
        return val;
    };
    const setter = (next) => {
        val = `🍦 ${next} 🍦`;
    };

    Object.defineProperty(target, key, {
      get: getter,
      set: setter,
      enumerable: true,
      configurable: true,
    });

  };
}

function AuthowireContext(constructor: Function) {
  console.log('constructor.prototype', constructor.prototype)
}

#490

Docker

Discussed in https://github.com/Angular-RU/angular-ru-sdk/discussions/634

^{Originally posted by splincode May 15, 2021}
https://betterprogramming.pub/7-steps-to-dockerize-your-angular-9-app-with-nginx-915f0f5acac

New API for ngx-table-builder

Actual behaviour

Expected behaviour

Linked

• #498 Deep keys for exclude

🐞[BUG]: Add renovate-config package

🚀[FEATURE]: Remove clipboard from Angular Logger

https://medium.com/angular-in-depth/use-the-new-angular-clipboard-cdk-to-interact-with-the-clipboard-be1c9c94cac2

🐞[BUG]: Not remove tooltip in ng-table-builder after click

🚀[FEATURE]: Material extensions

@ModalTitle(MULTI_EDIT)
    @Modal(MultiEditModalComponent)
    @ModalOptions({ ...FULL_OVERLAY_CONFIG, width: '500px' })
    protected readonly multiEditModalRef!: ModalHandler<Model>;

🚀[FEATURE]: Angular 12 support

Version of angular/core in packages/common/package.json is < 12

🚀[FEATURE]: add https://github.com/peter-evans/create-pull-request/blob/main/docs/examples.md

https://github.com/peter-evans/create-pull-request/blob/main/docs/examples.md

🚀[FEATURE]: add @angular-eslint/sort-ngmodule-metadata-arrays

no-useless constructor

https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-useless-constructor.md

🚀[FEATURE]: https://eslint.org/docs/rules/prefer-template

https://eslint.org/docs/rules/prefer-template

🚀[FEATURE]: Create form builder

instead

public formGroup: FormGroup = this.fb.group({
        systemName: new FormControl(null, Validators.required),
        fullName: new FormControl(null, Validators.required),
        alertTypeId: new FormControl(null, [Validators.required, isIntegerValidator()]),
        instructionId: new FormControl(null, [Validators.required, isIntegerValidator()]),
        priorityId: new FormControl(null, [
            Validators.required,
            isIntegerValidator(),
            Validators.min(this.minPriority),
            Validators.max(this.maxPriority)
        ]),
        onCallTeam: new FormControl(null, Validators.required),
        id: new FormControl(null),
        parentAlertId: new FormControl(null)
    });

@Form()
export class AlertInfo {
    @FormField() public id?: number = null!;
    @FormField() public systemName: string = null!;
    @FormField() public fullName: string = null!;
    @FormField() public alertTypeId?: number = null!;
    @FormField() public parentAlertId?: number = null!;
    @FormField() public instructionId?: number = null!;
    @FormField() public priorityId?: number = null!;
    @FormField() public onCallTeam?: string = null!;
}

@Component({})
class Component {
  @FormGroup(AlertInfo) formGroup!: FormGroup;
}

🐞[BUG]: no-dupe-class-members.md

https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-dupe-class-members.md

🚀[FEATURE]: use context menu in body

https://gist.github.com/caroso1222/1c99aee8c9efe873902a9c590ab7b40a

🚀[FEATURE]: improved tsconfig

"tsBuildInfoFile": "./node_modules/.ts-buildcache/tsconfig.buildinfo",
    "incremental": true,
"exclude": ["node_modules", "dist/**", "__tests__/**"]

🐞[BUG]: Circular dependency: dist/library/esm2015/array/public_api.js

🚀[FEATURE]: context menu item in table builder

<ngx-context-menu-item
                (onClick)="showDisputeCycleByArn()"
                [disable]="!$any(item)?.state?.item || table.selection.selectionModel.size > 1">

new behaviour

<ngx-context-menu-item 
    disable-when-item-is-empty
    disable-when-multiple-selected 
    (onClick)="showDisputeCycleByArn()">

🚀[FEATURE]: Generic Tuple function

what do you think about this? microsoft/TypeScript#26223 (comment)
we really get an error if we specify a length greater than 45 in the recursive approach

Originally posted by @StepaZol in #684 (comment)

🚀[FEATURE]: Refactor <ngx-context-menu [max-height]="580">

need dynamic calculate max-height

🚀[FEATURE]: Possibility to hide header in the table-builder

Describe the solution you'd like
Pass the Input into ngx-table-builder and switch this table-thead inside by this parameter.

🚀[FEATURE]: Support deep keyof in exclude pattern

type PropType<T, Path extends string> =
    string extends Path ? unknown :
    Path extends keyof T ? T[Path] :
    Path extends `${infer K}.${infer R}` ? K extends keyof T ? PropType<T[K], R> : unknown :
    unknown;

declare function getPropValue<T, P extends string>(obj: T, path: P): PropType<T, P>;
declare const s: string;

const obj = { a: { b: {c: 42, d: 'hello' }}};
getPropValue(obj, 'a');  // { b: {c: number, d: string } }
getPropValue(obj, 'a.b');  // {c: number, d: string }
getPropValue(obj, 'a.b.d');  // string
getPropValue(obj, 'a.b.x');  // unknown
getPropValue(obj, s);  // unknown

eslint-plugin-unicorn

https://github.com/sindresorhus/eslint-plugin-unicorn

Integration with angular-eslint

https://github.com/angular-eslint/angular-eslint

Dependency Dashboard

Discussed in https://github.com/Angular-RU/angular-ru-sdk/discussions/736

^{Originally posted by renovate[bot] June 19, 2020}
This issue contains a list of Renovate updates and their statuses.

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• build: update dependency @types/jest to v26.0.24
• build: update dependency ng-packagr to v12.1.1
• build: update dependency prettier to v2.3.2
• build: update dependency typescript to v4.3.5
• build: update eslint (@types/eslint, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint, eslint-plugin-sonarjs)
• build: update dependency @types/jasmine to v3.8.1
• build: update dependency @types/node to v15.14.1
• build: update dependency @types/node to v16
• build: update dependency husky to v7
• build: update dependency rxjs to v7
• build: update eslint (major) (@angular-eslint/eslint-plugin, @angular-eslint/eslint-plugin-template, @angular-eslint/template-parser, eslint-plugin-jsdoc)

---

• Check this box to trigger a request for Renovate to run again on this repository

Module federation

Discussed in https://github.com/Angular-RU/angular-ru-sdk/discussions/632

^{Originally posted by splincode May 15, 2021}
https://github.com/benorama/mfe-advanced-demo

🚀[FEATURE]: https://eslint.org/docs/rules/class-methods-use-this

https://eslint.org/docs/rules/class-methods-use-this

Roadmap 2021

ROADMAP

Q1 Jan - Mar

Features or fixes

• Support Angular 10/11

Q2 Apr - Jun

Features or fixes

• Support Jest@27, ts-jest@27, jest-preset-angular@9
• Support Angular 12

Q3 Jul - Sep

Feature

BREAKING CHANGES

• Rename packages for align version with Angular:
  • @angular-ru/common -> move to@angular-ru/cdk
    • @angular-ru/http -> move to @angular-ru/cdk/http
    • @angular-ru/logger -> move to @angular-ru/cdk/logger
    • @angular-ru/flex-layout -> move to @angular-ru/cdk/flex-layout
    • @angular-ru/stream -> move to @angular-ru/cdk/stream
    • @angular-ru/webscoket -> move to @angular-ru/cdk/websocket
    • @angular-ru/ng-excel-builder -> move to @angular-ru/cdk/excel
  • Create common package to enterprise configs package
    • @angular-ru/tsconfig -> move to @angular-ru/configs/tsconfig.json
    • @angular-ru/eslint-config -> move to @angular-ru/configs/eslint
    • @angular-ru/renovate-config -> move to @angular-ru/configs/renovate
    • @angular-ru/commitlint-config -> move to @angular-ru/configs/commitlint
    • @angular-ru/prettier-config -> move to @angular-ru/configs/prettier
  • @angular-ru/eslint-plugin -> move to @angular-ru/eslint-plugin-enterprise
  • @angular-ru/jest-utils -> move to @angular-ru/jest-builder
  • @angular-ru/ng-table-builder -> move to @angular-ru/table-grid
  • @angular-ru/build-tools -> move to @angular-ru/dev-dependencies

CI

• Add integration with Nx Platform
• Remove ng-packagr builder, prefer @angular-devkit/build-angular -
  #628
• Improved CI: should be checked is included package name in commit message

Documentation

• Improved documentation with Docusaurus

Features or fixes

• Improved HTTP statuses - #466
• Create new package @angular-ru/ngxs-data-plugin
• Create new package @angular-ru/cdk/material-extensions -
  #516
• Add eslint-plugin-unicorn - #13
• Add @angular-eslint/sort-ngmodule-metadata-arrays - #523
• Add eslint-plugin-rxjs - #370
• Add prefer-template - #63

Q4 Oct - Dec

Coming soon

🚀[FEATURE]: improved typings

https://blog.angular.io/with-best-practices-from-the-start-d64881a16de8

MyBug

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

🚀[FEATURE]: mouseStayed directive

Directive that emits event when mouse stayed at the element for some time.

example realization: https://stackblitz.com/edit/angular-mouse-stayed

🚀[FEATURE]: use HttpStatusCode from angular/common/http