devextreme-cli 1.3.1 → 1.4.0

package/src/commands.json

@@ -18,6 +18,9 @@
             }, {
                 "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/{Content.js → Content.tsx}

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Switch, Route<%=^empty%>, Redirect<%=/empty%> } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
 import appInfo from './app-info';
 import routes from './app-routes';
 import { <%=layout%> as SideNavBarLayout } from './layouts';
@@ -8,17 +7,19 @@ import { Footer } from './components';
 export default function Content() {
   return (
     <SideNavBarLayout title={appInfo.title}>
-      <Switch>
-        {routes.map(({ path, component }) => (
+      <Routes>
+        {routes.map(({ path, element }) => (
           <Route
-            exact
             key={path}
             path={path}
-            component={component}
+            element={element}
           />
-        ))}<%=^empty%>
-        <Redirect to={'/home'} /><%=/empty%>
-      </Switch>
+        ))}
+        <Route
+          path='*'
+          element={<Navigate to='/home' />}
+        />
+      </Routes>
       <Footer>
         Copyright © 2011-{new Date().getFullYear()} {appInfo.title} Inc.
         <br />
@@ -28,3 +29,4 @@ export default function Content() {
     </SideNavBarLayout>
   );
 }
+

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

@@ -0,0 +1,46 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { SingleCard } from './layouts';
+import { LoginForm, ResetPasswordForm, ChangePasswordForm, CreateAccountForm } from './components';
+
+export default function UnauthenticatedContent() {
+  return (
+    <Routes>
+      <Route
+        path='/login' 
+        element={
+          <SingleCard title="Sign In">
+            <LoginForm />
+          </SingleCard>
+        }
+      />
+      <Route
+        path='/create-account'
+        element={
+          <SingleCard title="Sign Up">
+            <CreateAccountForm />
+          </SingleCard>
+        }
+      />
+      <Route 
+        path='/reset-password'
+        element={
+          <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
+        path='/change-password/:recoveryCode'
+        element={
+          <SingleCard title="Change Password">
+            <ChangePasswordForm />
+          </SingleCard>
+        }
+      />
+      <Route path='*' element={<Navigate to={'/login'} />}></Route>
+    </Routes>
+  );
+}

package/src/templates/react/application/src/api/{auth.js → auth.tsx}

@@ -1,6 +1,6 @@
 import defaultUser from '../utils/default-user';
 
-export async function signIn(email, password) {
+export async function signIn(email<%=#isTypeScript%>: string<%=/isTypeScript%>, password<%=#isTypeScript%>: string<%=/isTypeScript%>) {
   try {
     // Send request
     console.log(email, password);
@@ -34,7 +34,7 @@ export async function getUser() {
   }
 }
 
-export async function createAccount(email, password) {
+export async function createAccount(email<%=#isTypeScript%>: string<%=/isTypeScript%>, password<%=#isTypeScript%>: string<%=/isTypeScript%>) {
   try {
     // Send request
     console.log(email, password);
@@ -51,7 +51,7 @@ export async function createAccount(email, password) {
   }
 }
 
-export async function changePassword(email, recoveryCode) {
+export async function changePassword(email<%=#isTypeScript%>: string<%=/isTypeScript%>, recoveryCode<%=#isTypeScript%>?: string<%=/isTypeScript%>) {
   try {
     // Send request
     console.log(email, recoveryCode);
@@ -68,7 +68,7 @@ export async function changePassword(email, recoveryCode) {
   }
 }
 
-export async function resetPassword(email) {
+export async function resetPassword(email<%=#isTypeScript%>: string<%=/isTypeScript%>) {
   try {
     // Send request
     console.log(email);

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

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

package/src/templates/react/application/src/components/change-password-form/{change-password-form.js → ChangePasswordForm.tsx}

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import Form, {
   Item,
   Label,
@@ -10,15 +10,16 @@ import Form, {
 } from 'devextreme-react/form';
 import LoadIndicator from 'devextreme-react/load-indicator';
 import notify from 'devextreme/ui/notify';
+<%=#isTypeScript%>import { ValidationType } from '../../types';<%=/isTypeScript%>
 import { changePassword } from '../../api/auth';
 
-export default function ChangePasswordForm(props) {
-  const history = useHistory();
+export default function ChangePasswordForm() {
+  const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({});
+  const formData = useRef({ password: '' });
   const { recoveryCode } = useParams();
 
-  const onSubmit = useCallback(async (e) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
     e.preventDefault();
     const { password } = formData.current;
     setLoading(true);
@@ -27,14 +28,14 @@ export default function ChangePasswordForm(props) {
     setLoading(false);
 
     if (result.isOk) {
-      history.push('/login');
+      navigate('/login');
     } else {
       notify(result.message, 'error', 2000);
     }
-  }, [history, recoveryCode]);
+  }, [navigate, recoveryCode]);
 
   const confirmPassword = useCallback(
-    ({ value }) => value === formData.current.password,
+    ({ value }<%=#isTypeScript%>: ValidationType<%=/isTypeScript%>) => value === formData.current.password,
     []
   );
 

package/src/templates/react/application/src/components/create-account-form/{create-account-form.js → CreateAccountForm.tsx}

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import Form, {
   Item,
   Label,
@@ -12,14 +12,15 @@ import Form, {
 import notify from 'devextreme/ui/notify';
 import LoadIndicator from 'devextreme-react/load-indicator';
 import { createAccount } from '../../api/auth';
-import './create-account-form.scss';
+<%=#isTypeScript%>import { ValidationType } from '../../types';<%=/isTypeScript%>
+import './CreateAccountForm.scss';
 
-export default function CreateAccountForm(props) {
-  const history = useHistory();
+export default function CreateAccountForm() {
+  const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({});
+  const formData = useRef({ email: '', password: '' });
 
-  const onSubmit = useCallback(async (e) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
     e.preventDefault();
     const { email, password } = formData.current;
     setLoading(true);
@@ -28,14 +29,14 @@ export default function CreateAccountForm(props) {
     setLoading(false);
 
     if (result.isOk) {
-      history.push('/login');
+      navigate('/login');
     } else {
       notify(result.message, 'error', 2000);
     }
-  }, [history]);
+  }, [navigate]);
 
   const confirmPassword = useCallback(
-    ({ value }) => value === formData.current.password,
+    ({ value }<%=#isTypeScript%>: ValidationType<%=/isTypeScript%>) => value === formData.current.password,
     []
   );
 

package/src/templates/react/application/src/components/footer/{footer.js → Footer.tsx}

@@ -1,5 +1,5 @@
 import React from 'react';
-import './footer.scss';
+import './Footer.scss';
 
 export default function Footer({ ...rest }) {
   return <footer className={'footer'} {...rest} />;

package/src/templates/react/application/src/components/header/{header.js → Header.tsx}

@@ -1,11 +1,12 @@
 import React from 'react';
 import Toolbar, { Item } from 'devextreme-react/toolbar';
 import Button from 'devextreme-react/button';
-import UserPanel from '../user-panel/user-panel';
-import './header.scss';
+import UserPanel from '../user-panel/UserPanel';
+import './Header.scss';
 import { Template } from 'devextreme-react/core/template';
+<%=#isTypeScript%>import type { HeaderProps } from '../../types';<%=/isTypeScript%>
 
-export default function Header({ menuToggleEnabled, title, toggleMenu }) {
+export default function Header({ menuToggleEnabled, title, toggleMenu }<%=#isTypeScript%>: HeaderProps<%=/isTypeScript%>) {
   return (
     <header className={'header-component'}>
       <Toolbar className={'header-toolbar'}>

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

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

package/src/templates/react/application/src/components/login-form/{login-form.js → LoginForm.tsx}

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import Form, {
   Item,
   Label,
@@ -12,15 +12,15 @@ import LoadIndicator from 'devextreme-react/load-indicator';
 import notify from 'devextreme/ui/notify';
 import { useAuth } from '../../contexts/auth';
 
-import './login-form.scss';
+import './LoginForm.scss';
 
 export default function LoginForm() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const { signIn } = useAuth();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({});
+  const formData = useRef({ email: '', password: '' });
 
-  const onSubmit = useCallback(async (e) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
     e.preventDefault();
     const { email, password } = formData.current;
     setLoading(true);
@@ -33,8 +33,8 @@ export default function LoginForm() {
   }, [signIn]);
 
   const onCreateAccountClick = useCallback(() => {
-    history.push('/create-account');
-  }, [history]);
+    navigate('/create-account');
+  }, [navigate]);
 
   return (
     <form className={'login-form'} onSubmit={onSubmit}>

package/src/templates/react/application/src/components/reset-password-form/{reset-password-form.js → ResetPasswordForm.tsx}

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { Link, useHistory } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import Form, {
   Item,
   Label,
@@ -11,16 +11,16 @@ import Form, {
 import LoadIndicator from 'devextreme-react/load-indicator';
 import notify from 'devextreme/ui/notify';
 import { resetPassword } from '../../api/auth';
-import './reset-password-form.scss';
+import './ResetPasswordForm.scss';
 
 const notificationText = 'We\'ve sent a link to reset your password. Check your inbox.';
 
-export default function ResetPasswordForm(props) {
-  const history = useHistory();
+export default function ResetPasswordForm() {
+  const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({});
+  const formData = useRef({ email: '', password: '' });
 
-  const onSubmit = useCallback(async (e) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
     e.preventDefault();
     const { email } = formData.current;
     setLoading(true);
@@ -29,12 +29,12 @@ export default function ResetPasswordForm(props) {
     setLoading(false);
 
     if (result.isOk) {
-      history.push('/login');
+      navigate('/login');
       notify(notificationText, 'success', 2500);
     } else {
       notify(result.message, 'error', 2000);
     }
-  }, [history]);
+  }, [navigate]);
 
   return (
     <form className={'reset-password-form'} onSubmit={onSubmit}>

package/src/templates/react/application/src/components/side-navigation-menu/{side-navigation-menu.js → SideNavigationMenu.tsx}

@@ -3,11 +3,12 @@ import TreeView from 'devextreme-react/tree-view';
 import { navigation } from '../../app-navigation';
 import { useNavigation } from '../../contexts/navigation';
 import { useScreenSize } from '../../utils/media-query';
-import './side-navigation-menu.scss';
+import './SideNavigationMenu.scss';
+<%=#isTypeScript%>import type { SideNavigationMenuProps } from '../../types';<%=/isTypeScript%>
 
 import * as events from 'devextreme/events';
 
-export default function SideNavigationMenu(props) {
+export default function SideNavigationMenu(props<%=#isTypeScript%>: React.PropsWithChildren<SideNavigationMenuProps><%=/isTypeScript%>) {
   const {
     children,
     selectedItemChanged,
@@ -18,12 +19,9 @@ export default function SideNavigationMenu(props) {
 
   const { isLarge } = useScreenSize();
   function normalizePath () {
-    return navigation.map((item) => {
-      if(item.path && !(/^\//.test(item.path))){
-        item.path = `/${item.path}`;
-      }
-      return {...item, expanded: isLarge};
-    });
+    return navigation.map((item) => (
+      { ...item, expanded: isLarge, path: item.path && !(/^\//.test(item.path)) ? `/${item.path}` : item.path }
+    ))
   }
 
   const items = useMemo(
@@ -34,16 +32,16 @@ export default function SideNavigationMenu(props) {
 
   const { navigationData: { currentPath } } = useNavigation();
 
-  const treeViewRef = useRef();
-  const wrapperRef = useRef();
-  const getWrapperRef = useCallback((element) => {
+  const treeViewRef = useRef<%=#isTypeScript%><TreeView><%=/isTypeScript%>(null);
+  const wrapperRef = useRef<%=#isTypeScript%><HTMLDivElement><%=/isTypeScript%>();
+  const getWrapperRef = useCallback((element<%=#isTypeScript%>: HTMLDivElement<%=/isTypeScript%>) => {
     const prevElement = wrapperRef.current;
     if (prevElement) {
       events.off(prevElement, 'dxclick');
     }
 
     wrapperRef.current = element;
-    events.on(element, 'dxclick', e => {
+    events.on(element, 'dxclick', (e<%=#isTypeScript%>: React.PointerEvent<%=/isTypeScript%>) => {
       openMenu(e);
     });
   }, [openMenu]);

package/src/templates/react/application/src/components/user-panel/{user-panel.js → UserPanel.tsx}

@@ -1,16 +1,17 @@
 import React, { useMemo } from 'react';
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import ContextMenu, { Position } from 'devextreme-react/context-menu';
 import List from 'devextreme-react/list';
 import { useAuth } from '../../contexts/auth';
-import './user-panel.scss';
+import './UserPanel.scss';
+<%=#isTypeScript%>import type { UserPanelProps } from '../../types';<%=/isTypeScript%>
 
-export default function UserPanel({ menuMode }) {
+export default function UserPanel({ menuMode }<%=#isTypeScript%>: UserPanelProps<%=/isTypeScript%>) {
   const { user, signOut } = useAuth();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   function navigateToProfile() {
-    history.push("/profile");
+    navigate("/profile");
   }
   const menuItems = useMemo(() => ([
     {
@@ -24,19 +25,18 @@ export default function UserPanel({ menuMode }) {
       onClick: signOut
     }
   ]), [signOut]);
-
   return (
     <div className={'user-panel'}>
       <div className={'user-info'}>
         <div className={'image-container'}>
           <div
             style={{
-              background: `url(${user.avatarUrl}) no-repeat #fff`,
+              background: `url(${user<%=#isTypeScript%>!<%=/isTypeScript%>.avatarUrl}) no-repeat #fff`,
               backgroundSize: 'cover'
             }}
             className={'user-image'} />
         </div>
-        <div className={'user-name'}>{user.email}</div>
+        <div className={'user-name'}>{user<%=#isTypeScript%>!<%=/isTypeScript%>.email}</div>
       </div>
 
       {menuMode === 'context' && (

package/src/templates/react/application/src/contexts/{auth.js → auth.tsx}

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, createContext, useContext, useCallback } from 'react';
 import { getUser, signIn as sendSignInRequest } from '../api/auth';
+<%=#isTypeScript%>import type { User, AuthContextType } from '../types';<%=/isTypeScript%>
 
-function AuthProvider(props) {
-  const [user, setUser] = useState();
+function AuthProvider(props<%=#isTypeScript%>: React.PropsWithChildren<unknown><%=/isTypeScript%>) {
+  const [user, setUser] = useState<%=#isTypeScript%><User><%=/isTypeScript%>();
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -16,7 +17,7 @@ function AuthProvider(props) {
     })();
   }, []);
 
-  const signIn = useCallback(async (email, password) => {
+  const signIn = useCallback(async (email<%=#isTypeScript%>: string<%=/isTypeScript%>, password<%=#isTypeScript%>: string<%=/isTypeScript%>) => {
     const result = await sendSignInRequest(email, password);
     if (result.isOk) {
       setUser(result.data);
@@ -26,7 +27,7 @@ function AuthProvider(props) {
   }, []);
 
   const signOut = useCallback(() => {
-    setUser();
+    setUser(undefined);
   }, []);
 
 
@@ -35,7 +36,7 @@ function AuthProvider(props) {
   );
 }
 
-const AuthContext = createContext({});
+const AuthContext = createContext<%=#isTypeScript%><AuthContextType><%=/isTypeScript%>({ loading: false }<%=#isTypeScript%> as AuthContextType<%=/isTypeScript%>);
 const useAuth = () => useContext(AuthContext);
 
 export { AuthProvider, useAuth }

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

@@ -0,0 +1,35 @@
+import React, { useState, createContext, useContext, useEffect } from 'react';
+<%=#isTypeScript%>import type { NavigationContextType } from '../types';<%=/isTypeScript%>
+
+const NavigationContext = createContext<%=#isTypeScript%><NavigationContextType><%=/isTypeScript%>({}<%=#isTypeScript%> as NavigationContextType<%=/isTypeScript%>);
+const useNavigation = () => useContext(NavigationContext);
+
+function NavigationProvider(props<%=#isTypeScript%>: React.PropsWithChildren<unknown><%=/isTypeScript%>) {
+  const [navigationData, setNavigationData] = useState({ currentPath: '' });
+
+  return (
+    <NavigationContext.Provider
+      value={{ navigationData, setNavigationData }}
+      {...props}
+    />
+  );
+}
+
+function withNavigationWatcher(Component<%=#isTypeScript%>: React.ElementType<%=/isTypeScript%>, path<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  const WrappedComponent = function (props<%=#isTypeScript%>: Record<string, unknown><%=/isTypeScript%>) {
+    const { setNavigationData } = useNavigation();
+
+    useEffect(() => {
+      setNavigationData<%=#isTypeScript%>!<%=/isTypeScript%>({ currentPath: path });
+    }, [path, setNavigationData]);
+
+    return <Component {...props} />;
+  }
+  return <WrappedComponent />;
+}
+
+export {
+  NavigationProvider,
+  useNavigation,
+  withNavigationWatcher
+}

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

@@ -5,26 +5,38 @@
   display: flex;
   height: 100%;
   width: 100%;
-}
 
-.side-nav-outer-toolbar .dx-drawer {
-  height: calc(100% - 56px)
-}
+  .content {
+    line-height: 1.5;
+    flex-grow: 1;
 
-.app .content {
-  line-height: 1.5;
+    h2 {
+      font-size: 30px;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
 
-  h2 {
-    font-size: 30px;
+  .container {
+    height: 100%;
+    flex-direction: column;
+    display: flex;
+  }
+
+  .layout-body {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .content-block {
+    margin-left: 40px;
+    margin-right: 40px;
     margin-top: 20px;
-    margin-bottom: 20px;
   }
 }
 
-.app .content-block {
-  margin-left: 40px;
-  margin-right: 40px;
-  margin-top: 20px;
+.side-nav-outer-toolbar .dx-drawer {
+  height: calc(100% - 56px)
 }
 
 .screen-x-small .content-block {

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

@@ -2,21 +2,6 @@
   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;
@@ -29,7 +14,7 @@
   .screen-x-small & {
     padding-left: 20px;
   }
-    
+
   .dx-theme-generic & {
     padding-top: 10px;
     padding-bottom: 10px;