feat: create PortableTxt comp

[LPRegen]

Issues relacionados.

• Resuelve issue #294

Que implementa o corrige este Pull Request.

Se implementa componente PortableText

La libreria @portabletext/react fue actualizada a la version 3.0.0

Este componente recibe la informacion proveniente de los schemas de tipo block de Sanity. Dependiendo el tipo de contenido utiliza componentes especificos para renderizar la informacion. Si algun componente no se encuentra definido, automaticamente utiliza un default del mismo.

El schema schemas/shared/images.ts tiene las siguientes caracteristicas:

• Objeto que contiene un array de imagenes. Es necesaria esta estructura debido a que no es posible tener arrays multidimensionales en Sanity. Mas info aca
• En comparacion al schema img, se agrega validacion para evitar la posibilidad de que el usuario ingrese el texto alternativo pero no la imagen.
• Acepta como maximo dos imagenes, y una como minimo.

Lista los links a documentación, recursos, etc que estén relacionados:

• https://github.com/portabletext/react-portabletext
• https://www.sanity.io/docs/image-url#automode
• https://www.sanity.io/docs/image-urls#fit-object-object
• https://www.sanity.io/docs/array-type

Tipo de Pull Request:

• [X] Refactor (Modificación de código existente).
• [X] New feature (Introducción de nueva funcionalidad).
• [ ] Bug fix (Corrección de error/es)
• [ ] Performance (Mejoras de optimización).
• [ ] Docs (Actualización/extensión de documentación).

Pasos necesarios para probar/visualizar los cambios implementados:

Visualizar implementacion images schema.

1. Ejecutar yarn dev y dirigirse a localhost:3000/studio.
2. Seleccionar Colaborar con el proyecto, en la seccion Contenido.
3. Dirigirse al Portable text editor, en el margen superior derecho se podra visualizar 'Imagenes'.

Visualizar componente

1. Ejecutar yarn storybook.
2. Seleccionar PortableText.

Capturas de pantalla/videos:

• [X] Nuevo componente.
• [ ] Modificación a elemento en la interfaz de usuario.
• [ ] No aplica.

---

Código de conducta y contribuir.

:warning: Antes de realizar el Pull Request, por favor asegúrate de haber leído el código de conducta y cómo contribuir.

• [X] He leído seguir el código de conducta de este proyecto.
• [X] He leído seguir las normas de cómo contribuir a este proyecto.

⛑️ En caso de que necesites ayuda o tengas alguna duda recordá que también podés preguntar en el canal #juguetear dentro de la comunidad FrontendCafé en Discord. El código de conducta de este proyecto es extensible también a tu participación en el server de FrontendCafé.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
juguetear-web	❌ Failed (Inspect)			May 28, 2023 4:39pm
storybook-juguetear-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 28, 2023 4:39pm

[LPRegen]

@LPRegen lo veo súper encaminado! Creo que no falta mucho para cerrarlo, no? Ves posible crear una story para que se pueda ver como se renderizaría?

Hola @nykka ! Respecto a la story estoy teniendo problemas para renderizar la imagen, ya que solamente me muestra el alt del img. En development renderiza normalmente el componente.

[LPRegen]

Yo lo veo súper bien! Falta algo más? (ví que había un todo en un archivo) @LPRegen

Lo que me estaria faltando es agregar el preview de las imaganes para el Portable Text en Sanity.