Update demos to use platform-specific imports (#29331)

Co-authored-by: Vasily Strelyaev <[email protected]>

Author: DuckTieCorpMember

apps/demos/Demos/Autocomplete/Overview/Angular/app/app.component.ts

@@ -4,8 +4,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { HttpClient, HttpClientModule, HttpParams } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
 import { DxAutocompleteModule, DxTemplateModule } from 'devextreme-angular';
-import CustomStore from 'devextreme/data/custom_store';
-import ODataStore from 'devextreme/data/odata/store';
+import { CustomStore, ODataStore } from 'devextreme-angular/common/data';
 import { Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {

apps/demos/Demos/Autocomplete/Overview/React/App.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import ODataStore from 'devextreme/data/odata/store';
+import { ODataStore, CustomStore } from 'devextreme-react/common/data';
 import { Autocomplete, type AutocompleteTypes } from 'devextreme-react/autocomplete';
-import CustomStore from 'devextreme/data/custom_store';
 import 'whatwg-fetch';
 import { names, surnames, positions } from './data.ts';
 

apps/demos/Demos/Autocomplete/Overview/ReactJs/App.js

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import ODataStore from 'devextreme/data/odata/store';
+import { ODataStore, CustomStore } from 'devextreme-react/common/data';
 import { Autocomplete } from 'devextreme-react/autocomplete';
-import CustomStore from 'devextreme/data/custom_store';
 import 'whatwg-fetch';
 import { names, surnames, positions } from './data.js';
 

apps/demos/Demos/Autocomplete/Overview/Vue/App.vue

@@ -96,10 +96,8 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import ODataStore from 'devextreme/data/odata/store';
+import { ODataStore, CustomStore, type LoadOptions } from 'devextreme-vue/common/data';
 import { DxAutocomplete } from 'devextreme-vue/autocomplete';
-import { type LoadOptions } from 'devextreme-vue/common/data';
-import CustomStore from 'devextreme/data/custom_store';
 import 'whatwg-fetch';
 import { names, surnames, positions } from './data.ts';
 

apps/demos/Demos/Charts/BarSparklines/Angular/app/app.component.ts

@@ -5,8 +5,7 @@ import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
 
 import { DxSparklineModule, DxSelectBoxModule } from 'devextreme-angular';
-import DataSource from 'devextreme/data/data_source';
-import CustomStore from 'devextreme/data/custom_store';
+import { DataSource, CustomStore } from 'devextreme-angular/common/data';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();

apps/demos/Demos/Charts/BarSparklines/React/App.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
-import DataSource from 'devextreme/data/data_source';
-import CustomStore from 'devextreme/data/custom_store';
+import { DataSource, CustomStore } from 'devextreme-react/common/data';
 import RowTemplate from './RowTemplate.tsx';
 
 const months = [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];

apps/demos/Demos/Charts/BarSparklines/React/RowTemplate.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import Sparkline, {
   Tooltip,
 } from 'devextreme-react/sparkline';
-import DataSource from 'devextreme/data/data_source';
+import { DataSource } from 'devextreme-react/common/data';
 
 interface RowTemplateProps {
   key: number;

apps/demos/Demos/Charts/BarSparklines/ReactJs/App.js

@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import SelectBox from 'devextreme-react/select-box';
-import DataSource from 'devextreme/data/data_source';
-import CustomStore from 'devextreme/data/custom_store';
+import { DataSource, CustomStore } from 'devextreme-react/common/data';
 import RowTemplate from './RowTemplate.js';
 
 const months = [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];

apps/demos/Demos/Charts/BarSparklines/Vue/App.vue

@@ -39,8 +39,7 @@
 
 <script setup lang="ts">
 import DxSelectBox, { type DxSelectBoxTypes } from 'devextreme-vue/select-box';
-import DataSource from 'devextreme/data/data_source';
-import CustomStore from 'devextreme/data/custom_store';
+import { DataSource, CustomStore } from 'devextreme-vue/common/data';
 import RowTemplate from './RowTemplate.vue';
 
 const months = [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];

apps/demos/Demos/Charts/ClientSideDataProcessing/Angular/app/app.component.ts

@@ -7,9 +7,7 @@ import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
 
 import { DxChartModule, DxSelectBoxModule } from 'devextreme-angular';
-import DataSource from 'devextreme/data/data_source';
-import CustomStore from 'devextreme/data/custom_store';
-import query from 'devextreme/data/query';
+import { DataSource, CustomStore, query } from 'devextreme-angular/common/data';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();