feat(PCV-1095): se agregan los recursos (#637)

Co-authored-by: Daniel Montoya <[email protected]>
eclass · Oct 14, 2024 · 6787307 · 6787307
1 parent 825602f
commit 6787307
Show file tree

Hide file tree

Showing 27 changed files with 1,278 additions and 3 deletions.
diff --git a/src/documentation/pages/Organisms/Events.tsx b/src/documentation/pages/Organisms/Events.tsx
@@ -0,0 +1,33 @@
+import { FC } from 'react'
+import { MyHeading, MyText, MyTittle, Code } from '@/documentation/components'
+// import { dataFake } from '@/organisms/CourseList/utils'
+
+// const dataFakeEvents = []
+
+const Events: FC = () => {
+  return (
+    <>
+      <MyHeading>Events</MyHeading>
+      <MyText>
+        Las alertas embebidas se utiliza en contextos en los que es necesario que el usuario pueda
+        visualizar cada vez que lo necesite el feedback o estado de una solicitud al sistema
+        <i>
+          (Ej: El estado de una clase en vivo ya agendada, alertar sobre condiciones para repetir
+          una evaluación, etc)
+        </i>
+      </MyText>
+      <Code text="import { Alert } from '@eclass/ui-kit'" />
+
+      <MyTittle>Estados</MyTittle>
+      <MyText>Existen 4 posibles estados que definen el ícono y color de la alerta.</MyText>
+      <Code
+        text='<Alert state="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert>
+            <Alert state="success">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert>
+            <Alert state="error">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert>
+            <Alert state="warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert>'
+      />
+    </>
+  )
+}
+
+export default Events
diff --git a/src/documentation/pages/Organisms/Resources.tsx b/src/documentation/pages/Organisms/Resources.tsx
@@ -0,0 +1,97 @@
+import { FC } from 'react'
+import { MyHeading, MyText, MyTittle, MyLink, Code } from '@/documentation/components'
+import { Resources } from '@/organisms/Resources'
+
+const dataFakeEvents = [
+  {
+    id: '1',
+    resourceType: 'xlsx',
+    resourceTitle: 'Calendario semestral',
+    resourceDetail: 'Fechas importantes de tus cursos',
+    resourceLink: 'https://www.oas.org/juridico/spanish/mesicic2_col_ley_30_sp.pdf',
+    resourceTextDownload: 'Descargar',
+    resourceNameFile: 'Calendario semestral',
+  },
+  {
+    id: '1',
+    resourceType: 'pdf',
+    resourceTitle: 'Calendario semestral',
+    resourceDetail: 'Fechas importantes de tus cursos',
+    resourceLink: 'https://www.oas.org/juridico/spanish/mesicic2_col_ley_30_sp.pdf',
+    resourceTextDownload: 'Descargar',
+    resourceNameFile: 'Calendario semestral',
+  },
+]
+
+const ResourcesPage: FC = () => {
+  return (
+    <>
+      <MyHeading>Resource</MyHeading>
+      <MyText>
+        Los recursos son casos que se usan para mostrar información relevante para el usuario del
+        recurso disponible para descargar, estos estan en diferentes formatos y estan adaptados para
+        que segun sea el formato definido en{' '}
+        <MyLink href="https://www.figma.com/design/DFrZMrJAQIQdzJnIYxD5Qm/Cajas-curso-CV%2FV8?node-id=2871-5674&node-type=frame&t=Yckoe1FoUThTM8DA-0">
+          Figma recursos
+        </MyLink>{' '}
+        correspondan
+        <i>
+          (Ej: En el caso de que se quiera descargar un recurso pdf, tendra un icono pdf
+          correspondiente)
+        </i>
+      </MyText>
+      <MyTittle>Types Definidos</MyTittle>
+      <MyText>El componente Resources requiere el siguiente typado:</MyText>
+      <Code
+        text={`interface ResourcesProps {
+  id: number // Identificador del recurso
+  resourceType: string // Tipo de recurso en minisculas (pdf, xlsx, docx, etc)
+  resourceTitle: string // Titulo del recurso
+  resourceDetail: string // Detalle del recurso
+  resourceTextDownload: string // Texto del boton de descarga
+  resourceLink: string // Link del recurso
+  resourceNameFile: string // Nombre del recurso
+}
+`}
+      />
+      <Code text="import { Resources } from '@eclass/ui-kit'" />
+
+      <Resources {...dataFakeEvents[0]} />
+      <Resources {...dataFakeEvents[1]} />
+
+      <MyTittle>Tipos de iconos en los recursos disponibles</MyTittle>
+      <MyText>
+        Existen varios tipos de iconos disponibles: Png, Gif, Ppt, Pptx, Doc, Docx, Xls, Xlsx, Csv,
+        Pdf, Mp4, Avi, Mkv, Mp3, Wav,
+      </MyText>
+
+      <MyTittle>Modo de uso</MyTittle>
+
+      <MyText>
+        El recurso se utiliza de manera bastante simple siguiendo el siguiente ejemplo:
+      </MyText>
+      <Code
+        text={`// Importamos el componente
+import { Resources } from '@eclass/ui-kit'
+//Definimos unas propiedades para el recurso
+const dataFakeResources = {
+id: '1',
+resourceType: 'xlsx',
+resourceTitle: 'Calendario semestral',
+resourceDetail: 'Fechas importantes de tus cursos',
+resourceLink: 'https://www.oas.org/juridico/spanish/mesicic2_col_ley_30_sp.pdf',
+resourceTextDownload: 'Descargar',
+resourceNameFile: 'Calendario semestral',
+}
+// Utilizamos el componente
+<Resources {...dataFakeResources} />
+          `}
+      />
+      <MyText>
+        Como el recurso ejemplo tiene el mismo formato, se puede enviar por spread operator
+      </MyText>
+    </>
+  )
+}
+
+export default ResourcesPage
diff --git a/src/documentation/utils/routes.tsx b/src/documentation/utils/routes.tsx
@@ -28,6 +28,8 @@ const FlashNotification = React.lazy(
 )
 const CourseList = React.lazy(async () => await import('../pages/Organisms/CourseList'))
 const ModalAlert = React.lazy(async () => await import('../pages/Organisms/ModalAlert'))
+const Events = React.lazy(async () => await import('../pages/Organisms/Events'))
+const Resources = React.lazy(async () => await import('../pages/Organisms/Resources'))
 
 /**
  * Rutas que tiene el proyecto con el respectivo link en la navegación.
@@ -140,18 +142,28 @@ export const routes: IRoute[] = [
     component: <Alerts />,
   },
   {
-    path: '/molecules/flash-notification',
+    path: '/organisms/flash-notification',
     label: 'Flash Notification',
     component: <FlashNotification />,
   },
   {
-    path: '/molecules/courselist',
+    path: '/organisms/courselist',
     label: 'CourseList',
     component: <CourseList />,
   },
   {
-    path: '/molecules/modalalert',
+    path: '/organisms/modalalert',
     label: 'ModalAlert',
     component: <ModalAlert />,
   },
+  {
+    path: '/organisms/events',
+    label: 'Events',
+    component: <Events />,
+  },
+  {
+    path: '/organisms/resource',
+    label: 'Resources',
+    component: <Resources />,
+  },
 ]
diff --git a/src/organisms/Events/Events.tsx b/src/organisms/Events/Events.tsx
@@ -0,0 +1,5 @@
+import { FC } from 'react'
+
+export const Events: FC = () => {
+  return <div>Hola soy un Evento</div>
+}
diff --git a/src/organisms/Events/index.ts b/src/organisms/Events/index.ts
@@ -0,0 +1 @@
+export * from './Events'
diff --git a/src/organisms/Resources/Icons/Avi.tsx b/src/organisms/Resources/Icons/Avi.tsx
@@ -0,0 +1,53 @@
+import { FC } from 'react'
+import { Icon } from '@chakra-ui/react'
+
+export const Avi: FC = () => {
+  return (
+    <Icon
+      width="32px"
+      height="32px"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_2871_5797)">
+        <path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
+        <path
+          d="M28 13V9L20 1H4V13"
+          stroke="#B0CFE0"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+          strokeLinecap="square"
+        />
+        <path
+          d="M4 27V31H28V27"
+          stroke="#B0CFE0"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+          strokeLinecap="square"
+        />
+        <path
+          d="M13 23L12.7 21.9H10.8L10.6 23H8.90002L10.8 17.3H12.9L14.8 23H13ZM12.4 20.7L12.2 19.8C12.1 19.6 12.1 19.3 12 19C11.9 18.7 11.9 18.4 11.8 18.3C11.8 18.4 11.7 18.7 11.7 19C11.7 19.3 11.5 19.9 11.2 20.8H12.4V20.7Z"
+          fill="#B0CFE0"
+        />
+        <path
+          d="M18.6 17.3H20.3L18.4 23H16.6L14.7 17.3H16.4L17.2 20.2C17.4 20.8 17.4 21.3 17.5 21.5C17.5 21.3 17.6 21.1 17.6 20.8C17.6 20.5 17.7 20.3 17.7 20.2L18.6 17.3Z"
+          fill="#B0CFE0"
+        />
+        <path d="M20.9 23V17.3H22.5V23H20.9Z" fill="#B0CFE0" />
+        <path
+          d="M31 13H1V27H31V13Z"
+          stroke="#B0CFE0"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+          strokeLinecap="square"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2871_5797">
+          <rect width="32" height="32" fill="white" />
+        </clipPath>
+      </defs>
+    </Icon>
+  )
+}
diff --git a/src/organisms/Resources/Icons/Csv.tsx b/src/organisms/Resources/Icons/Csv.tsx
@@ -0,0 +1,56 @@
+import { FC } from 'react'
+import { Icon } from '@chakra-ui/react'
+
+export const Csv: FC = () => {
+  return (
+    <Icon
+      width="32px"
+      height="32px"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_2871_5770)">
+        <path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
+        <path
+          d="M28 13V9L20 1H4V13"
+          stroke="#B0CFE0"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+          strokeLinecap="square"
+        />
+        <path
+          d="M4 27V31H28V27"
+          stroke="#B0CFE0"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+          strokeLinecap="square"
+        />
+        <path
+          d="M11.5 18.5C11.1 18.5 10.8 18.7 10.6 19C10.4 19.3 10.3 19.7 10.3 20.2C10.3 21.3 10.7 21.8 11.6 21.8C11.9 21.8 12.1 21.8 12.3 21.7C12.5 21.6 12.8 21.5 13 21.4V22.7C12.5 22.9 12 23 11.4 23C10.5 23 9.89995 22.8 9.39995 22.2C8.89995 21.6 8.69995 21 8.69995 20C8.69995 19.4 8.79995 18.9 8.99995 18.4C9.19995 17.9 9.49995 17.6 9.99995 17.4C10.5 17.2 10.9 17 11.5 17C12.1 17 12.7 17.1 13.3 17.4L12.8 18.6C12.6 18.5 12.4 18.4 12.2 18.4C12 18.4 11.7 18.5 11.5 18.5Z"
+          fill="#B0CFE0"
+        />
+        <path
+          d="M17.9 21.3C17.9 21.7 17.8 22 17.6 22.2C17.4 22.4 17.2 22.7 16.8 22.8C16.4 22.9 16.1 23 15.6 23C15.2 23 14.9 23 14.6 22.9C14.3 22.8 14.1 22.8 13.8 22.6V21.2C14.1 21.4 14.4 21.5 14.7 21.6C15 21.7 15.3 21.7 15.6 21.7C15.8 21.7 16 21.7 16.1 21.6C16.2 21.5 16.3 21.4 16.3 21.3C16.3 21.2 16.3 21.2 16.2 21.1C16.1 21 16.1 21.1 16 21C15.9 20.9 15.7 20.8 15.2 20.6C14.8 20.4 14.5 20.3 14.4 20.1C14.3 19.9 14.1 19.8 14 19.6C13.9 19.4 13.9 19.2 13.9 18.9C13.9 18.4 14.1 18 14.5 17.7C14.9 17.4 15.4 17.3 16.1 17.3C16.7 17.3 17.3 17.4 17.9 17.7L17.4 18.9C16.9 18.7 16.4 18.5 16 18.5C15.8 18.5 15.7 18.5 15.6 18.6C15.5 18.7 15.5 18.8 15.5 18.9C15.5 19 15.6 19.1 15.7 19.2C15.8 19.3 16.1 19.4 16.6 19.7C17.1 19.9 17.4 20.2 17.6 20.4C17.8 20.6 17.9 20.9 17.9 21.3Z"
+          fill="#B0CFE0"
+        />
+        <path
+          d="M22 17.3H23.7L21.8 23H20L18.1 17.3H19.8L20.6 20.2C20.8 20.8 20.8 21.3 20.9 21.5C20.9 21.3 21 21.1 21 20.8C21 20.5 21.1 20.3 21.1 20.2L22 17.3Z"
+          fill="#B0CFE0"
+        />
+        <path
+          d="M31 13H1V27H31V13Z"
+          stroke="#B0CFE0"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+          strokeLinecap="square"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2871_5770">
+          <rect width="32" height="32" fill="white" />
+        </clipPath>
+      </defs>
+    </Icon>
+  )
+}
diff --git a/src/organisms/Resources/Icons/Doc.tsx b/src/organisms/Resources/Icons/Doc.tsx
@@ -0,0 +1,56 @@
+import { FC } from 'react'
+import { Icon } from '@chakra-ui/react'
+
+export const Doc: FC = () => {
+  return (
+    <Icon
+      width="32px"
+      height="32px"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_2871_5732)">
+        <path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
+        <path
+          d="M28 13V9L20 1H4V13"
+          stroke="#B0CFE0"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+          strokeLinecap="square"
+        />
+        <path
+          d="M4 27V31H28V27"
+          stroke="#B0CFE0"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+          strokeLinecap="square"
+        />
+        <path
+          d="M12.7 20C12.7 21 12.4 21.7 11.9 22.2C11.4 22.7 10.7 23 9.70002 23H7.90002V17.3H9.90002C10.8 17.3 11.5 17.5 12 18C12.5 18.5 12.7 19.1 12.7 20ZM11.1 20.1C11.1 19.6 11 19.2 10.8 18.9C10.6 18.6 10.3 18.5 9.90002 18.5H9.40002V21.7H9.70002C10.2 21.7 10.5 21.6 10.7 21.3C10.9 21 11.1 20.6 11.1 20.1Z"
+          fill="#B0CFE0"
+        />
+        <path
+          d="M19.1 20.1C19.1 21.1 18.9 21.8 18.4 22.3C17.9 22.8 17.2 23.1 16.3 23.1C15.4 23.1 14.7 22.8 14.2 22.3C13.7 21.8 13.5 21.1 13.5 20.1C13.5 19.1 13.7 18.4 14.2 17.9C14.7 17.4 15.4 17.1 16.3 17.1C17.2 17.1 17.9 17.3 18.4 17.8C18.9 18.3 19.1 19.2 19.1 20.1ZM15.2 20.1C15.2 21.2 15.6 21.8 16.4 21.8C16.8 21.8 17.1 21.7 17.3 21.4C17.5 21.1 17.6 20.7 17.6 20.1C17.6 19.5 17.5 19.1 17.3 18.8C17.1 18.5 16.8 18.4 16.4 18.4C15.6 18.5 15.2 19 15.2 20.1Z"
+          fill="#B0CFE0"
+        />
+        <path
+          d="M22.7 18.5C22.3 18.5 22 18.7 21.8 19C21.6 19.3 21.5 19.7 21.5 20.2C21.5 21.3 21.9 21.8 22.8 21.8C23.1 21.8 23.3 21.8 23.5 21.7C23.7 21.6 24 21.5 24.2 21.4V22.7C23.7 22.9 23.2 23 22.6 23C21.7 23 21.1 22.8 20.6 22.2C20.1 21.6 19.9 21 19.9 20C19.9 19.4 20 18.9 20.2 18.4C20.4 17.9 20.7 17.6 21.2 17.4C21.7 17.2 22.1 17 22.7 17C23.3 17 23.9 17.1 24.5 17.4L24 18.8C23.8 18.7 23.6 18.6 23.4 18.6C23.2 18.6 22.9 18.5 22.7 18.5Z"
+          fill="#B0CFE0"
+        />
+        <path
+          d="M31 13H1V27H31V13Z"
+          stroke="#B0CFE0"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+          strokeLinecap="square"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2871_5732">
+          <rect width="32" height="32" fill="white" />
+        </clipPath>
+      </defs>
+    </Icon>
+  )
+}