search

Aikodev-labs / Ghibli-API-platform

https://ghibli-api-platform.vercel.app
5 stars 0 forks source link

GA-035 (FE) Crear un componente que muestre Markdown para generar contenido en la página #41

Open joshuacba08 opened 1 year ago

joshuacba08 commented 1 year ago

User Story

Como desarrollador de la plataforma Ghibli API, quiero implementar un componente en React JS que me permita generar contenido en nuestra página web utilizando markdown para poder mostrar texto enriquecido en la página.

Este componente debe recibir como prop o children un texto en formato markdown y mostrarlo correctamente enriquecido en la página web. Esto permitirá a los usuarios de la plataforma Ghibli API compartir información de manera más efectiva y con una mejor visualización de los datos.

Además, el componente debe ser fácil de usar y personalizable para que pueda ser utilizado en diferentes partes de la página web. Debe ser fácil de integrar en diferentes secciones de la plataforma y permitir la creación de contenido enriquecido de manera rápida y sencilla.

Lista de tareas

Una librería sugerida para React markdown en la plataforma Ghibli API es [react-markdown](https://www.npmjs.com/package/react-markdown), la cual provee una API fácil de usar para renderizar contenido de Markdown como componentes de React. Además, soporta varias características comunes de Markdown, tales como tablas, enlaces e imágenes.

Plan de implementación del componente de React para markdown

1. Investigación de librerías de React para markdown

Se realizará una investigación de las diferentes librerías de React para markdown disponibles en el mercado, para poder elegir la más adecuada para la plataforma Ghibli API. Algunas de las opciones a considerar son:

2. Elección de la librería adecuada de React para la plataforma Ghibli API

Una vez realizada la investigación, se elegirá la librería de React para markdown que mejor se adapte a las necesidades de la plataforma Ghibli API. Se considerarán factores como la facilidad de uso, la compatibilidad con otras librerías utilizadas en la plataforma, y la cantidad y calidad de las características soportadas.

Ejemplo: Después de investigar y comparar las diferentes opciones, se decide utilizar la librería react-markdown debido a su fácil uso y compatibilidad con otras librerías utilizadas en la plataforma.

3. Implementación y prueba del componente de React para markdown en la plataforma

Se implementará y probará el componente de React para markdown en la plataforma Ghibli API. Se asegurará de que el componente funcione correctamente y se integre sin problemas en la plataforma.

Ejemplo: Se creará un componente de React para markdown utilizando la librería react-markdown, y se probará en diferentes secciones de la plataforma para asegurarse de que funcione correctamente.

4. Documentación del uso y personalización del componente de React para markdown para futuros desarrollos

Se documentará el uso y personalización del componente de React para markdown para futuros desarrollos en la plataforma Ghibli API. Esto permitirá que otros desarrolladores puedan utilizar y personalizar el componente de manera efectiva.

Ejemplo: Se creará una guía de usuario que explique cómo utilizar y personalizar el componente de React para markdown, y se incluirá en la documentación de la plataforma para futuros desarrollos.

Una vez completadas estas tareas, se habrá implementado con éxito el componente de React para markdown en la plataforma Ghibli API, permitiendo a los usuarios compartir información de manera más efectiva y con una mejor visualización de los datos.

Usando markdown-to-jsx

Aquí hay un ejemplo de cómo se podría utilizar la librería markdown-to-jsx para implementar un componente de React para markdown en la plataforma Ghibli API:

import React from 'react';
import Markdown from 'markdown-to-jsx';

function MarkdownComponent({ text }) {
  return <Markdown>{text}</Markdown>;
}

export default MarkdownComponent;

Este componente de React toma un prop llamado text que debe ser un string en formato markdown. Luego, utiliza la librería markdown-to-jsx para renderizar el contenido de markdown como componentes de React.

Para utilizar este componente de React en la plataforma Ghibli API, se podría utilizar el siguiente código:

import React from 'react';
import MarkdownComponent from './MarkdownComponent';

function ExamplePage() {
  const markdownText = '# Ejemplo de Markdown\\n\\nEste es un ejemplo de cómo se podría utilizar el componente de React para markdown en la plataforma Ghibli API.';

  return (
    <div>
      <h2>Ejemplo de página</h2>
      <MarkdownComponent text={markdownText} />
    </div>
  );
}

export default ExamplePage;

Este código utilizaría el componente de React MarkdownComponent para renderizar el contenido de markdown en la página web. El prop text pasaría el contenido de markdown como un string al componente de React.

De esta forma, se podría utilizar la librería markdown-to-jsx para implementar un componente de React para markdown en la plataforma Ghibli API, permitiendo a los usuarios compartir información de manera más efectiva y con una mejor visualización de los datos.

Usando react-markdown

Aquí tienes un ejemplo de cómo utilizar la librería react-markdown para implementar un componente de React para markdown en la plataforma Ghibli API:

import React from 'react';
import ReactMarkdown from 'react-markdown';

function ComponenteMarkdown({ texto }) {
  return <ReactMarkdown>{texto}</ReactMarkdown>;
}

export default ComponenteMarkdown;

Este componente de React recibe un prop llamado texto, el cual debe ser un string en formato markdown. Luego, utiliza la librería react-markdown para renderizar el contenido de markdown como componentes de React.

Para utilizar este componente de React en la plataforma Ghibli API, se podría utilizar el siguiente código:

import React from 'react';
import ComponenteMarkdown from './ComponenteMarkdown';

function PaginaEjemplo() {
  const markdownText = '# Ejemplo de Markdown\\n\\nEste es un ejemplo de cómo se podría utilizar el componente de React para markdown en la plataforma Ghibli API.';

  return (
    <div>
      <h2>Página de ejemplo</h2>
      <ComponenteMarkdown texto={markdownText} />
    </div>
  );
}

export default PaginaEjemplo;

Este código utilizaría el componente de React ComponenteMarkdown para renderizar el contenido de markdown en la página web. El prop texto pasaría el contenido de markdown como un string al componente de React.

Utilizar la librería react-markdown para implementar un componente de React para markdown en la plataforma Ghibli API permitiría a los usuarios compartir información de manera más efectiva y con una mejor visualización de los datos.

joshuacba08 commented 1 year ago

Ejemplo de documentación

MarkdownComponent

  1. Dependencias e importaciones
  2. Llamada al componente
  3. Props y typepros
  4. Capturas de pantalla o GIF de navegabilidad / usabilidad

Dependencias e importaciones

El componente requiere de Tailwindcss para el estilado y se importa por defecto.

   import Button from '*/Button'

Llamada al componente


  <Button  text="Click me" />

Props y typeprops

Prop Name Prop Type Values Description
text String Cualquier tipo de palabra Contenido del texto que se muestra en el botón
type String "primary", "secondary", "outline" Tipo de botón que muestra el componente
size String "s", "m", "l" Tamaño del botón

Capturas de pantalla o GIF de navegabilidad / usabilidad

button

aikolabs commented 1 year ago

🎉 Congratulations, Juan! Task Completed and Moved to "Done" Status ✅🎉

We wanted to congratulate you on successfully completing your task! 🚀👏 Your effort and dedication are truly commendable.

We've updated the task status to "Done" to reflect your achievements. Keep up the great work!

If you have any questions or would like to share your next steps, feel free to reach out.

Excellent job!

Best regards, AikoLabs 💙