@trii/components 2.0.103 → 3.0.0

package/dist/types/components/ContactSidebar/ChatDetailsSidebar.d.ts

@@ -23,6 +23,12 @@ interface ChatDetailsSidebarBaseProps {
      * propia instancia de i18n, así que no sigue solo los cambios del host.
      */
     language?: string;
+    /**
+     * Gate de visibilidad (CSS display) del panel. Para hosts que renderizan
+     * vistas hermanas alternadas por CSS: el panel queda montado (conserva su
+     * estado y sus datos) pero oculto mientras `active` es false. Default: true.
+     */
+    active?: boolean;
 }
 /**
  * Qué mostrar. Hay dos formas y son excluyentes; TypeScript falla si no se pasa
@@ -55,9 +61,17 @@ type ChatDetailsSidebarTarget = {
 };
 export type ChatDetailsSidebarProps = ChatDetailsSidebarBaseProps & ChatDetailsSidebarTarget;
 /**
- * Shell del sidebar (en camino al paquete npm): recibe las props del
- * contrato (docs/CONTRATO_CHATDETAILSSIDEBAR.md) y monta los providers
- * internos. La orquestación de UI vive en SidebarContent.
+ * Panel de contacto reutilizable: la ficha completa de un contacto/empresa
+ * (datos, conversaciones, archivos, media, historial, eventos, tareas, shop,
+ * relaciones, grupos de WhatsApp) con su riel vertical de tabs, skeleton y
+ * overlay de carga. Recibe las props del contrato y monta los providers
+ * internos; la orquestación de tabs vive en SidebarContent.
+ *
+ * El shell de vistas (header Contacto/Interacción/Asistente) es del host: este
+ * componente renderiza SOLO la vista de contacto y expone `active` para que el
+ * host lo alterne por CSS con sus vistas hermanas sin desmontarlo. Debe
+ * colocarse dentro de un contenedor flex con `position: relative` (el overlay
+ * y el skeleton se posicionan contra ese contenedor). Ver README.md.
  */
 declare const ChatDetailsSidebar: (props: ChatDetailsSidebarProps) => import("react/jsx-runtime").JSX.Element;
 export default ChatDetailsSidebar;

package/dist/types/components/ContactSidebar/SidebarContent.d.ts

@@ -1,11 +1,16 @@
 import { IConversation } from '@trii/types/dist/Conversations';
 export interface SidebarContentProps {
     conversation: IConversation | null;
+    /** Gate CSS de visibilidad del panel (ver ChatDetailsSidebar.active). */
+    active: boolean;
 }
 /**
- * Orquestación de UI del sidebar (tabs, overlay, skeleton). Vive dentro de
- * los providers internos (SidebarProps + SidebarData) para poder disparar
- * los fetches del mini-store sin tocar el store del host.
+ * Orquestación de UI del panel de contacto (tabs, overlay, skeleton). Vive
+ * dentro de los providers internos (SidebarProps + SidebarData) para poder
+ * disparar los fetches del mini-store sin tocar el store del host.
+ *
+ * El root es un Fragment: skeleton/panel/overlay se posicionan contra el
+ * contenedor `position: relative` que provee el host.
  */
-declare const SidebarContent: ({ conversation }: SidebarContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const SidebarContent: ({ conversation, active }: SidebarContentProps) => import("react/jsx-runtime").JSX.Element;
 export default SidebarContent;

package/dist/types/components/ContactSidebar/components/PanelView/PanelView.d.ts

@@ -1,9 +1,6 @@
-import { SectionRefs } from '../../hooks/useSectionRefs';
 type PanelViewProps = {
-    sectionRefs: SectionRefs;
-    setValue: (value: number) => void;
+    /** Índice del tab activo (lo controla TabsMenu vía SidebarContent). */
     value: number;
-    isClicked: boolean;
 };
 declare const PanelView: ({ value }: PanelViewProps) => import("react/jsx-runtime").JSX.Element;
 export default PanelView;

package/dist/types/components/ContactSidebar/components/PanelView/components/ContactMedia/ContactMedia.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 type ContactProps = {
     contactId: string;
-    handleClick?: () => void;
     defaultExpanded?: boolean;
 };
 declare const ContactMedia: React.ForwardRefExoticComponent<ContactProps & React.RefAttributes<HTMLElement>>;

package/dist/types/components/ContactSidebar/components/PanelView/components/GroupData/GroupData.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 type Props = {
-    handleClick: () => void;
     defaultExpanded?: boolean;
 };
 declare const GroupData: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLElement>>;

package/dist/types/components/ContactSidebar/components/PanelView/components/index.d.ts

@@ -5,13 +5,10 @@ export { default as ContactFiles } from './ContactFiles';
 export { default as ContactMedia } from './ContactMedia';
 export { default as ContactHistory } from './ContactHistory';
 export { default as ContactNotes } from './ContactNotes';
-export { default as ContactRepairs } from './ContactRepairs';
 export { default as ContactEvent } from './ContactEvent';
 export { default as ContactTask } from './ContactTask';
-export { default as ContactTicket } from './ContactTicket';
 export { default as ContactButton } from './ContactButton';
 export { default as ContactPanelShop } from './ContactPanelShop';
 export { default as ContactRelations } from './ContactRelations';
 export { default as GroupData } from './GroupData';
 export { default as PremiumContactHeader } from './PremiumContactHeader';
-export { default as ContactHighlights } from './ContactHighlights';

package/dist/types/components/ContactSidebar/components/PanelView/layout/SectionCard/SectionCard.d.ts

@@ -5,7 +5,7 @@ type SectionCardProps = {
     children: ReactNode;
     title: string;
     defaultExpanded?: boolean;
-    onClick: () => void;
+    onClick?: () => void;
     tabName: TabName;
     contactInfo?: IContact;
     onExpandChange?: (isExpanded: boolean) => void;

package/dist/types/components/ContactSidebar/components/PanelView/types/ContactProps.d.ts

@@ -1,7 +1,6 @@
 import { IIntegrationButton } from '@trii/types/dist/Contacts';
 export interface ContactProps {
     contactId?: string;
-    handleClick: () => void;
     defaultExpanded?: boolean;
 }
 export interface ContactButtonProps extends ContactProps {

package/dist/types/components/ContactSidebar/components/TabsMenu/TabsMenu.d.ts

@@ -1,9 +1,6 @@
-import { SectionRefs } from '../../hooks/useSectionRefs';
 type TabsMenuProps = {
     handleChange: (newValue: number) => void;
     value: number;
-    sectionRefs: SectionRefs;
-    setIsClicked: (isClicked: boolean) => void;
 };
 declare function TabsMenu({ handleChange, value }: TabsMenuProps): import("react/jsx-runtime").JSX.Element;
 export default TabsMenu;

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

@@ -1,6 +1,3 @@
 export { default as ContactInfoSkeleton } from './ContactInfoSkeleton';
-export { default as AssistantView } from './AssistantView/AssistantView';
-export { default as InteractionView } from './InteractionView/InteractionView';
 export { default as PanelView } from './PanelView';
-export { default as SidebarViewNavigation, type SidebarView, type SidebarViewDefinition, } from './SidebarViewNavigation/SidebarViewNavigation';
 export { default as TabsMenu } from './TabsMenu';

package/dist/types/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export interface EmptyStateProps {
+    /** Título principal (default: i18n `asyncState.emptyTitle`). */
+    title?: string;
+    /** Descripción secundaria (default: i18n `asyncState.emptyDescription`). */
+    description?: string;
+    /** Icono personalizado (default: `InboxIcon`). */
+    icon?: ReactNode;
+    /** Acción opcional bajo el texto (p.ej. botón "Crear el primero"). */
+    action?: ReactNode;
+    /** Versión compacta (menos padding e icono más chico). */
+    compact?: boolean;
+    /** Idioma de los textos por defecto ('es' | 'en'). Opcional: ver useComponentsTranslation. */
+    language?: string;
+}
+/**
+ * Estado "vacío real": la carga fue exitosa pero no hay datos que mostrar.
+ * No confundir con "aún no se cargó" (eso es loading) ni con un error.
+ * Presentacional y genérico (ver docs/ASYNC_STATE.md).
+ */
+declare const EmptyState: ({ title, description, icon, action, compact, language, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export default EmptyState;

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

@@ -0,0 +1,2 @@
+export { default } from './EmptyState';
+export type { EmptyStateProps } from './EmptyState';

package/dist/types/components/ErrorState/ErrorState.d.ts

@@ -0,0 +1,23 @@
+export interface ErrorStateProps {
+    /** Título principal (default: i18n `asyncState.errorTitle`). */
+    title?: string;
+    /** Descripción secundaria (default: i18n `asyncState.errorDescription`). */
+    description?: string;
+    /** Detalle técnico o mensaje del backend (se muestra atenuado). */
+    error?: string | null;
+    /** Si se provee, muestra el botón de reintento. */
+    onRetry?: () => void;
+    /** Texto del botón de reintento (default: i18n `asyncState.retry`). */
+    retryLabel?: string;
+    /** Versión compacta (menos padding e icono más chico) para paneles angostos. */
+    compact?: boolean;
+    /** Idioma de los textos por defecto ('es' | 'en'). Opcional: ver useComponentsTranslation. */
+    language?: string;
+}
+/**
+ * Estado de error a nivel panel, con retry opcional.
+ * Presentacional y genérico: no conoce Redux ni fetching
+ * (ver docs/ASYNC_STATE.md).
+ */
+declare const ErrorState: ({ title, description, error, onRetry, retryLabel, compact, language, }: ErrorStateProps) => import("react/jsx-runtime").JSX.Element;
+export default ErrorState;

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

@@ -0,0 +1,2 @@
+export { default } from './ErrorState';
+export type { ErrorStateProps } from './ErrorState';

package/dist/types/components/PanelErrorBoundary/PanelErrorBoundary.d.ts

@@ -0,0 +1,55 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+export interface PanelErrorBoundaryProps {
+    children: ReactNode;
+    /**
+     * Fallback custom ante un crash de render. Puede ser un nodo o una función
+     * que recibe el error y `resetErrorBoundary` (para reintentar).
+     */
+    fallback?: ReactNode | ((args: {
+        error: Error | null;
+        resetErrorBoundary: () => void;
+    }) => ReactNode);
+    /** Telemetría/logging del error (p.ej. enviar a un servicio externo). */
+    onError?: (error: Error, info: ErrorInfo) => void;
+    /**
+     * Claves que al cambiar resetean el boundary automáticamente
+     * (p.ej. el id de la ruta actual, para reintentar al navegar).
+     */
+    resetKeys?: ReadonlyArray<unknown>;
+    /** Overrides de textos del fallback por defecto. */
+    title?: string;
+    description?: string;
+    /** Idioma de los textos por defecto ('es' | 'en'). Opcional: ver useComponentsTranslation. */
+    language?: string;
+}
+interface PanelErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+/**
+ * Aísla fallos de RENDER por panel: si el contenido explota, el resto de la
+ * UI (hermanos, otros paneles, la navegación) sigue funcionando y el panel
+ * muestra un fallback con reintento.
+ *
+ * ```tsx
+ * <PanelErrorBoundary resetKeys={[conversationId]}>
+ *   <ContactInfoPanel />
+ * </PanelErrorBoundary>
+ * <PanelErrorBoundary>
+ *   <MessagesPanel />
+ * </PanelErrorBoundary>
+ * ```
+ *
+ * NOTA: los boundaries NO capturan errores de fetching (para eso está
+ * `<AsyncContent>`), ni de event handlers, ni de código asíncrono.
+ * Guía completa: docs/ASYNC_STATE.md
+ */
+declare class PanelErrorBoundary extends Component<PanelErrorBoundaryProps, PanelErrorBoundaryState> {
+    state: PanelErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): PanelErrorBoundaryState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    componentDidUpdate(prevProps: PanelErrorBoundaryProps): void;
+    reset: () => void;
+    render(): ReactNode;
+}
+export default PanelErrorBoundary;

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

@@ -0,0 +1,2 @@
+export { default } from './PanelErrorBoundary';
+export type { PanelErrorBoundaryProps } from './PanelErrorBoundary';

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

@@ -4,5 +4,13 @@ export type { EditContactModalProps, EditContactMode } from './EditContactModal'
 export { default as EventsDialog } from './EventsDialog';
 export type { EventsDialogProps, EventData, TaskData } from './EventsDialog';
 export type { ModalMode, ItemType, Calendar, Contact, Notification } from './EventsDialog/types';
+export { default as AsyncContent } from './AsyncContent';
+export type { AsyncContentProps } from './AsyncContent';
+export { default as EmptyState } from './EmptyState';
+export type { EmptyStateProps } from './EmptyState';
+export { default as ErrorState } from './ErrorState';
+export type { ErrorStateProps } from './ErrorState';
+export { default as PanelErrorBoundary } from './PanelErrorBoundary';
+export type { PanelErrorBoundaryProps } from './PanelErrorBoundary';
 export { default as ContactSidebar } from './ContactSidebar';
 export type { ContactSidebarProps, SidebarChatIntegration, StartConversationTarget, } from './ContactSidebar';

package/dist/types/i18n/config.d.ts

@@ -1,2 +1,8 @@
 declare const i18nInstance: import("i18next").i18n;
+/**
+ * Normaliza lo que venga del anfitrión ('ES', 'En', 'es-AR', ...) a un idioma
+ * soportado por el paquete. El default es 'en' porque es el `fallbackLng` de
+ * esta instancia.
+ */
+export declare function normalizeLanguage(language?: string): 'en' | 'es';
 export default i18nInstance;

package/dist/types/i18n/useComponentsTranslation.d.ts

@@ -0,0 +1,17 @@
+import type { TFunction } from 'i18next';
+/**
+ * `t` atado a la instancia del paquete, SIN montar un `I18nextProvider`.
+ *
+ * Es la diferencia con el patrón de EditContactModal/ContactSidebar: esos
+ * componentes son un árbol cerrado y pueden pisar el context. Las primitivas
+ * de estado asíncrono (`AsyncContent`, `PanelErrorBoundary`) renderizan
+ * children DEL ANFITRIÓN; si montaran un provider, esos children resolverían
+ * sus claves contra la instancia del paquete y quedarían sin traducir.
+ * Pasando `{ i18n }` a `useTranslation`, solo los textos propios se atan.
+ *
+ * `language` es opcional: si el anfitrión ya sincroniza el idioma con
+ * `i18n.changeLanguage(...)` (exportado desde el índice del paquete), no hace
+ * falta pasarlo.
+ */
+export declare const useComponentsTranslation: (language?: string) => TFunction;
+export default useComponentsTranslation;

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './asyncState';
 export { i18n } from './i18n';
 export * from './components/EventsDialog/theme';

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@trii/components",
-  "version": "2.0.103",
+  "version": "3.0.0",
   "description": "Trii components package",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "async-state"
   ],
   "scripts": {
     "dev": "npm-run-all --parallel dev:types dev:js",
@@ -15,7 +16,8 @@
     "build": "npm-run-all --serial build:types build:js",
     "build:types": "tsc --project tsconfig.build.json --emitDeclarationOnly",
     "build:js": "rollup -c",
-    "test": "jest --watchAll --verbose",
+    "test": "jest",
+    "test:watch": "jest --watchAll --verbose",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },