@eclass/ui-kit 1.19.2 → 1.21.0

package/dist/organisms/Alerts/Alert.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { IAlertProps } from './types.d';
+/**
+ * Componente de alerta embebida que puede tener 4 estados diferentes.
+ * Opcionalmente puede llevar un botón. El botón puede mostrar sólo un texto
+ * o un texto junto a un ícono.
+ * @example Implementación de alerta con botón y margen
+ * <Alert
+ * state='info'
+ * buttonName='Texto botón'
+ * buttonIcon={<Multimedia />}
+ * onClick={() => alert('hola')}
+ * m='0 20px'>
+ * Mensaje
+ * </Alert>
+ */
+export declare function Alert({ children, canDismiss, buttonText, buttonIcon, buttonLink, onClick, state, m, }: IAlertProps): JSX.Element;

package/dist/organisms/Alerts/FlashNotification.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { IFlashNotificationProps } from './types.d';
+/**
+ * Componente de notificación flash que se muestra centrada en la parte superior de la pantalla.
+ * Para implementarlo, se usa en conjunto con el hook useFlashNotification.
+ * @example Llamado useFlashNotification y asignación de props
+ * const { show, active, config } = useFlashNotification({
+ *  state: 'info',
+ *   message: 'Respuesta guardada',
+ *})
+ * @example Definición de trigger que activa la notificación
+ * <button onClick={() => { active()}}> Activar notificación </button>
+ * @example Componente FlashNotification recibiendo argumentos
+ * <FlashNotification {...config} show={show} />
+ */
+export declare function FlashNotification({ message, state, show, m, }: IFlashNotificationProps): JSX.Element;

package/dist/organisms/Alerts/index.d.ts

@@ -0,0 +1,3 @@
+export { Alert } from './Alert';
+export { FlashNotification } from './FlashNotification';
+export { useFlashNotification } from './utils/useFlashNotification';

package/dist/organisms/Alerts/types.d.ts

@@ -0,0 +1,62 @@
+type TState = 'error' | 'info' | 'success' | 'warning'
+export interface IAlertProps {
+  /**
+   * Mensaje de alerta
+   */
+  children?: React.ReactChild | React.ReactChild[]
+  /**
+   * Muestra el botón para cerrar
+   */
+  canDismiss?: boolean
+  /**
+   * Texto del botón
+   */
+  buttonText?: string
+  /**
+   * Ícono del botón
+   */
+  buttonIcon?: React.ReactElement
+  /**
+   * Boolean que determina si el botón es tipo link
+   */
+  buttonLink?: boolean
+  /**
+   * Función del botón
+   */
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void
+  /**
+   * Estado que define color e ícono de la alerta
+   * @exampe
+   * 'error'
+   * 'info'
+   * 'success'
+   * 'warning'
+   */
+  state: TState
+  /**
+   * Margen
+   */
+  m?: string
+}
+
+export interface IFlashNotificationProps {
+  /**
+   * Margen
+   */
+  m?: string
+  /**
+   * Mensaje que muestra la notificación
+   */
+  message: string
+  /**
+   * Estado que define color e ícono de la alerta
+   * @exampe
+   * 'error'
+   * 'info'
+   * 'success'
+   * 'warning'
+   * @
+   */
+  state: TState
+  show?: boolean
+}

package/dist/organisms/Alerts/utils/alertStates.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const alertStates: {
+    success: {
+        icon: JSX.Element;
+        bg: string;
+        id: string;
+    };
+    error: {
+        icon: JSX.Element;
+        bg: string;
+        id: string;
+    };
+    info: {
+        icon: JSX.Element;
+        bg: string;
+        id: string;
+    };
+    warning: {
+        icon: JSX.Element;
+        bg: string;
+        id: string;
+    };
+};

package/dist/organisms/Alerts/utils/handleTime.d.ts

@@ -0,0 +1 @@
+export declare const handleTime: (message: string) => number;

package/dist/organisms/Alerts/utils/useFlashNotification.d.ts

@@ -0,0 +1,18 @@
+import { IFlashNotificationProps } from '../types';
+/**
+ * Hook que actúa como trigger del componente FlashNotification,
+ * usando los siguientes parámetros:
+ * show: boolean que indica si la notificación se está mostrando o no,
+ * active: función que modifica el estado de show,
+ * config: contiene los valores de 'state' y message'
+ * @example Llamado useFlashNotification y asignación de props
+ * const { show, active, config } = useFlashNotification({
+ *  state: 'info',
+ *   message: 'Respuesta guardada',
+ *})
+ * @example Definición de trigger que activa la notificación
+ * <button onClick={() => { active()}}> Activar notificación </button>
+ * @example Componente FlashNotification recibiendo argumentos
+ * <FlashNotification {...config} show={show} />
+ */
+export declare const useFlashNotification: ({ state, message }: IFlashNotificationProps) => any;

package/dist/organisms/index.d.ts

@@ -1 +1,2 @@
 export * from './CourseList';
+export * from './Alerts';