@trii/components 2.0.60 → 2.0.64

package/dist/esm/types/components/ModalEvents/types/index.d.ts

@@ -0,0 +1,376 @@
+/// <reference types="react" />
+import { Moment } from 'moment';
+/**
+ * Modos de operación del modal
+ */
+export type ModalMode = 'create' | 'edit' | 'view' | 'duplicate';
+/**
+ * Tipos de elementos que puede manejar el modal
+ */
+export type ItemType = 'event' | 'task';
+/**
+ * Estructura de una notificación/recordatorio
+ */
+export interface Notification {
+    id?: string;
+    type: 'minutes' | 'hours' | 'days';
+    value: number;
+    sendToContact?: boolean;
+}
+/**
+ * Estructura de un calendario
+ */
+export interface Calendar {
+    id: string;
+    /** Nombre del calendario (para compatibilidad con versiones anteriores) */
+    name?: string;
+    /** Título del calendario (usado por la API de Trii) */
+    title?: string;
+    color?: string;
+}
+/**
+ * Estructura de un contacto
+ */
+export interface Contact {
+    id: string;
+    name: string;
+    email?: string;
+    phone?: string;
+    avatarUrl?: string;
+}
+/**
+ * Estructura de un usuario para compartir
+ */
+export interface User {
+    id: string;
+    name: string;
+    email?: string;
+    avatarUrl?: string;
+}
+/**
+ * Datos de un evento
+ *
+ * Nota para desarrolladores Trii: Mapeo de propiedades de la API:
+ * - title ← title
+ * - description ← details
+ * - startDate ← startAt (convertir a Moment)
+ * - endDate ← endAt (convertir a Moment)
+ * - allDay ← allDay
+ * - calendarId ← calendarId
+ * - color ← color
+ * - location ← location
+ * - isPrivate ← isPrivate
+ * - recurrence ← rule
+ * - notifications ← notifications
+ * - linkedContacts ← relatedContact
+ * - finalized ← finalized
+ */
+export interface EventData {
+    id?: string;
+    title: string;
+    /** Descripción del evento (API: details) */
+    description?: string;
+    /** Fecha y hora de inicio (API: startAt) */
+    startDate: Moment;
+    /** Fecha y hora de fin (API: endAt) */
+    endDate: Moment;
+    allDay: boolean;
+    calendarId: string;
+    color: string;
+    location?: string;
+    isPrivate?: boolean;
+    /** Regla de recurrencia (API: rule) */
+    recurrence?: string;
+    notifications: Notification[];
+    /** Contactos vinculados (API: relatedContact) */
+    linkedContacts: Contact[];
+    sharedUsers?: string[];
+    finalized?: boolean;
+}
+/**
+ * Datos de una tarea
+ */
+export interface TaskData {
+    id?: string;
+    title: string;
+    description?: string;
+    dueDate: Moment;
+    calendarId: string;
+    notifications: Notification[];
+    linkedContacts: Contact[];
+    sharedUsers?: string[];
+    finalized?: boolean;
+}
+/**
+ * Configuración de campos visibles
+ */
+export interface FieldsConfig {
+    showTitle?: boolean;
+    showDescription?: boolean;
+    showCalendar?: boolean;
+    showDateTime?: boolean;
+    showAllDay?: boolean;
+    showRecurrence?: boolean;
+    showColor?: boolean;
+    showLocation?: boolean;
+    showPrivate?: boolean;
+    showNotifications?: boolean;
+    showLinkedContacts?: boolean;
+    showSharedUsers?: boolean;
+}
+/**
+ * Textos personalizables del modal
+ */
+export interface ModalLabels {
+    createEvent?: string;
+    editEvent?: string;
+    viewEvent?: string;
+    createTask?: string;
+    editTask?: string;
+    viewTask?: string;
+    eventTab?: string;
+    taskTab?: string;
+    title?: string;
+    titlePlaceholder?: string;
+    description?: string;
+    descriptionPlaceholder?: string;
+    calendar?: string;
+    calendarPlaceholder?: string;
+    date?: string;
+    startTime?: string;
+    endTime?: string;
+    allDay?: string;
+    recurrence?: string;
+    color?: string;
+    location?: string;
+    locationPlaceholder?: string;
+    private?: string;
+    notifications?: string;
+    addNotification?: string;
+    linkedContacts?: string;
+    searchContacts?: string;
+    sharedUsers?: string;
+    save?: string;
+    saveEvent?: string;
+    saveTask?: string;
+    cancel?: string;
+    delete?: string;
+    edit?: string;
+    duplicate?: string;
+    close?: string;
+}
+/**
+ * Props del componente ModalEvents
+ */
+export interface ModalEventsProps {
+    open: boolean;
+    onClose: () => void;
+    mode: ModalMode;
+    type: ItemType;
+    showTypeTabs?: boolean;
+    onTypeChange?: (type: ItemType) => void;
+    eventData?: Partial<EventData>;
+    taskData?: Partial<TaskData>;
+    onSave?: (data: EventData | TaskData, type: ItemType) => void | Promise<void>;
+    onDelete?: (id: string, type: ItemType) => void | Promise<void>;
+    onDuplicate?: () => void;
+    onEdit?: () => void;
+    calendars: Calendar[];
+    fieldsConfig?: FieldsConfig;
+    labels?: ModalLabels;
+    contacts?: Contact[];
+    onSearchContacts?: (query: string) => Promise<Contact[]>;
+    isSearchingContacts?: boolean;
+    searchDebounceMs?: number;
+    users?: User[];
+    onSearchUsers?: (query: string) => Promise<User[]>;
+    isSearchingUsers?: boolean;
+    isSaving?: boolean;
+    isDeleting?: boolean;
+    validationErrors?: Record<string, string>;
+    slots?: ModalSlots;
+}
+/**
+ * Props comunes pasadas a todos los slots
+ */
+export interface BaseSlotProps {
+    disabled: boolean;
+    mode: ModalMode;
+    type: ItemType;
+}
+/**
+ * Props para el slot de título
+ */
+export interface TitleSlotProps extends BaseSlotProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    error?: string;
+    variant?: 'default' | 'inline';
+}
+/**
+ * Props para el slot de descripción
+ */
+export interface DescriptionSlotProps extends BaseSlotProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}
+/**
+ * Props para el slot de calendario
+ */
+export interface CalendarSlotProps extends BaseSlotProps {
+    value: string;
+    onChange: (calendarId: string) => void;
+    calendars: Calendar[];
+    placeholder?: string;
+}
+/**
+ * Props para el slot de fecha/hora (eventos)
+ */
+export interface DateTimeSlotProps extends BaseSlotProps {
+    startDate: Moment;
+    endDate: Moment;
+    onStartDateChange: (date: Moment) => void;
+    onEndDateChange: (date: Moment) => void;
+    allDay: boolean;
+    onAllDayChange: (allDay: boolean) => void;
+    error?: boolean;
+}
+/**
+ * Props para el slot de fecha/hora (tareas)
+ */
+export interface TaskDateSlotProps extends BaseSlotProps {
+    dueDate: Moment;
+    onDueDateChange: (date: Moment) => void;
+    error?: boolean;
+}
+/**
+ * Props para el slot de color
+ */
+export interface ColorSlotProps extends BaseSlotProps {
+    value: string;
+    onChange: (color: string) => void;
+}
+/**
+ * Props para el slot de ubicación
+ */
+export interface LocationSlotProps extends BaseSlotProps {
+    value: string;
+    onChange: (location: string) => void;
+    placeholder?: string;
+}
+/**
+ * Props para el slot de recurrencia
+ */
+export interface RecurrenceSlotProps extends BaseSlotProps {
+    value: string;
+    onChange: (recurrence: string) => void;
+}
+/**
+ * Props para el slot de notificaciones
+ */
+export interface NotificationsSlotProps extends BaseSlotProps {
+    notifications: Notification[];
+    onAdd: () => void;
+    onRemove: (index: number) => void;
+    onChange: (index: number, notification: Notification) => void;
+}
+/**
+ * Props para el slot de contactos vinculados
+ */
+export interface LinkedContactsSlotProps extends BaseSlotProps {
+    linkedContacts: Contact[];
+    onAdd: (contact: Contact) => void;
+    onRemove: (contactId: string) => void;
+    searchQuery: string;
+    onSearchChange: (query: string) => void;
+    searchResults: Contact[];
+    isSearching: boolean;
+}
+/**
+ * Props para el slot de usuarios compartidos
+ */
+export interface SharedUsersSlotProps extends BaseSlotProps {
+    selectedUserIds: string[];
+    onChange: (userIds: string[]) => void;
+    users: User[];
+}
+/**
+ * Props para el slot de botones de acción
+ */
+export interface ActionButtonsSlotProps extends BaseSlotProps {
+    onSave: () => void;
+    onCancel: () => void;
+    onDelete?: () => void;
+    onEdit?: () => void;
+    onDuplicate?: () => void;
+    isSaving: boolean;
+    isDeleting: boolean;
+    canDelete: boolean;
+    labels: {
+        save: string;
+        cancel: string;
+        delete: string;
+        edit: string;
+        duplicate: string;
+    };
+}
+/**
+ * Slots para renderizado personalizado de secciones del modal
+ *
+ * Cada slot recibe las props necesarias para renderizar esa sección.
+ * Si no se proporciona, se usa el renderizado por defecto.
+ *
+ * @example
+ * ```tsx
+ * import { TitleTextField } from '@trii/components/EventDialog';
+ *
+ * <ModalEvents
+ *   slots={{
+ *     title: (props) => <TitleTextField titleField={adaptToUseField(props)} disabled={props.disabled} />,
+ *     location: (props) => <LocationTextField locationField={adaptToUseField(props)} disabled={props.disabled} />,
+ *   }}
+ * />
+ * ```
+ */
+export interface ModalSlots {
+    /** Renderiza el campo de título */
+    title?: (props: TitleSlotProps) => React.ReactNode;
+    /** Renderiza el campo de descripción */
+    description?: (props: DescriptionSlotProps) => React.ReactNode;
+    /** Renderiza el selector de calendario */
+    calendar?: (props: CalendarSlotProps) => React.ReactNode;
+    /** Renderiza el selector de fecha/hora para eventos */
+    dateTime?: (props: DateTimeSlotProps) => React.ReactNode;
+    /** Renderiza el selector de fecha/hora para tareas */
+    taskDate?: (props: TaskDateSlotProps) => React.ReactNode;
+    /** Renderiza el selector de color */
+    color?: (props: ColorSlotProps) => React.ReactNode;
+    /** Renderiza el campo de ubicación */
+    location?: (props: LocationSlotProps) => React.ReactNode;
+    /** Renderiza el selector de recurrencia */
+    recurrence?: (props: RecurrenceSlotProps) => React.ReactNode;
+    /** Renderiza la sección de notificaciones/recordatorios */
+    notifications?: (props: NotificationsSlotProps) => React.ReactNode;
+    /** Renderiza la sección de contactos vinculados */
+    linkedContacts?: (props: LinkedContactsSlotProps) => React.ReactNode;
+    /** Renderiza la sección de usuarios compartidos */
+    sharedUsers?: (props: SharedUsersSlotProps) => React.ReactNode;
+    /** Renderiza los botones de acción (guardar, cancelar, etc.) */
+    actionButtons?: (props: ActionButtonsSlotProps) => React.ReactNode;
+    /** Renderiza el header del modal */
+    header?: (props: BaseSlotProps & {
+        title: string;
+        onClose: () => void;
+    }) => React.ReactNode;
+    /** Renderiza los tabs de tipo (evento/tarea) */
+    typeTabs?: (props: {
+        value: ItemType;
+        onChange: (type: ItemType) => void;
+        labels: {
+            event: string;
+            task: string;
+        };
+    }) => React.ReactNode;
+}

package/dist/esm/types/components/index.d.ts

@@ -1,2 +1,4 @@
+export { default as TestBox } from './TextBox';
 export { default as ContactInfoPopup } from './ContactInfoPopup';
-export { default as EditContactModal } from './EditContactModal';
+export { ModalEvents } from './ModalEvents';
+export type { ModalEventsProps, ModalMode, ItemType, EventData, TaskData, Notification, Calendar, Contact, FieldsConfig, ModalLabels, } from './ModalEvents';

package/dist/esm/types/index.d.ts

@@ -1,2 +1 @@
 export * from './components';
-export { i18n } from './i18n';

package/dist/esm/types/src/components/ContactInfoPopup/ContactInfoPopup.d.ts

@@ -1,15 +1,14 @@
 import { IBusiness, IContact } from '@trii/types/dist/Contacts';
 import { SxProps, Theme } from '@mui/material';
-import '../../i18n/config';
 export interface ContactInfoPopupProps {
     open: boolean;
     anchorEl: HTMLElement | null;
     onClose: () => void;
-    language?: 'en' | 'es';
+    t?: (key: string) => string;
     contactData?: IContact | IBusiness;
     avatarImgUrl?: string;
     sx?: SxProps<Theme>;
     navigate: (path: string) => void;
 }
-declare const ContactInfoPopup: ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, language, }: ContactInfoPopupProps) => import("react/jsx-runtime").JSX.Element;
+declare const ContactInfoPopup: ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, t, }: ContactInfoPopupProps) => import("react/jsx-runtime").JSX.Element;
 export default ContactInfoPopup;

package/dist/esm/types/src/components/ContactInfoPopup/components/Header/Header.d.ts

@@ -8,5 +8,5 @@ type HeaderProps = {
     onClose: () => void;
     isBusiness?: boolean;
 };
-declare const Header: ({ imgUrl, name, contactId, navigate, isLoading, onError, onClose, isBusiness, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ imgUrl, name, contactId, navigate, isLoading, onError, onClose, isBusiness }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/dist/esm/types/src/components/ContactInfoPopup/components/MembersSection/MembersSection.d.ts

@@ -2,7 +2,6 @@ import { IBusiness } from '@trii/types/dist/Contacts';
 interface MembersSectionProps {
     contactData?: IBusiness;
     title: string;
-    navigate: (path: string) => void;
 }
-declare const MembersSection: ({ contactData, title, navigate }: MembersSectionProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const MembersSection: ({ contactData, title }: MembersSectionProps) => import("react/jsx-runtime").JSX.Element | null;
 export default MembersSection;

package/dist/esm/types/src/components/ContactInfoPopup/components/MembersSection/components/MemberItem/MemberItem.d.ts

@@ -1,7 +1,4 @@
-type MemberItemProps = {
+declare const MemberItem: ({ name }: {
     name: string;
-    memberId: string;
-    navigate: (path: string) => void;
-};
-declare const MemberItem: ({ name, memberId, navigate }: MemberItemProps) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default MemberItem;

package/dist/esm/types/src/components/ModalEvents/ModalEvents.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ModalEventsProps } from './types';
+/**
+ * ModalEvents - Componente reutilizable para crear/editar/visualizar eventos y tareas
+ *
+ * Este componente es completamente controlado desde el exterior. No mantiene estado interno
+ * de datos, todo se maneja a través de props y callbacks.
+ *
+ * @example
+ * ```tsx
+ * <ModalEvents
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   mode="create"
+ *   type="event"
+ *   eventData={eventData}
+ *   onSave={handleSave}
+ *   calendars={calendars}
+ * />
+ * ```
+ */
+declare const ModalEvents: React.FC<ModalEventsProps>;
+export default ModalEvents;

package/dist/esm/types/src/components/ModalEvents/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * ModalEvents - Componente para gestión de eventos y tareas
+ *
+ * Exporta el componente principal y todos los tipos necesarios
+ */
+export { default as ModalEvents } from './ModalEvents';
+export * from './types';