refactor!: Rating replace with experimental component, add migration (

#7134) Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Mar 29, 2024 · 66aeb22 · 66aeb22
1 parent d85944c
commit 66aeb22
Show file tree

Hide file tree

Showing 56 changed files with 410 additions and 1,365 deletions.
diff --git a/projects/cdk/constants/used-icons.ts b/projects/cdk/constants/used-icons.ts
@@ -50,7 +50,6 @@ export const TUI_USED_ICONS = [
     'tuiIconChevronRight',
     'tuiIconChevronLeft',
     'tuiIconCalendarLarge',
-    'tuiIconStarLarge',
     'tuiIconChevronDown',
     'tuiIconChevronDownLarge',
     'tuiIconMinusLarge',
@@ -63,5 +62,6 @@ export const TUI_USED_ICONS = [
     'tuiIconEyeLarge',
     'tuiIconClock',
     'tuiIconClockLarge',
+    'tuiIconStarLarge',
     'tuiIconCalendar',
 ] as const;
diff --git a/projects/cdk/schematics/ng-update/v4/index.ts b/projects/cdk/schematics/ng-update/v4/index.ts
@@ -22,6 +22,7 @@ import {
     MIGRATION_WARNINGS,
     MODULES_TO_REMOVE,
 } from './steps/constants';
+import {migrateStyles} from './steps/migrate-styles';
 
 function main(options: TuiSchema): Rule {
     return (tree: Tree, context: SchematicContext) => {
@@ -36,6 +37,7 @@ function main(options: TuiSchema): Rule {
         migrateDestroyService(options);
 
         migrateTemplates(fileSystem, options);
+        migrateStyles();
         showWarnings(context, MIGRATION_WARNINGS);
 
         fileSystem.commitEdits();

diff --git a/projects/cdk/schematics/ng-update/v4/steps/constants/html-comments.ts b/projects/cdk/schematics/ng-update/v4/steps/constants/html-comments.ts
@@ -19,4 +19,10 @@ export const HTML_COMMENTS: HtmlComment[] = [
         comment:
             'radio [identityMatcher] and [pseudoDisabled] inputs have been removed. If you need a workaround, please start a discussion on GitHub to think together',
     },
+    {
+        tag: 'tui-rating',
+        withAttrs: ['iconFilled', 'iconNormal'],
+        comment:
+            'rating [iconFilled] and [iconNormal] inputs have been removed. Use [icon] instead. See example https://taiga-ui.dev/components/rating#icons',
+    },
 ];
diff --git a/projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts b/projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts
@@ -271,4 +271,12 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifier[] = [
         from: {name: 'TuiCompassModule', moduleSpecifier: '@taiga-ui/experimental'},
         to: {name: 'TuiCompassComponent', moduleSpecifier: '@taiga-ui/kit'},
     },
+    {
+        from: {name: 'TuiRatingModule', moduleSpecifier: '@taiga-ui/experimental'},
+        to: {name: 'TuiRatingComponent', moduleSpecifier: '@taiga-ui/kit'},
+    },
+    {
+        from: {name: 'TuiRatingModule', moduleSpecifier: '@taiga-ui/kit'},
+        to: {name: 'TuiRatingComponent', moduleSpecifier: '@taiga-ui/kit'},
+    },
 ];
diff --git a/projects/cdk/schematics/ng-update/v4/steps/migrate-styles.ts b/projects/cdk/schematics/ng-update/v4/steps/migrate-styles.ts
@@ -0,0 +1,20 @@
+import {getActiveProject} from 'ng-morph';
+
+export const TUI_RATING_WARNING =
+    '// TODO: (Taiga UI migration): use css to customize rating gap and size. See https://taiga-ui.dev/components/rating#basic';
+
+export function migrateStyles(): void {
+    getActiveProject()
+        ?.getSourceFiles('**/**.{less,sass,scss,css}')
+        .forEach(sourceFile => {
+            let fullText = sourceFile.getFullText();
+
+            fullText = fullText
+                // eslint-disable-next-line
+                .replace(/^(.*--tui-rating-size.*)$/gm, `${TUI_RATING_WARNING}\n$1`)
+                // eslint-disable-next-line
+                .replace(/^(.*--tui-rating-gap.*)$/gm, `${TUI_RATING_WARNING}\n$1`);
+
+            sourceFile.replaceWithText(fullText);
+        });
+}
diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-styles.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-styles.spec.ts
@@ -0,0 +1,70 @@
+import {join} from 'node:path';
+
+import {HostTree} from '@angular-devkit/schematics';
+import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
+import type {TuiSchema} from '@taiga-ui/cdk/schematics/ng-add/schema';
+import {
+    createProject,
+    createSourceFile,
+    resetActiveProject,
+    saveActiveProject,
+    setActiveProject,
+} from 'ng-morph';
+
+const collectionPath = join(__dirname, '../../../migration.json');
+
+const STYLES_BEFORE = `
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    --tui-rating-size: 1.5rem;
+
+    --tui-rating-gap: 0.5rem;
+}
+`;
+
+const STYLES_AFTER = `
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+// TODO: (Taiga UI migration): use css to customize rating gap and size. See https://taiga-ui.dev/components/rating#basic
+    --tui-rating-size: 1.5rem;
+
+// TODO: (Taiga UI migration): use css to customize rating gap and size. See https://taiga-ui.dev/components/rating#basic
+    --tui-rating-gap: 0.5rem;
+}
+`;
+
+describe('ng-update', () => {
+    let host: UnitTestTree;
+    let runner: SchematicTestRunner;
+
+    beforeEach(() => {
+        host = new UnitTestTree(new HostTree());
+        runner = new SchematicTestRunner('schematics', collectionPath);
+
+        setActiveProject(createProject(host));
+
+        createMainFiles();
+
+        saveActiveProject();
+    });
+
+    it('should migrate styles', async () => {
+        const tree = await runner.runSchematic(
+            'updateToV4',
+            {'skip-logs': process.env['TUI_CI'] === 'true'} as Partial<TuiSchema>,
+            host,
+        );
+
+        expect(tree.readContent('test/styles.less')).toEqual(STYLES_AFTER);
+    });
+
+    afterEach(() => resetActiveProject());
+});
+
+function createMainFiles(): void {
+    createSourceFile('test/styles.less', STYLES_BEFORE);
+}
diff --git a/projects/demo-playwright/tests/kit/rating/rating.spec.ts b/projects/demo-playwright/tests/kit/rating/rating.spec.ts
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -289,14 +289,6 @@ export const ROUTES: Routes = [
         title: 'Label ',
         loadComponent: async () => import('../experimental/label'),
     }),
-    {
-        path: 'experimental/rating',
-        loadChildren: async () =>
-            (await import('../experimental/rating/rating.module')).ExampleTuiRatingModule,
-        data: {
-            title: 'Rating',
-        },
-    },
     {
         path: 'experimental/segmented',
         loadChildren: async () =>
@@ -880,14 +872,11 @@ export const ROUTES: Routes = [
         title: 'Radio',
         loadComponent: async () => import('../components/radio'),
     }),
-    {
+    route({
         path: 'components/rating',
-        loadChildren: async () =>
-            (await import('../components/rating/rating.module')).ExampleTuiRatingModule,
-        data: {
-            title: 'Rating',
-        },
-    },
+        title: 'Rating',
+        loadComponent: async () => import('../components/rating'),
+    }),
     {
         path: 'components/range',
         loadChildren: async () =>

diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -914,12 +914,6 @@ export const pages: TuiDocPages = [
         keywords: 'лэйбл, метка, форма, label',
         route: '/experimental/label',
     },
-    {
-        section: 'Experimental',
-        title: 'Rating ',
-        keywords: 'рейтинг, оценка, звезда, rating, star, rate',
-        route: '/experimental/rating',
-    },
     {
         section: 'Experimental',
         title: 'Segmented',

diff --git a/projects/demo/src/modules/components/rating/examples/1/index.html b/projects/demo/src/modules/components/rating/examples/1/index.html
@@ -1,51 +1,6 @@
-<div class="example">
-    <h2>Template Driven</h2>
-
-    <p>
-        <b>value = {{ rateValue }}</b>
-    </p>
+<label tuiLabel="Rate Taiga UI">
     <tui-rating
         class="rating"
-        [(ngModel)]="rateValue"
+        [(ngModel)]="value"
     />
-
-    <p>
-        <b>Read only</b>
-    </p>
-    <tui-rating
-        class="rating"
-        [readOnly]="true"
-        [(ngModel)]="rateValue"
-    />
-
-    <p>
-        <b>Disabled</b>
-    </p>
-    <tui-rating
-        class="rating"
-        [disabled]="true"
-        [(ngModel)]="rateValue"
-    />
-</div>
-
-<div class="example">
-    <h2>Reactive Forms / Disabled</h2>
-
-    <p>
-        <b>value = {{ rateControl.value }}</b>
-    </p>
-    <tui-rating
-        class="rating"
-        [formControl]="rateControl"
-    />
-</div>
-
-<button
-    size="xs"
-    tuiButton
-    type="button"
-    class="example"
-    (click)="enableOrDisable()"
->
-    {{ rateControl.disabled ? 'enable' : 'disable' }} form control
-</button>
+</label>
diff --git a/projects/demo/src/modules/components/rating/examples/1/index.less b/projects/demo/src/modules/components/rating/examples/1/index.less
@@ -1,9 +1,5 @@
-@import '@taiga-ui/core/styles/taiga-ui-local';
-
-.example {
-    .tui-space(bottom, 2);
-}
-
 .rating {
-    color: var(--tui-accent);
+    fill: currentColor;
+    font-size: 0.625rem;
+    width: 10rem;
 }
diff --git a/projects/demo/src/modules/components/rating/examples/1/index.ts b/projects/demo/src/modules/components/rating/examples/1/index.ts
@@ -1,22 +1,18 @@
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiLabelModule} from '@taiga-ui/core';
+import {TuiRatingComponent} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-rating-example-1',
+    standalone: true,
+    imports: [TuiRatingComponent, TuiLabelModule, FormsModule],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
+    encapsulation,
     changeDetection,
 })
-export class TuiRatingExample1 {
-    protected rateControl = new FormControl(2);
-    protected rateValue = 2;
-
-    protected enableOrDisable(): void {
-        if (this.rateControl.disabled) {
-            this.rateControl.enable();
-        } else {
-            this.rateControl.disable();
-        }
-    }
+export default class ExampleComponent {
+    protected value = 0;
 }
diff --git a/projects/demo/src/modules/components/rating/examples/2/index.html b/projects/demo/src/modules/components/rating/examples/2/index.html
@@ -1,34 +1,20 @@
-<div class="example">
-    <h2>Custom colors</h2>
-
-    <p>
-        <b>Yellow / value = {{ firstRate }}</b>
-    </p>
+<label tuiLabel="Are you satisfied with Taiga UI?">
     <tui-rating
-        class="yellow"
-        [(ngModel)]="firstRate"
+        class="rating"
+        [attr.data-value]="value"
+        [icon]="icon"
+        [max]="3"
+        [(ngModel)]="value"
     />
-
-    <p>
-        <b>10 stars / value = {{ secondRate }}</b>
-    </p>
-    <tui-rating
-        class="pink"
-        [max]="10"
-        [(ngModel)]="secondRate"
-    />
-</div>
-
-<div class="example">
-    <h2>Custom icons</h2>
-
-    <p>
-        <b>Controlled / value = {{ thirdRate }}</b>
-    </p>
-    <tui-rating
-        iconFilled="tuiIconHeartLarge"
-        iconNormal="tuiIconHeart"
-        class="red"
-        [(ngModel)]="thirdRate"
-    />
-</div>
+    <button
+        *ngIf="value"
+        appearance="icon"
+        iconLeft="tuiIconCloseLarge"
+        size="s"
+        tuiIconButton
+        class="button"
+        (click)="value = 0"
+    >
+        Clear
+    </button>
+</label>