devextreme-cli 1.7.1 → 1.8.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-cli",
-  "version": "1.7.1",
+  "version": "1.8.0-beta.0",
   "description": "DevExtreme CLI",
   "keywords": [
     "devexpress",
@@ -72,5 +72,5 @@
     "typescript": "^4.0.2",
     "typescript-eslint-parser": "^22.0.0"
   },
-  "gitHead": "faa2afd612b7677412d18ca0b8330b1076f4ccd8"
+  "gitHead": "afe86ffa75cfe3ee7b9b5a78af5adcb2e3bb28f3"
 }

package/src/applications/application.angular.js

@@ -10,8 +10,7 @@ const latestVersions = require('../utility/latest-versions');
 const { extractToolingVersion, toolingVersionOptionName } = require('../utility/extract-tooling-version');
 const schematicsVersion = latestVersions['devextreme-schematics'] || 'latest';
 
-const minNgCliVersion = new semver('16.0.0');
-const ngCliWithStandalone = new semver('17.0.0');
+const minNgCliVersion = new semver('17.0.0');
 
 async function runSchematicCommand(schematicCommand, options, evaluatingOptions) {
     const collectionName = 'devextreme-schematics';
@@ -77,7 +76,6 @@ const install = async(options) => {
 
 const create = async(appName, options) => {
     const layout = await getLayoutInfo(options.layout);
-    const currentNgVersion = ngVersion.getNgCliVersion().version;
 
     const commandArguments = [
         'new',
@@ -85,13 +83,11 @@ const create = async(appName, options) => {
         '--style=scss',
         '--routing=false',
         '--skip-tests=true',
-        '--skip-install=true'
+        '--skip-install=true',
+        '--standalone=false',
+        '--ssr=false'
     ];
 
-    if(ngCliWithStandalone.compare(currentNgVersion) <= 0) {
-        commandArguments.push('--standalone=false', '--ssr=false');
-    }
-
     await runNgCommand(commandArguments, options);
 
     const appPath = path.join(process.cwd(), appName);

package/src/applications/application.react.js

@@ -100,7 +100,9 @@ const addTemplate = (appPath, appName, templateOptions) => {
 
     const styles = [
         './themes/generated/theme.additional.css',
+        './themes/generated/theme.additional.dark.css',
         './themes/generated/theme.base.css',
+        './themes/generated/theme.base.dark.css',
         'devextreme/dist/css/dx.common.css'
     ];
 

package/src/applications/application.vue.js

@@ -77,7 +77,9 @@ const addTemplate = (appPath, appName, templateOptions) => {
     const applicationTemplatePath = path.join(templateCreator.getTempaltePath('vue-v3'), 'application');
     const styles = [
         './themes/generated/theme.additional.css',
+        './themes/generated/theme.additional.dark.css',
         './themes/generated/theme.base.css',
+        './themes/generated/theme.base.dark.css',
         'devextreme/dist/css/dx.common.css'
     ];
 

package/src/commands.json

@@ -57,7 +57,7 @@
             "description": "Specifies base theme name (default value is generic.light)"
         }, {
             "name": "--input-file",
-            "description": "Specifies file name with input data (a .json file with metadata or a .less/.scss file with Bootstrap variables)"
+            "description": "Specifies file name with input data (a .json file with metadata or a .scss file with Bootstrap 5 variables)"
         }, {
             "name": "--make-swatch",
             "description": "If present, adds a CSS scope to each CSS rule (.dx-swatch-xxx), where xxx is the value from the --output-color-scheme parameter"
@@ -76,9 +76,6 @@
         }, {
             "name": "--remove-external-resources",
             "description": "When present, removes links to external resources, such as fonts. The theme will use local fallbacks instead. Available from DevExtreme v20.2.7."
-        }, {
-            "name": "--bootstrap-version",
-            "description": "Specifies Bootstrap version 4 or 5 if '--input-file' is a '.scss' file. Available from DevExtreme v21.1.5. Default value: 4."
         }]
     }, {
         "name": "export-theme-vars",
@@ -89,7 +86,7 @@
             "description": "Specifies base theme name (default value is generic.light)"
         }, {
             "name": "--input-file",
-            "description": "Specifies file name with input data (a .json file with metadata or a .less/.scss file with Bootstrap variables)"
+            "description": "Specifies file name with input data (a .json file with metadata or a .scss file with Bootstrap 5 variables)"
         }, {
             "name": "--output-format",
             "description": "Specifies the format of output variables (less or scss) (default value is less or the extension extracted from the --output-file value (if it contains any))"
@@ -112,7 +109,7 @@
             "description": "Specifies base theme name (default value is generic.light)"
         }, {
             "name": "--input-file",
-            "description": "Specifies file name with input data (a .json file with metadata or a .less/.scss file with Bootstrap variables)"
+            "description": "Specifies file name with input data (a .json file with metadata or a .scss file with Bootstrap 5 variables)"
         }, {
             "name": "--output-file",
             "description": "Specifies output file name"

package/src/templates/react/application/devextreme.json

@@ -9,6 +9,13 @@
                   "outputFile": "src/themes/generated/theme.base.css"
               }
           },
+          {
+            "command": "build-theme",
+            "options": {
+              "inputFile": "src/themes/metadata.base.dark.json",
+              "outputFile": "src/themes/generated/theme.base.dark.css"
+            }
+          },
           {
               "command": "build-theme",
               "options": {
@@ -16,6 +23,13 @@
                   "outputFile": "src/themes/generated/theme.additional.css"
               }
           },
+          {
+            "command": "build-theme",
+            "options": {
+              "inputFile": "src/themes/metadata.additional.dark.json",
+              "outputFile": "src/themes/generated/theme.additional.dark.css"
+            }
+          },
           {
               "command": "export-theme-vars",
               "options": {
@@ -23,12 +37,26 @@
                   "outputFile": "src/themes/generated/variables.base.scss"
               }
           },
+          {
+            "command": "export-theme-vars",
+            "options": {
+              "inputFile": "src/themes/metadata.base.dark.json",
+              "outputFile": "src/themes/generated/variables.base.dark.scss"
+            }
+          },
           {
               "command": "export-theme-vars",
               "options": {
                   "inputFile": "src/themes/metadata.additional.json",
                   "outputFile": "src/themes/generated/variables.additional.scss"
               }
+          },
+          {
+            "command": "export-theme-vars",
+            "options": {
+              "inputFile": "src/themes/metadata.additional.dark.json",
+              "outputFile": "src/themes/generated/variables.additional.dark.scss"
+            }
           }
       ]
   }

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

@@ -7,6 +7,7 @@ import { AuthProvider, useAuth } from './contexts/auth';
 import { useScreenSizeClass } from './utils/media-query';
 import Content from './Content';
 import UnauthenticatedContent from './UnauthenticatedContent';
+import { ThemeContext, useThemeContext} from "./theme";
 
 function App() {
   const { user, loading } = useAuth();
@@ -24,16 +25,19 @@ function App() {
 
 export default function Root() {
   const screenSizeClass = useScreenSizeClass();
+  const themeContext = useThemeContext();
 
   return (
     <Router>
-      <AuthProvider>
-        <NavigationProvider>
-          <div className={`app ${screenSizeClass}`}>
-            <App />
-          </div>
-        </NavigationProvider>
-      </AuthProvider>
+      <ThemeContext.Provider value={themeContext}>
+        <AuthProvider>
+          <NavigationProvider>
+            <div className={`app ${screenSizeClass}`}>
+              <App />
+            </div>
+          </NavigationProvider>
+        </AuthProvider>
+      </ThemeContext.Provider>
     </Router>
   );
 }

package/src/templates/react/application/src/components/change-password-form/ChangePasswordForm.tsx

@@ -1,86 +1,86 @@
-import React, { useState, useRef, useCallback } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import Form, {
-  Item,
-  Label,
-  ButtonItem,
-  ButtonOptions,
-  RequiredRule,
-  CustomRule,
-} from 'devextreme-react/form';
-import LoadIndicator from 'devextreme-react/load-indicator';
-import notify from 'devextreme/ui/notify';
-<%=#isTypeScript%>import { ValidationCallbackData } from 'devextreme-react/common';<%=/isTypeScript%>
-import { changePassword } from '../../api/auth';
-
-export default function ChangePasswordForm() {
-  const navigate = useNavigate();
-  const [loading, setLoading] = useState(false);
-  const formData = useRef({ password: '' });
-  const { recoveryCode } = useParams();
-
-  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
-    e.preventDefault();
-    const { password } = formData.current;
-    setLoading(true);
-
-    const result = await changePassword(password, recoveryCode);
-    setLoading(false);
-
-    if (result.isOk) {
-      navigate('/login');
-    } else {
-      notify(result.message, 'error', 2000);
-    }
-  }, [navigate, recoveryCode]);
-
-  const confirmPassword = useCallback(
-    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
-    []
-  );
-
-  return (
-    <form onSubmit={onSubmit}>
-      <Form formData={formData.current} disabled={loading}>
-        <Item
-          dataField={'password'}
-          editorType={'dxTextBox'}
-          editorOptions={passwordEditorOptions}
-        >
-          <RequiredRule message="Password is required" />
-          <Label visible={false} />
-        </Item>
-        <Item
-          dataField={'confirmedPassword'}
-          editorType={'dxTextBox'}
-          editorOptions={confirmedPasswordEditorOptions}
-        >
-          <RequiredRule message="Password is required" />
-          <CustomRule
-            message={'Passwords do not match'}
-            validationCallback={confirmPassword}
-          />
-          <Label visible={false} />
-        </Item>
-        <ButtonItem>
-          <ButtonOptions
-            width={'100%'}
-            type={'default'}
-            useSubmitBehavior={true}
-          >
-            <span className="dx-button-text">
-              {
-                loading
-                  ? <LoadIndicator width={'24px'} height={'24px'} visible={true} />
-                  : 'Continue'
-              }
-            </span>
-          </ButtonOptions>
-        </ButtonItem>
-      </Form>
-    </form>
-  );
-}
-
-const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
-const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' };
+import React, { useState, useRef, useCallback } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import Form, {
+  Item,
+  Label,
+  ButtonItem,
+  ButtonOptions,
+  RequiredRule,
+  CustomRule,
+} from 'devextreme-react/form';
+import LoadIndicator from 'devextreme-react/load-indicator';
+import notify from 'devextreme/ui/notify';
+<%=#isTypeScript%>import { ValidationCallbackData } from 'devextreme-react/common';<%=/isTypeScript%>
+import { changePassword } from '../../api/auth';
+
+export default function ChangePasswordForm() {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const formData = useRef({ password: '' });
+  const { recoveryCode } = useParams();
+
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
+    e.preventDefault();
+    const { password } = formData.current;
+    setLoading(true);
+
+    const result = await changePassword(password, recoveryCode);
+    setLoading(false);
+
+    if (result.isOk) {
+      navigate('/login');
+    } else {
+      notify(result.message, 'error', 2000);
+    }
+  }, [navigate, recoveryCode]);
+
+  const confirmPassword = useCallback(
+    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
+    []
+  );
+
+  return (
+    <form onSubmit={onSubmit}>
+      <Form formData={formData.current} disabled={loading}>
+        <Item
+          dataField={'password'}
+          editorType={'dxTextBox'}
+          editorOptions={passwordEditorOptions}
+        >
+          <RequiredRule message="Password is required" />
+          <Label visible={false} />
+        </Item>
+        <Item
+          dataField={'confirmedPassword'}
+          editorType={'dxTextBox'}
+          editorOptions={confirmedPasswordEditorOptions}
+        >
+          <RequiredRule message="Password is required" />
+          <CustomRule
+            message={'Passwords do not match'}
+            validationCallback={confirmPassword}
+          />
+          <Label visible={false} />
+        </Item>
+        <ButtonItem>
+          <ButtonOptions
+            width={'100%'}
+            type={'default'}
+            useSubmitBehavior={true}
+          >
+            <span className="dx-button-text">
+              {
+                loading
+                  ? <LoadIndicator width={'24px'} height={'24px'} visible={true} />
+                  : 'Continue'
+              }
+            </span>
+          </ButtonOptions>
+        </ButtonItem>
+      </Form>
+    </form>
+  );
+}
+
+const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
+const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' };

package/src/templates/react/application/src/components/create-account-form/CreateAccountForm.scss

@@ -3,17 +3,17 @@
 .create-account-form {
   .policy-info {
     margin: 10px 0;
-    color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+    color: var(--base-text-color-alpha-7);
     font-size: 14px;
     font-style: normal;
 
     a {
-      color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+      color: var(--base-text-color-alpha-7);
     }
   }
 
   .login-link {
-    color: $base-accent;
+    color: var(--base-accent);
     font-size: 16px;
     text-align: center;
   }

package/src/templates/react/application/src/components/create-account-form/CreateAccountForm.tsx

@@ -1,107 +1,107 @@
-import React, { useState, useRef, useCallback } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import Form, {
-  Item,
-  Label,
-  ButtonItem,
-  ButtonOptions,
-  RequiredRule,
-  CustomRule,
-  EmailRule
-} from 'devextreme-react/form';
-import notify from 'devextreme/ui/notify';
-import LoadIndicator from 'devextreme-react/load-indicator';
-import { createAccount } from '../../api/auth';
-<%=#isTypeScript%>import { ValidationCallbackData } from 'devextreme-react/common';<%=/isTypeScript%>
-import './CreateAccountForm.scss';
-
-export default function CreateAccountForm() {
-  const navigate = useNavigate();
-  const [loading, setLoading] = useState(false);
-  const formData = useRef({ email: '', password: '' });
-
-  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
-    e.preventDefault();
-    const { email, password } = formData.current;
-    setLoading(true);
-
-    const result = await createAccount(email, password);
-    setLoading(false);
-
-    if (result.isOk) {
-      navigate('/login');
-    } else {
-      notify(result.message, 'error', 2000);
-    }
-  }, [navigate]);
-
-  const confirmPassword = useCallback(
-    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
-    []
-  );
-
-  return (
-    <form className={'create-account-form'} onSubmit={onSubmit}>
-      <Form formData={formData.current} disabled={loading}>
-        <Item
-          dataField={'email'}
-          editorType={'dxTextBox'}
-          editorOptions={emailEditorOptions}
-        >
-          <RequiredRule message="Email is required" />
-          <EmailRule message="Email is invalid" />
-          <Label visible={false} />
-        </Item>
-        <Item
-          dataField={'password'}
-          editorType={'dxTextBox'}
-          editorOptions={passwordEditorOptions}
-        >
-          <RequiredRule message="Password is required" />
-          <Label visible={false} />
-        </Item>
-        <Item
-          dataField={'confirmedPassword'}
-          editorType={'dxTextBox'}
-          editorOptions={confirmedPasswordEditorOptions}
-        >
-          <RequiredRule message="Password is required" />
-          <CustomRule
-            message={'Passwords do not match'}
-            validationCallback={confirmPassword}
-          />
-          <Label visible={false} />
-        </Item>
-        <Item>
-          <div className='policy-info'>
-            By creating an account, you agree to the <Link to="#">Terms of Service</Link> and <Link to="#">Privacy Policy</Link>
-          </div>
-        </Item>
-        <ButtonItem>
-          <ButtonOptions
-            width={'100%'}
-            type={'default'}
-            useSubmitBehavior={true}
-          >
-            <span className="dx-button-text">
-              {
-                loading
-                  ? <LoadIndicator width={'24px'} height={'24px'} visible={true} />
-                  : 'Create a new account'
-              }
-            </span>
-          </ButtonOptions>
-        </ButtonItem>
-        <Item>
-          <div className={'login-link'}>
-            Have an account? <Link to={'/login'}>Sign In</Link>
-          </div>
-        </Item>
-      </Form>
-    </form>
-  );
-}
-
-const emailEditorOptions = { stylingMode: 'filled', placeholder: 'Email', mode: 'email' };
-const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
-const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' };
+import React, { useState, useRef, useCallback } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import Form, {
+  Item,
+  Label,
+  ButtonItem,
+  ButtonOptions,
+  RequiredRule,
+  CustomRule,
+  EmailRule
+} from 'devextreme-react/form';
+import notify from 'devextreme/ui/notify';
+import LoadIndicator from 'devextreme-react/load-indicator';
+import { createAccount } from '../../api/auth';
+<%=#isTypeScript%>import { ValidationCallbackData } from 'devextreme-react/common';<%=/isTypeScript%>
+import './CreateAccountForm.scss';
+
+export default function CreateAccountForm() {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const formData = useRef({ email: '', password: '' });
+
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
+    e.preventDefault();
+    const { email, password } = formData.current;
+    setLoading(true);
+
+    const result = await createAccount(email, password);
+    setLoading(false);
+
+    if (result.isOk) {
+      navigate('/login');
+    } else {
+      notify(result.message, 'error', 2000);
+    }
+  }, [navigate]);
+
+  const confirmPassword = useCallback(
+    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
+    []
+  );
+
+  return (
+    <form className={'create-account-form'} onSubmit={onSubmit}>
+      <Form formData={formData.current} disabled={loading}>
+        <Item
+          dataField={'email'}
+          editorType={'dxTextBox'}
+          editorOptions={emailEditorOptions}
+        >
+          <RequiredRule message="Email is required" />
+          <EmailRule message="Email is invalid" />
+          <Label visible={false} />
+        </Item>
+        <Item
+          dataField={'password'}
+          editorType={'dxTextBox'}
+          editorOptions={passwordEditorOptions}
+        >
+          <RequiredRule message="Password is required" />
+          <Label visible={false} />
+        </Item>
+        <Item
+          dataField={'confirmedPassword'}
+          editorType={'dxTextBox'}
+          editorOptions={confirmedPasswordEditorOptions}
+        >
+          <RequiredRule message="Password is required" />
+          <CustomRule
+            message={'Passwords do not match'}
+            validationCallback={confirmPassword}
+          />
+          <Label visible={false} />
+        </Item>
+        <Item>
+          <div className='policy-info'>
+            By creating an account, you agree to the <Link to="#">Terms of Service</Link> and <Link to="#">Privacy Policy</Link>
+          </div>
+        </Item>
+        <ButtonItem>
+          <ButtonOptions
+            width={'100%'}
+            type={'default'}
+            useSubmitBehavior={true}
+          >
+            <span className="dx-button-text">
+              {
+                loading
+                  ? <LoadIndicator width={'24px'} height={'24px'} visible={true} />
+                  : 'Create a new account'
+              }
+            </span>
+          </ButtonOptions>
+        </ButtonItem>
+        <Item>
+          <div className={'login-link'}>
+            Have an account? <Link to={'/login'}>Sign In</Link>
+          </div>
+        </Item>
+      </Form>
+    </form>
+  );
+}
+
+const emailEditorOptions = { stylingMode: 'filled', placeholder: 'Email', mode: 'email' };
+const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
+const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' };

package/src/templates/react/application/src/components/footer/Footer.scss

@@ -1,9 +1,12 @@
-@import "../../themes/generated/variables.base.scss";
-
 .footer {
   display: block;
-  color: rgba($base-text-color, alpha($base-text-color) * 0.7);
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  color: var(--base-text-color-alpha-7);
+  border-top: 1px solid var(--footer-border-color);
   padding-top: 20px;
   padding-bottom: 24px;
+  margin: 0 40px;
+
+  .screen-x-small & {
+    margin: 0 20px;
+  }
 }

package/src/templates/react/application/src/components/header/Header.scss

@@ -1,14 +1,13 @@
-@import "../../themes/generated/variables.base.scss";
 @import "../../dx-styles.scss";
 
+header {
+  background-color: var(--base-bg);
+}
+
 .header-component {
   flex: 0 0 auto;
   z-index: 1;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-
-  .dx-toolbar .dx-toolbar-item.menu-button>.dx-toolbar-item-content .dx-icon {
-    color: $base-accent;
-  }
 }
 
 .dx-toolbar.header-toolbar .dx-toolbar-items-container .dx-toolbar-after {