@eclass/ui-kit 1.51.7 → 1.51.8

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './atoms';
+export * from './molecules';
+export * from './organisms';
+export * from './theme';

package/dist/molecules/Buttons/Btn.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+interface colorScheme {
+    main: string;
+    hover: string;
+}
+export interface propsBaseBtns {
+    ariaLabel?: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    isFullWidth?: boolean;
+    leftIcon?: React.ReactElement;
+    m?: string;
+    isLoading?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    rightIcon?: React.ReactElement;
+    role?: 'button' | 'link';
+    size?: 'regular' | 'small';
+    type?: 'button' | 'submit' | 'reset';
+    tabIndex?: number;
+    id?: string;
+}
+interface props extends propsBaseBtns {
+    bg?: colorScheme;
+    /** Colores para el efecto del :active son necesarios dos */
+    borderColorActive?: string[];
+    color?: string;
+    fillLoader?: string;
+    rounded?: boolean;
+    touchDark?: boolean;
+}
+/**
+ * Componente Btn
+ *
+ * Dibuja un boton base que posee todo lo estipulado en
+ * @see https://zeroheight.com/15698077d/p/358e93-buttons
+ *
+ * @example <Btn>Lorem</Btn>
+ */
+export declare function Btn({ ariaLabel, bg, borderColorActive, children, color, disabled, fillLoader, id, isFullWidth, isLoading, leftIcon, m, onClick, rightIcon, role, rounded, size, touchDark, type, tabIndex, }: props): JSX.Element;
+export declare namespace Btn {
+    var displayName: string;
+}
+export {};

package/dist/molecules/Buttons/BtnLink.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export interface props {
+    as?: 'button' | 'a';
+    ariaLabel?: string;
+    children?: React.ReactNode;
+    fontSize?: string | '0.875rem';
+    href?: string;
+    id?: string;
+    m?: string;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    role?: 'button' | 'link';
+    tabIndex?: number;
+    textDecorationLine?: boolean;
+}
+export declare function BtnLink({ as, ariaLabel, children, fontSize, href, id, m, onClick, role, tabIndex, textDecorationLine, }: props): JSX.Element;
+export declare namespace BtnLink {
+    var displayName: string;
+}

package/dist/molecules/Buttons/BtnPrimary.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { propsBaseBtns } from './Btn';
+/**
+ * Componente BtnPrimary
+ *
+ * @see https://zeroheight.com/15698077d/p/358e93-buttons
+ *
+ * @example <BtnPrimary>Lorem</BtnPrimary>
+ */
+type XOR<T, U> = T | U extends object ? (T extends U ? never : T) | (U extends T ? never : U) : T | U;
+interface ButtonWithTextProps extends propsBaseBtns {
+    children: React.ReactNode;
+    ariaLabel?: string;
+}
+interface ButtonWithoutTextProps extends propsBaseBtns {
+    children?: React.ReactNode;
+    ariaLabel: string;
+}
+type PrimaryButtonProps = XOR<ButtonWithTextProps, ButtonWithoutTextProps>;
+export declare function BtnPrimary({ ariaLabel, children, disabled, isFullWidth, leftIcon, m, isLoading, onClick, rightIcon, role, size, type, tabIndex, id, }: PrimaryButtonProps): JSX.Element;
+export declare namespace BtnPrimary {
+    var displayName: string;
+}
+export {};

package/dist/molecules/Buttons/BtnSecondary.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { propsBaseBtns } from './Btn';
+/**
+ * Componente BtnSecondary
+ *
+ * @see https://zeroheight.com/15698077d/p/358e93-buttons
+ *
+ * @example <BtnSecondary>Lorem</BtnSecondary>
+ */
+type XOR<T, U> = T | U extends object ? (T extends U ? never : T) | (U extends T ? never : U) : T | U;
+interface ButtonWithTextProps extends propsBaseBtns {
+    children: React.ReactNode;
+    ariaLabel?: string;
+}
+interface ButtonWithoutTextProps extends propsBaseBtns {
+    children?: React.ReactNode;
+    ariaLabel: string;
+}
+type SecondaryButtonProps = XOR<ButtonWithTextProps, ButtonWithoutTextProps>;
+export declare function BtnSecondary({ ariaLabel, children, disabled, isFullWidth, leftIcon, m, isLoading, onClick, rightIcon, role, size, type, tabIndex, id, }: SecondaryButtonProps): JSX.Element;
+export declare namespace BtnSecondary {
+    var displayName: string;
+}
+export {};

package/dist/molecules/Buttons/BtnTertiary.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+type XOR<T, U> = T | U extends object ? (T extends U ? never : T) | (U extends T ? never : U) : T | U;
+export interface propsTertiaryBtn {
+    activeWhenPress?: boolean;
+    id?: string;
+    iconCustom?: JSX.Element;
+    iconStatus?: 'answer' | 'ahead' | 'back' | 'edit' | 'delete' | 'more' | 'password' | 'multimedia' | 'record' | 'download' | 'noIcon';
+    m?: string;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void;
+    rightIcon?: boolean;
+    role?: 'button' | 'link';
+    type?: 'button' | 'submit' | 'reset';
+    tabIndex?: number;
+    withoutColor?: boolean;
+}
+interface ButtonWithTextProps extends propsTertiaryBtn {
+    children: React.ReactNode;
+    ariaLabel?: string;
+}
+interface ButtonWithoutTextProps extends propsTertiaryBtn {
+    children?: React.ReactNode;
+    ariaLabel: string;
+}
+type ButtonProps = XOR<ButtonWithTextProps, ButtonWithoutTextProps>;
+export declare function BtnTertiary({ ariaLabel, activeWhenPress, children, id, iconStatus, iconCustom, m, onClick, onMouseEnter, onMouseLeave, rightIcon, role, type, tabIndex, withoutColor, }: ButtonProps): JSX.Element;
+export declare namespace BtnTertiary {
+    var displayName: string;
+}
+export {};

package/dist/molecules/Tooltip/NewTooltip.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { PlacementWithLogical, CSSObject } from '@chakra-ui/react';
+interface TooltipProps {
+    className?: string;
+    label?: React.ReactNode;
+    isDisabled?: boolean;
+    m?: string;
+    maxWidth?: string;
+    placement?: PlacementWithLogical;
+    isOpen?: boolean | undefined;
+    sx?: CSSObject | undefined;
+}
+export declare const NewTooltip: FC<TooltipProps>;
+export {};

package/dist/molecules/UserWay/UserWay.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function UserWay(): JSX.Element;

package/dist/molecules/UserWay/UserWayCookie.d.ts

@@ -0,0 +1 @@
+export declare function UserWayCookie(): void;

package/dist/molecules/index.d.ts

@@ -0,0 +1,8 @@
+export { Btn } from './Buttons/Btn';
+export { BtnPrimary } from './Buttons/BtnPrimary';
+export { BtnSecondary } from './Buttons/BtnSecondary';
+export { BtnTertiary } from './Buttons/BtnTertiary';
+export { BtnLink } from './Buttons/BtnLink';
+export { NewTooltip } from './Tooltip/NewTooltip';
+export { UserWay } from './UserWay/UserWay';
+export { UserWayCookie } from './UserWay/UserWayCookie';

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, fullWidth, isFlash, onClick, state, m, endTextLink, onClickLink, }: 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,74 @@
+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
+  /**
+   * Ancho al 100% del contenedot
+   */
+  fullWidth?: boolean
+  /**
+   * Para notificación flash
+   */
+  isFlash?: boolean
+  /**
+   * Función del botón
+   */
+  onClick?: () => void
+  /**
+   * Estado que define color e ícono de la alerta
+   * @exampe
+   * 'error'
+   * 'info'
+   * 'success'
+   * 'warning'
+   */
+  state: TState
+  /**
+   * Margen
+   */
+  m?: string
+
+  // agrega el link al final del texto
+  endTextLink?: string
+  onClickLink?: () => void
+}
+
+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,45 @@
+/// <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;
+    };
+};
+export declare const alertColorStates: {
+    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/Calendar/Dropdown/CalendarDropdown/CalendarDropdownContainer.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ICalendarDropdown } from '../types';
+export declare const CalendarDropdownContainer: ({ events, loading, text, now, redirectToCalendar, courseColors: colors, m, }: ICalendarDropdown) => JSX.Element;

package/dist/organisms/Calendar/Dropdown/CalendarDropdown/Components/Empty.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Empty: ({ text }: {
+    text?: string | undefined;
+}) => JSX.Element;

package/dist/organisms/Calendar/Dropdown/CalendarDropdown/Components/Events.d.ts

@@ -0,0 +1,30 @@
+import { Key } from 'react';
+import { Text } from '../../types';
+interface EventsProps {
+    events: {
+        today: Event[];
+        tomorrow: Event[];
+        next: Event[];
+    };
+    text: Text;
+    redirecToCalendar: () => void;
+    isMobile: boolean;
+    colors: any;
+}
+export declare const Events: ({ events, text, redirecToCalendar, isMobile, colors, }: EventsProps) => JSX.Element;
+interface Event {
+    id: Key | null | undefined;
+    associated_resource: {
+        name: any;
+    };
+    course: {
+        name: string | undefined;
+    };
+    formatedDate: {
+        start: string;
+        hours: string;
+    };
+    course_id: string | number;
+    isNew: boolean | undefined;
+}
+export {};

package/dist/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface IGoToCalendar {
+    hasNew: boolean;
+    text: string;
+    tooltipDisabled: boolean;
+}
+export declare const GoToCalendar: ({ hasNew, text, tooltipDisabled }: IGoToCalendar) => JSX.Element;
+export {};

package/dist/organisms/Calendar/Dropdown/CalendarDropdown/Components/Header.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Header: ({ text, isMobile }: {
+    text?: string | undefined;
+    isMobile: boolean;
+}) => JSX.Element;

package/dist/organisms/Calendar/Dropdown/CalendarDropdown/Icons/CalendarButtonIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CalendarButtonIcon: () => JSX.Element;

package/dist/organisms/Calendar/Dropdown/CalendarDropdown/Icons/NoEventsIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const NoEventsIcon: () => JSX.Element;

package/dist/organisms/Calendar/Dropdown/CalendarDropdown/services/parseEvents.d.ts

@@ -0,0 +1,8 @@
+export declare const useParseEvents: (events: any[], now: string) => {
+    today: any[];
+    tomorrow: any[];
+    next: any[];
+    hasNew: boolean;
+    closeAndMarkSeen: () => void;
+    empty: boolean;
+};

package/dist/organisms/Calendar/Dropdown/CalendarDropdown.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ICalendarDropdown } from './types';
+export declare const CalendarDropdown: ({ redirectToCalendar, text, courseColors, now, events, loading, m, }: ICalendarDropdown) => JSX.Element;

package/dist/organisms/Calendar/Dropdown/types.d.ts

@@ -0,0 +1,49 @@
+interface AssociatedResource {
+  id: number
+}
+
+interface Course {
+  id: number
+  name: string
+}
+
+interface FormattedDate {
+  start: string
+  hours: string
+}
+
+interface Event {
+  id: number
+  course_id: number
+  start: string
+  end: string
+  associated_resource: AssociatedResource
+  course: Course
+  formatedDate: FormattedDate
+}
+
+export type Events = Event[]
+
+export interface Text {
+  buttonCalendar: string
+  course: string
+  empty: string
+  events: {
+    today: string
+    tomorrow: string
+    next: string
+  }
+  header: string
+  loading: string
+  tooltip: string
+}
+
+interface ICalendarDropdown {
+  m?: string
+  courseColors?: Record<string, string>
+  events: any
+  loading?: boolean
+  now: string
+  redirectToCalendar: () => void
+  text: Text
+}

package/dist/organisms/Calendar/EventsList/EventsList.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface IEventList {
+    hasNotification?: boolean;
+    isDropdown?: boolean;
+    name: string;
+    color?: string;
+    courseName?: string;
+    text: string;
+    date: string;
+    hours: string;
+}
+export declare const EventsList: ({ hasNotification, isDropdown, name, courseName, color, text, date, hours, }: IEventList) => JSX.Element;

package/dist/organisms/Calendar/EventsList/NotificationIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const NotificationIcon: () => JSX.Element;

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

@@ -0,0 +1,2 @@
+export { CalendarDropdown } from './Dropdown/CalendarDropdown';
+export { EventsList } from './EventsList/EventsList';

package/dist/organisms/CourseList/Boxes/BoxImage.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import * as Type from '../types';
+interface ImageBoxProps {
+    backgroundImg: string;
+    title: string;
+    data?: Type.ExtendAcademicList;
+    size?: 'large' | 'small';
+    m?: string;
+}
+export declare function BoxImage({ backgroundImg, title, data, size, m, }: ImageBoxProps): JSX.Element;
+export declare namespace BoxImage {
+    var displayName: string;
+}
+export {};

package/dist/organisms/CourseList/Boxes/BoxTraditional.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import * as Type from '../types';
+export declare const CourseBoxContext: React.Context<Partial<Type.ExtendAcademicList>>;
+interface IBoxTraditional {
+    data: Type.ExtendAcademicList;
+    modalPaymentText?: Type.PaymentText;
+}
+export declare function BoxTraditional({ data, modalPaymentText }: IBoxTraditional): JSX.Element;
+export declare namespace BoxTraditional {
+    var displayName: string;
+}
+export {};

package/dist/organisms/CourseList/Boxes/Boxes.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ExtendAcademicList, WrapperCoursesProps } from '../types';
+interface IBoxes {
+    type: WrapperCoursesProps['typeBox'];
+    modalPaymentText: WrapperCoursesProps['modalPaymentText'];
+    data: ExtendAcademicList;
+}
+export declare const Boxes: ({ type, data, modalPaymentText }: IBoxes) => JSX.Element;
+export {};

package/dist/organisms/CourseList/Boxes/index.d.ts

@@ -0,0 +1 @@
+export * from './Boxes';

package/dist/organisms/CourseList/CourseList.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import * as Type from './types';
+export declare const columnGap = 1.25;
+export declare const wCourse = 17.8125;
+/**
+ * Retorna listado de cursos.
+ * @example
+ *  <CourseList courses={courses} />
+ *
+ * Tener en cuenta el width del padre donde se pondra este componente, utilizar método maxWidthCoursesList
+ * @see src/organisms/CourseList/maxWidthCoursesList.ts
+ */
+export declare function CourseList({ courses, modalPaymentText, m, typeBox, }: Type.WrapperCoursesProps): JSX.Element | null;
+export declare namespace CourseList {
+    var displayName: string;
+}

package/dist/organisms/CourseList/components/CourseStatus.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ProgressCourse, StatusCourse } from '@eclass/api';
+interface props {
+    /** import { ProgressCourse } from '@eclass/api' */
+    progress: ProgressCourse;
+    /** import { StatusCourse } from '@eclass/api' */
+    status?: StatusCourse;
+}
+/**
+ * Devuelve estado en el que se encuentra el curso, por ejemplo:
+ *
+ * avance, inicio, curso aprovado, reprovado, finalizado
+ */
+export declare function CourseStatus({ progress, status }: props): JSX.Element;
+export {};

package/dist/organisms/CourseList/components/DateStatus.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface DateStatusProps {
+    date?: string;
+}
+export declare function DateStatus({ date }: DateStatusProps): JSX.Element | null;
+export declare namespace DateStatus {
+    var displayName: string;
+}
+export {};

package/dist/organisms/CourseList/components/Footer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import * as Type from '../types';
+export declare function Footer({ modalPaymentText }: Type.FooterProps): JSX.Element | null;
+export declare namespace Footer {
+    var displayName: string;
+}

package/dist/organisms/CourseList/components/Header.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function Header(): JSX.Element;
+export declare namespace Header {
+    var displayName: string;
+}

package/dist/organisms/CourseList/components/IconSelection.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface IconSelectionProps {
+    type: string;
+    progressValue?: number;
+}
+export declare function IconSelection({ type, progressValue }: IconSelectionProps): JSX.Element | null;
+export {};

package/dist/organisms/CourseList/components/Modal/PaymentModal.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import * as Type from '../../types';
+interface PaymentModalProps {
+    isOpen: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    showOverlay: boolean;
+    modalPaymentText: Type.PaymentText;
+}
+export declare function PaymentModal({ isOpen, onOpen, onClose, showOverlay, modalPaymentText, }: PaymentModalProps): JSX.Element | null;
+export {};

package/dist/organisms/CourseList/components/Modal/index.d.ts

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

package/dist/organisms/CourseList/components/Section.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function Section(): JSX.Element | null;
+export declare namespace Section {
+    var displayName: string;
+}