@bariskuran/base 0.0.0-stage → 0.0.1

package/src/libs/Slider/Amedist/index.jsx

@@ -0,0 +1,245 @@
+import { t } from "../../getText";
+import { Button } from "../../Button";
+import { Typo } from "../../Typo";
+import { useCandle, useVars } from "./useVars.jsx";
+import S from "./_styled";
+
+const hasValue = (value) => value != null && value !== "";
+
+const SlideCta = ({ slide }) => {
+    if (!hasValue(slide.ctaHref)) return null;
+    return <Button.brackets label={t(slide.ctaText)} href={t(slide.ctaHref)} color={slide.color} />;
+};
+
+const SlideImageLayer = ({
+    img,
+    layerIndex,
+    motion,
+    direction,
+    transitioning,
+    layerTiming,
+    enterMs,
+    exitMs,
+    snapLayout,
+    playbackActive,
+    resolveImageFrom,
+}) => {
+    const candle = useCandle({
+        candle: img.candle,
+        active: motion === "active" && playbackActive,
+    });
+
+    return (
+        <S.slideBgLayer
+            $motion={motion}
+            $from={resolveImageFrom(img, direction)}
+            $scale={img.scale}
+            $fade={img.fade}
+            $transitioning={transitioning}
+            $durationMs={layerTiming.durationMs}
+            $delayMs={layerTiming.delayMs}
+            $enterMs={enterMs}
+            $exitMs={exitMs}
+            $snap={snapLayout}
+            $paused={!playbackActive}
+            $layerIndex={layerIndex}
+            $floatFrom={img.floatFrom}
+        >
+            {img.floatFrom ? (
+                <S.slideBgFloatTrack
+                    $floatFrom={img.floatFrom}
+                    $floatDurationMs={layerTiming.floatDurationMs}
+                    $motion={motion}
+                    $paused={!playbackActive}
+                >
+                    <S.slideBgFloatImage
+                        src={img.src}
+                        alt=""
+                        aria-hidden="true"
+                        draggable="false"
+                        data-slider-float={img.floatFrom}
+                        $floatFrom={img.floatFrom}
+                        $floatDurationMs={layerTiming.floatDurationMs}
+                        $motion={motion}
+                        $paused={!playbackActive}
+                        $candleOpacity={candle.opacity}
+                        $candleTransitionMs={candle.transitionMs}
+                    />
+                </S.slideBgFloatTrack>
+            ) : (
+                <S.slideBgImage
+                    $image={img.src}
+                    $candleOpacity={candle.opacity}
+                    $candleTransitionMs={candle.transitionMs}
+                />
+            )}
+        </S.slideBgLayer>
+    );
+};
+
+const Amedist = (p = {}) => {
+    const vars = useVars(p);
+    if (!vars) return null;
+
+    const {
+        rootRef,
+        timeBarKey,
+        durationSec,
+        enterMs,
+        exitMs,
+        contentTransitionMs,
+        inViewport,
+        slideList,
+        getSlideImages,
+        getLayerTiming,
+        resolveImageFrom,
+        resolveContentMotion,
+        resolveCommonCtaMotion,
+        getCommonCtaSlide,
+        activeIndex,
+        prevIndex,
+        direction,
+        snapLayout,
+        resolvedBottomMargin,
+        SlideBullet,
+        changeSlide,
+    } = vars;
+
+    const commonCtaSlide = getCommonCtaSlide(slideList, activeIndex, prevIndex);
+    const commonCtaMotion = resolveCommonCtaMotion(slideList, activeIndex, prevIndex, direction);
+    const isSlideTransitioning = prevIndex !== activeIndex;
+
+    const renderImageLayer = (slide, img, layerIndex, motion) => {
+        const layerTiming = getLayerTiming(slide, layerIndex);
+
+        return (
+            <SlideImageLayer
+                key={layerIndex}
+                img={img}
+                layerIndex={layerIndex}
+                motion={motion}
+                direction={direction}
+                transitioning={isSlideTransitioning}
+                layerTiming={layerTiming}
+                enterMs={enterMs}
+                exitMs={exitMs}
+                snapLayout={snapLayout}
+                playbackActive={inViewport}
+                resolveImageFrom={resolveImageFrom}
+            />
+        );
+    };
+
+    const renderSlideImageStack = (slide, i, shouldBringToFront) => {
+        const images = getSlideImages(slide.image);
+        if (images.length === 0) return null;
+
+        const motion = resolveContentMotion(i, activeIndex, prevIndex, direction);
+        const visibleLayers = images
+            .map((img, layerIndex) => ({ img, layerIndex }))
+            .filter(({ img }) => Boolean(img.bringToFront) === shouldBringToFront);
+
+        if (visibleLayers.length === 0) return null;
+
+        return (
+            <S.slideStack key={i} $motion={motion}>
+                {visibleLayers.map(({ img, layerIndex }) =>
+                    renderImageLayer(slide, img, layerIndex, motion),
+                )}
+            </S.slideStack>
+        );
+    };
+
+    return (
+        <S.container ref={rootRef}>
+            <S.sliderArea>
+                <S.slidesLayer>
+                    {slideList.map((slide, i) => renderSlideImageStack(slide, i, false))}
+                </S.slidesLayer>
+            </S.sliderArea>
+            <S.frontSlidesLayer>
+                {slideList.map((slide, i) => renderSlideImageStack(slide, i, true))}
+            </S.frontSlidesLayer>
+            <S.contentArea $bottomMargin={resolvedBottomMargin}>
+                <S.area1 />
+                <S.sliderInfo aria-live="polite">
+                    <S.topBarArea aria-hidden>
+                        <S.topBarFill
+                            key={timeBarKey}
+                            $durationSec={durationSec}
+                            $paused={!inViewport}
+                        />
+                    </S.topBarArea>
+                    <S.sliderContent>
+                        <S.infoArea>
+                            <S.contentWrap>
+                                {slideList.map((slide, i) => {
+                                    const motion = resolveContentMotion(
+                                        i,
+                                        activeIndex,
+                                        prevIndex,
+                                        direction,
+                                    );
+                                    const hasSlideCta =
+                                        slide._ctaSource === "slide" && hasValue(slide.ctaHref);
+
+                                    return (
+                                        <S.slideContent
+                                            key={i}
+                                            $motion={motion}
+                                            $enterMs={contentTransitionMs}
+                                            $exitMs={contentTransitionMs}
+                                            $snap={snapLayout}
+                                            $paused={!inViewport}
+                                        >
+                                            {hasValue(slide.title) && (
+                                                <Typo.h4
+                                                    marginBottom={30}
+                                                    color={slide.color || "foreground"}
+                                                    weight={400}
+                                                    balance
+                                                >
+                                                    {t(slide.title)}
+                                                </Typo.h4>
+                                            )}
+                                            {hasValue(slide.description) && (
+                                                <Typo.p color={slide.color || "foreground"} balance>
+                                                    {t(slide.description)}
+                                                </Typo.p>
+                                            )}
+                                            {hasSlideCta && <SlideCta slide={slide} />}
+                                        </S.slideContent>
+                                    );
+                                })}
+                                {commonCtaSlide && (
+                                    <S.commonContent
+                                        $motion={commonCtaMotion}
+                                        $enterMs={contentTransitionMs}
+                                        $exitMs={contentTransitionMs}
+                                        $snap={snapLayout}
+                                        $paused={!inViewport}
+                                    >
+                                        <SlideCta slide={commonCtaSlide} />
+                                    </S.commonContent>
+                                )}
+                            </S.contentWrap>
+                        </S.infoArea>
+                        <S.bullets role="tablist" aria-label="Slides">
+                            {slideList.map((slide, i) => (
+                                <SlideBullet
+                                    key={i}
+                                    active={i === activeIndex}
+                                    onClick={() => changeSlide(i)}
+                                    label={t(slide.title) || `Slide ${i + 1}`}
+                                />
+                            ))}
+                        </S.bullets>
+                    </S.sliderContent>
+                </S.sliderInfo>
+                <S.area3 />
+            </S.contentArea>
+        </S.container>
+    );
+};
+
+export default Amedist;

package/src/libs/Slider/Amedist/useTrackpadNavigation.js

@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const GESTURE_IDLE_MS = 220;
+const SWIPE_THRESHOLD_PX = 60;
+
+export const useTrackpadNavigation = ({ onRootChange, enabled, onNavigate }) => {
+    const [root, setRoot] = useState(null);
+    const attachRoot = useCallback(
+        (node) => {
+            setRoot(node);
+            onRootChange?.(node);
+        },
+        [onRootChange],
+    );
+    const navigateRef = useRef(onNavigate);
+    navigateRef.current = onNavigate;
+
+    useEffect(() => {
+        if (!enabled || !root) return undefined;
+
+        let lastEventTime = -Infinity;
+        let distance = 0;
+        let axis = null;
+        let consumed = false;
+
+        const onWheel = (event) => {
+            if (
+                event.defaultPrevented ||
+                event.ctrlKey ||
+                event.metaKey ||
+                event.altKey ||
+                event.shiftKey
+            )
+                return;
+            if (
+                event.target instanceof Element &&
+                event.target.closest(
+                    "input, textarea, select, [contenteditable]:not([contenteditable='false'])",
+                )
+            )
+                return;
+
+            const now = performance.now();
+            if (now - lastEventTime > GESTURE_IDLE_MS) {
+                distance = 0;
+                axis = null;
+                consumed = false;
+            }
+            lastEventTime = now;
+
+            const { deltaX, deltaY } = event;
+            if (!deltaX && !deltaY) return;
+            // Lock the gesture axis so diagonal page scrolling cannot turn into navigation.
+            if (!axis) axis = Math.abs(deltaX) > Math.abs(deltaY) * 1.5 ? "x" : "y";
+            if (axis !== "x") return;
+
+            // A native non-passive listener also suppresses browser history swipes
+            // over the slider. Pinch zoom and vertical page scrolling stay native.
+            if (!event.cancelable) return;
+            event.preventDefault();
+            if (consumed) return;
+
+            const unit =
+                event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? root.clientWidth || 800 : 1;
+            if (distance && Math.sign(deltaX) !== Math.sign(distance)) distance = 0;
+            distance += deltaX * unit;
+            if (Math.abs(distance) < SWIPE_THRESHOLD_PX) return;
+
+            consumed = true;
+            navigateRef.current(Math.sign(distance));
+        };
+
+        root.addEventListener("wheel", onWheel, { passive: false });
+        return () => root.removeEventListener("wheel", onWheel);
+    }, [enabled, root]);
+
+    return attachRoot;
+};

package/src/libs/Slider/Amedist/useTrackpadNavigation.test.jsx

@@ -0,0 +1,112 @@
+import { fireEvent, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useTrackpadNavigation } from "./useTrackpadNavigation";
+
+function Example({ enabled = true, onNavigate, observerRef, nodeKey = "initial" }) {
+    const attachRoot = useTrackpadNavigation({
+        onRootChange: observerRef,
+        enabled,
+        onNavigate,
+    });
+    return (
+        <div key={nodeKey} ref={attachRoot} data-testid="slider">
+            <input data-testid="input" />
+        </div>
+    );
+}
+function wheel(element, values = {}) {
+    const event = new WheelEvent("wheel", {
+        bubbles: true,
+        cancelable: true,
+        deltaX: 65,
+        ...values,
+    });
+    fireEvent(element, event);
+    return event;
+}
+afterEach(() => vi.restoreAllMocks());
+describe("Slider trackpad navigation", () => {
+    it("attaches to a callback observer ref and reattaches when the DOM node changes", () => {
+        const observerRef = vi.fn();
+        const onNavigate = vi.fn();
+        const view = render(<Example observerRef={observerRef} onNavigate={onNavigate} />);
+        const oldRoot = view.getByTestId("slider");
+        expect(observerRef).toHaveBeenLastCalledWith(oldRoot);
+        wheel(oldRoot);
+        expect(onNavigate).toHaveBeenCalledExactlyOnceWith(1);
+        view.rerender(
+            <Example observerRef={observerRef} onNavigate={onNavigate} nodeKey="replacement" />,
+        );
+        const newRoot = view.getByTestId("slider");
+        expect(newRoot).not.toBe(oldRoot);
+        expect(observerRef).toHaveBeenLastCalledWith(newRoot);
+        expect(wheel(oldRoot).defaultPrevented).toBe(false);
+        wheel(newRoot, { deltaX: -65 });
+        expect(onNavigate).toHaveBeenCalledTimes(2);
+        expect(onNavigate).toHaveBeenLastCalledWith(-1);
+        view.unmount();
+        expect(observerRef).toHaveBeenLastCalledWith(null);
+    });
+    it.each([
+        [65, 1],
+        [-65, -1],
+    ])("navigates for horizontal delta %i", (deltaX, direction) => {
+        const onNavigate = vi.fn();
+        const view = render(<Example onNavigate={onNavigate} />);
+        expect(wheel(view.getByTestId("slider"), { deltaX }).defaultPrevented).toBe(true);
+        expect(onNavigate).toHaveBeenCalledExactlyOnceWith(direction);
+    });
+    it("accumulates small deltas and ignores momentum across rerenders", () => {
+        let now = 0;
+        vi.spyOn(performance, "now").mockImplementation(() => now);
+        const first = vi.fn();
+        const next = vi.fn();
+        const view = render(<Example onNavigate={first} />);
+        const root = view.getByTestId("slider");
+        wheel(root, { deltaX: 25 });
+        expect(first).not.toHaveBeenCalled();
+        wheel(root, { deltaX: 40 });
+        expect(first).toHaveBeenCalledExactlyOnceWith(1);
+        view.rerender(<Example onNavigate={next} />);
+        for (let i = 0; i < 30; i++) {
+            now += 40;
+            wheel(root);
+        }
+        expect(next).not.toHaveBeenCalled();
+        now += 300;
+        wheel(root, { deltaX: -65 });
+        expect(next).toHaveBeenCalledExactlyOnceWith(-1);
+    });
+    it("leaves vertical gestures native even if the gesture later drifts sideways", () => {
+        const onNavigate = vi.fn();
+        const view = render(<Example onNavigate={onNavigate} />);
+        const root = view.getByTestId("slider");
+        expect(wheel(root, { deltaX: 4, deltaY: 70 }).defaultPrevented).toBe(false);
+        expect(wheel(root).defaultPrevented).toBe(false);
+        expect(onNavigate).not.toHaveBeenCalled();
+    });
+    it("leaves pinch zoom, editing, and outside events untouched", () => {
+        const onNavigate = vi.fn();
+        const view = render(<Example onNavigate={onNavigate} />);
+        expect(wheel(view.getByTestId("slider"), { ctrlKey: true }).defaultPrevented).toBe(false);
+        expect(wheel(view.getByTestId("input")).defaultPrevented).toBe(false);
+        expect(wheel(document.body).defaultPrevented).toBe(false);
+        expect(onNavigate).not.toHaveBeenCalled();
+    });
+    it("removes the listener when disabled or unmounted", () => {
+        const onNavigate = vi.fn();
+        const view = render(<Example onNavigate={onNavigate} />);
+        const root = view.getByTestId("slider");
+        view.rerender(<Example enabled={false} onNavigate={onNavigate} />);
+        expect(wheel(root).defaultPrevented).toBe(false);
+        view.unmount();
+        wheel(root);
+        expect(onNavigate).not.toHaveBeenCalled();
+    });
+    it("normalizes line-based wheel deltas", () => {
+        const onNavigate = vi.fn();
+        const view = render(<Example onNavigate={onNavigate} />);
+        wheel(view.getByTestId("slider"), { deltaX: 4, deltaMode: 1 });
+        expect(onNavigate).toHaveBeenCalledExactlyOnceWith(1);
+    });
+});