@orbe-agro/client-core 5.6.123 → 5.6.125

package/lib/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.tsx

@@ -0,0 +1,244 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+import VerticalMenuContent from './VerticalMenuContent'
+import type { NavigationTree } from '@/@types/navigation'
+import {
+    NAV_ITEM_TYPE_COLLAPSE,
+    NAV_ITEM_TYPE_ITEM,
+} from '@/constants/navigation.constant'
+
+const mockNavigationTree: NavigationTree[] = [
+    {
+        key: 'inicio',
+        path: '/inicio',
+        title: 'Início',
+        translateKey: 'nav.inicio',
+        icon: '',
+        type: NAV_ITEM_TYPE_ITEM,
+        authority: ['/inicio'],
+        subMenu: [],
+    },
+    {
+        key: 'cadastros',
+        path: '',
+        title: 'Cadastros',
+        translateKey: 'nav.cadastros',
+        icon: '',
+        type: NAV_ITEM_TYPE_COLLAPSE,
+        authority: ['/cadastros'],
+        subMenu: [
+            {
+                key: 'clientes',
+                path: '/cadastros/clientes',
+                title: 'Clientes',
+                translateKey: 'nav.clientes',
+                icon: '',
+                type: NAV_ITEM_TYPE_ITEM,
+                authority: ['/cadastros/clientes'],
+                subMenu: [],
+            },
+            {
+                key: 'fornecedores',
+                path: '/cadastros/fornecedores',
+                title: 'Fornecedores',
+                translateKey: 'nav.fornecedores',
+                icon: '',
+                type: NAV_ITEM_TYPE_ITEM,
+                authority: ['/cadastros/fornecedores'],
+                subMenu: [],
+            },
+        ],
+    },
+    {
+        key: 'relatorios',
+        path: '/relatorios',
+        title: 'Relatórios',
+        translateKey: 'nav.relatorios',
+        icon: 'ChartBarIcon',
+        type: NAV_ITEM_TYPE_ITEM,
+        authority: ['/relatorios'],
+        subMenu: [],
+    },
+    {
+        key: 'configuracoes',
+        path: '',
+        title: 'Configurações',
+        translateKey: 'nav.configuracoes',
+        icon: '',
+        type: NAV_ITEM_TYPE_COLLAPSE,
+        authority: ['/configuracoes'],
+        subMenu: [
+            {
+                key: 'perfil',
+                path: '/configuracoes/perfil',
+                title: 'Perfil',
+                translateKey: 'nav.perfil',
+                icon: '',
+                type: NAV_ITEM_TYPE_ITEM,
+                authority: ['/configuracoes/perfil'],
+                subMenu: [],
+            },
+            {
+                key: 'integracoes',
+                path: '',
+                title: 'Integrações',
+                translateKey: 'nav.integracoes',
+                icon: '',
+                type: NAV_ITEM_TYPE_COLLAPSE,
+                authority: ['/configuracoes/integracoes'],
+                subMenu: [
+                    {
+                        key: 'webhooks',
+                        path: '/configuracoes/integracoes/webhooks',
+                        title: 'Webhooks',
+                        translateKey: 'nav.webhooks',
+                        icon: 'WebhookIcon',
+                        type: NAV_ITEM_TYPE_ITEM,
+                        authority: ['/configuracoes/integracoes/webhooks'],
+                        subMenu: [],
+                    },
+                    {
+                        key: 'lorem.ipsum',
+                        path: '/configuracoes/integracoes/lorem-ipsum',
+                        title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                        translateKey: 'nav.loremIpsum',
+                        icon: 'LoremIpsumIcon',
+                        type: NAV_ITEM_TYPE_ITEM,
+                        authority: ['/configuracoes/integracoes/lorem-ipsum'],
+                        subMenu: [],
+                    },
+                ],
+            },
+        ],
+    },
+]
+
+const allUserAuthority = [
+    '/inicio',
+    '/cadastros/clientes',
+    '/cadastros/fornecedores',
+    '/relatorios',
+    '/configuracoes/perfil',
+    '/configuracoes/integracoes/webhooks',
+    '/configuracoes/integracoes/lorem-ipsum',
+]
+
+const meta: Meta<typeof VerticalMenuContent> = {
+    title: '@ecme/Template/VerticalMenuContent',
+    component: VerticalMenuContent,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (
+            <BrowserRouter>
+                <Story />
+            </BrowserRouter>
+        ),
+    ],
+    argTypes: {
+        collapsed: {
+            control: 'boolean',
+        },
+        direction: {
+            control: { type: 'select' },
+            options: ['ltr', 'rtl'],
+        },
+        routeKey: {
+            control: 'text',
+        },
+    },
+}
+
+export default meta
+type TStory = StoryObj<typeof VerticalMenuContent>
+
+export const Default: TStory = {
+    args: {
+        collapsed: false,
+        routeKey: '/inicio',
+        navigationTree: mockNavigationTree,
+        userAuthority: allUserAuthority,
+        direction: 'ltr',
+        translationSetup: true,
+    },
+}
+
+export const Collapsed: TStory = {
+    args: {
+        collapsed: true,
+        routeKey: '/cadastros/clientes',
+        navigationTree: mockNavigationTree,
+        userAuthority: allUserAuthority,
+        direction: 'ltr',
+        translationSetup: true,
+    },
+}
+
+export const WithExpandedMenu: TStory = {
+    args: {
+        collapsed: false,
+        routeKey: '/configuracoes/integracoes/webhooks',
+        navigationTree: mockNavigationTree,
+        userAuthority: allUserAuthority,
+        direction: 'ltr',
+        translationSetup: true,
+    },
+}
+
+export const LimitedAuthority: TStory = {
+    args: {
+        collapsed: false,
+        routeKey: '/inicio',
+        navigationTree: mockNavigationTree,
+        userAuthority: ['/inicio', '/relatorios'],
+        direction: 'ltr',
+        translationSetup: true,
+    },
+}
+
+export const RTLDirection: TStory = {
+    args: {
+        collapsed: false,
+        routeKey: '/inicio',
+        navigationTree: mockNavigationTree,
+        userAuthority: allUserAuthority,
+        direction: 'rtl',
+        translationSetup: true,
+    },
+}
+
+export const MinimalNavigation: TStory = {
+    args: {
+        collapsed: false,
+        routeKey: '/inicio',
+        navigationTree: [
+            {
+                key: 'inicio',
+                path: '/inicio',
+                title: 'Início',
+                translateKey: 'nav.inicio',
+                icon: '',
+                type: NAV_ITEM_TYPE_ITEM,
+                authority: ['/inicio'],
+                subMenu: [],
+            },
+        ],
+        userAuthority: ['/inicio'],
+        direction: 'ltr',
+        translationSetup: true,
+    },
+}
+
+export const WithMenuClick: TStory = {
+    args: {
+        collapsed: false,
+        routeKey: '/inicio',
+        navigationTree: mockNavigationTree,
+        userAuthority: allUserAuthority,
+        direction: 'ltr',
+        translationSetup: true,
+        onMenuItemClick: () => alert('Menu item clicked!'),
+    },
+}

package/lib/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.tsx

@@ -1,192 +1,234 @@
-import { useState, useEffect, useMemo, Fragment } from "react";
-import Menu from "@/components/ui/Menu";
-import VerticalSingleMenuItem from "./VerticalSingleMenuItem";
-import VerticalCollapsedMenuItem from "./VerticalCollapsedMenuItem";
-import { themeConfig } from "@/configs/theme.config";
+import { useState, useEffect, useMemo, Fragment } from 'react'
+import Menu from '@/components/ui/Menu'
+import VerticalSingleMenuItem from './VerticalSingleMenuItem'
+import VerticalCollapsedMenuItem from './VerticalCollapsedMenuItem'
+import { themeConfig } from '@/configs/theme.config'
 import {
-  NAV_ITEM_TYPE_TITLE,
-  NAV_ITEM_TYPE_COLLAPSE,
-  NAV_ITEM_TYPE_ITEM,
-} from "@/constants/navigation.constant";
-import useMenuActive from "@/utils/hooks/useMenuActive";
-import useTranslation from "@/utils/hooks/useTranslation";
-import { Direction } from "@/@types/theme";
-import type { NavigationTree } from "@/@types/navigation";
-import type { TraslationFn } from "@/@types/common";
-import { LinkRenderer } from "@/components/layouts/Layouts";
+    NAV_ITEM_TYPE_TITLE,
+    NAV_ITEM_TYPE_COLLAPSE,
+    NAV_ITEM_TYPE_ITEM,
+} from '@/constants/navigation.constant'
+import useMenuActive from '@/utils/hooks/useMenuActive'
+import useTranslation from '@/utils/hooks/useTranslation'
+import { Direction } from '@/@types/theme'
+import type { NavigationTree } from '@/@types/navigation'
+import type { TraslationFn } from '@/@types/common'
+import { LinkRenderer } from '@/components/layouts/Layouts'
 
 export interface VerticalMenuContentProps {
-  collapsed?: boolean;
-  routeKey: string;
-  navigationTree?: NavigationTree[];
-  onMenuItemClick?: () => void;
-  direction?: Direction;
-  translationSetup?: boolean;
-  userAuthority: string[];
-  linkRenderer?: LinkRenderer;
+    collapsed?: boolean
+    routeKey: string
+    navigationTree?: NavigationTree[]
+    onMenuItemClick?: () => void
+    direction?: Direction
+    translationSetup?: boolean
+    userAuthority: string[]
+    linkRenderer?: LinkRenderer
 }
 
-const { MenuGroup } = Menu;
+const { MenuGroup } = Menu
 
 const findAncestorKeys = (
-  navTree: NavigationTree[],
-  targetKey: string
+    navTree: NavigationTree[],
+    targetKey: string,
 ): string[] | null => {
-  for (const node of navTree) {
-    if (node.key === targetKey) return [];
-    if (node.subMenu && node.subMenu.length > 0) {
-      const found = findAncestorKeys(node.subMenu, targetKey);
-      if (found !== null) return [node.key, ...found];
+    for (const node of navTree) {
+        if (node.key === targetKey) return []
+        if (node.subMenu && node.subMenu.length > 0) {
+            const found = findAncestorKeys(node.subMenu, targetKey)
+            if (found !== null) return [node.key, ...found]
+        }
     }
-  }
-  return null;
-};
+    return null
+}
 
 const filterNavigationByAuthority = (
-  navTree: NavigationTree[],
-  userAuthority: string[]
+    navTree: NavigationTree[],
+    userAuthority: string[],
 ): NavigationTree[] => {
-  return navTree.reduce((acc: NavigationTree[], nav) => {
-    // Verifica se deve excluir o item quando o usuário possui alguma funcionalidade específica
-    if (nav.excludeWhenHasPaths && nav.excludeWhenHasPaths.length > 0) {
-      const shouldExclude = nav.excludeWhenHasPaths.some((path) =>
-        userAuthority.includes(path)
-      );
-      if (shouldExclude) {
-        return acc;
-      }
-    }
+    return navTree.reduce((acc: NavigationTree[], nav) => {
+        // Verifica se deve excluir o item quando o usuário possui alguma funcionalidade específica
+        if (nav.excludeWhenHasPaths && nav.excludeWhenHasPaths.length > 0) {
+            const shouldExclude = nav.excludeWhenHasPaths.some((path) =>
+                userAuthority.includes(path),
+            )
+            if (shouldExclude) {
+                return acc
+            }
+        }
 
-    if (nav.subMenu && nav.subMenu.length > 0) {
-      const filteredSubMenu = filterNavigationByAuthority(
-        nav.subMenu,
-        userAuthority
-      );
-      if (filteredSubMenu.length > 0) {
-        acc.push({ ...nav, subMenu: filteredSubMenu });
-      }
-    } else {
-      if ((nav.path && userAuthority.includes(nav.path)) || !nav.path) {
-        acc.push(nav);
-      }
-    }
-    return acc;
-  }, []);
-};
+        if (nav.subMenu && nav.subMenu.length > 0) {
+            const filteredSubMenu = filterNavigationByAuthority(
+                nav.subMenu,
+                userAuthority,
+            )
+            if (filteredSubMenu.length > 0) {
+                acc.push({ ...nav, subMenu: filteredSubMenu })
+            }
+        } else {
+            if ((nav.path && userAuthority.includes(nav.path)) || !nav.path) {
+                acc.push(nav)
+            }
+        }
+        return acc
+    }, [])
+}
+
+const sortNavigationRecursively = (
+    navTree: NavigationTree[],
+): NavigationTree[] => {
+    return [...navTree]
+        .map((nav) => ({
+            ...nav,
+            subMenu: nav.subMenu
+                ? sortNavigationRecursively(nav.subMenu)
+                : nav.subMenu,
+        }))
+        .sort((a, b) => {
+            if (a.sortOrder !== undefined || b.sortOrder !== undefined) {
+                const orderA = a.sortOrder ?? Number.MAX_SAFE_INTEGER
+                const orderB = b.sortOrder ?? Number.MAX_SAFE_INTEGER
+
+                if (orderA !== orderB) {
+                    return orderA - orderB
+                }
+            }
+
+            return a.title.localeCompare(b.title, 'pt-BR')
+        })
+}
 
 const VerticalMenuContent = (props: VerticalMenuContentProps) => {
-  const {
-    collapsed,
-    routeKey,
-    navigationTree = [],
-    onMenuItemClick,
-    direction = themeConfig.direction,
-    translationSetup,
-    userAuthority,
-    linkRenderer,
-  } = props;
-
-  const { t } = useTranslation(!translationSetup);
-  const [defaulExpandKey, setDefaulExpandKey] = useState<string[]>([]);
-  const filteredNavigationTree = useMemo(
-    () => filterNavigationByAuthority(navigationTree, userAuthority),
-    [navigationTree, userAuthority]
-  );
-
-  const { activedRoute } = useMenuActive(filteredNavigationTree, routeKey);
-
-  useEffect(() => {
-    if (activedRoute?.key) {
-      const ancestors = findAncestorKeys(
-        filteredNavigationTree,
-        activedRoute.key
-      );
-      setDefaulExpandKey(ancestors ?? []);
+    const {
+        collapsed,
+        routeKey,
+        navigationTree = [],
+        onMenuItemClick,
+        direction = themeConfig.direction,
+        translationSetup,
+        userAuthority,
+        linkRenderer,
+    } = props
+
+    const { t } = useTranslation(!translationSetup)
+    const [defaulExpandKey, setDefaulExpandKey] = useState<string[]>([])
+
+    const filteredNavigationTree = useMemo(() => {
+        const filteredTree = filterNavigationByAuthority(
+            navigationTree,
+            userAuthority,
+        )
+
+        return sortNavigationRecursively(filteredTree)
+    }, [navigationTree, userAuthority])
+
+    console.log('Filtered Navigation Tree:', filteredNavigationTree)
+
+    const { activedRoute } = useMenuActive(filteredNavigationTree, routeKey)
+
+    useEffect(() => {
+        if (activedRoute?.key) {
+            const ancestors = findAncestorKeys(
+                filteredNavigationTree,
+                activedRoute.key,
+            )
+            setDefaulExpandKey(ancestors ?? [])
+        }
+    }, [activedRoute?.key, filteredNavigationTree])
+
+    const handleLinkClick = () => {
+        onMenuItemClick?.()
     }
-  }, [activedRoute?.key, filteredNavigationTree]);
 
-  const handleLinkClick = () => {
-    onMenuItemClick?.();
-  };
+    const renderNavigation = (
+        navTree: NavigationTree[],
+        cascade: number = 0,
+        indent?: boolean,
+    ) => {
+        const nextCascade = cascade + 1
 
-  const renderNavigation = (
-    navTree: NavigationTree[],
-    cascade: number = 0,
-    indent?: boolean
-  ) => {
-    const nextCascade = cascade + 1;
+        return (
+            <>
+                {navTree.map((nav) => (
+                    <Fragment key={nav.key}>
+                        {nav.type === NAV_ITEM_TYPE_ITEM && (
+                            <VerticalSingleMenuItem
+                                key={nav.key}
+                                currentKey={activedRoute?.key}
+                                parentKeys={defaulExpandKey}
+                                nav={nav}
+                                sideCollapsed={collapsed}
+                                direction={direction}
+                                indent={indent}
+                                renderAsIcon={cascade <= 0}
+                                showIcon={cascade <= 0}
+                                userAuthority={userAuthority}
+                                showTitle={
+                                    nav.forceShowTitle ??
+                                    (collapsed ? cascade >= 1 : cascade <= 1)
+                                }
+                                t={t as TraslationFn}
+                                onLinkClick={handleLinkClick}
+                                linkRenderer={linkRenderer}
+                            />
+                        )}
+                        {nav.type === NAV_ITEM_TYPE_COLLAPSE && (
+                            <VerticalCollapsedMenuItem
+                                key={nav.key}
+                                currentKey={activedRoute?.key}
+                                parentKeys={defaulExpandKey}
+                                nav={nav}
+                                sideCollapsed={collapsed}
+                                direction={direction}
+                                indent={nextCascade >= 2}
+                                dotIndent={nextCascade >= 2}
+                                renderAsIcon={nextCascade <= 1}
+                                userAuthority={userAuthority}
+                                t={t as TraslationFn}
+                                onLinkClick={onMenuItemClick}
+                            >
+                                {nav.subMenu &&
+                                    nav.subMenu.length > 0 &&
+                                    renderNavigation(
+                                        nav.subMenu,
+                                        nextCascade,
+                                        true,
+                                    )}
+                            </VerticalCollapsedMenuItem>
+                        )}
+                        {nav.type === NAV_ITEM_TYPE_TITLE && (
+                            <MenuGroup
+                                key={nav.key}
+                                label={t(nav.translateKey) || nav.title}
+                            >
+                                {nav.subMenu &&
+                                    nav.subMenu.length > 0 &&
+                                    renderNavigation(
+                                        nav.subMenu,
+                                        cascade,
+                                        false,
+                                    )}
+                            </MenuGroup>
+                        )}
+                    </Fragment>
+                ))}
+            </>
+        )
+    }
 
     return (
-      <>
-        {navTree.map((nav) => (
-          <Fragment key={nav.key}>
-            {nav.type === NAV_ITEM_TYPE_ITEM && (
-              <VerticalSingleMenuItem
-                key={nav.key}
-                currentKey={activedRoute?.key}
-                parentKeys={defaulExpandKey}
-                nav={nav}
-                sideCollapsed={collapsed}
-                direction={direction}
-                indent={indent}
-                renderAsIcon={cascade <= 0}
-                showIcon={cascade <= 0}
-                userAuthority={userAuthority}
-                showTitle={
-                  nav.forceShowTitle ??
-                  (collapsed ? cascade >= 1 : cascade <= 1)
-                }
-                t={t as TraslationFn}
-                onLinkClick={handleLinkClick}
-                linkRenderer={linkRenderer}
-              />
-            )}
-            {nav.type === NAV_ITEM_TYPE_COLLAPSE && (
-              <VerticalCollapsedMenuItem
-                key={nav.key}
-                currentKey={activedRoute?.key}
-                parentKeys={defaulExpandKey}
-                nav={nav}
-                sideCollapsed={collapsed}
-                direction={direction}
-                indent={nextCascade >= 2}
-                dotIndent={nextCascade >= 2}
-                renderAsIcon={nextCascade <= 1}
-                userAuthority={userAuthority}
-                t={t as TraslationFn}
-                onLinkClick={onMenuItemClick}
-              >
-                {nav.subMenu &&
-                  nav.subMenu.length > 0 &&
-                  renderNavigation(nav.subMenu, nextCascade, true)}
-              </VerticalCollapsedMenuItem>
-            )}
-            {nav.type === NAV_ITEM_TYPE_TITLE && (
-              <MenuGroup key={nav.key} label={t(nav.translateKey) || nav.title}>
-                {nav.subMenu &&
-                  nav.subMenu.length > 0 &&
-                  renderNavigation(nav.subMenu, cascade, false)}
-              </MenuGroup>
-            )}
-          </Fragment>
-        ))}
-      </>
-    );
-  };
-
-  return (
-    <Menu
-      className="px-4 pb-4"
-      sideCollapsed={collapsed}
-      defaultActiveKeys={activedRoute?.key ? [activedRoute.key] : []}
-      defaultExpandedKeys={defaulExpandKey}
-      defaultCollapseActiveKeys={
-        activedRoute?.parentKey ? [activedRoute.parentKey] : []
-      }
-    >
-      {renderNavigation(filteredNavigationTree, 0)}
-    </Menu>
-  );
-};
-
-export default VerticalMenuContent;
+        <Menu
+            className="px-4 pb-4"
+            sideCollapsed={collapsed}
+            defaultActiveKeys={activedRoute?.key ? [activedRoute.key] : []}
+            defaultExpandedKeys={defaulExpandKey}
+            defaultCollapseActiveKeys={
+                activedRoute?.parentKey ? [activedRoute.parentKey] : []
+            }
+        >
+            {renderNavigation(filteredNavigationTree, 0)}
+        </Menu>
+    )
+}
+
+export default VerticalMenuContent