From c529859f1973813d4f579e8ac5c3508bb7345e48 Mon Sep 17 00:00:00 2001 From: Maksim Ivanov Date: Wed, 24 Apr 2024 23:26:21 +0300 Subject: [PATCH] refactor: drop `TuiInteractiveStateT` (#7290) --- projects/cdk/schematics/ng-update/v4/index.ts | 4 +- .../ng-update/v4/steps/constants/enums.ts | 14 +++ .../steps/constants/identifiers-to-replace.ts | 4 + .../v4/tests/schematic-migrate-enums.spec.ts | 94 +++++++++++++++++++ .../primitive-calendar.component.ts | 8 +- .../test/primitive-calendar.component.spec.ts | 13 +-- .../primitive-year-picker.component.ts | 8 +- .../primitive-year-picker.component.spec.ts | 7 +- .../appearance/appearance.directive.ts | 4 +- .../directives/wrapper/wrapper.directive.ts | 10 +- projects/core/enums/index.ts | 1 - projects/core/enums/interactive-state.ts | 13 --- projects/core/interfaces/index.ts | 1 + projects/core/interfaces/interactive-state.ts | 1 + .../appearance/appearance.component.ts | 6 +- .../textfield/textfield.directive.ts | 4 +- .../calendar-month.component.ts | 13 ++- .../test/calendar-month.component.spec.ts | 9 +- 18 files changed, 154 insertions(+), 60 deletions(-) create mode 100644 projects/cdk/schematics/ng-update/v4/steps/constants/enums.ts create mode 100644 projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-enums.spec.ts delete mode 100644 projects/core/enums/interactive-state.ts create mode 100644 projects/core/interfaces/interactive-state.ts diff --git a/projects/cdk/schematics/ng-update/v4/index.ts b/projects/cdk/schematics/ng-update/v4/index.ts index 71da436fedf4..5097911345d9 100644 --- a/projects/cdk/schematics/ng-update/v4/index.ts +++ b/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); diff --git a/projects/cdk/schematics/ng-update/v4/steps/constants/enums.ts b/projects/cdk/schematics/ng-update/v4/steps/constants/enums.ts new file mode 100644 index 000000000000..af8491ff4467 --- /dev/null +++ b/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, + }, +]; 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 index 5bf414a7e796..2cabb2e0404e 100644 --- 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 @@ -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'}, + }, ]; diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-enums.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-enums.spec.ts new file mode 100644 index 000000000000..a1cedc64a135 --- /dev/null +++ b/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, + 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); +} diff --git a/projects/core/components/primitive-calendar/primitive-calendar.component.ts b/projects/core/components/primitive-calendar/primitive-calendar.component.ts index f31a8669b2f1..8805bde509aa 100644 --- a/projects/core/components/primitive-calendar/primitive-calendar.component.ts +++ b/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; diff --git a/projects/core/components/primitive-calendar/test/primitive-calendar.component.spec.ts b/projects/core/components/primitive-calendar/test/primitive-calendar.component.spec.ts index b86ea84583eb..130b120bc0cd 100644 --- a/projects/core/components/primitive-calendar/test/primitive-calendar.component.spec.ts +++ b/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,9 +130,7 @@ 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', () => { @@ -143,9 +138,7 @@ describe('PrimitiveCalendar', () => { component.onItemHovered(dayToHover); - expect(component.getItemState(dayToHover)).toBe( - TuiInteractiveState.Hover, - ); + expect(component.getItemState(dayToHover)).toBe('hover'); }); }); diff --git a/projects/core/components/primitive-year-picker/primitive-year-picker.component.ts b/projects/core/components/primitive-year-picker/primitive-year-picker.component.ts index 87f5b710319a..cedef43452e9 100644 --- a/projects/core/components/primitive-year-picker/primitive-year-picker.component.ts +++ b/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; diff --git a/projects/core/components/primitive-year-picker/test/primitive-year-picker.component.spec.ts b/projects/core/components/primitive-year-picker/test/primitive-year-picker.component.spec.ts index 5c6ffdd0ced3..48806abce12c 100644 --- a/projects/core/components/primitive-year-picker/test/primitive-year-picker.component.spec.ts +++ b/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,7 +66,7 @@ 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', () => { @@ -75,7 +74,7 @@ describe('TuiPrimitiveYearPickerComponent', () => { 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', () => { @@ -83,7 +82,7 @@ describe('TuiPrimitiveYearPickerComponent', () => { component.onItemHovered(true, item); - expect(component.getItemState(item)).toBe(TuiInteractiveState.Hover); + expect(component.getItemState(item)).toBe('hover'); }); }); diff --git a/projects/core/directives/appearance/appearance.directive.ts b/projects/core/directives/appearance/appearance.directive.ts index b12270096480..6a08c3f56731 100644 --- a/projects/core/directives/appearance/appearance.directive.ts +++ b/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; diff --git a/projects/core/directives/wrapper/wrapper.directive.ts b/projects/core/directives/wrapper/wrapper.directive.ts index 1f20c26db2a8..d97457f38aac 100644 --- a/projects/core/directives/wrapper/wrapper.directive.ts +++ b/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; diff --git a/projects/core/enums/index.ts b/projects/core/enums/index.ts index e32ee05fcb8f..31cc5940bf36 100644 --- a/projects/core/enums/index.ts +++ b/projects/core/enums/index.ts @@ -1,4 +1,3 @@ export * from './appearance'; export * from './dropdown-animation'; -export * from './interactive-state'; export * from './range-state'; diff --git a/projects/core/enums/interactive-state.ts b/projects/core/enums/interactive-state.ts deleted file mode 100644 index 9ad7a491f5ad..000000000000 --- a/projects/core/enums/interactive-state.ts +++ /dev/null @@ -1,13 +0,0 @@ -/** - * @internal used in calendar, year picker and wrapper - */ -// TODO: change type in v4.0 -// eslint-disable-next-line no-restricted-syntax -export enum TuiInteractiveState { - Active = 'active', - Disabled = 'disabled', - Hover = 'hover', - Readonly = 'readonly', -} - -export type TuiInteractiveStateT = 'active' | 'disabled' | 'hover'; diff --git a/projects/core/interfaces/index.ts b/projects/core/interfaces/index.ts index c2a55e1685ca..7f5792742acb 100644 --- a/projects/core/interfaces/index.ts +++ b/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'; diff --git a/projects/core/interfaces/interactive-state.ts b/projects/core/interfaces/interactive-state.ts new file mode 100644 index 000000000000..0a3905c88e1f --- /dev/null +++ b/projects/core/interfaces/interactive-state.ts @@ -0,0 +1 @@ +export type TuiInteractiveState = 'active' | 'disabled' | 'hover' | 'readonly'; diff --git a/projects/demo/src/modules/directives/appearance/appearance.component.ts b/projects/demo/src/modules/directives/appearance/appearance.component.ts index 26016c5c7139..e64b9ec6aff7 100644 --- a/projects/demo/src/modules/directives/appearance/appearance.component.ts +++ b/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; } diff --git a/projects/experimental/components/textfield/textfield.directive.ts b/projects/experimental/components/textfield/textfield.directive.ts index 37a8638a6719..6c5a41571338 100644 --- a/projects/experimental/components/textfield/textfield.directive.ts +++ b/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(); diff --git a/projects/kit/components/calendar-month/calendar-month.component.ts b/projects/kit/components/calendar-month/calendar-month.component.ts index 08484541cc4d..4ac5c1b86973 100644 --- a/projects/kit/components/calendar-month/calendar-month.component.ts +++ b/projects/kit/components/calendar-month/calendar-month.component.ts @@ -18,8 +18,11 @@ import { tuiNullableSame, tuiPure, } from '@taiga-ui/cdk'; -import type {TuiRangeState, TuiWithOptionalMinMax} from '@taiga-ui/core'; -import {TuiInteractiveState} from '@taiga-ui/core'; +import type { + TuiInteractiveState, + TuiRangeState, + TuiWithOptionalMinMax, +} from '@taiga-ui/core'; import type {TuiMonthContext} from '@taiga-ui/kit/interfaces'; import {TUI_CALENDAR_MONTHS} from '@taiga-ui/kit/tokens'; import type {TuiBooleanHandlerWithContext} from '@taiga-ui/kit/types'; @@ -104,15 +107,15 @@ export class TuiCalendarMonthComponent implements TuiWithOptionalMinMax { it('returns disabled if there is', () => { const disabledMonth = new TuiMonth(TODAY.year, 10); - expect(component.getItemState(disabledMonth)).toBe( - TuiInteractiveState.Disabled, - ); + expect(component.getItemState(disabledMonth)).toBe('disabled'); }); it('returns pressed if there is', () => { @@ -84,7 +81,7 @@ describe('CalendarMonth', () => { component.pressedItem = pressedMonth; - expect(component.getItemState(pressedMonth)).toBe(TuiInteractiveState.Active); + expect(component.getItemState(pressedMonth)).toBe('active'); }); it('returns hovered if there is', () => { @@ -92,7 +89,7 @@ describe('CalendarMonth', () => { component.hoveredItem = hoveredItem; - expect(component.getItemState(hoveredItem)).toBe(TuiInteractiveState.Hover); + expect(component.getItemState(hoveredItem)).toBe('hover'); }); it('returns null if there is no state', () => {