Stepper Demos: arrange imports (DevExpress#30247)

mpreyskurantov · EugeniyKiyashko · web-flow · commit f279cae59a8b · 2025-07-02T15:38:06.000+03:00
Co-authored-by: EugeniyKiyashko &lt;EugeniyKiyashko@users.noreply.github.com&gt;
diff --git a/apps/demos/Demos/Stepper/FormIntegration/Angular/app/additional-form/additional-form.component.ts b/apps/demos/Demos/Stepper/FormIntegration/Angular/app/additional-form/additional-form.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
-import { DxFormTypes } from 'devextreme-angular/ui/form';
-import { DxTextAreaTypes } from 'devextreme-angular/ui/text-area';
+import { type DxFormTypes } from 'devextreme-angular/ui/form';
+import { type DxTextAreaTypes } from 'devextreme-angular/ui/text-area';
 import type { BookingFormData } from '../app.types';
 
 let modulePrefix = '';
diff --git a/apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.component.ts b/apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.component.ts
@@ -2,17 +2,15 @@ import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import {
-  DxStepperModule,
   DxButtonModule,
-  DxMultiViewModule,
-  DxFormModule,
   DxDateRangeBoxModule,
+  DxFormModule,
+  DxMultiViewModule,
   DxNumberBoxModule,
   DxSelectBoxModule,
   DxTextAreaModule,
 } from 'devextreme-angular';
-import type { Item, SelectionChangingEvent } from 'devextreme/ui/stepper';
-import validationEngine from 'devextreme/ui/validation_engine';
+import { DxStepperModule, type DxStepperTypes } from 'devextreme-angular/ui/stepper';
 import { AppService } from './app.service';
 import { BookingFormData } from './app.types';
 import { DatesFormComponent } from "./dates-form/dates-form.component";
@@ -21,6 +19,8 @@ import { RoomMealPlanFormComponent } from "./room-meal-plan-form/room-meal-plan-
 import { AdditionalFormComponent } from "./additional-form/additional-form.component";
 import { ConfirmationComponent } from "./confirmation/confirmation.component";
 
+import validationEngine from 'devextreme/ui/validation_engine';
+
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
@@ -37,7 +37,7 @@ if (window && window.config?.packageConfigPaths) {
   styleUrls: [`.${modulePrefix}/app.component.css`],
 })
 export class AppComponent {
-  steps: Item[];
+  steps: DxStepperTypes.Item[];
 
   formData: BookingFormData;
 
@@ -69,12 +69,12 @@ export class AppComponent {
     this.steps[index].isValid = isValid;
   }
 
-  onSelectionChanging(e: SelectionChangingEvent) {
+  onSelectionChanging(e: DxStepperTypes.SelectionChangingEvent) {
     const { component, addedItems, removedItems } = e;
     const { items = [] } = component.option();
 
-    const addedIndex = items.findIndex((item: Item) => item === addedItems[0]);
-    const removedIndex = items.findIndex((item: Item) => item === removedItems[0]);
+    const addedIndex = items.findIndex((item: DxStepperTypes.Item) => item === addedItems[0]);
+    const removedIndex = items.findIndex((item: DxStepperTypes.Item) => item === removedItems[0]);
     const isMoveForward = removedIndex > -1 && addedIndex > removedIndex;
 
     if (isMoveForward) {
@@ -138,13 +138,13 @@ export class AppComponent {
 @NgModule({
   imports: [
     BrowserModule,
-    DxStepperModule,
     DxButtonModule,
-    DxMultiViewModule,
-    DxFormModule,
     DxDateRangeBoxModule,
+    DxFormModule,
+    DxMultiViewModule,
     DxNumberBoxModule,
     DxSelectBoxModule,
+    DxStepperModule,
     DxTextAreaModule,
   ],
   declarations: [
diff --git a/apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.service.ts b/apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.service.ts
@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
-import { Item } from 'devextreme/ui/stepper';
+import { type DxStepperTypes } from 'devextreme-angular/ui/stepper';
 import { BookingFormData } from "./app.types";
 
 @Injectable({
   providedIn: 'root',
 })
 export class AppService {
-  initialSteps: Item[];
+  initialSteps: DxStepperTypes.Item[];
 
   initialFormData: BookingFormData;
 
@@ -44,7 +44,7 @@ export class AppService {
     };
   }
 
-  getInitialSteps(): Item[] {
+  getInitialSteps(): DxStepperTypes.Item[] {
     return this.initialSteps.map((item) => ({ ...item }));
   }
 
diff --git a/apps/demos/Demos/Stepper/FormIntegration/Angular/app/dates-form/dates-form.component.ts b/apps/demos/Demos/Stepper/FormIntegration/Angular/app/dates-form/dates-form.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, SimpleChanges, ViewChild } from '@angular/core';
-import { DxFormTypes, DxFormComponent } from 'devextreme-angular/ui/form';
-import { DxDateRangeBoxTypes } from 'devextreme-angular/ui/date-range-box';
+import { DxFormComponent, type DxFormTypes } from 'devextreme-angular/ui/form';
+import { type DxDateRangeBoxTypes } from 'devextreme-angular/ui/date-range-box';
 import type { BookingFormData } from '../app.types';
 
 let modulePrefix = '';
diff --git a/apps/demos/Demos/Stepper/FormIntegration/Angular/app/guests-form/guests-form.component.ts b/apps/demos/Demos/Stepper/FormIntegration/Angular/app/guests-form/guests-form.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, SimpleChanges, ViewChild } from "@angular/core";
-import { DxFormTypes, DxFormComponent } from 'devextreme-angular/ui/form';
-import { DxNumberBoxTypes } from 'devextreme-angular/ui/number-box';
+import { DxFormComponent, type DxFormTypes } from 'devextreme-angular/ui/form';
+import { type DxNumberBoxTypes } from 'devextreme-angular/ui/number-box';
 import type { BookingFormData } from '../app.types';
 
 let modulePrefix = '';
diff --git a/apps/demos/Demos/Stepper/FormIntegration/Angular/app/room-meal-plan-form/room-meal-plan-form.component.ts b/apps/demos/Demos/Stepper/FormIntegration/Angular/app/room-meal-plan-form/room-meal-plan-form.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, SimpleChanges, ViewChild } from "@angular/core";
-import { DxFormTypes, DxFormComponent } from 'devextreme-angular/ui/form';
-import { DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
+import { DxFormComponent, type DxFormTypes } from 'devextreme-angular/ui/form';
+import { type DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
 import type { BookingFormData } from '../app.types';
 
 let modulePrefix = '';
diff --git a/apps/demos/Demos/Stepper/FormIntegration/React/App.tsx b/apps/demos/Demos/Stepper/FormIntegration/React/App.tsx
@@ -1,9 +1,7 @@
 import React, { useState, useCallback, useMemo } from 'react';
-import { Stepper, Item } from 'devextreme-react/stepper'
-import type { IItemProps } from 'devextreme-react/stepper'
-import Button from 'devextreme-react/button';
+import { Stepper, Item, type StepperTypes } from 'devextreme-react/stepper'
+import { Button } from 'devextreme-react/button';
 import { MultiView } from 'devextreme-react/multi-view';
-import type { SelectionChangedEvent, SelectionChangingEvent } from 'devextreme/ui/stepper';
 import validationEngine from 'devextreme/ui/validation_engine';
 
 import DatesForm from './DatesForm.tsx';
@@ -19,7 +17,7 @@ const validationGroups = ['dates', 'guests', 'roomAndMealPlan'];
 
 export default function App () {
   const [selectedIndex, setSelectedIndex] = useState(0);
-  const [steps, setSteps] = useState<IItemProps[]>(initialSteps);
+  const [steps, setSteps] = useState<StepperTypes.Item[]>(initialSteps);
   const [formData, setFormData] = useState<BookingFormData>(getInitialFormData);
   const [isConfirmed, setIsConfirmed] = useState(false);
   const [isStepperReadonly, setIsStepperReadonly] = useState(false);
@@ -95,12 +93,12 @@ export default function App () {
     return 'Confirm';
   }, [selectedIndex, isConfirmed, steps.length]);
 
-  const onSelectionChanging = useCallback((args: SelectionChangingEvent) => {
+  const onSelectionChanging = useCallback((args: StepperTypes.SelectionChangingEvent) => {
     const { component, addedItems, removedItems } = args;
     const { items = [] } = component.option();
 
-    const addedIndex = items.findIndex((item: IItemProps) => item === addedItems[0]);
-    const removedIndex = items.findIndex((item: IItemProps) => item === removedItems[0]);
+    const addedIndex = items.findIndex((item: StepperTypes.Item) => item === addedItems[0]);
+    const removedIndex = items.findIndex((item: StepperTypes.Item) => item === removedItems[0]);
     const isMoveForward = addedIndex > removedIndex;
 
     if (isMoveForward) {
@@ -114,7 +112,7 @@ export default function App () {
     }
   }, [setStepValidationResult, getValidationResult]);
 
-  const onSelectionChanged = useCallback(({ component }: SelectionChangedEvent) => {
+  const onSelectionChanged = useCallback(({ component }: StepperTypes.SelectionChangedEvent) => {
     setSelectedIndex(component.option('selectedIndex') ?? 0);
   }, []);
 
diff --git a/apps/demos/Demos/Stepper/FormIntegration/React/data.ts b/apps/demos/Demos/Stepper/FormIntegration/React/data.ts
@@ -1,7 +1,7 @@
-import type { IItemProps } from 'devextreme-react/stepper'
+import { type StepperTypes } from 'devextreme-react/stepper'
 import type { BookingFormData } from './types';
 
-export const initialSteps: IItemProps[] = [
+export const initialSteps: StepperTypes.Item[] = [
   {
     label: 'Dates', hint: 'Dates', icon: 'daterangepicker',
   },
diff --git a/apps/demos/Demos/Stepper/FormIntegration/ReactJs/App.js b/apps/demos/Demos/Stepper/FormIntegration/ReactJs/App.js
@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react';
 import { Stepper, Item } from 'devextreme-react/stepper';
-import Button from 'devextreme-react/button';
+import { Button } from 'devextreme-react/button';
 import { MultiView } from 'devextreme-react/multi-view';
 import validationEngine from 'devextreme/ui/validation_engine';
 import DatesForm from './DatesForm.js';
diff --git a/apps/demos/Demos/Stepper/FormIntegration/Vue/AdditionalTemplate.vue b/apps/demos/Demos/Stepper/FormIntegration/Vue/AdditionalTemplate.vue
@@ -13,8 +13,8 @@
 </template>
 
 <script setup lang="ts">
-import DxForm, { DxSimpleItem } from 'devextreme-vue/form';
-import 'devextreme/ui/text_area';
+import { DxForm, DxSimpleItem } from 'devextreme-vue/form';
+import 'devextreme-vue/text-area';
 import type { BookingFormData } from './types.ts';
 import { initialFormData } from './data.ts';
 
diff --git a/apps/demos/Demos/Stepper/FormIntegration/Vue/App.vue b/apps/demos/Demos/Stepper/FormIntegration/Vue/App.vue
@@ -89,12 +89,10 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import DxButton from 'devextreme-vue/button';
-import DxMultiView, { DxItem as DxMultiViewItem } from 'devextreme-vue/multi-view';
-import DxStepper, { DxItem as DxStepperItem } from 'devextreme-vue/stepper';
-import type { IItemProps } from 'devextreme-react/cjs/stepper';
-import type { SelectionChangingEvent } from 'devextreme/ui/stepper';
-import validationEngine from 'devextreme/ui/validation_engine';
+import { DxButton } from 'devextreme-vue/button';
+import { DxMultiView, DxItem as DxMultiViewItem } from 'devextreme-vue/multi-view';
+import { DxStepper, DxItem as DxStepperItem, type DxStepperTypes } from 'devextreme-vue/stepper';
+import validationEngine from 'devextreme/ui/validation_engine';;
 import DatesTemplate from './DatesTemplate.vue';
 import GuestsTemplate from './GuestsTemplate.vue';
 import RoomMealPlanTemplate from './RoomMealPlanTemplate.vue';
@@ -106,7 +104,7 @@ import type { BookingFormData } from './types';
 const selectedIndex = ref(0);
 const isConfirmed = ref(false);
 const isStepperReadonly = ref(false);
-const steps = ref<IItemProps[]>(getInitialSteps());
+const steps = ref<DxStepperTypes.Item[]>(getInitialSteps());
 const formData = ref<BookingFormData>(getInitialFormData());
 
 const validationGroups = ['dates', 'guests', 'roomAndMealPlan'];
@@ -131,12 +129,12 @@ const setStepValidationResult = (index: number, isValid: boolean | undefined) =>
   steps.value[index].isValid = isValid;
 };
 
-function onSelectionChanging(e: SelectionChangingEvent) {
+function onSelectionChanging(e: DxStepperTypes.SelectionChangingEvent) {
   const { component, addedItems, removedItems } = e;
   const { items = [] } = component.option();
 
-  const addedIndex = items.findIndex((item: IItemProps) => item === addedItems[0]);
-  const removedIndex = items.findIndex((item: IItemProps) => item === removedItems[0]);
+  const addedIndex = items.findIndex((item: DxStepperTypes.Item) => item === addedItems[0]);
+  const removedIndex = items.findIndex((item: DxStepperTypes.Item) => item === removedItems[0]);
   const isMoveForward = addedIndex > removedIndex;
 
   if (isMoveForward) {
diff --git a/apps/demos/Demos/Stepper/FormIntegration/Vue/DatesTemplate.vue b/apps/demos/Demos/Stepper/FormIntegration/Vue/DatesTemplate.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 import DxForm, { DxSimpleItem } from 'devextreme-vue/form';
-import 'devextreme/ui/date_range_box';
+import 'devextreme-vue/date-range-box';
 import { ref, watch } from 'vue';
 import type { BookingFormData } from './types.ts';
 import { getInitialFormData } from './data.ts';
diff --git a/apps/demos/Demos/Stepper/FormIntegration/Vue/GuestsTemplate.vue b/apps/demos/Demos/Stepper/FormIntegration/Vue/GuestsTemplate.vue
@@ -33,8 +33,8 @@
 </template>
 
 <script setup lang="ts">
-import DxForm, { DxRangeRule, DxSimpleItem } from 'devextreme-vue/form';
-import 'devextreme/ui/number_box';
+import { DxForm, DxRangeRule, DxSimpleItem } from 'devextreme-vue/form';
+import 'devextreme-vue/number-box';
 import { watch, ref } from 'vue';
 import type { BookingFormData } from './types.ts';
 import { getInitialFormData } from './data.ts';
diff --git a/apps/demos/Demos/Stepper/FormIntegration/Vue/RoomMealPlanTemplate.vue b/apps/demos/Demos/Stepper/FormIntegration/Vue/RoomMealPlanTemplate.vue
@@ -28,7 +28,7 @@
 
 <script setup lang="ts">
 import DxForm, { DxSimpleItem } from 'devextreme-vue/form';
-import 'devextreme/ui/select_box';
+import 'devextreme-vue/select-box';
 import { watch, ref } from 'vue';
 import type { BookingFormData } from './types.ts';
 import { roomTypes, mealPlans, getInitialFormData } from './data.ts';
diff --git a/apps/demos/Demos/Stepper/FormIntegration/Vue/data.ts b/apps/demos/Demos/Stepper/FormIntegration/Vue/data.ts
@@ -1,7 +1,7 @@
-import type { IItemProps } from 'devextreme-react/stepper'
+import { type DxStepperTypes } from 'devextreme-vue/stepper'
 import type { BookingFormData } from './types';
 
-export const initialSteps: IItemProps[] = [
+export const initialSteps: DxStepperTypes.Item[] = [
   {
     label: 'Dates', hint: 'Dates', icon: 'daterangepicker',
   },
diff --git a/apps/demos/Demos/Stepper/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Stepper/Overview/Angular/app/app.component.ts
@@ -2,10 +2,10 @@ import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { DxStepperModule, DxButtonGroupModule, DxCheckBoxModule } from 'devextreme-angular';
-import { DxButtonGroupTypes } from 'devextreme-angular/ui/button-group';
-import { DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
-import { Item } from 'devextreme/ui/stepper';
+import { DxButtonGroupModule, type DxButtonGroupTypes } from 'devextreme-angular/ui/button-group';
+import { DxCheckBoxModule, type DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
+import { DxStepperModule, type DxStepperTypes } from 'devextreme-angular/ui/stepper';
+
 import { AppService } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -24,7 +24,7 @@ if (window && window.config?.packageConfigPaths) {
   styleUrls: [`.${modulePrefix}/app.component.css`],
 })
 export class AppComponent {
-  steps: Item[];
+  steps: DxStepperTypes.Item[];
   orientations: any[];
   navigationModes: any[];
 
diff --git a/apps/demos/Demos/Stepper/Overview/Angular/app/app.service.ts b/apps/demos/Demos/Stepper/Overview/Angular/app/app.service.ts
@@ -1,11 +1,11 @@
 import { Injectable } from "@angular/core";
-import { Item } from "devextreme/ui/stepper";
+import { type DxStepperTypes } from 'devextreme-angular/ui/stepper';
 
 @Injectable({
   providedIn: "root"
 })
 export class AppService {
-  steps: Item[] = [];
+  steps: DxStepperTypes.Item[] = [];
   orientations = [];
   navigationModes = [];
 
@@ -50,7 +50,7 @@ export class AppService {
     ]
   }
 
-  getSteps(): Item[] {
+  getSteps(): DxStepperTypes.Item[] {
     return this.steps;
   }
 
diff --git a/apps/demos/Demos/Stepper/Overview/React/Options.tsx b/apps/demos/Demos/Stepper/Overview/React/Options.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import ButtonGroup, { type ButtonGroupTypes } from 'devextreme-react/button-group';
-import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
+import { ButtonGroup, type ButtonGroupTypes } from 'devextreme-react/button-group';
+import { CheckBox, type CheckBoxTypes } from 'devextreme-react/check-box';
 import { type Orientation } from 'devextreme-react/common';
 
 import { navigationModes, orientations } from './data.ts';
diff --git a/apps/demos/Demos/Stepper/Overview/ReactJs/Options.js b/apps/demos/Demos/Stepper/Overview/ReactJs/Options.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import ButtonGroup from 'devextreme-react/button-group';
-import CheckBox from 'devextreme-react/check-box';
+import { ButtonGroup } from 'devextreme-react/button-group';
+import { CheckBox } from 'devextreme-react/check-box';
 import { navigationModes, orientations } from './data.js';
 
 export default function Options({
diff --git a/apps/demos/Demos/Stepper/Overview/Vue/App.vue b/apps/demos/Demos/Stepper/Overview/Vue/App.vue
@@ -73,9 +73,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { DxStepper, DxItem } from 'devextreme-vue/stepper';
-import DxButtonGroup, { type DxButtonGroupTypes } from 'devextreme-vue/button-group';
-import DxCheckBox from 'devextreme-vue/check-box';
-import { type Orientation } from 'devextreme-react/common';
+import { DxButtonGroup, type DxButtonGroupTypes } from 'devextreme-vue/button-group';
+import { DxCheckBox } from 'devextreme-vue/check-box';
+import { type Orientation } from 'devextreme-vue/common';
 import { steps, orientations, navigationModes } from './data.ts';
 
 const orientation = ref(orientations[0].value);
diff --git a/apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.component.ts b/apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.component.ts
@@ -1,9 +1,8 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { DxStepperModule } from 'devextreme-angular';
-import { Item } from 'devextreme/ui/stepper';
+import { type DxStepperTypes } from 'devextreme-angular/ui/stepper';
 import { AppService } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -22,7 +21,7 @@ if (window && window.config?.packageConfigPaths) {
   styleUrls: [`.${modulePrefix}/app.component.css`],
 })
 export class AppComponent {
-  steps: Item[];
+  steps: DxStepperTypes.Item[];
 
   constructor(private readonly appService: AppService) {
     this.steps = this.appService.getSteps();
diff --git a/apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.service.ts b/apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.service.ts
diff --git a/apps/demos/Demos/Stepper/StepTemplate/React/CustomStepShape.tsx b/apps/demos/Demos/Stepper/StepTemplate/React/CustomStepShape.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`		`-import type { IItemProps } from 'devextreme-react/stepper'`
	`1`	`+import { type StepperTypes } from 'devextreme-react/stepper'`
`2`	`2`	`import type { BookingFormData } from './types';`
`3`	`3`
`4`		`-export const initialSteps: IItemProps[] = [`
	`4`	`+export const initialSteps: StepperTypes.Item[] = [`
`5`	`5`	`{`
`6`	`6`	`label: 'Dates', hint: 'Dates', icon: 'daterangepicker',`
`7`	`7`	`},`