anteriority-ui 1.0.0

package/screens/components/Sidebar/index.module.css

@@ -0,0 +1,405 @@
+/* Sidebar base styling */
+.sidebar {
+  height: 100vh;
+  max-height: 100vh;
+  background: var(--sidebar-bg);
+  backdrop-filter: var(--sidebar-blur);
+  -webkit-backdrop-filter: var(--sidebar-blur);
+  border-radius: 0;
+  border: none;
+  border-right: var(--sidebar-border-right);
+  color: var(--sidebar-text);
+  padding: 24px 16px;
+  width: 280px;
+  min-width: 280px;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  box-sizing: border-box;
+  position: relative;
+  transition: width 0.3s ease, min-width 0.3s ease, padding 0.3s ease;
+}
+
+/* Collapsed state styling */
+.sidebar.collapsed {
+  width: 68px;
+  min-width: 68px;
+  padding: 20px 8px;
+}
+
+.sidebar.collapsed .sidebarHeader {
+  justify-content: center;
+  padding: 0;
+}
+
+.sidebar.collapsed .sidebarItemBtn {
+  padding: 10px 0 !important;
+  justify-content: center !important;
+}
+
+.sidebar.collapsed .btnLayout {
+  justify-content: center !important;
+}
+
+.sidebar.collapsed .leftPart {
+  justify-content: center !important;
+  flex: none !important;
+  gap: 0 !important;
+}
+
+/* Header section */
+.sidebarHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 4px;
+  min-height: 40px;
+  gap: 8px;
+}
+
+.headerContent {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.toggleBtn {
+  flex-shrink: 0;
+  width: 28px !important;
+  height: 28px !important;
+  min-width: 0 !important;
+  padding: 0 !important;
+  background-color: #ffffff !important;
+  border: 1px solid #cbd5e1 !important;
+  color: #475569 !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
+  z-index: 5;
+  border-radius: 50% !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.toggleBtn:hover {
+  background-color: var(--sidebar-avatar-bg, #0d52f8) !important;
+  color: #ffffff !important;
+  border-color: var(--sidebar-avatar-bg, #0d52f8) !important;
+}
+
+/* Search wrapper */
+.searchWrapper {
+  margin-top: 4px;
+}
+
+/* Navigation container */
+.navContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 4px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.navContainer::-webkit-scrollbar {
+  display: none;
+}
+
+.navContainer::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* Menu groups */
+.menuGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.groupTitle {
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: #94a3b8;
+  letter-spacing: 0.06em;
+  display: block;
+  padding-left: 8px;
+  text-transform: uppercase;
+}
+
+.buttonList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+/* Sidebar list items */
+.sidebarItemBtn {
+  width: 100% !important;
+  justify-content: flex-start !important;
+  align-items: center !important;
+  text-align: left !important;
+  padding: 10px 12px !important;
+  border-radius: 8px !important;
+  border: none !important;
+  box-shadow: none !important;
+  color: var(--sidebar-text-muted) !important;
+  background-color: transparent !important;
+  text-transform: none !important;
+  display: flex !important;
+  transition: background-color 0.2s, color 0.2s !important;
+}
+
+.btnLayout {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  width: 100% !important;
+  gap: 12px;
+}
+
+.leftPart {
+  display: flex !important;
+  align-items: center !important;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.icon {
+  font-size: 20px !important;
+  color: var(--sidebar-text-muted);
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.label {
+  font-size: 0.88rem;
+  font-weight: 500;
+  color: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Badge styles */
+.badge {
+  font-size: 0.65rem;
+  font-weight: 800;
+  padding: 2px 6px;
+  border-radius: 4px;
+  flex-shrink: 0;
+  text-transform: uppercase;
+}
+
+.badgePost { background: var(--sidebar-badge-post-bg, #dcfce7); color: var(--sidebar-badge-post-color, #15803d); }
+.badgeGet { background: var(--sidebar-badge-get-bg, #e0f2fe); color: var(--sidebar-badge-get-color, #0369a1); }
+.badgePut { background: var(--sidebar-badge-put-bg, #fef3c7); color: var(--sidebar-badge-put-color, #b45309); }
+.badgeDelete { background: var(--sidebar-badge-delete-bg, #fee2e2); color: var(--sidebar-badge-delete-color, #b91c1c); }
+.badgeInfo { background: var(--sidebar-badge-info-bg, #f1f5f9); color: var(--sidebar-badge-info-color, #475569); }
+
+.sidebarItemBtn:hover {
+  background-color: var(--sidebar-hover-bg) !important;
+  color: var(--sidebar-text-active) !important;
+}
+
+.dragHandle {
+  display: inline-flex;
+  align-items: center;
+  color: var(--sidebar-text-muted);
+  opacity: 0.5;
+  flex-shrink: 0;
+  cursor: grab;
+}
+
+.sidebarItemBtn:hover .dragHandle {
+  opacity: 0.9;
+}
+
+.pinnedIcon {
+  color: var(--sidebar-pinned-icon, #f59e0b);
+  flex-shrink: 0;
+}
+
+.dragging {
+  opacity: 0.5 !important;
+}
+
+.dragOver {
+  box-shadow: inset 0 2px 0 0 #0d52f8 !important;
+}
+
+.sidebarItemBtn:hover .icon {
+  color: var(--sidebar-text-active) !important;
+}
+
+/* Active navigation item styling */
+.activeBtn {
+  background-color: var(--sidebar-hover-bg) !important;
+  color: var(--sidebar-text-active) !important;
+  font-weight: 600 !important;
+}
+
+.activeBtn .icon {
+  color: var(--sidebar-text-active) !important;
+}
+
+/* Footer section: groups the optional footerContent slot and the user footer together
+   so both stay bottom-aligned and share a single top divider. */
+.footerGroup {
+  margin-top: auto;
+  border-top: 1px solid var(--sidebar-border);
+  padding-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* User footer: avatar + email, opens the user menu (Ajustes, Cómo usar, Cerrar sesión, etc.) */
+.userFooter {
+  position: relative;
+}
+
+.userFooterButton {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 6px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.2s;
+}
+
+.userFooterButton:hover {
+  background-color: var(--sidebar-hover-bg);
+}
+
+.avatar {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--sidebar-avatar-bg, #0d52f8);
+  color: #ffffff;
+  font-weight: 700;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+}
+
+.userEmail {
+  font-size: 0.82rem;
+  color: var(--sidebar-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Rendered through a portal into document.body (see Index.jsx) so it always
+   paints above the rest of the app, regardless of the sidebar's stacking
+   context; position is computed from the trigger button's bounding rect. */
+.userMenu {
+  position: fixed;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  z-index: 2000;
+}
+
+.userMenuEmail {
+  padding: 8px 10px;
+  font-size: 0.78rem;
+  color: #64748b;
+  border-bottom: 1px solid #e2e8f0;
+  margin-bottom: 4px;
+  word-break: break-all;
+}
+
+.userMenuItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-family: inherit;
+  color: #334155;
+  cursor: pointer;
+  text-align: left;
+}
+
+.userMenuItem:hover {
+  background-color: #f1f5f9;
+}
+
+.userMenuItemDanger {
+  color: #dc2626;
+}
+
+.userMenuItemDanger:hover {
+  background-color: #fef2f2;
+}
+
+/* Right-click context menu for sidebar items (Editar / Eliminar).
+   Also rendered through a portal into document.body — see Index.jsx. */
+.contextMenu {
+  position: fixed;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  z-index: 2000;
+  min-width: 150px;
+}
+
+.contextMenuItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-family: inherit;
+  color: #334155;
+  cursor: pointer;
+  text-align: left;
+}
+
+.contextMenuItem:hover {
+  background-color: #f1f5f9;
+}
+
+.contextMenuItemDanger {
+  color: #dc2626;
+}
+
+.contextMenuItemDanger:hover {
+  background-color: #fef2f2;
+}

package/screens/components/Sidebar/index.stories.jsx

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { Home, FileText, Settings, Users, LogOut, User } from 'lucide-react';
+import ProSidebar from './index';
+
+export default {
+  title: 'Components/Sidebar',
+  component: ProSidebar,
+};
+
+const groups = [
+  {
+    title: 'General',
+    items: [
+      { id: 'home', label: 'Inicio', icon: Home },
+      { id: 'docs', label: 'Documentos', icon: FileText, badge: 'GET', badgeType: 'get' },
+      { id: 'team', label: 'Equipo', icon: Users, isOwner: true, isShared: true },
+    ],
+  },
+  {
+    title: 'Configuración',
+    items: [
+      { id: 'settings', label: 'Ajustes', icon: Settings, pinned: true },
+    ],
+  },
+];
+
+const userMenuItems = [
+  { id: 'profile', label: 'Mi perfil', icon: User, onClick: () => console.log('profile clicked') },
+  { id: 'logout', label: 'Cerrar sesión', icon: LogOut, variant: 'danger', onClick: () => console.log('logout clicked') },
+];
+
+const SidebarWithState = (args) => {
+  const [activeId, setActiveId] = useState(args.activeId ?? groups[0].items[0].id);
+  return (
+    <div style={{ height: 600 }}>
+      <ProSidebar
+        {...args}
+        activeId={activeId}
+        onSelect={(item) => setActiveId(item.id)}
+      />
+    </div>
+  );
+};
+
+export const Default = {
+  render: (args) => <SidebarWithState {...args} />,
+  args: {
+    groups,
+    user: { email: 'jane.doe@example.com' },
+    userMenuItems,
+  },
+};
+
+export const WithItemActions = {
+  render: (args) => <SidebarWithState {...args} />,
+  args: {
+    groups,
+    user: { email: 'jane.doe@example.com' },
+    userMenuItems,
+    onItemEdit: (item) => console.log('edit', item),
+    onItemDelete: (item) => console.log('delete', item),
+    onItemPin: (item) => console.log('pin', item),
+    onItemCollaborators: (item) => console.log('collaborators', item),
+    onReorderItems: (orderedIds) => console.log('reordered', orderedIds),
+  },
+};
+
+export const Loading = {
+  render: (args) => <SidebarWithState {...args} />,
+  args: {
+    groups: [],
+    loading: true,
+    skeletonItems: 8,
+    user: { email: 'jane.doe@example.com' },
+  },
+};
+
+export const NotCollapsible = {
+  render: (args) => <SidebarWithState {...args} />,
+  args: {
+    groups,
+    collapsible: false,
+    user: { email: 'jane.doe@example.com' },
+    userMenuItems,
+  },
+};

package/screens/components/Sidebar/utils.js

@@ -0,0 +1,75 @@
+/**
+ * Filtra los grupos de menú y sus elementos basándose en un término de búsqueda.
+ */
+export function filterMenuGroups(groups, query) {
+  if (!groups || !Array.isArray(groups)) return [];
+  if (!query) return groups;
+
+  const lowercaseQuery = query.toLowerCase();
+
+  return groups
+    .map((group) => {
+      const filteredItems = (group.items || []).filter((item) => {
+        const matchesLabel = item.label?.toLowerCase().includes(lowercaseQuery);
+        // También buscamos en subItems si existieran
+        const matchesSubItems = item.subItems?.some(sub => 
+          sub.label?.toLowerCase().includes(lowercaseQuery)
+        );
+        return matchesLabel || matchesSubItems;
+      });
+
+      return {
+        ...group,
+        items: filteredItems,
+      };
+    })
+    .filter((group) => group.items.length > 0);
+}
+
+/**
+ * Determina si un evento de teclado corresponde al atajo Ctrl/Cmd+B para
+ * colapsar o expandir el sidebar.
+ */
+export function isSidebarToggleShortcut(event) {
+  return (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'b';
+}
+
+/**
+ * Invierte el estado de colapso del sidebar y lo persiste en localStorage.
+ * Usado tanto por el botón de toggle como por el atajo de teclado.
+ */
+export function toggleSidebarCollapsed(prevCollapsed) {
+  const next = !prevCollapsed;
+  localStorage.setItem('sidebar_collapsed', String(next));
+  return next;
+}
+
+/**
+ * Retorna la inicial (mayúscula) de un texto, usada para generar avatares.
+ */
+export function getInitial(value) {
+  if (!value) return '?';
+  const trimmed = String(value).trim();
+  return trimmed ? trimmed.charAt(0).toUpperCase() : '?';
+}
+
+/**
+ * Retorna la clase CSS correspondiente al tipo de badge de la opción del menú.
+ */
+export function getBadgeClass(styles, badgeType) {
+  if (!styles || !badgeType) return '';
+  
+  switch (badgeType) {
+    case 'post':
+      return styles.badgePost;
+    case 'get':
+      return styles.badgeGet;
+    case 'put':
+      return styles.badgePut;
+    case 'delete':
+      return styles.badgeDelete;
+    case 'info':
+    default:
+      return styles.badgeInfo;
+  }
+}

package/screens/components/Skeleton/index.jsx

@@ -0,0 +1,11 @@
+import styles from './index.module.css';
+
+const Skeleton = ({ width = '100%', height = '1em', radius = '6px', circle = false, className = '', style = {} }) => (
+  <span
+    className={`${styles.skeleton} ${className}`}
+    style={{ width, height, borderRadius: circle ? '50%' : radius, ...style }}
+  />
+);
+
+export default Skeleton;
+export { Skeleton };

package/screens/components/Skeleton/index.module.css

@@ -0,0 +1,26 @@
+.skeleton {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  background: rgba(128, 128, 128, 0.18);
+}
+
+.skeleton::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.35) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  animation: skeletonSweep 1.6s ease-in-out infinite;
+}
+
+@keyframes skeletonSweep {
+  100% {
+    transform: translateX(100%);
+  }
+}

package/screens/components/Skeleton/index.stories.jsx

@@ -0,0 +1,42 @@
+import Skeleton from './index';
+
+export default {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+};
+
+export const TextLine = {
+  args: {
+    width: '200px',
+    height: '1em',
+  },
+};
+
+export const Circle = {
+  args: {
+    circle: true,
+    width: 40,
+    height: 40,
+  },
+};
+
+export const Block = {
+  args: {
+    width: '100%',
+    height: '120px',
+    radius: '12px',
+  },
+};
+
+export const ListPreview = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 260 }}>
+      {Array.from({ length: 4 }).map((_, idx) => (
+        <div key={idx} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <Skeleton circle width={28} height={28} />
+          <Skeleton width={`${60 + (idx % 3) * 15}%`} height="12px" />
+        </div>
+      ))}
+    </div>
+  ),
+};

package/screens/components/SubSidebarLayout/index.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styles from './index.module.css';
+
+import Button from '../Button';
+
+export default function SubSidebarLayout({
+  menuItems = [],
+  activeItemId,
+  onItemClick,
+  children,
+  bgColor
+}) {
+  return (
+    <div className={styles.layoutWrapper}>
+      <aside
+        className={styles.subSidebar}
+        style={{
+          ...(bgColor ? { '--subsidebarlayout-bg': bgColor } : {}),
+        }}
+      >
+        <div className={styles.menuList}>
+          {menuItems.map(item => {
+            const isActive = activeItemId === item.id;
+            return (
+              <Button 
+                key={item.id}
+                variant={Button.VARIANTS.TAB}
+                size={Button.SIZES.LARGE}
+                active={isActive}
+                onClick={() => onItemClick(item.id, item)}
+              >
+                {item.icon && <span className={styles.iconWrapper}>{item.icon}</span>}
+                <span className={styles.label}>{item.label}</span>
+              </Button>
+            )
+          })}
+        </div>
+      </aside>
+      <div className={styles.contentArea}>
+        {children}
+      </div>
+    </div>
+  );
+}