devextreme-cli 1.3.1 → 1.4.0

package/src/templates/react/application/src/layouts/side-nav-inner-toolbar/{side-nav-inner-toolbar.js → side-nav-inner-toolbar.tsx}

@@ -3,29 +3,32 @@ import Drawer from 'devextreme-react/drawer';
 import ScrollView from 'devextreme-react/scroll-view';
 import Toolbar, { Item } from 'devextreme-react/toolbar';
 import React, { useState, useCallback, useRef } from 'react';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
 import { Header, SideNavigationMenu, Footer } from '../../components';
 import './side-nav-inner-toolbar.scss';
 import { useScreenSize } from '../../utils/media-query';
 import { Template } from 'devextreme-react/core/template';
 import { useMenuPatch } from '../../utils/patches';
+<%=#isTypeScript%>import { ItemClickEvent } from 'devextreme/ui/tree_view';<%=/isTypeScript%>
+<%=#isTypeScript%>import type { SideNavToolbarProps } from '../../types';<%=/isTypeScript%>
+<%=#isTypeScript%>import { ClickEvent } from 'devextreme/ui/button';<%=/isTypeScript%>
 
-export default function SideNavInnerToolbar({ title, children }) {
-  const scrollViewRef = useRef();
-  const history = useHistory();
+export default function SideNavInnerToolbar({ title, children }<%=#isTypeScript%>: React.PropsWithChildren<SideNavToolbarProps><%=/isTypeScript%>) {
+  const scrollViewRef = useRef<%=#isTypeScript%><ScrollView><%=/isTypeScript%>(null);
+  const navigate = useNavigate();
   const { isXSmall, isLarge } = useScreenSize();
   const [patchCssClass, onMenuReady] = useMenuPatch();
   const [menuStatus, setMenuStatus] = useState(
     isLarge ? MenuStatus.Opened : MenuStatus.Closed
   );
 
-  const toggleMenu = useCallback(({ event }) => {
+  const toggleMenu = useCallback(({ event }<%=#isTypeScript%>: ClickEvent<%=/isTypeScript%>) => {
     setMenuStatus(
       prevMenuStatus => prevMenuStatus === MenuStatus.Closed
         ? MenuStatus.Opened
         : MenuStatus.Closed
     );
-    event.stopPropagation();
+    event<%=#isTypeScript%>?<%=/isTypeScript%>.stopPropagation();
   }, []);
 
   const temporaryOpenMenu = useCallback(() => {
@@ -42,22 +45,23 @@ export default function SideNavInnerToolbar({ title, children }) {
         ? MenuStatus.Closed
         : prevMenuStatus
     );
+    return true;
   }, [isLarge]);
 
-  const onNavigationChanged = useCallback(({ itemData: { path }, event, node }) => {
-    if (menuStatus === MenuStatus.Closed || !path || node.selected) {
-      event.preventDefault();
+  const onNavigationChanged = useCallback(({ itemData, event, node }<%=#isTypeScript%>: ItemClickEvent<%=/isTypeScript%>) => {
+    if (menuStatus === MenuStatus.Closed || !itemData<%=#isTypeScript%>?<%=/isTypeScript%>.path || node<%=#isTypeScript%>?<%=/isTypeScript%>.selected) {
+      event<%=#isTypeScript%>?<%=/isTypeScript%>.preventDefault();
       return;
     }
 
-    history.push(path);
-    scrollViewRef.current.instance.scrollTo(0);
+    navigate(itemData.path);
+    scrollViewRef.current<%=#isTypeScript%>?<%=/isTypeScript%>.instance.scrollTo(0);
 
     if (!isLarge || menuStatus === MenuStatus.TemporaryOpened) {
       setMenuStatus(MenuStatus.Closed);
-      event.stopPropagation();
+      event<%=#isTypeScript%>?<%=/isTypeScript%>.stopPropagation();
     }
-  }, [history, menuStatus, isLarge]);
+  }, [navigate, menuStatus, isLarge]);
 
   return (
     <div className={'side-nav-inner-toolbar'}>
@@ -80,12 +84,12 @@ export default function SideNavInnerToolbar({ title, children }) {
           />
           <ScrollView ref={scrollViewRef} className={'layout-body with-footer'}>
             <div className={'content'}>
-              {React.Children.map(children, item => {
+              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
                 return item.type !== Footer && item;
               })}
             </div>
             <div className={'content-block'}>
-              {React.Children.map(children, item => {
+              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
                 return item.type === Footer && item;
               })}
             </div>
@@ -122,3 +126,4 @@ const MenuStatus = {
   Opened: 2,
   TemporaryOpened: 3
 };
+

package/src/templates/react/application/src/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.scss

@@ -8,12 +8,3 @@
 .layout-header {
   z-index: 1501;
 }
-
-.layout-body {
-  flex: 1;
-  min-height: 0;
-}
-
-.content {
-  flex-grow: 1;
-}

package/src/templates/react/application/src/layouts/side-nav-outer-toolbar/{side-nav-outer-toolbar.js → side-nav-outer-toolbar.tsx}

@@ -1,29 +1,32 @@
 import Drawer from 'devextreme-react/drawer';
 import ScrollView from 'devextreme-react/scroll-view';
 import React, { useState, useCallback, useRef } from 'react';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
 import { Header, SideNavigationMenu, Footer } from '../../components';
 import './side-nav-outer-toolbar.scss';
 import { useScreenSize } from '../../utils/media-query';
 import { Template } from 'devextreme-react/core/template';
 import { useMenuPatch } from '../../utils/patches';
+<%=#isTypeScript%>import { ClickEvent } from 'devextreme/ui/button';<%=/isTypeScript%>
+<%=#isTypeScript%>import { ItemClickEvent } from 'devextreme/ui/tree_view';<%=/isTypeScript%>
+<%=#isTypeScript%>import type { SideNavToolbarProps } from '../../types';<%=/isTypeScript%>
 
-export default function SideNavOuterToolbar({ title, children }) {
-  const scrollViewRef = useRef();
-  const history = useHistory();
+export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%>: React.PropsWithChildren<SideNavToolbarProps><%=/isTypeScript%>) {
+  const scrollViewRef = useRef<%=#isTypeScript%><ScrollView><%=/isTypeScript%>(null);
+  const navigate = useNavigate();
   const { isXSmall, isLarge } = useScreenSize();
   const [patchCssClass, onMenuReady] = useMenuPatch();
   const [menuStatus, setMenuStatus] = useState(
     isLarge ? MenuStatus.Opened : MenuStatus.Closed
   );
 
-  const toggleMenu = useCallback(({ event }) => {
+  const toggleMenu = useCallback(({ event }<%=#isTypeScript%>: ClickEvent<%=/isTypeScript%>) => {
     setMenuStatus(
       prevMenuStatus => prevMenuStatus === MenuStatus.Closed
         ? MenuStatus.Opened
         : MenuStatus.Closed
     );
-    event.stopPropagation();
+    event<%=#isTypeScript%>?<%=/isTypeScript%>.stopPropagation();
   }, []);
 
   const temporaryOpenMenu = useCallback(() => {
@@ -40,27 +43,27 @@ export default function SideNavOuterToolbar({ title, children }) {
         ? MenuStatus.Closed
         : prevMenuStatus
     );
+    return true;
   }, [isLarge]);
 
-  const onNavigationChanged = useCallback(({ itemData: { path }, event, node }) => {
-    if (menuStatus === MenuStatus.Closed || !path || node.selected) {
-      event.preventDefault();
+  const onNavigationChanged = useCallback(({ itemData, event, node }<%=#isTypeScript%>: ItemClickEvent<%=/isTypeScript%>) => {
+    if (menuStatus === MenuStatus.Closed || !itemData<%=#isTypeScript%>?<%=/isTypeScript%>.path || node<%=#isTypeScript%>?<%=/isTypeScript%>.selected) {
+      event<%=#isTypeScript%>?<%=/isTypeScript%>.preventDefault();
       return;
     }
 
-    history.push(path);
-    scrollViewRef.current.instance.scrollTo(0);
+    navigate(itemData.path);
+    scrollViewRef.current<%=#isTypeScript%>?<%=/isTypeScript%>.instance.scrollTo(0);
 
     if (!isLarge || menuStatus === MenuStatus.TemporaryOpened) {
       setMenuStatus(MenuStatus.Closed);
-      event.stopPropagation();
+      event<%=#isTypeScript%>?<%=/isTypeScript%>.stopPropagation();
     }
-  }, [history, menuStatus, isLarge]);
+  }, [navigate, menuStatus, isLarge]);
 
   return (
     <div className={'side-nav-outer-toolbar'}>
       <Header
-        className={'layout-header'}
         menuToggleEnabled
         toggleMenu={toggleMenu}
         title={title}
@@ -80,12 +83,12 @@ export default function SideNavOuterToolbar({ title, children }) {
         <div className={'container'}>
           <ScrollView ref={scrollViewRef} className={'layout-body with-footer'}>
             <div className={'content'}>
-              {React.Children.map(children, item => {
+              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
                 return item.type !== Footer && item;
               })}
             </div>
             <div className={'content-block'}>
-              {React.Children.map(children, item => {
+              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
                 return item.type === Footer && item;
               })}
             </div>

package/src/templates/react/application/src/layouts/single-card/{single-card.js → single-card.tsx}

@@ -1,8 +1,9 @@
 import React from 'react';
 import ScrollView from 'devextreme-react/scroll-view';
 import './single-card.scss';
+<%=#isTypeScript%>import type { SingleCardProps } from '../../types';<%=/isTypeScript%>
 
-export default function SingleCard({ title, description, children }) {
+export default function SingleCard({ title, description, children }<%=#isTypeScript%>: React.PropsWithChildren<SingleCardProps><%=/isTypeScript%>) {
   return (
     <ScrollView height={'100%'} width={'100%'} className={'with-footer single-card'}>
       <div className={'dx-card content'}>

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

@@ -0,0 +1,57 @@
+import dxTreeView, { ItemClickEvent } from 'devextreme/ui/tree_view';
+import { ClickEvent } from 'devextreme/ui/button';
+import { EventInfo } from 'devextreme/events';
+import React from 'react';
+
+export interface HeaderProps {
+    menuToggleEnabled: boolean;
+    title?: string;
+    toggleMenu: (e: ClickEvent) => void;
+}
+
+export interface SideNavigationMenuProps {
+    selectedItemChanged: (e: ItemClickEvent) => void;
+    openMenu: (e: React.PointerEvent) => void;
+    compactMode: boolean;
+    onMenuReady: (e: EventInfo<dxTreeView>) => void;
+}
+
+export interface UserPanelProps {
+    menuMode: 'context' | 'list';
+}
+
+export interface User {
+    email: string;
+    avatarUrl: string;
+}
+
+export type AuthContextType = {
+    user?: User;
+    signIn: (email: string, password: string) => Promise<{isOk: boolean, data?: User, message?: string}>;
+    signOut: () => void;
+    loading: boolean;
+}
+
+export interface SideNavToolbarProps {
+    title: string;
+}
+
+export interface SingleCardProps {
+    title?: string;
+    description?: string;
+}
+
+export type Handle = () => void;
+
+interface NavigationData {
+    currentPath: string;
+}
+
+export type NavigationContextType = {
+    setNavigationData?: ({ currentPath }: NavigationData) => void;
+    navigationData: NavigationData;
+}
+
+export type ValidationType = {
+    value: string;
+}

package/src/templates/react/application/src/utils/{media-query.js → media-query.tsx}

@@ -1,4 +1,5 @@
 import { useState, useCallback, useEffect } from 'react';
+<%=#isTypeScript%>import type { Handle } from '../types';<%=/isTypeScript%>
 
 export const useScreenSize = () => {
   const [screenSize, setScreenSize] = useState(getScreenSize());
@@ -35,7 +36,7 @@ export const useScreenSizeClass = () => {
   return 'screen-x-small';
 }
 
-let handlers = [];
+let handlers<%=#isTypeScript%>: Handle[]<%=/isTypeScript%> = [];
 const xSmallMedia = window.matchMedia('(max-width: 599.99px)');
 const smallMedia = window.matchMedia('(min-width: 600px) and (max-width: 959.99px)');
 const mediumMedia = window.matchMedia('(min-width: 960px) and (max-width: 1279.99px)');
@@ -47,9 +48,9 @@ const largeMedia = window.matchMedia('(min-width: 1280px)');
   });
 });
 
-const subscribe = handler => handlers.push(handler);
+const subscribe = (handler<%=#isTypeScript%>: Handle<%=/isTypeScript%>) => handlers.push(handler);
 
-const unsubscribe = handler => {
+const unsubscribe = (handler<%=#isTypeScript%>: Handle<%=/isTypeScript%>) => {
   handlers = handlers.filter(item => item !== handler);
 };
 

package/src/templates/react/application/src/utils/{patches.js → patches.tsx}

@@ -12,5 +12,5 @@ export function useMenuPatch() {
     setTimeout(() => setEnabled(false));
   }, [enabled]);
 
-  return [enabled ? 'pre-init-blink-fix' : '', onMenuReady];
+  return [enabled ? 'pre-init-blink-fix' : '', onMenuReady]<%=#isTypeScript%> as [string, () => void]<%=/isTypeScript%>;
 }

package/src/templates/react/sample-pages/tasks/{tasks.js → tasks.tsx}

@@ -15,7 +15,7 @@ export default function Task() {
 
       <DataGrid
         className={'dx-card wide-card'}
-        dataSource={dataSource}
+        dataSource={dataSource<%=#isTypeScript%> as any<%=/isTypeScript%>}
         showBorders={false}
         focusedRowEnabled={true}
         defaultFocusedRowIndex={0}

package/src/templates/vue-v2/application/devextreme.json

@@ -1,7 +1,8 @@
 {
   "applicationEngine": "vue",
   "vue": {
-      "version": 2
+      "version": 2,
+      "template": "javascript"
   },
   "build": {
       "commands": [

package/src/templates/vue-v2/application/src/dx-styles.scss

@@ -1,5 +1,6 @@
 .content {
   line-height: 1.5;
+  flex-grow: 1;
 
   h2 {
     font-size: 30px;
@@ -8,6 +9,17 @@
   }
 }
 
+.container {
+  height: 100%;
+  flex-direction: column;
+  display: flex;
+}
+
+.layout-body {
+  flex: 1;
+  min-height: 0;
+}
+
 .side-nav-outer-toolbar .dx-drawer {
   height: calc(100% - 56px)
 }

package/src/templates/vue-v2/application/src/layouts/side-nav-inner-toolbar.vue

@@ -137,21 +137,6 @@ export default {
   width: 100%;
 }
 
-.container {
-  height: 100%;
-  flex-direction: column;
-  display: flex;
-}
-
-.layout-body {
-  flex: 1;
-  min-height: 0;
-}
-
-.content {
-  flex-grow: 1;
-}
-
 #navigation-header {
   @import "../themes/generated/variables.additional.scss";
   background-color: $base-accent;

package/src/templates/vue-v2/application/src/layouts/side-nav-outer-toolbar.vue

@@ -119,13 +119,4 @@ export default {
 .layout-header {
   z-index: 1501;
 }
-
-.layout-body {
-  flex: 1;
-  min-height: 0;
-}
-
-.content {
-  flex-grow: 1;
-}
 </style>

package/src/templates/vue-v3/application/devextreme.json

@@ -1,7 +1,8 @@
 {
   "applicationEngine": "vue",
   "vue": {
-    "version": 3
+    "version": 3,
+    "template": "javascript"
   },
   "build": {
       "commands": [

package/src/templates/vue-v3/application/src/dx-styles.scss

@@ -1,5 +1,6 @@
 .content {
   line-height: 1.5;
+  flex-grow: 1;
 
   h2 {
     font-size: 30px;
@@ -8,6 +9,17 @@
   }
 }
 
+.container {
+  height: 100%;
+  flex-direction: column;
+  display: flex;
+}
+
+.layout-body {
+  flex: 1;
+  min-height: 0;
+}
+
 .side-nav-outer-toolbar .dx-drawer {
   height: calc(100% - 56px)
 }

package/src/templates/vue-v3/application/src/layouts/side-nav-inner-toolbar.vue

@@ -69,7 +69,7 @@ export default {
   },
   setup(props) {
     const route = useRoute();
-    
+
     const scrollViewRef = ref(null);
     const menuOpened = ref(props.isLarge);
     const menuTemporaryOpened = ref(false);
@@ -117,7 +117,7 @@ export default {
         }
       }
     );
-    
+
     watch(
       () => route.path,
       () => {
@@ -156,21 +156,6 @@ export default {
   width: 100%;
 }
 
-.container {
-  height: 100%;
-  flex-direction: column;
-  display: flex;
-}
-
-.layout-body {
-  flex: 1;
-  min-height: 0;
-}
-
-.content {
-  flex-grow: 1;
-}
-
 #navigation-header {
   @import "../themes/generated/variables.additional.scss";
   background-color: $base-accent;

package/src/templates/vue-v3/application/src/layouts/side-nav-outer-toolbar.vue

@@ -132,13 +132,4 @@ export default {
 .layout-header {
   z-index: 1501;
 }
-
-.layout-body {
-  flex: 1;
-  min-height: 0;
-}
-
-.content {
-  flex-grow: 1;
-}
 </style>

package/src/themebuider.js

@@ -14,7 +14,7 @@ const commands = {
 
 const themeBuilderPackagePath = path.join(process.cwd(), 'node_modules', 'devextreme-themebuilder');
 
-const scssCompiler = {
+const scssCompilerDart = {
     render: (scss) => {
         return new Promise((resolve, reject) => {
             require('dart-sass').render({
@@ -30,6 +30,16 @@ const scssCompiler = {
     }
 };
 
+const scssCompiler = {
+    render: (scss) => {
+        return new Promise((resolve, reject) => {
+            require('sass-embeded').compileStringAsync(scss)
+                .then((data) => resolve(data.css.toString()))
+                .catch((error) => reject(error.message));
+        });
+    }
+};
+
 const createPath = filePath => {
     const directoryName = path.dirname(filePath);
 
@@ -144,9 +154,16 @@ const getVarsFilter = (options) => {
 
 const runThemeBuilder = async rawOptions => {
     const options = await readInput(camelize(rawOptions));
+    const version = options.version || getInstalledPackageVersion('devextreme') || 'latest';
     const initialItems = options.items ? [...options.items] : [];
+
     options.reader = readFile;
-    options.sassCompiler = scssCompiler;
+    options.sassCompiler = scssCompilerDart;
+
+    if(version === 'latest' || semver.gte(version, '22.1.3')) {
+        options.sassCompiler = scssCompiler;
+    }
+
     options.lessCompiler = require('less/lib/less-node');
 
     options.lessCompiler.options = options.lessCompiler.options || {};
@@ -157,8 +174,6 @@ const runThemeBuilder = async rawOptions => {
         options.lessCompiler.options['rootpath'] = options.assetsBasePath;
     }
 
-    const version = options.version || getInstalledPackageVersion('devextreme') || 'latest';
-
     await lock.acquire();
 
     try {

package/src/utility/latest-versions.js

@@ -1,8 +1,8 @@
 const packageJson = require('../../package.json');
 module.exports = {
-    'devextreme': '^21.2.4',
-    'devextreme-react': '^21.2.4',
-    'devextreme-vue': '^21.2.4',
+    'devextreme': '^22.1.3',
+    'devextreme-react': '^22.1.3',
+    'devextreme-vue': '^22.1.3',
     'devextreme-cli': packageJson.version,
     'devextreme-schematics': 'latest'
 };

package/src/utility/ng-version.js

@@ -0,0 +1,35 @@
+const semver = require('semver').SemVer;
+const execSync = require('child_process').execSync;
+
+function parseNgCliVersion(stdout) {
+    return /angular.cli:\s*(\S+)/ig.exec(stdout)[1];
+}
+
+const getLocalNgVersion = () => {
+    try {
+        const version = parseNgCliVersion(execSync('ng v').toString());
+        return new semver(version);
+    } catch(e) {
+        return '';
+    }
+};
+
+const getPublicNgVersion = () => {
+    const version = execSync('npm view @angular/cli version').toString();
+    return new semver(version);
+};
+
+const getNgCliVersion = () => {
+    let ngCliVersion = getLocalNgVersion();
+    if(!ngCliVersion) {
+        ngCliVersion = getPublicNgVersion();
+    }
+
+    return ngCliVersion;
+};
+
+module.exports = {
+    getLocalNgVersion,
+    getPublicNgVersion,
+    getNgCliVersion
+};

package/src/utility/prompts/layout.js

@@ -1,29 +1,17 @@
-const runPrompts = require('./prompts');
-const layouts = [
+const prompts = require('./prompts');
+
+const choices = [
     { value: 'side-nav-outer-toolbar', title: 'Side navigation (outer toolbar)' },
     { value: 'side-nav-inner-toolbar', title: 'Side navigation (inner toolbar)' }
 ];
 
-const getValidLayoutName = (layoutName) => {
-    if(!layoutName || !layouts.some((layout) => layoutName === layout.value)) {
-        return;
-    }
-    return layoutName;
+const question = {
+    message: 'Specify desired application layout:',
+    choices: choices
 };
 
-const getLayoutInfo = (layoutName) => {
-    const questions = [
-        {
-            type: 'select',
-            name: 'layout',
-            message: 'Specify desired application layout:',
-            choices: layouts
-        }
-    ];
-
-    return runPrompts(questions, getValidLayoutName(layoutName));
+const getLayoutInfo = async(defaultValue) => {
+    return await prompts(question, choices, defaultValue);
 };
 
-module.exports = {
-    getLayoutInfo
-};
+module.exports = getLayoutInfo;

package/src/utility/prompts/prompts.js

@@ -1,16 +1,32 @@
 const prompts = require('prompts');
 
-const runPrompts = async(questions, validateValue) => {
+const run = async(question, choices, defaultValue) => {
+    question = Object.assign({}, question, {
+        type: 'select',
+        name: 'answer',
+    });
+
+    const { answer } = await askQuestion(question, getDefaultValue(choices, defaultValue));
+
+    return answer;
+};
+
+const askQuestion = async(question, validateValue) => {
     if(validateValue) {
-        const optionData = {
-            [questions[0].name]: validateValue
+        return {
+            answer: validateValue
         };
-        return new Promise((resolve, reject) => {
-            resolve(optionData);
-        });
     }
 
-    return await prompts(questions);
+    return await prompts(question);
+};
+
+const getDefaultValue = (choices, answer) => {
+    if(!answer || !choices.some((choice) => answer === choice.value)) {
+        return;
+    }
+
+    return answer;
 };
 
-module.exports = runPrompts;
+module.exports = run;