anteriority-ui 1.0.0

package/screens/components/ScrollBar/index.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import styles from './index.module.css';
+import { useScrollbar } from './utils';
+
+export default function ScrollBar({
+  children,
+  vertical = true,
+  horizontal = true,
+  autoHide = true,
+  maxHeight,
+  className = '',
+  contentClassName = '',
+  style
+}) {
+  const { scrollRef, thumb, visible, handleScroll, handleMouseEnter, handleMouseLeave, startDrag } = useScrollbar({
+    vertical,
+    horizontal,
+    autoHide
+  });
+
+  return (
+    <div
+      className={`${styles.root} ${className}`}
+      style={style}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div
+        ref={scrollRef}
+        className={`${styles.scrollArea} ${contentClassName}`}
+        style={{
+          overflowY: vertical ? 'auto' : 'hidden',
+          overflowX: horizontal ? 'auto' : 'hidden',
+          maxHeight
+        }}
+        onScroll={handleScroll}
+      >
+        {children}
+      </div>
+
+      {vertical && thumb.v.size > 0 && (
+        <div className={`${styles.trackVertical} ${visible ? styles.trackVisible : ''}`}>
+          <div
+            className={styles.thumbVertical}
+            style={{ height: thumb.v.size, transform: `translateY(${thumb.v.offset}px)` }}
+            onMouseDown={(e) => startDrag('v', e)}
+          />
+        </div>
+      )}
+
+      {horizontal && thumb.h.size > 0 && (
+        <div className={`${styles.trackHorizontal} ${visible ? styles.trackVisible : ''}`}>
+          <div
+            className={styles.thumbHorizontal}
+            style={{ width: thumb.h.size, transform: `translateX(${thumb.h.offset}px)` }}
+            onMouseDown={(e) => startDrag('h', e)}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,78 @@
+.root {
+  position: relative;
+  width: 100%;
+}
+
+.scrollArea {
+  width: 100%;
+  height: 100%;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.scrollArea::-webkit-scrollbar {
+  display: none;
+}
+
+.trackVertical {
+  position: absolute;
+  top: 4px;
+  right: 3px;
+  bottom: 4px;
+  width: 8px;
+  border-radius: 999px;
+  background-color: rgba(148, 163, 184, 0.12);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  z-index: 5;
+}
+
+.trackHorizontal {
+  position: absolute;
+  left: 4px;
+  right: 4px;
+  bottom: 3px;
+  height: 8px;
+  border-radius: 999px;
+  background-color: rgba(148, 163, 184, 0.12);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  z-index: 5;
+}
+
+.trackVisible {
+  opacity: 1;
+}
+
+.thumbVertical {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  border-radius: 999px;
+  background-color: rgba(100, 116, 139, 0.45);
+  cursor: pointer;
+  pointer-events: auto;
+  transition: background-color 0.15s ease;
+}
+
+.thumbHorizontal {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  border-radius: 999px;
+  background-color: rgba(100, 116, 139, 0.45);
+  cursor: pointer;
+  pointer-events: auto;
+  transition: background-color 0.15s ease;
+}
+
+.thumbVertical:hover,
+.thumbVertical:active,
+.thumbHorizontal:hover,
+.thumbHorizontal:active {
+  background-color: rgba(71, 85, 105, 0.75);
+}

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

@@ -0,0 +1,64 @@
+import ScrollBar from './index';
+
+export default {
+  title: 'Components/ScrollBar',
+  component: ScrollBar,
+};
+
+const LongContent = () => (
+  <div style={{ padding: '8px 16px' }}>
+    {Array.from({ length: 30 }).map((_, i) => (
+      <p key={i}>Line {i + 1} of scrollable content.</p>
+    ))}
+  </div>
+);
+
+const WideContent = () => (
+  <div style={{ width: '1600px', padding: '8px 16px' }}>
+    This is a very wide line of content that forces horizontal scrolling to appear within the ScrollBar container.
+  </div>
+);
+
+export const Vertical = {
+  args: {
+    vertical: true,
+    horizontal: false,
+    autoHide: true,
+    maxHeight: 200,
+    children: <LongContent />,
+  },
+  render: (args) => (
+    <div style={{ width: 320 }}>
+      <ScrollBar {...args} />
+    </div>
+  ),
+};
+
+export const Horizontal = {
+  args: {
+    vertical: false,
+    horizontal: true,
+    autoHide: true,
+    children: <WideContent />,
+  },
+  render: (args) => (
+    <div style={{ width: 320 }}>
+      <ScrollBar {...args} />
+    </div>
+  ),
+};
+
+export const AlwaysVisible = {
+  args: {
+    vertical: true,
+    horizontal: false,
+    autoHide: false,
+    maxHeight: 180,
+    children: <LongContent />,
+  },
+  render: (args) => (
+    <div style={{ width: 320 }}>
+      <ScrollBar {...args} />
+    </div>
+  ),
+};

package/screens/components/ScrollBar/utils.js

@@ -0,0 +1,127 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+
+const HIDE_DELAY = 800;
+const MIN_THUMB_SIZE = 24;
+
+const EMPTY_THUMB = { v: { size: 0, offset: 0 }, h: { size: 0, offset: 0 } };
+
+export function useScrollbar({ vertical = true, horizontal = true, autoHide = true } = {}) {
+  const scrollRef = useRef(null);
+  const thumbRef = useRef(EMPTY_THUMB);
+  const [thumb, setThumb] = useState(EMPTY_THUMB);
+  const [visible, setVisible] = useState(!autoHide);
+  const hideTimeoutRef = useRef(null);
+  const dragStateRef = useRef(null);
+
+  const measure = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const next = { v: { size: 0, offset: 0 }, h: { size: 0, offset: 0 } };
+
+    if (vertical && el.scrollHeight > el.clientHeight) {
+      const ratio = el.clientHeight / el.scrollHeight;
+      const size = Math.max(ratio * el.clientHeight, MIN_THUMB_SIZE);
+      const travel = el.clientHeight - size;
+      const scrollRange = el.scrollHeight - el.clientHeight;
+      next.v = { size, offset: scrollRange > 0 ? (el.scrollTop / scrollRange) * travel : 0 };
+    }
+
+    if (horizontal && el.scrollWidth > el.clientWidth) {
+      const ratio = el.clientWidth / el.scrollWidth;
+      const size = Math.max(ratio * el.clientWidth, MIN_THUMB_SIZE);
+      const travel = el.clientWidth - size;
+      const scrollRange = el.scrollWidth - el.clientWidth;
+      next.h = { size, offset: scrollRange > 0 ? (el.scrollLeft / scrollRange) * travel : 0 };
+    }
+
+    thumbRef.current = next;
+    setThumb(next);
+  }, [vertical, horizontal]);
+
+  const showThenHide = useCallback(() => {
+    if (!autoHide) return;
+    setVisible(true);
+    clearTimeout(hideTimeoutRef.current);
+    hideTimeoutRef.current = setTimeout(() => setVisible(false), HIDE_DELAY);
+  }, [autoHide]);
+
+  const handleScroll = useCallback(() => {
+    measure();
+    showThenHide();
+  }, [measure, showThenHide]);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    // ResizeObserver fires an initial callback right after observe(), so it
+    // also covers the first measurement without calling setState synchronously here.
+    const ro = new ResizeObserver(() => measure());
+    ro.observe(el);
+    if (el.firstElementChild) ro.observe(el.firstElementChild);
+
+    return () => ro.disconnect();
+  }, [measure]);
+
+  useEffect(() => () => clearTimeout(hideTimeoutRef.current), []);
+
+  const handleMouseEnter = useCallback(() => {
+    clearTimeout(hideTimeoutRef.current);
+    setVisible(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    showThenHide();
+  }, [showThenHide]);
+
+  const startDrag = useCallback((axis, event) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    event.preventDefault();
+    event.stopPropagation();
+
+    const size = axis === 'v' ? thumbRef.current.v.size : thumbRef.current.h.size;
+    const travel = axis === 'v' ? el.clientHeight - size : el.clientWidth - size;
+    const scrollRange = axis === 'v' ? el.scrollHeight - el.clientHeight : el.scrollWidth - el.clientWidth;
+    const factor = travel > 0 ? scrollRange / travel : 0;
+
+    dragStateRef.current = {
+      axis,
+      startX: event.clientX,
+      startY: event.clientY,
+      startScrollLeft: el.scrollLeft,
+      startScrollTop: el.scrollTop,
+      factor
+    };
+    setVisible(true);
+
+    const onMove = (ev) => {
+      const state = dragStateRef.current;
+      const target = scrollRef.current;
+      if (!state || !target) return;
+      if (state.axis === 'v') {
+        target.scrollTop = state.startScrollTop + (ev.clientY - state.startY) * state.factor;
+      } else {
+        target.scrollLeft = state.startScrollLeft + (ev.clientX - state.startX) * state.factor;
+      }
+    };
+    const onUp = () => {
+      dragStateRef.current = null;
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+      showThenHide();
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  }, [showThenHide]);
+
+  return {
+    scrollRef,
+    thumb,
+    visible,
+    handleScroll,
+    handleMouseEnter,
+    handleMouseLeave,
+    startDrag
+  };
+}

package/screens/components/Sidebar/constants.js

@@ -0,0 +1,16 @@
+export const TEXTS = {
+  searchPlaceholder: "Buscar...",
+  expandMenu: "Expandir menú",
+  collapseMenu: "Colapsar menú",
+  openMenu: "Ctrl + B",
+  closeMenu: "Ctrl + B",
+  logout: "Cerrar sesión",
+  logoutConfirmTitle: "¿Cerrar sesión?",
+  logoutConfirmMessage: "¿Estás seguro de que deseas salir del sistema?",
+  editItem: "Editar",
+  deleteItem: "Eliminar",
+  leaveItem: "Salir",
+  pinItem: "Fijar",
+  unpinItem: "Desfijar",
+  collaboratorsItem: "Colaboradores"
+};