style(docs): enable eslint naming-convention rule (#DS-2920)

.eslintrc.js

@@ -19,8 +19,7 @@ const makeNamingConventionOptions = (prefix) => {
         {
             selector: 'variable',
             modifiers: ['exported'],
-            format: ['camelCase', 'UPPER_CASE'],
-            leadingUnderscore: 'allow',
+            format: ['StrictPascalCase', 'UPPER_CASE'],
             prefix: [prefix, `${prefix.toUpperCase()}_`]
         },
 
@@ -279,7 +278,12 @@ const appDocsRules = {
             }
         ],
         '@angular-eslint/prefer-standalone': 1,
-        '@angular-eslint/use-component-selector': 1
+        '@angular-eslint/use-component-selector': 1,
+
+        // plugin:@typescript-eslint
+        '@typescript-eslint/naming-convention': [
+            1,
+            ...makeNamingConventionOptions('docs')]
     }
 };
 

apps/docs/src/app/app.component.ts

@@ -6,7 +6,7 @@ import { KbqDividerModule } from '@koobiq/components/divider';
 import { map, Observable } from 'rxjs';
 import { DocsNavbarComponent } from './components/navbar/navbar.component';
 import { DocsSidenavComponent } from './components/sidenav/sidenav.component';
-import { DocsNavbarState, DocStates } from './services/doc-states';
+import { DocsDocStates, DocsNavbarState } from './services/doc-states';
 
 @Component({
     standalone: true,
@@ -56,9 +56,9 @@ import { DocsNavbarState, DocStates } from './services/doc-states';
     ]
 })
 export class DocsAppComponent {
-    readonly docStates = inject(DocStates);
+    readonly docStates = inject(DocsDocStates);
 
     readonly opened$: Observable<boolean> = this.docStates.navbarMenu.pipe(
-        map((state) => state === DocsNavbarState.opened)
+        map((state) => state === DocsNavbarState.Opened)
     );
 }

apps/docs/src/app/components/anchors/anchors.component.html

@@ -7,7 +7,7 @@
             kbq-title
             class="docs-anchors__link"
             [fragment]="anchor.href"
-            [kbqPlacement]="PopUpPlacements.Left"
+            [kbqPlacement]="popUpPlacements.Left"
             [routerLink]="this.pathName"
             (click)="scrollIntoView(anchor)"
         >

apps/docs/src/app/components/anchors/anchors.component.ts

@@ -12,10 +12,10 @@ import {
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, NavigationEnd, Router, RouterLink } from '@angular/router';
+import { PopUpPlacements } from '@koobiq/components/core';
 import { KbqTitleModule } from '@koobiq/components/title';
 import { filter, fromEvent, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
-import { PopUpPlacements } from '../../../../../../packages/components/core';
 
 interface KbqDocsAnchor {
     href: string;
@@ -252,5 +252,5 @@ export class DocsAnchorsComponent implements OnDestroy, OnInit {
         this.ref.detectChanges();
     }
 
-    protected readonly PopUpPlacements = PopUpPlacements;
+    protected readonly popUpPlacements = PopUpPlacements;
 }

apps/docs/src/app/components/component-viewer/component-viewer.component.ts

@@ -20,8 +20,8 @@ import { KbqTabsModule } from '@koobiq/components/tabs';
 import { filter } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { DocsLocaleState } from 'src/app/services/locale';
-import { DocStates } from '../../services/doc-states';
-import { DocItem, DocumentationItems } from '../../services/documentation-items';
+import { DocsDocStates } from '../../services/doc-states';
+import { DocsDocItem, DocsDocumentationItems } from '../../services/documentation-items';
 import { DocsAnchorsComponent } from '../anchors/anchors.component';
 import { DocsExampleViewerComponent } from '../example-viewer/example-viewer';
 import { DocsLiveExampleComponent } from '../live-example/docs-live-example';
@@ -52,15 +52,15 @@ import { DocsRegisterHeaderDirective } from '../register-header/register-header.
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DocsComponentViewerComponent extends DocsLocaleState {
-    docItem: DocItem;
+    docItem: DocsDocItem;
     docCategory: string;
 
     private readonly activatedRoute = inject(ActivatedRoute);
     private readonly router = inject(Router);
-    private readonly docItems = inject(DocumentationItems);
+    private readonly docItems = inject(DocsDocumentationItems);
     private readonly sidepanelService = inject(KbqSidepanelService);
     private readonly modalService = inject(KbqModalService);
-    private readonly docStates = inject(DocStates);
+    private readonly docStates = inject(DocsDocStates);
     private readonly elementRef = inject(ElementRef);
 
     constructor() {
@@ -90,13 +90,13 @@ export class DocsComponentViewerComponent extends DocsLocaleState {
 }
 
 @Directive()
-export class BaseOverviewComponent extends DocsLocaleState {
+export class DocsOverviewComponentBase extends DocsLocaleState {
     private readonly activatedRoute = inject(ActivatedRoute);
-    private readonly docItems = inject(DocumentationItems);
+    private readonly docItems = inject(DocsDocumentationItems);
     private readonly changeDetectorRef = inject(ChangeDetectorRef);
     private readonly titleService = inject(Title);
 
-    componentDocItem: DocItem | null = null;
+    componentDocItem: DocsDocItem | null = null;
 
     @ViewChild(DocsAnchorsComponent, { static: false }) private readonly anchors: DocsAnchorsComponent;
 
@@ -159,7 +159,7 @@ export class BaseOverviewComponent extends DocsLocaleState {
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DocsCdkOverviewComponent extends BaseOverviewComponent {
+export class DocsCdkOverviewComponent extends DocsOverviewComponentBase {
     get docItemUrl(): string | null {
         if (!this.componentDocItem) {
             return null;
@@ -185,7 +185,7 @@ export class DocsCdkOverviewComponent extends BaseOverviewComponent {
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DocsComponentOverviewComponent extends BaseOverviewComponent {
+export class DocsComponentOverviewComponent extends DocsOverviewComponentBase {
     get docItemUrl(): string | null {
         if (!this.componentDocItem) {
             return null;
@@ -211,7 +211,7 @@ export class DocsComponentOverviewComponent extends BaseOverviewComponent {
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DocsComponentApiComponent extends BaseOverviewComponent {
+export class DocsComponentApiComponent extends DocsOverviewComponentBase {
     get docItemUrl(): string | null {
         if (!this.componentDocItem) {
             return null;
@@ -237,7 +237,7 @@ export class DocsComponentApiComponent extends BaseOverviewComponent {
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DocsCdkApiComponent extends BaseOverviewComponent {
+export class DocsCdkApiComponent extends DocsOverviewComponentBase {
     get docItemUrl(): string | null {
         if (!this.componentDocItem) {
             return null;
@@ -273,7 +273,7 @@ export class DocsCdkApiComponent extends BaseOverviewComponent {
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DocsComponentExamplesComponent extends BaseOverviewComponent {
+export class DocsComponentExamplesComponent extends DocsOverviewComponentBase {
     get docItemUrl(): string | null {
         if (!this.componentDocItem) {
             return null;

apps/docs/src/app/components/design-tokens-viewers/design-tokens-viewer.ts

@@ -40,7 +40,7 @@ import { DocsRegisterHeaderDirective } from '../register-header/register-header.
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DesignTokensViewer extends DocsLocaleState {
+export class DocsDesignTokensViewer extends DocsLocaleState {
     readonly links: Array<{ title: Record<DocsLocale, string>; value: string }> = [
         {
             title: {

apps/docs/src/app/components/design-tokens-viewers/tokens-overview.ts

@@ -3,7 +3,7 @@ import { Router } from '@angular/router';
 import { KbqDividerModule } from '@koobiq/components/divider';
 import { KbqLinkModule } from '@koobiq/components/link';
 import { DocsAnchorsComponent } from '../anchors/anchors.component';
-import { BaseOverviewComponent } from '../component-viewer/component-viewer.component';
+import { DocsOverviewComponentBase } from '../component-viewer/component-viewer.component';
 import { DocsLiveExampleComponent } from '../live-example/docs-live-example';
 
 @Component({
@@ -21,7 +21,7 @@ import { DocsLiveExampleComponent } from '../live-example/docs-live-example';
     },
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class TokensOverview extends BaseOverviewComponent {
+export class DocsTokensOverview extends DocsOverviewComponentBase {
     private readonly router = inject(Router);
 
     get docItemUrl(): string | null {

apps/docs/src/app/components/docsearch/docsearch.directive.spec.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DocsearchDirective } from './docsearch.directive';
+import { DocsDocsearchDirective } from './docsearch.directive';
 
 @Component({
     standalone: true,
     template: '<docs-docsearch />',
-    imports: [DocsearchDirective]
+    imports: [DocsDocsearchDirective]
 })
 class TestApp {}
 
@@ -26,7 +26,7 @@ const getDocsearchModal = (): HTMLDivElement => {
     return document.getElementsByClassName('DocSearch-Modal')[0] as HTMLDivElement;
 };
 
-describe(DocsearchDirective.name, () => {
+describe(DocsDocsearchDirective.name, () => {
     it(`should render docsearch button`, async () => {
         render();
         expect(getDocsearchButton()).toBeInstanceOf(HTMLButtonElement);

apps/docs/src/app/components/docsearch/docsearch.directive.ts

@@ -2,17 +2,17 @@ import { afterNextRender, DestroyRef, Directive, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import docsearch from '@docsearch/js';
 import { isMac } from '@koobiq/components/core';
-import { DocsLocaleState, isRuLocale } from '../../services/locale';
+import { docsIsRuLocale, DocsLocaleState } from '../../services/locale';
 
-type _DocSearchProps = Parameters<typeof docsearch>[0];
+type DocsDocsearchProps = Parameters<typeof docsearch>[0];
 
 const SELECTOR = 'docs-docsearch';
 
 const HOST = 'koobiq.io';
 
 const PROTOCOL = 'https:';
 
-const CONFIG: _DocSearchProps = {
+const CONFIG: DocsDocsearchProps = {
     container: SELECTOR,
     appId: '7N2W9AKEM6',
     apiKey: '0f0df042e7b349df5cb381e72f268b4d',
@@ -30,7 +30,7 @@ const CONFIG: _DocSearchProps = {
         class: 'layout-align-center-center'
     }
 })
-export class DocsearchDirective extends DocsLocaleState {
+export class DocsDocsearchDirective extends DocsLocaleState {
     /** should transform item URL to work docsearch on DEV stand */
     private readonly shouldTransformItemURL = location.host !== HOST || location.protocol !== PROTOCOL;
 
@@ -46,7 +46,7 @@ export class DocsearchDirective extends DocsLocaleState {
 
     private initDocsearch(): void {
         this.docsLocaleService.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((locale) => {
-            const _isRuLocale = isRuLocale(locale);
+            const _isRuLocale = docsIsRuLocale(locale);
 
             docsearch({
                 ...CONFIG,
@@ -61,7 +61,7 @@ export class DocsearchDirective extends DocsLocaleState {
         });
     }
 
-    private readonly transformItems: _DocSearchProps['transformItems'] = (items) => {
+    private readonly transformItems: DocsDocsearchProps['transformItems'] = (items) => {
         if (this.shouldTransformItemURL) {
             items = items.map((item) => {
                 item.url = item.url.replace(HOST, location.host);
@@ -84,7 +84,7 @@ export class DocsearchDirective extends DocsLocaleState {
         });
     };
 
-    private readonly translations = (isRuLocale: boolean): _DocSearchProps['translations'] => {
+    private readonly translations = (isRuLocale: boolean): DocsDocsearchProps['translations'] => {
         let buttonText = isRuLocale ? 'Поиск' : 'Search';
 
         buttonText += isMac() ? ' ⌘K' : ' Ctrl+K';

apps/docs/src/app/components/example-viewer/example-viewer.ts

@@ -21,7 +21,7 @@ import { shareReplay, take, tap } from 'rxjs/operators';
 import { DocsLiveExampleViewerComponent } from '../live-example-viewer/docs-live-example-viewer';
 
 @Injectable({ providedIn: 'root' })
-export class DocFetcher {
+export class DocsDocFetcher {
     private cache: Record<string, Observable<string>> = {};
 
     constructor(private http: HttpClient) {}
@@ -80,7 +80,7 @@ export class DocsExampleViewerComponent implements OnDestroy {
         private viewContainerRef: ViewContainerRef,
         private ngZone: NgZone,
         private domSanitizer: DomSanitizer,
-        private docFetcher: DocFetcher
+        private docFetcher: DocsDocFetcher
     ) {}
 
     ngOnDestroy() {

apps/docs/src/app/components/footer/footer.component.ts

@@ -8,8 +8,8 @@ import { KbqLinkModule } from '@koobiq/components/link';
 import { distinctUntilKeyChanged } from 'rxjs';
 import { DocsLocale } from 'src/app/constants/locale';
 import { DocsLocaleState } from 'src/app/services/locale';
-import { koobiqVersion } from '../../version';
-import { NavbarProperty } from '../navbar/navbar-property';
+import { docsKoobiqVersion } from '../../version';
+import { DocsNavbarProperty } from '../navbar/navbar-property';
 import { DocsVersionPickerDirective } from '../version-picker/version-picker.directive';
 
 @Component({
@@ -33,9 +33,9 @@ export class DocsFooterComponent extends DocsLocaleState {
     private readonly localeService = inject(KBQ_LOCALE_SERVICE);
     private readonly location = inject(Location);
 
-    readonly version = koobiqVersion;
-    readonly examplesLanguageSwitch: NavbarProperty;
-    readonly docsLanguageSwitch: NavbarProperty;
+    readonly version = docsKoobiqVersion;
+    readonly examplesLanguageSwitch: DocsNavbarProperty;
+    readonly docsLanguageSwitch: DocsNavbarProperty;
 
     get selectedLanguages(): string {
         if (this.docsLanguageSwitch.currentValue.value === this.examplesLanguageSwitch.currentValue.value) {
@@ -48,7 +48,7 @@ export class DocsFooterComponent extends DocsLocaleState {
     constructor() {
         super();
 
-        this.docsLanguageSwitch = new NavbarProperty({
+        this.docsLanguageSwitch = new DocsNavbarProperty({
             property: 'docs_language',
             data: [
                 {
@@ -65,7 +65,7 @@ export class DocsFooterComponent extends DocsLocaleState {
             updateSelected: true
         });
 
-        this.examplesLanguageSwitch = new NavbarProperty({
+        this.examplesLanguageSwitch = new DocsNavbarProperty({
             property: 'docs_examples-language',
             data: this.localeService.locales.items
                 // exclude fa-IR (DS-2219)

apps/docs/src/app/components/icons-viewer/icon-preview-modal/icon-preview-modal.component.ts

@@ -23,7 +23,7 @@ import { KbqModalModule, KbqModalRef } from '@koobiq/components/modal';
 import { KbqSelectModule } from '@koobiq/components/select';
 import { KbqToastService } from '@koobiq/components/toast';
 import { KbqToolTipModule } from '@koobiq/components/tooltip';
-import { IconItem } from 'src/app/services/icon-items';
+import { DocsIconItem } from 'src/app/services/icon-items';
 import { DocsLocaleState } from 'src/app/services/locale';
 import { DocsCodeSnippetDirective } from '../../code-snippet/code-snippet';
 
@@ -52,9 +52,9 @@ export class DocsIconPreviewModalComponent extends DocsLocaleState implements Af
     @ViewChild('iconPreview') iconPreview: KbqIcon;
     @ViewChild('wordExample') wordExample: ElementRef;
 
-    @Input() iconItem: IconItem;
+    @Input() iconItem: DocsIconItem;
 
-    SVGLink: string;
+    svgLink: string;
 
     readonly themePalettes = [
         KbqComponentColors.Theme,
@@ -81,15 +81,15 @@ export class DocsIconPreviewModalComponent extends DocsLocaleState implements Af
     });
 
     ngAfterViewInit(): void {
-        this.SVGLink = `assets/SVGIcons/${this.iconItem.id}.svg`;
+        this.svgLink = `assets/SVGIcons/${this.iconItem.id}.svg`;
     }
 
     onTagSelect(tag: string): void {
         this.modal.close(tag);
     }
 
     copySVG(): void {
-        this.httpClient.get(this.SVGLink, { responseType: 'text' }).subscribe((data) => {
+        this.httpClient.get(this.svgLink, { responseType: 'text' }).subscribe((data) => {
             this.clipboard.copy(data);
             this.showSuccessfullyCopiedToast();
         });

apps/docs/src/app/components/icons-viewer/icon-preview-modal/icon-preview-modal.template.html

@@ -35,7 +35,7 @@
         </kbq-form-field>
 
         <div class="docs-icon-preview-modal__buttons">
-            <a download href="{{ SVGLink }}" kbq-button>
+            <a download href="{{ svgLink }}" kbq-button>
                 <i kbq-icon="kbq-arrow-down-to-line_16"></i>
                 {{ isRuLocale() ? 'Скачать SVG' : 'Download SVG' }}
             </a>