chore: refactor

Author: NikGurev

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

@@ -157,8 +157,6 @@ export class DocsAnchorsComponent implements OnDestroy, OnInit {
                 .pipe(debounceTime(this.debounceTime), takeUntilDestroyed(this.destroyRef))
                 .subscribe(this.onScroll);
         }
-
-        this.ref.detectChanges();
     }
 
     /* TODO Техдолг: при изменении ширины экрана должен переопределяться параметр top

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

@@ -7,11 +7,6 @@ import { DocsLocale } from 'src/app/constants/locale';
 import { DocsStructureTokensTab } from '../../structure';
 import { DocsComponentViewerComponent } from '../component-viewer/component-viewer.component';
 import { DocsRegisterHeaderDirective } from '../register-header/register-header.directive';
-import { docsData as borderRadius } from './data/border-radius';
-import { docsData as colors } from './data/colors';
-import { docsData as palette } from './data/palette';
-import { docsData as shadows } from './data/shadows';
-import { docsData as sizes } from './data/sizes';
 
 @Component({
     standalone: true,
@@ -60,46 +55,41 @@ export class DocsDesignTokensViewer extends DocsComponentViewerComponent {
         super();
     }
 
-    readonly links: Array<{ title: Record<DocsLocale, string>; value: string; data: any }> = [
+    readonly links: Array<{ title: Record<DocsLocale, string>; value: string }> = [
         {
             title: {
                 ru: 'Цвета',
                 en: 'Colors'
             },
-            value: DocsStructureTokensTab.Colors,
-            data: colors
+            value: DocsStructureTokensTab.Colors
         },
         {
             title: {
                 ru: 'Тени',
                 en: 'Shadows'
             },
-            value: DocsStructureTokensTab.Shadows,
-            data: shadows
+            value: DocsStructureTokensTab.Shadows
         },
         {
             title: {
                 ru: 'Скругления',
                 en: 'Border radius'
             },
-            value: DocsStructureTokensTab.BorderRadius,
-            data: borderRadius
+            value: DocsStructureTokensTab.BorderRadius
         },
         {
             title: {
                 ru: 'Размеры',
                 en: 'Sizes'
             },
-            value: DocsStructureTokensTab.Sizes,
-            data: sizes
+            value: DocsStructureTokensTab.Sizes
         },
         {
             title: {
                 ru: 'Инженерная палитра',
                 en: 'Engineer palette'
             },
-            value: DocsStructureTokensTab.Palette,
-            data: palette
+            value: DocsStructureTokensTab.Palette
         }
     ];
 }

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

@@ -29,6 +29,17 @@ export interface DocsTokensInfo {
     tokens?: { token: string; value: string }[];
 }
 
+export interface DocsTokensSectionInfoRaw {
+    type: string;
+    tokens: string[];
+}
+
+export interface DocsTokensInfoRaw {
+    type: string;
+    sections?: DocsTokensSectionInfoRaw[];
+    tokens?: string[];
+}
+
 @Component({
     standalone: true,
     selector: 'docs-tokens-table',
@@ -179,7 +190,7 @@ export class DocsTokensOverview extends DocsLocaleState implements AfterViewInit
     protected readonly platformId = inject(PLATFORM_ID);
     protected readonly activatedRoute = inject(ActivatedRoute);
 
-    protected tokensInfo = signal<DocsTokensInfo[]>([]);
+    protected readonly tokensInfo = signal<DocsTokensInfo[]>([]);
     protected readonly activatedTab = toSignal(
         this.activatedRoute.url.pipe(
             map(([{ path: id }]: UrlSegment[]) => <DocsStructureTokensTab>id),
@@ -203,7 +214,7 @@ export class DocsTokensOverview extends DocsLocaleState implements AfterViewInit
         }
     };
 
-    protected tokenDataMap: Record<DocsStructureTokensTab, unknown> = {
+    protected tokenDataMap: Record<DocsStructureTokensTab, DocsTokensInfoRaw[]> = {
         [DocsStructureTokensTab.Colors]: colors,
         [DocsStructureTokensTab.Shadows]: shadows,
         [DocsStructureTokensTab.BorderRadius]: borderRadius,
@@ -229,10 +240,7 @@ export class DocsTokensOverview extends DocsLocaleState implements AfterViewInit
 
         const getTokenValue = (token: string) => styles.getPropertyValue(token);
 
-        const resolvedData = this.tokenDataMap[this.activatedTab()] as any;
-
-        // ts-ignore
-        return resolvedData.map((section) => {
+        return this.tokenDataMap[this.activatedTab()].map((section) => {
             if (section.tokens && section.tokens.length > 0) {
                 return {
                     type: section.type,

tools/tokens/docs/formats.js

@@ -1,8 +1,38 @@
-const { simpleMapColors } = require('./templates');
+const { simpleMapColors, outputTypographyTable, mapTypography } = require('./templates');
 const { updateObject, sortSections } = require('./utils');
 const { NO_HEADER } = require('./config');
 
 module.exports = (StyleDictionary) => {
+    StyleDictionary.registerFormat({
+        name: 'docs/typography',
+        formatter: function ({ dictionary }) {
+            const filtered = [];
+
+            for (const token of dictionary.allTokens) {
+                const isTypographyTypeMissing =
+                    filtered.findIndex(({ attributes }) => attributes.type === token.attributes.type) === -1;
+
+                if (isTypographyTypeMissing && token.attributes.item === 'font-size') {
+                    filtered.push(token);
+                }
+            }
+
+            // Sort by font-size
+            filtered.sort((a, b) => {
+                const aFontSize = parseInt(a.value);
+                const bFontSize = parseInt(b.value);
+
+                if (aFontSize < bFontSize) return 1;
+                if (aFontSize > bFontSize) return -1;
+
+                return 0;
+            });
+            const mappedTokens = filtered.map(mapTypography);
+
+            return outputTypographyTable(mappedTokens);
+        }
+    });
+
     StyleDictionary.registerFormat({
         name: 'docs/colors-ts',
         formatter: function ({ dictionary }) {

tools/tokens/docs/templates.js

@@ -1,6 +1,14 @@
 const { LINE_SEP, TYPOGRAPHY_TABLE_ID } = require('./config');
 const { capitalize } = require('./utils');
 
+const varTypographyTemplate = (token) => `<code docsCodeSnippet>kbq-${token.attributes.type}</code>`;
+
+const simpleExampleTypographyTemplate = (typographyType) => {
+    const typographyTypeOutput = capitalize(typographyType, { separator: '-' });
+
+    return `<div class="kbq-${typographyType}">${typographyTypeOutput}</div>`;
+};
+
 const simpleMapToken = ({ name }) => `--${name}`;
 
 const simpleMapColors = ([type, tokens]) => {
@@ -23,6 +31,11 @@ module.exports = {
     simpleMapToken,
     simpleMapColors,
 
+    mapTypography: (token) => ({
+        varSnippet: varTypographyTemplate(token),
+        example: simpleExampleTypographyTemplate(token.attributes.type)
+    }),
+
     outputTypographyTable: (tokens) => {
         return `<table id="${TYPOGRAPHY_TABLE_ID}">
                     <thead>