devextreme-cli 1.11.0-alpha.0 → 1.11.0-beta.0

package/src/templates/nextjs/application/src/components/reset-password-form/ResetPasswordForm.tsx

@@ -0,0 +1,78 @@
+'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,
+  EmailRule
+} from 'devextreme-react/form';
+import LoadIndicator from 'devextreme-react/load-indicator';
+import notify from 'devextreme/ui/notify';
+import { resetPassword } from '@/app/actions/auth';
+import './ResetPasswordForm.scss';
+
+const notificationText = 'We\'ve sent a link to reset your password. Check your inbox.';
+
+export default function ResetPasswordForm() {
+  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 } = formData.current;
+    setLoading(true);
+
+    const result = await resetPassword(email);
+    setLoading(false);
+
+    if (result.isOk) {
+      router.push('/login');
+      notify(notificationText, 'success', 2500);
+    } else {
+      notify(result.message, 'error', 2000);
+    }
+  }, [router]);
+
+  return (
+    <form className={'reset-password-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>
+        <ButtonItem>
+          <ButtonOptions
+            elementAttr={submitButtonAttributes}
+            width={'100%'}
+            type={'default'}
+            useSubmitBehavior={true}
+          >
+            <span className="dx-button-text">
+              {
+                loading
+                  ? <LoadIndicator width={'24px'} height={'24px'} visible={true} />
+                  : 'Reset my password'
+              }
+            </span>
+          </ButtonOptions>
+        </ButtonItem>
+      </Form>
+      <div className={'login-link'}>
+        Return to <Link href={'/login'}>Sign In</Link>
+      </div>
+    </form>
+  );
+}
+
+const emailEditorOptions = { stylingMode: 'filled', placeholder: 'Email', mode: 'email' };
+const submitButtonAttributes = { class: 'submit-button' };

package/src/templates/nextjs/application/src/components/side-navigation-menu/SideNavigationMenu.scss

@@ -0,0 +1,71 @@
+@use "../../dx-styles" as *;
+
+.dx-swatch-additional, .dx-swatch-additional-dark {
+  &.side-navigation-menu {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    height: 100%;
+    width: 250px !important;
+    background-color: var(--base-bg);
+
+    .menu-container {
+      min-height: 100%;
+      display: flex;
+      flex: 1;
+
+      .dx-treeview {
+        // ## Long text positioning
+        white-space: nowrap;
+        // ##
+
+        .dx-treeview-node-container:empty {
+          display: none;
+        }
+
+        // ## Icon width customization
+        .dx-treeview-item {
+          padding-left: 0;
+          border-radius: 0;
+          flex-direction: row-reverse;
+
+          .dx-icon {
+            width: $side-panel-min-width !important;
+            margin: 0 !important;
+          }
+        }
+
+        // ##
+
+        // ## Arrow customization
+        .dx-treeview-node {
+          padding: 0 0 !important;
+        }
+
+        .dx-treeview-toggle-item-visibility {
+          right: 10px;
+          left: auto;
+        }
+
+        .dx-rtl .dx-treeview-toggle-item-visibility {
+          left: 10px;
+          right: auto;
+        }
+        // ##
+
+        // ## Item levels customization
+        .dx-treeview-node {
+          &[aria-level="1"] {
+            font-weight: bold;
+          }
+
+          &[aria-level="2"] .dx-treeview-item-content {
+            font-weight: normal;
+            padding: 0 $side-panel-min-width;
+          }
+        }
+        // ##
+      }
+    }
+  }
+}

package/src/templates/nextjs/application/src/components/side-navigation-menu/SideNavigationMenu.tsx

@@ -0,0 +1,88 @@
+'use client'
+import React, { useEffect, useRef, useCallback, useMemo, useContext } from 'react';
+import { TreeView<%=#isTypeScript%>, TreeViewRef<%=/isTypeScript%> } from 'devextreme-react/tree-view';
+import * as events from 'devextreme-react/common/core/events';
+import { navigation } from '@/app-navigation';
+import { usePathname } from 'next/navigation';
+import { useScreenSize } from '@/utils/media-query';
+import './SideNavigationMenu.scss';
+<%=#isTypeScript%>import type { SideNavigationMenuProps } from '@/types';
+<%=/isTypeScript%>import { ThemeContext } from '@/theme';
+
+export default function SideNavigationMenu(props<%=#isTypeScript%>: React.PropsWithChildren<SideNavigationMenuProps><%=/isTypeScript%>) {
+  const {
+    children,
+    selectedItemChanged,
+    openMenu,
+    compactMode,
+    onMenuReady
+  } = props;
+
+  const theme = useContext(ThemeContext);
+  const { isLarge } = useScreenSize();
+  function normalizePath () {
+    return navigation.map((item) => (
+      { ...item, expanded: isLarge, path: item.path && !(/^\//.test(item.path)) ? `/${item.path}` : item.path }
+    ))
+  }
+
+  const items = useMemo(
+    normalizePath,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const pathname = usePathname();
+
+  const treeViewRef = useRef<%=#isTypeScript%><TreeViewRef><%=/isTypeScript%>(null);
+  const wrapperRef = useRef<%=#isTypeScript%><HTMLDivElement><%=/isTypeScript%>(null);
+  const getWrapperRef = useCallback((element<%=#isTypeScript%>: HTMLDivElement<%=/isTypeScript%>) => {
+    const prevElement = wrapperRef.current;
+    if (prevElement) {
+      events.off(prevElement, 'dxclick');
+    }
+
+    wrapperRef.current = element;
+    events.on(element, 'dxclick', (e<%=#isTypeScript%>: React.PointerEvent<%=/isTypeScript%>) => {
+      openMenu(e);
+    });
+  }, [openMenu]);
+
+  useEffect(() => {
+    const treeView = treeViewRef.current && treeViewRef.current.instance();
+    if (!treeView) {
+      return;
+    }
+
+    if (pathname !== undefined) {
+      treeView.selectItem(pathname);
+      treeView.expandItem(pathname);
+    }
+
+    if (compactMode) {
+      treeView.collapseAll();
+    }
+  }, [pathname, compactMode]);
+
+  return (
+    <div
+      className={`dx-swatch-additional${theme?.isDark() ? '-dark' : ''} side-navigation-menu`}
+      ref={getWrapperRef}
+    >
+      {children}
+      <div className={'menu-container'}>
+        <TreeView
+          ref={treeViewRef}
+          items={items}
+          keyExpr={'path'}
+          selectionMode={'single'}
+          focusStateEnabled={false}
+          expandEvent={'click'}
+          onItemClick={selectedItemChanged}
+          onContentReady={onMenuReady}
+          width={'100%'}
+        />
+      </div>
+    </div>
+  );
+}

package/src/templates/nextjs/application/src/components/theme-switcher/ThemeSwitcher.tsx

@@ -0,0 +1,21 @@
+'use client'
+import { useCallback, useContext } from 'react';
+import Button from 'devextreme-react/button';
+import { ThemeContext } from '@/theme';
+
+export const ThemeSwitcher = () => {
+  const themeContext = useContext(ThemeContext);
+
+  const onButtonClick = useCallback(() => {
+    themeContext?.switchTheme();
+  }, [themeContext]);
+
+  return <div>
+            <Button
+              className='theme-button'
+              stylingMode='text'
+              icon={`${themeContext?.theme === 'dark' ? 'sun' : 'moon'}`}
+              onClick={onButtonClick}
+            />
+        </div>;
+};

package/src/templates/nextjs/application/src/components/user-panel/UserPanel.scss

@@ -0,0 +1,51 @@
+.app .header-toolbar .user-panel .user-button.dx-dropdownbutton img.dx-icon {
+  height: 100%;
+  width: auto;
+
+  .dx-theme-generic & {
+    max-height: 32px;
+  }
+}
+
+.user-panel  {
+  display: flex;
+  flex-direction: column;
+
+  .user-button.dx-dropdownbutton {
+    margin-left: 5px;
+
+    img.dx-icon {
+      border-radius: 50%;
+      margin: 0;
+      width: auto;
+      aspect-ratio: 1 / 1;
+      box-sizing: border-box;
+      border: 1px solid var(--dx-color-border);
+      object-fit: cover;
+      object-position: top;
+      background: rgb(255, 255, 255);
+      background-clip: padding-box;
+    }
+
+
+
+    .dx-buttongroup {
+      vertical-align: middle;
+
+      .dx-button.dx-button-has-icon:not(.dx-button-has-text) {
+        .dx-button-content {
+          padding: 0;
+        }
+
+        &.dx-state-hover,
+        &.dx-state-focused {
+          background-color: transparent;
+
+          img.dx-icon {
+            border-color: var(--dx-color-primary);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+'use client'
+import { useMemo, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import DropDownButton from 'devextreme-react/drop-down-button';
+import List from 'devextreme-react/list';
+import { signOut } from '@/app/actions/auth';
+import './UserPanel.scss';
+<%=#isTypeScript%>import type { UserPanelProps } from '@/types';<%=/isTypeScript%>
+
+export default function UserPanel({ menuMode }<%=#isTypeScript%>: UserPanelProps<%=/isTypeScript%>) {
+  const router = useRouter();
+
+  const navigateToProfile = useCallback(() => {
+    router.push("/pages/profile");
+  }, [router]);
+
+  const menuItems = useMemo(() => ([
+    {
+      text: 'Profile',
+      icon: 'user',
+      onClick: navigateToProfile
+    },
+    {
+      text: 'Logout',
+      icon: 'runner',
+      onClick: signOut
+    }
+  ]), [navigateToProfile]);
+
+  const dropDownButtonAttributes = {
+    class: 'user-button'
+  };
+
+  const buttonDropDownOptions = {
+    width: '150px'
+  };
+
+  return (
+    <div className='user-panel'>
+      {menuMode === 'context' && (
+        <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 items={menuItems} />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,106 @@
+@use "variables.scss" as *;
+
+$side-panel-min-width: 60px;
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+  height: 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%;
+    min-width: 320px;
+  }
+
+  .content {
+    line-height: 1.5;
+    flex-grow: 1;
+    padding: 20px 40px;
+
+    h2 {
+      font-size: 32px;
+      margin: 0;
+      line-height: 40px;
+    }
+  }
+
+  @media (max-width: 599.99px) {
+    :not(.dx-card).content {
+      padding: 20px;
+    }
+  }
+
+  .container {
+    height: 100%;
+    flex-direction: column;
+    display: flex;
+  }
+
+  .layout-body {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .side-nav-outer-toolbar .dx-drawer {
+    height: calc(100% - 56px)
+  }
+
+  .content-block {
+    margin-top: 20px;
+  }
+
+  .responsive-paddings {
+    padding: 20px;
+
+    @media (min-width: 1280px) {
+      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-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/nextjs/application/src/index.css

@@ -0,0 +1,12 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

package/src/templates/nextjs/application/src/layouts/index.tsx

@@ -0,0 +1,3 @@
+export { default as SideNavOuterToolbar } from './side-nav-outer-toolbar/side-nav-outer-toolbar';
+export { default as SideNavInnerToolbar } from './side-nav-inner-toolbar/side-nav-inner-toolbar';
+export { default as SingleCard } from './single-card/single-card';

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

@@ -0,0 +1,17 @@
+.side-nav-inner-toolbar {
+  width: 100%;
+}
+
+#navigation-header {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  background-color: var(--base-bg);
+
+  @media (max-width: 599.99px) {
+    padding-left: 20px;
+  }
+
+  .dx-theme-generic & {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+}

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