devextreme-cli 1.7.0 → 1.7.3

package/src/templates/react/application/src/components/user-panel/UserPanel.tsx

@@ -1,18 +1,19 @@
 import React, { useMemo, useCallback } from 'react';
 import { useNavigate } from "react-router-dom";
-import ContextMenu, { Position } from 'devextreme-react/context-menu';
+import DropDownButton from 'devextreme-react/drop-down-button';
 import List from 'devextreme-react/list';
 import { useAuth } from '../../contexts/auth';
 import './UserPanel.scss';
 <%=#isTypeScript%>import type { UserPanelProps } from '../../types';<%=/isTypeScript%>
 
 export default function UserPanel({ menuMode }<%=#isTypeScript%>: UserPanelProps<%=/isTypeScript%>) {
-  const { user, signOut } = useAuth();
+  const { signOut } = useAuth();
   const navigate = useNavigate();
 
   const navigateToProfile = useCallback(() => {
     navigate("/profile");
   }, [navigate]);
+
   const menuItems = useMemo(() => ([
     {
       text: 'Profile',
@@ -25,33 +26,29 @@ export default function UserPanel({ menuMode }<%=#isTypeScript%>: UserPanelProps
       onClick: signOut
     }
   ]), [navigateToProfile, signOut]);
-  return (
-    <div className={'user-panel'}>
-      <div className={'user-info'}>
-        <div className={'image-container'}>
-          <div
-            style={{
-              background: `url(${user<%=#isTypeScript%>!<%=/isTypeScript%>.avatarUrl}) no-repeat #fff`,
-              backgroundSize: 'cover'
-            }}
-            className={'user-image'} />
-        </div>
-        <div className={'user-name'}>{user<%=#isTypeScript%>!<%=/isTypeScript%>.email}</div>
-      </div>
 
+  const dropDownButtonAttributes = {
+    class: 'user-button'
+  };
+
+  const buttonDropDownOptions = {
+    width: '150px'
+  };
+
+  return (
+    <div className='user-panel'>
       {menuMode === 'context' && (
-        <ContextMenu
-          items={menuItems}
-          target={'.user-button'}
-          showEvent={'dxclick'}
-          width={210}
-          cssClass={'user-menu'}
-        >
-          <Position my={{ x: 'center', y: 'top' }} at={{ x: 'center', y: 'bottom' }} />
-        </ContextMenu>
+        <DropDownButton
+            stylingMode='text'
+            icon='https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png'
+            showArrowIcon={false}
+            elementAttr={dropDownButtonAttributes}
+            dropDownOptions={buttonDropDownOptions}
+            items={menuItems}>
+        </DropDownButton>
       )}
       {menuMode === 'list' && (
-        <List className={'dx-toolbar-menu-action'} items={menuItems} />
+        <List items={menuItems} />
       )}
     </div>
   );

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

@@ -1,36 +1,45 @@
-@import "./themes/generated/variables.base.scss";
+$side-panel-min-width: 60px;
 
+html,
 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;
+  margin: 0;
+  min-height: 100%;
+  height: 100%;
 }
 
-.app {
-  background-color: darken($base-bg, 5.00);
-  display: flex;
-  height: 100%;
-  width: 100%;
+.dx-viewport {
+  .dx-popup-wrapper {
+    z-index: 1510 !important;
+  }
+
+  #root {
+    height: 100%;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .app {
+    background-color: var(--base-bg-darken-5);
+    display: flex;
+    height: 100%;
+    width: 100%;
+  }
 
   .content {
     line-height: 1.5;
     flex-grow: 1;
+    padding: 20px 40px;
 
     h2 {
-      font-size: 30px;
-      margin-top: 20px;
-      margin-bottom: 20px;
+      font-size: 32px;
+      margin: 0;
+      line-height: 40px;
+    }
+
+    .screen-x-small & {
+      padding: 20px;
     }
   }
 
@@ -45,61 +54,48 @@ body {
     min-height: 0;
   }
 
+  .side-nav-outer-toolbar .dx-drawer {
+    height: calc(100% - 56px)
+  }
+
   .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 {
-  margin-left: 20px;
-  margin-right: 20px;
-}
-
-.responsive-paddings {
-  padding: 20px;
+  .responsive-paddings {
+    padding: 20px;
 
-  .screen-large & {
-    padding: 40px;
+    .screen-large & {
+      padding: 40px;
+    }
   }
-}
-
-.dx-card.wide-card {
-  border-radius: 0;
-  margin-left: 0;
-  margin-right: 0;
-  border-right: 0;
-  border-left: 0;
-}
 
-.with-footer > .dx-scrollable-wrapper >
-.dx-scrollable-container > .dx-scrollable-content {
-  height: 100%;
-
-  & > .dx-scrollview-content {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
+  .dx-card.wide-card {
+    border-radius: 0;
+    margin-left: 0;
+    margin-right: 0;
+    border-right: 0;
+    border-left: 0;
   }
-}
 
-$side-panel-min-width: 60px;
+  .with-footer > .dx-scrollable-wrapper >
+  .dx-scrollable-container > .dx-scrollable-content {
+    height: 100%;
 
-html, body {
-  margin: 0px;
-  min-height: 100%;
-  height: 100%;
-}
+    & > .dx-scrollview-content {
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+    }
+  }
 
-#root {
-  height: 100%;
 }
 
-* {
-  box-sizing: border-box;
+.dx-theme-fluent {
+  .dx-drawer-wrapper {
+    .dx-drawer-panel-content,
+    .dx-overlay-content {
+      box-shadow: 0 4px 4px 0 var(--shadow-color-first), 0 1px 2px 0 var(--shadow-color-second);
+    }
+  }
 }

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

@@ -3,13 +3,8 @@
 }
 
 #navigation-header {
-  @import "../../themes/generated/variables.additional.scss";
-  background-color: $base-accent;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-
-  .menu-button .dx-icon {
-    color: $base-text-color;
-  }
+  background-color: var(--base-bg);
 
   .screen-x-small & {
     padding-left: 20px;

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

@@ -3,8 +3,8 @@
   display: flex;
   height: 100%;
   width: 100%;
-}
 
-.layout-header {
-  z-index: 1501;
+  .header-component {
+    z-index: 1505;
+  }
 }

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

@@ -69,7 +69,7 @@ export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%
         title={title}
       />
       <Drawer
-        className={['drawer', patchCssClass].join(' ')}
+        className={['drawer layout-body', patchCssClass].join(' ')}
         position={'before'}
         closeOnOutsideClick={onOutsideClick}
         openedStateMode={isLarge ? 'shrink' : 'overlap'}
@@ -81,7 +81,7 @@ export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%
         template={'menu'}
       >
         <div className={'container'}>
-          <ScrollView ref={scrollViewRef} className={'layout-body with-footer'}>
+          <ScrollView ref={scrollViewRef} className={'with-footer'}>
             <div className={'content'}>
               {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
                 return item.type !== Footer && item;

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

@@ -1,6 +1,8 @@
 @import "../../themes/generated/variables.base.scss";
 
 .single-card {
+  width: 100%;
+  height: 100%;
 
   .dx-card {
     width: 330px;
@@ -22,14 +24,14 @@
       margin-bottom: 30px;
 
       .title {
-        color: $base-text-color;
+        color: var(--base-text-color);
         line-height: 28px;
         font-weight: 500;
         font-size: 24px;
       }
 
       .description {
-        color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+        color: var(--base-text-color-alpha-7);
         line-height: 18px;
       }
     }

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

@@ -0,0 +1,51 @@
+import React, { useCallback, useMemo, useState } from 'react';
+
+const themes = ['light', 'dark'];
+const themeClassNamePrefix = 'dx-swatch-';
+let currentTheme =  getNextTheme();
+
+function getNextTheme(theme = '') {
+  return themes[themes.indexOf(theme) + 1] || themes[0];
+}
+
+function getCurrentTheme() {
+  return currentTheme;
+}
+
+function toggleTheme(prevTheme<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  const isCurrentThemeDark = prevTheme === 'dark';
+  const newTheme = getNextTheme(prevTheme);
+
+  document.body.classList.replace(
+    themeClassNamePrefix + prevTheme,
+    themeClassNamePrefix + newTheme
+  );
+
+  const additionalClassNamePrefix = themeClassNamePrefix + 'additional';
+  const additionalClassNamePostfix = isCurrentThemeDark ? '-' + prevTheme : '';
+  const additionalClassName = `${additionalClassNamePrefix}${additionalClassNamePostfix}`
+
+  document.body
+    .querySelector(`.${additionalClassName}`)?.classList
+    .replace(additionalClassName, additionalClassNamePrefix + (isCurrentThemeDark ? '' : '-dark'));
+
+  currentTheme = newTheme;
+
+  return newTheme;
+}
+
+export function useThemeContext() {
+  const [theme, setTheme] = useState(getCurrentTheme());
+  const switchTheme = useCallback(() => setTheme((currentTheme) => toggleTheme(currentTheme)), []);
+  const isDark = useCallback(()<%=#isTypeScript%>: boolean<%=/isTypeScript%> => {
+    return currentTheme === 'dark';
+  }, []);
+
+  if (!document.body.className.includes(themeClassNamePrefix)) {
+    document.body.classList.add(themeClassNamePrefix + theme);
+  }
+
+  return useMemo(()=> ({ theme, switchTheme, isDark }), [theme]);
+}
+
+export const ThemeContext = React.createContext<%=#isTypeScript%><ReturnType<typeof useThemeContext> | null><%=/isTypeScript%>(null);

package/src/templates/react/application/src/themes/metadata.additional.dark.json

@@ -0,0 +1,11 @@
+{
+  "items": [],
+  "baseTheme": "fluent.blue.dark",
+  "assetsBasePath": "../../../node_modules/devextreme/dist/css/",
+  "outputColorScheme": "additional-dark",
+  "makeSwatch": true,
+  "base": true,
+  "widgets": [
+    "treeview"
+  ]
+}

package/src/templates/react/application/src/themes/metadata.additional.json

@@ -1,6 +1,6 @@
 {
   "items": [],
-  "baseTheme": "material.orange.dark",
+  "baseTheme": "fluent.blue.light",
   "assetsBasePath": "../../../node_modules/devextreme/dist/css/",
   "outputColorScheme": "additional",
   "makeSwatch": true,

package/src/templates/react/application/src/themes/metadata.base.dark.json

@@ -0,0 +1,8 @@
+{
+  "items": [],
+  "baseTheme": "fluent.blue.dark",
+  "assetsBasePath": "../../../node_modules/devextreme/dist/css/",
+  "outputColorScheme": "dark",
+  "base": true,
+  "makeSwatch": true
+}

package/src/templates/react/application/src/themes/metadata.base.json

@@ -1,6 +1,6 @@
 {
   "items": [],
-  "baseTheme": "material.orange.light",
+  "baseTheme": "fluent.blue.light",
   "assetsBasePath": "../../../node_modules/devextreme/dist/css/",
   "outputColorScheme": "base",
   "base": true

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

@@ -1,56 +1,56 @@
-import { TreeViewTypes } from 'devextreme-react/tree-view';
-import { ButtonTypes } from 'devextreme-react/button';
-import React from 'react';
-
-export interface HeaderProps {
-    menuToggleEnabled: boolean;
-    title?: string;
-    toggleMenu: (e: ButtonTypes.ClickEvent) => void;
-}
-
-export interface SideNavigationMenuProps {
-    selectedItemChanged: (e: TreeViewTypes.ItemClickEvent) => void;
-    openMenu: (e: React.PointerEvent) => void;
-    compactMode: boolean;
-    onMenuReady: (e: TreeViewTypes.ContentReadyEvent) => 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;
+import { TreeViewTypes } from 'devextreme-react/tree-view';
+import { ButtonTypes } from 'devextreme-react/button';
+import React from 'react';
+
+export interface HeaderProps {
+    menuToggleEnabled: boolean;
+    title?: string;
+    toggleMenu: (e: ButtonTypes.ClickEvent) => void;
+}
+
+export interface SideNavigationMenuProps {
+    selectedItemChanged: (e: TreeViewTypes.ItemClickEvent) => void;
+    openMenu: (e: React.PointerEvent) => void;
+    compactMode: boolean;
+    onMenuReady: (e: TreeViewTypes.ContentReadyEvent) => 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/variables.scss

@@ -0,0 +1,37 @@
+: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);
+
+    --plus-icon-color: #242424;
+    --devextreme-logo-color: #596C7D;
+    --vue-logo-text-color: #35495E;
+
+    --shadow-color-first: rgba(0, 0, 0, 0.06);
+    --shadow-color-second: rgba(0, 0, 0, 0.12);
+  }
+
+  .dx-swatch-dark, .dx-swatch-additional-dark {
+    @import "./themes/generated/variables.base.dark.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)};
+
+    --plus-icon-color: #fff;
+    --devextreme-logo-color: #fff;
+    --vue-logo-text-color: #fff;
+
+    --shadow-color-first: rgba(0, 0, 0, 0.12);
+    --shadow-color-second: rgba(0, 0, 0, 0.24);
+    --footer-border-color: rgba(97, 97, 97, 1);
+  }
+}

package/src/templates/react/page/page.tsx

@@ -3,7 +3,7 @@ import './<%=pageName%>.scss';
 
 export default () => (
   <React.Fragment>
-    <h2 className={'content-block'}><%=title%></h2>
+    <h2><%=title%></h2>
     <div className={'content-block'}>
       <div className={'dx-card responsive-paddings'}>
         Put your content here

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

@@ -1,34 +1,39 @@
+@use "../../variables.scss" as *;
+
 .logos-container {
-  margin: 20px 0 40px 0;
-  text-align: center;
+  margin: 0 0 40px 0;
+
   svg {
     display: inline-block;
   }
 }
 
 .devextreme-logo {
-  width: 200px;
-  height: 34px;
-  margin-bottom: 19px;
+  width: 255px;
+  height: 60px;
+
+  > path {
+    fill: var(--devextreme-logo-color);
+  }
+
+  .by-devexpress {
+    path {
+      fill: var(--devextreme-logo-color);
+    }
+  }
 }
 
 .react-logo {
   width: 184px;
-  height: 68px;
+  height: 60px;
 }
 
 .plus {
-  margin: 23px 10px;
+  margin: 20px;
   width: 22px;
   height: 22px;
-}
 
-.screen-x-small .logos-container {
-  svg {
-    width: 100%;
-    display: block;
-    &.plus {
-      margin: 0;
-    }
+  path {
+    fill:  var(--plus-icon-color);
   }
 }