From a20034678070c214a359d6f3fcc52ab49f389f83 Mon Sep 17 00:00:00 2001 From: erikgh Date: Mon, 3 Aug 2026 11:15:39 -0600 Subject: [PATCH] chore: retira Carrusel, sin consumidores desde que el recorrido se apila MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PuntosInflexion era el único que lo montaba. Se va también la referencia que le quedaba colgando en el comentario de useAutoStep. Co-Authored-By: Claude Opus 5 --- components/primitives/Carrusel.tsx | 90 ------------------- .../primitives/__tests__/Carrusel.test.tsx | 48 ---------- lib/motion.ts | 3 +- 3 files changed, 1 insertion(+), 140 deletions(-) delete mode 100644 components/primitives/Carrusel.tsx delete mode 100644 components/primitives/__tests__/Carrusel.test.tsx diff --git a/components/primitives/Carrusel.tsx b/components/primitives/Carrusel.tsx deleted file mode 100644 index c735e0e..0000000 --- a/components/primitives/Carrusel.tsx +++ /dev/null @@ -1,90 +0,0 @@ -'use client'; - -import { useCallback, useEffect, useState, type ReactNode } from 'react'; -import useEmblaCarousel from 'embla-carousel-react'; -import Autoplay from 'embla-carousel-autoplay'; -import { usePrefersReducedMotion } from '@/lib/motion'; - -// Thin Embla wrapper shared by the hero's pain-point rotator and the mobile -// row of inflection points. Autoplay pauses on hover/focus/interaction, and -// never runs at all for users who asked for less motion — it's still a fully -// usable carousel (drag, dots, keyboard) with it off, just static. -export function Carrusel({ - slides, - autoplayMs, - className = '', - slideClassName = '', - ariaLabel, - mostrarContador = false, -}: { - slides: ReactNode[]; - autoplayMs?: number; - className?: string; - slideClassName?: string; - ariaLabel: string; - // "01 / 06" + flechas prev/next, en vez de puntos — el patrón de - // en-ti.com ("desliza para explorar") para carruseles con más peso. - mostrarContador?: boolean; -}) { - const reduced = usePrefersReducedMotion(); - const plugins = autoplayMs && !reduced ? [Autoplay({ delay: autoplayMs, stopOnInteraction: false, stopOnMouseEnter: true })] : []; - const [emblaRef, embla] = useEmblaCarousel({ loop: true }, plugins); - const [selected, setSelected] = useState(0); - - useEffect(() => { - if (!embla) return; - const onSelect = () => setSelected(embla.selectedScrollSnap()); - embla.on('select', onSelect); - onSelect(); - return () => { - embla.off('select', onSelect); - }; - }, [embla]); - - const scrollTo = useCallback((i: number) => embla?.scrollTo(i), [embla]); - const scrollPrev = useCallback(() => embla?.scrollPrev(), [embla]); - const scrollNext = useCallback(() => embla?.scrollNext(), [embla]); - - return ( -
-
-
- {slides.map((slide, i) => ( -
- {slide} -
- ))} -
-
- {slides.length > 1 && mostrarContador && ( -
- -

- {String(selected + 1).padStart(2, '0')} / {String(slides.length).padStart(2, '0')} -

- -
- )} - {slides.length > 1 && !mostrarContador && ( -
- {slides.map((_, i) => ( -
- )} -
- ); -} diff --git a/components/primitives/__tests__/Carrusel.test.tsx b/components/primitives/__tests__/Carrusel.test.tsx deleted file mode 100644 index f801919..0000000 --- a/components/primitives/__tests__/Carrusel.test.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import { describe, it, expect } from 'vitest'; -import { Carrusel } from '../Carrusel'; - -describe('', () => { - it('renders every slide', () => { - render(Uno

,

Dos

,

Tres

]} />); - expect(screen.getByText('Uno')).toBeInTheDocument(); - expect(screen.getByText('Dos')).toBeInTheDocument(); - expect(screen.getByText('Tres')).toBeInTheDocument(); - }); - it('renders one position dot per slide, and marks the current one', () => { - render(Uno

,

Dos

]} />); - const dots = screen.getAllByRole('button', { name: /ir a la tarjeta/i }); - expect(dots).toHaveLength(2); - expect(dots[0]).toHaveAttribute('aria-current', 'true'); - }); - it('moves to a slide when its dot is clicked', async () => { - const user = userEvent.setup(); - render(Uno

,

Dos

]} />); - const dots = screen.getAllByRole('button', { name: /ir a la tarjeta/i }); - await user.click(dots[1]); - expect(dots[1]).toHaveAttribute('aria-current', 'true'); - }); - it('hides the dots entirely for a single slide', () => { - render(Solo una

]} />); - expect(screen.queryByRole('button', { name: /ir a la tarjeta/i })).not.toBeInTheDocument(); - }); - it('exposes the slide group with the given accessible name', () => { - render(Uno

]} />); - expect(screen.getByRole('group', { name: 'Frases de ejemplo' })).toBeInTheDocument(); - }); - it('shows a numbered counter with prev/next arrows instead of dots when mostrarContador is set', () => { - render(Uno

,

Dos

,

Tres

]} />); - expect(screen.getByText('01')).toBeInTheDocument(); - expect(screen.getByText(/\/ 03/)).toBeInTheDocument(); - expect(screen.getByRole('button', { name: 'Siguiente' })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: 'Anterior' })).toBeInTheDocument(); - expect(screen.queryByRole('button', { name: /ir a la tarjeta/i })).not.toBeInTheDocument(); - }); - it('advances the counter when the next arrow is clicked', async () => { - const user = userEvent.setup(); - render(Uno

,

Dos

]} />); - await user.click(screen.getByRole('button', { name: 'Siguiente' })); - expect(screen.getByText('02')).toBeInTheDocument(); - }); -}); diff --git a/lib/motion.ts b/lib/motion.ts index 843e111..b44978c 100644 --- a/lib/motion.ts +++ b/lib/motion.ts @@ -66,8 +66,7 @@ export const motionProps = (reduced: boolean) => // Cycles through `count` steps on its own (Mecanismo, ComoEmpezar): each // manual change restarts the dwell timer, hovering pauses it, and it never -// advances at all for reduced-motion users — same shape as the Carrusel -// autoplay, for step indicators that aren't a carousel. +// advances at all for reduced-motion users. export function useAutoStep(count: number, intervalMs = 3500) { const reduced = usePrefersReducedMotion(); const [active, setActive] = useState(0);