anteriority-ui 1.0.0

package/screens/components/AlertModal/AlertModal.stories.jsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import AlertModal from './AlertModal';
+
+export default {
+  title: 'Components/AlertModal',
+  component: AlertModal,
+};
+
+export const Plain = {
+  args: {
+    open: true,
+    title: 'Alerta',
+    message: '¿Estás seguro de que deseas continuar con esta acción?',
+    confirmText: 'Ok',
+    cancelText: 'Cancelar',
+    onClose: () => console.log('closed'),
+    onConfirm: () => console.log('confirmed'),
+  },
+};
+
+export const WithTextInput = {
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <AlertModal
+        {...args}
+        inputValue={value}
+        onInputChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+  args: {
+    open: true,
+    title: 'Renombrar elemento',
+    message: 'Ingresa el nuevo nombre para continuar.',
+    showInput: true,
+    inputType: 'text',
+    inputLabel: 'Nombre',
+    inputPlaceholder: 'Escribe un nombre...',
+    confirmText: 'Guardar',
+    cancelText: 'Cancelar',
+    onClose: () => console.log('closed'),
+    onConfirm: () => console.log('confirmed'),
+  },
+};
+
+export const WithSelectInput = {
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <AlertModal
+        {...args}
+        inputValue={value}
+        onInputChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+  args: {
+    open: true,
+    title: 'Seleccionar motivo',
+    message: 'Elige el motivo de esta acción.',
+    showInput: true,
+    inputType: 'select',
+    inputLabel: 'Motivo',
+    inputPlaceholder: 'Selecciona una opción',
+    inputOptions: [
+      { value: 'duplicado', label: 'Registro duplicado' },
+      { value: 'error', label: 'Error de captura' },
+      { value: 'otro', label: 'Otro motivo' },
+    ],
+    confirmText: 'Aceptar',
+    cancelText: 'Cancelar',
+    onClose: () => console.log('closed'),
+    onConfirm: () => console.log('confirmed'),
+  },
+};
+
+export const WithImage = {
+  args: {
+    open: true,
+    title: 'Foto de Perfil',
+    imageUrl: 'https://i.pravatar.cc/300?img=12',
+    confirmText: 'Cerrar',
+    showWarningIcon: false,
+    onClose: () => console.log('closed'),
+  },
+};

package/screens/components/Badge/index.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styles from './index.module.css';
+
+const Badge = ({
+  icon: Icon,
+  label,
+  value,
+  iconColor = "#000000ff",
+  bgColor,
+  borderColor,
+  labelColor,
+  valueColor,
+  style = {},
+}) => {
+  return (
+    <div
+      className={styles.badgeContainer}
+      style={{
+        ...(bgColor ? { '--badge-bg': bgColor } : {}),
+        ...(borderColor ? { '--badge-border': borderColor } : {}),
+        ...(labelColor ? { '--badge-label': labelColor } : {}),
+        ...(valueColor ? { '--badge-value': valueColor } : {}),
+        ...style,
+      }}
+    >
+      {Icon && <Icon size={18} color={iconColor} />}
+      {label && <span className={styles.badgeLabel}>{label}:</span>}
+      <span className={styles.badgeValue}>{value}</span>
+    </div>
+  );
+};
+
+export default Badge;

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

@@ -0,0 +1,18 @@
+.badgeContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: var(--badge-bg, #fff);
+  border: 1px solid var(--badge-border, #e2e8f0);
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+}
+
+.badgeLabel {
+  font-weight: 600;
+  color: var(--badge-label, #334155);
+}
+
+.badgeValue {
+  color: var(--badge-value, #64748b);
+}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Star, Clock, AlertTriangle } from 'lucide-react';
+import Badge from './index';
+
+export default {
+  title: 'Components/Badge',
+  component: Badge,
+};
+
+export const Default = {
+  args: {
+    label: 'Estado',
+    value: 'Activo',
+  },
+};
+
+export const WithIcon = {
+  args: {
+    icon: Star,
+    label: 'Puntaje',
+    value: '4.8',
+    iconColor: '#f59e0b',
+  },
+};
+
+export const ValueOnly = {
+  args: {
+    icon: Clock,
+    value: '12:30',
+  },
+};
+
+export const Warning = {
+  args: {
+    icon: AlertTriangle,
+    label: 'Alerta',
+    value: 'Revisar',
+    iconColor: '#ef4444',
+  },
+};

package/screens/components/Barnner/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styles from './index.module.css';
+
+const Barnner = ({ children, icon: Icon, type = 'default', className = '', bgColor, textColor, borderColor }) => {
+  const typeClass = styles[`badge${type.charAt(0).toUpperCase() + type.slice(1)}`] || styles.badgeDefault;
+
+  const overrideStyle = {
+    ...(bgColor ? { backgroundColor: bgColor } : {}),
+    ...(textColor ? { color: textColor } : {}),
+    ...(borderColor ? { borderColor, borderStyle: 'solid', borderWidth: '1px' } : {}),
+  };
+
+  return (
+    <div className={`${styles.badge} ${typeClass} ${className}`} style={overrideStyle}>
+      {Icon && <Icon size={14} />}
+      <span>{children}</span>
+    </div>
+  );
+};
+
+export default Barnner;

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

@@ -0,0 +1,33 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 7px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: capitalize;
+  width: max-content;
+}
+
+.badgeDefault {
+  background: #e2e8f0;
+  color: #334155;
+}
+
+.badgeSuccess {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.badgeWarning {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.badgeDanger {
+  background: #fee2e2;
+  color: #991b1b;
+}

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { CheckCircle, AlertTriangle, XCircle } from 'lucide-react';
+import Barnner from './index';
+
+export default {
+  title: 'Components/Barnner',
+  component: Barnner,
+};
+
+export const Default = {
+  args: {
+    type: 'default',
+    children: 'Default',
+  },
+};
+
+export const Success = {
+  args: {
+    type: 'success',
+    icon: CheckCircle,
+    children: 'Completado',
+  },
+};
+
+export const Warning = {
+  args: {
+    type: 'warning',
+    icon: AlertTriangle,
+    children: 'Pendiente',
+  },
+};
+
+export const Danger = {
+  args: {
+    type: 'danger',
+    icon: XCircle,
+    children: 'Cancelado',
+  },
+};

package/screens/components/BlueLink/index.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import ModalTooltip from '../ModalTooltip/ModalTooltip';
+import styles from './index.module.css';
+
+export default function BlueLink({ label, url, navigate, color }) {
+  const handleClick = (e) => {
+    e.preventDefault();
+    if (url.startsWith('http://') || url.startsWith('https://')) {
+      window.open(url, '_blank');
+    } else {
+      if (navigate) navigate(url);
+    }
+  };
+
+  return (
+    <ModalTooltip text={`Ir a ${label}`}>
+      <a
+        href={url}
+        className={styles.blueLink}
+        onClick={handleClick}
+        style={color ? { '--bluelink-color': color } : undefined}
+      >
+        {label}
+      </a>
+    </ModalTooltip>
+  );
+}

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

@@ -0,0 +1,11 @@
+.blueLink {
+  color: var(--bluelink-color, #2563eb);
+  text-decoration: underline;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.blueLink:hover {
+  color: #1d4ed8;
+}

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import BlueLink from './index';
+
+export default {
+  title: 'Components/BlueLink',
+  component: BlueLink,
+};
+
+export const ExternalUrl = {
+  args: {
+    label: 'Visitar sitio web',
+    url: 'https://example.com',
+  },
+};
+
+export const InternalNavigation = {
+  args: {
+    label: 'Ir al perfil',
+    url: '/profile/123',
+    navigate: (path) => console.log('navigate to', path),
+  },
+};
+
+export const LongLabel = {
+  args: {
+    label: 'Ver documento adjunto completo',
+    url: 'https://example.com/documento.pdf',
+  },
+};

package/screens/components/Breadcrumbs/index.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { ChevronRight, Home } from 'lucide-react';
+import styles from './index.module.css';
+
+/**
+ * Generic breadcrumb trail. `items` is the full path in order — the last
+ * entry is always rendered as the current page (a highlighted chip, not a
+ * link), regardless of whether it has an `onClick`; every earlier entry
+ * with an `onClick` renders as a clickable crumb.
+ *
+ * Crumbs animate in with a small staggered fade (via --crumb-index) so the
+ * trail feels alive when it changes — e.g. drilling into a session — rather
+ * than an instant text swap. Respects prefers-reduced-motion.
+ */
+export const Breadcrumbs = ({ items = [], className = '', iconColor, activeBgColor, linkColor }) => {
+  if (!items.length) return null;
+
+  return (
+    <nav
+      aria-label="breadcrumb"
+      className={`${styles.breadcrumbs} ${className}`}
+      style={{
+        ...(iconColor ? { '--crumb-icon-color': iconColor } : {}),
+        ...(activeBgColor ? { '--crumb-active-bg': activeBgColor } : {}),
+        ...(linkColor ? { '--crumb-link-color': linkColor } : {}),
+      }}
+    >
+      <ol className={styles.list}>
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+
+          return (
+            <li
+              key={item.id ?? item.label ?? index}
+              className={styles.item}
+              style={{ '--crumb-index': index }}
+            >
+              {index === 0 && <Home size={14} className={styles.homeIcon} aria-hidden="true" />}
+
+              {!isLast && item.onClick ? (
+                <button type="button" className={styles.link} onClick={item.onClick}>
+                  <span className={styles.linkLabel}>{item.label}</span>
+                </button>
+              ) : (
+                <span
+                  className={`${styles.crumbText} ${isLast ? styles.current : ''}`}
+                  aria-current={isLast ? 'page' : undefined}
+                >
+                  {item.label}
+                </span>
+              )}
+
+              {!isLast && <ChevronRight size={14} className={styles.separator} aria-hidden="true" />}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+export default Breadcrumbs;

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

@@ -0,0 +1,158 @@
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 4px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  animation: crumbEnter 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation-delay: calc(var(--crumb-index, 0) * 45ms);
+}
+
+@keyframes crumbEnter {
+  from {
+    opacity: 0;
+    transform: translateY(3px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.homeIcon {
+  color: var(--crumb-icon-color, #7c9cff);
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.breadcrumbs:hover .homeIcon {
+  transform: scale(1.08) rotate(-4deg);
+}
+
+/* Clickable crumb: plain text weight/size, with an animated underline that
+   grows from the left on hover instead of a boxy button background. */
+.link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  background: transparent;
+  padding: 3px 2px;
+  margin: 0;
+  font: inherit;
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--crumb-link-color, #9ba1ae);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: color 0.18s ease;
+}
+
+.linkLabel {
+  position: relative;
+  display: inline-block;
+}
+
+.linkLabel::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -3px;
+  height: 1.5px;
+  background: currentColor;
+  border-radius: 1px;
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.link:hover,
+.link:focus-visible {
+  color: #e6e8ec;
+}
+
+.link:hover .linkLabel::after,
+.link:focus-visible .linkLabel::after {
+  transform: scaleX(1);
+}
+
+.link:active {
+  color: var(--crumb-icon-color, #7c9cff);
+  transition: color 0.05s ease;
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--crumb-icon-color, #7c9cff);
+  outline-offset: 2px;
+}
+
+.crumbText {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--crumb-link-color, #9ba1ae);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 360px;
+}
+
+/* Current page: a soft pill instead of plain text, with a quick pulse on
+   mount so a newly-arrived crumb (e.g. opening a session) draws the eye. */
+.current {
+  font-weight: 700;
+  color: #e6e8ec;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: var(--crumb-active-bg, rgba(124, 156, 255, 0.14));
+  animation: currentPulse 0.5s ease;
+}
+
+@keyframes currentPulse {
+  from {
+    background: rgba(124, 156, 255, 0.32);
+    transform: scale(1.03);
+  }
+  to {
+    background: rgba(124, 156, 255, 0.14);
+    transform: scale(1);
+  }
+}
+
+.separator {
+  color: #4b5563;
+  flex-shrink: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .item {
+    animation: none;
+  }
+
+  .current {
+    animation: none;
+  }
+
+  .homeIcon,
+  .link,
+  .linkLabel::after {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Breadcrumbs } from './index';
+
+export default {
+  title: 'Components/Breadcrumbs',
+  component: Breadcrumbs,
+};
+
+export const Default = {
+  args: {
+    items: [
+      { label: 'Inicio', onClick: () => console.log('go home') },
+      { label: 'Pacientes', onClick: () => console.log('go patients') },
+      { label: 'Juan Pérez' },
+    ],
+  },
+};
+
+export const TwoLevels = {
+  args: {
+    items: [
+      { label: 'Inicio', onClick: () => console.log('go home') },
+      { label: 'Configuración' },
+    ],
+  },
+};
+
+export const DeepPath = {
+  args: {
+    items: [
+      { label: 'Inicio', onClick: () => console.log('go home') },
+      { label: 'Sesiones', onClick: () => console.log('go sessions') },
+      { label: '2024-05-10', onClick: () => console.log('go date') },
+      { label: 'Detalle' },
+    ],
+  },
+};