devextreme-cli 1.8.0 → 1.9.1-1.11.0-alpha.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-cli",
-  "version": "1.8.0",
+  "version": "1.9.1-1.11.0-alpha.0.0",
   "description": "DevExtreme CLI",
   "keywords": [
     "devexpress",
@@ -43,7 +43,7 @@
     "minimist": "^1.2.8",
     "mustache": "^3.2.1",
     "prompts": "^2.4.2",
-    "sass": "^1.77.6",
+    "sass": "^1.85.1",
     "semver": "^5.7.2",
     "strip-bom": "^4.0.0"
   },
@@ -51,6 +51,7 @@
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "babel-eslint": "^10.1.0",
+    "create-vite": "6.3.1",
     "cross-env": "^5.2.1",
     "eslint": "^7.32.0",
     "eslint-config-angular": "^0.5.0",
@@ -58,8 +59,8 @@
     "eslint-plugin-angular": "^4.1.0",
     "eslint-plugin-jest": "^22.21.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-unused-imports": "^1.1.5",
     "eslint-plugin-vue": "^7.20.0",
     "eslint-stylish": "^0.2.0",
@@ -72,5 +73,5 @@
     "typescript": "^4.0.2",
     "typescript-eslint-parser": "^22.0.0"
   },
-  "gitHead": "b1e11fb858e65b9b506bd0da0b1ec689d267c0e7"
+  "gitHead": "d1f6fa7bed054c3df8baec671e91ca9dea1e4a38"
 }

package/src/applications/application.angular.js

@@ -7,7 +7,9 @@ const fs = require('fs');
 const dasherize = require('../utility/string').dasherize;
 const ngVersion = require('../utility/ng-version');
 const latestVersions = require('../utility/latest-versions');
-const { extractToolingVersion, toolingVersionOptionName } = require('../utility/extract-tooling-version');
+const { extractDepsVersionTag, depsVersionTagOptionName } = require('../utility/extract-deps-version-tag');
+const { getPackageJsonPath } = require('../utility/package-json-utils');
+const modifyJson = require('../utility/modify-json-file');
 const schematicsVersion = latestVersions['devextreme-schematics'] || 'latest';
 
 const minNgCliVersion = new semver('17.0.0');
@@ -27,7 +29,7 @@ async function runSchematicCommand(schematicCommand, options, evaluatingOptions)
 
     const commandArguments = ['g', `${collectionName}:${schematicCommand}`];
 
-    const { [toolingVersionOptionName]: _, ...optionsToArguments } = options; // eslint-disable-line no-unused-vars
+    const { [depsVersionTagOptionName]: _, ...optionsToArguments } = options; // eslint-disable-line no-unused-vars
     for(let option in optionsToArguments) {
         commandArguments.push(`--${dasherize(option)}=${options[option]}`);
     }
@@ -37,12 +39,13 @@ async function runSchematicCommand(schematicCommand, options, evaluatingOptions)
 
 async function runNgCommand(commandArguments, commandOptions, commandConfig) {
     const hasNg = await hasSutableNgCli();
-    const toolingVersion = extractToolingVersion(commandOptions);
-    const npmCommandName = hasNg && !toolingVersion ? 'ng' : 'npx';
+    const depsVersionTag = extractDepsVersionTag(commandOptions);
+    const npmCommandName = hasNg && !depsVersionTag ? 'ng' : 'npx';
     const [minCliLtsVersion] = minNgCliVersion.version.split('.');
-    const ngCommandArguments = hasNg && !toolingVersion
+
+    const ngCommandArguments = hasNg && !depsVersionTag
         ? []
-        : ['-p', `@angular/cli@v${minCliLtsVersion}-lts`, 'ng'];
+        : ['-p', `@angular/cli@${depsVersionTag || `v${minCliLtsVersion}-lts`}`, 'ng'];
 
     ngCommandArguments.push(...commandArguments);
     return runCommand(npmCommandName, ngCommandArguments, commandConfig);
@@ -74,8 +77,26 @@ const install = async(options) => {
     });
 };
 
+const bumpAngular = (appPath, versionTag) => {
+    modifyJson(getPackageJsonPath(appPath), ({ dependencies, devDependencies, ...rest }) => {
+        const bump = (section) => {
+            for(const depName in section) {
+                section[depName] = depName.startsWith('@angular') ? versionTag : section[depName];
+            }
+        };
+
+        return {
+            dependencies: bump(dependencies),
+            devDependencies: bump(devDependencies),
+            ...rest,
+        };
+    });
+
+};
+
 const create = async(appName, options) => {
     const layout = await getLayoutInfo(options.layout);
+    const depsVersionTag = extractDepsVersionTag(options);
 
     const commandArguments = [
         'new',
@@ -92,6 +113,10 @@ const create = async(appName, options) => {
 
     const appPath = path.join(process.cwd(), appName);
 
+    if(depsVersionTag) {
+        bumpAngular(appPath, depsVersionTag);
+    }
+
     options.resolveConflicts = 'override';
     options.updateBudgets = true;
     options.layout = layout;
@@ -125,7 +150,7 @@ const changeMainTs = (appPath) => {
     moduleWorker.insertImport(filePath, 'devextreme/ui/themes', 'themes', true);
 
     const fileContent = fs.readFileSync(filePath).toString();
-    const bootstrapPattern = /platformBrowserDynamic\(\)\.bootstrapModule\(\s*AppModule\s*(?:,\s*\{[^}]*\})?\s*\)/;
+    const bootstrapPattern = /platformBrowser(?:Dynamic)?\(\)\.bootstrapModule\(\s*AppModule\s*(?:,\s*\{[^}]*\})?\s*\)/;
     const firstChaptStr = fileContent.match(bootstrapPattern)[0];
     const lastChaptStr = '.catch(err => console.error(err));';
 

package/src/applications/application.react.js

@@ -3,6 +3,7 @@ const path = require('path');
 const fs = require('fs');
 const getLayoutInfo = require('../utility/prompts/layout');
 const getTemplateTypeInfo = require('../utility/prompts/typescript');
+const getTranspilerTypeInfo = require('../utility/prompts/transpiler');
 const templateCreator = require('../utility/template-creator');
 const packageManager = require('../utility/package-manager');
 const packageJsonUtils = require('../utility/package-json-utils');
@@ -13,13 +14,13 @@ const stringUtils = require('../utility/string');
 const typescriptUtils = require('../utility/typescript-extension');
 const removeFile = require('../utility/file-operations').remove;
 const latestVersions = require('../utility/latest-versions');
-const { extractToolingVersion } = require('../utility/extract-tooling-version');
+const { extractDepsVersionTag } = require('../utility/extract-deps-version-tag');
 const defaultStyles = [
     'devextreme/dist/css/dx.light.css'
 ];
 
 const getExtension = (appPath) => {
-    return fs.existsSync(path.join(appPath, 'src', 'App.tsx')) ? '.tsx' : '.js';
+    return fs.existsSync(path.join(appPath, 'src', 'App.tsx')) ? '.tsx' : '.jsx';
 };
 
 const pathToPagesIndex = () => {
@@ -27,9 +28,9 @@ const pathToPagesIndex = () => {
     return path.join(process.cwd(), 'src', 'pages', `index${extension}`);
 };
 
-const preparePackageJsonForTemplate = (appPath, appName, isTypeScript) => {
+const preparePackageJsonForTemplate = (appPath, appName) => {
     const dependencies = [
-        { name: 'sass', version: '^1.34.1' },
+        { name: 'sass-embedded', version: '^1.85.1' },
         { name: 'devextreme-cli', version: latestVersions['devextreme-cli'], dev: true },
         { name: 'react-router-dom', version: '^6.3.0' },
     ];
@@ -51,8 +52,20 @@ const updateJsonPropName = (path, name) => {
     });
 };
 
+const bumpReact = (appPath, versionTag) => {
+    const dependencies = [
+        { name: 'react', version: versionTag },
+        { name: 'react-dom', version: versionTag },
+        { name: '@types/react', version: versionTag, dev: true },
+        { name: '@types/react-dom', version: versionTag, dev: true },
+    ];
+
+    packageJsonUtils.addDependencies(appPath, dependencies);
+};
+
 const create = async(appName, options) => {
     const templateType = await getTemplateTypeInfo(options.template);
+    const transpiler = await getTranspilerTypeInfo(options.transpiler);
     const layoutType = await getLayoutInfo(options.layout);
 
     const templateOptions = Object.assign({}, options, {
@@ -60,26 +73,30 @@ const create = async(appName, options) => {
         layout: stringUtils.classify(layoutType),
         isTypeScript: typescriptUtils.isTypeScript(templateType)
     });
-    const toolingVersion = extractToolingVersion(options);
-    const commandArguments = [`-p=create-react-app${toolingVersion}`, 'create-react-app', appName];
+    const depsVersionTag = extractDepsVersionTag(options);
 
-    if(templateOptions.isTypeScript) {
-        commandArguments.push('--template typescript');
-    }
+    const commandArguments = [`-p=create-vite@${depsVersionTag || latestVersions['create-vite']}`, 'create-vite', appName];
+
+    commandArguments.push(`--template react${transpiler === 'swc' ? '-swc' : ''}${templateOptions.isTypeScript ? '-ts' : ''}`);
 
     await runCommand('npx', commandArguments);
 
     const appPath = path.join(process.cwd(), appName);
 
     modifyIndexHtml(appPath, templateOptions.project);
+
+    if(depsVersionTag) {
+        bumpReact(appPath, depsVersionTag);
+    }
+
     addTemplate(appPath, appName, templateOptions);
 };
 
 const modifyIndexHtml = (appPath, appName) => {
-    const indexHtmlPath = path.join(appPath, 'public', 'index.html');
+    const indexHtmlPath = path.join(appPath, 'index.html');
 
     let htmlContent = fs.readFileSync(indexHtmlPath).toString();
-    htmlContent = htmlContent.replace(/<title>(\w+\s*)+<\/title>/, `<title>${appName}<\/title>`);
+    htmlContent = htmlContent.replace(/<title>[^<]+<\/title>/, `<title>${appName}<\/title>`);
     htmlContent = htmlContent.replace('<body>', '<body class="dx-viewport">');
 
     fs.writeFileSync(indexHtmlPath, htmlContent);
@@ -96,7 +113,6 @@ const addTemplate = (appPath, appName, templateOptions) => {
     );
 
     const manifestPath = path.join(appPath, 'public', 'manifest.json');
-    const indexPath = path.join(appPath, 'src', templateOptions.isTypeScript ? 'index.tsx' : 'index.js');
 
     const styles = [
         './themes/generated/theme.additional.css',
@@ -107,15 +123,15 @@ const addTemplate = (appPath, appName, templateOptions) => {
     ];
 
     templateCreator.moveTemplateFilesToProject(applicationTemplatePath, appPath, templateOptions, getCorrectPath);
-    removeFile(path.join(appPath, 'src', 'App.css'));
-    !templateOptions.isTypeScript && removeFile(path.join(appPath, 'src', 'types.js'));
+
+    !templateOptions.isTypeScript && removeFile(path.join(appPath, 'src', 'types.jsx'));
+
     if(!templateOptions.empty) {
         addSamplePages(appPath, templateOptions);
     }
 
     preparePackageJsonForTemplate(appPath, appName, templateOptions.isTypeScript);
     updateJsonPropName(manifestPath, appName);
-    addPolyfills(packageJsonUtils.getPackageJsonPath(), indexPath);
     install({}, appPath, styles);
 };
 
@@ -129,15 +145,6 @@ const install = (options, appPath, styles) => {
     packageManager.runInstall({ cwd: appPath });
 };
 
-const addPolyfills = (packagePath, indexPath) => {
-    const packages = [
-        { name: 'react-app-polyfill', version: '^1.0.0' }
-    ];
-
-    packageJsonUtils.addDependencies(packagePath, packages);
-    moduleUtils.insertImport(indexPath, './polyfills');
-};
-
 const addStylesToApp = (filePath, styles) => {
     styles.forEach(style => {
         moduleUtils.insertImport(filePath, style);

package/src/applications/application.vue.js

@@ -9,7 +9,7 @@ const insertItemToArray = require('../utility/file-content').insertItemToArray;
 const moduleUtils = require('../utility/module');
 const stringUtils = require('../utility/string');
 const latestVersions = require('../utility/latest-versions');
-const { toolingVersionOptionName, extractToolingVersion } = require('../utility/extract-tooling-version');
+const { depsVersionTagOptionName, extractDepsVersionTag } = require('../utility/extract-deps-version-tag');
 const defaultStyles = [
     'devextreme/dist/css/dx.light.css'
 ];
@@ -37,25 +37,42 @@ const preparePackageJsonForTemplate = (appPath, appName) => {
     packageJsonUtils.updateName(appPath, appName);
 };
 
-async function createVueApp(name, templateOptions) {
-    const toolingVersion = extractToolingVersion(templateOptions);
-    const argList = ['-p', `@vue/cli${toolingVersion}`, 'vue', 'create', name, '--registry', 'https://registry.npmjs.org/', '-p "Default (Vue 3)"'];
+async function createVueApp(name, depsVersionTag) {
+    const argList = ['-p', `@vue/cli@${depsVersionTag}`, 'vue', 'create', name, '--registry', 'https://registry.npmjs.org/', '-p "Default (Vue 3)"'];
 
     return runCommand('npx', argList);
 }
 
+const bumpVue = (appPath, versionTag) => {
+    const dependencies = [
+        { name: 'vue', version: versionTag },
+        { name: 'vue-router', version: versionTag },
+        { name: '@vue/cli-plugin-babel', version: versionTag, dev: true },
+        { name: '@vue/cli-plugin-eslint', version: versionTag, dev: true },
+        { name: '@vue/cli-service', version: versionTag, dev: true },
+    ];
+
+    packageJsonUtils.addDependencies(appPath, dependencies);
+};
+
 const create = async(appName, options) => {
     const layout = await getLayoutInfo(options.layout);
+    const depsVersionTag = extractDepsVersionTag(options);
 
     const templateOptions = {
         project: stringUtils.humanize(appName),
         layout: layout,
-        [toolingVersionOptionName]: options[toolingVersionOptionName]
+        [depsVersionTagOptionName]: options[depsVersionTagOptionName]
     };
 
-    await createVueApp(appName, templateOptions);
+    await createVueApp(appName, depsVersionTag);
 
     const appPath = path.join(process.cwd(), appName);
+
+    if(depsVersionTag) {
+        bumpVue(appPath, depsVersionTag);
+    }
+
     modifyIndexHtml(appPath, templateOptions.project);
     addTemplate(appPath, appName, templateOptions);
 };

package/src/templates/react/application/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/src/templates/react/application/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/src/templates/react/application/src/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { HashRouter as Router } from 'react-router-dom';
 import './dx-styles.scss';
 import LoadPanel from 'devextreme-react/load-panel';

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import Form, {
   Item,
@@ -19,7 +19,7 @@ export default function ChangePasswordForm() {
   const formData = useRef({ password: '' });
   const { recoveryCode } = useParams();
 
-  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
     const { password } = formData.current;
     setLoading(true);

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

@@ -1,10 +1,7 @@
-@import "../../themes/generated/variables.base.scss";
-
 .create-account-form {
   .policy-info {
-    margin: 10px 0;
     color: var(--base-text-color-alpha-7);
-    font-size: 14px;
+    font-size: 12px;
     font-style: normal;
 
     a {
@@ -14,7 +11,9 @@
 
   .login-link {
     color: var(--base-accent);
-    font-size: 16px;
+    font-size: 12px;
     text-align: center;
+    padding: 6px 0 32px 0;
+    border-bottom: 1px solid var(--border-color);
   }
 }

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import Form, {
   Item,
@@ -20,7 +20,7 @@ export default function CreateAccountForm() {
   const [loading, setLoading] = useState(false);
   const formData = useRef({ email: '', password: '' });
 
-  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
     const { email, password } = formData.current;
     setLoading(true);
@@ -92,12 +92,10 @@ export default function CreateAccountForm() {
             </span>
           </ButtonOptions>
         </ButtonItem>
-        <Item>
-          <div className={'login-link'}>
-            Have an account? <Link to={'/login'}>Sign In</Link>
-          </div>
-        </Item>
       </Form>
+      <div className={'login-link'}>
+        Have an account? <Link to={'/login'}>Sign In</Link>
+      </div>
     </form>
   );
 }

package/src/templates/react/application/src/components/footer/Footer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import './Footer.scss';
 
 export default function Footer({ ...rest }) {

package/src/templates/react/application/src/components/header/Header.scss

@@ -1,4 +1,4 @@
-@import "../../dx-styles.scss";
+@use "../../dx-styles.scss" as *;
 
 header {
   background-color: var(--base-bg);

package/src/templates/react/application/src/components/header/Header.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Toolbar, { Item } from 'devextreme-react/toolbar';
 import Button from 'devextreme-react/button';
 import UserPanel from '../user-panel/UserPanel';

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

@@ -1,18 +1,12 @@
-@import "../../themes/generated/variables.base.scss";
-
 .login-form {
   .link {
     text-align: center;
-    font-size: 16px;
+    font-size: 12px;
     font-style: normal;
-
-    a {
-      text-decoration: none;
-    }
+    margin: 6px 0 50px;
   }
 
   .form-text {
-    margin: 10px 0;
     color: var(--base-text-color-alpha-7);
   }
 }

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import Form, {
   Item,
@@ -9,6 +9,7 @@ import Form, {
   EmailRule
 } from 'devextreme-react/form';
 import LoadIndicator from 'devextreme-react/load-indicator';
+import Button from 'devextreme-react/button';
 import notify from 'devextreme/ui/notify';
 import { useAuth } from '../../contexts/auth';
 
@@ -20,7 +21,7 @@ export default function LoginForm() {
   const [loading, setLoading] = useState(false);
   const formData = useRef({ email: '', password: '' });
 
-  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
     const { email, password } = formData.current;
     setLoading(true);
@@ -78,19 +79,16 @@ export default function LoginForm() {
             </span>
           </ButtonOptions>
         </ButtonItem>
-        <Item>
-          <div className={'link'}>
-            <Link to={'/reset-password'}>Forgot password?</Link>
-          </div>
-        </Item>
-        <ButtonItem>
-          <ButtonOptions
-            text={'Create an account'}
-            width={'100%'}
-            onClick={onCreateAccountClick}
-          />
-        </ButtonItem>
       </Form>
+      <div className={'link'}>
+        <Link to={'/reset-password'}>Forgot password?</Link>
+      </div>
+      <Button
+        text={'Create an account'}
+        stylingMode={ 'outlined' }
+        width={'100%'}
+        onClick={onCreateAccountClick}
+      />
     </form>
   );
 }

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

@@ -1,13 +1,12 @@
-@import "../../themes/generated/variables.base.scss";
-
 .reset-password-form {
   .submit-button {
-    margin-top: 10px;
+    margin-top: 18px;
   }
 
   .login-link {
     color: var(--base-accent);
-    font-size: 16px;
+    font-size: 12px;
     text-align: center;
+    margin-top: 6px;
   }
 }

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
 import { Link, useNavigate } from "react-router-dom";
 import Form, {
   Item,
@@ -20,7 +20,7 @@ export default function ResetPasswordForm() {
   const [loading, setLoading] = useState(false);
   const formData = useRef({ email: '', password: '' });
 
-  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
     const { email } = formData.current;
     setLoading(true);
@@ -64,12 +64,10 @@ export default function ResetPasswordForm() {
             </span>
           </ButtonOptions>
         </ButtonItem>
-        <Item>
-          <div className={'login-link'}>
-            Return to <Link to={'/login'}>Sign In</Link>
-          </div>
-        </Item>
       </Form>
+      <div className={'login-link'}>
+        Return to <Link to={'/login'}>Sign In</Link>
+      </div>
     </form>
   );
 }

package/src/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.scss

@@ -1,4 +1,5 @@
-@import "../../dx-styles.scss";
+@use "../../dx-styles" as *;
+@use  "../../utils/patches";
 
 .dx-swatch-additional, .dx-swatch-additional-dark {
   &.side-navigation-menu {
@@ -71,6 +72,5 @@
 }
 
 .dx-drawer-overlap.pre-init-blink-fix {
-  @import "../../utils/patches.scss";
-  @include menu-pre-init-patch;
+  @include patches.menu-pre-init-patch;
 }

package/src/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useCallback, useMemo, useContext } from 'react';
 import { TreeView<%=#isTypeScript%>, TreeViewRef<%=/isTypeScript%> } from 'devextreme-react/tree-view';
-import * as events from 'devextreme/events';
+import * as events from 'devextreme-react/common/core/events';
 import { navigation } from '../../app-navigation';
 import { useNavigation } from '../../contexts/navigation';
 import { useScreenSize } from '../../utils/media-query';
@@ -35,7 +35,7 @@ export default function SideNavigationMenu(props<%=#isTypeScript%>: React.PropsW
   const { navigationData: { currentPath } } = useNavigation();
 
   const treeViewRef = useRef<%=#isTypeScript%><TreeViewRef><%=/isTypeScript%>(null);
-  const wrapperRef = useRef<%=#isTypeScript%><HTMLDivElement><%=/isTypeScript%>();
+  const wrapperRef = useRef<%=#isTypeScript%><HTMLDivElement><%=/isTypeScript%>(null);
   const getWrapperRef = useCallback((element<%=#isTypeScript%>: HTMLDivElement<%=/isTypeScript%>) => {
     const prevElement = wrapperRef.current;
     if (prevElement) {

package/src/templates/react/application/src/components/theme-switcher/ThemeSwitcher.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from 'react';
+import { useCallback, useContext } from 'react';
 import Button from 'devextreme-react/button';
 import { ThemeContext } from '../../theme';
 
@@ -7,7 +7,7 @@ export const ThemeSwitcher = () => {
 
   const onButtonClick = useCallback(() => {
     themeContext?.switchTheme();
-  }, []);
+  }, [themeContext]);
 
   return <div>
             <Button

package/src/templates/react/application/src/components/user-panel/UserPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 import { useNavigate } from "react-router-dom";
 import DropDownButton from 'devextreme-react/drop-down-button';
 import List from 'devextreme-react/list';

package/src/templates/react/application/src/dx-styles.scss

@@ -1,3 +1,5 @@
+@use "variables.scss" as *;
+
 $side-panel-min-width: 60px;
 
 html,
@@ -25,6 +27,7 @@ body {
     display: flex;
     height: 100%;
     width: 100%;
+    min-width: 320px;
   }
 
   .content {
@@ -37,10 +40,10 @@ body {
       margin: 0;
       line-height: 40px;
     }
+  }
 
-    .screen-x-small & {
-      padding: 20px;
-    }
+  .screen-x-small :not(.dx-card).content {
+    padding: 20px;
   }
 
   .container {