chore(demo): standalone (#7576)

taiga-family · May 30, 2024 · 7bf7a73 · 7bf7a73
1 parent 582625f
commit 7bf7a73
Show file tree

Hide file tree

Showing 153 changed files with 1,369 additions and 2,109 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -21,7 +21,7 @@
     "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"],
     "overrides": [
         {
-            "filename": ["**/components/loader/loader.template.html"],
+            "filename": ["**/components/loader/index.html"],
             "ignoreWords": ["protestin", "spittin", "callin", "yellin"]
         },
         {

diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -356,16 +356,12 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.Sensitive,
-        loadChildren: async () =>
-            (await import('../directives/sensitive/sensitive.module'))
-                .ExampleTuiSensitiveModule,
+        loadComponent: async () => import('../directives/sensitive'),
         title: 'Sensitive',
     }),
     route({
         path: DemoRoute.Skeleton,
-        loadChildren: async () =>
-            (await import('../directives/skeleton/skeleton.module'))
-                .ExampleTuiSkeletonModule,
+        loadComponent: async () => import('../directives/skeleton'),
         title: 'Skeleton',
     }),
     route({
@@ -385,9 +381,7 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.InputDateMulti,
-        loadChildren: async () =>
-            (await import('../components/input-date-multi/input-date-multi.module'))
-                .ExampleTuiInputDateMultiModule,
+        loadComponent: async () => import('../components/input-date-multi'),
         title: 'InputDateMulti',
     }),
     route({
@@ -402,9 +396,7 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.InputCopy,
-        loadChildren: async () =>
-            (await import('../components/input-copy/input-copy.module'))
-                .ExampleTuiInputCopyModule,
+        loadComponent: async () => import('../components/input-copy'),
         title: 'InputCopy',
     }),
     route({
@@ -522,8 +514,7 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.Loader,
-        loadChildren: async () =>
-            (await import('../components/loader/loader.module')).ExampleTuiLoaderModule,
+        loadComponent: async () => import('../components/loader'),
         title: 'Loader',
     }),
     route({
@@ -533,8 +524,7 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.Push,
-        loadChildren: async () =>
-            (await import('../components/push/push.module')).ExampleTuiPushModule,
+        loadComponent: async () => import('../components/push'),
         title: 'Push',
     }),
     route({
@@ -559,16 +549,12 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.MultiSelect,
-        loadChildren: async () =>
-            (await import('../components/multi-select/multi-select.module'))
-                .ExampleTuiMultiSelectModule,
+        loadComponent: async () => import('../components/multi-select'),
         title: 'MultiSelect',
     }),
     route({
         path: DemoRoute.Pagination,
-        loadChildren: async () =>
-            (await import('../components/pagination/pagination.module'))
-                .ExampleTuiPaginationModule,
+        loadComponent: async () => import('../components/pagination'),
         title: 'Pagination',
     }),
     route({
@@ -588,8 +574,7 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.Range,
-        loadChildren: async () =>
-            (await import('../components/range/range.module')).ExampleTuiRangeModule,
+        loadComponent: async () => import('../components/range'),
         title: 'Range',
     }),
     route({
@@ -599,15 +584,12 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.Select,
-        loadChildren: async () =>
-            (await import('../components/select/select.module')).ExampleTuiSelectModule,
+        loadComponent: async () => import('../components/select'),
         title: 'Select',
     }),
     route({
         path: DemoRoute.Scrollbar,
-        loadChildren: async () =>
-            (await import('../components/scrollbar/scrollbar.module'))
-                .ExampleTuiScrollbarModule,
+        loadComponent: async () => import('../components/scrollbar'),
         title: 'Scrollbar',
     }),
     route({
@@ -622,8 +604,7 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.Slider,
-        loadChildren: async () =>
-            (await import('../components/slider/slider.module')).ExampleTuiSliderModule,
+        loadComponent: async () => import('../components/slider'),
         title: 'Slider',
     }),
     route({

diff --git a/projects/demo/src/modules/components/input-copy/examples/1/index.ts b/projects/demo/src/modules/components/input-copy/examples/1/index.ts
@@ -1,15 +1,18 @@
 import {Component} from '@angular/core';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputCopyModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-copy-example-1',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputCopyModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputCopyExample1 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl('', Validators.required),
     });

diff --git a/projects/demo/src/modules/components/input-copy/examples/import/declare-form.md b/projects/demo/src/modules/components/input-copy/examples/import/declare-form.md
diff --git a/...put-copy/examples/import/import-module.md → ...ents/input-copy/examples/import/import.md b/...put-copy/examples/import/import-module.md → ...ents/input-copy/examples/import/import.md
@@ -14,5 +14,9 @@ import {TuiInputCopyModule} from '@taiga-ui/legacy';
   ],
   // ...
 })
-export class MyComponent {}
+export class MyComponent {
+  testForm = new FormGroup({
+    testValue: new FormControl(''),
+  });
+}
 ```
diff --git a/...t-copy/examples/import/insert-template.md → ...ts/input-copy/examples/import/template.md b/...t-copy/examples/import/insert-template.md → ...ts/input-copy/examples/import/template.md
diff --git a/...nents/input-copy/input-copy.template.html → .../modules/components/input-copy/index.html b/...nents/input-copy/input-copy.template.html → .../modules/components/input-copy/index.html
@@ -9,7 +9,8 @@
         <tui-doc-example
             id="example-size"
             heading="sizes"
-            [content]="example1"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
         >
             <tui-notification class="tui-space_bottom-4">
                 If you need to set some attributes or listen to events on native
@@ -18,7 +19,6 @@
                 <code>Textfield</code>
                 directive as shown below
             </tui-notification>
-            <tui-input-copy-example-1 />
         </tui-doc-example>
     </ng-template>
 
@@ -101,44 +101,5 @@
         , that says that content is copied
     </ng-template>
 
-    <ng-template pageTab>
-        <ol class="tui-list tui-list_ordered">
-            <li class="tui-list__item">
-                <p>
-                    Import
-                    <code>TuiInputCopyModule</code>
-                    into a module where you want to use our component
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li class="tui-list__item">
-                <p>
-                    Declare a form (
-                    <code>FormGroup</code>
-                    ) or a control (
-                    <code>FormControl</code>
-                    ) in your component:
-                </p>
-
-                <tui-doc-code
-                    filename="my.component.ts"
-                    [code]="exampleForm"
-                />
-            </li>
-
-            <li class="tui-list__item">
-                <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/...onents/input-copy/input-copy.component.ts → ...rc/modules/components/input-copy/index.ts b/...onents/input-copy/input-copy.component.ts → ...rc/modules/components/input-copy/index.ts
@@ -1,24 +1,35 @@
 import {Component, ViewChild} from '@angular/core';
-import {FormControl, Validators} from '@angular/forms';
+import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
+import {TuiDemo} from '@demo/utils';
 import {tuiDocExcludeProperties} from '@taiga-ui/addon-doc';
 import {tuiProvide} from '@taiga-ui/cdk';
+import {TuiNotificationComponent, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputCopyModule} from '@taiga-ui/legacy';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
 import {AbstractExampleTuiControl} from '../abstract/control';
+import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
 
 @Component({
-    selector: 'example-input-copy',
-    templateUrl: './input-copy.template.html',
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiNotificationComponent,
+        TuiInputCopyModule,
+        ReactiveFormsModule,
+        TuiTextfieldControllerModule,
+        InheritedDocumentationComponent,
+    ],
+    templateUrl: './index.html',
     changeDetection,
     providers: [
-        tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiInputCopyComponent),
+        tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent),
         tuiDocExcludeProperties(['tuiTextfieldPrefix', 'tuiTextfieldPostfix']),
     ],
 })
-export class ExampleTuiInputCopyComponent extends AbstractExampleTuiControl {
+export default class PageComponent extends AbstractExampleTuiControl {
     public readonly control = new FormControl('', Validators.required);
 
     public override readonly maxLengthVariants: readonly number[] = [10];
@@ -28,15 +39,6 @@ export class ExampleTuiInputCopyComponent extends AbstractExampleTuiControl {
     @ViewChild('customTemplate')
     protected customTemplate: PolymorpheusContent;
 
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-    protected readonly exampleForm = import('./examples/import/declare-form.md?raw');
-
     protected readonly successMessageVariants = ['Copied', 'Template'];
 
     protected successMessage = this.successMessageVariants[0];

diff --git a/projects/demo/src/modules/components/input-copy/input-copy.module.ts b/projects/demo/src/modules/components/input-copy/input-copy.module.ts
diff --git a/projects/demo/src/modules/components/input-date-multi/examples/1/index.ts b/projects/demo/src/modules/components/input-date-multi/examples/1/index.ts
@@ -1,16 +1,19 @@
 import {Component} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiDay} from '@taiga-ui/cdk';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputDateMultiModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-date-multi-example-1',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputDateMultiModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputDateMultiExample1 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl([
             new TuiDay(2017, 0, 7),

diff --git a/...ts/demo/src/modules/components/input-date-multi/examples/import/declare-form.md b/...ts/demo/src/modules/components/input-date-multi/examples/import/declare-form.md
diff --git a/...te-multi/examples/import/import-module.md → ...nput-date-multi/examples/import/import.md b/...te-multi/examples/import/import-module.md → ...nput-date-multi/examples/import/import.md
@@ -11,5 +11,9 @@ import {TuiInputDateMultiModule} from '@taiga-ui/legacy';
   ],
   // ...
 })
-export class MyComponent {}
+export class MyComponent {
+  testForm = new FormGroup({
+    testValue: new FormControl([]),
+  });
+}
 ```
diff --git a/...-multi/examples/import/insert-template.md → ...ut-date-multi/examples/import/template.md b/...-multi/examples/import/insert-template.md → ...ut-date-multi/examples/import/template.md