@trii/components 2.0.60 → 2.0.64

package/dist/index.d.ts

@@ -1,35 +1,410 @@
+/// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IContact, IBusiness } from '@trii/types/dist/Contacts';
 import { SxProps, Theme } from '@mui/material';
-import { IContact as IContact$1, IBusiness as IBusiness$1 } from '@trii/types/dist/Contacts/contacts';
-import * as i18next from 'i18next';
+import React$1 from 'react';
+import { Moment } from 'moment';
+
+interface TestBoxProps {
+    /**
+     * Color of the box background
+     */
+    bgColor?: 'red' | 'blue' | 'green';
+}
+declare const TestBox: ({ bgColor }: TestBoxProps) => react_jsx_runtime.JSX.Element;
 
 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: (props: ContactInfoPopupProps) => react_jsx_runtime.JSX.Element;
+declare const ContactInfoPopup: ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, t, }: ContactInfoPopupProps) => react_jsx_runtime.JSX.Element;
 
-interface Props {
+/**
+ * Modos de operación del modal
+ */
+type ModalMode = 'create' | 'edit' | 'view' | 'duplicate';
+/**
+ * Tipos de elementos que puede manejar el modal
+ */
+type ItemType = 'event' | 'task';
+/**
+ * Estructura de una notificación/recordatorio
+ */
+interface Notification {
+    id?: string;
+    type: 'minutes' | 'hours' | 'days';
+    value: number;
+    sendToContact?: boolean;
+}
+/**
+ * Estructura de un calendario
+ */
+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
+ */
+interface Contact {
+    id: string;
+    name: string;
+    email?: string;
+    phone?: string;
+    avatarUrl?: string;
+}
+/**
+ * Estructura de un usuario para compartir
+ */
+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
+ */
+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
+ */
+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
+ */
+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
+ */
+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
+ */
+interface ModalEventsProps {
     open: boolean;
     onClose: () => void;
-    baseUrl?: string;
-    spaceId?: string;
-    contactId?: string;
-    language?: 'en' | 'es';
-    sx?: SxProps<Theme>;
-    navigate: (path: string) => void;
-    googleMapsApiKey?: string;
-    onEntityUpdated?: (entity: IContact$1 | IBusiness$1) => 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
+ */
+interface BaseSlotProps {
+    disabled: boolean;
+    mode: ModalMode;
+    type: ItemType;
+}
+/**
+ * Props para el slot de título
+ */
+interface TitleSlotProps extends BaseSlotProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    error?: string;
+    variant?: 'default' | 'inline';
+}
+/**
+ * Props para el slot de descripción
+ */
+interface DescriptionSlotProps extends BaseSlotProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}
+/**
+ * Props para el slot de calendario
+ */
+interface CalendarSlotProps extends BaseSlotProps {
+    value: string;
+    onChange: (calendarId: string) => void;
+    calendars: Calendar[];
+    placeholder?: string;
+}
+/**
+ * Props para el slot de fecha/hora (eventos)
+ */
+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)
+ */
+interface TaskDateSlotProps extends BaseSlotProps {
+    dueDate: Moment;
+    onDueDateChange: (date: Moment) => void;
+    error?: boolean;
+}
+/**
+ * Props para el slot de color
+ */
+interface ColorSlotProps extends BaseSlotProps {
+    value: string;
+    onChange: (color: string) => void;
+}
+/**
+ * Props para el slot de ubicación
+ */
+interface LocationSlotProps extends BaseSlotProps {
+    value: string;
+    onChange: (location: string) => void;
+    placeholder?: string;
+}
+/**
+ * Props para el slot de recurrencia
+ */
+interface RecurrenceSlotProps extends BaseSlotProps {
+    value: string;
+    onChange: (recurrence: string) => void;
+}
+/**
+ * Props para el slot de notificaciones
+ */
+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
+ */
+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
+ */
+interface SharedUsersSlotProps extends BaseSlotProps {
+    selectedUserIds: string[];
+    onChange: (userIds: string[]) => void;
+    users: User[];
+}
+/**
+ * Props para el slot de botones de acción
+ */
+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} />,
+ *   }}
+ * />
+ * ```
+ */
+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;
 }
-declare const EditContactModal: (props: Props) => react_jsx_runtime.JSX.Element;
 
-declare const i18nInstance: i18next.i18n;
+/**
+ * ModalEvents - Componente reutilizable para crear/editar/visualizar eventos y tareas
+ *
+ * VERSIÓN REFACTORIZADA: Componentes internos más limpios y organizados
+ */
+declare const ModalEvents: React$1.FC<ModalEventsProps>;
 
-export { ContactInfoPopup, EditContactModal, i18nInstance as i18n };
+export { type Calendar, type Contact, ContactInfoPopup, type EventData, type FieldsConfig, type ItemType, ModalEvents, type ModalEventsProps, type ModalLabels, type ModalMode, type Notification, type TaskData, TestBox };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trii/components",
-  "version": "2.0.60",
+  "version": "2.0.64",
   "description": "Trii components package",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -9,12 +9,8 @@
     "dist"
   ],
   "scripts": {
-    "dev": "npm-run-all --parallel dev:types dev:js",
-    "dev:types": "tsc --watch",
-    "dev:js": "rollup -c --watch",
-    "build": "npm-run-all --serial build:types build:js",
-    "build:types": "tsc --emitDeclarationOnly",
-    "build:js": "rollup -c",
+    "dev": "rollup -c --watch",
+    "build": "rollup -c",
     "test": "jest --watchAll --verbose",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
@@ -58,11 +54,10 @@
     "@fontsource/material-icons": "^5.0.18",
     "@fontsource/roboto": "^5.0.13",
     "@mui/icons-material": "^5.15.15",
-    "@mui/lab": "^5.0.0-alpha.176",
-    "@mui/material": "^5.18.0",
+    "@mui/material": "^5.15.15",
     "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-typescript": "^11.1.4",
     "@storybook/addon-essentials": "^8.5.3",
     "@storybook/addon-interactions": "^8.5.3",
     "@storybook/addon-links": "^8.5.3",
@@ -76,30 +71,17 @@
     "@storybook/test": "^8.5.3",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
-    "@types/google-libphonenumber": "^7.4.30",
     "@types/jest": "^29.5.5",
     "@types/react": "^18.2.23",
-    "@typescript-eslint/eslint-plugin": "^8.53.0",
-    "@typescript-eslint/parser": "^8.53.0",
     "babel-jest": "^29.7.0",
-    "esbuild": "^0.27.2",
-    "eslint": "^9.39.2",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
     "postcss-import": "^15.1.0",
-    "prettier": "^3.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^3.29.4",
     "rollup-plugin-dts": "^6.0.2",
-    "rollup-plugin-esbuild": "^6.2.1",
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^8.5.3",
     "tslib": "^2.6.2",
@@ -107,17 +89,13 @@
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.4",
-    "@mui/x-date-pickers": "^8.24.0",
-    "@mui/x-date-pickers-pro": "^8.24.0",
-    "dayjs": "^1.11.19",
-    "google-libphonenumber": "^3.2.43",
-    "i18next": "^25.8.0",
-    "moment": "^2.30.1",
     "react": ">=17.0.2 <19.0.0",
-    "react-dom": ">=17.0.2 <19.0.0",
-    "react-i18next": "^16.5.3"
+    "react-dom": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@trii/types": "^2.10.586"
+    "@mui/x-date-pickers-pro": "^7.29.4",
+    "@trii/types": "^2.10.611",
+    "dayjs": "^1.11.20",
+    "moment": "^2.30.1"
   }
 }

package/dist/cjs/types/BusinessSelect/BusinessSelect.d.ts

@@ -1,6 +0,0 @@
-import UseEditContact from 'features/Views/ContactEdit/hooks/useEditContact/types/UseEditContact';
-interface Props {
-    contact?: UseEditContact;
-}
-declare const BusinessSelect: ({ contact }: Props) => import("react/jsx-runtime").JSX.Element;
-export default BusinessSelect;

package/dist/cjs/types/BusinessSelect/components/BusinessSearchBar/BusinessSearchBar.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    handleSearch: (value: string) => void;
-    search: string;
-}
-declare const BusinessSearchBar: ({ search, handleSearch }: Props) => import("react/jsx-runtime").JSX.Element;
-export default BusinessSearchBar;

package/dist/cjs/types/BusinessSelect/components/BusinessSearchBar/index.d.ts

@@ -1 +0,0 @@
-export { default } from './BusinessSearchBar';

package/dist/cjs/types/BusinessSelect/components/BusinessSearchResults/BusinessSearchResults.d.ts

@@ -1,13 +0,0 @@
-import { UIEvent } from 'react';
-import { IBusiness, IContactInfo } from '@trii/types/dist/Contacts';
-interface Props {
-    handleScroll: (e: UIEvent<HTMLElement>) => void;
-    businessList: IBusiness[];
-    handleSelectBusiness: (business: IContactInfo) => void;
-    businessSelectedId: string;
-    search: string;
-    onCreateNew: () => void;
-    hasSearched: boolean;
-}
-declare const BusinessSearchResults: ({ handleScroll, businessList, handleSelectBusiness, businessSelectedId, search, onCreateNew, hasSearched, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default BusinessSearchResults;

package/dist/cjs/types/BusinessSelect/components/BusinessSearchResults/index.d.ts

@@ -1 +0,0 @@
-export { default } from './BusinessSearchResults';

package/dist/cjs/types/BusinessSelect/components/index.d.ts

@@ -1,2 +0,0 @@
-export { default as BusinessSearchResults } from './BusinessSearchResults';
-export { default as BusinessSearchBar } from './BusinessSearchBar';

package/dist/cjs/types/BusinessSelect/index.d.ts

@@ -1 +0,0 @@
-export { default } from './BusinessSelect';

package/dist/cjs/types/BusinessSelect/types/index.d.ts

@@ -1,4 +0,0 @@
-export type SimplifiedBusiness = {
-    businessName: string;
-    businessId: string;
-};

package/dist/cjs/types/BusinessSelectModal/BusinessSelectModal.d.ts

@@ -1,5 +0,0 @@
-type BusinessSelectModalProps = {
-    open: boolean;
-};
-declare const BusinessSelectModal: ({ open }: BusinessSelectModalProps) => import("react/jsx-runtime").JSX.Element;
-export default BusinessSelectModal;

package/dist/cjs/types/BusinessSelectModal/index.d.ts

@@ -1 +0,0 @@
-export { default } from './BusinessSelectModal';

package/dist/cjs/types/SearchLocationModal/SearchLocationModal.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-export type AddressSelection = {
-    city: string;
-    state: string;
-    postalCode: string;
-    country: string;
-    fullAddress?: string;
-    shortAddress?: string;
-    streetName?: string;
-    streetNumber?: string;
-    lat?: number;
-    lng?: number;
-};
-type SearchLocationModalProps = {
-    open: boolean;
-    onClose: () => void;
-    onSubmitMainAddress: (address: AddressSelection) => void;
-    onSubmitSecondaryAddress: (address: AddressSelection) => void;
-    maxWidth?: string;
-    countryRestriction?: string | string[];
-    defaultValue?: Partial<AddressSelection> & {
-        query?: string;
-    };
-};
-declare const SearchLocationModal: React.FC<SearchLocationModalProps>;
-export default SearchLocationModal;

package/dist/cjs/types/SearchLocationModal/components/SearchLocationInput/index.d.ts

@@ -1 +0,0 @@
-export { default } from './SearchLocationInput';

package/dist/cjs/types/SearchLocationModal/components/index.d.ts

@@ -1 +0,0 @@
-export { default as SearchLocationInput } from './SearchLocationInput';

package/dist/cjs/types/SearchLocationModal/googleMapsUtils.d.ts

@@ -1,20 +0,0 @@
-export declare const isGoogleMapsLoaded: () => boolean;
-export declare const checkGoogleMapsStatus: () => {
-    windowGoogle: boolean;
-    googleMaps: boolean;
-    googlePlaces: boolean;
-    autocomplete: boolean;
-    isFullyLoaded: boolean;
-};
-export declare const waitForGoogleMaps: (maxWaitTime?: number) => Promise<boolean>;
-export declare const loadGoogleMapsScript: (apiKey: string, libraries?: string[]) => Promise<boolean>;
-export declare const useGoogleMapsLoader: (apiKey?: string) => {
-    isLoaded: boolean;
-    isLoading: boolean;
-    error: string | null;
-};
-export declare const useGoogleMapsStatus: () => {
-    isLoaded: boolean;
-    isLoading: boolean;
-    error: string | null;
-};

package/dist/cjs/types/SearchLocationModal/index.d.ts

@@ -1 +0,0 @@
-export { default } from './SearchLocationModal';

package/dist/cjs/types/components/EditContactModal/EditContactModal.d.ts

@@ -1,13 +0,0 @@
-import { SxProps, Theme } from '@mui/material';
-export interface Props {
-    open: boolean;
-    onClose: () => void;
-    baseUrl?: string;
-    spaceId?: string;
-    contactId?: string;
-    language?: 'en' | 'es';
-    sx?: SxProps<Theme>;
-    navigate: (path: string) => void;
-}
-declare const EditContactModal: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export default EditContactModal;

package/dist/cjs/types/components/EditContactModal/components/BusinessSelect/BusinessSelectEditor.d.ts

@@ -1,16 +0,0 @@
-import type { UserTrii } from '@trii/types/dist/Users';
-type SimplifiedBusiness = {
-    businessId: string;
-    businessName: string;
-};
-type Props = {
-    baseUrl?: string;
-    spaceId?: string;
-    contactId?: string;
-    initialBusiness?: SimplifiedBusiness | null;
-    onBack: () => void;
-    onEntityUpdated?: (entity: unknown) => void;
-    currentUser?: UserTrii | null;
-};
-declare const BusinessSelectEditor: ({ baseUrl, spaceId, contactId, initialBusiness, onBack, onEntityUpdated, currentUser, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default BusinessSelectEditor;