182 Feat: Crear componente Carousel

DamianPalavecino commented 1 year ago

Issues relacionados.

Resuelve issue #182

Que implementa o corrige este Pull Request.

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

Documentación de Swiper

Tipo de Pull Request:

[ ] 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:

En el directorio del proyecto, ejecutar git fetch origin
Moverse a esta branch utilizando git checkout 182-feat-crear-componente-carousel
Ejecutar yarn install
Podrás visualizar los cambios abriendo storybook utilizando el comando yarn storybook

Capturas de pantalla/videos:

[ ] Nuevo componente.
[ ] Modificación a elemento en la interfaz de usuario.
[x] 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] commented 1 year ago

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

Name	Status	Preview	Comments	Updated (UTC)
juguetear-web	❌ Failed (Inspect)			Jun 5, 2023 8:31am
storybook-juguetear-web	❌ Failed (Inspect)			Jun 5, 2023 8:31am

DamianPalavecino commented 1 year ago

Problemas actuales:

Al ejecutar yarn test, los tests no se realizan debido a un error con el archivo navigation.min.css de la librería Swiper

● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    C:\Users\dami_\Code\juguetear-web\node_modules\swiper\modules\navigation\navigation.min.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}
                                                                                      ^

    SyntaxError: Unexpected token ':'

      11 | }
      12 |
    > 13 | const Carousel = ({ children }: CarouselData) => {
         | ^
      14 |   const childrenArray = React.Children.toArray(children);
      15 |
      16 |   const breakpointsConfig = {

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)
      at Object.<anonymous> (components/Carousel/Carousel.tsx:13:1)
      at Object.<anonymous> (components/Carousel/Carousel.test.tsx:7:56)

Al hacer git commit de los cambios realizados en jest.config.js, surge el siguiente error.

TonyMckes commented 1 year ago

Hola @DamianPalavecino hice un pequenio commit (3c07a13), creo que eso soluciona lo que comentabas.. Cuando puedas lo pruebas y luego vemos como proceder :rocket:

Btw, encontre sobre el problema aca: https://stackoverflow.com/a/72926658

DamianPalavecino commented 1 year ago

Por cierto, me gustaría agregar una story que utilice una imagen en vez de una Card como se ve aquí:

¿Debería agregar la imagen en el directorio 'assets'? ¿Que formato debería utilizar? @TonyMckes @LPRegen

LPRegen commented 1 year ago

Por cierto, me gustaría agregar una story que utilice una imagen en vez de una Card como se ve aquí:

¿Debería agregar la imagen en el directorio 'assets'? ¿Que formato debería utilizar? @TonyMckes @LPRegen

Esa imagen entiendo que la vamos a traer desde Sanity. Sanity te permite subir la imagen en distintos formatos, y luego tiene una opcion que las transforma a formato WebP

Para el componente PortableTxt, intente crear la story con imagenes de Sanity pero no las renderizaba. Directamente me mostraba el alt text.

Juguetear / juguetear-web