chore(demo): migrate documentation page CalendarMonth to standalone (…

…#7242)
taiga-family · Apr 16, 2024 · ef72d3d · ef72d3d
1 parent f25b92a
commit ef72d3d
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 92 deletions.
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -754,15 +754,11 @@ export const ROUTES: Routes = [
             title: 'PullToRefresh',
         },
     },
-    {
+    route({
         path: DemoRoute.CalendarMonth,
-        loadChildren: async () =>
-            (await import('../components/calendar-month/calendar-month.module'))
-                .ExampleTuiCalendarMonthModule,
-        data: {
-            title: 'CalendarMonth',
-        },
-    },
+        title: 'CalendarMonth',
+        loadComponent: async () => import('../components/calendar-month'),
+    }),
     {
         path: DemoRoute.MultiSelect,
         loadChildren: async () =>

diff --git a/projects/demo/src/modules/components/calendar-month/calendar-month.module.ts b/projects/demo/src/modules/components/calendar-month/calendar-month.module.ts
diff --git a/projects/demo/src/modules/components/calendar-month/examples/1/index.ts b/projects/demo/src/modules/components/calendar-month/examples/1/index.ts
@@ -2,14 +2,16 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import type {TuiMonth} from '@taiga-ui/cdk';
+import {TuiCalendarMonthModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-calendar-month-example-1',
+    standalone: true,
+    imports: [TuiCalendarMonthModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiMonthExample1 {
+export default class ExampleComponent {
     protected value: TuiMonth | null = null;
     protected hoveredMonth: TuiMonth | null = null;
 

diff --git a/projects/demo/src/modules/components/calendar-month/examples/2/index.ts b/projects/demo/src/modules/components/calendar-month/examples/2/index.ts
@@ -2,17 +2,19 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiMonth, TuiMonthRange} from '@taiga-ui/cdk';
+import {TuiCalendarMonthModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-calendar-month-example-2',
+    standalone: true,
+    imports: [TuiCalendarMonthModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiMonthExample2 {
+export default class ExampleComponent {
     protected value: TuiMonthRange | null = null;
 
-    protected max = new TuiMonth(2021, 7);
+    protected max = new TuiMonth(2024, 11);
     protected min = new TuiMonth(2019, 7);
 
     protected onMonthClick(month: TuiMonth): void {

diff --git a/...ar-month/examples/import/import-module.md → .../calendar-month/examples/import/import.md b/...ar-month/examples/import/import-module.md → .../calendar-month/examples/import/import.md
diff --git a/...-month/examples/import/insert-template.md → ...alendar-month/examples/import/template.md b/...-month/examples/import/insert-template.md → ...alendar-month/examples/import/template.md
diff --git a/...lendar-month/calendar-month.template.html → ...ules/components/calendar-month/index.html b/...lendar-month/calendar-month.template.html → ...ules/components/calendar-month/index.html
@@ -15,20 +15,12 @@
         </p>
 
         <tui-doc-example
-            id="base"
-            heading="Basic"
-            [content]="example1"
-        >
-            <tui-calendar-month-example-1 />
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="range"
-            heading="Range"
-            [content]="example2"
-        >
-            <tui-calendar-month-example-2 />
-        </tui-doc-example>
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample: 'html,ts'"
+            [heading]="example"
+            [id]="example | tuiKebab"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -101,29 +93,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <ol class="b-demo-steps">
-            <li>
-                <p>
-                    Import
-                    <code>TuiCalendarMonthModule</code>
-                    into a module where you want to use our component
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/...alendar-month/calendar-month.component.ts → ...odules/components/calendar-month/index.ts b/...alendar-month/calendar-month.component.ts → ...odules/components/calendar-month/index.ts
@@ -1,6 +1,7 @@
 import {Component} from '@angular/core';
+import {RouterModule} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
+import {TuiDemoModule} from '@demo/utils';
 import type {TuiBooleanHandler} from '@taiga-ui/cdk';
 import {
     TUI_FALSE_HANDLER,
@@ -11,25 +12,17 @@ import {
     TuiMonthRange,
     TuiYear,
 } from '@taiga-ui/cdk';
+import {TuiLinkDirective} from '@taiga-ui/core';
+import {TuiCalendarMonthModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'example-tui-calendar-month',
-    templateUrl: './calendar-month.template.html',
+    standalone: true,
+    imports: [TuiDemoModule, TuiCalendarMonthModule, TuiLinkDirective, RouterModule],
+    templateUrl: './index.html',
     changeDetection,
 })
-export class ExampleTuiCalendarMonthComponent {
-    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 examples = ['Basic', 'Range'];
 
     protected readonly minVariants = [
         TUI_FIRST_DAY,