anteriority-ui 1.0.0

package/screens/components/Sidebar/index.jsx

@@ -0,0 +1,399 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronLeft, ChevronRight, Pencil, Trash2, Pin, PinOff, GripVertical, Users } from 'lucide-react';
+import Button from '../Button/index';
+import Skeleton from '../Skeleton/index';
+import styles from './index.module.css';
+import { TEXTS } from './constants';
+import { getBadgeClass, getInitial, isSidebarToggleShortcut, toggleSidebarCollapsed } from './utils';
+
+import ModalTooltip from '../ModalTooltip/ModalTooltip';
+
+const DEFAULT_METHOD_BADGE_COLORS = {
+  post: { bg: '#dcfce7', color: '#15803d' },
+  get: { bg: '#e0f2fe', color: '#0369a1' },
+  put: { bg: '#fef3c7', color: '#b45309' },
+  delete: { bg: '#fee2e2', color: '#b91c1c' },
+  info: { bg: '#f1f5f9', color: '#475569' },
+};
+
+export const ProSidebar = ({
+  groups,
+  activeId,
+  onSelect,
+  collapsible = true,
+  loading = false,
+  skeletonItems = 15,
+  className = '',
+  headerContent,
+  footerContent,
+  user,
+  userMenuItems = [],
+  onItemEdit,
+  onItemDelete,
+  onItemPin,
+  onItemCollaborators,
+  onReorderItems,
+  avatarBgColor,
+  pinnedIconColor,
+  methodBadgeColors,
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(() => {
+    return localStorage.getItem('sidebar_collapsed') === 'true';
+  });
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+  const [userMenuPosition, setUserMenuPosition] = useState(null);
+  const [contextMenu, setContextMenu] = useState(null);
+  const [draggedItemId, setDraggedItemId] = useState(null);
+  const [dragOverItemId, setDragOverItemId] = useState(null);
+  const userFooterButtonRef = useRef(null);
+  const userMenuRef = useRef(null);
+  const contextMenuRef = useRef(null);
+
+  const canShowItemContextMenu = Boolean(onItemEdit || onItemDelete || onItemPin);
+  const canReorder = Boolean(onReorderItems);
+
+  const badgeThemeVars = Object.keys(DEFAULT_METHOD_BADGE_COLORS).reduce((acc, key) => {
+    const override = methodBadgeColors && methodBadgeColors[key];
+    if (override?.bg) acc[`--sidebar-badge-${key}-bg`] = override.bg;
+    if (override?.color) acc[`--sidebar-badge-${key}-color`] = override.color;
+    return acc;
+  }, {});
+
+  const themeVars = {
+    ...(avatarBgColor ? { '--sidebar-avatar-bg': avatarBgColor } : {}),
+    ...(pinnedIconColor ? { '--sidebar-pinned-icon': pinnedIconColor } : {}),
+    ...badgeThemeVars,
+  };
+
+  const handleDragStart = (event, item) => {
+    event.dataTransfer.effectAllowed = 'move';
+    setDraggedItemId(item.id);
+  };
+
+  const handleDragOver = (event, item) => {
+    event.preventDefault();
+    if (item.id !== draggedItemId) setDragOverItemId(item.id);
+  };
+
+  const handleDragLeave = (item) => {
+    setDragOverItemId((prev) => (prev === item.id ? null : prev));
+  };
+
+  const handleDrop = (event, groupItems, targetItem) => {
+    event.preventDefault();
+    setDragOverItemId(null);
+    if (!draggedItemId || draggedItemId === targetItem.id) return;
+
+    const fromIndex = groupItems.findIndex((it) => it.id === draggedItemId);
+    const toIndex = groupItems.findIndex((it) => it.id === targetItem.id);
+    if (fromIndex === -1 || toIndex === -1) return;
+
+    const reordered = groupItems.map((it) => it.id);
+    const [movedId] = reordered.splice(fromIndex, 1);
+    reordered.splice(toIndex, 0, movedId);
+
+    onReorderItems && onReorderItems(reordered);
+  };
+
+  const handleDragEnd = () => {
+    setDraggedItemId(null);
+    setDragOverItemId(null);
+  };
+
+  useLayoutEffect(() => {
+    if (!isUserMenuOpen || !userFooterButtonRef.current) return;
+    const rect = userFooterButtonRef.current.getBoundingClientRect();
+    setUserMenuPosition({
+      bottom: window.innerHeight - rect.top + 8,
+      left: rect.left,
+      width: isCollapsed ? 220 : rect.width,
+    });
+  }, [isUserMenuOpen, isCollapsed]);
+
+  useEffect(() => {
+    if (!isUserMenuOpen) return undefined;
+    // The menu is rendered in a portal to document.body, so it sits outside
+    // the sidebar's DOM subtree (and outside the app's root container).
+    // Relying on synthetic-event bubbling/stopPropagation across that
+    // boundary is unreliable, so this checks real DOM containment via refs
+    // instead — mousedown fires before the menu item's own click, so its
+    // early return here (when the ref *does* contain the target) is what
+    // lets that click go on to fire normally.
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (userMenuRef.current?.contains(target)) return;
+      if (userFooterButtonRef.current?.contains(target)) return;
+      setIsUserMenuOpen(false);
+    };
+    document.addEventListener('mousedown', handlePointerDown);
+    return () => document.removeEventListener('mousedown', handlePointerDown);
+  }, [isUserMenuOpen]);
+
+  useEffect(() => {
+    if (!collapsible) return undefined;
+    const handleToggleShortcut = (event) => {
+      if (!isSidebarToggleShortcut(event)) return;
+      event.preventDefault();
+      setIsCollapsed(toggleSidebarCollapsed);
+    };
+    document.addEventListener('keydown', handleToggleShortcut);
+    return () => document.removeEventListener('keydown', handleToggleShortcut);
+  }, [collapsible]);
+
+  useEffect(() => {
+    if (!contextMenu) return undefined;
+    const handlePointerDown = (event) => {
+      if (contextMenuRef.current?.contains(event.target)) return;
+      setContextMenu(null);
+    };
+    const closeMenu = () => setContextMenu(null);
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('contextmenu', handlePointerDown);
+    document.addEventListener('scroll', closeMenu, true);
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('contextmenu', handlePointerDown);
+      document.removeEventListener('scroll', closeMenu, true);
+    };
+  }, [contextMenu]);
+
+  const handleItemContextMenu = (event, item) => {
+    if (!canShowItemContextMenu) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setContextMenu({ x: event.clientX, y: event.clientY, item });
+  };
+
+  const renderLeftContent = (item) => {
+    const Icon = item.icon;
+    if (Icon) {
+      // Si Icon es un componente React válido
+      if (typeof Icon === 'function' || typeof Icon === 'object') {
+        return <span className={styles.icon}><Icon size={20} /></span>;
+      }
+      // Si es un nodo ya renderizado
+      return <span className={styles.icon}>{Icon}</span>;
+    }
+    return null;
+  };
+
+  return (
+    <aside
+      className={`${styles.sidebar} ${isCollapsed ? styles.collapsed : ''} ${className}`}
+      style={themeVars}
+    >
+      {(headerContent || collapsible) && (
+        <div className={styles.sidebarHeader}>
+          {!isCollapsed && headerContent && (
+            <div className={styles.headerContent}>{headerContent}</div>
+          )}
+
+          {collapsible && (
+            <Button
+              circle
+              size="small"
+              variant={Button.VARIANTS.GHOST}
+              className={styles.toggleBtn}
+              onClick={() => setIsCollapsed(toggleSidebarCollapsed)}
+              color="transparent"
+            >
+              <ModalTooltip
+                key={isCollapsed}
+                text={isCollapsed ? TEXTS.openMenu : TEXTS.closeMenu}
+                position="bottom"
+              >
+                {isCollapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
+              </ModalTooltip>
+            </Button>
+          )}
+        </div>
+      )}
+
+      <div className={styles.navContainer}>
+        {loading ? (
+          <div className={styles.menuGroup}>
+            <div className={styles.buttonList}>
+              {Array.from({ length: skeletonItems }).map((_, idx) => (
+                <div key={`skeleton-${idx}`} className={styles.sidebarItemBtn} style={{ cursor: 'default' }}>
+                  <div className={styles.btnLayout}>
+                    <div className={styles.leftPart}>
+                      <Skeleton circle width={20} height={20} />
+                      {!isCollapsed && <Skeleton width={`${60 + (idx % 3) * 15}%`} height="12px" />}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : groups && groups.map((group, gIdx) => (
+          <div key={gIdx} className={styles.menuGroup}>
+            {group.title && !isCollapsed && (
+              <span className={styles.groupTitle}>{group.title}</span>
+            )}
+
+            <div className={styles.buttonList}>
+              {group.items && group.items.map((item) => {
+                const isActive = activeId === item.id;
+                const isDragging = draggedItemId === item.id;
+                const isDragOver = canReorder && dragOverItemId === item.id && !isDragging;
+
+                return (
+                  <Button
+                    key={item.id}
+                    fullWidth
+                    color="transparent"
+                    active={isActive}
+                    draggable={canReorder}
+                    onDragStart={canReorder ? (event) => handleDragStart(event, item) : undefined}
+                    onDragOver={canReorder ? (event) => handleDragOver(event, item) : undefined}
+                    onDragLeave={canReorder ? () => handleDragLeave(item) : undefined}
+                    onDrop={canReorder ? (event) => handleDrop(event, group.items, item) : undefined}
+                    onDragEnd={canReorder ? handleDragEnd : undefined}
+                    onClick={() => onSelect && onSelect(item)}
+                    onContextMenu={(event) => handleItemContextMenu(event, item)}
+                    className={`${styles.sidebarItemBtn} ${isActive ? styles.activeBtn : ''} ${isDragging ? styles.dragging : ''} ${isDragOver ? styles.dragOver : ''}`}
+                    ToolTip={isCollapsed ? item.label : undefined}
+                  >
+                    <div className={styles.btnLayout}>
+                      <div className={styles.leftPart}>
+                        {canReorder && !isCollapsed && (
+                          <span className={styles.dragHandle}><GripVertical size={14} /></span>
+                        )}
+                        {renderLeftContent(item)}
+                        {!isCollapsed && <span className={styles.label}>{item.label}</span>}
+                        {!isCollapsed && item.pinned && (
+                          <Pin size={12} className={styles.pinnedIcon} />
+                        )}
+                      </div>
+
+                      {!isCollapsed && item.badge && (
+                        <span className={`${styles.badge} ${getBadgeClass(styles, item.badgeType)}`}>
+                          {item.badge}
+                        </span>
+                      )}
+                    </div>
+                  </Button>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {(footerContent || user?.email) && (
+        <div className={styles.footerGroup}>
+          {footerContent && !isCollapsed && (
+            <div className={styles.footerContent}>{footerContent}</div>
+          )}
+
+          {user?.email && (
+            <div className={styles.userFooter}>
+              <button
+                type="button"
+                ref={userFooterButtonRef}
+                className={styles.userFooterButton}
+                onClick={() => setIsUserMenuOpen((prev) => !prev)}
+              >
+                <span className={styles.avatar}>{getInitial(user.email)}</span>
+                {!isCollapsed && <span className={styles.userEmail}>{user.email}</span>}
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {isUserMenuOpen && userMenuPosition && user?.email && createPortal(
+        <div
+          ref={userMenuRef}
+          className={styles.userMenu}
+          style={{ bottom: userMenuPosition.bottom, left: userMenuPosition.left, width: userMenuPosition.width }}
+        >
+          <div className={styles.userMenuEmail}>{user.email}</div>
+          {userMenuItems.map((menuItem) => {
+            const Icon = menuItem.icon;
+            return (
+              <button
+                key={menuItem.id ?? menuItem.label}
+                type="button"
+                className={`${styles.userMenuItem} ${menuItem.variant === 'danger' ? styles.userMenuItemDanger : ''}`}
+                onClick={() => {
+                  setIsUserMenuOpen(false);
+                  menuItem.onClick && menuItem.onClick();
+                }}
+              >
+                {Icon && <Icon size={16} />}
+                <span>{menuItem.label}</span>
+              </button>
+            );
+          })}
+        </div>,
+        document.body
+      )}
+
+      {contextMenu && createPortal(
+        <div
+          ref={contextMenuRef}
+          className={styles.contextMenu}
+          style={{ top: contextMenu.y, left: contextMenu.x }}
+        >
+          {onItemEdit && contextMenu.item.isOwner !== false && (
+            <button
+              type="button"
+              className={styles.contextMenuItem}
+              onClick={() => {
+                onItemEdit(contextMenu.item);
+                setContextMenu(null);
+              }}
+            >
+              <Pencil size={14} />
+              <span>{TEXTS.editItem}</span>
+            </button>
+          )}
+          {onItemCollaborators && contextMenu.item.isOwner !== false && contextMenu.item.isShared && (
+            <button
+              type="button"
+              className={styles.contextMenuItem}
+              onClick={() => {
+                onItemCollaborators(contextMenu.item);
+                setContextMenu(null);
+              }}
+            >
+              <Users size={14} />
+              <span>{TEXTS.collaboratorsItem}</span>
+            </button>
+          )}
+          {onItemPin && (
+            <button
+              type="button"
+              className={styles.contextMenuItem}
+              onClick={() => {
+                onItemPin(contextMenu.item);
+                setContextMenu(null);
+              }}
+            >
+              {contextMenu.item.pinned ? <PinOff size={14} /> : <Pin size={14} />}
+              <span>{contextMenu.item.pinned ? TEXTS.unpinItem : TEXTS.pinItem}</span>
+            </button>
+          )}
+          {onItemDelete && (
+            <button
+              type="button"
+              className={`${styles.contextMenuItem} ${styles.contextMenuItemDanger}`}
+              onClick={() => {
+                onItemDelete(contextMenu.item);
+                setContextMenu(null);
+              }}
+            >
+              <Trash2 size={14} />
+              <span>{contextMenu.item.isOwner === false ? TEXTS.leaveItem : TEXTS.deleteItem}</span>
+            </button>
+          )}
+        </div>,
+        document.body
+      )}
+    </aside>
+  );
+};
+
+export default ProSidebar;