chore(demo): add Example pipe (#6861)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Feb 26, 2024 · dbd5a34 · dbd5a34
1 parent e15cf04
commit dbd5a34
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 103 deletions.
diff --git a/projects/demo/src/modules/components/badge/badge.component.ts b/projects/demo/src/modules/components/badge/badge.component.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+import {TuiRawLoaderContent} from '@taiga-ui/addon-doc';
 import {TuiSizeS, TuiSizeXL} from '@taiga-ui/core';
 
 @Component({
@@ -17,33 +17,6 @@ export class ExampleTuiBadgeComponent {
         './examples/import/insert-template.md?raw'
     );
 
-    readonly example1: TuiDocExample = {
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    readonly example2: TuiDocExample = {
-        HTML: import('./examples/2/index.html?raw'),
-    };
-
-    readonly example3: TuiDocExample = {
-        HTML: import('./examples/3/index.html?raw'),
-    };
-
-    readonly example4: TuiDocExample = {
-        HTML: import('./examples/4/index.html?raw'),
-        LESS: import('./examples/4/index.less?raw'),
-    };
-
-    readonly example5: TuiDocExample = {
-        HTML: import('./examples/5/index.html?raw'),
-        LESS: import('./examples/5/index.less?raw'),
-    };
-
-    readonly example6: TuiDocExample = {
-        TypeScript: import('./examples/6/index.ts?raw'),
-        HTML: import('./examples/6/index.html?raw'),
-    };
-
     readonly appearanceVariants = [
         '',
         'accent',

diff --git a/projects/demo/src/modules/components/badge/badge.module.ts b/projects/demo/src/modules/components/badge/badge.module.ts
@@ -1,6 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
+import {TuiExamplePipe} from '@demo/utils';
 import {tuiGetDocModules} from '@taiga-ui/addon-doc';
 import {TuiPlatformModule, TuiRepeatTimesModule} from '@taiga-ui/cdk';
 import {
@@ -36,6 +37,7 @@ import {TuiBadgeExample6} from './examples/6';
         TuiLabelModule,
         tuiGetDocModules(ExampleTuiBadgeComponent),
         TuiPlatformModule,
+        TuiExamplePipe,
     ],
     declarations: [
         ExampleTuiBadgeComponent,

diff --git a/projects/demo/src/modules/components/badge/badge.template.html b/projects/demo/src/modules/components/badge/badge.template.html
@@ -9,47 +9,47 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
+            [content]="1 | tuiExample: 'html'"
         >
             <tui-badge-example-1></tui-badge-example-1>
         </tui-doc-example>
 
         <tui-doc-example
             id="sizes"
             heading="Sizes"
-            [content]="example2"
+            [content]="2 | tuiExample: 'html'"
         >
             <tui-badge-example-2></tui-badge-example-2>
         </tui-doc-example>
 
         <tui-doc-example
             id="content-type"
             heading="Content type (mobile platform)"
-            [content]="example3"
+            [content]="3 | tuiExample: 'html'"
         >
             <tui-badge-example-3></tui-badge-example-3>
         </tui-doc-example>
 
         <tui-doc-example
             id="fade"
             heading="Long value"
-            [content]="example4"
+            [content]="4 | tuiExample: 'html,less'"
         >
             <tui-badge-example-4></tui-badge-example-4>
         </tui-doc-example>
 
         <tui-doc-example
             id="custom"
             heading="Customization"
-            [content]="example5"
+            [content]="5 | tuiExample: 'html,less'"
         >
             <tui-badge-example-5></tui-badge-example-5>
         </tui-doc-example>
 
         <tui-doc-example
             id="options"
             heading="Options with DI"
-            [content]="example6"
+            [content]="6 | tuiExample: 'html,ts'"
         >
             <tui-badge-example-6></tui-badge-example-6>
         </tui-doc-example>

diff --git a/projects/demo/src/modules/experimental/card-large/card-large.component.ts b/projects/demo/src/modules/experimental/card-large/card-large.component.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+import {TuiRawLoaderContent} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-card',
@@ -15,59 +15,4 @@ export class ExampleTuiCardLargeComponent {
     readonly exampleHtml: TuiRawLoaderContent = import(
         './examples/import/insert-template.md?raw'
     );
-
-    readonly example1: TuiDocExample = {
-        HTML: import('./examples/1/index.html?raw'),
-        LESS: import('./examples/1/index.less?raw'),
-    };
-
-    readonly example2: TuiDocExample = {
-        HTML: import('./examples/2/index.html?raw'),
-    };
-
-    readonly example3: TuiDocExample = {
-        HTML: import('./examples/3/index.html?raw'),
-        LESS: import('./examples/3/index.less?raw'),
-    };
-
-    readonly example4: TuiDocExample = {
-        HTML: import('./examples/4/index.html?raw'),
-        LESS: import('./examples/4/index.less?raw'),
-    };
-
-    readonly example5: TuiDocExample = {
-        HTML: import('./examples/5/index.html?raw'),
-    };
-
-    readonly example6: TuiDocExample = {
-        HTML: import('./examples/6/index.html?raw'),
-        LESS: import('./examples/6/index.less?raw'),
-    };
-
-    readonly example7: TuiDocExample = {
-        HTML: import('./examples/7/index.html?raw'),
-        LESS: import('./examples/7/index.less?raw'),
-    };
-
-    readonly example8: TuiDocExample = {
-        HTML: import('./examples/8/index.html?raw'),
-    };
-
-    readonly example9: TuiDocExample = {
-        HTML: import('./examples/9/index.html?raw'),
-    };
-
-    readonly example10: TuiDocExample = {
-        HTML: import('./examples/10/index.html?raw'),
-        LESS: import('./examples/10/index.less?raw'),
-    };
-
-    readonly example11: TuiDocExample = {
-        HTML: import('./examples/11/index.html?raw'),
-        LESS: import('./examples/11/index.less?raw'),
-    };
-
-    readonly example12: TuiDocExample = {
-        HTML: import('./examples/12/index.html?raw'),
-    };
 }
diff --git a/projects/demo/src/modules/experimental/card-large/card-large.module.ts b/projects/demo/src/modules/experimental/card-large/card-large.module.ts
@@ -1,6 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
+import {TuiExamplePipe} from '@demo/utils';
 import {tuiGetDocModules} from '@taiga-ui/addon-doc';
 import {TuiRippleModule} from '@taiga-ui/addon-mobile';
 import {TuiPlatformModule, TuiRepeatTimesModule} from '@taiga-ui/cdk';
@@ -79,6 +80,7 @@ import {TuiCardLargeExample12} from './examples/12';
         TuiPlatformModule,
         TuiLinkModule,
         TuiAppearanceDirective,
+        TuiExamplePipe,
     ],
     declarations: [
         ExampleTuiCardLargeComponent,

diff --git a/projects/demo/src/modules/experimental/card-large/card-large.template.html b/projects/demo/src/modules/experimental/card-large/card-large.template.html
@@ -1,53 +1,53 @@
 <tui-doc-page
     header="CardLarge"
     package="EXPERIMENTAL"
-    type="components"
+    type="experimental"
 >
     <ng-template pageTab>
         <tui-doc-example
             id="basic"
             heading="Basic"
-            [content]="example1"
+            [content]="1 | tuiExample"
         >
             <tui-card-large-example-1></tui-card-large-example-1>
         </tui-doc-example>
 
         <tui-doc-example
             id="cell-avatar"
             heading="Avatar"
-            [content]="example2"
+            [content]="2 | tuiExample: 'html'"
         >
             <tui-card-large-example-2></tui-card-large-example-2>
         </tui-doc-example>
 
         <tui-doc-example
             id="single"
             heading="Single item"
-            [content]="example3"
+            [content]="3 | tuiExample: 'html,less'"
         >
             <tui-card-large-example-3></tui-card-large-example-3>
         </tui-doc-example>
 
         <tui-doc-example
             id="cards-list"
             heading="Cards List"
-            [content]="example4"
+            [content]="4 | tuiExample: 'html,less'"
         >
             <tui-card-large-example-4></tui-card-large-example-4>
         </tui-doc-example>
 
         <tui-doc-example
             id="cell-list"
             heading="Cell List"
-            [content]="example5"
+            [content]="5 | tuiExample: 'html'"
         >
             <tui-card-large-example-5></tui-card-large-example-5>
         </tui-doc-example>
 
         <tui-doc-example
             id="cell-list-columns"
             heading="Cell List (2 columns)"
-            [content]="example6"
+            [content]="6 | tuiExample: 'html,less'"
             [fullsize]="true"
         >
             <tui-card-large-example-6></tui-card-large-example-6>
@@ -56,23 +56,23 @@
         <tui-doc-example
             id="cell-list-headless"
             heading="Cell List (actions)"
-            [content]="example7"
+            [content]="7 | tuiExample: 'html,less'"
         >
             <tui-card-large-example-7></tui-card-large-example-7>
         </tui-doc-example>
 
         <tui-doc-example
             id="align"
             heading="Footer alignment"
-            [content]="example8"
+            [content]="8 | tuiExample: 'html'"
         >
             <tui-card-large-example-8></tui-card-large-example-8>
         </tui-doc-example>
 
         <tui-doc-example
             id="map"
             heading="Map"
-            [content]="example9"
+            [content]="9 | tuiExample: 'html'"
             [fullsize]="true"
         >
             <tui-card-large-example-9></tui-card-large-example-9>
@@ -81,23 +81,23 @@
         <tui-doc-example
             id="image"
             heading="Image"
-            [content]="example10"
+            [content]="10 | tuiExample: 'html,less'"
         >
             <tui-card-large-example-10></tui-card-large-example-10>
         </tui-doc-example>
 
         <tui-doc-example
             id="image-dark"
             heading="Image-dark"
-            [content]="example11"
+            [content]="11 | tuiExample: 'html,less'"
         >
             <tui-card-large-example-11></tui-card-large-example-11>
         </tui-doc-example>
 
         <tui-doc-example
             id="paddings"
             heading="Paddings and radiuses"
-            [content]="example12"
+            [content]="12 | tuiExample: 'html'"
         >
             <tui-card-large-example-12></tui-card-large-example-12>
         </tui-doc-example>

diff --git a/projects/demo/src/utils/example.pipe.ts b/projects/demo/src/utils/example.pipe.ts
@@ -0,0 +1,34 @@
+import {inject, Pipe, PipeTransform} from '@angular/core';
+import {TuiDocExample, TuiDocPageComponent} from '@taiga-ui/addon-doc';
+
+const toKebab: (str: string) => string = str =>
+    str.replaceAll(
+        /[A-Z]+(?![a-z])|[A-Z]/g,
+        ($, ofs) => (ofs ? '-' : '') + $.toLowerCase(),
+    );
+
+@Pipe({name: 'tuiExample', standalone: true})
+export class TuiExamplePipe implements PipeTransform {
+    docPage = inject(TuiDocPageComponent);
+
+    transform(
+        index: number,
+        formats:
+            | 'html,less'
+            | 'html,ts,less'
+            | 'html,ts'
+            | 'html'
+            | 'ts' = 'html,ts,less',
+    ): TuiDocExample {
+        return Object.fromEntries(
+            formats
+                .split(',')
+                .map(format => [
+                    format.toUpperCase(),
+                    import(
+                        `../modules/${this.docPage.type}/${toKebab(this.docPage.header)}/examples/${index}/index.${format}?raw`
+                    ),
+                ]),
+        );
+    }
+}
diff --git a/projects/demo/src/utils/index.ts b/projects/demo/src/utils/index.ts
@@ -1 +1,2 @@
+export * from './example.pipe';
 export * from './load-assets';
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './example.pipe';
		export * from './load-assets';