Para esta tarea es necesario crear un Input que recoja el texto del usuario, un selector a la derecha que permita elegir una o varias categorías y que conforme esas categorías se elijan aparezcan abajo del input como se muestra en los diseños permitiendo eliminarlas rápidamente.
Para almacenar los datos del formulario se debe usar la librería Formik de react. https://formik.org/
Para llevar a cabo esta tarea solo es necesario editar el fichero src/dcomponents/faqs/FaqFilters/index.tsx
Requisitos de validación
[ ] El componente implementado corresponde visualmente con los diseños
[ ] Cuando se elija una categoría debe de listarse abajo en el input
[ ] El almacenamiento de todos los datos de la búsqueda y categorías debe almacenarse usando un formulario de Formik
[ ] El componente de ChakraUI a usar para las tags es el Tag, como es evidente
[ ] Se hace uso de la librería chakraui para implementar el componente. Más información
[ ] Los enlaces están listos para que simplemente haga falta añadir la dirección a la que deben ir.
Resolución de dudas y entrega de tareas
Sube tu rama haciendo uso de git push
Navega hasta la página del issue en GitHub.
Agrega un comentario nuevo haciendo clic en el botón "Comment" (Comentar).
Menciona al encargado del proyecto utilizando la sintaxis @nombredeusuario y adjunta tu duda o solicitud de revisión.
Escribe cualquier mensaje adicional que desees transmitir al encargado del proyecto, explicando claramente que deseas que revise el issue.
Haz clic en el botón "Comment" (Comentar) para publicar tu comentario.
No sabes por dónde empezar?
1. Prepara el entorno de desarrollo.
Utiliza la guía de configuración para preparar el entorno de desarrollo si no lo has hecho ya.
2. Clonar el repositorio de GitHub
Existen dos formas de descargar y subir cambios a github: HTTP y SSH. Nosotros recomendamos el uso de SSH y dejamos aquí una guía de cómo configurarlo. Si por el contrario decides utilzar HTTP necesitarás configurar un token de github para poder subir tus cambios.
Después de considerar esto puedes utilizar alguna de las dos siguientes órdenes para clonar (Crear una copia en tú máquina) del repositorio.
Desde una terminal y dentro del proyecto, es conveniente que instales las dependencias del proyecto para que tu editor te pueda autocompletar código y encontrar errores haciendo uso del siguiente comando:
npm install
Posteriormente es importante que arranques los distintos servicios que se utilizarán durante el desarrollo. Para ello basta con ejecutar la siguiente orden:
Permite ver los cambios realizados en tiempo real sobre un componente en particular además de cambiar los parámetros que recibe para asegurarse de que funciona adecuadamente.
Almacena información de ejemplo que se utilizará durante el desarrollo de la página. Puesto que cada desarrollador tiene su copia propia de esta base de datos y los cambios se revierten cada vez que se apaga el servicio te invitamos a que la modifiques como consideres apropiado. Para poder acceder necesitarás los siguientes credenciales:
email: dev@deii.com
pass: devpassword
Familiarizate con estos servicios que te serán de gran ayuda.
4. Cambiar a la branch del issue
Ahora que ya estás listo para empezar a trabajar es conveniente que te crees tu propia rama independiente dónde empezar a trabajar. Para ello basta con que ejecutes los siguientes comandos.
git checkout dev
git pull
git checkout -b @feature/[nombre-del-componente]
Creación del componente Filters
El componente Filters es un componente cuyo objetivo es filtrar una lista de items como pueden ser noticias o preguntas frecuentes (Faqs).
Esta compuesto por un input de busqueda y un selector de categorías.
Diseños
Enlace al Figma
Example: Figma - FAQs
Realización de la tarea
Para esta tarea es necesario crear un Input que recoja el texto del usuario, un selector a la derecha que permita elegir una o varias categorías y que conforme esas categorías se elijan aparezcan abajo del input como se muestra en los diseños permitiendo eliminarlas rápidamente.
Para almacenar los datos del formulario se debe usar la librería Formik de react. https://formik.org/
Para llevar a cabo esta tarea solo es necesario editar el fichero
src/dcomponents/faqs/FaqFilters/index.tsxRequisitos de validación
Resolución de dudas y entrega de tareas
git push@nombredeusuarioy adjunta tu duda o solicitud de revisión.No sabes por dónde empezar?
1. Prepara el entorno de desarrollo.
Utiliza la guía de configuración para preparar el entorno de desarrollo si no lo has hecho ya.
2. Clonar el repositorio de GitHub
Existen dos formas de descargar y subir cambios a github: HTTP y SSH. Nosotros recomendamos el uso de SSH y dejamos aquí una guía de cómo configurarlo. Si por el contrario decides utilzar HTTP necesitarás configurar un token de github para poder subir tus cambios.
Después de considerar esto puedes utilizar alguna de las dos siguientes órdenes para clonar (Crear una copia en tú máquina) del repositorio.
Si usas HTTP:
Si tienes configurado el token SSH:
3. Arrancar el entorno de desarrollo
Desde una terminal y dentro del proyecto, es conveniente que instales las dependencias del proyecto para que tu editor te pueda autocompletar código y encontrar errores haciendo uso del siguiente comando:
Posteriormente es importante que arranques los distintos servicios que se utilizarán durante el desarrollo. Para ello basta con ejecutar la siguiente orden:
Esto inicializará 3 servicios distintos:
Página web de desarrollo
Storybook
Base de datos de desarrollo
Familiarizate con estos servicios que te serán de gran ayuda.
4. Cambiar a la branch del issue
Ahora que ya estás listo para empezar a trabajar es conveniente que te crees tu propia rama independiente dónde empezar a trabajar. Para ello basta con que ejecutes los siguientes comandos.