Skip to content

WG Demos - Update editorType/widget import statements in components - #34545

Open
16adianay wants to merge 1 commit into
DevExpress:mainfrom
16adianay:fix/wg-imports-components
Open

WG Demos - Update editorType/widget import statements in components#34545
16adianay wants to merge 1 commit into
DevExpress:mainfrom
16adianay:fix/wg-imports-components

Conversation

@16adianay

Copy link
Copy Markdown
Contributor

What does the PR change?

  1. Updates the editorType and widget import statements in components-related widget demos to use the correct module references.

How did you achieve this?

  1. Reviewed the navigation-related widget demos that use editorType and widget imports.
  2. Updated the import statements to align with the current module structure and import conventions.
  3. Verified that the affected demos compile and load successfully after the changes.

How can we verify these changes?

  1. Build and run the WG Demos project.
  2. Open the navigation and editors related widget demos.
  3. Confirm that the demos render correctly without import or module resolution errors.
  4. Verify that all navigation-related widgets function as expected

…-related widget demos

Update editorType/widget import statements
Copilot AI review requested due to automatic review settings July 29, 2026 14:30
@16adianay
16adianay requested a review from a team as a code owner July 29, 2026 14:30
@16adianay 16adianay self-assigned this Jul 29, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates WG demo sources to rely on DevExtreme core widget modules (e.g., devextreme/ui/*) instead of framework-wrapper “side-effect” imports and (in Angular) removes some devextreme-angular widget modules from standalone component imports, aligning demos with the current module/import conventions.

Changes:

  • Replaced framework wrapper widget imports (e.g., devextreme-react/text-area, devextreme-vue/select-box) with DevExtreme core widget imports (e.g., devextreme/ui/text_area, devextreme/ui/select_box).
  • Simplified Angular standalone component module imports by removing specific widget modules (e.g., DxSelectBoxModule) when the widget is used via Form editorType / Toolbar widget string.
  • Adjusted demo files across Angular/React/ReactJs/Vue for Stepper and Form-related demos to keep runtime editor/widget registration working via devextreme/ui/*.

Reviewed changes

Copilot reviewed 27 out of 27 changed files in this pull request and generated 12 comments.

Show a summary per file
File Description
apps/demos/Demos/Toolbar/Overview/Angular/app/app.component.ts Removes DxSelectBoxModule and switches SelectBox registration to devextreme/ui/select_box.
apps/demos/Demos/Stepper/FormIntegration/Vue/RoomMealPlanTemplate.vue Switches SelectBox registration to devextreme/ui/select_box.
apps/demos/Demos/Stepper/FormIntegration/Vue/GuestsTemplate.vue Removes wrapper NumberBox side-effect import (needs core widget registration).
apps/demos/Demos/Stepper/FormIntegration/Vue/DatesTemplate.vue Switches DateRangeBox registration to devextreme/ui/date_range_box.
apps/demos/Demos/Stepper/FormIntegration/Vue/AdditionalTemplate.vue Switches TextArea registration to devextreme/ui/text_area.
apps/demos/Demos/Stepper/FormIntegration/ReactJs/RoomMealPlanForm.js Switches SelectBox registration to devextreme/ui/select_box.
apps/demos/Demos/Stepper/FormIntegration/ReactJs/GuestsForm.js Removes wrapper NumberBox side-effect import (needs core widget registration).
apps/demos/Demos/Stepper/FormIntegration/ReactJs/DatesForm.js Switches DateRangeBox registration to devextreme/ui/date_range_box.
apps/demos/Demos/Stepper/FormIntegration/ReactJs/Confirmation.js Removes wrapper DateRangeBox side-effect import.
apps/demos/Demos/Stepper/FormIntegration/ReactJs/AdditionalForm.js Switches TextArea registration to devextreme/ui/text_area.
apps/demos/Demos/Stepper/FormIntegration/React/RoomMealPlanForm.tsx Switches SelectBox registration to devextreme/ui/select_box.
apps/demos/Demos/Stepper/FormIntegration/React/GuestsForm.tsx Removes wrapper NumberBox side-effect import (needs core widget registration).
apps/demos/Demos/Stepper/FormIntegration/React/DatesForm.tsx Switches DateRangeBox registration to devextreme/ui/date_range_box.
apps/demos/Demos/Stepper/FormIntegration/React/Confirmation.tsx Removes wrapper DateRangeBox side-effect import.
apps/demos/Demos/Stepper/FormIntegration/React/AdditionalForm.tsx Switches TextArea registration to devextreme/ui/text_area.
apps/demos/Demos/Stepper/FormIntegration/Angular/app/room-meal-plan-form/room-meal-plan-form.component.ts Removes DxSelectBoxModule and registers SelectBox via devextreme/ui/select_box.
apps/demos/Demos/Stepper/FormIntegration/Angular/app/guests-form/guests-form.component.ts Removes DxNumberBoxModule from standalone imports (needs core widget registration).
apps/demos/Demos/Stepper/FormIntegration/Angular/app/dates-form/dates-form.component.ts Removes DxDateRangeBoxModule and registers DateRangeBox via devextreme/ui/date_range_box.
apps/demos/Demos/Stepper/FormIntegration/Angular/app/additional-form/additional-form.component.ts Removes DxTextAreaModule and registers TextArea via devextreme/ui/text_area.
apps/demos/Demos/Form/ItemCustomization/Vue/App.vue Replaces wrapper TextArea import with core widget imports (SelectBox/TextArea).
apps/demos/Demos/Form/ItemCustomization/ReactJs/App.js Replaces wrapper TextArea import with core widget imports (SelectBox/TextArea).
apps/demos/Demos/Form/ItemCustomization/React/App.tsx Replaces wrapper TextArea import with core widget imports (SelectBox/TextArea).
apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.ts Removes Angular widget modules and registers SelectBox/TextArea via core widget imports.
apps/demos/Demos/Common/FormsOverview/Vue/App.vue Replaces wrapper TextArea import with core widget imports (SelectBox/TextArea).
apps/demos/Demos/Common/FormsOverview/ReactJs/App.js Replaces wrapper TextArea import with core widget imports (SelectBox/TextArea).
apps/demos/Demos/Common/FormsOverview/React/App.tsx Replaces wrapper TextArea import with core widget imports (SelectBox/TextArea).
apps/demos/Demos/Common/FormsOverview/Angular/app/app.component.ts Removes Angular widget modules and registers SelectBox/TextArea via core widget imports.

Comment on lines +6 to +7
import 'devextreme/ui/select_box';
import 'devextreme/ui/text_area';
Comment on lines +64 to +65
import 'devextreme/ui/select_box';
import 'devextreme/ui/text_area';
Comment on lines +6 to +7
import 'devextreme/ui/select_box';
import 'devextreme/ui/text_area';
Comment on lines +5 to +6
import 'devextreme/ui/select_box';
import 'devextreme/ui/text_area';
Comment on lines +14 to +15
import 'devextreme/ui/select_box';
import 'devextreme/ui/text_area';
Comment on lines +5 to +6
import 'devextreme/ui/select_box';
import 'devextreme/ui/text_area';
Comment on lines 1 to 5
import { Component, Input, SimpleChanges, ViewChild } from '@angular/core';
import { DxFormModule, DxNumberBoxModule } from 'devextreme-angular';
import { DxFormModule } from 'devextreme-angular';
import { DxFormComponent, type DxFormTypes } from 'devextreme-angular/ui/form';
import { type DxNumberBoxTypes } from 'devextreme-angular/ui/number-box';
import type { BookingFormData } from '../app.types';
Comment on lines 37 to 41
<script setup lang="ts">
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';
Comment on lines 1 to 3
import React, { memo } from 'react';
import { Form, RangeRule, SimpleItem } from 'devextreme-react/form';
import 'devextreme-react/number-box';

Comment on lines 1 to 4
import React, { memo } from 'react';
import type { FC } from 'react';
import { Form, RangeRule, SimpleItem } from 'devextreme-react/form';
import 'devextreme-react/number-box';

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants