feat(addon-copy): add type reference handler for improve documentation

taiga-family · Nov 27, 2023 · 6281d98 · 6281d98
1 parent d265c64
commit 6281d98
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 29 deletions.
diff --git a/projects/addon-doc/components/documentation/documentation.module.ts b/projects/addon-doc/components/documentation/documentation.module.ts
@@ -12,7 +12,6 @@ import {
     TuiNotificationModule,
     TuiPrimitiveTextfieldModule,
     TuiTextfieldControllerModule,
-    TuiTooltipModule,
 } from '@taiga-ui/core';
 import {
     TuiBadgeModule,
@@ -27,12 +26,12 @@ import {TuiDocDocumentationComponent} from './documentation.component';
 import {TuiDocDocumentationPropertyConnectorDirective} from './documentation-property-connector.directive';
 import {TuiShowCleanerPipe} from './pipes/cleaner.pipe';
 import {TuiGetColorPipe} from './pipes/color.pipe';
-import {TuiShowContentTooltip} from './pipes/content-tooltip.pipe';
 import {TuiInspectPipe} from './pipes/inspect.pipe';
 import {TuiGetOpacityPipe} from './pipes/opacity.pipe';
 import {TuiIsOptionalPipe} from './pipes/optional.pipe';
 import {TuiIsPrimitivePolymorpheusContentPipe} from './pipes/primitive-polymorpheus-content.pipe';
 import {TuiStripOptionalPipe} from './pipes/strip-optional.pipe';
+import {TuiDocTypeReferencePipe} from './pipes/type-reference.pipe';
 
 @NgModule({
     imports: [
@@ -42,7 +41,6 @@ import {TuiStripOptionalPipe} from './pipes/strip-optional.pipe';
         TuiBadgeModule,
         TuiSelectModule,
         TuiToggleModule,
-        TuiTooltipModule,
         TuiLinkModule,
         TuiInputNumberModule,
         TuiModeModule,
@@ -63,7 +61,7 @@ import {TuiStripOptionalPipe} from './pipes/strip-optional.pipe';
         TuiIsOptionalPipe,
         TuiShowCleanerPipe,
         TuiStripOptionalPipe,
-        TuiShowContentTooltip,
+        TuiDocTypeReferencePipe,
         TuiDocDocumentationComponent,
         TuiIsPrimitivePolymorpheusContentPipe,
         TuiDocDocumentationPropertyConnectorDirective,

diff --git a/projects/addon-doc/components/documentation/documentation.style.less b/projects/addon-doc/components/documentation/documentation.style.less
@@ -110,3 +110,30 @@
 .t-heading {
     font: var(--tui-font-heading-4);
 }
+
+.t-code-type {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: start;
+}
+
+.t-code-reference {
+    display: inline-flex;
+    color: var(--tui-link);
+    text-decoration: none;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+
+    &:after {
+        content: '';
+        font-size: 1rem;
+        width: 1rem;
+        height: 1rem;
+        background: currentColor;
+        // TODO: migrate to <tui-icon /> in v4.0
+        mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>')
+            center/100%;
+    }
+}
diff --git a/projects/addon-doc/components/documentation/documentation.template.html b/projects/addon-doc/components/documentation/documentation.template.html
@@ -49,25 +49,27 @@
             </td>
             <td class="t-cell">
                 <span class="type">
-                    <code>{{ propertyConnector.documentationPropertyType }}</code>
-                    <tui-tooltip
-                        *ngIf="propertyConnector.documentationPropertyType | tuiShowContentTooltip"
-                        [content]="content"
-                        [describeId]="propertyConnector.attrName"
-                    >
-                        <ng-template #content>
-                            {{ texts[4] }}
+                    <code class="t-code-type">
+                        <ng-container
+                            *ngFor="
+                                let item of propertyConnector.documentationPropertyType | tuiDocTypeReference;
+                                let last = last
+                            "
+                        >
                             <a
-                                href="https://github.com/taiga-family/ng-polymorpheus"
-                                rel="noreferrer"
+                                *ngIf="item.reference; else default"
                                 target="_blank"
-                                tuiLink
-                                tuiMode="onDark"
+                                class="t-code-reference"
+                                [attr.href]="item.reference"
                             >
-                                <code>ng-polymorpheus</code>
+                                {{ item.type }}
                             </a>
-                        </ng-template>
-                    </tui-tooltip>
+                            <ng-template #default>
+                                {{ item.type }}
+                            </ng-template>
+                            <span *ngIf="!last">&nbsp;|&nbsp;</span>
+                        </ng-container>
+                    </code>
                 </span>
             </td>
             <td

diff --git a/projects/addon-doc/components/documentation/pipes/content-tooltip.pipe.ts b/projects/addon-doc/components/documentation/pipes/content-tooltip.pipe.ts
diff --git a/projects/addon-doc/components/documentation/pipes/type-reference.pipe.ts b/projects/addon-doc/components/documentation/pipes/type-reference.pipe.ts
@@ -0,0 +1,19 @@
+import {Inject, Pipe, PipeTransform} from '@angular/core';
+import {TUI_DOC_TYPE_REFERENCE_HANDLER} from '@taiga-ui/addon-doc/tokens';
+import {TuiStringHandler} from '@taiga-ui/cdk';
+
+@Pipe({name: `tuiDocTypeReference`})
+export class TuiDocTypeReferencePipe implements PipeTransform {
+    constructor(
+        @Inject(TUI_DOC_TYPE_REFERENCE_HANDLER)
+        private readonly typeReferenceHandler?: TuiStringHandler<string | null> | null,
+    ) {}
+
+    transform(type: string): Array<{type: string; reference: string | null}> {
+        return type
+            .split(`|`)
+            .map(type => type.trim())
+            .map(type => ({type, reference: this.typeReferenceHandler?.(type) ?? null}))
+            .sort((a, b) => b.reference?.localeCompare(a.reference ?? ``) ?? -1);
+    }
+}
diff --git a/projects/addon-doc/components/index.ts b/projects/addon-doc/components/index.ts
@@ -9,12 +9,12 @@ export * from './documentation/documentation.module';
 export * from './documentation/documentation-property-connector.directive';
 export * from './documentation/pipes/cleaner.pipe';
 export * from './documentation/pipes/color.pipe';
-export * from './documentation/pipes/content-tooltip.pipe';
 export * from './documentation/pipes/inspect.pipe';
 export * from './documentation/pipes/opacity.pipe';
 export * from './documentation/pipes/optional.pipe';
 export * from './documentation/pipes/primitive-polymorpheus-content.pipe';
 export * from './documentation/pipes/strip-optional.pipe';
+export * from './documentation/pipes/type-reference.pipe';
 export * from './example/example.component';
 export * from './example/example.module';
 export * from './example/example.options';

diff --git a/projects/addon-doc/components/main/main.style.less b/projects/addon-doc/components/main/main.style.less
@@ -59,7 +59,7 @@ code:not(pre code) {
         font-weight: 500;
         border: 1px solid var(--tui-base-04);
         font-size: 0.75rem;
-        padding: 0 0.125rem;
+        padding: 0 0.3125rem;
         //noinspection CssInvalidPropertyValue
         text-wrap: wrap;
 

diff --git a/projects/addon-doc/tokens/index.ts b/projects/addon-doc/tokens/index.ts
@@ -12,4 +12,5 @@ export * from './scroll-behavior';
 export * from './see-also';
 export * from './source-code';
 export * from './title';
+export * from './type-reference-handler';
 export * from './url-state-handler';
diff --git a/projects/addon-doc/tokens/type-reference-handler.ts b/projects/addon-doc/tokens/type-reference-handler.ts
@@ -0,0 +1,5 @@
+import {tuiCreateToken, TuiStringHandler} from '@taiga-ui/cdk';
+
+export const TUI_DOC_TYPE_REFERENCE_HANDLER = tuiCreateToken<TuiStringHandler<
+    string | null
+> | null>(null);
diff --git a/projects/demo/src/modules/app/app.providers.ts b/projects/demo/src/modules/app/app.providers.ts
@@ -20,6 +20,7 @@ import {
     TUI_DOC_SEE_ALSO,
     TUI_DOC_SOURCE_CODE,
     TUI_DOC_TITLE,
+    TUI_DOC_TYPE_REFERENCE_HANDLER,
     TUI_DOC_URL_STATE_HANDLER,
     tuiDocExampleOptionsProvider,
     TuiDocSourceCodePathOptions,
@@ -197,6 +198,26 @@ export const APP_PROVIDERS: Provider[] = [
         useFactory: (baseHref: string) => (tree: UrlTree) =>
             String(tree).replace(baseHref, ``),
     },
+    {
+        provide: TUI_DOC_TYPE_REFERENCE_HANDLER,
+        useValue: (type: string) => {
+            switch (type) {
+                case `any`:
+                case `null`:
+                case `undefined`:
+                case `boolean`:
+                case `string`:
+                case `number`:
+                    return null;
+                case `SafeResourceUrl`:
+                    return `https://angular.dev/api/platform-browser/${type}`;
+                case `PolymorpheusContent`:
+                    return `https://github.com/taiga-family/ng-polymorpheus`;
+                default:
+                    return `https://github.com/search?q=org%3Ataiga-family+${type}+language%3ATypeScript&type=code&l=TypeScript`;
+            }
+        },
+    },
     tuiDocExampleOptionsProvider({fullsize: false}),
     tuiLanguageSwitcher(
         async (language: TuiLanguageName): Promise<unknown> =>