devextreme-cli 1.11.0-alpha.0 → 1.11.0

package/src/templates/nextjs/application/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/src/templates/nextjs/application/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

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;
+  }
+}

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

@@ -0,0 +1,38 @@
+import Toolbar, { Item } from 'devextreme-react/toolbar';
+import Button from 'devextreme-react/button';
+import UserPanel from '@/components/user-panel/UserPanel';
+import './Header.scss';
+import { ThemeSwitcher } from '@/components/theme-switcher/ThemeSwitcher';
+<%=#isTypeScript%>import type { HeaderProps } from '@/types';<%=/isTypeScript%>
+
+const renderMenuItem = () => <UserPanel menuMode='list' />;
+
+export default function Header({ menuToggleEnabled, title, toggleMenu }<%=#isTypeScript%>: HeaderProps<%=/isTypeScript%>) {
+  return (
+    <header className={'header-component'}>
+      <Toolbar className={'header-toolbar'}>
+        <Item
+          visible={menuToggleEnabled}
+          location={'before'}
+          widget={'dxButton'}
+          cssClass={'menu-button'}
+        >
+          <Button icon="menu" stylingMode="text" onClick={toggleMenu} />
+        </Item>
+        <Item
+          location={'before'}
+          cssClass={'header-title'}
+          text={title}
+          visible={!!title}
+        />
+        <Item
+          location={'after'}
+        >
+          <ThemeSwitcher />
+        </Item>
+        <Item location='after' locateInMenu='auto' menuItemRender={renderMenuItem}>
+          <UserPanel menuMode='context' />
+        </Item>
+      </Toolbar>
+    </header>
+)}

package/src/templates/nextjs/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 ChangePasswordForm } from './change-password-form/ChangePasswordForm';
+export { default as CreateAccountForm } from './create-account-form/CreateAccountForm';
+export { default as SideNavigationMenu } from './side-navigation-menu/SideNavigationMenu';

package/src/templates/nextjs/application/src/components/login-form/LoginForm.scss

@@ -0,0 +1,12 @@
+.login-form {
+  .link {
+    text-align: center;
+    font-size: 12px;
+    font-style: normal;
+    margin: 6px 0 50px;
+  }
+
+  .form-text {
+    color: var(--base-text-color-alpha-7);
+  }
+}