feat(PDYE-1293): modals

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#93e6fc",
+    "activityBar.background": "#93e6fc",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#fa45d4",
+    "activityBarBadge.foreground": "#15202b",
+    "commandCenter.border": "#15202b99",
+    "sash.hoverBorder": "#93e6fc",
+    "statusBar.background": "#61dafb",
+    "statusBar.foreground": "#15202b",
+    "statusBarItem.hoverBackground": "#2fcefa",
+    "statusBarItem.remoteBackground": "#61dafb",
+    "statusBarItem.remoteForeground": "#15202b",
+    "titleBar.activeBackground": "#61dafb",
+    "titleBar.activeForeground": "#15202b",
+    "titleBar.inactiveBackground": "#61dafb99",
+    "titleBar.inactiveForeground": "#15202b99"
+  },
+  "peacock.color": "#61dafb"
+}

package.json

@@ -30,7 +30,8 @@
     "Sebastián González Riffo <sebastian@gonzalezr.cl>"
   ],
   "scripts": {
-    "dev": "vite",
+    "dev": "VITE_APP_MODE=playground vite",
+    "docu": "vite",
     "build": "tsc && vite build && npm run build:types && npm run copy-dts",
     "build:types": "tsc -p tsconfig.types.json",
     "copy-dts": "copyfiles -u 1 \"src/**/*.d.ts\" dist",

src/documentation/components/Organisms/ModalAlertDoc/ModalAlertDoc.tsx

@@ -1,69 +1,16 @@
-import { useState } from 'react'
-import { ModalAlert } from '@/organisms'
-import { BtnPrimary } from '@/molecules'
-import { ModalAlertProps } from '@/organisms/ModalAlert/types'
+// import { useState } from 'react'
+// // import { ModalAlert } from '@/organisms'
+// import { BtnPrimary } from '@/molecules'
+// import { ModalAlertProps } from '@/organisms/ModalAlert/types'
 
 export function ModalAlertDoc(): JSX.Element {
-  const [isOpen, setIsOpen] = useState(false)
-  const [isOpenInfo, setIsOpenInfo] = useState(false)
-  const optionsModal: ModalAlertProps = {
-    showModal: isOpen,
-    typeAlert: 'success',
-    title: '¿Seguro que deseas borrar esta pregunta?',
-    description: 'Por favor escoge otro horario.',
-    optionsButton: [
-      {
-        id: '1',
-        label: 'Opcion 1',
-        action: () => {
-          setIsOpen(false)
-        },
-      },
-      {
-        id: '2',
-        label: 'Opcion 2',
-        action: () => {
-          setIsOpen(false)
-        },
-      },
-    ],
-  }
-
-  const optionsModaInfol: ModalAlertProps = {
-    showModal: isOpenInfo,
-    typeAlert: 'info',
-    title: 'Información sobre tu nota',
-    description: (
-      <>
-        La razón por la que tu nota bajó en la evaluación podría ser que no entendiste completamente
-        el tema. Esto sucede porque si no comprendes bien el contenido, es difícil responder
-        correctamente a las preguntas. Es importante dedicar tiempo a estudiar y practicar para
-        asegurarte de tener un buen entendimiento del tema antes de la evaluación. <br />
-        <br />
-        La razón para la disminución de tu nota podría ser que se detectó que copiaste en tus
-        respuestas. Copiar no solo es deshonesto, sino que también muestra una falta de comprensión
-        y habilidad para resolver problemas por tu cuenta. Es importante recordar que la integridad
-        académica es fundamental y que es mejor esforzarse por entender y resolver los problemas por
-        uno mismo, incluso si eso significa obtener una nota más baja en el corto plazo.
-      </>
-    ),
-    optionsButton: [
-      {
-        id: '1',
-        label: 'Entendido',
-        action: () => {
-          setIsOpenInfo(false)
-        },
-      },
-    ],
-  }
   return (
     <>
-      <BtnPrimary onClick={() => setIsOpen(true)}>Ejemplo modal</BtnPrimary>
-      <br />
+      <p>Ejemplo modal</p>
+      {/* <br />
       <BtnPrimary onClick={() => setIsOpenInfo(true)}>Ejemplo modal Info</BtnPrimary>
       <ModalAlert {...optionsModal} />
-      <ModalAlert {...optionsModaInfol} />
+      <ModalAlert {...optionsModaInfol} /> */}
     </>
   )
 }

src/documentation/components/Organisms/Modals.tsx

@@ -0,0 +1,126 @@
+import { useDisclosure } from '@chakra-ui/react'
+import { BtnPrimary } from '@/molecules'
+import { Modal, ModalAlertNew } from '@/organisms'
+
+export const ModalDemo = ({
+  type,
+}: {
+  type?:
+    | 'withoutButtons'
+    | 'buttonsCenter'
+    | 'buttonsColumn'
+    | 'buttonsInside'
+    | 'fixedSubtitle'
+    | 'withoutMargin'
+    | 'closeOnOverlayClick'
+}): JSX.Element => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  const name = {
+    default: 'Open Modal',
+    withoutButtons: 'Sin botones (withoutButtons)',
+    buttonsCenter: 'Con boton centrado (buttonsCenter)',
+    buttonsColumn: 'Botones en mobile no pasan a columas (buttonsColumn)',
+    buttonsInside: 'Botones dentro del contenido (buttonsInside)',
+    fixedSubtitle: 'Subtitulo fijo (fixedSubtitle="")',
+    withoutMargin: 'Sin margin (withoutMargin)',
+    closeOnOverlayClick: 'Cerrar solo en botones (closeOnOverlayClick)',
+  }
+
+  return (
+    <>
+      <BtnPrimary onClick={onOpen}>{name[type ?? 'default']}</BtnPrimary>
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        title="Confirmación"
+        fixedSubtitle={type === 'fixedSubtitle' ? 'Este es  un subtitulo que queda fijo' : ''}
+        buttonsCenter={type === 'buttonsCenter'}
+        buttonsColumn={type !== 'buttonsColumn'}
+        buttonsInside={type === 'buttonsInside'}
+        withoutMargin={type === 'withoutMargin'}
+        closeOnOverlayClick={type !== 'closeOnOverlayClick'}
+        buttons={
+          type === 'withoutButtons'
+            ? []
+            : type === 'buttonsCenter'
+            ? [{ action: () => onClose(), text: 'Guardar' }]
+            : [
+                { action: () => onClose(), text: 'Guardar' },
+                { type: 'secondary', action: () => onClose(), text: 'Cancelar' },
+              ]
+        }
+      >
+        <p>
+          alumnos, además de definir el uso de la plataforma de estudio. 1) El material del programa
+          de estudio estará disponible en una plataforma tecnológica a la que cada alumno podrá
+          acceder en la siguiente dirección: http://cursos.eclass.cl 2) Las credenciales de acceso
+          que recibe el alumno para ingresar a su programa de estudio, son personales e
+          intransferibles. 3) Al aceptar estos términos y condiciones, el alumno se compromete a
+          realizar el programa en el que se encuentra inscrito y a revisar los siguientes
+          documentos: Reglamento Académico, Manual del Alumno e Información del Programa.Estos
+          documentos estarán disponibles en la plataforma de estudio, y contienen toda la
+          información académica del programa. 4) El alumno se compromete a utilizar los materiales y
+          medios tecnológicos de eClass exclusivamente con fines educativos en el marco del programa
+          de estudio. Se deja constancia que la alumnos, además de definir el uso de la plataforma
+          de estudio. 5) El material del programa de estudio estará disponible en una plataforma
+          tecnológica a la que cada alumno podrá acceder en la siguiente dirección:
+          http://cursos.eclass.cl 2) Las credenciales de acceso que recibe el alumno para ingresar a
+          su programa de estudio, son personales e intransferibles. 3) Al aceptar estos términos y
+          condiciones, el alumno se compromete a realizar el programa en el que se encuentra
+          inscrito y a revisar los siguientes documentos: Reglamento Académico, Manual del Alumno e
+          Información del Programa.Estos documentos estarán disponibles en la plataforma de estudio,
+          y contienen toda la información académica del programa. 4) El alumno se compromete a
+          utilizar los materiales y medios tecnológicos de eClass exclusivamente con fines
+          educativos en el marco del programa de estudio. Se deja constancia que la
+        </p>
+      </Modal>
+    </>
+  )
+}
+
+export const ModalAlertDemo = ({
+  button,
+  type,
+  status,
+  withoutTitle,
+  withoutDescription,
+}: {
+  button?: string
+  type?: 'loading' | 'info'
+  status?: 'success' | 'error' | 'warning' | 'info'
+  withoutTitle?: boolean
+  withoutDescription?: boolean
+}): JSX.Element => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  const text = {
+    info: {
+      button: 'ModalAlertNew',
+      title: '¿Seguro que deseas borrar esta pregunta?',
+      description: 'Por favor escoge otro horario.',
+    },
+    loading: {
+      button: 'ModalAlertNew Loading',
+      title: 'Descargando documento',
+      description: 'Se está preparando el archivo. Esto podría tardar un momento.',
+    },
+  }
+  return (
+    <>
+      <BtnPrimary onClick={onOpen}>{status ?? button}</BtnPrimary>
+      <ModalAlertNew
+        isOpen={isOpen}
+        onClose={onClose}
+        type={type === 'loading' ? 'loading' : 'info'}
+        status={status ?? 'success'}
+        title={withoutTitle ? '' : text[type ?? 'info'].title}
+        description={withoutDescription ? '' : text[type ?? 'info'].description}
+        buttons={[
+          { action: () => onClose(), text: 'Opciones más largas' },
+          { action: () => onClose(), text: 'Cancelar' },
+        ]}
+      />
+    </>
+  )
+}