devextreme-cli 1.8.0 → 1.9.1-1.11.0-alpha.0.0

package/src/templates/react/application/src/index.css

@@ -0,0 +1,12 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

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

@@ -3,7 +3,7 @@ import Drawer from 'devextreme-react/drawer';
 import { ScrollView<%=#isTypeScript%>, ScrollViewRef<%=/isTypeScript%> } from 'devextreme-react/scroll-view';
 import Toolbar, { Item } from 'devextreme-react/toolbar';
 import React, { useState, useCallback, useRef } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { Header, SideNavigationMenu, Footer } from '../../components';
 import './side-nav-inner-toolbar.scss';
 import { useScreenSize } from '../../utils/media-query';
@@ -84,13 +84,19 @@ export default function SideNavInnerToolbar({ title, children }<%=#isTypeScript%
           />
           <ScrollView ref={scrollViewRef} className={'layout-body with-footer'}>
             <div className={'content'}>
-              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
-                return item.type !== Footer && item;
+              {React.Children.map(children, (item) => {
+                if (<%=#isTypeScript%>React.isValidElement(item) && <%=/isTypeScript%>item.type !== Footer) {
+                  return item;
+                }
+                return null;
               })}
             </div>
             <div className={'content-block'}>
-              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
-                return item.type === Footer && item;
+              {React.Children.map(children, (item) => {
+                if (<%=#isTypeScript%>React.isValidElement(item) && <%=/isTypeScript%>item.type === Footer) {
+                  return item;
+                }
+                return null;
               })}
             </div>
           </ScrollView>

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

@@ -1,7 +1,7 @@
 import Drawer from 'devextreme-react/drawer';
 import { ScrollView<%=#isTypeScript%>, ScrollViewRef<%=/isTypeScript%> } from 'devextreme-react/scroll-view';
 import React, { useState, useCallback, useRef } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { Header, SideNavigationMenu, Footer } from '../../components';
 import './side-nav-outer-toolbar.scss';
 import { useScreenSize } from '../../utils/media-query';
@@ -83,13 +83,19 @@ export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%
         <div className={'container'}>
           <ScrollView ref={scrollViewRef} className={'with-footer'}>
             <div className={'content'}>
-              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
-                return item.type !== Footer && item;
+              {React.Children.map(children, (item) => {
+                if (<%=#isTypeScript%>React.isValidElement(item) && <%=/isTypeScript%>item.type !== Footer) {
+                  return item;
+                }
+                return null;
               })}
             </div>
             <div className={'content-block'}>
-              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
-                return item.type === Footer && item;
+              {React.Children.map(children, (item) => {
+                if (<%=#isTypeScript%>React.isValidElement(item) && <%=/isTypeScript%>item.type === Footer) {
+                  return item;
+                }
+                return null;
               })}
             </div>
           </ScrollView>

package/src/templates/react/application/src/layouts/single-card/single-card.scss

@@ -1,14 +1,13 @@
-@import "../../themes/generated/variables.base.scss";
-
 .single-card {
   width: 100%;
   height: 100%;
 
   .dx-card {
-    width: 330px;
+    width: 360px;
     margin: auto auto;
-    padding: 40px;
+    padding: 24px;
     flex-grow: 0;
+    border-radius: 8px;
 
     .screen-x-small & {
       width: 100%;
@@ -21,18 +20,22 @@
     }
 
     .header {
-      margin-bottom: 30px;
+      margin: 24px 0;
 
       .title {
         color: var(--base-text-color);
-        line-height: 28px;
         font-weight: 500;
         font-size: 24px;
+        text-align: center;
+        line-height: 24px;
       }
 
       .description {
         color: var(--base-text-color-alpha-7);
-        line-height: 18px;
+        line-height: 16px;
+        font-size: 12px;
+        margin-top: 32px;
+        text-align: center;
       }
     }
   }

package/src/templates/react/application/src/layouts/single-card/single-card.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ScrollView from 'devextreme-react/scroll-view';
 import './single-card.scss';
 <%=#isTypeScript%>import type { SingleCardProps } from '../../types';<%=/isTypeScript%>

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

@@ -45,7 +45,7 @@ export function useThemeContext() {
     document.body.classList.add(themeClassNamePrefix + theme);
   }
 
-  return useMemo(()=> ({ theme, switchTheme, isDark }), [theme]);
+  return useMemo(()=> ({ theme, switchTheme, isDark }), [theme, switchTheme, isDark]);
 }
 
 export const ThemeContext = React.createContext<%=#isTypeScript%><ReturnType<typeof useThemeContext> | null><%=/isTypeScript%>(null);

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

@@ -1,6 +1,5 @@
 import { TreeViewTypes } from 'devextreme-react/tree-view';
 import { ButtonTypes } from 'devextreme-react/button';
-import React from 'react';
 
 export interface HeaderProps {
     menuToggleEnabled: boolean;
@@ -53,4 +52,4 @@ export type NavigationContextType = {
 
 export type ValidationType = {
     value: string;
-}
+}

package/src/templates/react/application/src/utils/media-query.tsx

@@ -44,7 +44,9 @@ const largeMedia = window.matchMedia('(min-width: 1280px)');
 
 [xSmallMedia, smallMedia, mediumMedia, largeMedia].forEach(media => {
   media.addListener((e) => {
-    e.matches && handlers.forEach(handler => handler());
+    if(e.matches) {
+      handlers.forEach(handler => handler())
+    }
   });
 });
 

package/src/templates/react/application/src/utils/patches.scss

@@ -1,12 +1,12 @@
-@import "../themes/generated/variables.additional.scss";
+@use "../themes/generated/variables.additional.scss" as *;
 
 @mixin menu-pre-init-patch {
     $menuMinSize: 60px;
-  
+
     .dx-drawer-content {
       padding-left: $menuMinSize;
     }
-  
+
     .dx-drawer-panel-content.dx-overlay::before {
       content: "";
       width: $menuMinSize;
@@ -15,7 +15,7 @@
       position: absolute;
       background-color: $base-bg;
     }
-  
+
     .dx-overlay-content {
       width: $menuMinSize !important;
     }

package/src/templates/react/application/src/variables.scss

@@ -1,14 +1,28 @@
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:map';
+@use "./themes/generated/variables.base.scss" as variablesBase;
+@use "./themes/generated/variables.base.dark.scss" as variablesBaseDark;
+@use "./themes/generated/variables.additional.scss" as variablesAdditional;
+@use "./themes/generated/variables.additional.dark.scss" as variablesAdditionalDark;
+
+@mixin theme-variables($theme-name) {
+  $theme: meta.module-variables($theme-name);
+  $base-text-color: map.get($theme, 'base-text-color');
+  $base-bg: map.get($theme, 'base-bg');
+
+  --base-text-color:  #{$base-text-color};
+  --base-bg: #{$base-bg};
+  --base-bg-darken-5: #{color.adjust($base-bg, $lightness: -5%)};
+  --base-accent:  #{map.get($theme, 'base-accent')};
+  --base-text-color-alpha-7: #{rgba($base-text-color, color.alpha($base-text-color) * 0.7)};
+}
+
 :root {
-  .dx-swatch-light, .dx-swatch-additional {
-    @import "./themes/generated/variables.base.scss";
-
-    --base-text-color:  #{$base-text-color};
-    --base-bg: #{$base-bg};
-    --base-bg-darken-5: #{darken($base-bg, 5)};
-    --base-accent:  #{$base-accent};
-    --base-text-color-alpha-7:  #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
-    --footer-border-color: rgba(224, 224, 224, 1);
+  body {
+    @include theme-variables('variablesBase');
 
+    --footer-border-color: rgba(224, 224, 224, 1);
     --plus-icon-color: #242424;
     --devextreme-logo-color: #596C7D;
     --vue-logo-text-color: #35495E;
@@ -17,14 +31,12 @@
     --shadow-color-second: rgba(0, 0, 0, 0.12);
   }
 
-  .dx-swatch-dark, .dx-swatch-additional-dark {
-    @import "./themes/generated/variables.base.dark.scss";
+  .dx-swatch-additional {
+    @include theme-variables('variablesAdditional');
+  }
 
-    --base-text-color:  #{$base-text-color};
-    --base-bg: #{$base-bg};
-    --base-bg-darken-5: #{darken($base-bg, 5)};
-    --base-accent:  #{$base-accent};
-    --base-text-color-alpha-7:  #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
+  .dx-swatch-dark {
+    @include theme-variables('variablesBaseDark');;
 
     --plus-icon-color: #fff;
     --devextreme-logo-color: #fff;
@@ -34,4 +46,8 @@
     --shadow-color-second: rgba(0, 0, 0, 0.24);
     --footer-border-color: rgba(97, 97, 97, 1);
   }
+
+  .dx-swatch-additional-dark {
+    @include theme-variables('variablesAdditionalDark');
+  }
 }

package/src/templates/react/sample-pages/home/home.scss

@@ -1,5 +1,3 @@
-@use "../../variables.scss" as *;
-
 .logos-container {
   margin: 0 0 40px 0;
 

package/src/templates/react/sample-pages/home/home.tsx

@@ -68,7 +68,7 @@ export default function Home() {
           <p>Thanks for using the  DevExtreme React App Template.</p>
           <p>
             <span>This application was built using </span>
-            <a href={'https://create-react-app.dev/'} target={'_blank'} rel={'noopener noreferrer'}>Create React App</a>
+            <a href={'https://vite.dev/guide/'} target={'_blank'} rel={'noopener noreferrer'}>create-vite</a>
             <span> and </span>
             <a href={'https://js.devexpress.com/Documentation/Guide/Common/DevExtreme_CLI/'} target={'_blank'} rel={'noopener noreferrer'}>DevExtreme CLI</a>
             <span> and includes the following DevExtreme components:</span>

package/src/templates/react/sample-pages/tasks/tasks.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import 'devextreme/data/odata/store';
+import { DataSource } from 'devextreme-react/common/data';
 import DataGrid, {
   Column,
   Pager,
@@ -16,7 +16,7 @@ export default function Task() {
 
       <DataGrid
         className={'dx-card content-block'}
-        dataSource={dataSource<%=#isTypeScript%> as any<%=/isTypeScript%>}
+        dataSource={dataSource}
         showBorders={false}
         focusedRowEnabled={true}
         defaultFocusedRowIndex={0}
@@ -83,7 +83,7 @@ export default function Task() {
     </React.Fragment>
 )}
 
-const dataSource = {
+const dataSource = new DataSource({
   store: {
     version: 2,
     type: 'odata',
@@ -101,7 +101,7 @@ const dataSource = {
     'Task_Completion',
     'ResponsibleEmployee/Employee_Full_Name'
   ]
-};
+});
 
 const priorities = [
   { name: 'High', value: 4 },

package/src/templates/vue-v3/application/src/App.vue

@@ -93,5 +93,6 @@ body {
   display: flex;
   height: 100%;
   width: 100%;
+  min-width: 320px;
 }
 </style>

package/src/templates/vue-v3/application/src/components/header-toolbar.vue

@@ -111,7 +111,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../dx-styles.scss";
+@use "../dx-styles.scss" as *;
 
 header {
   background-color: var(--base-bg);

package/src/templates/vue-v3/application/src/components/side-nav-menu.vue

@@ -119,8 +119,8 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../variables.scss";
-@import "../dx-styles.scss";
+@use "../variables.scss" as *;
+@use "../dx-styles.scss" as *;
 
 .dx-swatch-additional, .dx-swatch-additional-dark {
   &.side-navigation-menu {

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

@@ -15,10 +15,10 @@ $side-panel-min-width: 60px;
       margin: 0;
       line-height: 40px;
     }
+  }
 
-    .screen-x-small & {
-      padding: 20px;
-    }
+  .screen-x-small :not(.dx-card).content {
+    padding: 20px;
   }
 
   .container {

package/src/templates/vue-v3/application/src/layouts/single-card.vue

@@ -46,10 +46,11 @@ export default {
   height: 100%;
 
   .dx-card {
-    width: 330px;
+    width: 360px;
     margin: auto auto;
-    padding: 40px;
+    padding: 24px;
     flex-grow: 0;
+    border-radius: 8px;
 
     .screen-x-small & {
       width: 100%;
@@ -62,18 +63,22 @@ export default {
     }
 
     .header {
-      margin-bottom: 30px;
+      margin: 24px 0;
 
       .title {
         color: var(--base-text-color);
-        line-height: 28px;
+        text-align: center;
+        line-height: 24px;
         font-weight: 500;
         font-size: 24px;
       }
 
       .description {
         color: var(--base-text-color-alpha-7);
-        line-height: 18px;
+        line-height: 16px;
+        font-size: 12px;
+        margin-top: 32px;
+        text-align: center;
       }
     }
   }

package/src/templates/vue-v3/application/src/variables.scss

@@ -1,14 +1,28 @@
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:map';
+@use "./themes/generated/variables.base.scss" as variablesBase;
+@use "./themes/generated/variables.base.dark.scss" as variablesBaseDark;
+@use "./themes/generated/variables.additional.scss" as variablesAdditional;
+@use "./themes/generated/variables.additional.dark.scss" as variablesAdditionalDark;
+
+@mixin theme-variables($theme-name) {
+  $theme: meta.module-variables($theme-name);
+  $base-text-color: map.get($theme, 'base-text-color');
+  $base-bg: map.get($theme, 'base-bg');
+
+  --base-text-color:  #{$base-text-color};
+  --base-bg: #{$base-bg};
+  --base-bg-darken-5: #{color.adjust($base-bg, $lightness: -5%)};
+  --base-accent:  #{map.get($theme, 'base-accent')};
+  --base-text-color-alpha-7: #{rgba($base-text-color, color.alpha($base-text-color) * 0.7)};
+}
+
 :root {
   body {
-    @import "./themes/generated/variables.base.scss";
+    @include theme-variables('variablesBase');
 
-    --base-text-color:  #{$base-text-color};
-    --base-bg: #{$base-bg};
-    --base-bg-darken-5: #{darken($base-bg, 5)};
-    --base-accent:  #{$base-accent};
-    --base-text-color-alpha-7:  #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
     --footer-border-color: rgba(224, 224, 224, 1);
-
     --plus-icon-color: #242424;
     --devextreme-logo-color: #596C7D;
     --vue-logo-text-color: #35495E;
@@ -17,14 +31,12 @@
     --shadow-color-second: rgba(0, 0, 0, 0.12);
   }
 
-  .dx-swatch-dark, .dx-swatch-additional-dark {
-    @import "./themes/generated/variables.base.dark.scss";
+  .dx-swatch-additional {
+    @include theme-variables('variablesAdditional');
+  }
 
-    --base-text-color:  #{$base-text-color};
-    --base-bg: #{$base-bg};
-    --base-bg-darken-5: #{darken($base-bg, 5)};
-    --base-accent:  #{$base-accent};
-    --base-text-color-alpha-7:  #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
+  .dx-swatch-dark {
+    @include theme-variables('variablesBaseDark');;
 
     --plus-icon-color: #fff;
     --devextreme-logo-color: #fff;
@@ -34,4 +46,8 @@
     --shadow-color-second: rgba(0, 0, 0, 0.24);
     --footer-border-color: rgba(97, 97, 97, 1);
   }
+
+  .dx-swatch-additional-dark {
+    @include theme-variables('variablesAdditionalDark');
+  }
 }

package/src/templates/vue-v3/application/src/views/create-account-form.vue

@@ -46,13 +46,6 @@
         >
         </dx-button-options>
       </dx-button-item>
-      <dx-item>
-        <template #default>
-          <div class="login-link">
-            Have an account? <router-link to="/login-form">Sign In</router-link>
-          </div>
-        </template>
-      </dx-item>
       <template #createAccount>
         <div>
           <span class="dx-button-text">
@@ -62,6 +55,9 @@
         </div>
       </template>
     </dx-form>
+    <div class="login-link">
+      Have an account? <router-link to="/login-form">Sign In</router-link>
+    </div>
   </form>
 </template>
 
@@ -104,28 +100,28 @@ export default {
     });
 
     const onSubmit = async () => {
-    const { email, password } = formData;
-    loading.value = true;
+      const { email, password } = formData;
+      loading.value = true;
 
-    const result = await auth.createAccount(email, password);
-    loading.value = false;
+      const result = await auth.createAccount(email, password);
+      loading.value = false;
 
-    if (result.isOk) {
-      router.push("/login-form");
-    } else {
-      notify(result.message, 'error', 2000);
-    }
-  };
+      if (result.isOk) {
+        router.push("/login-form");
+      } else {
+        notify(result.message, 'error', 2000);
+      }
+    };
 
     function confirmPassword(e) {
       return e.value === formData.password;
     }
 
     return {
-        formData,
-        loading,
-        onSubmit,
-        confirmPassword
+      formData,
+      loading,
+      onSubmit,
+      confirmPassword
     }
   }
 }
@@ -134,9 +130,8 @@ export default {
 <style lang="scss">
 .create-account-form {
   .policy-info {
-    margin: 10px 0;
     color: var(--base-text-color-alpha-7);
-    font-size: 14px;
+    font-size: 12px;
     font-style: normal;
 
     a {
@@ -146,8 +141,10 @@ export default {
 
   .login-link {
     color: var(--base-accent);
-    font-size: 16px;
+    font-size: 12px;
     text-align: center;
+    padding: 6px 0 32px 0;
+    border-bottom: 1px solid var(--border-color);
   }
 }
 </style>

package/src/templates/vue-v3/application/src/views/login-form.vue

@@ -34,20 +34,6 @@
         >
         </dx-button-options>
       </dx-button-item>
-      <dx-item>
-        <template #default>
-          <div class="link">
-            <router-link to="/reset-password">Forgot password?</router-link>
-          </div>
-        </template>
-      </dx-item>
-      <dx-button-item>
-        <dx-button-options
-          text="Create an account"
-          width="100%"
-          :on-click="onCreateAccountClick"
-        />
-      </dx-button-item>
       <template #signInTemplate>
         <div>
           <span class="dx-button-text">
@@ -57,6 +43,15 @@
         </div>
       </template>
     </dx-form>
+    <div class="link">
+      <router-link to="/reset-password">Forgot password?</router-link>
+    </div>
+    <dx-button
+      text="Create an account"
+      stylingMode="outlined"
+      width="100%"
+      @click="onCreateAccountClick"
+    />
   </form>
 </template>
 
@@ -70,6 +65,7 @@ import DxForm, {
   DxButtonItem,
   DxButtonOptions
 } from "devextreme-vue/form";
+import { DxButton } from 'devextreme-vue';
 import notify from 'devextreme/ui/notify';
 
 import auth from "../auth";
@@ -119,26 +115,23 @@ export default {
     DxItem,
     DxLabel,
     DxButtonItem,
-    DxButtonOptions
+    DxButtonOptions,
+    DxButton
   }
 };
 </script>
 
 <style lang="scss">
 .login-form {
+  .form-text {
+    color: var(--base-text-color-alpha-7);
+  }
+
   .link {
     text-align: center;
-    font-size: 16px;
+    font-size: 12px;
     font-style: normal;
-
-    a {
-      text-decoration: none;
-    }
-  }
-
-  .form-text {
-    margin: 10px 0;
-    color: var(--base-text-color-alpha-7);
+    margin: 6px 0 50px;
   }
 }
 </style>

package/src/templates/vue-v3/application/src/views/reset-password-form.vue

@@ -20,13 +20,6 @@
         >
         </dx-button-options>
       </dx-button-item>
-      <dx-item>
-        <template #default>
-          <div class="login-link">
-            Return to <router-link to="/login-form">Sign In</router-link>
-          </div>
-        </template>
-      </dx-item>
       <template #resetTemplate>
         <div>
           <span class="dx-button-text">
@@ -36,6 +29,9 @@
         </div>
       </template>
     </dx-form>
+    <div class="login-link">
+      Return to <router-link to="/login-form">Sign In</router-link>
+    </div>
   </form>
 </template>
 
@@ -103,13 +99,14 @@ export default {
 <style lang="scss">
 .reset-password-form {
   .submit-button {
-    margin-top: 10px;
+    margin-top: 18px;
   }
 
   .login-link {
     color: var(--base-accent);
-    font-size: 16px;
+    font-size: 12px;
     text-align: center;
+    margin-top: 6px;
   }
 }
 </style>