devextreme-cli 1.3.0-beta.1 → 1.3.0

package/index.js

@@ -23,7 +23,7 @@ if(!commands.length) {
     if(args.version) {
         console.log(packageJson.version);
     } else {
-        console.error('The DevExtreme command is not specified.');
+        console.error('DevExtreme command was not specified.');
         printHelp();
     }
     process.exit();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-cli",
-  "version": "1.3.0-beta.1",
+  "version": "1.3.0",
   "description": "DevExtreme CLI",
   "keywords": [
     "devexpress",
@@ -13,14 +13,23 @@
   "bin": {
     "devextreme": "index.js"
   },
+  "engines": {
+    "node": ">12.6.0",
+    "npm": ">6.2.0",
+    "yarn": ">1.21"
+  },
   "files": [
     "src/**/*",
     "index.js"
   ],
   "scripts": {
     "lint": "eslint ./",
-    "test": "npm run lint && jest --runInBand",
+    "test": "npm run create-template && npm run lint-template && npm run test-template && npm run test-themebuilder",
+    "create-template": "node ./testing/creating.js",
+    "lint-template": "node ./testing/linting.js",
+    "test-template": "node ./testing/testing.js",
     "test-dev": "cross-env TEST_MODE=dev jest",
+    "test-themebuilder": "jest --config=./jest-themebuilder.config.js --runInBand",
     "docker:build": "docker build --rm -f \"testing/docker/Dockerfile\" -t devextreme-cli:latest \"testing/docker\"",
     "docker:run": "docker run --rm -d  -p 9222:9222/tcp devextreme-cli:latest"
   },
@@ -29,22 +38,36 @@
   "license": "MIT",
   "dependencies": {
     "@yarnpkg/lockfile": "^1.1.0",
-    "dart-sass": "^1.25.0",
+    "import-cwd": "^3.0.0",
     "ip": "^1.1.5",
     "less": "3.9.0",
     "minimist": "^1.2.0",
     "mustache": "^3.0.1",
     "prompts": "^2.0.4",
-    "semver": "^5.6.0"
+    "sass": "^1.25.0",
+    "semver": "^5.6.0",
+    "strip-bom": "^4.0.0"
   },
   "devDependencies": {
+    "@typescript-eslint/parser": "^4.0.1",
+    "babel-eslint": "^10.1.0",
     "cross-env": "^5.2.0",
-    "eslint": "^7.7.0",
+    "eslint": "^7.8.0",
+    "eslint-config-angular": "^0.5.0",
+    "eslint-plugin-angular": "^4.0.1",
     "eslint-plugin-jest": "^22.5.1",
-    "jest": "^24.9.0",
-    "jest-image-snapshot": "^2.8.2",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.1.0",
+    "eslint-plugin-unused-imports": "^1.1.5",
+    "eslint-plugin-vue": "^7.0.0-beta.2",
+    "eslint-stylish": "^0.2.0",
+    "jest": "^27.3.1",
+    "jest-image-snapshot": "^4.5.0",
     "puppeteer": "^2.1.1",
     "rimraf": "^2.6.3",
-    "tree-kill": "^1.2.1"
-  }
+    "tree-kill": "^1.2.1",
+    "tree-kill-promise": "^1.0.3",
+    "typescript": "^4.0.2"
+  },
+  "gitHead": "c61a31f44439fe1b0e82449a15c4db8375af34f3"
 }

package/src/application.js

@@ -9,7 +9,7 @@ const isApplicationCommand = (command) => {
 
 const run = (commands, options, devextremeConfig) => {
     if(!commands[1]) {
-        console.error('No parameters found.');
+        console.error('Command is incomplete. Please specify parameters.');
         printHelp(commands[0]);
         return;
     }

package/src/applications/application.angular.js

@@ -1,5 +1,6 @@
-const getLayoutInfo = require('../layout').getLayoutInfo;
+const getLayoutInfo = require('../utility/prompts/layout').getLayoutInfo;
 const path = require('path');
+const moduleWorker = require('../utility/module');
 const runCommand = require('../utility/run-command');
 const semver = require('semver').SemVer;
 const fs = require('fs');
@@ -7,6 +8,7 @@ const exec = require('child_process').exec;
 const minNgCliVersion = new semver('8.0.0');
 const latestVersions = require('../utility/latest-versions');
 const schematicsVersion = latestVersions['devextreme-schematics'] || 'latest';
+let globalNgCliVersion = '';
 
 async function runSchematicCommand(schematicCommand, options, evaluatingOptions) {
     const collectionName = 'devextreme-schematics';
@@ -18,19 +20,19 @@ async function runSchematicCommand(schematicCommand, options, evaluatingOptions)
     }
 
     if(!localPackageExists(collectionName)) {
-        await runNgCommand(['add', collectionPath], evaluatingOptions);
+        await runNgCommand(['add', collectionPath, '--skipConfirmation=true'], evaluatingOptions);
     }
 
     const commandArguments = ['g', `${collectionName}:${schematicCommand}`];
     for(let option in options) {
         commandArguments.push(`--${option}=${options[option]}`);
-    };
+    }
 
     runNgCommand(commandArguments, evaluatingOptions);
 }
 
 async function runNgCommand(commandArguments, evaluatingOptions) {
-    const ngCommandArguments = await hasSutableNgCli() ? [] : ['-p', '@angular/cli@v9-lts'];
+    const ngCommandArguments = await hasSutableNgCli() ? [] : ['-p', '@angular/cli'];
 
     ngCommandArguments.push('ng', ...commandArguments);
     return runCommand('npx', ngCommandArguments, evaluatingOptions);
@@ -49,9 +51,13 @@ function localPackageExists(packageName) {
 function hasSutableNgCli() {
     return new Promise((resolve, reject) => {
         exec('ng v', (err, stdout, stderr) => {
-            stderr || parseNgCliVersion(stdout).compare(minNgCliVersion) < 0
-                ? resolve(false)
-                : resolve(true);
+            const parsingResult = !stderr && parseNgCliVersion(stdout);
+            if(parsingResult && parsingResult.compare(minNgCliVersion) < 0) {
+                globalNgCliVersion = parsingResult.version;
+                resolve(true);
+            } else {
+                resolve(false);
+            }
         });
     });
 }
@@ -61,20 +67,33 @@ function parseNgCliVersion(stdout) {
 }
 
 const install = (options) => {
-    runSchematicCommand('install', options);
+    runSchematicCommand('install', { ...options, globalNgCliVersion });
 };
 
 const create = (appName, options) => {
-    const commandArguments = ['new', appName, '--style=scss', '--routing=false', '--skip-tests=true', '--skip-install=true'];
+    const commandArguments = [
+        'new',
+        appName,
+        '--style=scss',
+        '--routing=false',
+        '--skip-tests=true',
+        '--skip-install=true',
+    ];
 
     getLayoutInfo(options.layout).then(layoutInfo => {
         runNgCommand(commandArguments).then(() => {
+            const appPath = path.join(process.cwd(), appName);
+
             options.resolveConflicts = 'override';
             options.updateBudgets = true;
             options.layout = layoutInfo.layout;
             addTemplate(appName, options, {
-                cwd: path.join(process.cwd(), appName)
+                cwd: appPath
             });
+
+            changeMainTs(appPath);
+        }).catch((e) => {
+            console.log(e);
         });
     });
 };
@@ -92,6 +111,23 @@ const addView = (viewName, options) => {
     runSchematicCommand('add-view', schematicOptions);
 };
 
+const changeMainTs = (appPath) => {
+    const filePath = path.join(appPath, 'src', 'main.ts');
+
+    moduleWorker.insertImport(filePath, 'devextreme/ui/themes', 'themes', true);
+
+    const fileContent = fs.readFileSync(filePath).toString();
+    const firstChaptStr = 'platformBrowserDynamic().bootstrapModule(AppModule)';
+    const lastChaptStr = '.catch(err => console.error(err));';
+
+    fs.writeFileSync(
+        filePath,
+        fileContent
+            .replace(firstChaptStr, `themes.initialized(() => {\n  ${firstChaptStr}`)
+            .replace(lastChaptStr, `  ${lastChaptStr}\n});`)
+    );
+};
+
 module.exports = {
     install,
     create,

package/src/applications/application.react.js

@@ -1,7 +1,7 @@
 const runCommand = require('../utility/run-command');
 const path = require('path');
 const fs = require('fs');
-const getLayoutInfo = require('../layout').getLayoutInfo;
+const getLayoutInfo = require('../utility/prompts/layout').getLayoutInfo;
 const templateCreator = require('../utility/template-creator');
 const packageManager = require('../utility/package-manager');
 const packageJsonUtils = require('../utility/package-json-utils');
@@ -19,9 +19,9 @@ const defaultStyles = [
 
 const preparePackageJsonForTemplate = (appPath, appName) => {
     const dependencies = [
-        { name: 'node-sass', version: '^4.11.0' },
+        { name: 'sass', version: '^1.34.1' },
         { name: 'devextreme-cli', version: latestVersions['devextreme-cli'], dev: true },
-        { name: 'react-router-dom', version: '^5.0.0' }
+        { name: 'react-router-dom', version: '^5.0.0' },
     ];
     const scripts = [
         { name: 'build-themes', value: 'devextreme build' },
@@ -42,7 +42,7 @@ const updateJsonPropName = (path, name) => {
 };
 
 const create = (appName, options) => {
-    const commandArguments = ['create-react-app', appName];
+    const commandArguments = ['-p=create-react-app', 'create-react-app', appName];
 
     getLayoutInfo(options.layout).then((layoutInfo) => {
         runCommand('npx', commandArguments).then(() => {

package/src/applications/application.vue.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const fs = require('fs');
-const getLayoutInfo = require('../layout').getLayoutInfo;
+const getLayoutInfo = require('../utility/prompts/layout').getLayoutInfo;
+const getVersionInfo = require('../utility/prompts/vue-version').getVersionInfo;
 const templateCreator = require('../utility/template-creator');
 const packageManager = require('../utility/package-manager');
 const packageJsonUtils = require('../utility/package-json-utils');
@@ -13,14 +14,35 @@ const defaultStyles = [
     'devextreme/dist/css/dx.light.css',
     'devextreme/dist/css/dx.common.css'
 ];
+const defaultVueVersion = 'v2';
+
+const getVueVersion = () => {
+    const devextremeConfig = require('../utility/devextreme-config').read();
+
+    return devextremeConfig.vue
+        ? `v${devextremeConfig.vue.version}`
+        : defaultVueVersion;
+};
+
+const preparePackageJsonForTemplate = (appPath, appName, version) => {
+    if(!version) {
+        version = getVueVersion();
+    }
 
-const preparePackageJsonForTemplate = (appPath, appName) => {
     const dependencies = [
-        { name: 'node-sass', version: '^4.11.0' },
+        { name: 'sass', version: '^1.34.1' },
         { name: 'vue-router', version: '^3.0.1' },
         { name: 'devextreme-cli', version: latestVersions['devextreme-cli'], dev: true },
-        { name: 'sass-loader', version: '^7.1.0', dev: true }
+        { name: 'sass-loader', version: '^10', dev: true }
     ];
+
+    if(version === 'v3') {
+        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' }
@@ -31,23 +53,33 @@ const preparePackageJsonForTemplate = (appPath, appName) => {
     packageJsonUtils.updateName(appPath, appName);
 };
 
-async function createVueApp(name) {
-    return runCommand('npx', ['-p', '@vue/cli', 'vue', 'create', name, '--default']);
+async function createVueApp(name, version) {
+    const argList = ['-p', '@vue/cli', 'vue', 'create', name];
+
+    if(version === defaultVueVersion) {
+        argList.push('--default');
+    } else {
+        argList.push('-p');
+        argList.push('__default_vue_3__');
+    }
+
+    return runCommand('npx', argList);
 }
 
-const create = (appName, options) => {
-    getLayoutInfo(options.layout).then((layoutInfo) => {
-        createVueApp(appName).then(() => {
-            const appPath = path.join(process.cwd(), appName);
-            const humanizedName = stringUtils.humanize(appName);
-            const templateOptions = Object.assign({}, options, {
-                project: humanizedName,
-                layout: layoutInfo.layout
-            });
-            modifyIndexHtml(appPath, humanizedName);
-            addTemplate(appPath, appName, templateOptions);
-        });
+const create = async(appName, options) => {
+    const versionInfo = await getVersionInfo(options.version);
+    const layoutInfo = await getLayoutInfo(options.layout);
+
+    await createVueApp(appName, versionInfo.version);
+
+    const appPath = path.join(process.cwd(), appName);
+    const humanizedName = stringUtils.humanize(appName);
+    const templateOptions = Object.assign({}, options, {
+        project: humanizedName,
+        layout: layoutInfo.layout
     });
+    modifyIndexHtml(appPath, humanizedName);
+    addTemplate(appPath, appName, templateOptions, versionInfo.version);
 };
 
 const modifyIndexHtml = (appPath, appName) => {
@@ -59,8 +91,18 @@ const modifyIndexHtml = (appPath, appName) => {
     fs.writeFileSync(indexHtmlPath, htmlContent);
 };
 
-const addTemplate = (appPath, appName, templateOptions) => {
-    const templateSourcePath = path.join(__dirname, '..', 'templates', 'vue', 'application');
+const getMainModulePath = (appPath) => {
+    const jsModule = path.join(appPath, 'src', 'main.js');
+
+    return fs.existsSync(jsModule) ? jsModule : path.join(appPath, 'src', 'main.ts');
+};
+
+const addTemplate = (appPath, appName, templateOptions, version) => {
+    if(!version) {
+        version = getVueVersion();
+    }
+
+    const templateSourcePath = path.join(__dirname, '..', 'templates', `vue-${version}`, 'application');
     const styles = [
         './themes/generated/theme.additional.css',
         './themes/generated/theme.base.css',
@@ -69,29 +111,34 @@ const addTemplate = (appPath, appName, templateOptions) => {
 
     templateCreator.moveTemplateFilesToProject(templateSourcePath, appPath, templateOptions);
     if(!templateOptions.empty) {
-        addSamplePages(appPath);
+        addSamplePages(appPath, version);
     }
-    preparePackageJsonForTemplate(appPath, appName);
+    preparePackageJsonForTemplate(appPath, appName, version);
     install({}, appPath, styles);
 };
 
 const install = (options, appPath, styles) => {
     appPath = appPath ? appPath : process.cwd();
-    const mainModulePath = path.join(appPath, 'src', 'main.js');
-    addStylesToApp(mainModulePath, styles || defaultStyles);
+    addStylesToApp(appPath, styles || defaultStyles);
     packageJsonUtils.addDevextreme(appPath, options.dxversion, 'vue');
 
     packageManager.runInstall({ cwd: appPath });
 };
 
-const addStylesToApp = (filePath, styles) => {
+const addStylesToApp = (appPath, styles) => {
+    const mainModulePath = getMainModulePath(appPath);
+
     styles.forEach(style => {
-        moduleUtils.insertImport(filePath, style);
+        moduleUtils.insertImport(mainModulePath, style);
     });
 };
 
-const addSamplePages = (appPath) => {
-    const templateSourcePath = path.join(__dirname, '..', 'templates', 'vue', 'sample-pages');
+const addSamplePages = (appPath, version) => {
+    if(!version) {
+        version = getVueVersion();
+    }
+
+    const templateSourcePath = path.join(__dirname, '..', 'templates', `vue-${version}`, 'sample-pages');
     const pagesPath = createPathToPage(appPath);
     templateCreator.moveTemplateFilesToProject(templateSourcePath, pagesPath, {});
 };
@@ -100,15 +147,35 @@ const getComponentPageName = (viewName) => {
     return `${stringUtils.classify(viewName)}`;
 };
 
-const getVueRoute = (viewName, componentName, pagePath) => {
-    const components = `\n      {\n        layout: defaultLayout,\n        content: ${componentName}\n      }\n    `;
-    return `\n    {\n      path: "/${pagePath}",\n      name: "${stringUtils.dasherize(viewName)}",\n      meta: { requiresAuth: true },\n      components: ${components}}`;
+const getVueRoute = (viewName, componentName, pagePath, version) => {
+    if(!version) {
+        version = getVueVersion();
+    }
+
+    const path = `path: "/${pagePath}"`;
+    const name = `name: "${stringUtils.dasherize(viewName)}"`;
+
+    const metaPart = version === defaultVueVersion
+        ? 'meta: { requiresAuth: true }'
+        : 'meta: {\n        requiresAuth: true,\n        layout: defaultLayout\n      }';
+
+    const componentPart = version === defaultVueVersion
+        ? `components:\n      {\n        layout: defaultLayout,\n        content: ${componentName}\n      }`
+        : `component: ${componentName}`;
+
+    const commonPart = `\n    {\n      ${path},\n      ${name},\n      ${metaPart},\n      ${componentPart}\n    }`;
+
+    return commonPart;
 };
 
-const getNavigationData = (viewName, componentName, icon) => {
+const getNavigationData = (viewName, componentName, icon, version) => {
+    if(!version) {
+        version = getVueVersion();
+    }
+
     const pagePath = stringUtils.dasherize(viewName);
     return {
-        route: getVueRoute(viewName, componentName, pagePath),
+        route: getVueRoute(viewName, componentName, pagePath, version),
         navigation: `\n  {\n    text: \'${stringUtils.humanize(viewName)}\',\n    path: \'/${pagePath}\',\n    icon: \'${icon}\'\n  }`
     };
 };
@@ -124,12 +191,13 @@ const createPathToPage = (appPath) => {
 };
 
 const addView = (pageName, options) => {
+    const version = getVueVersion();
     const componentName = getComponentPageName(pageName);
     const pathToPage = createPathToPage(process.cwd());
-    const pageTemplatePath = path.join(__dirname, '..', 'templates', 'vue', 'page');
+    const pageTemplatePath = path.join(__dirname, '..', 'templates', `vue-${version}`, 'page');
     const routingModulePath = path.join(process.cwd(), 'src', 'router.js');
     const navigationModulePath = path.join(process.cwd(), 'src', 'app-navigation.js');
-    const navigationData = getNavigationData(pageName, componentName, options && options.icon || 'folder');
+    const navigationData = getNavigationData(pageName, componentName, options && options.icon || 'folder', version);
 
     templateCreator.addPageToApp(pageName, pathToPage, pageTemplatePath);
     moduleUtils.insertImport(routingModulePath, `./views/${pageName}`, componentName, true);

package/src/commands.json

@@ -5,38 +5,41 @@
         "usage": "devextreme new <application-type> <name> [options]",
         "arguments": [{
             "name": "name",
-            "description": "The application name"
+            "description": "Application name"
         }, {
             "name": "angular-app",
-            "description": "The application type",
+            "description": "Application type",
             "options": [{
                 "name": "--layout",
-                "description": "Specifies the type of a DevExtreme layout to add. Available values: side-nav-outer-toolbar(default)|side-nav-inner-toolbar"
+                "description": "Specifies DevExtreme layout type to add. Available values: side-nav-outer-toolbar(default)|side-nav-inner-toolbar"
             }, {
                 "name": "--empty",
-                "description": "Specifies whether to skip sample views generation (default: false)"
+                "description": "Skips sample view generation (default: false)"
+            }, {
+                "name": "--version",
+                "description": "Specifies whether to generate a Vue 2 or Vue 3 application. Available values: 2 (default) and 3"
             }]
         }]
     }, {
         "name": "add",
-        "description": "Add the DevExtreme layout template or view to an Angular application or DevExtreme to an Angular application",
+        "description": "Add DevExtreme layout template or view to an Angular application or DevExtreme to an Angular application",
         "usage": "devextreme add <parameter> [options]",
         "arguments": [{
             "name": "angular-template",
             "description": "Add the DevExtreme layout template to an Angular application",
             "options": [{
                 "name": "--layout",
-                "description": "Specifies the type of a DevExtreme layout to add. Available values: side-nav-outer-toolbar(default)|side-nav-inner-toolbar"
+                "description": "Specifies DevExtreme layout type to add. Available values: side-nav-outer-toolbar(default)|side-nav-inner-toolbar"
             }, {
                 "name": "--empty",
-                "description": "Specifies whether to skip sample views generation (default: false)"
+                "description": "Skips sample view generation (default: false)"
             }, {
                 "name": "--resolve-conflicts",
-                "description": "Specifies whether to override the existing app component or create a component with another name. Available values: createNew(default)|override"
+                "description": "Override an existing app component or create a component with a different name. Available values: createNew(default)|override"
             }]
         }, {
             "name": "view",
-            "description": "Add a view to an Angular application with the DevExtreme layout template",
+            "description": "Add a view to an Angular application using the DevExtreme layout template",
             "options": [{
                 "name": "--icon",
                 "description": "Specifies the view's icon name (default: folder)"
@@ -51,25 +54,31 @@
         "usage": "devextreme build-theme [options]",
         "options": [{
             "name": "--base-theme",
-            "description": "Specifies a base theme’s name (the default value is generic.light)"
+            "description": "Specifies base theme name (default value is generic.light)"
         }, {
             "name": "--input-file",
-            "description": "Specifies the name of the file that contains input data (a .json file with metadata or a .less/.scss file with Bootstrap variables)"
+            "description": "Specifies file name with input data (a .json file with metadata or a .less/.scss file with Bootstrap variables)"
         }, {
             "name": "--make-swatch",
             "description": "If present, adds a CSS scope to each CSS rule (.dx-swatch-xxx), where xxx is the value from the --output-color-scheme parameter"
         }, {
             "name": "--output-file",
-            "description": "Specifies the output file name"
+            "description": "Specifies output file name"
         }, {
             "name": "--output-color-scheme",
-            "description": "Specifies the custom color scheme name (the default value is custom-scheme)"
+            "description": "Specifies custom color scheme name (default value is custom-scheme)"
         }, {
             "name": "--version",
-            "description": "Specifies the target DevExtreme version or a tag that points to it (the default value is 'latest')"
+            "description": "Specifies target DevExtreme build or a tag that points to it (default value is 'latest')"
         }, {
             "name": "--widgets",
-            "description": "Specifies a comma-separated list of widgets whose styles should be included in the resulting CSS file (available from DevExtreme 19.2.3). If this argument is not specified, styles of all widgets are included."
+            "description": "Specifies a comma-separated list of widgets whose styles should be included in the resulting CSS file. If this argument is not specified, styles used for all widgets are included. Available from DevExtreme v19.2.3."
+        }, {
+            "name": "--remove-external-resources",
+            "description": "When present, removes links to external resources, such as fonts. The theme will use local fallbacks instead. Available from DevExtreme v20.2.7."
+        }, {
+            "name": "--bootstrap-version",
+            "description": "Specifies Bootstrap version 4 or 5 if '--input-file' is a '.scss' file. Available from DevExtreme v21.1.5. Default value: 4."
         }]
     }, {
         "name": "export-theme-vars",
@@ -77,22 +86,22 @@
         "usage": "devextreme export-theme-vars [options]",
         "options": [{
             "name": "--base-theme",
-            "description": "Specifies a base theme’s name (the default value is generic.light)"
+            "description": "Specifies base theme name (default value is generic.light)"
         }, {
             "name": "--input-file",
-            "description": "Specifies the name of the file that contains input data (a .json file with metadata or a .less/.scss file with Bootstrap variables)"
+            "description": "Specifies file name with input data (a .json file with metadata or a .less/.scss file with Bootstrap variables)"
         }, {
             "name": "--output-format",
-            "description": "Specifies the format of the output variables (less or scss) (the default value is less or the extension extracted from the --output-file value (if it contains any))"
+            "description": "Specifies the format of output variables (less or scss) (default value is less or the extension extracted from the --output-file value (if it contains any))"
         }, {
             "name": "--output-file",
             "description": "Specifies the output file name"
         }, {
             "name": "--base",
-            "description": "Exports only base variables which are used to produce the derived variables"
+            "description": "Exports only base variables used to produce derived variables"
         }, {
             "name": "--version",
-            "description": "Specifies the target DevExtreme version or a tag that points to it (the default value is 'latest')"
+            "description": "Specifies target DevExtreme build or a tag that points to it (default value is 'latest')"
         }]
     }, {
         "name": "export-theme-meta",
@@ -100,19 +109,19 @@
         "usage": "devextreme export-theme-meta [options]",
         "options": [{
             "name": "--base-theme",
-            "description": "Specifies a base theme’s name (the default value is generic.light)"
+            "description": "Specifies base theme name (default value is generic.light)"
         }, {
             "name": "--input-file",
-            "description": "Specifies the name of the file that contains input data (a .json file with metadata or a .less/.scss file with Bootstrap variables)"
+            "description": "Specifies file name with input data (a .json file with metadata or a .less/.scss file with Bootstrap variables)"
         }, {
             "name": "--output-file",
-            "description": "Specifies the output file name"
+            "description": "Specifies output file name"
         }, {
             "name": "--base",
-            "description": "Exports only base variables which are used to produce the derived variables"
+            "description": "Only exports base variables used to produce derived variables"
         }, {
             "name": "--version",
-            "description": "Specifies the target DevExtreme version or a tag that points to it (the default value is 'latest')"
+            "description": "Specifies target DevExtreme build or the tag that points to it (default value is 'latest')"
         }]
     }]
 }

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

@@ -6,7 +6,7 @@ import { NavigationProvider } from './contexts/navigation';
 import { AuthProvider, useAuth } from './contexts/auth';
 import { useScreenSizeClass } from './utils/media-query';
 import Content from './Content';
-import NotAuthenticatedContent from './NotAuthenticatedContent';
+import UnauthenticatedContent from './UnauthenticatedContent';
 
 function App() {
   const { user, loading } = useAuth();
@@ -19,10 +19,10 @@ function App() {
     return <Content />;
   }
 
-  return <NotAuthenticatedContent />;
+  return <UnauthenticatedContent />;
 }
 
-export default function () {
+export default function Root() {
   const screenSizeClass = useScreenSizeClass();
 
   return (

package/src/templates/react/application/src/Content.js

@@ -5,7 +5,7 @@ import routes from './app-routes';
 import { <%=layout%> as SideNavBarLayout } from './layouts';
 import { Footer } from './components';
 
-export default function() {
+export default function Content() {
   return (
     <SideNavBarLayout title={appInfo.title}>
       <Switch>

package/src/templates/react/application/src/{NotAuthenticatedContent.js → UnauthenticatedContent.js}

@@ -3,7 +3,7 @@ import { Switch, Route, Redirect } from 'react-router-dom';
 import { SingleCard } from './layouts';
 import { LoginForm, ResetPasswordForm, ChangePasswordForm, CreateAccountForm } from './components';
 
-export default function () {
+export default function UnauthenticatedContent() {
   return (
     <Switch>
       <Route exact path='/login' >