devextreme-cli 1.6.4 → 1.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-cli",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "description": "DevExtreme CLI",
   "keywords": [
     "devexpress",
@@ -65,7 +65,7 @@
     "eslint-plugin-vue": "^7.20.0",
     "eslint-stylish": "^0.2.0",
     "jest": "^29.7.0",
-    "jest-image-snapshot": "^6.3.0",
+    "jest-image-snapshot": "^6.4.0",
     "prettier": "^2.8.8",
     "rimraf": "^2.7.1",
     "tree-kill": "^1.2.2",
@@ -73,5 +73,5 @@
     "typescript": "^4.0.2",
     "typescript-eslint-parser": "^22.0.0"
   },
-  "gitHead": "d66609dcd9396442ea85c700c4f58c53b83d388a"
+  "gitHead": "ba5f2db7dea0fb8fbf7d77050e305356309f790f"
 }

package/src/applications/application.vue.js

@@ -1,7 +1,6 @@
 const path = require('path');
 const fs = require('fs');
 const getLayoutInfo = require('../utility/prompts/layout');
-const getVersionInfo = require('../utility/prompts/vue-version');
 const templateCreator = require('../utility/template-creator');
 const packageManager = require('../utility/package-manager');
 const packageJsonUtils = require('../utility/package-json-utils');
@@ -14,21 +13,8 @@ const { toolingVersionOptionName, extractToolingVersion } = require('../utility/
 const defaultStyles = [
     'devextreme/dist/css/dx.light.css'
 ];
-const defaultVueVersion = 'v3';
-
-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: 'sass', version: '^1.34.1' },
         { name: 'vue-router', version: '^3.0.1' },
@@ -36,12 +22,10 @@ const preparePackageJsonForTemplate = (appPath, appName, version) => {
         { name: 'sass-loader', version: '^10', dev: true }
     ];
 
-    if(version === 'v3') {
-        const nameDepends = dependencies.map(d => d.name);
-        const indexVueRouter = nameDepends.indexOf('vue-router');
+    const nameDepends = dependencies.map(d => d.name);
+    const indexVueRouter = nameDepends.indexOf('vue-router');
 
-        dependencies[indexVueRouter].version = '^4.0.1';
-    }
+    dependencies[indexVueRouter].version = '^4.0.1';
 
     const scripts = [
         { name: 'build-themes', value: 'devextreme build' },
@@ -54,27 +38,18 @@ const preparePackageJsonForTemplate = (appPath, appName, version) => {
 };
 
 async function createVueApp(name, templateOptions) {
-    const { version } = templateOptions;
     const toolingVersion = extractToolingVersion(templateOptions);
-    const argList = ['-p', `@vue/cli${toolingVersion}`, 'vue', 'create', name, '--registry', 'https://registry.npmjs.org/'];
-
-    if(version === 'v2') {
-        argList.push('-p "Default (Vue 2)"');
-    } else {
-        argList.push('-p "Default (Vue 3)"');
-    }
+    const argList = ['-p', `@vue/cli${toolingVersion}`, 'vue', 'create', name, '--registry', 'https://registry.npmjs.org/', '-p "Default (Vue 3)"'];
 
     return runCommand('npx', argList);
 }
 
 const create = async(appName, options) => {
-    const version = await getVersionInfo(options.version);
     const layout = await getLayoutInfo(options.layout);
 
     const templateOptions = {
         project: stringUtils.humanize(appName),
         layout: layout,
-        version: version,
         [toolingVersionOptionName]: options[toolingVersionOptionName]
     };
 
@@ -99,13 +74,7 @@ const getCorrectPath = (extension, pathToApp) => {
 };
 
 const addTemplate = (appPath, appName, templateOptions) => {
-    let { version } = templateOptions;
-
-    if(!version) {
-        version = getVueVersion();
-    }
-
-    const applicationTemplatePath = path.join(templateCreator.getTempaltePath(`vue-${version}`), 'application');
+    const applicationTemplatePath = path.join(templateCreator.getTempaltePath('vue-v3'), 'application');
     const styles = [
         './themes/generated/theme.additional.css',
         './themes/generated/theme.base.css',
@@ -116,7 +85,7 @@ const addTemplate = (appPath, appName, templateOptions) => {
     if(!templateOptions.empty) {
         addSamplePages(appPath, templateOptions);
     }
-    preparePackageJsonForTemplate(appPath, appName, version);
+    preparePackageJsonForTemplate(appPath, appName);
     install({}, appPath, styles);
 };
 
@@ -136,14 +105,8 @@ const addStylesToApp = (appPath, styles) => {
     });
 };
 
-const addSamplePages = (appPath, templateOptions) => {
-    let { version } = templateOptions;
-
-    if(!version) {
-        version = getVueVersion();
-    }
-
-    const samplePageTemplatePath = path.join(templateCreator.getTempaltePath(`vue-${version}`), 'sample-pages');
+const addSamplePages = (appPath) => {
+    const samplePageTemplatePath = path.join(templateCreator.getTempaltePath('vue-v3'), 'sample-pages');
     const pagesPath = createPathToPage(appPath);
     templateCreator.moveTemplateFilesToProject(samplePageTemplatePath, pagesPath, {}, getCorrectPath);
 };
@@ -152,35 +115,23 @@ const getComponentPageName = (viewName) => {
     return `${stringUtils.classify(viewName)}`;
 };
 
-const getVueRoute = (viewName, componentName, pagePath, version) => {
-    if(!version) {
-        version = getVueVersion();
-    }
-
+const getVueRoute = (viewName, componentName, pagePath) => {
     const path = `path: "/${pagePath}"`;
     const name = `name: "${stringUtils.dasherize(viewName)}"`;
 
-    const metaPart = version === 'v2'
-        ? 'meta: { requiresAuth: true }'
-        : 'meta: {\n        requiresAuth: true,\n        layout: defaultLayout\n      }';
+    const metaPart = 'meta: {\n        requiresAuth: true,\n        layout: defaultLayout\n      }';
 
-    const componentPart = version === 'v2'
-        ? `components:\n      {\n        layout: defaultLayout,\n        content: ${componentName}\n      }`
-        : `component: ${componentName}`;
+    const componentPart = `component: ${componentName}`;
 
     const commonPart = `\n    {\n      ${path},\n      ${name},\n      ${metaPart},\n      ${componentPart}\n    }`;
 
     return commonPart;
 };
 
-const getNavigationData = (viewName, componentName, icon, version) => {
-    if(!version) {
-        version = getVueVersion();
-    }
-
+const getNavigationData = (viewName, componentName, icon) => {
     const pagePath = stringUtils.dasherize(viewName);
     return {
-        route: getVueRoute(viewName, componentName, pagePath, version),
+        route: getVueRoute(viewName, componentName, pagePath),
         navigation: `\n  {\n    text: \'${stringUtils.humanize(viewName)}\',\n    path: \'/${pagePath}\',\n    icon: \'${icon}\'\n  }`
     };
 };
@@ -196,15 +147,13 @@ const createPathToPage = (appPath) => {
 };
 
 const addView = (pageName, options) => {
-    const version = getVueVersion();
-
-    const pageTemplatePath = path.join(templateCreator.getTempaltePath(`vue-${version}`), 'page');
+    const pageTemplatePath = path.join(templateCreator.getTempaltePath('vue-v3'), 'page');
 
     const componentName = getComponentPageName(pageName);
     const pathToPage = createPathToPage(process.cwd());
     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', version);
+    const navigationData = getNavigationData(pageName, componentName, options && options.icon || 'folder');
     const getCorrectExtension = (fileExtension) => fileExtension;
     templateCreator.addPageToApp(pageName, pathToPage, pageTemplatePath, getCorrectExtension);
     moduleUtils.insertImport(routingModulePath, `./views/${pageName}`, componentName, true);

package/src/commands.json

@@ -15,9 +15,6 @@
             }, {
                 "name": "--empty",
                 "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": "--template",
                 "description": "Create template with typescsript support. Specifies for React & Vue application"

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

@@ -1,86 +1,86 @@
-import React, { useState, useRef, useCallback } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import Form, {
-  Item,
-  Label,
-  ButtonItem,
-  ButtonOptions,
-  RequiredRule,
-  CustomRule,
-} from 'devextreme-react/form';
-import LoadIndicator from 'devextreme-react/load-indicator';
-import notify from 'devextreme/ui/notify';
-<%=#isTypeScript%>import { ValidationCallbackData } from 'devextreme-react/common';<%=/isTypeScript%>
-import { changePassword } from '../../api/auth';
-
-export default function ChangePasswordForm() {
-  const navigate = useNavigate();
-  const [loading, setLoading] = useState(false);
-  const formData = useRef({ password: '' });
-  const { recoveryCode } = useParams();
-
-  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
-    e.preventDefault();
-    const { password } = formData.current;
-    setLoading(true);
-
-    const result = await changePassword(password, recoveryCode);
-    setLoading(false);
-
-    if (result.isOk) {
-      navigate('/login');
-    } else {
-      notify(result.message, 'error', 2000);
-    }
-  }, [navigate, recoveryCode]);
-
-  const confirmPassword = useCallback(
-    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
-    []
-  );
-
-  return (
-    <form onSubmit={onSubmit}>
-      <Form formData={formData.current} disabled={loading}>
-        <Item
-          dataField={'password'}
-          editorType={'dxTextBox'}
-          editorOptions={passwordEditorOptions}
-        >
-          <RequiredRule message="Password is required" />
-          <Label visible={false} />
-        </Item>
-        <Item
-          dataField={'confirmedPassword'}
-          editorType={'dxTextBox'}
-          editorOptions={confirmedPasswordEditorOptions}
-        >
-          <RequiredRule message="Password is required" />
-          <CustomRule
-            message={'Passwords do not match'}
-            validationCallback={confirmPassword}
-          />
-          <Label visible={false} />
-        </Item>
-        <ButtonItem>
-          <ButtonOptions
-            width={'100%'}
-            type={'default'}
-            useSubmitBehavior={true}
-          >
-            <span className="dx-button-text">
-              {
-                loading
-                  ? <LoadIndicator width={'24px'} height={'24px'} visible={true} />
-                  : 'Continue'
-              }
-            </span>
-          </ButtonOptions>
-        </ButtonItem>
-      </Form>
-    </form>
-  );
-}
-
-const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
-const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' };
+import React, { useState, useRef, useCallback } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import Form, {
+  Item,
+  Label,
+  ButtonItem,
+  ButtonOptions,
+  RequiredRule,
+  CustomRule,
+} from 'devextreme-react/form';
+import LoadIndicator from 'devextreme-react/load-indicator';
+import notify from 'devextreme/ui/notify';
+<%=#isTypeScript%>import { ValidationCallbackData } from 'devextreme-react/common';<%=/isTypeScript%>
+import { changePassword } from '../../api/auth';
+
+export default function ChangePasswordForm() {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const formData = useRef({ password: '' });
+  const { recoveryCode } = useParams();
+
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
+    e.preventDefault();
+    const { password } = formData.current;
+    setLoading(true);
+
+    const result = await changePassword(password, recoveryCode);
+    setLoading(false);
+
+    if (result.isOk) {
+      navigate('/login');
+    } else {
+      notify(result.message, 'error', 2000);
+    }
+  }, [navigate, recoveryCode]);
+
+  const confirmPassword = useCallback(
+    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
+    []
+  );
+
+  return (
+    <form onSubmit={onSubmit}>
+      <Form formData={formData.current} disabled={loading}>
+        <Item
+          dataField={'password'}
+          editorType={'dxTextBox'}
+          editorOptions={passwordEditorOptions}
+        >
+          <RequiredRule message="Password is required" />
+          <Label visible={false} />
+        </Item>
+        <Item
+          dataField={'confirmedPassword'}
+          editorType={'dxTextBox'}
+          editorOptions={confirmedPasswordEditorOptions}
+        >
+          <RequiredRule message="Password is required" />
+          <CustomRule
+            message={'Passwords do not match'}
+            validationCallback={confirmPassword}
+          />
+          <Label visible={false} />
+        </Item>
+        <ButtonItem>
+          <ButtonOptions
+            width={'100%'}
+            type={'default'}
+            useSubmitBehavior={true}
+          >
+            <span className="dx-button-text">
+              {
+                loading
+                  ? <LoadIndicator width={'24px'} height={'24px'} visible={true} />
+                  : 'Continue'
+              }
+            </span>
+          </ButtonOptions>
+        </ButtonItem>
+      </Form>
+    </form>
+  );
+}
+
+const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
+const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' };

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

@@ -1,107 +1,107 @@
-import React, { useState, useRef, useCallback } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import Form, {
-  Item,
-  Label,
-  ButtonItem,
-  ButtonOptions,
-  RequiredRule,
-  CustomRule,
-  EmailRule
-} from 'devextreme-react/form';
-import notify from 'devextreme/ui/notify';
-import LoadIndicator from 'devextreme-react/load-indicator';
-import { createAccount } from '../../api/auth';
-<%=#isTypeScript%>import { ValidationCallbackData } from 'devextreme-react/common';<%=/isTypeScript%>
-import './CreateAccountForm.scss';
-
-export default function CreateAccountForm() {
-  const navigate = useNavigate();
-  const [loading, setLoading] = useState(false);
-  const formData = useRef({ email: '', password: '' });
-
-  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
-    e.preventDefault();
-    const { email, password } = formData.current;
-    setLoading(true);
-
-    const result = await createAccount(email, password);
-    setLoading(false);
-
-    if (result.isOk) {
-      navigate('/login');
-    } else {
-      notify(result.message, 'error', 2000);
-    }
-  }, [navigate]);
-
-  const confirmPassword = useCallback(
-    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
-    []
-  );
-
-  return (
-    <form className={'create-account-form'} onSubmit={onSubmit}>
-      <Form formData={formData.current} disabled={loading}>
-        <Item
-          dataField={'email'}
-          editorType={'dxTextBox'}
-          editorOptions={emailEditorOptions}
-        >
-          <RequiredRule message="Email is required" />
-          <EmailRule message="Email is invalid" />
-          <Label visible={false} />
-        </Item>
-        <Item
-          dataField={'password'}
-          editorType={'dxTextBox'}
-          editorOptions={passwordEditorOptions}
-        >
-          <RequiredRule message="Password is required" />
-          <Label visible={false} />
-        </Item>
-        <Item
-          dataField={'confirmedPassword'}
-          editorType={'dxTextBox'}
-          editorOptions={confirmedPasswordEditorOptions}
-        >
-          <RequiredRule message="Password is required" />
-          <CustomRule
-            message={'Passwords do not match'}
-            validationCallback={confirmPassword}
-          />
-          <Label visible={false} />
-        </Item>
-        <Item>
-          <div className='policy-info'>
-            By creating an account, you agree to the <Link to="#">Terms of Service</Link> and <Link to="#">Privacy Policy</Link>
-          </div>
-        </Item>
-        <ButtonItem>
-          <ButtonOptions
-            width={'100%'}
-            type={'default'}
-            useSubmitBehavior={true}
-          >
-            <span className="dx-button-text">
-              {
-                loading
-                  ? <LoadIndicator width={'24px'} height={'24px'} visible={true} />
-                  : 'Create a new account'
-              }
-            </span>
-          </ButtonOptions>
-        </ButtonItem>
-        <Item>
-          <div className={'login-link'}>
-            Have an account? <Link to={'/login'}>Sign In</Link>
-          </div>
-        </Item>
-      </Form>
-    </form>
-  );
-}
-
-const emailEditorOptions = { stylingMode: 'filled', placeholder: 'Email', mode: 'email' };
-const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
-const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' };
+import React, { useState, useRef, useCallback } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import Form, {
+  Item,
+  Label,
+  ButtonItem,
+  ButtonOptions,
+  RequiredRule,
+  CustomRule,
+  EmailRule
+} from 'devextreme-react/form';
+import notify from 'devextreme/ui/notify';
+import LoadIndicator from 'devextreme-react/load-indicator';
+import { createAccount } from '../../api/auth';
+<%=#isTypeScript%>import { ValidationCallbackData } from 'devextreme-react/common';<%=/isTypeScript%>
+import './CreateAccountForm.scss';
+
+export default function CreateAccountForm() {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const formData = useRef({ email: '', password: '' });
+
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
+    e.preventDefault();
+    const { email, password } = formData.current;
+    setLoading(true);
+
+    const result = await createAccount(email, password);
+    setLoading(false);
+
+    if (result.isOk) {
+      navigate('/login');
+    } else {
+      notify(result.message, 'error', 2000);
+    }
+  }, [navigate]);
+
+  const confirmPassword = useCallback(
+    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
+    []
+  );
+
+  return (
+    <form className={'create-account-form'} onSubmit={onSubmit}>
+      <Form formData={formData.current} disabled={loading}>
+        <Item
+          dataField={'email'}
+          editorType={'dxTextBox'}
+          editorOptions={emailEditorOptions}
+        >
+          <RequiredRule message="Email is required" />
+          <EmailRule message="Email is invalid" />
+          <Label visible={false} />
+        </Item>
+        <Item
+          dataField={'password'}
+          editorType={'dxTextBox'}
+          editorOptions={passwordEditorOptions}
+        >
+          <RequiredRule message="Password is required" />
+          <Label visible={false} />
+        </Item>
+        <Item
+          dataField={'confirmedPassword'}
+          editorType={'dxTextBox'}
+          editorOptions={confirmedPasswordEditorOptions}
+        >
+          <RequiredRule message="Password is required" />
+          <CustomRule
+            message={'Passwords do not match'}
+            validationCallback={confirmPassword}
+          />
+          <Label visible={false} />
+        </Item>
+        <Item>
+          <div className='policy-info'>
+            By creating an account, you agree to the <Link to="#">Terms of Service</Link> and <Link to="#">Privacy Policy</Link>
+          </div>
+        </Item>
+        <ButtonItem>
+          <ButtonOptions
+            width={'100%'}
+            type={'default'}
+            useSubmitBehavior={true}
+          >
+            <span className="dx-button-text">
+              {
+                loading
+                  ? <LoadIndicator width={'24px'} height={'24px'} visible={true} />
+                  : 'Create a new account'
+              }
+            </span>
+          </ButtonOptions>
+        </ButtonItem>
+        <Item>
+          <div className={'login-link'}>
+            Have an account? <Link to={'/login'}>Sign In</Link>
+          </div>
+        </Item>
+      </Form>
+    </form>
+  );
+}
+
+const emailEditorOptions = { stylingMode: 'filled', placeholder: 'Email', mode: 'email' };
+const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
+const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' };

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

@@ -21,7 +21,7 @@
       // ## Icon width customization
       .dx-treeview-item {
         padding-left: 0;
-        padding-right: 0;
+        flex-direction: row-reverse;
 
         .dx-icon {
           width: $side-panel-min-width !important;

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

@@ -1,5 +1,22 @@
 @import "./themes/generated/variables.base.scss";
 
+body {
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 .app {
   background-color: darken($base-bg, 5.00);
   display: flex;