devextreme-cli 1.3.0 → 1.3.3

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

@@ -1,16 +1,17 @@
 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 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(
@@ -40,6 +41,7 @@ export default function SideNavOuterToolbar({ title, children }) {
         ? MenuStatus.Closed
         : prevMenuStatus
     );
+    return true;
   }, [isLarge]);
 
   const onNavigationChanged = useCallback(({ itemData: { path }, event, node }) => {
@@ -48,19 +50,18 @@ export default function SideNavOuterToolbar({ title, children }) {
       return;
     }
 
-    history.push(path);
-    scrollViewRef.current.instance.scrollTo(0);
+    navigate(path);
+    scrollViewRef.current<%=#isTypeScript%>?<%=/isTypeScript%>.instance.scrollTo(0);
 
     if (!isLarge || menuStatus === MenuStatus.TemporaryOpened) {
       setMenuStatus(MenuStatus.Closed);
       event.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 +81,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,53 @@
+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;
+}

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/router.js

@@ -3,9 +3,9 @@ import Router from "vue-router";
 
 import auth from "./auth";
 
-<%=^empty%>import Home from "./views/home";
-import Profile from "./views/profile";
-import Tasks from "./views/tasks";
+<%=^empty%>import Home from "./views/home-page";
+import Profile from "./views/profile-page";
+import Tasks from "./views/tasks-page";
 <%=/empty%>import defaultLayout from "./layouts/<%=layout%>";
 import simpleLayout from "./layouts/single-card";
 

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/router.js

@@ -1,9 +1,9 @@
 import auth from "./auth";
 import { createRouter, createWebHashHistory } from "vue-router";
 
-<%=^empty%>import Home from "./views/home";
-import Profile from "./views/profile";
-import Tasks from "./views/tasks";
+<%=^empty%>import Home from "./views/home-page";
+import Profile from "./views/profile-page";
+import Tasks from "./views/tasks-page";
 <%=/empty%>import defaultLayout from "./layouts/<%=layout%>";
 import simpleLayout from "./layouts/single-card";
 
@@ -40,7 +40,7 @@ const router = new createRouter({
     {
       path: "/tasks",
       name: "tasks",
-      meta: { 
+      meta: {
         requiresAuth: true,
         layout: defaultLayout
       },

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;

package/src/utility/prompts/typescript.js

@@ -0,0 +1,18 @@
+const prompts = require('./prompts');
+
+const choices = [
+    { value: 'typescript', title: 'TypeScript' },
+    { value: 'javascript', title: 'JavaScript' }
+];
+
+const question = {
+    message: 'Specify desired template type:',
+    choices: choices
+};
+
+const getTemplateTypeInfo = async(defaultValue) => {
+    if(defaultValue === undefined) return 'javascript';
+    return await prompts(question, choices, defaultValue);
+};
+
+module.exports = getTemplateTypeInfo;

package/src/utility/prompts/vue-version.js

@@ -1,29 +1,17 @@
-const runPrompts = require('./prompts');
-const versions = [
+const prompts = require('./prompts');
+
+const choices = [
     { value: 'v2', title: 'Vue version (v2)' },
     { value: 'v3', title: 'Vue version (v3)' }
 ];
 
-const getValidVersion = (versionValue) => {
-    if(!versionValue || !versions.some((version) => `v${versionValue}` === version.value)) {
-        return;
-    }
-    return `v${versionValue}`;
+const question = {
+    message: 'What version do you want?',
+    choices: choices
 };
 
-const getVersionInfo = (versionValue) => {
-    const questions = [
-        {
-            type: 'select',
-            name: 'version',
-            message: 'What version do you want?',
-            choices: versions
-        }
-    ];
-
-    return runPrompts(questions, getValidVersion(versionValue));
+const getVersionInfo = async(defaultValue) => {
+    return await prompts(question, choices, `v${defaultValue}`);
 };
 
-module.exports = {
-    getVersionInfo
-};
+module.exports = getVersionInfo;

package/src/utility/run-command.js

@@ -1,11 +1,14 @@
 const spawn = require('child_process').spawn;
 
+const isWin = /^win/.test(process.platform);
+
 module.exports = function(commandName, args = [], customConfig = {}) {
     const forceNoCmd = customConfig.forceNoCmd;
-    const command = /^win/.test(process.platform) && !forceNoCmd ? `${commandName}.cmd` : commandName;
+    const command = isWin && !forceNoCmd ? `${commandName}.cmd` : commandName;
     const config = {
         stdio: 'inherit',
-        windowsVerbatimArguments: true
+        windowsVerbatimArguments: true,
+        shell: isWin ? false : true
     };
 
     if(customConfig) {

package/src/utility/template-creator.js

@@ -12,9 +12,9 @@ const applyTemplateToFile = (filePath, templateOptions) => {
     return content;
 };
 
-const addPageToApp = (pageName, pageDir, templatePagesPath) => {
+const addPageToApp = (pageName, pageDir, templatePagesPath, getCorrectExtension) => {
     fs.readdirSync(templatePagesPath).forEach((pageItem) => {
-        const pagePath = path.join(pageDir, `${pageName}${extname(pageItem)}`);
+        const pagePath = path.join(pageDir, `${pageName}${getCorrectExtension(extname(pageItem))}`);
         if(fs.existsSync(pagePath)) {
             console.error('The page already exists');
             process.exit();
@@ -25,19 +25,19 @@ const addPageToApp = (pageName, pageDir, templatePagesPath) => {
     });
 };
 
-const moveTemplateFilesToProject = (templateFolder, appPath, templateOptions, pathToFileRelativelyRoot) => {
+const moveTemplateFilesToProject = (templateFolder, appPath, templateOptions, getCorrectPath, pathToFileRelativelyRoot) => {
     const relativePath = pathToFileRelativelyRoot || '';
     const pathToFiles = path.join(templateFolder, relativePath);
 
     fs.readdirSync(pathToFiles).forEach(file => {
-        const pathToAppFile = path.join(appPath, relativePath, file);
+        const pathToAppFile = getCorrectPath(extname(file), path.join(appPath, relativePath, file), templateOptions.isTypeScript);
         const nextFilePath = path.join(pathToFiles, file);
 
         if(fs.lstatSync(nextFilePath).isDirectory()) {
             if(!fs.existsSync(pathToAppFile)) {
                 fs.mkdirSync(pathToAppFile);
             }
-            moveTemplateFilesToProject(templateFolder, appPath, templateOptions, path.join(relativePath, file));
+            moveTemplateFilesToProject(templateFolder, appPath, templateOptions, getCorrectPath, path.join(relativePath, file));
         } else {
             const content = applyTemplateToFile(nextFilePath, templateOptions);
             fs.writeFileSync(pathToAppFile, content);
@@ -45,7 +45,12 @@ const moveTemplateFilesToProject = (templateFolder, appPath, templateOptions, pa
     });
 };
 
+const getTempaltePath = (app) => {
+    return path.join(__dirname, '..', 'templates', app);
+};
+
 module.exports = {
     moveTemplateFilesToProject,
-    addPageToApp
+    addPageToApp,
+    getTempaltePath
 };

package/src/utility/typescript-extension.js

@@ -0,0 +1,24 @@
+const path = require('path');
+const devextremeConfigUtils = require('./devextreme-config');
+
+const isTypeScript = (templateType) => templateType === 'typescript';
+
+const setFileExtension = (filePath, isTypeScript) => {
+    const { dir, name } = path.parse(filePath);
+    const ext = '.' + (isTypeScript ? 'tsx' : 'js');
+
+    return path.join(dir, name + ext);
+};
+
+const getTemplateType = (engine) => {
+    const devextremeConfig = devextremeConfigUtils.read();
+    return devextremeConfig[engine]
+        ? devextremeConfig[engine].template
+        : 'javascript';
+};
+
+module.exports = {
+    isTypeScript,
+    setFileExtension,
+    getTemplateType
+};

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Switch, Route, Redirect } from 'react-router-dom';
-import { SingleCard } from './layouts';
-import { LoginForm, ResetPasswordForm, ChangePasswordForm, CreateAccountForm } from './components';
-
-export default function UnauthenticatedContent() {
-  return (
-    <Switch>
-      <Route exact path='/login' >
-        <SingleCard title="Sign In">
-          <LoginForm />
-        </SingleCard>
-      </Route>
-      <Route exact path='/create-account' >
-        <SingleCard title="Sign Up">
-          <CreateAccountForm />
-        </SingleCard>
-      </Route>
-      <Route exact path='/reset-password' >
-        <SingleCard
-          title="Reset Password"
-          description="Please enter the email address that you used to register, and we will send you a link to reset your password via Email."
-        >
-          <ResetPasswordForm />
-        </SingleCard>
-      </Route>
-      <Route exact path='/change-password/:recoveryCode' >
-        <SingleCard title="Change Password">
-          <ChangePasswordForm />
-        </SingleCard>
-      </Route>
-      <Redirect to={'/login'} />
-    </Switch>
-  );
-}

package/src/templates/react/application/src/app-routes.js

@@ -1,24 +0,0 @@
-import { withNavigationWatcher } from './contexts/navigation';<%=^empty%>
-import { HomePage, TasksPage, ProfilePage } from './pages';<%=/empty%>
-
-const routes = [<%=^empty%>
-  {
-    path: '/tasks',
-    component: TasksPage
-  },
-  {
-    path: '/profile',
-    component: ProfilePage
-  },
-  {
-    path: '/home',
-    component: HomePage
-  }
-<%=/empty%>];
-
-export default routes.map(route => {
-  return {
-    ...route,
-    component: withNavigationWatcher(route.component)
-  };
-});

package/src/templates/react/application/src/components/index.js

@@ -1,7 +0,0 @@
-export { default as Header } from './header/header';
-export { default as Footer } from './footer/footer';
-export { default as LoginForm } from './login-form/login-form';
-export { default as ResetPasswordForm } from './reset-password-form/reset-password-form';
-export { default as CreateAccountForm } from './create-account-form/create-account-form';
-export { default as ChangePasswordForm } from './change-password-form/change-password-form';
-export { default as SideNavigationMenu } from './side-navigation-menu/side-navigation-menu';

package/src/templates/react/application/src/contexts/navigation.js

@@ -1,34 +0,0 @@
-import React, { useState, createContext, useContext, useEffect } from 'react';
-
-const NavigationContext = createContext({});
-const useNavigation = () => useContext(NavigationContext);
-
-function NavigationProvider(props) {
-  const [navigationData, setNavigationData] = useState({});
-
-  return (
-    <NavigationContext.Provider
-      value={{ navigationData, setNavigationData }}
-      {...props}
-    />
-  );
-}
-
-function withNavigationWatcher(Component) {
-  return function (props) {
-    const { path } = props.match;
-    const { setNavigationData } = useNavigation();
-
-    useEffect(() => {
-      setNavigationData({ currentPath: path });
-    }, [path, setNavigationData]);
-
-    return React.createElement(Component, props);
-  }
-}
-
-export {
-  NavigationProvider,
-  useNavigation,
-  withNavigationWatcher
-}