devextreme-cli 1.10.1 → 1.11.0-beta.0

package/src/applications/application.vue.js

@@ -9,7 +9,7 @@ const insertItemToArray = require('../utility/file-content').insertItemToArray;
 const moduleUtils = require('../utility/module');
 const stringUtils = require('../utility/string');
 const latestVersions = require('../utility/latest-versions');
-const { toolingVersionOptionName, extractToolingVersion } = require('../utility/extract-tooling-version');
+const { depsVersionTagOptionName, extractDepsVersionTag } = require('../utility/extract-deps-version-tag');
 const defaultStyles = [
     'devextreme/dist/css/dx.light.css'
 ];
@@ -37,25 +37,42 @@ const preparePackageJsonForTemplate = (appPath, appName) => {
     packageJsonUtils.updateName(appPath, appName);
 };
 
-async function createVueApp(name, templateOptions) {
-    const toolingVersion = extractToolingVersion(templateOptions);
-    const argList = ['-p', `@vue/cli${toolingVersion}`, 'vue', 'create', name, '--registry', 'https://registry.npmjs.org/', '-p "Default (Vue 3)"'];
+async function createVueApp(name, depsVersionTag) {
+    const argList = ['-p', `@vue/cli@${depsVersionTag}`, 'vue', 'create', name, '--registry', 'https://registry.npmjs.org/', '-p "Default (Vue 3)"'];
 
     return runCommand('npx', argList);
 }
 
+const bumpVue = (appPath, versionTag) => {
+    const dependencies = [
+        { name: 'vue', version: versionTag },
+        { name: 'vue-router', version: versionTag },
+        { name: '@vue/cli-plugin-babel', version: versionTag, dev: true },
+        { name: '@vue/cli-plugin-eslint', version: versionTag, dev: true },
+        { name: '@vue/cli-service', version: versionTag, dev: true },
+    ];
+
+    packageJsonUtils.addDependencies(appPath, dependencies);
+};
+
 const create = async(appName, options) => {
     const layout = await getLayoutInfo(options.layout);
+    const depsVersionTag = extractDepsVersionTag(options);
 
     const templateOptions = {
         project: stringUtils.humanize(appName),
         layout: layout,
-        [toolingVersionOptionName]: options[toolingVersionOptionName]
+        [depsVersionTagOptionName]: options[depsVersionTagOptionName]
     };
 
-    await createVueApp(appName, templateOptions);
+    await createVueApp(appName, depsVersionTag);
 
     const appPath = path.join(process.cwd(), appName);
+
+    if(depsVersionTag) {
+        bumpVue(appPath, depsVersionTag);
+    }
+
     modifyIndexHtml(appPath, templateOptions.project);
     addTemplate(appPath, appName, templateOptions);
 };

package/src/templates/nextjs/application/.env

@@ -0,0 +1 @@
+SESSION_SECRET=<your_secret_key_goes_here>

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

@@ -0,0 +1,63 @@
+{
+  "applicationEngine": "nextjs",
+  "build": {
+      "commands": [
+          {
+              "command": "build-theme",
+              "options": {
+                  "inputFile": "src/themes/metadata.base.json",
+                  "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": {
+                  "inputFile": "src/themes/metadata.additional.json",
+                  "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": {
+                  "inputFile": "src/themes/metadata.base.json",
+                  "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/nextjs/application/next.config.mjs

@@ -0,0 +1,32 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/pages/home',
+        permanent: true,
+      },
+      {
+        source: '/login',
+        destination: '/auth/login',
+        permanent: true,
+      },
+      {
+        source: '/reset-password',
+        destination: '/auth/reset-password',
+        permanent: true,
+      },
+      {
+        source: '/create-account',
+        destination: '/auth/create-account',
+        permanent: true,
+      },
+    ]
+  },
+  images: {
+    remotePatterns: [new URL('https://js.devexpress.com/**')]
+  },
+}
+
+export default nextConfig;

package/src/templates/nextjs/application/src/app/actions/auth.ts

@@ -0,0 +1,76 @@
+'use server'
+import { redirect } from 'next/navigation'
+import defaultUser from '@/utils/default-user';
+import { createSession, deleteSession } from '@/app/lib/session'
+
+export async function signUp(email<%=#isTypeScript%>: string<%=/isTypeScript%>, password<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  try {
+    // 1. Check if the user exists in the database and return isOk: false if so;
+    // 2. Otherwise, add the user to the database.
+    console.log(email, password);
+
+    return {
+      isOk: true,
+    }
+  } catch {
+    return {
+      isOk: false,
+      message: 'Unable to create an account',
+    }
+  }
+}
+
+export async function signIn(email<%=#isTypeScript%>: string<%=/isTypeScript%>, password<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  try {
+    // Verify that a user exists
+    console.log(email, password);
+
+    await createSession(defaultUser.id);
+
+    return {
+      isOk: true,
+    }
+  } catch {
+    return {
+      isOk: false,
+      message: 'Unable to sign in',
+    }
+  }
+}
+
+export async function signOut() {
+  await deleteSession();
+  redirect('/login');
+}
+
+export async function changePassword(email<%=#isTypeScript%>: string<%=/isTypeScript%>, recoveryCode<%=#isTypeScript%>?: string<%=/isTypeScript%>) {
+  try {
+    // Verify the recovery code
+    console.log(email, recoveryCode);
+
+    return {
+      isOk: true,
+    }
+  } catch {
+    return {
+      isOk: false,
+      message: 'Unable to change the password',
+    }
+  }
+}
+
+export async function resetPassword(email<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  try {
+    // Reset password
+    console.log(email);
+
+    return {
+      isOk: true,
+    }
+  } catch {
+    return {
+      isOk: false,
+      message: 'Unable to reset password',
+    }
+  }
+}

package/src/templates/nextjs/application/src/app/auth/[type]/page.tsx

@@ -0,0 +1,49 @@
+'use client'
+import { use } from 'react';
+import { notFound } from 'next/navigation';
+import { SingleCard } from '@/layouts';
+import {
+  LoginForm,
+  CreateAccountForm,
+  ResetPasswordForm,
+  ChangePasswordForm,
+} from '@/components';
+
+const formText<%=#isTypeScript%>: Record<string, Record<string, string>><%=/isTypeScript%> = {
+  'login': {
+    title: 'Sign In'
+  },
+  'create-account': {
+    title: 'Sign Up'
+  },
+  'reset-password': {
+    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.'
+  },
+  'change-password': {
+    title: 'Change Password',
+  }
+}
+
+function AuthForm({name}<%=#isTypeScript%>: {name: string}<%=/isTypeScript%>) {
+  switch (name) {
+    case 'login': return <LoginForm />;
+    case 'create-account': return <CreateAccountForm />;
+    case 'reset-password': return <ResetPasswordForm />;
+    case 'change-password': return <ChangePasswordForm />;
+  }
+}
+
+export default function AuthPage({ params }<%=#isTypeScript%>: {params: Promise<{type: string}>}<%=/isTypeScript%>) {
+  const { type } = use(params)
+
+  if (!formText[type]) {
+    notFound();
+  }
+
+  const { title, description } = formText[type];
+
+  return <SingleCard title={title} description={description}>
+    <AuthForm name={type}/>
+  </SingleCard>
+}

package/src/templates/nextjs/application/src/app/layout.tsx

@@ -0,0 +1,17 @@
+<%=#isTypeScript%>import type { PropsWithChildren } from 'react';
+<%=/isTypeScript%>import { ThemeProvider } from "@/theme";
+
+export default function RootLayout({ children }<%=#isTypeScript%>: PropsWithChildren<object><%=/isTypeScript%>) {
+  return (
+    <html lang="en">
+    <title>NextJs Dx App</title>
+      <body className="dx-viewport">
+        <ThemeProvider>
+          <div className='app'>
+            {children}
+          </div>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/src/templates/nextjs/application/src/app/lib/session.ts

@@ -0,0 +1,47 @@
+import 'server-only';
+import { SignJWT, jwtVerify } from 'jose';
+import { cookies } from 'next/headers';
+<%=#isTypeScript%>import type { SessionPayload } from '@/types';
+<%=/isTypeScript%>
+const secretKey = process.env.SESSION_SECRET;
+const encoder = new TextEncoder();
+const encodedKey = encoder.encode(secretKey);
+
+export async function encrypt(payload<%=#isTypeScript%>: SessionPayload<%=/isTypeScript%>) {
+  return new SignJWT(payload)
+    .setProtectedHeader({ alg: 'HS256' })
+    .setIssuedAt()
+    .setExpirationTime('7d')
+    .sign(encodedKey);
+}
+
+export async function decrypt(session<%=#isTypeScript%>: string | undefined = ''<%=/isTypeScript%>) {
+  try {
+    const { payload } = await jwtVerify(session, encodedKey, {
+      algorithms: ['HS256'],
+    });
+
+    return payload;
+  } catch {
+    console.log('Failed to verify session');
+  }
+}
+
+export async function createSession(userId<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  const expiresAt = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
+  const session = await encrypt({ userId, expiresAt });
+  const cookieStore = await cookies();
+
+  cookieStore.set('session', session, {
+    httpOnly: true,
+    secure: true,
+    expires: expiresAt,
+    sameSite: 'lax',
+    path: '/',
+  });
+}
+
+export async function deleteSession() {
+  const cookieStore = await cookies();
+  cookieStore.delete('session');
+}

package/src/templates/nextjs/application/src/app/pages/layout.tsx

@@ -0,0 +1,18 @@
+<%=#isTypeScript%>import type { PropsWithChildren } from 'react';
+<%=/isTypeScript%>import appInfo from '@/app-info';
+import { Footer } from '@/components';
+import { <%=layout%> as SideNavBarLayout } from '@/layouts';
+
+export default function Content({children}<%=#isTypeScript%>: PropsWithChildren<object><%=/isTypeScript%>) {
+  return (
+    <SideNavBarLayout title={appInfo.title}>
+      {children}
+      <Footer>
+        Copyright © 2011-{new Date().getFullYear()} {appInfo.title} Inc.
+        <br />
+        All trademarks or registered trademarks are property of their
+        respective owners.
+      </Footer>
+    </SideNavBarLayout>
+  );
+}

package/src/templates/nextjs/application/src/app-info.tsx

@@ -0,0 +1,5 @@
+const appInfo = {
+    title: '<%=project%>'
+};
+export default appInfo;
+

package/src/templates/nextjs/application/src/app-navigation.tsx

@@ -0,0 +1,21 @@
+export const navigation = [<%=^empty%>
+  {
+    text: 'Home',
+    path: '/pages/home',
+    icon: 'home'
+  },
+  {
+    text: 'Examples',
+    icon: 'folder',
+    items: [
+      {
+        text: 'Profile',
+        path: '/pages/profile'
+      },
+      {
+        text: 'Tasks',
+        path: '/pages/tasks'
+      }
+    ]
+  }
+  <%=/empty%>];

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

@@ -0,0 +1,86 @@
+'use client'
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+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 '@/app/actions/auth';
+
+export default function ChangePasswordForm() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const formData = useRef({ password: '' });
+
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
+  e.preventDefault();
+  const { password } = formData.current;
+  setLoading(true);
+
+  const result = await changePassword(password);
+  setLoading(false);
+
+  if (result.isOk) {
+    router.push('/login');
+  } else {
+    notify(result.message, 'error', 2000);
+  }
+}, [router]);
+
+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/nextjs/application/src/components/create-account-form/CreateAccountForm.scss

@@ -0,0 +1,19 @@
+.create-account-form {
+  .policy-info {
+    color: var(--base-text-color-alpha-7);
+    font-size: 12px;
+    font-style: normal;
+
+    a {
+      color: var(--base-text-color-alpha-7);
+    }
+  }
+
+  .login-link {
+    color: var(--base-accent);
+    font-size: 12px;
+    text-align: center;
+    padding: 6px 0 32px 0;
+    border-bottom: 1px solid var(--border-color);
+  }
+}

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

@@ -0,0 +1,107 @@
+'use client'
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+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 { signUp } from '@/app/actions/auth';
+<%=#isTypeScript%>import { ValidationCallbackData } from 'devextreme-react/common';<%=/isTypeScript%>
+import './CreateAccountForm.scss';
+
+export default function CreateAccountForm() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const formData = useRef({ email: '', password: '' });
+
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
+    e.preventDefault();
+    const { email, password } = formData.current;
+    setLoading(true);
+
+    const result = await signUp(email, password);
+    setLoading(false);
+
+    if (result.isOk) {
+      router.push('/login');
+    } else {
+      notify(result.message, 'error', 2000);
+    }
+  }, [router]);
+
+  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 href="#">Terms of Service</Link> and <Link href="#">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>
+      </Form>
+      <div className={'login-link'}>
+        Have an account? <Link href={'/login'}>Sign In</Link>
+      </div>
+    </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/nextjs/application/src/components/footer/Footer.scss

@@ -0,0 +1,12 @@
+.footer {
+  display: block;
+  color: var(--base-text-color-alpha-7);
+  border-top: 1px solid var(--footer-border-color);
+  padding-top: 20px;
+  padding-bottom: 24px;
+  margin: 0 40px;
+
+  @media (max-width: 599.99px) {
+    margin: 0 20px;
+  }
+}

package/src/templates/nextjs/application/src/components/footer/Footer.tsx

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

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

@@ -0,0 +1,40 @@
+@use "../../dx-styles.scss" as *;
+
+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.header-toolbar .dx-toolbar-items-container .dx-toolbar-after {
+  padding: 0 40px;
+
+  @media (max-width: 599.99px) {
+    padding: 0 20px;
+  }
+}
+
+.dx-toolbar .dx-toolbar-item.dx-toolbar-button.menu-button {
+  width: $side-panel-min-width;
+  text-align: center;
+  padding: 0;
+}
+
+.header-title .dx-item-content {
+  padding: 0;
+  margin: 0;
+}
+
+.dx-theme-generic {
+  .header-toolbar {
+    padding: 10px 0;
+  }
+
+  .user-button>.dx-button-content {
+    padding: 3px;
+  }
+}