chore(docs): code-snippet refactoring

angular.json

@@ -69,7 +69,7 @@
                             }
                         ],
                         "stylePreprocessorOptions": {
-                            "includePaths": ["packages"]
+                            "includePaths": ["dist", "apps/docs/src"]
                         },
                         "styles": [
                             "apps/docs/src/main.scss"

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

@@ -1,20 +1,17 @@
 import { Clipboard } from '@angular/cdk/clipboard';
-import { Component, ElementRef, inject } from '@angular/core';
+import { Directive, ElementRef, inject } from '@angular/core';
 import { KbqToastService } from '@koobiq/components/toast';
 import { DocsLocaleState } from 'src/app/services/locale';
 
-@Component({
+@Directive({
     standalone: true,
-    template: ``,
-    // @TODO should be renamed to `docsCodeSnippet`
-    // eslint-disable-next-line @angular-eslint/component-selector
-    selector: '[kbq-code-snippet]',
+    selector: '[docsCodeSnippet]',
     host: {
         class: 'docs-code-snippet',
         '(click)': 'copy()'
     }
 })
-export class DocsCodeSnippetComponent extends DocsLocaleState {
+export class DocsCodeSnippetDirective extends DocsLocaleState {
     private readonly clipboard = inject(Clipboard);
     private readonly toastService = inject(KbqToastService);
     private readonly elementRef = inject(ElementRef);

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

@@ -5,9 +5,11 @@ import {
     AfterViewInit,
     ChangeDetectionStrategy,
     Component,
+    computed,
     ElementRef,
     inject,
     Input,
+    model,
     ViewChild,
     ViewEncapsulation
 } from '@angular/core';
@@ -23,6 +25,7 @@ import { KbqToastService } from '@koobiq/components/toast';
 import { KbqToolTipModule } from '@koobiq/components/tooltip';
 import { IconItem } from 'src/app/services/icon-items';
 import { DocsLocaleState } from 'src/app/services/locale';
+import { DocsCodeSnippetDirective } from '../../code-snippet/code-snippet';
 
 @Component({
     standalone: true,
@@ -36,7 +39,8 @@ import { DocsLocaleState } from 'src/app/services/locale';
         KbqModalModule,
         KbqDlModule,
         KbqToolTipModule,
-        KbqBadgeModule
+        KbqBadgeModule,
+        DocsCodeSnippetDirective
     ],
     selector: 'docs-icon-preview-modal-component',
     templateUrl: './icon-preview-modal.template.html',
@@ -61,15 +65,21 @@ export class DocsIconPreviewModalComponent extends DocsLocaleState implements Af
         KbqComponentColors.Warning
     ];
 
-    selectedColorTheme: KbqComponentColors | string = KbqComponentColors.Contrast;
-
     readonly componentColors = KbqComponentColors;
 
     private readonly clipboard = inject(Clipboard);
     private readonly toastService = inject(KbqToastService);
     private readonly httpClient = inject(HttpClient);
     readonly modal = inject(KbqModalRef);
 
+    readonly selectedColorTheme = model<KbqComponentColors | string>(KbqComponentColors.Contrast);
+    readonly codeExampleText = computed(() => {
+        const selectedColorTheme = this.selectedColorTheme();
+        const color = selectedColorTheme === KbqComponentColors.Contrast ? '' : ` [color]="'${selectedColorTheme}'"`;
+
+        return `<i kbq-icon="${this.iconItem.cssClass}"${color}></i>`;
+    });
+
     ngAfterViewInit(): void {
         this.SVGLink = `assets/SVGIcons/${this.iconItem.id}.svg`;
     }
@@ -78,16 +88,6 @@ export class DocsIconPreviewModalComponent extends DocsLocaleState implements Af
         this.modal.close(tag);
     }
 
-    copyCodeExample(): void {
-        this.clipboard.copy(this.getCodeExampleText());
-        this.showSuccessfullyCopiedToast();
-    }
-
-    copyWordExample(): void {
-        this.clipboard.copy(this.wordExample.nativeElement.innerText);
-        this.showSuccessfullyCopiedToast();
-    }
-
     copySVG(): void {
         this.httpClient.get(this.SVGLink, { responseType: 'text' }).subscribe((data) => {
             this.clipboard.copy(data);
@@ -107,13 +107,6 @@ export class DocsIconPreviewModalComponent extends DocsLocaleState implements Af
         return color ? this.parseColor(color)?.toUpperCase() : '';
     }
 
-    getCodeExampleText(): string {
-        const color =
-            this.selectedColorTheme === KbqComponentColors.Contrast ? '' : ` [color]="'${this.selectedColorTheme}'"`;
-
-        return `<i kbq-icon="${this.iconItem.cssClass}"${color}></i>`;
-    }
-
     getUnicode(): string {
         return `&#${this.iconItem.code};`;
     }

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

@@ -7,7 +7,7 @@
 
 <kbq-modal-body>
     <div class="docs-icon-preview-modal__preview-area">
-        <i #iconPreview kbq-icon [color]="selectedColorTheme" [ngClass]="iconItem.cssClass"></i>
+        <i #iconPreview kbq-icon [color]="selectedColorTheme()" [ngClass]="iconItem.cssClass"></i>
     </div>
     <div class="docs-icon-preview-modal__content">
         <kbq-form-field>
@@ -16,9 +16,9 @@
                     <i
                         kbq-icon="kbq-circle-xs_16"
                         class="docs-icon-preview-modal__palette-icon"
-                        [color]="selectedColorTheme"
+                        [color]="selectedColorTheme()"
                     ></i>
-                    {{ selectedColorTheme | titlecase }}
+                    {{ selectedColorTheme() | titlecase }}
                 </kbq-select-trigger>
 
                 @for (paletteName of themePalettes; track paletteName) {
@@ -51,13 +51,17 @@
             <kbq-dd>{{ iconItem.size }}px</kbq-dd>
 
             <kbq-dt>HTML</kbq-dt>
-            <kbq-dd kbqTooltip="Скопировать" (click)="copyCodeExample()">
-                <code [innerText]="getCodeExampleText()"></code>
+            <kbq-dd>
+                <code
+                    docsCodeSnippet
+                    [innerText]="codeExampleText()"
+                    [kbqTooltip]="isRuLocale() ? 'Скопировать' : 'Copy'"
+                ></code>
             </kbq-dd>
 
             <kbq-dt>{{ isRuLocale() ? 'Для MS Word' : 'For MS Word' }}</kbq-dt>
             <kbq-dd>
-                <span #wordExample [kbqTooltip]="isRuLocale() ? 'Скопировать' : 'Copy'" (click)="copyWordExample()">
+                <span #wordExample docsCodeSnippet [kbqTooltip]="isRuLocale() ? 'Скопировать' : 'Copy'">
                     [#{{ getHexColor() }}]
                     <span class="docs-icon-unicode" [innerHtml]="getUnicode()"></span>
                 </span>

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

@@ -24,14 +24,14 @@ import { KbqToolTipModule } from '@koobiq/components/tooltip';
 import { Observable, Subscription } from 'rxjs';
 import { shareReplay, take, tap } from 'rxjs/operators';
 import { DocsLocaleState } from 'src/app/services/locale';
-import { DocsCodeSnippetComponent } from '../code-snippet/code-snippet';
+import { DocsCodeSnippetDirective } from '../code-snippet/code-snippet';
 import { DocsLiveExampleViewerComponent } from '../live-example-viewer/docs-live-example-viewer';
 
 @Component({
     standalone: true,
     imports: [
         KbqCodeBlockModule,
-        DocsCodeSnippetComponent,
+        DocsCodeSnippetDirective,
         KbqToolTipModule,
         CdkPortal,
         KbqDividerModule,
@@ -48,7 +48,7 @@ import { DocsLiveExampleViewerComponent } from '../live-example-viewer/docs-live
                 class="kbq-mono-normal"
                 [innerHTML]="htmlContent"
                 [kbqTooltip]="isRuLocale() ? 'Скопировать' : 'Copy'"
-                kbq-code-snippet
+                docsCodeSnippet
             ></span>
         </ng-template>
     `,
@@ -190,7 +190,7 @@ export class DocsLiveExampleComponent extends DocsLocaleState implements OnDestr
     }
 
     private initCodeSnippets() {
-        const selector = 'kbq-code-snippet';
+        const selector = 'docsCodeSnippet';
 
         this.nativeElement.querySelectorAll(`[${selector}]`).forEach((element: Element) => {
             const { innerHTML, textContent } = element;

apps/docs/src/main.scss

@@ -6,6 +6,7 @@
 @use './styles/callout';
 @use './styles/design-tokens';
 @use './styles/examples';
+@use './styles/code-snippet';
 
 @use './styles/koobiq/default-theme/css-tokens.css';
 @use './styles/koobiq/default-theme/css-tokens-dark.css';

apps/docs/src/styles/_code-snippet.scss

@@ -0,0 +1,6 @@
+@use 'components/core/styles/common';
+
+.docs-code-snippet {
+    cursor: pointer;
+    @include common.user-select(none);
+}

apps/docs/src/styles/_design-tokens.scss

@@ -38,7 +38,7 @@
         border-bottom: 1px solid var(--kbq-line-contrast-less);
 
         .kbq-markdown__td {
-            > .kbq-markdown__code[kbq-code-snippet] {
+            > .kbq-markdown__code.docs-code-snippet {
                 cursor: pointer;
             }
 

docs/guides/design-tokens/border-radius.md

@@ -1,3 +1,3 @@
-|                                                                                                                | Токен                                                                                                                                                                                                 | Значение                                                               |
-| :------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------- |
-| <div class="kbq-design-token-example__dimensions" style="border-radius: var(--kbq-size-border-radius);"></div> | <div class="kbq-design-token-example__var"><code kbq-code-snippet style="cursor: pointer">--kbq-size-border-radius</code><div class="kbq-design-token-example__value kbq-mono-normal">8px</div></div> | <div class="kbq-design-token-example__value kbq-mono-normal">8px</div> |
+|                                                                                                                | Токен                                                                                                                                                                                                | Значение                                                               |
+| :------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------- |
+| <div class="kbq-design-token-example__dimensions" style="border-radius: var(--kbq-size-border-radius);"></div> | <div class="kbq-design-token-example__var"><code docsCodeSnippet style="cursor: pointer">--kbq-size-border-radius</code><div class="kbq-design-token-example__value kbq-mono-normal">8px</div></div> | <div class="kbq-design-token-example__value kbq-mono-normal">8px</div> |