refactor: drop TuiInteractiveStateT (#7290)

projects/cdk/schematics/ng-update/v4/index.ts

@@ -9,8 +9,9 @@ import {TAIGA_VERSION} from '../../ng-add/constants/versions';
 import type {TuiSchema} from '../../ng-add/schema';
 import {FINISH_SYMBOL, START_SYMBOL, titleLog} from '../../utils/colored-log';
 import {getExecutionTime} from '../../utils/get-execution-time';
-import {removeModules, replaceIdentifiers, showWarnings} from '../steps';
+import {removeModules, replaceEnums, replaceIdentifiers, showWarnings} from '../steps';
 import {getFileSystem} from '../utils/get-file-system';
+import {ENUMS_TO_REPLACE} from '../v4/steps/constants/enums';
 import {
     migrateDestroyService,
     migrateLegacyMask,
@@ -38,6 +39,7 @@ function main(options: TuiSchema): Rule {
         migrateLegacyMask(options);
         migrateDestroyService(options);
 
+        replaceEnums(options, ENUMS_TO_REPLACE);
         migrateTemplates(fileSystem, options);
         migrateStyles();
         showWarnings(context, MIGRATION_WARNINGS);

projects/cdk/schematics/ng-update/v4/steps/constants/enums.ts

@@ -0,0 +1,14 @@
+import type {ReplacementEnum} from '../../../interfaces/replacement-enum';
+
+export const ENUMS_TO_REPLACE: ReplacementEnum[] = [
+    {
+        name: 'TuiInteractiveState',
+        replaceValues: {
+            Disabled: 'disabled',
+            Active: 'active',
+            Hover: 'hover',
+            Readonly: 'readonly',
+        },
+        keepAsType: true,
+    },
+];

projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts

@@ -385,4 +385,8 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifierMulti[] = [
         from: {name: 'TuiLinkModule', moduleSpecifier: '@taiga-ui/core'},
         to: {name: 'TuiLinkDirective', moduleSpecifier: '@taiga-ui/core'},
     },
+    {
+        from: {name: 'TuiInteractiveStateT', moduleSpecifier: '@taiga-ui/core'},
+        to: {name: 'TuiInteractiveState', moduleSpecifier: '@taiga-ui/core'},
+    },
 ];

projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-enums.spec.ts

@@ -0,0 +1,94 @@
+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 COMPONENT_BEFORE = `
+import { TuiInteractiveState, TuiInteractiveStateT } from '@taiga-ui/core';
+
+export class MyComponent {
+    public getItemState(item: TuiDay): TuiInteractiveStateT | null {
+        const {disabledItemHandler, pressedItem, hoveredItem} = this;
+
+        if (disabledItemHandler(item)) {
+            return TuiInteractiveState.Disabled;
+        }
+
+        if (pressedItem?.daySame(item)) {
+            return TuiInteractiveState.Active;
+        }
+
+        if (hoveredItem?.daySame(item)) {
+            return TuiInteractiveState.Hover;
+        }
+
+        return null;
+    }
+}
+`.trim();
+
+const COMPONENT_AFTER = `
+import { TuiInteractiveState } from '@taiga-ui/core';
+
+export class MyComponent {
+    public getItemState(item: TuiDay): TuiInteractiveState | null {
+        const {disabledItemHandler, pressedItem, hoveredItem} = this;
+
+        if (disabledItemHandler(item)) {
+            return 'disabled';
+        }
+
+        if (pressedItem?.daySame(item)) {
+            return 'active';
+        }
+
+        if (hoveredItem?.daySame(item)) {
+            return 'hover';
+        }
+
+        return null;
+    }
+}
+`.trim();
+
+describe('ng-update enums', () => {
+    let host: UnitTestTree;
+    let runner: SchematicTestRunner;
+
+    beforeEach(() => {
+        host = new UnitTestTree(new HostTree());
+        runner = new SchematicTestRunner('schematics', collectionPath);
+
+        setActiveProject(createProject(host));
+
+        createMainFiles();
+
+        saveActiveProject();
+    });
+
+    it('migrate', async () => {
+        const tree = await runner.runSchematic(
+            'updateToV4',
+            {'skip-logs': process.env['TUI_CI'] === 'true'} as Partial<TuiSchema>,
+            host,
+        );
+
+        expect(tree.readContent('test/app/test.component.ts')).toEqual(COMPONENT_AFTER);
+    });
+
+    afterEach(() => resetActiveProject());
+});
+
+function createMainFiles(): void {
+    createSourceFile('test/app/test.component.ts', COMPONENT_BEFORE);
+}

projects/core/components/primitive-calendar/primitive-calendar.component.ts

@@ -17,7 +17,7 @@ import {
 } from '@taiga-ui/cdk';
 import {TUI_DEFAULT_MARKER_HANDLER} from '@taiga-ui/core/constants';
 import type {TuiRangeState} from '@taiga-ui/core/enums';
-import {TuiInteractiveState} from '@taiga-ui/core/enums';
+import type {TuiInteractiveState} from '@taiga-ui/core/interfaces';
 import {TUI_DAY_TYPE_HANDLER, TUI_SHORT_WEEK_DAYS} from '@taiga-ui/core/tokens';
 import type {TuiMarkerHandler} from '@taiga-ui/core/types';
 
@@ -62,15 +62,15 @@ export class TuiPrimitiveCalendarComponent {
         const {disabledItemHandler, pressedItem, hoveredItem} = this;
 
         if (disabledItemHandler(item)) {
-            return TuiInteractiveState.Disabled;
+            return 'disabled';
         }
 
         if (pressedItem?.daySame(item)) {
-            return TuiInteractiveState.Active;
+            return 'active';
         }
 
         if (hoveredItem?.daySame(item)) {
-            return TuiInteractiveState.Hover;
+            return 'hover';
         }
 
         return null;

projects/core/components/primitive-calendar/test/primitive-calendar.component.spec.ts

@@ -13,7 +13,6 @@ import {
 } from '@taiga-ui/cdk';
 import {
     TuiCalendarSheetPipe,
-    TuiInteractiveState,
     TuiPrimitiveCalendarComponent,
     TuiPrimitiveCalendarModule,
 } from '@taiga-ui/core';
@@ -120,9 +119,7 @@ describe('PrimitiveCalendar', () => {
                 it('can be checked due itemIsDisabled', () => {
                     const disabledDay = new TuiDay(2010, 4, 20);
 
-                    expect(component.getItemState(disabledDay)).toBe(
-                        TuiInteractiveState.Disabled,
-                    );
+                    expect(component.getItemState(disabledDay)).toBe('disabled');
                 });
             });
         });
@@ -133,19 +130,15 @@ describe('PrimitiveCalendar', () => {
 
                 component.onItemPressed(dayToPress);
 
-                expect(component.getItemState(dayToPress)).toBe(
-                    TuiInteractiveState.Active,
-                );
+                expect(component.getItemState(dayToPress)).toBe('active');
             });
 
             it('returns hovered state if it is not disabled and pressed', () => {
                 const dayToHover = new TuiDay(2019, 4, 16);
 
                 component.onItemHovered(dayToHover);
 
-                expect(component.getItemState(dayToHover)).toBe(
-                    TuiInteractiveState.Hover,
-                );
+                expect(component.getItemState(dayToHover)).toBe('hover');
             });
         });
 

projects/core/components/primitive-year-picker/primitive-year-picker.component.ts

@@ -17,7 +17,7 @@ import {
     TuiYear,
 } from '@taiga-ui/cdk';
 import type {TuiRangeState} from '@taiga-ui/core/enums';
-import {TuiInteractiveState} from '@taiga-ui/core/enums';
+import type {TuiInteractiveState} from '@taiga-ui/core/interfaces';
 
 const LIMIT = 100;
 const ITEMS_IN_ROW = 4;
@@ -59,15 +59,15 @@ export class TuiPrimitiveYearPickerComponent {
             max.year < item ||
             (disabledItemHandler !== TUI_FALSE_HANDLER && disabledItemHandler(item))
         ) {
-            return TuiInteractiveState.Disabled;
+            return 'disabled';
         }
 
         if (pressedItem === item) {
-            return TuiInteractiveState.Active;
+            return 'active';
         }
 
         if (hoveredItem === item) {
-            return TuiInteractiveState.Hover;
+            return 'hover';
         }
 
         return null;

projects/core/components/primitive-year-picker/test/primitive-year-picker.component.spec.ts

@@ -3,7 +3,6 @@ import type {ComponentFixture} from '@angular/core/testing';
 import {TestBed} from '@angular/core/testing';
 import {TUI_FIRST_DAY, TuiDay, TuiDayRange, TuiYear} from '@taiga-ui/cdk';
 import {
-    TuiInteractiveState,
     TuiPrimitiveYearPickerComponent,
     TuiPrimitiveYearPickerModule,
 } from '@taiga-ui/core';
@@ -67,23 +66,23 @@ describe('TuiPrimitiveYearPickerComponent', () => {
 
             component.max = new TuiYear(item - 1);
 
-            expect(component.getItemState(item)).toBe(TuiInteractiveState.Disabled);
+            expect(component.getItemState(item)).toBe('disabled');
         });
 
         it('returns pressed state if it is not disabled', () => {
             const item = 2019;
 
             component.onItemPressed(true, item);
 
-            expect(component.getItemState(item)).toBe(TuiInteractiveState.Active);
+            expect(component.getItemState(item)).toBe('active');
         });
 
         it('returns hovered state if it is not disabled and pressed', () => {
             const item = 2019;
 
             component.onItemHovered(true, item);
 
-            expect(component.getItemState(item)).toBe(TuiInteractiveState.Hover);
+            expect(component.getItemState(item)).toBe('hover');
         });
     });
 

projects/core/directives/appearance/appearance.directive.ts

@@ -1,5 +1,5 @@
 import {Directive, inject, Input} from '@angular/core';
-import type {TuiInteractiveStateT} from '@taiga-ui/core/enums';
+import type {TuiInteractiveState} from '@taiga-ui/core/interfaces';
 
 import {TUI_APPEARANCE_OPTIONS} from './appearance.options';
 
@@ -18,7 +18,7 @@ export class TuiAppearanceDirective {
     public tuiAppearance = inject(TUI_APPEARANCE_OPTIONS).appearance;
 
     @Input()
-    public tuiAppearanceState: TuiInteractiveStateT | null = null;
+    public tuiAppearanceState: TuiInteractiveState | null = null;
 
     @Input()
     public tuiAppearanceFocus: boolean | null = null;

projects/core/directives/wrapper/wrapper.directive.ts

@@ -1,5 +1,5 @@
 import {Directive, HostBinding, Input} from '@angular/core';
-import {TuiInteractiveState} from '@taiga-ui/core/enums';
+import type {TuiInteractiveState} from '@taiga-ui/core/interfaces';
 
 @Directive({
     selector: '[tuiWrapper]',
@@ -40,19 +40,19 @@ export class TuiWrapperDirective {
     @HostBinding('attr.data-state')
     protected get interactiveState(): TuiInteractiveState | string | null {
         if (this.disabled) {
-            return TuiInteractiveState.Disabled;
+            return 'disabled';
         }
 
         if (this.readOnly) {
-            return TuiInteractiveState.Readonly;
+            return 'readonly';
         }
 
         if (this.active) {
-            return TuiInteractiveState.Active;
+            return 'active';
         }
 
         if (this.hover) {
-            return TuiInteractiveState.Hover;
+            return 'hover';
         }
 
         return null;

projects/core/enums/index.ts

@@ -1,4 +1,3 @@
 export * from './appearance';
 export * from './dropdown-animation';
-export * from './interactive-state';
 export * from './range-state';

projects/core/interfaces/index.ts

@@ -2,6 +2,7 @@ export * from './data-list-accessor';
 export * from './data-list-host';
 export * from './date-format-settings';
 export * from './icon-error';
+export * from './interactive-state';
 export * from './media';
 export * from './number-format-settings';
 export * from './portal-item';

projects/core/interfaces/interactive-state.ts

@@ -0,0 +1 @@
+export type TuiInteractiveState = 'active' | 'disabled' | 'hover' | 'readonly';

projects/demo/src/modules/directives/appearance/appearance.component.ts

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import type {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
-import type {TuiInteractiveStateT} from '@taiga-ui/core';
+import type {TuiInteractiveState} from '@taiga-ui/core';
 
 @Component({
     selector: 'example-appearance',
@@ -34,8 +34,8 @@ export class ExampleTuiAppearanceComponent {
     protected appearances = ['primary', 'secondary', 'flat'];
     protected appearance = this.appearances[0];
 
-    protected states: readonly TuiInteractiveStateT[] = ['hover', 'active', 'disabled'];
-    protected state: TuiInteractiveStateT | null = null;
+    protected states: readonly TuiInteractiveState[] = ['hover', 'active', 'disabled'];
+    protected state: TuiInteractiveState | null = null;
 
     protected focus: boolean | null = null;
 }

projects/experimental/components/textfield/textfield.directive.ts

@@ -1,7 +1,7 @@
 import type {DoCheck} from '@angular/core';
 import {Directive, ElementRef, inject, Input} from '@angular/core';
 import {TuiIdService, TuiNativeValidatorDirective} from '@taiga-ui/cdk';
-import type {TuiInteractiveStateT} from '@taiga-ui/core';
+import type {TuiInteractiveState} from '@taiga-ui/core';
 import {TuiAppearanceDirective} from '@taiga-ui/core';
 
 import {TuiTextfieldComponent} from './textfield.component';
@@ -36,7 +36,7 @@ export class TuiTextfieldDirective implements DoCheck {
     public focused: boolean | null = null;
 
     @Input()
-    public state: TuiInteractiveStateT | null = null;
+    public state: TuiInteractiveState | null = null;
 
     protected readonly textfield = inject(TuiTextfieldComponent);
     protected readonly id = inject(TuiIdService).generate();