devextreme-cli 1.12.1 → 1.13.0

package/index.js

@@ -41,7 +41,7 @@ const run = async(commands, options) => {
         await application.run(commands, options, devextremeConfig.read());
     } else if(application.isMigrationCommand(commands[0])) {
         if(!commands[1]) {
-            console.error('Please specify a change name for migration.');
+            console.error('Please specify a migration command.');
             printHelp('migrate');
             return;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-cli",
-  "version": "1.12.1",
+  "version": "1.13.0",
   "description": "DevExtreme CLI",
   "keywords": [
     "devexpress",
@@ -43,14 +43,13 @@
     "minimist": "^1.2.8",
     "mustache": "^3.2.1",
     "prompts": "^2.4.2",
-    "sass": "^1.93.3",
+    "sass": "^1.97.1",
     "semver": "^5.7.2",
     "strip-bom": "^4.0.0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "babel-eslint": "^10.1.0",
     "create-vite": "7.1.3",
     "cross-env": "^5.2.1",
     "eslint": "^7.32.0",
@@ -70,9 +69,13 @@
     "rimraf": "^2.7.1",
     "tree-kill": "^1.2.2",
     "tree-kill-promise": "^1.0.12",
-    "typescript": "^4.0.2",
+    "typescript": "^4.9.5",
     "typescript-eslint-parser": "^22.0.0",
     "wait-on": "8.0.5"
   },
-  "gitHead": "7af3cab84fb0dee433711d63dd8ed65af4c7d9dd"
+  "overrides": {
+    "@babel/traverse@<7.23.2": ">=7.23.2",
+    "braces@<3.0.3": ">=3.0.3"
+  },
+  "gitHead": "51bbc8d2fbfa40b741792c6921e27429cdb04c6f"
 }

package/src/application.js

@@ -19,7 +19,7 @@ const handleWrongAppType = (appType, command) => {
 };
 
 const handleWrongChangeName = (changeName, command) => {
-    console.error(`The '${changeName}' change name is not valid`);
+    console.error(`Invalid migration command: ${changeName}`);
     printHelp(command);
 };
 

package/src/applications/application.angular.js

@@ -194,7 +194,7 @@ const migrateConfigComponents = async(options = {}) => {
     if(!collectionPath) {
         const prompts = require('prompts');
 
-        console.log(`\nThe '${collectionName}' package is required to run this command.`);
+        console.log(`\nRequired package is missing: '${collectionName}'`);
 
         const response = await prompts({
             type: 'confirm',
@@ -204,7 +204,7 @@ const migrateConfigComponents = async(options = {}) => {
         });
 
         if(!response.install) {
-            console.log('Migration cancelled. Install devextreme-schematics manually and rerun the command.');
+            console.log('Migration was canceled.');
             process.exit(1);
         }
     }

package/src/applications/application.nextjs.js

@@ -79,6 +79,7 @@ const create = async(appName, options) => {
         '--src-dir',
         '--app',
         '--no-turbopack',
+        '--no-react-compiler',
         '--import-alias "@/*"',
     ];
 

package/src/applications/application.react.js

@@ -82,7 +82,7 @@ const create = async(appName, options) => {
 
     const commandArguments = [`-p=create-vite@${depsVersionTag || latestVersions['create-vite']}`, 'create-vite', appName];
 
-    commandArguments.push(`--template react${transpiler === 'swc' ? '-swc' : ''}${templateOptions.isTypeScript ? '-ts' : ''}`);
+    commandArguments.push(`--template react${transpiler === 'swc' ? '-swc' : ''}${templateOptions.isTypeScript ? '-ts' : ''} --no-rolldown --no-interactive`);
 
     await runCommand('npx', commandArguments);
 

package/src/applications/application.vue.js

@@ -17,15 +17,10 @@ const defaultStyles = [
 const preparePackageJsonForTemplate = (appPath, appName) => {
     const dependencies = [
         { name: 'sass-embedded', version: '^1.85.1' },
-        { name: 'vue-router', version: '^3.0.1' },
+        { name: 'vue-router', version: '^4.0.1' },
         { name: 'devextreme-cli', version: latestVersions['devextreme-cli'], dev: true }
     ];
 
-    const nameDepends = dependencies.map(d => d.name);
-    const indexVueRouter = nameDepends.indexOf('vue-router');
-
-    dependencies[indexVueRouter].version = '^4.0.1';
-
     const scripts = [
         { name: 'build-themes', value: 'devextreme build' },
         { name: 'postinstall', value: 'npm run build-themes' }

package/src/commands.json

@@ -51,19 +51,19 @@
     }, {
         "name": "migrate",
         "description": "Migration commands for DevExtreme applications",
-        "usage": "devextreme migrate <change name> [options]",
+        "usage": "devextreme migrate <migration command> [options]",
         "arguments": [{
             "name": "angular-config-components",
-            "description": "Migrate to the latest DevExtreme configuration components.",
+            "description": "Migrates DevExtreme Angular applications to named configuration components.",
             "options": [{
                 "name": "--include",
-                "description": "Template file glob patterns to include (default: **/*.html). You can pass multiple patterns as a comma-separated string (e.g. \"**/a.html,**/b.html\") or as an array (e.g. [\"**/a.html\",\"**/b.html\"])."
+                "description": "Template file glob patterns to include (default: **/*.html). You can pass multiple patterns as a comma-separated string (\"**/a.html,**/b.html\") or as an array ([\"**/a.html\",\"**/b.html\"])."
             }, {
                 "name": "--script-include",
-                "description": "TypeScript/JavaScript file glob patterns to scan for inline templates (default: **/*.ts,**/*.js). You can pass multiple patterns as a comma-separated string or as an array. Pass an empty value ('' or []) to disable."
+                "description": "TypeScript/JavaScript file glob patterns to scan for inline templates (default: **/*.ts,**/*.js). You can pass multiple patterns as a comma-separated string or as an array. Pass an empty value to disable ('' or [])."
             }, {
                 "name": "--dry",
-                "description": "Run in dry mode to preview changes without applying them (default: false)."
+                "description": "Run in dry mode to preview changes."
             }]
         }]
     }, {

package/src/templates/nextjs/application/src/components/change-password-form/ChangePasswordForm.tsx

@@ -1,5 +1,5 @@
 'use client'
-import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import Form, {
   Item,
@@ -7,7 +7,8 @@ import Form, {
   ButtonItem,
   ButtonOptions,
   RequiredRule,
-  CustomRule,
+  CustomRule,<%=#isTypeScript%>
+  type FormTypes,<%=/isTypeScript%>
 } from 'devextreme-react/form';
 import LoadIndicator from 'devextreme-react/load-indicator';
 import notify from 'devextreme/ui/notify';
@@ -17,11 +18,22 @@ import { changePassword } from '@/app/actions/auth';
 export default function ChangePasswordForm() {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({ password: '' });
+  const [formData, setFormData] = useState({ password: '' });
+
+  const onFieldDataChanged = useCallback((e<%=#isTypeScript%>: FormTypes.FieldDataChangedEvent<%=/isTypeScript%>) => {
+    const { dataField, value } = e;
+
+    if (dataField) {
+      setFormData(formData => ({
+        ...formData,
+        [dataField]: value,
+      }));
+    }
+  }, []);
 
   const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
   e.preventDefault();
-  const { password } = formData.current;
+  const { password } = formData;
   setLoading(true);
 
   const result = await changePassword(password);
@@ -32,16 +44,16 @@ export default function ChangePasswordForm() {
   } else {
     notify(result.message, 'error', 2000);
   }
-}, [router]);
+}, [router, formData]);
 
 const confirmPassword = useCallback(
-  ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
-  []
+  ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.password,
+  [formData]
 );
 
 return (
   <form onSubmit={onSubmit}>
-    <Form formData={formData.current} disabled={loading}>
+    <Form formData={formData} disabled={loading} onFieldDataChanged={onFieldDataChanged}>
       <Item
         dataField={'password'}
         editorType={'dxTextBox'}

package/src/templates/nextjs/application/src/components/create-account-form/CreateAccountForm.tsx

@@ -1,5 +1,5 @@
 'use client'
-import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import Form, {
@@ -9,7 +9,8 @@ import Form, {
   ButtonOptions,
   RequiredRule,
   CustomRule,
-  EmailRule
+  EmailRule,<%=#isTypeScript%>
+  type FormTypes,<%=/isTypeScript%>
 } from 'devextreme-react/form';
 import notify from 'devextreme/ui/notify';
 import LoadIndicator from 'devextreme-react/load-indicator';
@@ -20,11 +21,22 @@ import './CreateAccountForm.scss';
 export default function CreateAccountForm() {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({ email: '', password: '' });
+  const [formData, setFormData] = useState({ email: '', password: '' });
+
+  const onFieldDataChanged = useCallback((e<%=#isTypeScript%>: FormTypes.FieldDataChangedEvent<%=/isTypeScript%>) => {
+    const { dataField, value } = e;
+
+    if (dataField) {
+      setFormData(formData => ({
+        ...formData,
+        [dataField]: value,
+      }));
+    }
+  }, []);
 
   const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
-    const { email, password } = formData.current;
+    const { email, password } = formData;
     setLoading(true);
 
     const result = await signUp(email, password);
@@ -35,16 +47,16 @@ export default function CreateAccountForm() {
     } else {
       notify(result.message, 'error', 2000);
     }
-  }, [router]);
+  }, [router, formData]);
 
   const confirmPassword = useCallback(
-    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
-    []
+    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.password,
+    [formData]
   );
 
   return (
     <form className={'create-account-form'} onSubmit={onSubmit}>
-      <Form formData={formData.current} disabled={loading}>
+      <Form formData={formData} disabled={loading} onFieldDataChanged={onFieldDataChanged}>
         <Item
           dataField={'email'}
           editorType={'dxTextBox'}

package/src/templates/nextjs/application/src/components/login-form/LoginForm.tsx

@@ -1,5 +1,5 @@
 'use client'
-import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import Form, {
@@ -8,7 +8,8 @@ import Form, {
   ButtonItem,
   ButtonOptions,
   RequiredRule,
-  EmailRule
+  EmailRule,<%=#isTypeScript%>
+  type FormTypes,<%=/isTypeScript%>
 } from 'devextreme-react/form';
 import LoadIndicator from 'devextreme-react/load-indicator';
 import Button from 'devextreme-react/button';
@@ -20,11 +21,22 @@ import './LoginForm.scss';
 export default function LoginForm() {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({ email: '', password: '' });
+  const [formData, setFormData] = useState({ email: '', password: '' });
+
+  const onFieldDataChanged = useCallback((e<%=#isTypeScript%>: FormTypes.FieldDataChangedEvent<%=/isTypeScript%>) => {
+    const { dataField, value } = e;
+
+    if (dataField) {
+      setFormData(formData => ({
+        ...formData,
+        [dataField]: value,
+      }));
+    }
+  }, []);
 
   const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
-    const { email, password } = formData.current;
+    const { email, password } = formData;
     setLoading(true);
 
     const result = await signIn(email, password);
@@ -34,7 +46,7 @@ export default function LoginForm() {
     } else {
       router.push('/');
     }
-  }, [router]);
+  }, [router, formData]);
 
   const onCreateAccountClick = useCallback(() => {
     router.push('/auth/create-account');
@@ -42,7 +54,7 @@ export default function LoginForm() {
 
   return (
     <form className={'login-form'} onSubmit={onSubmit}>
-      <Form formData={formData.current} disabled={loading}>
+      <Form formData={formData} disabled={loading} onFieldDataChanged={onFieldDataChanged}>
         <Item
           dataField={'email'}
           editorType={'dxTextBox'}

package/src/templates/nextjs/application/src/components/reset-password-form/ResetPasswordForm.tsx

@@ -1,5 +1,5 @@
 'use client'
-import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import Form, {
@@ -8,7 +8,8 @@ import Form, {
   ButtonItem,
   ButtonOptions,
   RequiredRule,
-  EmailRule
+  EmailRule,<%=#isTypeScript%>
+  type FormTypes,<%=/isTypeScript%>
 } from 'devextreme-react/form';
 import LoadIndicator from 'devextreme-react/load-indicator';
 import notify from 'devextreme/ui/notify';
@@ -20,11 +21,22 @@ const notificationText = 'We\'ve sent a link to reset your password. Check your
 export default function ResetPasswordForm() {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({ email: '', password: '' });
+  const [formData, setFormData] = useState({ email: '', password: '' });
+
+  const onFieldDataChanged = useCallback((e<%=#isTypeScript%>: FormTypes.FieldDataChangedEvent<%=/isTypeScript%>) => {
+    const { dataField, value } = e;
+
+    if (dataField) {
+      setFormData(formData => ({
+        ...formData,
+        [dataField]: value,
+      }));
+    }
+  }, []);
 
   const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
-    const { email } = formData.current;
+    const { email } = formData;
     setLoading(true);
 
     const result = await resetPassword(email);
@@ -36,11 +48,11 @@ export default function ResetPasswordForm() {
     } else {
       notify(result.message, 'error', 2000);
     }
-  }, [router]);
+  }, [router, formData]);
 
   return (
     <form className={'reset-password-form'} onSubmit={onSubmit}>
-      <Form formData={formData.current} disabled={loading}>
+      <Form formData={formData} disabled={loading} onFieldDataChanged={onFieldDataChanged}>
         <Item
           dataField={'email'}
           editorType={'dxTextBox'}

package/src/templates/nextjs/application/src/index.css

@@ -1,8 +1,5 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
   -moz-osx-font-smoothing: grayscale;
 }
 

package/src/templates/nextjs/application/src/{middleware.ts → proxy.ts}

@@ -19,7 +19,7 @@ async function _DEMO_logIn() {
   // return NextResponse.redirect(new URL('/auth/login', req.nextUrl))
 }
 
-export default async function middleware(req<%=#isTypeScript%>: NextRequest<%=/isTypeScript%>) {
+export default async function proxy(req<%=#isTypeScript%>: NextRequest<%=/isTypeScript%>) {
   const path = req.nextUrl.pathname;
 
   if (!isProtectedRoute(path)) {

package/src/templates/react/application/src/components/change-password-form/ChangePasswordForm.tsx

@@ -1,4 +1,4 @@
-import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useCallback } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import Form, {
   Item,
@@ -6,7 +6,8 @@ import Form, {
   ButtonItem,
   ButtonOptions,
   RequiredRule,
-  CustomRule,
+  CustomRule,<%=#isTypeScript%>
+  type FormTypes,<%=/isTypeScript%>
 } from 'devextreme-react/form';
 import LoadIndicator from 'devextreme-react/load-indicator';
 import notify from 'devextreme/ui/notify';
@@ -16,12 +17,23 @@ import { changePassword } from '../../api/auth';
 export default function ChangePasswordForm() {
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({ password: '' });
+  const [formData, setFormData] = useState({ password: '' });
   const { recoveryCode } = useParams();
 
+  const onFieldDataChanged = useCallback((e<%=#isTypeScript%>: FormTypes.FieldDataChangedEvent<%=/isTypeScript%>) => {
+    const { dataField, value } = e;
+
+    if (dataField) {
+      setFormData(formData => ({
+        ...formData,
+        [dataField]: value,
+      }));
+    }
+  }, []);
+
   const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
-    const { password } = formData.current;
+    const { password } = formData;
     setLoading(true);
 
     const result = await changePassword(password, recoveryCode);
@@ -32,16 +44,16 @@ export default function ChangePasswordForm() {
     } else {
       notify(result.message, 'error', 2000);
     }
-  }, [navigate, recoveryCode]);
+  }, [navigate, recoveryCode, formData]);
 
   const confirmPassword = useCallback(
-    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
-    []
+    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.password,
+    [formData]
   );
 
   return (
     <form onSubmit={onSubmit}>
-      <Form formData={formData.current} disabled={loading}>
+      <Form formData={formData} disabled={loading} onFieldDataChanged={onFieldDataChanged}>
         <Item
           dataField={'password'}
           editorType={'dxTextBox'}

package/src/templates/react/application/src/components/create-account-form/CreateAccountForm.tsx

@@ -1,4 +1,4 @@
-import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useCallback } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import Form, {
   Item,
@@ -7,7 +7,8 @@ import Form, {
   ButtonOptions,
   RequiredRule,
   CustomRule,
-  EmailRule
+  EmailRule,<%=#isTypeScript%>
+  type FormTypes,<%=/isTypeScript%>
 } from 'devextreme-react/form';
 import notify from 'devextreme/ui/notify';
 import LoadIndicator from 'devextreme-react/load-indicator';
@@ -18,11 +19,22 @@ import './CreateAccountForm.scss';
 export default function CreateAccountForm() {
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({ email: '', password: '' });
+  const [formData, setFormData] = useState({ email: '', password: '' });
+
+  const onFieldDataChanged = useCallback((e<%=#isTypeScript%>: FormTypes.FieldDataChangedEvent<%=/isTypeScript%>) => {
+    const { dataField, value } = e;
+
+    if (dataField) {
+      setFormData(formData => ({
+        ...formData,
+        [dataField]: value,
+      }));
+    }
+  }, []);
 
   const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
-    const { email, password } = formData.current;
+    const { email, password } = formData;
     setLoading(true);
 
     const result = await createAccount(email, password);
@@ -33,16 +45,16 @@ export default function CreateAccountForm() {
     } else {
       notify(result.message, 'error', 2000);
     }
-  }, [navigate]);
+  }, [navigate, formData]);
 
   const confirmPassword = useCallback(
-    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
-    []
+    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.password,
+    [formData]
   );
 
   return (
     <form className={'create-account-form'} onSubmit={onSubmit}>
-      <Form formData={formData.current} disabled={loading}>
+      <Form formData={formData} disabled={loading} onFieldDataChanged={onFieldDataChanged}>
         <Item
           dataField={'email'}
           editorType={'dxTextBox'}

package/src/templates/react/application/src/components/login-form/LoginForm.tsx

@@ -1,4 +1,4 @@
-import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useCallback } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import Form, {
   Item,
@@ -6,7 +6,8 @@ import Form, {
   ButtonItem,
   ButtonOptions,
   RequiredRule,
-  EmailRule
+  EmailRule,<%=#isTypeScript%>
+  type FormTypes,<%=/isTypeScript%>
 } from 'devextreme-react/form';
 import LoadIndicator from 'devextreme-react/load-indicator';
 import Button from 'devextreme-react/button';
@@ -19,11 +20,22 @@ export default function LoginForm() {
   const navigate = useNavigate();
   const { signIn } = useAuth();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({ email: '', password: '' });
+  const [formData, setFormData] = useState({ email: '', password: '' });
+
+  const onFieldDataChanged = useCallback((e<%=#isTypeScript%>: FormTypes.FieldDataChangedEvent<%=/isTypeScript%>) => {
+    const { dataField, value } = e;
+
+    if (dataField) {
+      setFormData(formData => ({
+        ...formData,
+        [dataField]: value,
+      }));
+    }
+  }, []);
 
   const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
-    const { email, password } = formData.current;
+    const { email, password } = formData;
     setLoading(true);
 
     const result = await signIn(email, password);
@@ -31,7 +43,7 @@ export default function LoginForm() {
       setLoading(false);
       notify(result.message, 'error', 2000);
     }
-  }, [signIn]);
+  }, [signIn, formData]);
 
   const onCreateAccountClick = useCallback(() => {
     navigate('/create-account');
@@ -39,7 +51,7 @@ export default function LoginForm() {
 
   return (
     <form className={'login-form'} onSubmit={onSubmit}>
-      <Form formData={formData.current} disabled={loading}>
+      <Form formData={formData} disabled={loading} onFieldDataChanged={onFieldDataChanged}>
         <Item
           dataField={'email'}
           editorType={'dxTextBox'}

package/src/templates/react/application/src/components/reset-password-form/ResetPasswordForm.tsx

@@ -1,4 +1,4 @@
-import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useCallback } from 'react';
 import { Link, useNavigate } from "react-router-dom";
 import Form, {
   Item,
@@ -6,7 +6,8 @@ import Form, {
   ButtonItem,
   ButtonOptions,
   RequiredRule,
-  EmailRule
+  EmailRule,<%=#isTypeScript%>
+  type FormTypes,<%=/isTypeScript%>
 } from 'devextreme-react/form';
 import LoadIndicator from 'devextreme-react/load-indicator';
 import notify from 'devextreme/ui/notify';
@@ -18,11 +19,22 @@ const notificationText = 'We\'ve sent a link to reset your password. Check your
 export default function ResetPasswordForm() {
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({ email: '', password: '' });
+  const [formData, setFormData] = useState({ email: '', password: '' });
+
+  const onFieldDataChanged = useCallback((e<%=#isTypeScript%>: FormTypes.FieldDataChangedEvent<%=/isTypeScript%>) => {
+    const { dataField, value } = e;
+
+    if (dataField) {
+      setFormData(formData => ({
+        ...formData,
+        [dataField]: value,
+      }));
+    }
+  }, []);
 
   const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
-    const { email } = formData.current;
+    const { email } = formData;
     setLoading(true);
 
     const result = await resetPassword(email);
@@ -34,11 +46,11 @@ export default function ResetPasswordForm() {
     } else {
       notify(result.message, 'error', 2000);
     }
-  }, [navigate]);
+  }, [navigate, formData]);
 
   return (
     <form className={'reset-password-form'} onSubmit={onSubmit}>
-      <Form formData={formData.current} disabled={loading}>
+      <Form formData={formData} disabled={loading} onFieldDataChanged={onFieldDataChanged}>
         <Item
           dataField={'email'}
           editorType={'dxTextBox'}

package/src/templates/react/application/src/index.css

@@ -1,8 +1,5 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
   -moz-osx-font-smoothing: grayscale;
 }
 

package/src/utility/latest-versions.js

@@ -1,12 +1,12 @@
 const packageJson = require('../../package.json');
 module.exports = {
-    'devextreme': '25.1.6',
-    'devextreme-react': '25.1.6',
-    'devextreme-vue': '25.1.6',
-    'create-vite': '7.0.0',
+    'devextreme': '25.2.3',
+    'devextreme-react': '25.2.3',
+    'devextreme-vue': '25.2.3',
+    'create-vite': '8.2.0',
     'create-vue': '3.17.0',
-    'create-next-app': '15.3.4',
-    'jose': '6.0.11',
+    'create-next-app': '16.1.0',
+    'jose': '6.1.3',
     'devextreme-cli': packageJson.version,
     'devextreme-schematics': 'latest'
 };

package/src/utility/ng-version.js

@@ -2,12 +2,12 @@ const semver = require('semver').SemVer;
 const execSync = require('child_process').execSync;
 
 function parseNgCliVersion(stdout) {
-    return /angular.cli:\s*(\S+)/ig.exec(stdout)[1];
+    return stdout.trim();
 }
 
 const getLocalNgVersion = () => {
     try {
-        const version = parseNgCliVersion(execSync('ng v').toString());
+        const version = parseNgCliVersion(execSync('ng --version').toString());
         return new semver(version);
     } catch(e) {
         return '';