From 759a561a4e7323411a994c43de01db1103d82aa0 Mon Sep 17 00:00:00 2001 From: German Panov Date: Wed, 10 Apr 2024 16:52:31 +0300 Subject: [PATCH] chore(demo): migrate documentation page `Breadcrumbs` to standalone components (#7194) --- projects/demo/src/modules/app/app.routes.ts | 12 ++--- .../breadcrumbs/breadcrumbs.module.ts | 40 ---------------- .../breadcrumbs/examples/1/index.less | 0 .../breadcrumbs/examples/1/index.ts | 9 +++- .../breadcrumbs/examples/2/index.less | 0 .../breadcrumbs/examples/2/index.ts | 28 +++++++++-- .../import/{import-module.md => import.md} | 0 .../{insert-template.md => template.md} | 0 .../{breadcrumbs.template.html => index.html} | 48 ++++--------------- .../{breadcrumbs.component.ts => index.ts} | 31 +++++------- 10 files changed, 57 insertions(+), 111 deletions(-) delete mode 100644 projects/demo/src/modules/components/breadcrumbs/breadcrumbs.module.ts create mode 100644 projects/demo/src/modules/components/breadcrumbs/examples/1/index.less create mode 100644 projects/demo/src/modules/components/breadcrumbs/examples/2/index.less rename projects/demo/src/modules/components/breadcrumbs/examples/import/{import-module.md => import.md} (100%) rename projects/demo/src/modules/components/breadcrumbs/examples/import/{insert-template.md => template.md} (100%) rename projects/demo/src/modules/components/breadcrumbs/{breadcrumbs.template.html => index.html} (51%) rename projects/demo/src/modules/components/breadcrumbs/{breadcrumbs.component.ts => index.ts} (52%) diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 3bf5b59a9883..92339e35b7ee 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -270,15 +270,11 @@ export const ROUTES: Routes = [ title: 'Navigation', }, }, - { + route({ path: DemoRoute.Breadcrumbs, - loadChildren: async () => - (await import('../components/breadcrumbs/breadcrumbs.module')) - .ExampleTuiBreadcrumbsModule, - data: { - title: 'Breadcrumbs', - }, - }, + title: 'Breadcrumbs', + loadComponent: async () => import('../components/breadcrumbs'), + }), route({ path: DemoRoute.Button, title: 'Button', diff --git a/projects/demo/src/modules/components/breadcrumbs/breadcrumbs.module.ts b/projects/demo/src/modules/components/breadcrumbs/breadcrumbs.module.ts deleted file mode 100644 index 45e61337fca8..000000000000 --- a/projects/demo/src/modules/components/breadcrumbs/breadcrumbs.module.ts +++ /dev/null @@ -1,40 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule} from '@angular/forms'; -import {RouterModule} from '@angular/router'; -import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import {TuiRepeatTimesModule} from '@taiga-ui/cdk'; -import { - TuiButtonDirective, - TuiDataListModule, - TuiDropdownModule, - TuiLinkDirective, -} from '@taiga-ui/core'; -import {TuiBreadcrumbsModule, TuiInputNumberModule} from '@taiga-ui/kit'; - -import {ExampleTuiBreadcrumbsComponent} from './breadcrumbs.component'; -import {TuiBreadcrumbsExample1} from './examples/1'; -import {TuiBreadcrumbsExample2} from './examples/2'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - TuiBreadcrumbsModule, - TuiLinkDirective, - TuiAddonDocModule, - TuiDropdownModule, - TuiButtonDirective, - TuiDataListModule, - TuiInputNumberModule, - TuiRepeatTimesModule, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiBreadcrumbsComponent)), - ], - declarations: [ - ExampleTuiBreadcrumbsComponent, - TuiBreadcrumbsExample1, - TuiBreadcrumbsExample2, - ], - exports: [ExampleTuiBreadcrumbsComponent], -}) -export class ExampleTuiBreadcrumbsModule {} diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/1/index.less b/projects/demo/src/modules/components/breadcrumbs/examples/1/index.less new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/1/index.ts b/projects/demo/src/modules/components/breadcrumbs/examples/1/index.ts index 0902b579b46a..4c9a2ad8620f 100644 --- a/projects/demo/src/modules/components/breadcrumbs/examples/1/index.ts +++ b/projects/demo/src/modules/components/breadcrumbs/examples/1/index.ts @@ -1,14 +1,19 @@ +import {NgFor} from '@angular/common'; import {Component} from '@angular/core'; +import {RouterLink} from '@angular/router'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiLinkDirective} from '@taiga-ui/core'; +import {TuiBreadcrumbsModule} from '@taiga-ui/kit'; @Component({ - selector: 'tui-breadcrumbs-example-1', + standalone: true, + imports: [NgFor, RouterLink, TuiBreadcrumbsModule, TuiLinkDirective], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiBreadcrumbsExample1 { +export default class ExampleComponent { protected items = [ { caption: 'Selects', diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/2/index.less b/projects/demo/src/modules/components/breadcrumbs/examples/2/index.less new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/2/index.ts b/projects/demo/src/modules/components/breadcrumbs/examples/2/index.ts index 62b6ae9f7a7b..cf780286252c 100644 --- a/projects/demo/src/modules/components/breadcrumbs/examples/2/index.ts +++ b/projects/demo/src/modules/components/breadcrumbs/examples/2/index.ts @@ -1,10 +1,32 @@ import {Component} from '@angular/core'; +import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {tuiBreadcrumbsOptionsProvider} from '@taiga-ui/kit'; +import {TuiRepeatTimesModule} from '@taiga-ui/cdk'; +import { + TuiButtonDirective, + TuiDataListModule, + TuiDropdownModule, + TuiLinkDirective, +} from '@taiga-ui/core'; +import { + TuiBreadcrumbsModule, + tuiBreadcrumbsOptionsProvider, + TuiInputNumberModule, +} from '@taiga-ui/kit'; @Component({ - selector: 'tui-breadcrumbs-example-2', + standalone: true, + imports: [ + FormsModule, + TuiBreadcrumbsModule, + TuiDropdownModule, + TuiDataListModule, + TuiInputNumberModule, + TuiRepeatTimesModule, + TuiLinkDirective, + TuiButtonDirective, + ], templateUrl: './index.html', encapsulation, changeDetection, @@ -15,7 +37,7 @@ import {tuiBreadcrumbsOptionsProvider} from '@taiga-ui/kit'; }), ], }) -export class TuiBreadcrumbsExample2 { +export default class ExampleComponent { protected readonly items = [ { caption: 'Open Source', diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/import/import-module.md b/projects/demo/src/modules/components/breadcrumbs/examples/import/import.md similarity index 100% rename from projects/demo/src/modules/components/breadcrumbs/examples/import/import-module.md rename to projects/demo/src/modules/components/breadcrumbs/examples/import/import.md diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/import/insert-template.md b/projects/demo/src/modules/components/breadcrumbs/examples/import/template.md similarity index 100% rename from projects/demo/src/modules/components/breadcrumbs/examples/import/insert-template.md rename to projects/demo/src/modules/components/breadcrumbs/examples/import/template.md diff --git a/projects/demo/src/modules/components/breadcrumbs/breadcrumbs.template.html b/projects/demo/src/modules/components/breadcrumbs/index.html similarity index 51% rename from projects/demo/src/modules/components/breadcrumbs/breadcrumbs.template.html rename to projects/demo/src/modules/components/breadcrumbs/index.html index 1803bbbe4f17..46327be35030 100644 --- a/projects/demo/src/modules/components/breadcrumbs/breadcrumbs.template.html +++ b/projects/demo/src/modules/components/breadcrumbs/index.html @@ -7,21 +7,13 @@

Navigation element that shows a path from root page to the current

- - - - - - + *ngFor="let example of examples; let index = index" + [component]="index + 1 | tuiComponent" + [content]="index + 1 | tuiExample" + [description]="example.description" + [heading]="example.name" + [id]="example.name | tuiKebab" + /> @@ -51,29 +43,5 @@ - -
    -
  1. -

    - Import - TuiBreadcrumbsModule - into a module where you want to use our component -

    - - -
    2. - -
  2. -

    Add to the template:

    - - -
    3. -
- + diff --git a/projects/demo/src/modules/components/breadcrumbs/breadcrumbs.component.ts b/projects/demo/src/modules/components/breadcrumbs/index.ts similarity index 52% rename from projects/demo/src/modules/components/breadcrumbs/breadcrumbs.component.ts rename to projects/demo/src/modules/components/breadcrumbs/index.ts index 4f63e69c06b9..5979836b1e7a 100644 --- a/projects/demo/src/modules/components/breadcrumbs/breadcrumbs.component.ts +++ b/projects/demo/src/modules/components/breadcrumbs/index.ts @@ -1,27 +1,17 @@ import {Component} from '@angular/core'; +import {RouterLink} from '@angular/router'; import {changeDetection} from '@demo/emulate/change-detection'; -import type {TuiDocExample} from '@taiga-ui/addon-doc'; -import type {TuiSizeL} from '@taiga-ui/core'; +import {TuiDemoModule} from '@demo/utils'; +import {TuiLinkDirective, type TuiSizeL} from '@taiga-ui/core'; +import {TuiBreadcrumbsModule} from '@taiga-ui/kit'; @Component({ - selector: 'example-breadcrumbs', - templateUrl: './breadcrumbs.template.html', + standalone: true, + imports: [RouterLink, TuiDemoModule, TuiBreadcrumbsModule, TuiLinkDirective], + templateUrl: './index.html', changeDetection, }) -export class ExampleTuiBreadcrumbsComponent { - protected readonly exampleModule = import('./examples/import/import-module.md?raw'); - protected readonly exampleHtml = import('./examples/import/insert-template.md?raw'); - - protected readonly example1: TuiDocExample = { - TypeScript: import('./examples/1/index.ts?raw'), - HTML: import('./examples/1/index.html?raw'), - }; - - protected readonly example2: TuiDocExample = { - TypeScript: import('./examples/2/index.ts?raw'), - HTML: import('./examples/2/index.html?raw'), - }; - +export default class ExampleComponent { protected readonly itemsVariants = [ [ { @@ -48,4 +38,9 @@ export class ExampleTuiBreadcrumbsComponent { protected readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l']; protected size: TuiSizeL = this.sizeVariants[0]; + + protected readonly examples = [ + {name: 'Basic'}, + {name: 'More button', description: 'Plus using DI options'}, + ]; }