this.gui 1.3.24 → 1.3.26

package/src/gui/Layouts/ResponsiveUI/Sidebars/LeftSidebar/LeftSidebar.tsx

@@ -0,0 +1,311 @@
+// LeftSidebar.tsx
+import clsx from 'clsx';
+import { useEffect, useState, useRef } from 'react';
+import IconButton from '@mui/material/IconButton';
+import Icon from '@/gui/Theme/Icon/Icon';
+import { LeftSidebarElement } from './LeftSidebar.types';
+import LeftSidebarLink from './components/LeftSidebarLink/LeftSidebarLink';
+import LeftSidebarMenu from './components/LeftSidebarMenu/LeftSidebarMenu';
+import LeftSidebarAction from './components/LeftSidebarAction/LeftSidebarAction';
+import LeftSidebarToggleButton from './components/LeftSidebarToggleButton/LeftSidebarToggleButton';
+import { useLeftSidebar, useGuiTheme, useGuiMediaQuery, useUpdateInsets, useInsets } from '@/gui/hooks';
+import { Box, Drawer } from '@/gui/components/atoms';
+import type { LeftSidebarView } from '@/gui/contexts';
+
+const LeftSidebar = ({
+  elements = [],
+  className,
+  initialView = 'rail',
+  footerElements = [],
+}: {
+  elements: LeftSidebarElement[];
+  className?: string;
+  initialView?: LeftSidebarView;
+  footerElements?: LeftSidebarElement[];
+}) => {
+  const { view, setView } = useLeftSidebar();
+  const theme = useGuiTheme();
+  const isMobile = useGuiMediaQuery(theme.breakpoints.down('sm'));
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [lastNonMobileView, setLastNonMobileView] = useState<LeftSidebarView>(view === 'mobile' ? 'expanded' : view);
+  const setInsets = useUpdateInsets();
+  const insets = useInsets();
+  const navInset = Math.max(0, Number(insets?.nav ?? insets?.top ?? 0));
+  const headerHeight = navInset > 0 ? navInset : 48;
+  const toggleOffset = (navInset > 0 ? navInset : 0) + 12;
+  const hasFooterElements = Array.isArray(footerElements) && footerElements.length > 0;
+  const initialViewApplied = useRef(false);
+
+  useEffect(() => {
+    if (typeof setInsets !== 'function') return;
+    const desired = view === 'expanded' ? 220 : view === 'rail' ? 72 : 0;
+    setInsets({ left: desired });
+    return () => setInsets({ left: 0 });
+  }, [setInsets, view]);
+
+  useEffect(() => {
+    initialViewApplied.current = false;
+  }, [initialView]);
+
+  useEffect(() => {
+    if (initialViewApplied.current) return;
+    if (initialView !== 'mobile') {
+      if (lastNonMobileView !== initialView) setLastNonMobileView(initialView);
+      if (!isMobile && view !== initialView) {
+        setView(initialView);
+      }
+    } else if (view !== 'mobile') {
+      setView('mobile');
+    }
+    initialViewApplied.current = true;
+  }, [initialView, isMobile, lastNonMobileView, setView, view]);
+
+  useEffect(() => {
+    if (view === 'expanded' || view === 'rail') {
+      setLastNonMobileView(view);
+    }
+  }, [view]);
+
+  useEffect(() => {
+    if (isMobile && view !== 'mobile') {
+      setView('mobile');
+    } else if (!isMobile && view === 'mobile') {
+      setView(lastNonMobileView);
+    }
+  }, [isMobile, lastNonMobileView, setView, view]);
+
+  useEffect(() => {
+    if (view !== 'mobile' && mobileOpen) {
+      setMobileOpen(false);
+    }
+  }, [mobileOpen, view]);
+
+  const renderElements = () =>
+    elements.map((el, idx) => {
+      if (el.type === 'link') return <LeftSidebarLink key={idx} view={view} {...el.props} />;
+      if (el.type === 'menu') return <LeftSidebarMenu key={idx} view={view} {...el.props} />;
+      if (el.type === 'action') return <LeftSidebarAction key={idx} view={view} {...el.props} />;
+      return null;
+    });
+  const renderFooterItems = () =>
+    footerElements.map((el, idx) => {
+      if (el.type === 'link') return <LeftSidebarLink key={`footer-link-${idx}`} view={view} {...el.props} />;
+      if (el.type === 'menu') return <LeftSidebarMenu key={`footer-menu-${idx}`} view={view} {...el.props} />;
+      if (el.type === 'action') return <LeftSidebarAction key={`footer-action-${idx}`} view={view} {...el.props} />;
+      return null;
+    });
+
+  if (view === 'rail') {
+    return (
+      <Box
+        component="aside"
+        className={clsx('LeftSidebar', className)}
+        sx={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          bottom: 0,
+          height: '100vh',
+          display: 'flex',
+          flexDirection: 'column',
+          width: '72px',
+          overflow: 'visible',
+          borderRight: '1px solid',
+          borderColor: 'divider',
+          '--gui-rail-width': '72px',
+          zIndex: (theme) => theme.zIndex.drawer + 2,
+          backgroundColor: 'background.nav',
+        }}
+      >
+        <Box
+          component="header"
+          sx={{
+            flexShrink: 0,
+            borderBottom: '1px solid',
+            borderColor: 'divider',
+            height: `${headerHeight}px`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            px: 1.5,
+            py: 0,
+            gap: 1.25,
+          }}
+        >
+          <LeftSidebarToggleButton
+            expanded={view === ('expanded' as any)}
+            onToggle={() => setView(view === 'rail' ? 'expanded' : 'rail')}
+          />
+        </Box>
+        <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>{renderElements()}</Box>
+        {hasFooterElements && (
+          <Box
+            component="footer"
+            sx={{
+              flexShrink: 0,
+              px: 1,
+              py: 1.5,
+                      borderColor: 'divider',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 0.5,
+            }}
+          >
+            {renderFooterItems()}
+          </Box>
+        )}
+      </Box>
+    );
+  }
+
+  if (view === 'mobile') {
+    return (
+      <>
+        <Box
+          sx={{
+            position: 'fixed',
+            top: `${toggleOffset}px`,
+            left: 0,
+            zIndex: ((theme as any)?.zIndex?.drawer ?? 1200) + 1,
+            display: mobileOpen ? 'none' : 'flex',
+          }}
+        >
+          <IconButton
+            aria-label="Abrir navegación"
+            onClick={() => setMobileOpen(true)}
+            sx={{
+              borderRadius: '0 16px 16px 0',
+              border: '1px solid',
+              borderColor: 'divider',
+              bgcolor: 'background.paper',
+              color: 'text.secondary',
+              boxShadow: 3,
+              '&:hover': {
+                bgcolor: 'background.nav',
+                color: 'text.primary',
+              },
+            }}
+          >
+            <Icon name="menu" />
+          </IconButton>
+        </Box>
+        <Drawer
+          anchor="left"
+          open={mobileOpen}
+          onClose={() => setMobileOpen(false)}
+          variant="temporary"
+          ModalProps={{ keepMounted: true }}
+          sx={{
+            '& .MuiDrawer-paper': {
+              width: 220,
+              top: `${navInset}px`,
+              height: `calc(100vh - ${navInset}px)`,
+              display: 'flex',
+              flexDirection: 'column',
+              borderRight: '1px solid',
+              borderColor: 'divider',
+            },
+          }}
+        >
+          <Box
+            component="header"
+            sx={{
+              flexShrink: 0,
+              borderBottom: '1px solid',
+              borderColor: 'divider',
+              height: `${headerHeight}px`,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              px: 1.5,
+              gap: 1.25,
+            }}
+          >
+            <LeftSidebarToggleButton expanded onToggle={() => setMobileOpen(false)} />
+          </Box>
+          <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>{renderElements()}</Box>
+          {hasFooterElements && (
+            <Box
+              component="footer"
+              sx={{
+                flexShrink: 0,
+                px: 1.5,
+                py: 1.5,
+                          borderColor: 'divider',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 0.75,
+              }}
+            >
+              {renderFooterItems()}
+            </Box>
+          )}
+        </Drawer>
+      </>
+    );
+  }
+
+  // Default to 'expanded' view
+  return (
+    <Box
+      component="aside"
+      className={clsx('LeftSidebar', className)}
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        height: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '220px',
+        overflow: 'visible',
+        borderRight: '1px solid',
+        borderColor: 'divider',
+        '--gui-expanded-width': '220px',
+        backgroundColor: 'background.nav',
+        zIndex: (theme) => theme.zIndex.drawer + 2,
+      }}
+    >
+      <Box
+        component="header"
+        sx={{
+          flexShrink: 0,
+          borderBottom: '1px solid',
+          borderColor: 'divider',
+          height: `${headerHeight}px`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          px: 1.5,
+          py: 0,
+          gap: 1.25,
+        }}
+      >
+        <LeftSidebarToggleButton
+          expanded={view === ('expanded' as any)}
+          onToggle={() => setView(view === 'expanded' ? 'rail' : 'expanded')}
+        />
+      </Box>
+      <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>{renderElements()}</Box>
+      {hasFooterElements && (
+        <Box
+          component="footer"
+          sx={{
+            flexShrink: 0,
+            px: 1.5,
+            py: 1.5,
+                  borderColor: 'divider',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 0.75,
+          }}
+        >
+          {renderFooterItems()}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default LeftSidebar;

package/src/gui/Layouts/ResponsiveUI/Sidebars/LeftSidebar/LeftSidebar.types.ts

@@ -0,0 +1,41 @@
+import { LeftSidebarView } from '@/gui/contexts';
+import { ReactNode } from 'react';
+export type LeftSidebarMode = 'rail' | 'expanded' | 'mobile';
+
+export type LeftSidebarProps = {
+  open?: boolean; // used in mobile
+  mode?: LeftSidebarMode;
+  onClose?: () => void;
+  items?: any[];
+  children?: ReactNode;
+  brand?: ReactNode;
+  footer?: ReactNode;
+  footerElements?: LeftSidebarElement[];
+  style?: React.CSSProperties;
+  className?: string;
+  enableCollapse?: boolean;
+  defaultExpanded?: boolean;
+  expandButton?: ReactNode;
+  drawerLinks?: any[];
+  collapsedWidth?: number;
+  expandedWidth?: number;
+  expanded?: boolean;
+  id?: string;
+  shouldShowToggle?: boolean;
+  railMode?: boolean;
+  toggleLocation?: 'sidebar' | 'topbar' | 'none';
+  header?: ReactNode;
+};
+
+export type LeftSidebarElement =
+  | { type: 'link'; props: Record<string, any> }
+  | { type: 'menu'; props: Record<string, any> }
+  | { type: 'action'; props: Record<string, any> };
+
+export type SidebarMode = LeftSidebarMode;
+export type SidebarSection = {
+  title?: string;
+  items: any[];
+};
+
+export type SidebarToggleHandler = () => void;

package/src/gui/Layouts/ResponsiveUI/Sidebars/LeftSidebar/SidebarToggleButton.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Box, IconButton } from '@mui/material';
+import { SxProps, Theme } from '@mui/material/styles';
+import Icon from '@/themes/Icon/Icon';
+
+export interface SidebarToggleButtonProps {
+  expanded: boolean;
+  onToggle: () => void;
+  collapsedWidth?: number;
+  style?: React.CSSProperties;
+  location?: 'topbar' | 'sidebar' | 'none';
+  sx?: SxProps<Theme>;
+  forceRender?: boolean;
+}
+
+const SidebarToggleButton: React.FC<SidebarToggleButtonProps> = ({
+  expanded,
+  onToggle,
+  collapsedWidth = 72,
+  style,
+  location,
+  sx,
+}) => {
+  const [locationState, setLocation] = React.useState<'topbar' | 'sidebar' | 'none'>(location ?? 'none');
+
+  React.useEffect(() => {
+    if (location) {
+      setLocation(location);
+    }
+  }, [location]);
+
+  if (locationState === 'none') return null;
+
+  return (
+    <Box
+      sx={{
+        ...(locationState === 'topbar'
+          ? { display: 'flex', alignItems: 'center', justifyContent: 'center', px: 1 }
+          : { width: collapsedWidth, display: 'flex', justifyContent: 'center', py: 1 }),
+        ...sx,
+      }}
+      style={style}
+    >
+      <IconButton size="small" onClick={onToggle} aria-label={expanded ? 'Collapse sidebar' : 'Expand sidebar'}>
+        <span className="material-symbols-rounded" style={{ fontSize: 20 }}>
+          {expanded ? 'chevron_left' : 'chevron_right'}
+        </span>
+      </IconButton>
+    </Box>
+  );
+};
+
+export default SidebarToggleButton;

package/src/gui/Layouts/ResponsiveUI/Sidebars/LeftSidebar/components/LeftSidebarAction/LeftSidebarAction.resolver.tsx

@@ -0,0 +1,19 @@
+export default function resolveLeftSidebarAction({
+  action,
+  context,
+}: {
+  action: string | (() => any);
+  context?: any;
+}) {
+  try {
+    if (typeof action === 'function') return action();
+    if (typeof action === 'string') {
+      const fn = (window as any)[action];
+      if (typeof fn === 'function') return fn(context);
+      console.warn(`LeftSidebarAction: No global function found for "${action}"`);
+    }
+  } catch (err) {
+    console.error(`Error executing LeftSidebarAction for "${action}":`, err);
+  }
+  return undefined;
+}

package/src/gui/Layouts/ResponsiveUI/Sidebars/LeftSidebar/components/LeftSidebarAction/LeftSidebarAction.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Box, Typography, Tooltip } from '@/gui/components/atoms';
+import Icon from '@/gui/Theme/Icon/Icon';
+import type { LeftSidebarMode } from '../../LeftSidebar.types';
+import { useLeftSidebar } from '@/gui/hooks';
+
+export type LeftSidebarActionProps = {
+  label?: string;
+  icon?: string;
+  iconColor?: string;
+  onClick?: () => void;
+  active?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  resolver?: string; // optional resolver name or JS function string
+  view: LeftSidebarMode; // added line
+};
+
+const LeftSidebarAction: React.FC<LeftSidebarActionProps> = ({
+  label,
+  icon,
+  iconColor,
+  onClick,
+  active = false,
+  className,
+  style,
+  resolver,
+  view,
+}) => {
+  const handleClick = onClick || (resolver ? () => { try { new Function(resolver)(); } catch (e) { console.error(e); } } : undefined);
+
+  const content = (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: 1.123,
+        justifyContent: view === 'rail' ? 'center' : 'flex-start',
+        alignItems: 'center',
+        width: '100%',
+        textAlign: view === 'rail' ? 'center' : 'left',
+        px: view === 'rail' ? 0 : 1.23,
+      }}
+    >
+      <Icon name={icon || ''} iconColor={iconColor || (active ? 'primary.main' : 'text.secondary')} />
+      {view !== 'rail' && (
+        <Typography
+          variant="body2"
+          sx={{
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            color: active ? 'primary.main' : 'text.primary',
+          }}
+        >
+          {label}
+        </Typography>
+      )}
+    </Box>
+  );
+
+  return (
+    <Box
+      component="button"
+      onClick={handleClick}
+      className={clsx('LeftSidebarAction', className)}
+      style={style}
+      sx={{
+        p: 1.123,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: view === 'rail' ? 'center' : 'flex-start',
+        borderLeft: 2,
+        borderLeftColor: active ? 'primary.main' : 'transparent',
+        borderLeftStyle: 'solid',
+        cursor: 'pointer',
+        backgroundColor: active ? 'action.selected' : 'transparent',
+        '&:hover': {
+          backgroundColor: 'action.hover',
+          borderLeftColor: 'primary.main',
+        },
+        color: active ? 'primary.main' : 'text.primary',
+        width: '100%',
+        textAlign: view === 'rail' ? 'center' : 'left',
+        outline: 'none',
+        border: 'none',
+      }}
+      aria-pressed={active}
+      type="button"
+    >
+      {view === 'rail' ? (
+        <Tooltip
+          title={label}
+          placement="right"
+          arrow
+          slotProps={{ tooltip: { sx: { fontSize: '0.9rem', py: 0.5, px: 1 } } }}
+        >
+          {content}
+        </Tooltip>
+      ) : (
+        content
+      )}
+    </Box>
+  );
+};
+
+export default LeftSidebarAction;

package/src/gui/Layouts/ResponsiveUI/Sidebars/LeftSidebar/components/LeftSidebarLink/LeftSidebarLink.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import { Box, Typography, Tooltip } from '@/gui/components/atoms';
+import Icon from '@/gui/Theme/Icon/Icon';
+import type { LeftSidebarItemProps } from './LeftSidebarLink.types';
+import { useLeftSidebar } from '@/gui/hooks';
+
+const LeftSidebarLink: React.FC<LeftSidebarItemProps> = ({
+  label,
+  icon,
+  iconColor,
+  href,
+  active,
+  external,
+  onClick,
+  children
+}) => {
+  const { view } = useLeftSidebar();
+  const [expanded, setExpanded] = useState(false);
+  const hasChildren = Boolean(children);
+
+  const handleClick = () => {
+    if (hasChildren) setExpanded((prev) => !prev);
+    if (onClick) onClick();
+  };
+
+  const content = (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: 1.123,
+        justifyContent: view === 'rail' ? 'center' : 'flex-start',
+        alignItems: 'center',
+        width: '100%',
+        textAlign: view === 'rail' ? 'center' : 'left',
+        px: view === 'rail' ? 0 : 1.23,
+      }}
+    >
+      {icon && (
+        <Icon name={icon} iconColor={iconColor}/>
+      )}
+      {view !== 'rail' && <Typography variant="body2">{label}</Typography>}
+      {hasChildren && (
+        <Icon
+          name={expanded ? 'expand_less' : 'expand_more'}
+          iconColor={iconColor}
+        />
+      )}
+    </Box>
+  );
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        p: 1.123,
+        backgroundColor: 'transparent',
+        border: active ? '1px solid' : 'none',
+        borderColor: active ? 'primary.main' : 'transparent',
+        color: active ? 'white' : 'text.primary',
+        cursor: 'pointer',
+        borderRadius: 1,
+        '&:hover': {
+          backgroundColor: 'action.hover'
+        },
+        position: 'relative',
+      }}
+      onClick={handleClick}
+    >
+      {view === 'rail' ? (
+        <Tooltip
+          title={label}
+          placement="right"
+          arrow
+          slotProps={{ tooltip: { sx: { fontSize: '0.9rem', py: 0.5, px: 1 } } }}
+        >
+          {content}
+        </Tooltip>
+      ) : (
+        content
+      )}
+      {hasChildren && (
+        <>
+          {expanded && view !== 'rail' && (
+            <Box sx={{ pl: 2, pt: 0.5 }}>
+              {React.Children.map(children, (child, index) =>
+                React.isValidElement(child) ? (
+                  React.cloneElement(child, { key: index })
+                ) : null
+              )}
+            </Box>
+          )}
+          {expanded && view === 'rail' && (
+            <Box
+              sx={{
+                position: 'absolute',
+                left: '100%',
+                top: 0,
+                backgroundColor: 'background.paper',
+                boxShadow: 3,
+                borderRadius: 1,
+                mt: -1,
+                zIndex: 10,
+                p: 1,
+                minWidth: 180,
+              }}
+            >
+              {React.Children.map(children, (child, index) =>
+                React.isValidElement(child)
+                  ? React.cloneElement(child, { key: index })
+                  : null
+              )}
+            </Box>
+          )}
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default LeftSidebarLink;

package/src/gui/Layouts/ResponsiveUI/Sidebars/LeftSidebar/components/LeftSidebarLink/LeftSidebarLink.types.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { LeftSidebarView } from '@/gui/contexts/LeftSidebarContext';
+export type LeftSidebarItemProps = {
+  label?: string;
+  icon?: string;
+  iconColor?: string;
+  href?: string;
+  active?: boolean;
+  external?: boolean;
+  onClick?: () => void;
+  view?: LeftSidebarView;
+  children?: React.ReactNode;
+};