@trii/components 3.0.0 → 3.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +75 -75
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +75 -75
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +70 -53
- package/dist/types/components/EditContactModal/context/LanguageContext.d.ts +9 -0
- package/dist/types/components/EventsDialog/theme/index.d.ts +1 -0
- package/dist/types/components/EventsDialog/theme/themeProvider.d.ts +1 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/theme/MuiComponentsConfig.d.ts +16 -0
- package/dist/types/theme/index.d.ts +5 -0
- package/dist/types/theme/themeProvider.d.ts +74 -0
- package/dist/types/theme/themeSlice.d.ts +54 -0
- package/package.json +1 -1
- package/readme +71 -71
- package/dist/types/components/ContactSidebar/components/AddButton/AddButton.d.ts +0 -5
- package/dist/types/components/ContactSidebar/components/AssistantView/AssistantView.d.ts +0 -29
- package/dist/types/components/ContactSidebar/components/InteractionView/AssignmentsView.d.ts +0 -12
- package/dist/types/components/ContactSidebar/components/InteractionView/InteractionSummary.d.ts +0 -16
- package/dist/types/components/ContactSidebar/components/InteractionView/InteractionView.d.ts +0 -3
- package/dist/types/components/ContactSidebar/components/InteractionView/OperationalActivityView.d.ts +0 -13
- package/dist/types/components/ContactSidebar/components/InteractionView/ParticipantsView.d.ts +0 -15
- package/dist/types/components/ContactSidebar/components/InteractionView/ServiceLevelView.d.ts +0 -33
- package/dist/types/components/ContactSidebar/components/PanelView/components/ContactHighlights/ContactHighlights.d.ts +0 -2
- package/dist/types/components/ContactSidebar/components/PanelView/components/ContactHighlights/index.d.ts +0 -1
- package/dist/types/components/ContactSidebar/components/PanelView/components/ContactRepairs/ContactRepairs.d.ts +0 -4
- package/dist/types/components/ContactSidebar/components/PanelView/components/ContactRepairs/components/RepairSection/RepairSection.d.ts +0 -7
- package/dist/types/components/ContactSidebar/components/PanelView/components/ContactRepairs/index.d.ts +0 -1
- package/dist/types/components/ContactSidebar/components/PanelView/components/ContactTicket/ContactTicket.d.ts +0 -4
- package/dist/types/components/ContactSidebar/components/PanelView/components/ContactTicket/components/TicketSection/TicketSection.d.ts +0 -7
- package/dist/types/components/ContactSidebar/components/PanelView/components/ContactTicket/index.d.ts +0 -1
- package/dist/types/components/ContactSidebar/components/SidebarViewNavigation/SidebarViewNavigation.d.ts +0 -15
- package/dist/types/components/ContactSidebar/hooks/useSectionRefs.d.ts +0 -19
package/dist/index.d.ts
CHANGED
|
@@ -674,7 +674,74 @@ declare const ChatDetailsSidebar: (props: ChatDetailsSidebarProps) => react_jsx_
|
|
|
674
674
|
|
|
675
675
|
declare const i18nInstance: i18next.i18n;
|
|
676
676
|
|
|
677
|
-
|
|
677
|
+
/**
|
|
678
|
+
* Ajustes que difieren entre apps. Los valores por defecto son los que ya
|
|
679
|
+
* usaba el paquete, asi que omitir las opciones no cambia nada.
|
|
680
|
+
*/
|
|
681
|
+
interface MuiComponentsConfigOptions {
|
|
682
|
+
/**
|
|
683
|
+
* Fondo del modal y su backdrop en transparente. Lo usan header y home;
|
|
684
|
+
* contacts lo tenia desactivado a proposito.
|
|
685
|
+
*/
|
|
686
|
+
transparentModal?: boolean;
|
|
687
|
+
/** z-index del popper del Autocomplete. Header necesita 1; el resto, 11. */
|
|
688
|
+
autocompleteZIndex?: number;
|
|
689
|
+
}
|
|
690
|
+
declare const MuiComponentsConfig: (themeRedux: Theme, options?: MuiComponentsConfigOptions) => Theme;
|
|
691
|
+
|
|
692
|
+
/**
|
|
693
|
+
* Forma mínima del store que necesita este slice: la app que lo use tiene que
|
|
694
|
+
* tener `Theme` y `User.user.uid`.
|
|
695
|
+
*/
|
|
696
|
+
interface ThemeRootState {
|
|
697
|
+
User: {
|
|
698
|
+
user: {
|
|
699
|
+
uid: string;
|
|
700
|
+
/** Requerido por `updateTheme`: la URL lo lleva en la ruta. */
|
|
701
|
+
spaceId?: string;
|
|
702
|
+
};
|
|
703
|
+
};
|
|
704
|
+
Theme: ThemeState;
|
|
705
|
+
}
|
|
706
|
+
/** Nombres de tema disponibles. */
|
|
707
|
+
type ThemeName = 'lightBlueIndigo' | 'darkBlack' | 'darkBlue' | 'lightAmber' | 'lightBlue' | 'lightBrown' | 'lightGray' | 'lightGreen' | 'lightLime' | 'lightOrange' | 'lightPink' | 'lightPurple' | 'lightRed' | 'lightTeal' | 'lightYellow';
|
|
708
|
+
/** Estado del slice. */
|
|
709
|
+
interface ThemeState {
|
|
710
|
+
themeSelected: Theme;
|
|
711
|
+
darkMode: boolean;
|
|
712
|
+
toggleStatus: 'idle' | 'toggled';
|
|
713
|
+
}
|
|
714
|
+
/** Guarda el tema elegido en el backend. */
|
|
715
|
+
declare const updateTheme: _reduxjs_toolkit.AsyncThunk<{
|
|
716
|
+
theme: ThemeName;
|
|
717
|
+
}, ThemeName, {
|
|
718
|
+
state: ThemeRootState;
|
|
719
|
+
dispatch?: redux_thunk.ThunkDispatch<unknown, unknown, redux.UnknownAction>;
|
|
720
|
+
extra?: unknown;
|
|
721
|
+
rejectValue?: unknown;
|
|
722
|
+
serializedErrorType?: unknown;
|
|
723
|
+
pendingMeta?: unknown;
|
|
724
|
+
fulfilledMeta?: unknown;
|
|
725
|
+
rejectedMeta?: unknown;
|
|
726
|
+
}>;
|
|
727
|
+
/** Valida que el string sea un `ThemeName`. */
|
|
728
|
+
declare const isValidThemeName: (theme: string) => theme is ThemeName;
|
|
729
|
+
declare const toggleTheme: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<ThemeName, "Theme/toggleTheme">;
|
|
730
|
+
declare const toggleModeTheme: _reduxjs_toolkit.ActionCreatorWithoutPayload<"Theme/toggleModeTheme">;
|
|
731
|
+
declare const selectThemeToggleStatus: (state: ThemeRootState) => "idle" | "toggled";
|
|
732
|
+
declare const selectTheme: (state: ThemeRootState) => Theme;
|
|
733
|
+
declare const selectDarkTheme: (state: ThemeRootState) => boolean;
|
|
734
|
+
/**
|
|
735
|
+
* @deprecated Usar `selectTheme`. El prefijo correcto para un selector es
|
|
736
|
+
* `select` (ver Guía de Arquitectura Frontend, sección 4 - Nomenclatura).
|
|
737
|
+
* Se mantiene hasta que los 6 micro-fronts terminen de migrar.
|
|
738
|
+
*/
|
|
739
|
+
declare const selectedTheme: (state: ThemeRootState) => Theme;
|
|
740
|
+
/**
|
|
741
|
+
* @deprecated Usar `selectDarkTheme`. Mismo motivo que `selectedTheme`.
|
|
742
|
+
*/
|
|
743
|
+
declare const selectedDarkTheme: (state: ThemeRootState) => boolean;
|
|
744
|
+
declare const _default: redux.Reducer<ThemeState>;
|
|
678
745
|
|
|
679
746
|
declare module '@mui/material/styles' {
|
|
680
747
|
interface TypeBackground {
|
|
@@ -688,6 +755,7 @@ declare module '@mui/material/styles' {
|
|
|
688
755
|
panelHeader: string;
|
|
689
756
|
panelCenter: string;
|
|
690
757
|
panelGradient: string;
|
|
758
|
+
selectedItem: string;
|
|
691
759
|
}
|
|
692
760
|
interface TypeText {
|
|
693
761
|
colorMain: string;
|
|
@@ -749,55 +817,4 @@ declare const lightGray: Theme;
|
|
|
749
817
|
declare const darkBlue: Theme;
|
|
750
818
|
declare const darkBlack: Theme;
|
|
751
819
|
|
|
752
|
-
|
|
753
|
-
* Minimal root state shape required by this slice.
|
|
754
|
-
* Consumer apps must include both Theme and User (with uid) in their store.
|
|
755
|
-
*/
|
|
756
|
-
interface ThemeRootState {
|
|
757
|
-
User: {
|
|
758
|
-
user: {
|
|
759
|
-
uid: string;
|
|
760
|
-
};
|
|
761
|
-
};
|
|
762
|
-
Theme: ThemeState;
|
|
763
|
-
}
|
|
764
|
-
/**
|
|
765
|
-
* Theme name type - defines all available theme options
|
|
766
|
-
*/
|
|
767
|
-
type ThemeName = 'lightBlueIndigo' | 'darkBlack' | 'darkBlue' | 'lightAmber' | 'lightBlue' | 'lightBrown' | 'lightGray' | 'lightGreen' | 'lightLime' | 'lightOrange' | 'lightPink' | 'lightPurple' | 'lightRed' | 'lightTeal' | 'lightYellow';
|
|
768
|
-
/**
|
|
769
|
-
* Theme slice state interface
|
|
770
|
-
*/
|
|
771
|
-
interface ThemeState {
|
|
772
|
-
themeSelected: Theme;
|
|
773
|
-
darkMode: boolean;
|
|
774
|
-
toggleStatus: 'idle' | 'toggled';
|
|
775
|
-
}
|
|
776
|
-
/**
|
|
777
|
-
* Async thunk to update theme on the server
|
|
778
|
-
*/
|
|
779
|
-
declare const updateTheme: _reduxjs_toolkit.AsyncThunk<{
|
|
780
|
-
theme: ThemeName;
|
|
781
|
-
}, ThemeName, {
|
|
782
|
-
state: ThemeRootState;
|
|
783
|
-
dispatch?: redux_thunk.ThunkDispatch<unknown, unknown, redux.UnknownAction>;
|
|
784
|
-
extra?: unknown;
|
|
785
|
-
rejectValue?: unknown;
|
|
786
|
-
serializedErrorType?: unknown;
|
|
787
|
-
pendingMeta?: unknown;
|
|
788
|
-
fulfilledMeta?: unknown;
|
|
789
|
-
rejectedMeta?: unknown;
|
|
790
|
-
}>;
|
|
791
|
-
/**
|
|
792
|
-
* Type guard to check if a string is a valid ThemeName
|
|
793
|
-
* @param theme - String to validate
|
|
794
|
-
* @returns true if theme is a valid ThemeName
|
|
795
|
-
*/
|
|
796
|
-
declare const isValidThemeName: (theme: string) => theme is ThemeName;
|
|
797
|
-
declare const toggleTheme: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<ThemeName, "Theme/toggleTheme">;
|
|
798
|
-
declare const toggleModeTheme: _reduxjs_toolkit.ActionCreatorWithoutPayload<"Theme/toggleModeTheme">;
|
|
799
|
-
declare const selectThemeToggleStatus: (state: ThemeRootState) => "idle" | "toggled";
|
|
800
|
-
declare const selectedTheme: (state: ThemeRootState) => Theme;
|
|
801
|
-
declare const selectedDarkTheme: (state: ThemeRootState) => boolean;
|
|
802
|
-
|
|
803
|
-
export { AsyncContent, type AsyncContentProps, type AsyncData, type AsyncState, type AsyncStatus, type Calendar, type Contact, ContactInfoPopup, ChatDetailsSidebar as ContactSidebar, type ChatDetailsSidebarProps as ContactSidebarProps, EditContactModal, type EditContactModalProps, type EditContactMode, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, type EventData, EventsDialog, type EventsDialogProps, type IsEmptyFn, type ItemType, type ModalMode, MuiComponentsConfig, type Notification, PanelErrorBoundary, type PanelErrorBoundaryProps, type SidebarChatIntegration, type StartConversationTarget, type TaskData, type ThemeName, type ThemeRootState, type ThemeState, type UseAsyncDataResult, asyncIdle, asyncRequestFailed, asyncRequestStarted, asyncRequestSucceeded, darkBlack, darkBlue, defaultIsEmpty, deriveAsyncState, getErrorMessage, i18nInstance as i18n, isStale, isValidThemeName, lightAmber, lightBlue, lightBlueIndigo, lightBrown, lightGray, lightGreen, lightLime, lightOrange, lightPink, lightPurple, lightRed, lightTeal, lightYellow, selectThemeToggleStatus, selectedDarkTheme, selectedTheme, toggleModeTheme, toggleTheme, updateTheme, useAsyncData };
|
|
820
|
+
export { AsyncContent, type AsyncContentProps, type AsyncData, type AsyncState, type AsyncStatus, type Calendar, type Contact, ContactInfoPopup, ChatDetailsSidebar as ContactSidebar, type ChatDetailsSidebarProps as ContactSidebarProps, EditContactModal, type EditContactModalProps, type EditContactMode, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, type EventData, EventsDialog, type EventsDialogProps, type IsEmptyFn, type ItemType, type ModalMode, MuiComponentsConfig, type MuiComponentsConfigOptions, type Notification, PanelErrorBoundary, type PanelErrorBoundaryProps, type SidebarChatIntegration, type StartConversationTarget, type TaskData, type ThemeName, type ThemeRootState, type ThemeState, type UseAsyncDataResult, asyncIdle, asyncRequestFailed, asyncRequestStarted, asyncRequestSucceeded, darkBlack, darkBlue, defaultIsEmpty, deriveAsyncState, getErrorMessage, i18nInstance as i18n, isStale, isValidThemeName, lightAmber, lightBlue, lightBlueIndigo, lightBrown, lightGray, lightGreen, lightLime, lightOrange, lightPink, lightPurple, lightRed, lightTeal, lightYellow, selectDarkTheme, selectTheme, selectThemeToggleStatus, selectedDarkTheme, selectedTheme, _default as themeReducer, toggleModeTheme, toggleTheme, updateTheme, useAsyncData };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type Language = 'en' | 'es';
|
|
3
|
+
interface LanguageProviderProps {
|
|
4
|
+
language: Language;
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export declare const LanguageProvider: ({ language, children }: LanguageProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const useLanguageContext: () => Language;
|
|
9
|
+
export {};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Theme } from '@mui/material';
|
|
2
|
+
/**
|
|
3
|
+
* Ajustes que difieren entre apps. Los valores por defecto son los que ya
|
|
4
|
+
* usaba el paquete, asi que omitir las opciones no cambia nada.
|
|
5
|
+
*/
|
|
6
|
+
export interface MuiComponentsConfigOptions {
|
|
7
|
+
/**
|
|
8
|
+
* Fondo del modal y su backdrop en transparente. Lo usan header y home;
|
|
9
|
+
* contacts lo tenia desactivado a proposito.
|
|
10
|
+
*/
|
|
11
|
+
transparentModal?: boolean;
|
|
12
|
+
/** z-index del popper del Autocomplete. Header necesita 1; el resto, 11. */
|
|
13
|
+
autocompleteZIndex?: number;
|
|
14
|
+
}
|
|
15
|
+
declare const MuiComponentsConfig: (themeRedux: Theme, options?: MuiComponentsConfigOptions) => Theme;
|
|
16
|
+
export default MuiComponentsConfig;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { Theme } from '@mui/material';
|
|
2
|
+
declare module '@mui/material/styles' {
|
|
3
|
+
interface TypeBackground {
|
|
4
|
+
mainCenter: string;
|
|
5
|
+
mainGradient: string;
|
|
6
|
+
navMenu: string;
|
|
7
|
+
dropdownMenu: string;
|
|
8
|
+
panel: string;
|
|
9
|
+
tooltip: string;
|
|
10
|
+
accordionHeader: string;
|
|
11
|
+
panelHeader: string;
|
|
12
|
+
panelCenter: string;
|
|
13
|
+
panelGradient: string;
|
|
14
|
+
selectedItem: string;
|
|
15
|
+
}
|
|
16
|
+
interface TypeText {
|
|
17
|
+
colorMain: string;
|
|
18
|
+
}
|
|
19
|
+
interface Palette {
|
|
20
|
+
containerBox: {
|
|
21
|
+
default: string;
|
|
22
|
+
main: string;
|
|
23
|
+
};
|
|
24
|
+
dropdownBox: string;
|
|
25
|
+
color: {
|
|
26
|
+
icons: string;
|
|
27
|
+
};
|
|
28
|
+
cellHeader: string;
|
|
29
|
+
Skeleton: {
|
|
30
|
+
bg: string;
|
|
31
|
+
};
|
|
32
|
+
messageBox: string;
|
|
33
|
+
boxShadow: string;
|
|
34
|
+
disabled: string;
|
|
35
|
+
}
|
|
36
|
+
interface PaletteOptions {
|
|
37
|
+
containerBox?: {
|
|
38
|
+
default?: string;
|
|
39
|
+
main?: string;
|
|
40
|
+
};
|
|
41
|
+
dropdownBox?: string;
|
|
42
|
+
color?: {
|
|
43
|
+
icons?: string;
|
|
44
|
+
};
|
|
45
|
+
cellHeader?: string;
|
|
46
|
+
Skeleton?: {
|
|
47
|
+
bg?: string;
|
|
48
|
+
};
|
|
49
|
+
messageBox?: string;
|
|
50
|
+
boxShadow?: string;
|
|
51
|
+
disabled?: string;
|
|
52
|
+
}
|
|
53
|
+
interface Theme {
|
|
54
|
+
name?: string;
|
|
55
|
+
}
|
|
56
|
+
interface ThemeOptions {
|
|
57
|
+
name?: string;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
export declare const lightBlueIndigo: Theme;
|
|
61
|
+
export declare const lightBlue: Theme;
|
|
62
|
+
export declare const lightRed: Theme;
|
|
63
|
+
export declare const lightGreen: Theme;
|
|
64
|
+
export declare const lightPink: Theme;
|
|
65
|
+
export declare const lightPurple: Theme;
|
|
66
|
+
export declare const lightTeal: Theme;
|
|
67
|
+
export declare const lightLime: Theme;
|
|
68
|
+
export declare const lightYellow: Theme;
|
|
69
|
+
export declare const lightAmber: Theme;
|
|
70
|
+
export declare const lightOrange: Theme;
|
|
71
|
+
export declare const lightBrown: Theme;
|
|
72
|
+
export declare const lightGray: Theme;
|
|
73
|
+
export declare const darkBlue: Theme;
|
|
74
|
+
export declare const darkBlack: Theme;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { Theme } from '@mui/material';
|
|
2
|
+
/**
|
|
3
|
+
* Forma mínima del store que necesita este slice: la app que lo use tiene que
|
|
4
|
+
* tener `Theme` y `User.user.uid`.
|
|
5
|
+
*/
|
|
6
|
+
export interface ThemeRootState {
|
|
7
|
+
User: {
|
|
8
|
+
user: {
|
|
9
|
+
uid: string;
|
|
10
|
+
/** Requerido por `updateTheme`: la URL lo lleva en la ruta. */
|
|
11
|
+
spaceId?: string;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
Theme: ThemeState;
|
|
15
|
+
}
|
|
16
|
+
/** Nombres de tema disponibles. */
|
|
17
|
+
export type ThemeName = 'lightBlueIndigo' | 'darkBlack' | 'darkBlue' | 'lightAmber' | 'lightBlue' | 'lightBrown' | 'lightGray' | 'lightGreen' | 'lightLime' | 'lightOrange' | 'lightPink' | 'lightPurple' | 'lightRed' | 'lightTeal' | 'lightYellow';
|
|
18
|
+
/** Estado del slice. */
|
|
19
|
+
export interface ThemeState {
|
|
20
|
+
themeSelected: Theme;
|
|
21
|
+
darkMode: boolean;
|
|
22
|
+
toggleStatus: 'idle' | 'toggled';
|
|
23
|
+
}
|
|
24
|
+
/** Guarda el tema elegido en el backend. */
|
|
25
|
+
export declare const updateTheme: import("@reduxjs/toolkit").AsyncThunk<{
|
|
26
|
+
theme: ThemeName;
|
|
27
|
+
}, ThemeName, {
|
|
28
|
+
state: ThemeRootState;
|
|
29
|
+
dispatch?: import("redux-thunk").ThunkDispatch<unknown, unknown, import("redux").UnknownAction>;
|
|
30
|
+
extra?: unknown;
|
|
31
|
+
rejectValue?: unknown;
|
|
32
|
+
serializedErrorType?: unknown;
|
|
33
|
+
pendingMeta?: unknown;
|
|
34
|
+
fulfilledMeta?: unknown;
|
|
35
|
+
rejectedMeta?: unknown;
|
|
36
|
+
}>;
|
|
37
|
+
/** Valida que el string sea un `ThemeName`. */
|
|
38
|
+
export declare const isValidThemeName: (theme: string) => theme is ThemeName;
|
|
39
|
+
export declare const toggleTheme: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<ThemeName, "Theme/toggleTheme">, toggleModeTheme: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"Theme/toggleModeTheme">;
|
|
40
|
+
export declare const selectThemeToggleStatus: (state: ThemeRootState) => "idle" | "toggled";
|
|
41
|
+
export declare const selectTheme: (state: ThemeRootState) => Theme;
|
|
42
|
+
export declare const selectDarkTheme: (state: ThemeRootState) => boolean;
|
|
43
|
+
/**
|
|
44
|
+
* @deprecated Usar `selectTheme`. El prefijo correcto para un selector es
|
|
45
|
+
* `select` (ver Guía de Arquitectura Frontend, sección 4 - Nomenclatura).
|
|
46
|
+
* Se mantiene hasta que los 6 micro-fronts terminen de migrar.
|
|
47
|
+
*/
|
|
48
|
+
export declare const selectedTheme: (state: ThemeRootState) => Theme;
|
|
49
|
+
/**
|
|
50
|
+
* @deprecated Usar `selectDarkTheme`. Mismo motivo que `selectedTheme`.
|
|
51
|
+
*/
|
|
52
|
+
export declare const selectedDarkTheme: (state: ThemeRootState) => boolean;
|
|
53
|
+
declare const _default: import("redux").Reducer<ThemeState>;
|
|
54
|
+
export default _default;
|
package/package.json
CHANGED
package/readme
CHANGED
|
@@ -1,71 +1,71 @@
|
|
|
1
|
-
# Trii Components
|
|
2
|
-
|
|
3
|
-
## Introduction
|
|
4
|
-
|
|
5
|
-
This project contains reusable components for the Trii application.
|
|
6
|
-
|
|
7
|
-
## Prerequisites
|
|
8
|
-
|
|
9
|
-
- Node.js (v14 or higher)
|
|
10
|
-
- npm (v6 or higher) or yarn (v1.22 or higher)
|
|
11
|
-
|
|
12
|
-
## Installation
|
|
13
|
-
|
|
14
|
-
1. Clone the repository:
|
|
15
|
-
```sh
|
|
16
|
-
git clone https://github.com/yourusername/trii-components.git
|
|
17
|
-
```
|
|
18
|
-
2. Navigate to the project directory:
|
|
19
|
-
```sh
|
|
20
|
-
cd trii-components
|
|
21
|
-
```
|
|
22
|
-
3. Install dependencies:
|
|
23
|
-
```sh
|
|
24
|
-
npm install
|
|
25
|
-
```
|
|
26
|
-
or
|
|
27
|
-
```sh
|
|
28
|
-
yarn install
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
## Running the Project
|
|
32
|
-
|
|
33
|
-
To start the development server, run:
|
|
34
|
-
|
|
35
|
-
```sh
|
|
36
|
-
npm run storybook
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
or
|
|
40
|
-
|
|
41
|
-
```sh
|
|
42
|
-
yarn storybook
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
## Building the Project
|
|
46
|
-
|
|
47
|
-
To build the project, run:
|
|
48
|
-
|
|
49
|
-
```sh
|
|
50
|
-
npm run build
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
or
|
|
54
|
-
|
|
55
|
-
```sh
|
|
56
|
-
yarn build
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
## Upload build to NPM
|
|
60
|
-
|
|
61
|
-
To upload the build to NPM, run:
|
|
62
|
-
|
|
63
|
-
```sh
|
|
64
|
-
npm publish
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
or
|
|
68
|
-
|
|
69
|
-
```sh
|
|
70
|
-
yarn publish
|
|
71
|
-
```
|
|
1
|
+
# Trii Components
|
|
2
|
+
|
|
3
|
+
## Introduction
|
|
4
|
+
|
|
5
|
+
This project contains reusable components for the Trii application.
|
|
6
|
+
|
|
7
|
+
## Prerequisites
|
|
8
|
+
|
|
9
|
+
- Node.js (v14 or higher)
|
|
10
|
+
- npm (v6 or higher) or yarn (v1.22 or higher)
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
1. Clone the repository:
|
|
15
|
+
```sh
|
|
16
|
+
git clone https://github.com/yourusername/trii-components.git
|
|
17
|
+
```
|
|
18
|
+
2. Navigate to the project directory:
|
|
19
|
+
```sh
|
|
20
|
+
cd trii-components
|
|
21
|
+
```
|
|
22
|
+
3. Install dependencies:
|
|
23
|
+
```sh
|
|
24
|
+
npm install
|
|
25
|
+
```
|
|
26
|
+
or
|
|
27
|
+
```sh
|
|
28
|
+
yarn install
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Running the Project
|
|
32
|
+
|
|
33
|
+
To start the development server, run:
|
|
34
|
+
|
|
35
|
+
```sh
|
|
36
|
+
npm run storybook
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
or
|
|
40
|
+
|
|
41
|
+
```sh
|
|
42
|
+
yarn storybook
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Building the Project
|
|
46
|
+
|
|
47
|
+
To build the project, run:
|
|
48
|
+
|
|
49
|
+
```sh
|
|
50
|
+
npm run build
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
or
|
|
54
|
+
|
|
55
|
+
```sh
|
|
56
|
+
yarn build
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## Upload build to NPM
|
|
60
|
+
|
|
61
|
+
To upload the build to NPM, run:
|
|
62
|
+
|
|
63
|
+
```sh
|
|
64
|
+
npm publish
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
or
|
|
68
|
+
|
|
69
|
+
```sh
|
|
70
|
+
yarn publish
|
|
71
|
+
```
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
export interface AssistantRecommendation {
|
|
2
|
-
id: string;
|
|
3
|
-
title: string;
|
|
4
|
-
description: string;
|
|
5
|
-
confidence: number;
|
|
6
|
-
icon: 'validate' | 'update' | 'reminder';
|
|
7
|
-
}
|
|
8
|
-
export interface SuggestedKnowledge {
|
|
9
|
-
id: string;
|
|
10
|
-
title: string;
|
|
11
|
-
description: string;
|
|
12
|
-
}
|
|
13
|
-
export interface AssistantData {
|
|
14
|
-
conversationContext: string;
|
|
15
|
-
operationalSummary: string;
|
|
16
|
-
keyPoints: string[];
|
|
17
|
-
recommendations: AssistantRecommendation[];
|
|
18
|
-
suggestedKnowledge: SuggestedKnowledge[];
|
|
19
|
-
preventiveQuality: {
|
|
20
|
-
score: string;
|
|
21
|
-
description: string;
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
interface AssistantViewProps {
|
|
25
|
-
data?: AssistantData;
|
|
26
|
-
}
|
|
27
|
-
/** Base visual del asistente, desacoplada de futuras acciones y respuestas IA. */
|
|
28
|
-
declare const AssistantView: ({ data }: AssistantViewProps) => import("react/jsx-runtime").JSX.Element;
|
|
29
|
-
export default AssistantView;
|
package/dist/types/components/ContactSidebar/components/InteractionView/AssignmentsView.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export interface AssignmentHistoryItem {
|
|
2
|
-
id: string;
|
|
3
|
-
description: string;
|
|
4
|
-
time: string;
|
|
5
|
-
relatedTo: string;
|
|
6
|
-
}
|
|
7
|
-
interface AssignmentsViewProps {
|
|
8
|
-
history?: AssignmentHistoryItem[];
|
|
9
|
-
}
|
|
10
|
-
/** Timeline visual de asignaciones, independiente de su futura fuente de datos. */
|
|
11
|
-
declare const AssignmentsView: ({ history, }: AssignmentsViewProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
export default AssignmentsView;
|
package/dist/types/components/ContactSidebar/components/InteractionView/InteractionSummary.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export interface InteractionSummaryData {
|
|
2
|
-
group: string;
|
|
3
|
-
responsible: string;
|
|
4
|
-
status: string;
|
|
5
|
-
tracking: Array<{
|
|
6
|
-
id: string;
|
|
7
|
-
label: string;
|
|
8
|
-
checked: boolean;
|
|
9
|
-
}>;
|
|
10
|
-
}
|
|
11
|
-
interface InteractionSummaryProps {
|
|
12
|
-
data?: InteractionSummaryData;
|
|
13
|
-
}
|
|
14
|
-
/** Resumen visual desacoplado de la fuente de datos de una interacción. */
|
|
15
|
-
declare const InteractionSummary: ({ data, }: InteractionSummaryProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
-
export default InteractionSummary;
|
package/dist/types/components/ContactSidebar/components/InteractionView/OperationalActivityView.d.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export interface OperationalActivityEvent {
|
|
2
|
-
id: string;
|
|
3
|
-
description: string;
|
|
4
|
-
time: string;
|
|
5
|
-
category: string;
|
|
6
|
-
color: 'success' | 'error' | 'warning' | 'neutral';
|
|
7
|
-
}
|
|
8
|
-
interface OperationalActivityViewProps {
|
|
9
|
-
events?: OperationalActivityEvent[];
|
|
10
|
-
}
|
|
11
|
-
/** Cronología visual desacoplada de la futura fuente de eventos operativos. */
|
|
12
|
-
declare const OperationalActivityView: ({ events, }: OperationalActivityViewProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
export default OperationalActivityView;
|
package/dist/types/components/ContactSidebar/components/InteractionView/ParticipantsView.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export interface Participant {
|
|
2
|
-
id: string;
|
|
3
|
-
initials: string;
|
|
4
|
-
name: string;
|
|
5
|
-
role: string;
|
|
6
|
-
details: string;
|
|
7
|
-
avatarColor: string;
|
|
8
|
-
status?: string;
|
|
9
|
-
}
|
|
10
|
-
interface ParticipantsViewProps {
|
|
11
|
-
participants?: Participant[];
|
|
12
|
-
}
|
|
13
|
-
/** Lista visual de participantes desacoplada de la futura fuente de datos. */
|
|
14
|
-
declare const ParticipantsView: ({ participants, }: ParticipantsViewProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
-
export default ParticipantsView;
|
package/dist/types/components/ContactSidebar/components/InteractionView/ServiceLevelView.d.ts
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
type ServiceLevelStatus = 'completed' | 'inProgress' | 'expired';
|
|
2
|
-
interface ServiceLevelObjective {
|
|
3
|
-
id: string;
|
|
4
|
-
name: string;
|
|
5
|
-
details: string;
|
|
6
|
-
status: ServiceLevelStatus;
|
|
7
|
-
}
|
|
8
|
-
interface ServiceLevelPolicyItem {
|
|
9
|
-
id: string;
|
|
10
|
-
label: string;
|
|
11
|
-
value: string;
|
|
12
|
-
}
|
|
13
|
-
interface ServiceLevelHistoryItem {
|
|
14
|
-
id: string;
|
|
15
|
-
title: string;
|
|
16
|
-
details: string;
|
|
17
|
-
}
|
|
18
|
-
export interface ServiceLevelData {
|
|
19
|
-
statusTitle: string;
|
|
20
|
-
statusDescription: string;
|
|
21
|
-
objectives: ServiceLevelObjective[];
|
|
22
|
-
policy: ServiceLevelPolicyItem[];
|
|
23
|
-
history: ServiceLevelHistoryItem[];
|
|
24
|
-
}
|
|
25
|
-
declare const ServiceLevelHistoryItem: ({ item, }: {
|
|
26
|
-
item: ServiceLevelHistoryItem;
|
|
27
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
28
|
-
interface ServiceLevelViewProps {
|
|
29
|
-
data?: ServiceLevelData;
|
|
30
|
-
}
|
|
31
|
-
/** Vista UI de SLA desacoplada de cálculos y datos operativos reales. */
|
|
32
|
-
declare const ServiceLevelView: ({ data, }: ServiceLevelViewProps) => import("react/jsx-runtime").JSX.Element;
|
|
33
|
-
export default ServiceLevelView;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './ContactHighlights';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './ContactRepairs';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './ContactTicket';
|