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

…#7245)
taiga-family · May 22, 2024 · a4e5f75 · a4e5f75
1 parent d98e0ae
commit a4e5f75
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 125 deletions.
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -629,10 +629,8 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.CalendarRange,
-        loadChildren: async () =>
-            (await import('../components/calendar-range/calendar-range.module'))
-                .ExampleTuiCalendarRangeModule,
         title: 'CalendarRange',
+        loadComponent: async () => import('../components/calendar-range'),
     }),
     route({
         path: DemoRoute.Select,

diff --git a/projects/demo/src/modules/components/calendar-range/calendar-range.module.ts b/projects/demo/src/modules/components/calendar-range/calendar-range.module.ts
diff --git a/projects/demo/src/modules/components/calendar-range/examples/1/index.ts b/projects/demo/src/modules/components/calendar-range/examples/1/index.ts
@@ -1,11 +1,13 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiCalendarRangeModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-calendar-range-example-1',
+    standalone: true,
+    imports: [TuiCalendarRangeModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiCalendarRangeExample1 {}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/components/calendar-range/examples/2/index.ts b/projects/demo/src/modules/components/calendar-range/examples/2/index.ts
@@ -2,15 +2,16 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiDay, TuiDayRange} from '@taiga-ui/cdk';
-import {TUI_CALENDAR_DATE_STREAM} from '@taiga-ui/kit';
+import {TUI_CALENDAR_DATE_STREAM, TuiCalendarRangeModule} from '@taiga-ui/kit';
 import {of} from 'rxjs';
 
 export const calendarStream$ = of(
     new TuiDayRange(new TuiDay(2019, 2, 11), new TuiDay(2019, 2, 14)),
 );
 
 @Component({
-    selector: 'tui-calendar-range-example-2',
+    standalone: true,
+    imports: [TuiCalendarRangeModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
@@ -21,4 +22,4 @@ export const calendarStream$ = of(
         },
     ],
 })
-export class TuiCalendarRangeExample2 {}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/components/calendar-range/examples/3/index.ts b/projects/demo/src/modules/components/calendar-range/examples/3/index.ts
@@ -1,14 +1,15 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {tuiCreateDefaultDayRangePeriods} from '@taiga-ui/kit';
+import {TuiCalendarRangeModule, tuiCreateDefaultDayRangePeriods} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-calendar-range-example-3',
+    standalone: true,
+    imports: [TuiCalendarRangeModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiCalendarRangeExample3 {
+export default class ExampleComponent {
     protected items = tuiCreateDefaultDayRangePeriods();
 }
diff --git a/projects/demo/src/modules/components/calendar-range/examples/4/index.ts b/projects/demo/src/modules/components/calendar-range/examples/4/index.ts
@@ -3,9 +3,11 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiDayOfWeek} from '@taiga-ui/cdk';
 import {TUI_FIRST_DAY_OF_WEEK} from '@taiga-ui/core';
+import {TuiCalendarRangeModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-calendar-range-example-4',
+    standalone: true,
+    imports: [TuiCalendarRangeModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
@@ -16,4 +18,4 @@ import {TUI_FIRST_DAY_OF_WEEK} from '@taiga-ui/core';
         },
     ],
 })
-export class TuiCalendarRangeExample4 {}
+export default class ExampleComponent {}
diff --git a/...ar-range/examples/import/import-module.md → .../calendar-range/examples/import/import.md b/...ar-range/examples/import/import-module.md → .../calendar-range/examples/import/import.md
diff --git a/projects/demo/src/modules/components/calendar-range/examples/import/template.md b/projects/demo/src/modules/components/calendar-range/examples/import/template.md
@@ -0,0 +1,3 @@
+```html
+<tui-calendar-range />
+```
diff --git a/...lendar-range/calendar-range.template.html → ...ules/components/calendar-range/index.html b/...lendar-range/calendar-range.template.html → ...ules/components/calendar-range/index.html
@@ -7,47 +7,29 @@
         <p>Component for choosing date range in calendar</p>
 
         <tui-doc-example
-            id="base"
-            heading="Basic"
-            [content]="example1"
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample: 'html,ts'"
+            [description]="description"
+            [heading]="example"
+            [id]="example | tuiKebab"
         >
-            <tui-calendar-range-example-1 />
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="with-value"
-            heading="with value"
-            [content]="example2"
-        >
-            <tui-calendar-range-example-2 />
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="periods"
-            heading="with ranges"
-            [content]="example3"
-        >
-            <tui-calendar-range-example-3 />
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="localization"
-            heading="Localization"
-            [content]="example4"
-            [description]="localizationDescription"
-        >
-            <ng-template #localizationDescription>
-                Use
-                <a
-                    fragment="first-day-of-week"
-                    routerLink="/utils/tokens"
-                    tuiLink
-                >
-                    TUI_FIRST_DAY_OF_WEEK
-                </a>
-                token to change start day of the week (Monday by default).
+            <ng-template
+                #description
+                [ngSwitch]="index + 1"
+            >
+                <div *ngSwitchCase="4">
+                    Use
+                    <a
+                        fragment="first-day-of-week"
+                        routerLink="/utils/tokens"
+                        tuiLink
+                    >
+                        TUI_FIRST_DAY_OF_WEEK
+                    </a>
+                    token to change start day of the week (Monday by default).
+                </div>
             </ng-template>
-            <tui-calendar-range-example-4 />
         </tui-doc-example>
     </ng-template>
 
@@ -151,20 +133,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <ol class="tui-list tui-list_ordered">
-            <li class="tui-list__item">
-                <p>
-                    Import
-                    <code>TuiCalendarRangeModule</code>
-                    into a module where you want to use our component
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-        </ol>
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/...alendar-range/calendar-range.component.ts → ...odules/components/calendar-range/index.ts b/...alendar-range/calendar-range.component.ts → ...odules/components/calendar-range/index.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
+import {TuiDemo} from '@demo/utils';
 import type {TuiBooleanHandler, TuiDayLike} from '@taiga-ui/cdk';
 import {
     TUI_FALSE_HANDLER,
@@ -10,39 +10,21 @@ import {
     TuiMonth,
 } from '@taiga-ui/cdk';
 import type {TuiMarkerHandler} from '@taiga-ui/core';
+import {TuiLinkDirective} from '@taiga-ui/core';
 import type {TuiDayRangePeriod} from '@taiga-ui/kit';
-import {tuiCreateDefaultDayRangePeriods} from '@taiga-ui/kit';
+import {TuiCalendarRangeModule, tuiCreateDefaultDayRangePeriods} from '@taiga-ui/kit';
 
 const TWO_DOTS: [string, string] = ['var(--tui-primary)', 'var(--tui-info-fill)'];
 const ONE_DOT: [string] = ['var(--tui-success-fill)'];
 
 @Component({
-    selector: 'example-calendar-range',
-    templateUrl: './calendar-range.template.html',
+    standalone: true,
+    imports: [TuiDemo, TuiCalendarRangeModule, TuiLinkDirective],
+    templateUrl: './index.html',
     changeDetection,
 })
-export class ExampleTuiCalendarRangeComponent {
-    protected readonly exampleModule = import('./examples/import/import-module.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'),
-    };
-
-    protected readonly example3: TuiDocExample = {
-        TypeScript: import('./examples/3/index.ts?raw'),
-        HTML: import('./examples/3/index.html?raw'),
-    };
-
-    protected readonly example4: TuiDocExample = {
-        TypeScript: import('./examples/4/index.ts?raw'),
-        HTML: import('./examples/4/index.html?raw'),
-    };
+export default class ExampleComponent {
+    protected readonly examples = ['Basic', 'With value', 'With ranges', 'Localization'];
 
     protected readonly minVariants = [
         TUI_FIRST_DAY,