Merge branch '25_2' of https://github.com/DevExpress/DevExtreme into chatFuDesignUpdates__25_2

Author: Zedwag

.github/workflows/demos_visual_tests_frameworks.yml

@@ -35,7 +35,7 @@ jobs:
     needs: check-should-run
     if: needs.check-should-run.outputs.should-run == 'true'
     env:
-      NODE_OPTIONS: "--max-old-space-size=8192"
+      NODE_OPTIONS: --max-old-space-size=8192
     timeout-minutes: 40
 
     steps:
@@ -152,7 +152,7 @@ jobs:
       if: github.event_name != 'pull_request' || contains(github.event.pull_request.labels.*.name, 'force all tests')
       working-directory: apps/demos
       env:
-        NODE_OPTIONS: "--max-old-space-size=8192"
+        NODE_OPTIONS: --max-old-space-size=8192
       run: pnpx nx prepare-bundles
 
     - name: Demos - Run tsc

.github/workflows/qunit_tests.yml

@@ -148,19 +148,15 @@ jobs:
       matrix:
         constel: [
           'ui',
-          'ui.widgets(1/3)',
-          'ui.widgets(2/3)',
-          'ui.widgets(3/3)',
+          'ui.widgets(1/2)',
+          'ui.widgets(2/2)',
           'ui.editors(1/2)',
           'ui.editors(2/2)',
           'ui.htmlEditor',
-          'ui.grid(1/4)',
-          'ui.grid(2/4)',
-          'ui.grid(3/4)',
-          'ui.grid(4/4)',
-          'ui.scheduler(1/3)',
-          'ui.scheduler(2/3)',
-          'ui.scheduler(3/3)',
+          'ui.grid(1/2)',
+          'ui.grid(2/2)',
+          'ui.scheduler(1/2)',
+          'ui.scheduler(2/2)',
           'viz'
         ]
 

.github/workflows/testcafe_tests.yml

@@ -70,7 +70,9 @@ jobs:
 
     - name: Build
       shell: bash
-      run: pnpx nx build devextreme
+      env:
+        NODE_OPTIONS: --max-old-space-size=8192
+      run: pnpx nx build devextreme --uglify
 
     - name: Zip artifacts
       working-directory: ./packages/devextreme
@@ -92,18 +94,13 @@ jobs:
       fail-fast: false
       matrix:
         ARGS: [
-          { componentFolder: "accessibility", name: "accessibility (1/2)", indices: "1/2" },
-          { componentFolder: "accessibility", name: "accessibility (2/2)", indices: "2/2" },
+          { componentFolder: "accessibility", name: "accessibility" },
           { componentFolder: "common", name: "common" },
 
           # Grids tests need to be reworked to work in fluent theme
-          { componentFolder: "dataGrid/common", name: "dataGrid / common (1/5)", indices: "1/5" },
-          { componentFolder: "dataGrid/common", name: "dataGrid / common (2/5)", indices: "2/5" },
-          { componentFolder: "dataGrid/common", name: "dataGrid / common (3/5)", indices: "3/5" },
-          { componentFolder: "dataGrid/common", name: "dataGrid / common (4/5)", indices: "4/5" },
-          { componentFolder: "dataGrid/common", name: "dataGrid / common (5/5)", indices: "5/5" },
-          { componentFolder: "dataGrid/sticky", name: "dataGrid / sticky (1/2)", indices: "1/2" },
-          { componentFolder: "dataGrid/sticky", name: "dataGrid / sticky (2/2)", indices: "2/2" },
+          { componentFolder: "dataGrid", name: "dataGrid (1/3)", indices: "1/3" },
+          { componentFolder: "dataGrid", name: "dataGrid (2/3)", indices: "2/3" },
+          { componentFolder: "dataGrid", name: "dataGrid (3/3)", indices: "3/3" },
           { componentFolder: "cardView", name: "cardView" },
 
           # Scheduler tests need to be reworked to work in fluent theme
@@ -162,8 +159,8 @@ jobs:
       run: |
         echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-    - uses: actions/cache@v4
-      name: Setup pnpm cache
+    - uses: actions/cache/restore@v4
+      name: Restore pnpm cache
       with:
         path: |
           ${{ env.STORE_PATH }}
@@ -177,6 +174,8 @@ jobs:
 
     - name: Run TestCafe tests
       working-directory: ./e2e/testcafe-devextreme
+      env:
+        NODE_OPTIONS: --max-old-space-size=8192
       run: |
         if [ "${{ matrix.ARGS.theme }}" != "" ]; then
           THEME="--theme ${{ matrix.ARGS.theme }}"

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

@@ -117,7 +117,7 @@ export class AppComponent {
   onResult({ event }) {
     const { results } = event;
     const resultText = Object.values(results)
-      .map((resultItem) => resultItem[0].transcript)
+      .map((resultItem) => resultItem[0].transcript.trim())
       .join(' ');
     this.textAreaValue = resultText;
   }

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

@@ -75,7 +75,7 @@ export default function App() {
   const onResult = useCallback(({ event }) => {
     const { results } = event;
     const resultText = Object.values(results)
-      .map((resultItem: any) => resultItem[0].transcript)
+      .map((resultItem: any) => resultItem[0].transcript.trim())
       .join(' ');
     setTextAreaValue(resultText);
   }, []);

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

@@ -62,7 +62,7 @@ export default function App() {
   const onResult = useCallback(({ event }) => {
     const { results } = event;
     const resultText = Object.values(results)
-      .map((resultItem) => resultItem[0].transcript)
+      .map((resultItem) => resultItem[0].transcript.trim())
       .join(' ');
     setTextAreaValue(resultText);
   }, []);

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

@@ -162,7 +162,7 @@ function onStopClick() {
 function onResult({ event }: Record<string, any>) {
   const { results } = event;
   const resultText = Object.values(results)
-    .map((resultItem: any) => resultItem[0].transcript)
+    .map((resultItem: any) => resultItem[0].transcript.trim())
     .join(' ');
   textAreaValue.value = resultText;
 

apps/demos/Demos/SpeechToText/Overview/jQuery/index.js

@@ -43,7 +43,7 @@ $(() => {
       onResult: ({ event }) => {
         const { results } = event;
         const resultText = Object.values(results)
-          .map((resultItem) => resultItem[0].transcript)
+          .map((resultItem) => resultItem[0].transcript.trim())
           .join(' ');
 
         textArea.option('value', resultText);

apps/demos/README.md

@@ -1,65 +1,68 @@
 # DevExtreme Demos
 
-This repository contains technical DevExtreme demos for Angular, React, Vue, jQuery, ASP.NET MVC, and ASP.NET Core.
+This repository contains technical DevExtreme demos for Angular, React, Vue, and jQuery.
 
 To run the demos on your machine, clone this repository, run `pnpm install`, and follow the instructions below.
 
 ## Prepare Demos for Development
-Before running you need execute in `monorepo/root`:
 
-```
-pnpm run all:build-dev
-```
+### Run demos locally
 
-To prepare demos for development:
+In `monorepo/root`
 
+Build all dependencies and prepare systemJS configs by executing:
 ```
-pnpm run prepare-js
+pnpm run demos:prepare
 ```
 
-Angular, Vue, and React demos can use bundles instead of separate files from `node_modules`. With bundles, demos launch faster but become harder to debug. Run the following command to create the bundles and replace the SystemJS configuration:
-
+Start webserver:
 ```
-pnpm run prepare-bundles
+pnpm run demos:start
 ```
+Navigate to http://localhost:8080/.
+
+You can pass additional parameter to specify port. It can be useful when you need to fast switching between one demo on different frameworks.
+
 
-To return to using separate files from `node_modules`, run `pnpm run prepare-js`.
+### Bundled mode
 
+Angular, Vue, and React demos can use bundles instead of separate files from `node_modules`. With bundles, demos launch faster but become harder to debug. 
 
-### Launch
+In `apps/demos`
+
+Run the following command to create the bundles and replace the SystemJS configuration:
 
-#### Option 1
 ```
-pnpm run launch-demo
+pnpm run prepare-bundles
 ```
 
-#### Option 2
-1. Run ```pnpm run webserver ``` from `monorepo/root`
-2. Navigate to http://localhost:8080/apps/demos.
+To return to using separate files from `node_modules`, run:
 
-You can pass additional parameter to specify port. It can be useful when you need to fast switching between one demo on different frameworks:
+```
+pnpm run prepare-js
+```
 
-### Before Commiting Сhanges
+### Before Commiting Changes
 
-For fix autofixed errors:
+Auto-fix lint errors:
 
 ```
 pnpm run fix-lint
 ```
 
-### Development
+### Adding new demo
 
 1. Run the following script to add a new demo:
 
     ```
     pnpm run add-demo
     ```
 
-1. Use the built-in CLI to choose or enter the category, the demo name, and the technology for the new demo.
+2. Use the built-in CLI to choose or enter the category, the demo name, and the technology for the new demo.
 
 ### TS React Infrastructure
 
-1. After you make any changes in React TypeScript sources, run the following command:
+After you make any changes in React TypeScript sources, run the following command:
 
 ```
 pnpm run convert-to-js split
@@ -71,9 +74,7 @@ If you want to run this script on specific folder you can pass it to the argumen
 pnpm run convert-to-js "JSDemos/Demos/Diagram/**/React"
 ```
 
-1. To ensure that React JavaScript and TypeScript sources are always in sync, the following GitHub action is used: "Check generated JS demos".
-
-
+The "Check generated JS demos" GitHub Action ensures that the React JavaScript and TypeScript sources remain in sync.
 ## See Also
 
 - [Technical demos online](https://js.devexpress.com/Demos/)

apps/demos/project.json

@@ -102,6 +102,25 @@
         "{projectRoot}/**/*"
       ],
       "cache": true
+    },
+    "prepare-js": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "prepare-js"
+      },
+      "dependsOn": [
+        { "projects": ["devextreme"], "target": "build" },
+        { "projects": ["devextreme-angular", "devextreme-react", "devextreme-vue"], "target": "pack" }
+      ],
+      "inputs": [
+        "default",
+        "{projectRoot}/gulpfile.js/**/*",
+        "{projectRoot}/rollup.devextreme-angular.umd.config.mjs"
+      ],
+      "outputs": [
+        "{projectRoot}/Demos/**/config.js"
+      ],
+      "cache": true
     }
   },
   "namedInputs": {