feat(docs): design-tokens page (#DS-2997) (koobiq#468)

Author: NikGurev

apps/docs/src/app/components/code-snippet/code-snippet.ts

@@ -0,0 +1,28 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { Directive, ElementRef, inject, Input } from '@angular/core';
+import { KbqToastService } from '@koobiq/components/toast';
+
+@Directive({
+    standalone: true,
+    selector: '[kbq-code-snippet]',
+    host: {
+        class: 'kbq-docs-code-snippet',
+        '(click)': 'copy()'
+    }
+})
+export class CodeSnippet {
+    @Input() tooltip = 'Скопировать';
+
+    private clipboard = inject(Clipboard);
+    private toastService = inject(KbqToastService);
+    private element = inject(ElementRef);
+
+    copy() {
+        this.clipboard.copy(this.element.nativeElement.textContent);
+        this.showSuccessfullyCopiedToast();
+    }
+
+    private showSuccessfullyCopiedToast() {
+        this.toastService.show({ style: 'success', title: 'Скопировано' });
+    }
+}

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

@@ -5,6 +5,7 @@ import {
     Component,
     Directive,
     ElementRef,
+    inject,
     NgZone,
     OnDestroy,
     OnInit,
@@ -16,7 +17,7 @@ import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, NavigationStart, Router, UrlSegment } from '@angular/router';
 import { KbqModalService } from '@koobiq/components/modal';
 import { KbqSidepanelService } from '@koobiq/components/sidepanel';
-import { Subject, filter } from 'rxjs';
+import { filter, Subject } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AnchorsComponent } from '../anchors/anchors.component';
 import { DocItem, DocumentationItems } from '../documentation-items';
@@ -83,6 +84,12 @@ export class ComponentViewerComponent extends CdkScrollable implements OnInit, O
 
 @Directive()
 export class BaseOverviewComponent {
+    protected routeActivated = inject(ActivatedRoute);
+    protected docItems = inject(DocumentationItems);
+    protected router = inject(Router);
+    protected changeDetectorRef = inject(ChangeDetectorRef);
+    protected titleService = inject(Title);
+
     readonly animationDone = new Subject<boolean>();
 
     animationState: 'fadeIn' | 'fadeOut' = 'fadeOut';
@@ -103,13 +110,7 @@ export class BaseOverviewComponent {
         return `docs-content/overviews/components/${this.componentDocItem.id}.html`;
     }
 
-    constructor(
-        protected routeActivated: ActivatedRoute,
-        protected docItems: DocumentationItems,
-        protected router: Router,
-        protected changeDetectorRef: ChangeDetectorRef,
-        protected titleService: Title
-    ) {
+    constructor() {
         // Listen to changes on the current route for the doc id (e.g. button/checkbox) and the
         // parent route for the section (koobiq/cdk).
         this.routeActivated
@@ -120,7 +121,7 @@ export class BaseOverviewComponent {
             )
             .subscribe((d) => (this.componentDocItem = d!));
 
-        this.currentUrl = this.getRoute(router.url);
+        this.currentUrl = this.getRoute(this.router.url);
 
         this.router.events
             .pipe(
@@ -179,7 +180,7 @@ export class BaseOverviewComponent {
     };
 }
 
-const animations = [
+export const animations = [
     trigger('fadeInOut', [
         state('fadeIn', style({ opacity: 1 })),
         state('fadeOut', style({ opacity: 0 })),
@@ -208,14 +209,8 @@ export class CdkOverviewComponent extends BaseOverviewComponent {
         return `docs-content/cdk/${this.componentDocItem.id}.html`;
     }
 
-    constructor(
-        routeActivated: ActivatedRoute,
-        docItems: DocumentationItems,
-        router: Router,
-        ref: ChangeDetectorRef,
-        titleService: Title
-    ) {
-        super(routeActivated, docItems, router, ref, titleService);
+    constructor() {
+        super();
     }
 }
 
@@ -236,17 +231,14 @@ export class ComponentOverviewComponent extends BaseOverviewComponent {
             return null;
         }
 
+        console.log(this.componentDocItem);
+        console.log(this.currentUrl);
+
         return `docs-content/overviews/${this.componentDocItem.id}.html`;
     }
 
-    constructor(
-        routeActivated: ActivatedRoute,
-        docItems: DocumentationItems,
-        router: Router,
-        ref: ChangeDetectorRef,
-        titleService: Title
-    ) {
-        super(routeActivated, docItems, router, ref, titleService);
+    constructor() {
+        super();
     }
 }
 
@@ -270,14 +262,8 @@ export class ComponentApiComponent extends BaseOverviewComponent {
         return `docs-content/api-docs/components-${this.componentDocItem.apiId}.html`;
     }
 
-    constructor(
-        routeActivated: ActivatedRoute,
-        docItems: DocumentationItems,
-        router: Router,
-        ref: ChangeDetectorRef,
-        titleService: Title
-    ) {
-        super(routeActivated, docItems, router, ref, titleService);
+    constructor() {
+        super();
     }
 }
 
@@ -301,14 +287,8 @@ export class CdkApiComponent extends BaseOverviewComponent {
         return `docs-content/api-docs/cdk-${this.componentDocItem.id}.html`;
     }
 
-    constructor(
-        routeActivated: ActivatedRoute,
-        docItems: DocumentationItems,
-        router: Router,
-        ref: ChangeDetectorRef,
-        titleService: Title
-    ) {
-        super(routeActivated, docItems, router, ref, titleService);
+    constructor() {
+        super();
     }
 }
 
@@ -332,13 +312,7 @@ export class ComponentExamplesComponent extends BaseOverviewComponent {
         return `docs-content/examples/examples.${this.componentDocItem.id}.html`;
     }
 
-    constructor(
-        routeActivated: ActivatedRoute,
-        docItems: DocumentationItems,
-        router: Router,
-        ref: ChangeDetectorRef,
-        titleService: Title
-    ) {
-        super(routeActivated, docItems, router, ref, titleService);
+    constructor() {
+        super();
     }
 }

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

@@ -9,6 +9,7 @@ import { KbqSidepanelService } from '@koobiq/components/sidepanel';
 import { KbqTabsModule } from '@koobiq/components/tabs';
 import { CopyButtonModule } from 'src/app/components/copy-button/copy-button';
 import { AnchorsModule } from '../anchors/anchors.module';
+import { CodeSnippet } from '../code-snippet/code-snippet';
 import { DocExampleViewerModule } from '../doc-example-viewer/doc-example-viewer-module';
 import { DocsLiveExampleModule } from '../docs-live-example/docs-live-example-module';
 import { DocumentationItems } from '../documentation-items';
@@ -40,7 +41,8 @@ import {
         SidenavModule,
         NavbarModule,
         KbqIconModule,
-        KbqLinkModule
+        KbqLinkModule,
+        CodeSnippet
     ],
     declarations: [
         ComponentViewerComponent,

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

@@ -0,0 +1,88 @@
+import { ScrollDispatcher } from '@angular/cdk/overlay';
+import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { KbqModalService } from '@koobiq/components/modal';
+import { KbqSidepanelService } from '@koobiq/components/sidepanel';
+import { KbqTabsModule } from '@koobiq/components/tabs';
+import { AnchorsModule } from '../anchors/anchors.module';
+import { CodeSnippet } from '../code-snippet/code-snippet';
+import { ComponentViewerComponent } from '../component-viewer/component-viewer.component';
+import { DocsLiveExampleModule } from '../docs-live-example/docs-live-example-module';
+import { DocumentationItems } from '../documentation-items';
+import { DocStates } from '../doс-states';
+import { NavbarModule } from '../navbar';
+import { SidenavModule } from '../sidenav/sidenav.module';
+
+@Component({
+    standalone: true,
+    selector: 'docs-component-viewer',
+    template: `
+        <div class="docs-component-header">
+            <div class="docs-component-name" docs-header>
+                {{ docItem.name }}
+            </div>
+            <div class="docs-component-navbar layout-padding-top-s">
+                <nav [tabNavPanel]="tabNavPanel" kbqTabNavBar>
+                    @for (link of links; track link) {
+                        <a [routerLink]="link.value" kbqTabLink routerLinkActive="kbq-selected">
+                            {{ link.viewValue }}
+                        </a>
+                    }
+                </nav>
+            </div>
+        </div>
+
+        <div #tabNavPanel="kbqTabNavPanel" kbqTabNavPanel>
+            <router-outlet />
+        </div>
+    `,
+    styleUrls: ['../component-viewer/component-viewer.scss'],
+    host: {
+        class: 'docs-component-viewer kbq-scrollbar',
+        '[attr.data-docsearch-category]': 'docCategoryName'
+    },
+    imports: [
+        AnchorsModule,
+        KbqTabsModule,
+        RouterModule,
+        DocsLiveExampleModule,
+        SidenavModule,
+        NavbarModule,
+        CodeSnippet
+    ],
+    encapsulation: ViewEncapsulation.None
+})
+export class DesignTokensViewer extends ComponentViewerComponent implements OnInit, OnDestroy {
+    links = [
+        { viewValue: 'Цвета', value: 'colors' },
+        { viewValue: 'Тени', value: 'shadows' },
+        { viewValue: 'Скругления', value: 'border-radius' },
+        { viewValue: 'Размеры', value: 'sizes' },
+        { viewValue: 'Типографика', value: 'tokens-typography' },
+        { viewValue: 'Инженерная палитра', value: 'palette' }
+    ];
+
+    constructor(
+        routeActivated: ActivatedRoute,
+        router: Router,
+        docItems: DocumentationItems,
+        sidepanelService: KbqSidepanelService,
+        modalService: KbqModalService,
+        docStates: DocStates,
+        elementRef: ElementRef<HTMLElement>,
+        scrollDispatcher: ScrollDispatcher,
+        ngZone: NgZone
+    ) {
+        super(
+            routeActivated,
+            router,
+            docItems,
+            sidepanelService,
+            modalService,
+            docStates,
+            elementRef,
+            scrollDispatcher,
+            ngZone
+        );
+    }
+}

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

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { AnchorsModule } from '../anchors/anchors.module';
+import { animations, BaseOverviewComponent } from '../component-viewer/component-viewer.component';
+import { DocsLiveExampleModule } from '../docs-live-example/docs-live-example-module';
+
+@Component({
+    standalone: true,
+    selector: 'docs-design-tokens-overview',
+    templateUrl: '../component-viewer/component-overview.template.html',
+    host: {
+        class: 'component-overview',
+        '[@fadeInOut]': 'animationState',
+        '(@fadeInOut.done)': 'animationDone.next(true)'
+    },
+    animations,
+    imports: [
+        AnchorsModule,
+        DocsLiveExampleModule
+    ]
+})
+export class TokensOverview extends BaseOverviewComponent {
+    get docItemUrl(): string | null {
+        if (!this.componentDocItem) return null;
+
+        const currentTokensSection = this.router.parseUrl(this.router.url).root.children.primary.segments.pop()?.path;
+
+        return `docs-content/overviews/${currentTokensSection}.html`;
+    }
+
+    constructor() {
+        super();
+    }
+}

apps/docs/src/app/components/docs-live-example/docs-live-example-module.ts

@@ -6,6 +6,7 @@ import { KbqCodeBlockModule } from '@koobiq/components/code-block';
 import { KbqLinkModule } from '@koobiq/components/link';
 import { KbqTabsModule } from '@koobiq/components/tabs';
 import { KbqToolTipModule } from '@koobiq/components/tooltip';
+import { CodeSnippet } from '../code-snippet/code-snippet';
 import { CopyButtonModule } from '../copy-button/copy-button';
 import { DocsExampleSource } from '../docs-example-source/docs-example-source';
 import { DocsLiveExampleViewer } from '../docs-live-example-viewer/docs-live-example-viewer';
@@ -23,7 +24,8 @@ import { DocsLiveExample } from './docs-live-example';
         CopyButtonModule,
         PortalModule,
         KbqCodeBlockModule,
-        NgComponentOutlet
+        NgComponentOutlet,
+        CodeSnippet
     ],
     declarations: [DocsLiveExample, DocsLiveExampleViewer, DocsExampleSource],
     exports: [DocsLiveExample, DocsLiveExampleViewer, DocsExampleSource]

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

@@ -32,13 +32,17 @@ import { DocsLiveExampleViewer } from '../docs-live-example-viewer/docs-live-exa
                 [canLoad]="false"
             />
         </ng-template>
+        <ng-template #codeSnippet cdkPortal let-htmlContent>
+            <span class="kbq-mono-normal" [innerHTML]="htmlContent" kbq-code-snippet kbqTooltip="Скопировать"></span>
+        </ng-template>
     `,
     host: {
         class: 'docs-live-example kbq-markdown'
     }
 })
 export class DocsLiveExample implements OnDestroy {
     @ViewChild(CdkPortal) codeTemplate: CdkPortal;
+    @ViewChild('codeSnippet', { read: CdkPortal }) codeSnippetTemplate: CdkPortal;
     /** The URL of the document to display. */
     @Input()
     set documentUrl(url: string) {
@@ -119,6 +123,7 @@ export class DocsLiveExample implements OnDestroy {
 
         this.loadComponents('koobiq-docs-example', DocsLiveExampleViewer);
         this.initCodeBlocks();
+        this.initCodeSnippets();
 
         // Resolving and creating components dynamically in Angular happens synchronously, but since
         // we want to emit the output if the components are actually rendered completely, we wait
@@ -164,6 +169,18 @@ export class DocsLiveExample implements OnDestroy {
         });
     }
 
+    private initCodeSnippets() {
+        const selector = 'kbq-code-snippet';
+        this.nativeElement.querySelectorAll(`[${selector}]`).forEach((element: Element) => {
+            const { innerHTML, textContent } = element;
+            element.innerHTML = '';
+
+            const portalHost = new DomPortalOutlet(element, this.componentFactoryResolver, this.appRef, this.injector);
+            this.codeSnippetTemplate.attach(portalHost, { $implicit: innerHTML, textContent });
+            this.portalHosts.push(portalHost);
+        });
+    }
+
     private clearLiveExamples() {
         this.portalHosts.forEach((h) => h.dispose());
         this.portalHosts = [];