devextreme-cli 1.10.1 → 1.11.0-beta.0

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

@@ -0,0 +1,133 @@
+'use client'
+import Button from 'devextreme-react/button';
+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 { useRouter } from 'next/navigation';
+import { Header, SideNavigationMenu } from '@/components';
+import './side-nav-inner-toolbar.scss';
+import { useScreenSize } from '@/utils/media-query';
+import { Template } from 'devextreme-react/core/template';
+<%=#isTypeScript%>import type { TreeViewTypes } from 'devextreme-react/tree-view';
+import type { SideNavToolbarProps } from '@/types';
+import type { ButtonTypes } from 'devextreme-react/button';
+<%=/isTypeScript%>
+export default function SideNavInnerToolbar({ title, children }<%=#isTypeScript%>: React.PropsWithChildren<SideNavToolbarProps><%=/isTypeScript%>) {
+  const scrollViewRef = useRef<%=#isTypeScript%><ScrollViewRef><%=/isTypeScript%>(null);
+  const router = useRouter();
+  const { isXSmall, isLarge } = useScreenSize();
+  const [menuStatus, setMenuStatus] = useState(
+    isLarge ? MenuStatus.Opened : MenuStatus.Closed
+  );
+
+  const toggleMenu = useCallback(({ event }<%=#isTypeScript%>: ButtonTypes.ClickEvent<%=/isTypeScript%>) => {
+    setMenuStatus(
+      prevMenuStatus => prevMenuStatus === MenuStatus.Closed
+        ? MenuStatus.Opened
+        : MenuStatus.Closed
+    );
+    event<%=#isTypeScript%>?<%=/isTypeScript%>.stopPropagation();
+  }, []);
+
+  const temporaryOpenMenu = useCallback(() => {
+    setMenuStatus(
+      prevMenuStatus => prevMenuStatus === MenuStatus.Closed
+        ? MenuStatus.TemporaryOpened
+        : prevMenuStatus
+    );
+  }, []);
+
+  const onOutsideClick = useCallback(() => {
+    setMenuStatus(
+      prevMenuStatus => prevMenuStatus !== MenuStatus.Closed && !isLarge
+        ? MenuStatus.Closed
+        : prevMenuStatus
+    );
+    return menuStatus === MenuStatus.Closed ? true : false;
+  }, [isLarge, menuStatus]);
+
+  const onNavigationChanged = useCallback(({ itemData, event, node }<%=#isTypeScript%>: TreeViewTypes.ItemClickEvent<%=/isTypeScript%>) => {
+    if (menuStatus === MenuStatus.Closed || !itemData<%=#isTypeScript%>?<%=/isTypeScript%>.path || node<%=#isTypeScript%>?<%=/isTypeScript%>.selected) {
+      event<%=#isTypeScript%>?<%=/isTypeScript%>.preventDefault();
+      return;
+    }
+
+    router.push(itemData.path);
+    scrollViewRef.current<%=#isTypeScript%>?<%=/isTypeScript%>.instance().scrollTo(0);
+
+    if (!isLarge || menuStatus === MenuStatus.TemporaryOpened) {
+      setMenuStatus(MenuStatus.Closed);
+      event<%=#isTypeScript%>?<%=/isTypeScript%>.stopPropagation();
+    }
+  }, [router, menuStatus, isLarge]);
+
+  return (
+    <div className={'side-nav-inner-toolbar'}>
+      <Drawer
+        className={'drawer'}
+        position={'before'}
+        closeOnOutsideClick={onOutsideClick}
+        openedStateMode={isLarge ? 'shrink' : 'overlap'}
+        revealMode={isXSmall ? 'slide' : 'expand'}
+        minSize={isXSmall ? 0 : 60}
+        maxSize={250}
+        shading={isLarge ? false : true}
+        opened={menuStatus === MenuStatus.Closed ? false : true}
+        template={'menu'}
+      >
+        <div className={'container'}>
+          <Header
+            menuToggleEnabled={isXSmall}
+            toggleMenu={toggleMenu}
+          />
+          <ScrollView ref={scrollViewRef} className={'layout-body with-footer'}>
+            <div className={'content'}>
+              {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) => {
+                if (<%=#isTypeScript%>React.isValidElement(item) && <%=/isTypeScript%>item.type === "footer") {
+                  return item;
+                }
+                return null;
+              })}
+            </div>
+          </ScrollView>
+        </div>
+        <Template name={'menu'}>
+          <SideNavigationMenu
+            compactMode={menuStatus === MenuStatus.Closed}
+            selectedItemChanged={onNavigationChanged}
+            openMenu={temporaryOpenMenu}
+          >
+            <Toolbar id={'navigation-header'}>
+              {
+                !isXSmall &&
+                <Item
+                  location={'before'}
+                  cssClass={'menu-button'}
+                >
+                  <Button icon="menu" stylingMode="text" onClick={toggleMenu} />
+                </Item>
+              }
+              <Item location={'before'} cssClass={'header-title'} text={title} />
+            </Toolbar>
+          </SideNavigationMenu>
+        </Template>
+      </Drawer>
+    </div>
+  );
+}
+
+const MenuStatus = {
+  Closed: 1,
+  Opened: 2,
+  TemporaryOpened: 3
+};
+

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

@@ -0,0 +1,10 @@
+.side-nav-outer-toolbar {
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  .header-component {
+    z-index: 1505;
+  }
+}

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

@@ -0,0 +1,119 @@
+'use client'
+import Drawer from 'devextreme-react/drawer';
+import { ScrollView<%=#isTypeScript%>, ScrollViewRef<%=/isTypeScript%> } from 'devextreme-react/scroll-view';
+import React, { useState, useCallback, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { Header, SideNavigationMenu } from '@/components';
+import './side-nav-outer-toolbar.scss';
+import { useScreenSize } from '@/utils/media-query';
+import { Template } from 'devextreme-react/core/template';
+<%=#isTypeScript%>import type { ButtonTypes } from 'devextreme-react/button';
+import type { TreeViewTypes } from 'devextreme-react/tree-view';
+import type { SideNavToolbarProps } from '@/types';
+<%=/isTypeScript%>
+export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%>: React.PropsWithChildren<SideNavToolbarProps><%=/isTypeScript%>) {
+  const scrollViewRef = useRef<%=#isTypeScript%><ScrollViewRef><%=/isTypeScript%>(null);
+const router = useRouter();
+  const { isXSmall, isLarge } = useScreenSize();
+  const [menuStatus, setMenuStatus] = useState(
+    isLarge ? MenuStatus.Opened : MenuStatus.Closed
+  );
+
+  const toggleMenu = useCallback(({ event }<%=#isTypeScript%>: ButtonTypes.ClickEvent<%=/isTypeScript%>) => {
+    setMenuStatus(
+      prevMenuStatus => prevMenuStatus === MenuStatus.Closed
+        ? MenuStatus.Opened
+        : MenuStatus.Closed
+    );
+    event<%=#isTypeScript%>?<%=/isTypeScript%>.stopPropagation();
+  }, []);
+
+  const temporaryOpenMenu = useCallback(() => {
+    setMenuStatus(
+      prevMenuStatus => prevMenuStatus === MenuStatus.Closed
+        ? MenuStatus.TemporaryOpened
+        : prevMenuStatus
+    );
+  }, []);
+
+  const onOutsideClick = useCallback(() => {
+    setMenuStatus(
+      prevMenuStatus => prevMenuStatus !== MenuStatus.Closed && !isLarge
+        ? MenuStatus.Closed
+        : prevMenuStatus
+    );
+    return menuStatus === MenuStatus.Closed ? true : false;
+  }, [isLarge, menuStatus]);
+
+  const onNavigationChanged = useCallback(({ itemData, event, node }<%=#isTypeScript%>: TreeViewTypes.ItemClickEvent<%=/isTypeScript%>) => {
+    if (menuStatus === MenuStatus.Closed || !itemData<%=#isTypeScript%>?<%=/isTypeScript%>.path || node<%=#isTypeScript%>?<%=/isTypeScript%>.selected) {
+      event<%=#isTypeScript%>?<%=/isTypeScript%>.preventDefault();
+      return;
+    }
+
+router.push(itemData.path);
+    scrollViewRef.current<%=#isTypeScript%>?<%=/isTypeScript%>.instance().scrollTo(0);
+
+    if (!isLarge || menuStatus === MenuStatus.TemporaryOpened) {
+      setMenuStatus(MenuStatus.Closed);
+      event<%=#isTypeScript%>?<%=/isTypeScript%>.stopPropagation();
+    }
+  }, [router, menuStatus, isLarge]);
+
+  return (
+    <div className={'side-nav-outer-toolbar'}>
+      <Header
+        menuToggleEnabled
+        toggleMenu={toggleMenu}
+        title={title}
+      />
+      <Drawer
+        className={'drawer layout-body'}
+        position={'before'}
+        closeOnOutsideClick={onOutsideClick}
+        openedStateMode={isLarge ? 'shrink' : 'overlap'}
+        revealMode={isXSmall ? 'slide' : 'expand'}
+        minSize={isXSmall ? 0 : 60}
+        maxSize={250}
+        shading={isLarge ? false : true}
+        opened={menuStatus === MenuStatus.Closed ? false : true}
+        template={'menu'}
+      >
+        <div className={'container'}>
+          <ScrollView ref={scrollViewRef} className={'with-footer'}>
+            <div className={'content'}>
+              {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) => {
+                if (<%=#isTypeScript%>React.isValidElement(item) && <%=/isTypeScript%>item.type === "footer") {
+                  return item;
+                }
+                return null;
+              })}
+            </div>
+          </ScrollView>
+        </div>
+        <Template name={'menu'}>
+          <SideNavigationMenu
+            compactMode={menuStatus === MenuStatus.Closed}
+            selectedItemChanged={onNavigationChanged}
+            openMenu={temporaryOpenMenu}
+          >
+          </SideNavigationMenu>
+        </Template>
+      </Drawer>
+    </div>
+  );
+}
+
+const MenuStatus = {
+  Closed: 1,
+  Opened: 2,
+  TemporaryOpened: 3
+};

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

@@ -0,0 +1,42 @@
+.single-card {
+  width: 100%;
+  height: 100%;
+
+  .dx-card {
+    width: 360px;
+    margin: auto auto;
+    padding: 24px;
+    flex-grow: 0;
+    border-radius: 8px;
+
+    @media (max-width: 599.99px) {
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
+      box-shadow: none;
+      margin: 0;
+      border: 0;
+      flex-grow: 1;
+    }
+
+    .header {
+      margin: 24px 0;
+
+      .title {
+        color: var(--base-text-color);
+        font-weight: 500;
+        font-size: 24px;
+        text-align: center;
+        line-height: 24px;
+      }
+
+      .description {
+        color: var(--base-text-color-alpha-7);
+        line-height: 16px;
+        font-size: 12px;
+        margin-top: 32px;
+        text-align: center;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import ScrollView from 'devextreme-react/scroll-view';
+import './single-card.scss';
+<%=#isTypeScript%>import type { SingleCardProps } from '@/types';<%=/isTypeScript%>
+
+export default function SingleCard({ title, description, children }<%=#isTypeScript%>: React.PropsWithChildren<SingleCardProps><%=/isTypeScript%>) {
+  return (
+    <ScrollView height={'100%'} width={'100%'} className={'with-footer single-card'}>
+      <div className={'dx-card content'}>
+        <div className={'header'}>
+          <div className={'title'}>{title}</div>
+          <div className={'description'}>{description}</div>
+        </div>
+        {children}
+      </div>
+    </ScrollView>
+)}

package/src/templates/nextjs/application/src/middleware.ts

@@ -0,0 +1,46 @@
+import { NextResponse<%=#isTypeScript%>, type NextRequest<%=/isTypeScript%> } from 'next/server';
+import { cookies } from 'next/headers';
+import { decrypt, createSession } from '@/app/lib/session';
+import defaultUser from '@/utils/default-user';
+
+const isProtectedRoute = (path<%=#isTypeScript%>: string<%=/isTypeScript%>) => path.startsWith('/pages');
+
+async function _DEMO_logIn() {
+  await createSession(defaultUser.id);
+
+  return NextResponse.next();
+}
+
+<%=#isTypeScript%>// eslint-disable-next-line @typescript-eslint/no-unused-vars
+<%=/isTypeScript%>async function redirectUnauthorized(req<%=#isTypeScript%>: NextRequest<%=/isTypeScript%>) {
+  return await _DEMO_logIn();
+
+  // In production, you will need to redirect unauthorized users
+  // return NextResponse.redirect(new URL('/auth/login', req.nextUrl))
+}
+
+export default async function middleware(req<%=#isTypeScript%>: NextRequest<%=/isTypeScript%>) {
+  const path = req.nextUrl.pathname;
+
+  if (!isProtectedRoute(path)) {
+    return NextResponse.next();
+  }
+
+  const cookie = (await cookies()).get('session')?.value;
+
+  if (!cookie) {
+    return await redirectUnauthorized(req);
+  }
+
+  const session = await decrypt(cookie);
+
+  if (!session?.userId) {
+    return await redirectUnauthorized(req);
+  }
+ 
+  return NextResponse.next();
+}
+ 
+export const config = {
+  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
+}

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

@@ -0,0 +1,66 @@
+'use client'
+import React, { useCallback, useMemo, useState, useLayoutEffect } 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);
+
+  if (typeof window !== 'undefined') {
+    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';
+  }, []);
+
+  useLayoutEffect(() => {
+    if (typeof window !== 'undefined' && !document.body.className.includes(themeClassNamePrefix)) {
+      document.body.classList.add(themeClassNamePrefix + theme);
+    }
+  }, [theme]);
+
+  return useMemo(()=> ({ theme, switchTheme, isDark }), [theme, switchTheme, isDark]);
+}
+
+export const ThemeContext = React.createContext<%=#isTypeScript%><ReturnType<typeof useThemeContext> | null><%=/isTypeScript%>(null);
+
+export const ThemeProvider = ({ children }<%=#isTypeScript%>: React.PropsWithChildren<%=/isTypeScript%>) => {
+  const themeContext = useThemeContext();
+
+  return (
+    <ThemeContext.Provider value={themeContext}>
+      { children }
+    </ThemeContext.Provider>
+  );
+};

package/src/templates/nextjs/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/nextjs/application/src/themes/metadata.additional.json

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

package/src/templates/nextjs/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/nextjs/application/src/themes/metadata.base.json

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

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

@@ -0,0 +1,60 @@
+import { TreeViewTypes } from 'devextreme-react/tree-view';
+import { ButtonTypes } from 'devextreme-react/button';
+
+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 type SessionPayload = {
+    userId: string;
+    expiresAt: Date;
+}
+
+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/nextjs/application/src/utils/default-user.tsx

@@ -0,0 +1,7 @@
+const userInfo = {
+  id: '1',
+  email: 'sandra@example.com',
+  avatarUrl: 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png'
+}
+
+export default userInfo;

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

@@ -0,0 +1,56 @@
+'use client'
+import { useState, useCallback, useEffect } from 'react';
+<%=#isTypeScript%>import type { Handle } from '@/types';
+<%=/isTypeScript%>
+export const useScreenSize = () => {
+  const [screenSize, setScreenSize] = useState(getScreenSize());
+  const onSizeChanged = useCallback(() => {
+    setScreenSize(getScreenSize());
+  }, []);
+
+  useEffect(() => {
+    subscribe(onSizeChanged);
+
+    return () => {
+      unsubscribe(onSizeChanged);
+    };
+  }, [onSizeChanged]);
+
+  return screenSize;
+};
+
+let handlers<%=#isTypeScript%>: Handle[]<%=/isTypeScript%> = [];
+let xSmallMedia<%=#isTypeScript%>:  MediaQueryList<%=/isTypeScript%>;
+let smallMedia<%=#isTypeScript%>:  MediaQueryList<%=/isTypeScript%>;
+let mediumMedia<%=#isTypeScript%>:  MediaQueryList<%=/isTypeScript%>;
+let largeMedia<%=#isTypeScript%>:  MediaQueryList<%=/isTypeScript%>;
+
+if (typeof window !== 'undefined') {
+  xSmallMedia = window.matchMedia('(max-width: 599.99px)');
+  smallMedia = window.matchMedia('(min-width: 600px) and (max-width: 959.99px)');
+  mediumMedia = window.matchMedia('(min-width: 960px) and (max-width: 1279.99px)');
+  largeMedia = window.matchMedia('(min-width: 1280px)');
+
+  [xSmallMedia, smallMedia, mediumMedia, largeMedia].forEach(media => {
+    media.addListener((e) => {
+      if(e.matches) {
+        handlers.forEach(handler => handler())
+      }
+    });
+  });
+}
+
+const subscribe = (handler<%=#isTypeScript%>: Handle<%=/isTypeScript%>) => handlers.push(handler);
+
+const unsubscribe = (handler<%=#isTypeScript%>: Handle<%=/isTypeScript%>) => {
+  handlers = handlers.filter(item => item !== handler);
+};
+
+function getScreenSize() {
+  return {
+    isXSmall: xSmallMedia?.matches,
+    isSmall: smallMedia?.matches,
+    isMedium: mediumMedia?.matches,
+    isLarge: largeMedia?.matches
+  };
+}

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

@@ -0,0 +1,53 @@
+@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 {
+    @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;
+
+    --shadow-color-first: rgba(0, 0, 0, 0.06);
+    --shadow-color-second: rgba(0, 0, 0, 0.12);
+  }
+
+  .dx-swatch-additional {
+    @include theme-variables('variablesAdditional');
+  }
+
+  .dx-swatch-dark {
+    @include theme-variables('variablesBaseDark');;
+
+    --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);
+  }
+
+  .dx-swatch-additional-dark {
+    @include theme-variables('variablesAdditionalDark');
+  }
+}

package/src/templates/nextjs/page/page.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './<%=pageName%>.scss';
+
+export default function Page() {
+  return <React.Fragment>
+    <h2><%=title%></h2>
+    <div className={'content-block'}>
+      <div className={'dx-card responsive-paddings'}>
+        Put your content here
+      </div>
+    </div>
+  </React.Fragment>
+};