anteriority-ui 1.0.0

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

@@ -0,0 +1,162 @@
+.configContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    width: 100%;
+    max-width: 500px;
+}
+
+.disabledContainer {
+    opacity: 0.7;
+}
+
+.inputGroup {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+}
+
+.inputWrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: #f8fafc;
+    border: 1.5px solid #e2e8f0;
+    border-radius: 10px;
+    padding: 0 1rem;
+    flex: 1;
+    height: 48px;
+    transition: all 0.2s ease;
+}
+
+.inputWrapper:focus-within {
+    border-color: var(--placeholderbutton-focus, #2563eb);
+    background: #fff;
+    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
+}
+
+.inputIcon {
+    color: #94a3b8;
+    margin-right: 12px;
+}
+
+.daysInput {
+    border: none;
+    background: transparent;
+    padding: 10px 0;
+    width: 100%;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #1e293b;
+    outline: none;
+}
+
+.daysInput::-webkit-inner-spin-button,
+.daysInput::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.unitText {
+    font-size: 0.7rem;
+    font-weight: 800;
+    color: #64748b;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-left: 8px;
+    background: var(--placeholderbutton-unit-bg, #e2e8f0);
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+
+.saveButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background-color: #2563eb;
+    color: white;
+    border: none;
+    height: 48px;
+    padding: 0 1.5rem;
+    border-radius: 10px;
+    font-weight: 600;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.saveButton:hover:not(:disabled) {
+    background-color: #1d4ed8;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
+}
+
+.saveButton:active {
+    transform: translateY(0);
+}
+
+.saveButton:disabled {
+    background-color: #94a3b8;
+    cursor: not-allowed;
+}
+
+.statusMessage {
+    margin: 0;
+    font-size: 0.85rem;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    border-radius: 6px;
+}
+
+.success {
+    color: #059669;
+    background: #ecfdf5;
+}
+
+.error {
+    color: #dc2626;
+    background: #fef2f2;
+}
+
+.hintText {
+    font-size: 0.8rem;
+    color: #64748b;
+    margin: 0;
+    line-height: 1.5;
+    border-left: 3px solid #e2e8f0;
+    padding-left: 12px;
+}
+
+.infoTextDisabled {
+    font-size: 0.8rem;
+    color: #dc2626;
+    margin: 0;
+}
+
+.spinner {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+@media (max-width: 640px) {
+  .configContainer {
+    max-width: 100%;
+  }
+
+  .inputGroup {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .saveButton {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,69 @@
+import { Calendar } from 'lucide-react';
+import PlaceholderButton from './index';
+
+export default {
+  title: 'Components/PlaceholderButton',
+  component: PlaceholderButton,
+};
+
+const fakeSavePromise = (value) =>
+  new Promise((resolve) => {
+    setTimeout(() => {
+      console.log('saved', value);
+      resolve({ message: 'Guardado correctamente' });
+    }, 800);
+  });
+
+export const Default = {
+  args: {
+    icon: Calendar,
+    placeholder: 'Días',
+    unitText: 'días',
+    buttonText: 'Guardar',
+    hintText: 'Define cuántos días de anticipación se requieren.',
+    initialValue: '7',
+    inputType: 'number',
+    min: '1',
+    onSavePromise: fakeSavePromise,
+    successMessage: 'Valor guardado con éxito',
+    errorMessage: 'Ocurrió un error al guardar',
+    validationErrorMsg: 'El valor debe ser mayor o igual a 1',
+  },
+};
+
+export const Disabled = {
+  args: {
+    ...Default.args,
+    disabled: true,
+    disabledHintText: 'Esta opción está deshabilitada por ahora.',
+  },
+};
+
+export const Multiline = {
+  args: {
+    placeholder: 'Escribe una nota...',
+    buttonText: 'Guardar nota',
+    hintText: 'Puedes usar Ctrl+Enter para agregar una nueva línea.',
+    initialValue: '',
+    multiline: true,
+    onSavePromise: fakeSavePromise,
+    successMessage: 'Nota guardada',
+    errorMessage: 'Error al guardar la nota',
+    validationErrorMsg: 'La nota no puede estar vacía',
+    clearOnSuccess: true,
+  },
+};
+
+export const TextInput = {
+  args: {
+    placeholder: 'Ingresa un texto',
+    buttonText: 'Guardar',
+    hintText: 'Texto libre de ejemplo.',
+    initialValue: '',
+    inputType: 'text',
+    onSavePromise: fakeSavePromise,
+    successMessage: 'Guardado',
+    errorMessage: 'Error',
+    validationErrorMsg: 'Campo requerido',
+  },
+};

package/screens/components/PlaceholderButton/utils.js

@@ -0,0 +1,42 @@
+export const handleAction = async ({
+    actionPromise,
+    value,
+    setIsSaving,
+    setMessage,
+    clearCache,
+    successMessage,
+    errorMessage,
+    validationErrorMsg,
+    validate,
+    setValue,
+    clearOnSuccess
+}) => {
+    if (validate && !validate(value)) {
+        setMessage({ text: validationErrorMsg, type: 'error' });
+        return;
+    }
+
+    setIsSaving(true);
+    setMessage({ text: '', type: '' });
+
+    try {
+        const response = await actionPromise(value);
+        if (clearCache) clearCache();
+        if (clearOnSuccess && setValue) setValue('');
+        
+        const apiMsg = response?.message || (typeof response === 'string' ? response : null);
+        const finalSuccessMessage = apiMsg || successMessage;
+        
+        setMessage({ text: finalSuccessMessage, type: 'success' });
+        setTimeout(() => setMessage({ text: '', type: '' }), 3000);
+    } catch (error) {
+        console.error(errorMessage, error);
+        
+        const apiErrorMsg = error?.message || error?.body?.message || error?.body?.error || (typeof error === 'string' ? error : null);
+        const finalErrorMessage = apiErrorMsg || errorMessage;
+        
+        setMessage({ text: finalErrorMessage, type: 'error' });
+    } finally {
+        setIsSaving(false);
+    }
+};

package/screens/components/Profile/Avatar/index.jsx

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import Avatar from '@mui/material/Avatar';
+import { Camera } from 'lucide-react';
+import { getAvatarInitial, stringToColor } from './utils'; 
+import styles from './index.module.css';
+import ModalTooltip from '../../ModalTooltip/ModalTooltip';
+import AlertModal from '../../AlertModal/AlertModal';
+import Loading from '../../Loading/index';
+
+export default function UserAvatar({ 
+  src, 
+  name = 'Usuario', 
+  size = 35, 
+  editable = false, 
+  onEditClick = () => {},
+  loading = false,
+  viewable = false,
+  isActive = null,
+  fallbackBgColor,
+  activeStatusColor = '#10b981',
+  inactiveStatusColor = '#ef4444'
+}) {
+  const [isFullViewOpen, setIsFullViewOpen] = useState(false);
+
+  if (loading) {
+    return (
+      <div 
+        style={{ 
+          width: size, 
+          height: size, 
+          display: 'flex', 
+          alignItems: 'center', 
+          justifyContent: 'center',
+          backgroundColor: '#f3f4f6',
+          borderRadius: '50%'
+        }}
+      >
+        <Loading size="small" />
+      </div>
+    );
+  }
+
+  const initial = getAvatarInitial(name);
+  const backgroundColor = stringToColor(name);
+
+  const avatarElement = (
+    <Avatar
+      alt={name}
+      src={src || undefined}
+      className={styles.avatarContainer}
+      sx={{
+        width: size,
+        height: size,
+        fontSize: `${size * 0.43}px`,
+        bgcolor: src ? 'transparent' : backgroundColor,
+      }}
+    >
+      <span className={styles.fallbackText}>
+        {initial}
+      </span>
+    </Avatar>
+  );
+
+  return (
+    <>
+      <div 
+        className={`${styles.avatarWrapper} 
+        ${editable ? styles.editable : ''} 
+        ${viewable && src ? styles.viewable : ''}`} 
+        onClick={(e) => {
+          if (editable) {
+            if (typeof onEditClick === 'function') {
+              onEditClick(e);
+            }
+          } else if (viewable && src) {
+            setIsFullViewOpen(true);
+          }
+        }}
+        style={{
+          width: size,
+          height: size,
+          position: 'relative',
+          display: 'inline-flex',
+          ...(fallbackBgColor ? { '--avatar-fallback-bg': fallbackBgColor } : {}),
+        }}
+      >
+        {editable ? (
+          <ModalTooltip text='Cambiar Foto de Perfil' position="top">
+            {avatarElement}
+            <div className={styles.overlay}>
+              <Camera size={size * 0.45} />
+            </div>
+          </ModalTooltip>
+        ) : viewable && src ? (
+          <ModalTooltip text='Toca para ver imagen'>
+            {avatarElement}
+          </ModalTooltip>
+        ) : (
+          avatarElement
+        )}
+
+        {isActive !== null && isActive !== undefined && (
+          
+          <span 
+            className={styles.statusDot} 
+            style={{
+              backgroundColor: isActive ? activeStatusColor : inactiveStatusColor,
+              width: `${Math.max(8, size * 0.22)}px`,
+              height: `${Math.max(8, size * 0.22)}px`,
+            }} 
+          />
+        )}
+      </div>
+
+      <AlertModal 
+        open={isFullViewOpen}
+        title="Foto de Perfil"
+        imageUrl={src}
+        onClose={() => setIsFullViewOpen(false)}
+        showWarningIcon={false}
+        confirmText="Cerrar"
+      />
+    </>
+  );
+}

package/screens/components/Profile/Avatar/index.module.css

@@ -0,0 +1,86 @@
+.avatarWrapper {
+  position: relative;
+  display: inline-flex; /* Cambiado a inline-flex para contener perfectamente el avatar */
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: var(--avatar-fallback-bg, #193360); /* Tu color azul oscuro */
+  margin: 0 auto;
+}
+
+.editable {
+  cursor: pointer;
+}
+
+.avatarContainer {
+  /* Eliminamos display, align-items y justify-conten t para que MUI maneje su estructura */
+  user-select: none;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.avatarContainer:hover {
+  transform: scale(1.04);
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
+}
+
+.fallbackText {
+  font-weight: 700;
+  color: #ffffff;
+  text-align: center;
+  line-height: 1; /* Forzamos alineación vertical de la inicial */
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  color: #ffffff;
+}
+
+.avatarWrapper:hover .overlay {
+  opacity: 1;
+}
+
+.skeleton {
+  border-radius: 50%;
+  background: #f1f5f9;
+  animation: pulse 1.5s infinite;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+
+.viewable {
+  cursor: pointer;
+}
+
+.statusDot {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-radius: 50%;
+  border: 2px solid var(--color-card-bg, #ffffff);
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
+  pointer-events: none;
+  z-index: 2;
+}

package/screens/components/Profile/Avatar/index.stories.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import UserAvatar from './index';
+
+export default {
+  title: 'Components/Profile/Avatar',
+  component: UserAvatar,
+};
+
+export const Default = {
+  args: {
+    name: 'Ana Gomez',
+    size: 48,
+  },
+};
+
+export const WithImage = {
+  args: {
+    name: 'Luis Perez',
+    src: 'https://i.pravatar.cc/100?img=12',
+    size: 48,
+    viewable: true,
+  },
+};
+
+export const Editable = {
+  args: {
+    name: 'Marta Ruiz',
+    size: 64,
+    editable: true,
+    onEditClick: () => console.log('edit avatar clicked'),
+  },
+};
+
+export const WithStatusDot = {
+  args: {
+    name: 'Carlos Diaz',
+    size: 48,
+    isActive: true,
+  },
+};
+
+export const LoadingState = {
+  args: {
+    name: 'Ana Gomez',
+    size: 48,
+    loading: true,
+  },
+};

package/screens/components/Profile/Avatar/utils.js

@@ -0,0 +1,18 @@
+export const getAvatarInitial = (name) => {
+  if (!name) return '?';
+  return name.trim().charAt(0).toUpperCase();
+};
+
+export const stringToColor = (str) => {
+  if (!str) return '#0f6e52';
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  let color = '#';
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += `00${value.toString(16)}`.slice(-2);
+  }
+  return color;
+};

package/screens/components/Profile/index.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import UserAvatar from './Avatar/index';
+import { Pencil } from 'lucide-react';
+
+export default function UserProfileHeader({ username, avatarUrl, onEditClick, textColor = '#ffffff' }) {
+  return (
+    <div style={{ 
+      display: 'inline-flex', 
+      alignItems: 'center', 
+      gap: '12px',
+      height: '100%',
+      verticalAlign: 'middle'
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <UserAvatar 
+          src={avatarUrl} 
+          name={username} 
+          size={35} 
+        />
+      </div>
+      
+      <span style={{
+        color: textColor,
+        fontWeight: 700,
+        fontSize: '15px',
+        lineHeight: '1',
+        display: 'flex',
+        alignItems: 'center',
+        userSelect: 'none'
+      }}>
+        {username}
+      </span>
+      
+      <button
+        onClick={onEditClick}
+        style={{ 
+          background: 'none', 
+          border: 'none', 
+          cursor: 'pointer', 
+          display: 'flex', 
+          alignItems: 'center', 
+          justifyContent: 'center',
+          padding: '0',
+          color: textColor,
+          opacity: 0.85,
+          transition: 'opacity 0.2s',
+          height: '16px',
+          width: '16px'
+        }}
+        onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
+        onMouseLeave={(e) => e.currentTarget.style.opacity = '0.85'}
+        aria-label="Editar nombre"
+      >
+        <Pencil size={15} style={{ display: 'block' }} />
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import UserProfileHeader from './index';
+
+export default {
+  title: 'Components/Profile',
+  component: UserProfileHeader,
+  decorators: [
+    (Story) => (
+      <div style={{ background: 'var(--sidebar-bg, #0f172a)', padding: '16px', display: 'inline-block' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Default = {
+  args: {
+    username: 'Ana Gomez',
+    avatarUrl: '',
+    onEditClick: () => console.log('edit clicked'),
+  },
+};
+
+export const WithAvatarImage = {
+  args: {
+    username: 'Luis Perez',
+    avatarUrl: 'https://i.pravatar.cc/100?img=12',
+    onEditClick: () => console.log('edit clicked'),
+  },
+};
+
+export const LongUsername = {
+  args: {
+    username: 'Maria Fernanda Rodriguez Castillo',
+    avatarUrl: '',
+    onEditClick: () => console.log('edit clicked'),
+  },
+};